Flatten ref({ value }) to simple ref(), replace 9 updateX functions with
a generic updateProp driven by descriptor arrays, and loop over descriptors
in generatePreviewCss/loadValuesFromStylesheet/applyAllStyles. Remove
trivial passthrough computed properties. (-123 lines)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Fix template check 'carte' → 'map' so map subpages are served by API
- Add parseMarker() and enrich parseCarte() with static image, intro, markers
- Include map children in parseGeoformat() alongside chapters
- Resolve map block references in chapters to full carte data
- Update narrative store flattening with new carte fields
- Replace MapBlock placeholder with full carte rendering (title, image, tags, intro, markers with icons and blocks)
- Add default marker-pin.svg for markers without custom icon
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Standardize French template names to English across blueprints,
content files, PHP templates, Vue components and Pinia stores.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Both use field--view-only styling with disabled inputs and
"Fonctionnalité à venir" tooltip. Italic checkbox remains active.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Keep only A4/A5 + "Personnalisé" option. Width/height fields use same
layout as margin fields and are editable only in custom mode.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Margins: px + mm only. Font sizes: px only.
em/rem buttons are commented out, not deleted, for potential future use.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Previously, changing unit (e.g. mm → px) kept the numeric value unchanged,
causing visual changes. Now values are converted through a px pivot unit
so the rendered size stays the same.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dispatch input events on color inputs after syncFromStore so Coloris
updates its ::before pseudo-element swatches with loaded values.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Guard watcher-triggered renders in usePreviewRenderer until first
explicit render completes, preventing premature renders with default
styles. Also: disable Contenu tab, update content/blueprints, add
global disabled button styles, minor formatting.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Added Cmd+P (Mac) or Ctrl+P (Windows/Linux) to trigger printPreview():
- Prevents default browser print dialog
- Triggers custom print preview function
- Updated print button tooltip to show keyboard shortcut
- Added platform detection for correct symbol display (⌘ or Ctrl)
Works in all contexts (main document and iframe).
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Added \ key to toggle the editor panel open/closed:
- Opens to 'document' tab when panel is closed
- Closes panel when it's open
- Updated button tooltips to indicate the keyboard shortcut
Works in all contexts (main document and iframe).
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Added Escape key handler to close ElementPopup or PagePopup when open.
The handler checks which popup is visible and calls its close method.
Works in all contexts (main document and iframe) using the existing
handleKeyboardShortcut function.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Added keyboard event listener to iframe document to capture shortcuts
when user is focused inside the preview. Previously, keyboard events
inside iframes didn't bubble up to the parent document.
Changes:
- Add handleKeyboardShortcut function in App.vue
- Attach keydown listener to main document (for focus outside iframe)
- Attach keydown listener to iframe document (for focus inside iframe)
- Clean up listener on unmount
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Fix grid layout: add second column for input (grid-template-columns: var(--input-h) 1fr)
- Ensure color picker button is clickable with cursor pointer and pointer-events auto
- Set color picker z-index to 10000 to display above all UI elements
- Add global styles to ensure Coloris button is always clickable
Fixes issues where:
- Color picker appeared behind ElementPopup
- Button was not consistently clickable
- Grid layout was missing second column definition
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add Cmd+S (Mac) or Ctrl+S (Windows/Linux) keyboard shortcut to save CSS
- Detect platform to display correct shortcut symbol (⌘ or Ctrl)
- Prevent default browser save behavior
- Translate tooltips to French
- Show shortcut in button tooltip
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed TextSettings fields not updating the stylesheet and preview after
the store refactoring that made content a computed property.
- Add missing font watcher in TextSettings.vue
- Update useCssUpdater.js to use store.replaceBlock() instead of
writing to readonly store.content
- Update createRule() to append to store.customCss instead of store.content
All TextSettings fields (font, size, margins, padding, alignment) now
correctly update the stylesheet and preview.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add two improvements to StylesheetViewer:
1. Scrollable CSS sections
- Add max-height (500px) and overflow-y to custom CSS editor
- Applies to both read-only and editable modes
- Improves UX when content exceeds viewport
2. Complete stylesheet export button
- Exports merged base CSS + custom CSS to single file
- Filename format: <narrative-slug>-style.print.css
- Includes informative comments:
* Header with narrative title and download date
* Section markers for base CSS and custom CSS
- Full-width button below custom CSS section
- Download via blob + automatic cleanup
Export file structure:
- Header comment (narrative info, date)
- Base CSS section with comment
- Custom CSS section with comment
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add CssFileImport component to StylesheetViewer allowing users to
import CSS files to replace custom CSS content.
Features:
- Click to select file via file dialog
- Drag & drop support with visual feedback
- File validation (.css only, max 1MB)
- Error messages for invalid files
- Direct replacement of customCss content
New component:
- src/components/ui/CssFileImport.vue
Integration:
- Added at top of StylesheetViewer
- Emits 'import' event with file content
- Content replaces customCss in store
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace content watcher with customCss watcher and add isEditing watcher
to properly sync field values when CSS is edited in StylesheetViewer.
Changes:
- Watch customCss instead of content for real-time updates
- Watch isEditing to reload values when exiting edit mode
- Use isUpdatingFromStore + nextTick to prevent circular updates
- Ensure popup fields stay in sync with stylesheet changes
Now when editing CSS manually in the Code tab, ElementPopup fields
update automatically when exiting edit mode.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add ability to lock/unlock inheritance for element styles while preserving
custom values. Locked styles are commented in the CSS and restored when unlocked.
New utilities:
- Create css-comments.js with comment/uncomment functions
- Add parseValueWithUnit to css-parsing.js for value parsing
- Add getBlockState, commentCssBlock, uncommentCssBlock to stylesheet store
ElementPopup improvements:
- Detect inheritance state from CSS block state (active/commented/none)
- Capture computed styles from iframe when unlocking with no custom CSS
- Comment/uncomment CSS blocks instead of deleting them on lock toggle
- Use nextTick to prevent race condition with watchers during popup init
- Extract values from both active and commented CSS blocks
Workflow:
1. First unlock: Capture computed styles → create CSS block
2. Lock: Comment the CSS block (styles preserved in comments)
3. Unlock again: Uncomment the block (styles restored)
Fixes issue where CSS rules were created on popup open due to
watcher race conditions during initialization.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement complete custom CSS management system:
- Separate base CSS (readonly) and custom CSS (editable)
- Save custom CSS to Kirby backend per narrative
- Visual save button with state indicators (dirty/saving/success/error)
- CSRF-protected API endpoint for CSS operations
- Dual-editor StylesheetViewer (base + custom with edit mode toggle)
- Auto-format custom CSS with Prettier on edit mode exit
Backend changes:
- Add web2print Kirby plugin with POST/GET routes
- Add customCss field to narrative blueprint
- Add CSRF token meta tag in header
- Include customCss and modified timestamps in JSON template
- Install code-editor plugin for Kirby panel
Frontend changes:
- Refactor stylesheet store with baseCss/customCss refs
- Make content a computed property (baseCss + customCss)
- Add helper methods: replaceBlock, replaceInCustomCss, setCustomCss
- Update all components to use new store API
- Create SaveButton component with FAB design
- Redesign StylesheetViewer with collapsable sections
- Initialize store from narrative data on app mount
File changes:
- Rename stylesheet.css → stylesheet.print.css
- Update all references to new filename
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
