Fancy Flux Laravel Package

Changed

• BREAKING: Timeline Component Rewritten — Replaced TimelineJS3 (CDN) with a lightweight pure Tailwind CSS + Alpine.js component. No external dependencies.
  • Data structure changed: Events are now simple arrays with date, title, description, icon, emoji, color keys (see docs/timeline.md)
  • FANCY::timeline() facade method removed — The timeline no longer has programmatic control (zoom, navigate, etc.)
  • Flux.timeline() JS helper removed — No JavaScript control API
  • TimelineManager and TimelineController classes deleted
  • resources/js/timeline.js deleted — Remove any import of this file from your app.js
  • Old props (data, height, startAtSlide, timenavPosition, lazy, watermark, etc.) no longer exist

Added

• Timeline: Three layout variants — stacked (default), alternating, horizontal
• Timeline: Per-event color (17 Tailwind colors), icon (Heroicon), emoji accents
• Timeline: Scroll-reveal animation via x-intersect (disable with :animated="false")
• Timeline: heading and description props on root component
• Timeline: Mouse wheel captures horizontal scroll when hovering the horizontal variant
• Emoji Select: Backward-compat slug resolution — old slug values (e.g., "fire") auto-resolve to emoji characters on init

Fixed

• README: Installation instructions moved to top, GitHub remote URL updated to wishborn/fancy
• README: Removed D3 section (moved to fancy-pro)

Migration Guide

1. Update event data format:

// Before (TimelineJS3)
$events = [
    ['start_date' => ['year' => 2024, 'month' => 3], 'text' => ['headline' => 'Founded', 'text' => 'Description']],
];

// After
$events = [
    ['date' => 'March 2024', 'title' => 'Founded', 'description' => 'Description', 'color' => 'blue'],
];

2. Update component usage:

{{-- Before --}}
<flux:timeline :data="$timeline" height="500px" />

{{-- After --}}
<flux:timeline :events="$events" />
<flux:timeline :events="$events" variant="horizontal" />
<flux:timeline :events="$events" variant="alternating" />

3. Remove JS imports — Delete import '...timeline.js' from your app.js

4. Remove facade calls — Replace FANCY::timeline('name')->goToNext() with your own logic

Added

• Timeline Component: Interactive narrative timelines powered by TimelineJS3

  • CDN-loaded TimelineJS3 with CSS isolation for Tailwind compatibility
  • Data-driven with full data source or shorthand events array
  • Eras, groups, and media support
  • Lazy loading for carousel-nested contexts via x-intersect + IntersectionObserver
  • Dark mode with scoped CSS overrides matching Flux's zinc palette
  • Slot for overlay controls (navigation, zoom buttons)
  • Flux.timeline('name') JS helper for programmatic control
  • FANCY::timeline('name') facade for Livewire programmatic control
  • TimelineManager and TimelineController following the Manager/Controller pattern
  • Props: name, data, events, height, startAtSlide, startAtEnd, timenavPosition, timenavHeight, language, font, hashBookmark, dragging, options, lazy
  • Browser tests with Pest 4 (14 tests, 25 assertions)
  • Demo with standalone, custom controls, carousel integration, and shorthand syntax

• Kitchen Sink Demo - Impact Timeline: Added timeline component to the Environmental page showing organizational impact milestones across environmental, social, and economic initiatives with eras

Fixed

• JS Helper Loading: Added timeline.js import to app.js bundle (was missing, causing Flux.timeline is not a function errors for custom controls)

Added

• D3 Component: Advanced data visualizations powered by D3.js

  • Force-directed graphs for network relationships
  • Hierarchical layouts: tree, treemap, sunburst, pack
  • Chord diagrams for matrix flow visualization
  • Dark mode support with automatic color switching
  • Tooltips, zoom/pan, and animation support
  • FANCY::d3('name') facade for programmatic control
  • InteractsWithD3 trait for Livewire components

• D3 Sparkline Component: Compact inline visualizations

  • Types: line, area, bar, win-loss
  • Tailwind color support
  • Min/max markers and endpoint indicators
  • Perfect for table cell visualizations

• D3 Configuration: New config section in fancy-flux.php

  • CDN vs local D3 loading
  • Default color palettes for light/dark modes
  • Animation duration settings

Added

• Action Component - New Props:

  • variant prop: Shape variants - 'default' (rounded rectangle) or 'circle' (perfect circle for icon-only buttons)
  • color prop: Standalone color theming independent of states - blue, emerald, amber, red, violet, indigo, sky, rose, orange, zinc
  • checked prop: Toggle/checkbox behavioral state (emerald by default)
  • avatar prop: Display circular avatar images
  • avatar-trailing prop: Place avatar on trailing side
  • badge prop: Display text badges (notification counts, labels)
  • badge-trailing prop: Place badge on trailing side
  • sort prop: Control element display order (e=emoji, i=icon, a=avatar, b=badge)

• Kitchen Sink Demo - RAMPAGE! Button:

  • Interactive demo showing all Action component features
  • Circle play button that transforms into chaotic cycling button
  • Demonstrates dynamic color, emoji, icon, badge, and sort changes

