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>
- 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>
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 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>
- 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>
