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>
The @ffmpeg/ffmpeg package has internal dynamic imports that Turbopack
cannot statically analyze, but they work fine at runtime. This change
moves the import to the loadFFmpeg function where it's needed, allowing
Turbopack to skip static analysis and let the bundler resolve it at runtime.
Fixes: Cannot find module as expression is too dynamic error
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- moved FFmpeg and initializeImageMagick imports to top level (static)
- removed dynamic imports that caused bundler analysis issues
- simplified ImageMagick initialization
- fixes: 'Cannot find module as expression is too dynamic' error
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Updated the heading in the Pastel page from 'Color Playground' to 'Pastel'.
- Adjusted the logo size in the Hero component for better visual balance.
- Removed duplicate/unused Footer components from pastel layout and ui directories.
- Add shortcut hints below tool descriptions in Figlet and Units pages
- Revert experimental button-based shortcut layout in Units
- Remove redundant shortcut hints from Units footer
- Ensure consistent kbd tag styling across the application
- Move sub-routes from /pastel/palettes/* and /pastel/accessibility/* to direct children of /pastel
- Update AppSidebar navigation links
- Update Pastel Navbar and Footer links
- Update Tailwind source directives in pastel/globals.css
- Remove intermediate page files
- Relocate SearchUnits and Category Select into a dedicated row at the top of MainConverter
- Remove them from the converter card header for a cleaner layout
- Update vertical spacing for better visual hierarchy
- Update FontSelector to prevent '/' shortcut from triggering when another input is focused
- Ensure consistent behavior for '/' focus across Figlet and Units tools
- Harmonize category colors with standard Tailwind CSS 500 shades
- Use Rose, Violet, Emerald, Amber, Blue, and Indigo for grouping related units
- Synchronize hex values in units.ts with OKLCH variables in globals.css
- Increase --border opacity in both light and dark modes
- Harmonize Input and Select components with consistent rounded-lg corners
- Replace native selects in MainConverter with styled Select component
- Move unit search into the CardHeader
- Align title, search, and category selector into one row using flexbox
- Update SearchUnits component to allow custom class names and remove hardcoded max-width
- Relocate SearchUnits from a standalone position to inside the main converter card
- Add a subtle border-b separator for visual clarity within the card content
- Consolidate category selection into the main converter card
- Use a space-saving Select component for category switching
- Add category color indicator to the select dropdown
- Delete ConversionHistory component
- Remove history-related logic and state from MainConverter
- Clean up history imports and types in CommandPalette and storage utilities
- Remove history storage functions from lib/units/storage.ts
- Downgrade ESLint to v9 to avoid circular structure errors in v10 config validation
- Downgrade eslint-config-next to v15 for stability
- Configure eslint.config.mjs with FlatCompat and appropriate ignores (.next, out)
- Escape entities in ColorBlindPage and SearchUnits to fix react/no-unescaped-entities
- Use useMemo for debounced function in FigletConverter to fix react-hooks/exhaustive-deps
- Migrate all toast notifications to sonner and remove custom ToastProvider
- Align Card and TextInput styling across Figlet and Pastel (rounded-lg, border-based)
- Fix build error by removing non-existent export in lib/units/index.ts
- Clean up unused Figlet components and constants
- Consolidate common utilities (cn, format, time) into lib/utils
- Remove redundant utility files from pastel and units directories
- Clean up unused components (Separator, KeyboardShortcutsHelp)
- Relocate CommandPalette to components/units/ui/
- Force dark mode on landing page and improve theme persistence logic
- Add FOUC prevention script to RootLayout
- Fix sidebar height constraint in AppShell
- Add Figlet text converter with font selection and history
- Add Pastel color palette generator and manipulation suite
- Add comprehensive Units converter with category-based logic
- Introduce AppShell with Sidebar and Header for navigation
- Modernize theme system with CSS variables and new animations
- Update project configuration and dependencies
- Update Hero and Footer to use proper git branch icon
- Icon shows branching pattern with circles (commits)
- Better representation of git repository link
- Maintains hover color transitions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add file-plus icon to Hero button
- Add file-plus icon to Footer link
- Icons change color on hover (gray → purple)
- Better visual indication for repository links
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove GitHub icon and link from footer
- Repository now hosted at dev.pivoine.art/valknar/kit-ui
- Center footer content with justify-center
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Change gradient-orange-red to gradient-orange-pink
- Use correct gradient class that exists in globals.css
- Fixes missing colors on Audio tool card
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Rename tool from "Vert" to "Convert" across all files
- Update URL: vert.kit.pivoine.art → convert.kit.pivoine.art
- Improve description to highlight WebAssembly technology
- Update metadata keywords from 'vert' to 'convert'
- Better reflect actual features: videos, images, and audio conversion
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Card Hover Improvements:
- Increased gradient overlay opacity from 10% to 30% on hover
- Much better contrast and visibility
- Cards now have more prominent hover state
- Better user feedback on interaction
Figlet Icon Update:
- Changed from document icon to a-arrow-up icon
- Letter 'A' with upward arrow representing text/typography
- Better represents ASCII art text generation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Logo Updates:
- Using authentic Lucide brush and wrench icons
- Wrench vertical, brush horizontal (90° rotation)
- Aligned bottom edges for visual balance
- Scaled up to 5x for better visibility
- Removed center dot for cleaner look
Pastel Icon:
- Changed from paintbrush to proper palette icon
- Palette with thumb hole and color dots
- Better represents color manipulation tool
Visual improvements:
- Clean, professional crossed tools design
- Proper alignment and spacing
- Large, visible icons at all sizes
- Consistent with Lucide icon library
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Logo Update:
- Using official Lucide SVG paths for brush and wrench icons
- Crossed in X formation (45° and -45° rotation)
- Professional, recognizable design from established icon library
Icon Details:
- Wrench (Lucide): Purple gradient (#667eea → #a855f7)
- Brush (Lucide): Orange-to-pink gradient (#f59e0b → #ec4899)
- Brush bristles: Green-cyan fill with transparency
- Center circle: Purple-to-cyan gradient accent
Animations:
- Wrench draws in with path animation
- Brush draws in with delay
- Center circle pops in with spring effect
- Smooth, professional entrance
Favicon:
- Matching crossed Lucide icons for 64x64
- Scaled appropriately for small sizes
- Dark background with gradient icons
Benefits:
- Authentic, recognizable icons from Lucide library
- Professional design language
- Consistent with modern UI/UX standards
- Clear symbolism: utility (wrench) + creativity (brush)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Logo Redesign:
- Clean, minimal circular badge design
- Beautiful gradient background (indigo → purple → cyan)
- White outlined icons in Lucide/Heroicons style
- Wrench and paintbrush side-by-side
- Professional and modern aesthetic
Icon Design:
- Wrench: Simple outline with open-end head
- Paintbrush: Clean brush with bristles and handle
- Both icons use consistent 6px stroke width
- Smooth entrance animations (slide in from sides)
Favicon Update:
- Matching circular badge design for 64x64
- Clear visibility at small sizes
- Consistent white icons on gradient background
- Professional brand identity
Colors:
- Background gradient: #667eea → #8b5cf6 → #06b6d4
- Icons: Pure white (#ffffff) for maximum contrast
- Clean, modern, accessible design
Animations:
- Background circle scales in
- Wrench slides in from left
- Paintbrush slides in from right
- Smooth, subtle entrance effects
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Logo Redesign:
- Simple, beautiful crossed design (wrench × brush in X formation)
- Wrench: Bottom-left to top-right with purple gradient
- Brush: Top-left to bottom-right with orange-red gradient
- Center circle at intersection with purple-to-cyan gradient
- Clean, minimal aesthetic with smooth animations
Favicon Update:
- Matching crossed design scaled for 64x64
- Clear visibility at small sizes
- Professional and memorable icon
Visual Elements:
- Wrench: Indigo (#667eea) to Purple (#a855f7) gradient
- Brush handle: Amber (#f59e0b) to Red (#ef4444) gradient
- Brush ferrule: Gray metal finish
- Brush bristles: Green (#10b981) to Cyan (#06b6d4) gradient
- Center: Purple to Cyan radial gradient
Animations:
- Initial rotation animation on logo
- Progressive drawing of wrench and brush
- Bristles expand effect
- Center circle pops in with spring animation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added Figlet tool with 373 fonts for ASCII art text generation
- Created new gradient-yellow-amber for terminal/retro aesthetic
- Updated Stats component from 6 to 7 tools
- Updated Footer badge to 7 tools and added Figlet link
- Added Figlet to README Available Tools section
Figlet Features:
- 373 curated fonts from xero/figlet-fonts collection
- Live preview and fuzzy search
- Multiple export formats (text, PNG, SVG, code snippets)
- Shareable URLs and keyboard shortcuts
- Perfect for ASCII banners, terminal art, and retro designs
Color: Yellow (#eab308) to Amber (#f59e0b) gradient
URL: https://figlet.kit.pivoine.art🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Logo Redesign:
- Simplified from toolbox with 3 tools to clean suitcase with 1 brush
- Purple gradient suitcase with handle and latch detail
- Single colorful brush inside (orange-to-red handle, green-to-cyan bristles)
- Smoother animations with reduced complexity
- Better visual clarity and brand identity
Favicon Update:
- Matching simplified design scaled for 64x64
- Clear icon that works at small sizes
- Consistent with main logo design
Visual Elements:
- Suitcase: Purple (#a855f7) to Indigo (#6366f1) gradient
- Brush handle: Orange (#f59e0b) to Red (#ef4444) gradient
- Brush bristles: Green (#10b981) to Cyan (#06b6d4) gradient
- Animated entrance with subtle scale and fade
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created new gradient-pink-rose utility (pink to rose)
- Updated Draw tool to use gradient-pink-rose instead of gradient-orange-pink
- Draw card now displays pink (#ec4899) matching footer link color
- Paint retains gradient-orange-pink for orange identity
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Color System Improvements:
- Added accentColor prop to ToolCard for consistent color identity
- Each tool now has its signature color for hover effects
- Title and arrow icon now change to tool's accent color on hover
- Footer links match card colors for unified visual language
Hero Section Enhancement:
- Added prominent CTA buttons (Explore Tools + View on GitHub)
- Gradient animated button with hover effects
- GitHub button with icon and border hover effect
- Better visual hierarchy with button placement
- Updated scroll indicator text to "Scroll to explore"
User Experience:
- Improved hover interactions with color-coded feedback
- Better visual consistency across all components
- Enhanced call-to-action visibility
- Smooth transitions and micro-interactions
Color Palette:
- Vert: #10b981 (emerald green)
- Paint: #f97316 (vibrant orange)
- Pastel: #a855f7 (purple)
- Stirling: #667eea (indigo blue)
- Units: #2dd4bf (cyan)
- Draw: #ec4899 (pink)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Updated footer tool links to use exact gradient colors from cards
- Vert: emerald green (#10b981)
- Paint: vibrant orange (#f97316)
- Pastel: purple (#a855f7)
- Stirling: indigo blue (#667eea)
- Units: cyan (#2dd4bf)
- Draw: pink (#ec4899)
- Increased footer link font size from text-sm to text-base for better readability
- Applied consistent sizing to both Links and Tools columns
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added Draw tool to ToolsGrid with collaborative badges
- Updated Stats component to show 6 tools
- Updated Footer to show 6 tools and include Draw link
- Updated README with Draw tool description
- Draw tool accessible at draw.kit.pivoine.art
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
🎯 Smooth Scroll Behavior:
- Added smooth scroll CSS for seamless navigation
- Scroll indicator now links to #tools section
- Added hover states for scroll indicator
- Accessibility: respects prefers-reduced-motion
🏷️ Tool Badges:
- Added feature badges to each tool card
- Vert: Privacy, Open Source, Free
- Paint: Browser-Based, Free
- Pastel: Open Source, WCAG, Free
- Subtle glassmorphic badge design
⬆️ Back to Top Button:
- Animated button appears after scrolling 300px
- Smooth scroll to top on click
- Hover tooltip with "Back to top" label
- Scale animations on hover/tap
- Progress bar at top showing scroll position
- Gradient progress indicator
♿ Accessibility:
- Added prefers-reduced-motion support
- Proper ARIA labels
- Keyboard accessible
- Smooth animations respect user preferences
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
✨ Visual Enhancements:
- Unique gradients per tool (green-teal for Vert, orange-pink for Paint, indigo-purple for Pastel)
- Added new gradient utilities for better color differentiation
📊 Stats Section:
- New animated stats component showing "3 Tools, 100% Open Source, ∞ Privacy First"
- Glassmorphism cards with hover effects
- Icon badges for each stat
🔍 Enhanced Metadata:
- Comprehensive Open Graph tags for social sharing
- Twitter Card support
- Enhanced SEO with detailed keywords (vert, paint, pastel)
- Added SVG favicon with gradient toolbox icon
- Viewport meta tag and preconnect optimization
🔗 Improved Footer:
- 3-column responsive layout
- GitHub repository link with icon
- Quick links to all tools (Vert, Paint, Pastel)
- Tool count badge
- Updated tech stack mention (Next.js 16 & Tailwind CSS 4)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The artifact attestation step was failing with:
"Resource not accessible by integration"
Added missing attestations: write permission to fix the issue.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Automated Docker image builds on push to main
- Multi-architecture support (amd64, arm64)
- Publish to GitHub Container Registry (GHCR)
- Build caching for faster builds
- Artifact attestation for supply chain security
- Semantic versioning support with tags
- Manual workflow dispatch option
- Updated README with CI/CD documentation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Next.js 16 with Turbopack
- React 19
- Tailwind CSS 4 with CSS-first config
- Framer Motion animations
- Animated logo and hero section
- Tool cards for Vert and Paint
- Glassmorphism effects and gradient animations
- Fully responsive design
- Docker support with Nginx
- Static export ready
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
valknarandCopilot
