- Add rem unit option to all margin controls
- Implement proper margin and background updates with debouncing
- Integrate Coloris properly like PageSettings
- Add highlight.js syntax highlighting for readonly CSS
- Add Prettier formatting when exiting edit mode
- Use global unit toggle styles instead of custom
- Sync isEditing state with stylesheet store
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements page edge hover detection and click handling:
- Hover near page edges (30px threshold) shows light outline
- Click on page edge opens PagePopup for template customization
- PagePopup component similar to ElementPopup but for @page rules
- Both popups coordinate to show only one at a time
🤖 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>
- Disable auto-formatting while in editing mode
- Format CSS only when exiting editing mode
- Auto-disable editing mode when switching tabs
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Moves loader HTML and CSS from App.vue to dedicated PreviewLoader component for better code organization.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Displays a spinning loader in the top-right corner of the iframe while PagedJS is rendering. The loader automatically adjusts position when the editor panel is open.
🤖 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>
Integrates Prettier into the stylesheet store for automatic CSS formatting:
- Installs prettier v3.7.4 with postcss plugin
- Implements formatContent() function using Prettier API
- Auto-formats CSS after 500ms of inactivity (debounced)
- Prevents infinite loops with isFormatting flag
- Ensures consistent indentation and line breaks
- Cleans up extra blank lines and formatting issues
This ensures the CSS in the Code tab stays clean and properly formatted
after reactive edits from TextSettings and PageSettings panels.
🤖 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>
- Add sass-embedded as dev dependency for SCSS compilation
- Add background color to buttons for better visibility
- Add --curve CSS variable for consistent easing transitions across components
- Rebuild compiled CSS files
🤖 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>
- Move all CSS files to public/assets/css/src/ as SCSS
- Add public/assets/css/style.scss as main entry point
- Compile SCSS to public/assets/css/style.css
- Update src/style.css to import compiled CSS
- Add .css.map for source maps
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove duplicate CSS files from src/assets
- Keep all stylesheets in public/assets/css for static serving
- Update style.css imports to reference public assets
- Cleaner separation: public for styles, src for Vue components
🤖 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>
Replace the checkbox input with a proper toggle switch component for
mode édition control. The toggle provides better visual feedback with
an animated switch and color transitions (gray when off, blue when on).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Make stylesheet fully editable via textarea with 1s debounce
- Allow editing CSS blocks in ElementPopup with live updates
- Replace syntax highlighting with plain textarea for better editing UX
- Updates reflect in PagedJS preview after debounce timeout
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Merges the iframe branch which implements a clean, scalable architecture:
- Iframe-based PagedJS preview with reactive CSS editing
- Pinia store for centralized stylesheet management
- Autonomous components (EditorPanel, ElementPopup) with no prop drilling
- CSS parsing utilities with proper selector escaping
- Clean separation of concerns with functional domain organization
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Move all popup logic into ElementPopup component (state, positioning, click handling)
- Make EditorPanel autonomous with direct store access
- Simplify App.vue by removing prop drilling and intermediary logic
- Update EditorPanel to control paragraph font-size instead of .about
- Fix CSS parsing: escape selectors in extractCssValue and updateCssValue
- Remove hardcoded .about references from PagedJsWrapper
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Group variables and functions by domain instead of by type
- Split handleIframeClick into smaller focused functions
- Add clear section comments for better navigation
- Sections: Store, PagedJS config, Iframe preview, Editor panel, Element popup, Lifecycle
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add Pinia state management
- Create centralized stylesheet store with utility methods
- Extract CSS parsing utilities to src/utils/css-parsing.js
- Refactor ElementPopup to manage state independently via store
- Simplify App.vue by removing prop drilling
- Fix iframe rendering with srcdoc instead of document.write
- Improve API: updateProperty uses object parameter for clarity
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Isolate PagedJS in iframe to avoid DOM/CSS conflicts
- Add EditorPanel for global CSS controls
- Add StylesheetViewer with highlight.js syntax highlighting
- Add ElementPopup for element-specific CSS editing
- CSS modifications update preview reactively
- Support px/rem/em units
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
