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
Updated @ffmpeg/core from 0.12.6 to 0.12.10 and updated CDN URL references.
The newer version may have better Turbopack compatibility.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The 'Cannot find module as expression is too dynamic' error occurs at runtime
when FFmpeg tries to dynamically load the core module. Using CDN URLs bypasses
this bundler issue entirely since absolute URLs don't require bundler analysis.
Switched to jsdelivr CDN for FFmpeg core and WASM files - this is a proven
approach used by many projects.
Fixes: wasmLoader.ts runtime error on media conversion
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Import FFmpeg at module level instead of dynamic import. The build now
compiles cleanly without Turbopack bundler warnings.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
