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 \ 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>
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>
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>
- Replace MarginEditor component with individual fields (top/bottom/left/right)
- Add link/unlink button with SVG icons to sync margin values
- When linked, all fields share the same value
- Auto-detect linked state when loading from stylesheet
- Match PageSettings UI pattern for consistency
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create useDebounce composable to avoid code duplication
- Apply debounce to TextSettings margin/padding inputs
- Harmonize debounce delay to 500ms across all components
- Fix input lag when typing values like "30mm"
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add usePopupPosition composable for smart popup positioning
(bottom-right → bottom-left → top-right → top-left fallback)
- Refactor ElementPopup with complete controls matching mockup
- Add stylesheet sync: popups initialize from and watch store changes
- Add click-to-close behavior: clicking another element closes popup
- Add CSS property tooltips on all form labels (editor panel + popups)
with dotted underline and monospace code tooltip on hover
- Add field--view-only class and disabled attribute on locked fields
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adds a close button in the top-right corner of the editor panel with double arrow icon. The button closes the panel when clicked.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adds 'rem' as an available unit for margin inputs in both components. Updates useCssSync composable to parse rem values from CSS.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixes margin/padding field initialization when CSS contains 4-value shorthand (e.g., margin: 0mm 0mm 24mm 0mm). Now properly populates both simple and detailed fields, and auto-opens detailed editor when values differ.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major refactoring to improve code quality and reduce duplication:
TextSettings.vue: 1127 → 269 lines (-76%)
New composables:
- useCssUpdater.js: generic CSS update/remove functions
- useCssSync.js: CSS parsing to form fields
New UI components:
- UnitToggle.vue: reusable unit selector buttons
- InputWithUnit.vue: number input with unit toggle
- MarginEditor.vue: simple/detailed margin editor with sync
Benefits:
- Reusable components for other settings panels
- Centralized CSS manipulation logic
- Better separation of concerns
- Easier to test and maintain
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements functional text settings panel with real-time CSS updates:
- Text styling: italic, weight, alignment applied to body selector
- Typography: font-size applied to paragraph selector
- Colors: text color and background with Coloris picker
- Margins/padding: simple and detailed modes for paragraphs
- Smart sync between simple and detailed margin fields
- Automatic CSS property cleanup (removes conflicting properties)
- Parses existing stylesheet values including 4-value shorthand
- Default margins: 0mm top/left/right, 24mm bottom for paragraphs
Technical details:
- Uses Pinia store extractBlock() for CSS manipulation
- Implements isSyncingFromSimple flag to prevent watcher conflicts
- Syncs detailed fields when modifying simple field (even when expanded)
- Removes shorthand properties when using detailed, and vice versa
- Fixed background color alpha channel (0 → 1) for Coloris visibility
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Adjust transition duration to 200ms for smoother crossfade
- Add explicit default values for iframe transform properties
- Simplify transition with 'all' shorthand
- Set explicit transition duration for editor panel
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
When editor panel tab-content is open, the preview iframe now scales down (0.7) and repositions with appropriate margins to provide optimal viewing alongside the editor panel. This creates a smooth transition between full-width preview and side-by-side editing mode.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Wrap all field sections in .settings-subsection divs to match PageSettings structure
- Properly nest margin outer and inner collapsed sections within their parent subsections
- Replace custom color picker with Coloris integration for color and background fields
- Simplify reactive state by removing unused format and picker properties
- Initialize Coloris with dark theme, alpha support, and format toggle
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add click handler on iframe to close Coloris color picker when user clicks
in the preview area. Also improve editor panel spacing and styling consistency.
Coloris Close Fix:
- Import Coloris in App.vue
- Add click listener on iframe document to call Coloris.close()
- Fixes issue where Coloris remained open when clicking in preview iframe
(clicks in iframes don't bubble to parent document)
Editor Styling Improvements:
- Increase EditorPanel width from 30rem to 35rem for better readability
- Add CSS variable --space-xs (0.5rem) for consistent spacing
- Improve form field spacing with gaps and better padding
- Add row-gap to margins subsection
- Fix input-with-color width and button height (1.1rem)
- Add gap to unit-toggle buttons
- Better visual hierarchy with margins on h2 and h3
CSS Changes:
- _forms.scss: Consistent spacing, better input padding, gap utilities
- _variables.scss: Add --space-xs variable
- Compiled CSS updated with new styles
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add functional page number and running title toggles with proper positioning
for left/right pages. Implement smooth crossfade transitions between iframe
reloads to eliminate visual flicker during PagedJS rendering.
Page Numbers & Running Titles:
- Page numbers toggle: adds counter(page) to @bottom-left (left pages) or
@bottom-right (right pages)
- Running title toggle: adds string(title) from h2 chapter titles
- Combined positioning: both elements appear side-by-side in same margin box
- Left pages: "1 Chapter Title" in @bottom-left
- Right pages: "Chapter Title 2" in @bottom-right
- Automatic CSS rule management: adds/removes @page:left, @page:right, and
string-set rules based on checkbox state
- Bidirectional sync: checkboxes reflect existing CSS state on load
Smooth Iframe Transitions:
- Dual iframe system: two iframes alternate as visible/hidden
- Crossfade technique: hidden iframe loads new content while visible remains
displayed, then smooth 300ms opacity transition
- Scroll preservation: saves scroll percentage from visible iframe, restores
to hidden iframe after PagedJS render
- Collision prevention: isTransitioning flag prevents overlapping renders
- Active frame tracking: computed property ensures ElementPopup always
references the visible iframe
Technical details:
- Uses srcdoc to inject HTML with dynamic CSS
- Z-index and opacity manipulation for layering
- CSS transitions (opacity 0.3s ease-in-out)
- Automatic frame swapping after transition completes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add Coloris.js library for enhanced color selection in PageSettings with
automatic button state sync across tab changes.
Features:
- Color picker with swatches, alpha support, and format toggle (hex/rgb/hsl)
- Button positioned to the left of input field
- Automatic sync when switching tabs (remembers selected color)
- Close button and click-outside-to-close functionality
- Dark theme with pill UI style
Changes:
- Install @melloware/coloris package
- PageSettings.vue: Integrate Coloris with data-coloris attribute,
add tab visibility detection via provide/inject, force button update
when returning to document tab
- EditorPanel.vue: Provide activeTab to child components, increase
panel width to 30rem
- _forms.scss: Add .input-with-color styles with custom Coloris
button positioning (absolute positioned to left of input)
- Temporarily comment out rgb/hex format buttons (replaced by Coloris
format toggle)
Technical details:
- Uses provide/inject pattern to detect tab changes
- Triggers synthetic input events to force Coloris button refresh
- Custom CSS overrides to position swatch button correctly
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement immediate vs debounced updates based on input type to improve
UX responsiveness while preventing excessive re-renders.
Update strategy:
- Immediate (0ms): select, buttons, checkboxes, color picker
- Debounced (1s): text inputs, number inputs, range sliders
Changes:
- PageSettings.vue: Split watchers for margin values/units and background
value/format. Extract update logic into reusable functions.
- TextSettings.vue: Add comprehensive watcher system with selective
debouncing for all settings (font, size, color, margins, etc.)
This ensures button clicks (unit toggles, format switches) apply instantly
while typed values (numbers, text) batch updates to reduce CSS re-parsing.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Reorganize editor components into dedicated folder
- Create PageSettings component with page format, margins, background controls
- Create TextSettings component (structure only, to be populated)
- Implement debounced updates (1s delay) to stylesheet store
- Add bidirectional sync between EditorPanel and StylesheetViewer
- Preserve scroll position as percentage when reloading preview
- Move @page rules from App.vue to stylesheet.css for unified management
- Extend css-parsing utils to handle text values (e.g., 'A4', 'portrait')
- Remove unnecessary comments, use explicit naming instead
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
