Also restore scroll handling to ExportPanel and PresetLibrary, and
remove maxHeight cap from CodeSnippet in ExportPanel.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Value input now takes full width on its own row; unit selects and
swap button sit on a separate row below, each taking equal flex space.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Shared components (components/ui/):
- slider-row.tsx: SliderRow — label + display value + Slider, replaces
inline slider blocks in FileConverter, QROptions
- color-input.tsx: ColorInput — color swatch + hex text input pair,
replaces repeated inline patterns in QROptions, KeyframeProperties,
FaviconGenerator
Media tool (FileConverter.tsx):
- Remove all shadcn Select/SelectTrigger/SelectContent/SelectItem
- Replace with native <select> + selectCls (matches AnimationSettings
and all other tools)
- Use SliderRow for video/audio bitrate and image quality sliders
- Net: -6 shadcn Select trees, consistent with every other tool
QROptions.tsx:
- Use SliderRow for margin slider (remove raw Slider import)
- Use ColorInput for foreground + background color pairs
KeyframeProperties.tsx:
- Use ColorInput for background color pair (keep local SliderRow which
has a different layout with number input)
FaviconGenerator.tsx:
- Use ColorInput for background + theme color pairs
AnimationSettings.tsx:
- Remove dead bg-[#1a1a2e] per-option className (global CSS handles
select option styling via bg-popover)
Delete:
- components/media/ConversionOptions.tsx — dead code (no imports),
contained the shadcn Label/Input/Select/Slider patterns being replaced
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
ToolCard: larger icon (w-11 h-11) with violet glow on hover, top shimmer
accent line, primary-tinted badges, arrow in glass pill, stronger border/
shadow on hover, all badges shown, overflow-hidden for clean rendering
ToolsGrid: gap-4, section heading with module count callout, max-w-5xl
Stats: align to max-w-5xl, horizontal layout per stat (icon + value/label),
rounder icon container w-9 h-9
Hero: warm up CTA button with ambient bg-primary/[0.07] fill at rest
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
AppHeader:
- Remove shadcn Button → native 8×8 rounded glass icon buttons
- Shrink to h-14 (from h-16) to match sidebar header
- Add current tool name breadcrumb (navTitle) next to collapse toggle;
shows context when sidebar is collapsed or on mobile
AppSidebar:
- Remove shadcn Button → native button for mobile close
- Sidebar narrows to w-60 (from w-64); matches h-14 header
- Active state: slim absolute left-bar (0.5px) replaces harsh border-l-2;
bg-primary/10 tint kept; no border on the link itself
- Nav item text refined: 13px font-medium title + 9px mono description
- Border opacity drops to border-border/20 throughout (from border-border)
- Footer: smaller mono text, lighter icon opacity
AppPage:
- Shrink from py-8 / text-2xl to py-5 / text-lg font-semibold
- Icon wrapped in 7×7 glass pill (bg-primary/10) matching tool cards
- Description moved inline under title as 10px mono, truncated
- border-b border-border/20 separator between header and tool content
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Right column now has two elements: preview canvas (shrink-0) and a
single glass card with Keyframes|Export|Presets tabs (flex-1).
Defaults to Keyframes tab. Removes the standalone timeline card and
the redundant embedded timeline in the mobile edit panel.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Layout:
- AnimationEditor: lg:grid-cols-5 (2/5 edit, 3/5 visual); full viewport
height; mobile Edit|Preview glass pill tabs; timeline embedded in edit
panel on mobile, standalone on desktop; Export|Presets custom tab
panel at the bottom of the right column
Components (all shadcn removed):
- AnimationSettings: Card/Label/Input/Select/Button → native inputs;
direction & fill mode as 4-pill selectors; easing as native <select>;
∞ iterations as icon pill toggle
- AnimationPreview: Card/ToggleGroup/Button → glass card; speed pills
as inline glass pill group; element picker as compact icon pills;
playback controls as glass icon buttons; subtle grid bg on canvas
- KeyframeTimeline: Card/Button → glass card; embedded prop for
rendering inside another card on mobile without double glass
- KeyframeProperties: Card/Label/Input/Button → bare content section;
SliderRow uses native number input; bg color toggle as pill button
- ExportPanel: Card/Tabs/Button → bare section; CSS|Tailwind custom
tab switcher; dark terminal (#06060e) code blocks
- PresetLibrary: Card/Tabs → bare section; category pills replace Tabs;
preset cards use glass border-border/20 bg-primary/3 styling
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- QRCodeGenerator: lg:grid-cols-5 layout (2/5 options, 3/5 preview);
full viewport height; mobile Configure|Preview glass pill tabs
- QRInput: remove shadcn Textarea/Card; native <textarea> in glass panel
section; character counter in monospace
- QROptions: remove shadcn Card/Label/Input/Button/Select; EC level as
4 pill buttons with recovery % label; native color inputs + pickers;
transparent toggle as small pill; keep shadcn Slider for margin
- QRPreview: remove shadcn Card/Button/Skeleton/ToggleGroup/Tooltip/Empty;
glass card fills full height; PNG button with inline size pill group
(256/512/1k/2k); empty state and pulse skeleton match other tools
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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>
