Extract shared actionBtn and iconBtn constants into lib/utils/styles.ts
and replace all 11 local definitions across tool components.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Cryptographically secure generator for 5 types:
- Password: configurable charset + entropy strength meter
- UUID: crypto.randomUUID()
- API Key: hex/base62/base64url with optional prefix
- Hash: SHA-1/256/512 of custom input or random data
- Token: variable byte-length in hex or base64url
All using Web Crypto API — nothing leaves the browser.
Registered in lib/tools.tsx with RandomIcon (dice).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
logoStamp and pathFlicker defined at global CSS scope (outside @theme)
so they are always emitted. Logo uses sharp stamp+bounce entrance with
flickering path reveals.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Use scaleIn/fadeIn keyframes from globals.css for the SVG entrance
animation and path group fade-ins.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Drop richColors, apply dark glass background with subtle per-type
border tints (primary/success, red/error, amber/warning, blue/info).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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>
