Store code snippets as JS variables in components.js and reference them
in the template. This avoids multi-line template literals in HTML
attributes while still providing copy functionality.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Multi-line template literals in HTML attributes cause Alpine.js parsing
errors. Replaced @click="copyCode(...)" with static <pre><code> blocks.
Also simplified the x-text expression to use template literals.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added {% raw %}{% endraw %} tags around the confirm_modal code snippets
to prevent Jinja2 from interpreting the {{ }} as template tags.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added documentation and interactive examples for both confirm_modal
and confirm_modal_dynamic macros, showing danger, warning, info variants
and dynamic message capabilities.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fixed copyCode template literal by using single quotes for outer attribute
- Added TPL-012 architecture rule to detect double quotes inside multi-line
copyCode template literals that break HTML attribute parsing
- Pattern: @click="copyCode(`...`)" with inner double quotes breaks parsing
- Solution: Use @click='copyCode(`...`)' with single quotes for outer attribute
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Changed escaped double quotes to single quotes inside Jinja template
strings to prevent Alpine.js parsing error "Unexpected end of input".
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create action_dropdown macro in dropdowns.html supporting:
- Loading/disabled state via loading_var parameter
- Custom loading label
- Icon support
- Primary/secondary variants
- Update code quality dashboard to use new macro
- Add Dropdowns section to components page with examples:
- Basic dropdown
- Action dropdown with loading state
- Context menu (3-dot)
- Variant showcase (primary, secondary, ghost)
Architecture validation now passes with 0 errors and 0 warnings.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add language_selector.html to the Jinja Macros section with:
- Entry in Available Macro Files grid
- Live demo showing all three variants:
- language_selector() - full dropdown with labels
- language_selector_compact() - flag icon only
- language_toggle() - toggle for 2 languages
- Code examples with copy functionality
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add missing icons: chat-alt, exclamation-circle, clipboard-copy
- Replace x-collapse with x-transition in category-nav and filter-sidebar
(x-collapse requires the Collapse plugin which isn't loaded)
- Fix review_form macro call to include images_model parameter
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Details Modal (Table Layout) example to components page
- Shows header with icon and status badge
- Stats cards grid (imported, updated, errors, total)
- Key-value table with icon-labeled rows
- Add Log Details Modal example with live demo
- Level-based coloring (warning=yellow, error=red, critical=purple)
- Message, exception, and stack trace sections
- Copy-to-clipboard for stack traces
- Both error and warning log demo buttons
- Update jinja-macros.md with Details Modal Pattern documentation
- Document the pattern structure and key features
- Link to components library for live examples
- Add Alpine.js state variables for new modal demos
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add interactive demos for all new e-commerce macros:
Priority 4 - Navigation & Discovery:
- Category navigation with mega menu
- Breadcrumb variants
- Search bar with autocomplete
- Filter sidebar with all filter types
- Sort dropdown
Priority 5 - Social Proof & Trust:
- Star ratings (static, dynamic, sizes)
- Compact ratings for lists
- Interactive rating input
- Rating summary with distribution
- Review cards with helpful voting
- Review form
- Trust badges grid
- Trust banner variants
- Payment method icons
- Guarantee badges
- Security seals
- Checkout trust section
Demo state includes sample data for categories, filters,
reviews, and ratings to showcase all component features.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add live demos for:
- Product Gallery with image navigation and thumbnails
- Variant Selector with size buttons and color swatches
- Product Info with title, price, rating, stock status
- Product Tabs with description, specifications, reviews
Add demoProductDetail state with full product data including
images, sizes, colors, specifications, and sample reviews.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add E-commerce section with live demos for all shop macros
- Add demo products and cart state to components.js
- Add demo methods: demoAddToCart, demoToggleWishlist, demoRemoveFromCart
- Showcase product cards, mini cart, add-to-cart functionality
- Add Macros section navigation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update admin components page with documentation for:
- New Macros section listing all available shared macros with imports
- Pagination section with live interactive examples
- Copy-to-clipboard functionality for code snippets
- Dark mode support for all new sections
This serves as a living style guide for developers implementing
new admin pages using the shared component library.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
