App Details card is now flex-1 min-h-0 so it fills the remaining left
column height, matching the right panel. Generate/Reset buttons are
pinned at the bottom of the card with a border-t divider.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Rewrites all three media components to use the glass panel design
language, fixed-height two-panel layout, and glass action buttons.
- FileConverter: lg:grid-cols-5 split — left 2/5 is the upload zone;
right 3/5 has output format pill grid + codec/quality options +
convert/reset buttons + scrollable results panel; mobile 'Upload |
Convert' tab switcher auto-advances on file selection; removed all
Card/Button/Label/Input shadcn imports; keeps Select+Slider for
codec/quality controls
- FileUpload: large flex-1 drop zone fills the left panel; file list
shows glass item cards with metadata chips; native buttons; removes
shadcn Button dependency
- ConversionPreview: glass card replaces Card; native progress bar
(div with bg-primary/65) replaces shadcn Progress; size reduction
shown as emerald/muted badge; media previews in dark-bordered
containers; all buttons are glass action buttons
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Rewrites all three units components to use the same glass panel
layout, lg:grid-cols-5 two-panel split, and interactive patterns
established by the calculate tool.
- MainConverter: category sidebar (left 2/5) replaces Select dropdown;
converter card + scrollable conversion grid (right 3/5); mobile
'Category | Convert' tab switcher; clickable conversion cards set
target unit; glass Grid/Chart toggle
- SearchUnits: native input with glass border, glass dropdown panel,
compact result rows matching font selector style
- VisualComparison: polished gradient bars, tighter spacing, cleaner
value display; all drag logic preserved
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Rewrites all four ASCII tool components to share the same design
language and spatial structure as the Calculator & Grapher tool.
Layout
- New responsive 2/5–3/5 grid (was fixed 2+1 col); matches Calculate
- Left panel: text input card + font selector filling remaining height
- Right panel: preview as the dominant full-height element
- Mobile: tabbed Editor / Preview switcher (same pattern as Calculator)
TextInput
- Replace shadcn Textarea with native <textarea>
- Glass border pattern (border-border/40, focus:border-primary/50)
- Monospace font, consistent counter styling
FontSelector
- Replace Card + shadcn Tabs + Button + Input + Empty with native elements
- Glass panel (glass rounded-xl) matching Calculate panel style
- Custom tab strip mirrors Calculator mobile tab pattern
- Native search input with glass border
- Font list items: border-l-2 left accent for selected state,
hover:bg-primary/8, rose heart for favorites
- Auto-scrolls selected item into view on external changes
- Simplified empty state to single italic line
FontPreview
- Replace Card + Button + Badge + ToggleGroup + Tooltip + Empty
- Glass panel with header row (label + font tag + action buttons)
- Controls row: native toggle buttons with primary/10 active state
- Terminal window: dark #06060e background, macOS-style chrome
(rose/amber/emerald dots), font name watermark — the hero element
- PNG export captures entire terminal including chrome at 2x
- Inline skeleton loader with pulse animation replaces Skeleton import
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds a full-featured mathematical calculator and interactive function
grapher at /calculate. Powered by Math.js v15 with a HiDPI Canvas
renderer for the graph.
- Evaluates arbitrary math expressions (trig, log, complex, matrices,
factorials, combinatorics, and more) with named variable scope
- Persists history (50 entries) and variables via localStorage
- 32 quick-insert buttons for constants and functions
- Interactive graph: pan (drag), zoom (scroll), crosshair tooltip
showing cursor coords and f₁(x)…f₈(x) values simultaneously
- Up to 8 color-coded functions with inline color pickers and
visibility toggles
- Discontinuity detection for functions like tan(x)
- Adaptive grid labels that rescale with zoom
- Responsive layout: 2/5–3/5 split on desktop, tabbed on mobile
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace boolean paused with AnimState ('playing'|'paused'|'ended')
- Use onAnimationEnd to detect when finite animations finish
- Play re-enables after end and restarts the animation (replay)
- Pause only active while playing; Restart always available
- Config changes auto-restart preview so edits are instantly visible
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Inject only @keyframes (not .animated class rule) per preset thumbnail
so the main preview's .animated rule cannot override them
- Drive thumbnail animation entirely via inline style properties
- Remove isActive/currentName — presets should never appear selected
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Swap 💜 for a filled Lucide Heart icon in text-primary in both Footer and AppSidebar
- Style Valknar link with animated underline (decoration-primary on hover)
- Add sidebar footer with copyright, Heart, Valknar link, and GitFork source link
- Add author field to package.json
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Rename ColorPage → ColorManipulation (no AppPage wrapper inside)
- Move AppPage + title/description/icon to color/page.tsx, consistent with other tools
- AppPage now accepts icon prop directly; removes internal usePathname lookup and 'use client'
- All tool pages pass tool.summary as description and tool.icon as icon
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add a sixth tool with live SVG preview, customizable foreground/background
colors, error correction level, margin control, and export as PNG (256–2048px)
or SVG. URL params enable shareable state. All processing runs client-side
via the qrcode package.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add comment style selector (shadcn Select) to wrap generated ASCII art
with language-appropriate comment syntax (// # -- ; /* */ <!-- --> """).
Refactor preview controls to use shadcn ToggleGroup, Tooltip, and Badge.
Alignment is disabled when a comment style is active.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Create lib/tools.tsx as single source of truth for all tool metadata
(title, shortTitle, navTitle, description, summary, icon, etc.)
- Update AppSidebar to render nav from centralized tools list with
descriptions, remove collapse footer button
- Update AppHeader with sidebar collapse toggle, tool short title,
and app logo; remove breadcrumbs
- Update AppPage to auto-resolve tool icon from pathname
- Update ToolsGrid/ToolCard to use shared tools data, remove per-card
gradients for uniform styling
- Add per-tool HTML title via metadata exports (title template in root
layout)
- Style landing page and 404 headings with primary theme color
- Add Toolbox icon to hero CTA, GitFork icon link in footer
- Remove footer from error page and "View on Dev" buttons
- Extract ColorPage client component for RSC metadata compatibility
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Removed manual theme switching logic and ThemeProvider
- Installed and configured tailwind-scrollbar plugin
- Updated FileConverter and ConversionOptions to use shadcn Input
- Refactored FontSelector to use shadcn Tabs
- Simplified global styles and adjusted glassmorphic effects