Changed

• Action Component - Color/State Separation:
  • color prop now takes precedence over all state-based colors
  • States (active, checked, warn, alert) are now purely behavioral when color is set
  • alert state only triggers pulse animation, never changes color

Notes

• No breaking changes: All existing Action component usage continues to work
• States without color prop use their default colors (active=blue, checked=emerald, warn=amber)

Added

• Upgrade Notes: Added comprehensive upgrade guide in TROUBLESHOOT.md covering v1.0.3 to v1.0.11
  • Migration steps and tips
  • New features summary table
  • Quick upgrade command reference

Fixed

• Laravel Boost Integration: Fixed boost:install crash caused by Blade processing <flux:...> components inside [@verbatim](https://github.com/verbatim) blocks
  • Converted guidelines from .blade.php to .md format
  • Code snippets now use standard markdown code blocks instead of <code-snippet> tags

Added

• TROUBLESHOOT.md: New troubleshooting guide with common issues and solutions organized by version
  • Version-specific known issues with resolution steps
  • Breaking change indicators (🔴 BREAKING)
  • Common issues across all versions

Changed

• Updated README.md to reference new troubleshooting documentation

Added

• s13: Carousel Compatibility Audit: Verified Carousel component's nesting capabilities
  • ✅ 3-level deep nesting works correctly (Carousel in Carousel in Carousel)
  • ✅ Event isolation: nested carousel controls don't affect parent carousels
  • ✅ State management: carousels maintain independent state in dynamic Livewire containers
  • ✅ Performance: 10+ carousels on one page with no JavaScript errors
  • ✅ Collapsible containers: carousels work correctly inside <details> elements
  • Added comprehensive browser tests in tests/Feature/Browser/CarouselNestingTest.php
  • Added test demo page at /fancy-flux/carousel-nesting-test

Notes

• D3 placeholder: D3 visualization terminators show placeholders until s12 is complete

Added

• FANCY Facade: Unified API for programmatic access to FancyFlux features

  • FANCY::emoji('slug') - Get emoji character by slug
  • FANCY::emoji()->list() - List all 787+ available emoji slugs
  • FANCY::emoji()->find('slug') - Get full emoji data (char, name, slug, category)
  • FANCY::emoji()->search('query') - Search emojis by name or slug
  • FANCY::emoji()->category('smileys') - Get emojis by category
  • FANCY::carousel('name') - Programmatic carousel control
  • FANCY::prefix(), FANCY::usesFluxNamespace(), FANCY::components() - Configuration access

• EmojiRepository: Slug-based emoji lookup system

  • Kebab-case slugs derived from emoji names (e.g., 'grinning-face', 'fire', 'thumbs-up')
  • 8 categories: smileys, people, animals, food, activities, travel, symbols, flags
  • 787+ emojis with search and filtering

• CarouselManager: Carousel control via FANCY facade

  • next(), prev(), goTo(), goToIndex(), refresh(), refreshAndGoTo()
  • InteractsWithCarousel trait now delegates to FANCY facade (backward compatible)

• Action Component Emoji Support:

  • emoji prop - Leading emoji by slug
  • emoji-trailing prop - Trailing emoji by slug

Changed

• InteractsWithCarousel trait now uses FANCY facade internally (backward compatible)
• Updated documentation with FANCY facade examples

Added

• Action Component: Reusable button component with state variants and flexible icon placement
  • State variants: default, active (blue), warn (amber), alert (pulse animation)
  • Size variants: sm, md, lg
  • Flexible icon placement: left, right, top, bottom, over, under
  • Alert icon with pulsing animation for attention-grabbing states
  • Full dark mode support
  • Livewire wire:click integration
  • Demo page and browser tests

Added

• Comprehensive USAGE.md documentation with tested examples for all use cases

Changed

• Added Tynn badge to README

Fixed

• Simplified carousel controls to use direct Alpine.js scope resolution
• Controls now properly call parent carousel methods via Alpine's scope chain
• Restored backward compatibility for event listeners with ID fallback

Added

• Carousel Component: Flexible carousel/slideshow component with multiple variants

  • Directional variant with prev/next navigation and autoplay support
  • Wizard variant with step-based navigation and numbered indicators
  • Thumbnail variant with image-based navigation and preview thumbnails
  • Data-driven and slot-based usage patterns
  • Programmatic navigation helpers via $this->carousel('name') in Livewire components
  • JavaScript helper via Flux.carousel('name') for Alpine.js integration

• Color Picker Component: Native color input with enhanced UI

  • Swatch preview showing selected color
  • Hex value display (uppercase)
  • Size variants (sm, default, lg)
  • Style variants (outline, filled)
  • Custom preset colors support
  • Full Livewire wire:model integration
  • Works with or without labels

• Service Provider: Automatic component registration

• JavaScript Helpers: Carousel control helpers for Alpine.js integration

• Browser Tests: Comprehensive test coverage for both components

Requirements

• PHP 8.2+
• Laravel 10+ / 11+ / 12+
• Livewire 3.7+ / 4.0+
• Flux UI 2.0+