Commit graph

7 commits

Author SHA1 Message Date
isUnknown
7ed57d000b refactor: integrate StylesheetViewer into EditorPanel code tab
Move StylesheetViewer from standalone fixed panel to integrated component
within EditorPanel's "code" tab. Maintains full functionality including:
- Bidirectional sync with Pinia store and PagedJS preview
- Toggle between read/edit modes
- CSS syntax highlighting
- Debounced updates

Changes:
- EditorPanel.vue: Import and render StylesheetViewer in code tab
- EditorPanel.vue: Add flexbox layout for proper height management
- StylesheetViewer.vue: Convert from fixed positioning to flex container
- App.vue: Remove standalone StylesheetViewer component

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 13:34:33 +01:00
isUnknown
9f10971041 feat: implement reactive EditorPanel with bidirectional sync
- 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>
2025-12-03 15:20:49 +01:00
isUnknown
ae8136a48e refactor: make EditorPanel and ElementPopup fully autonomous
- 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>
2025-11-24 18:18:27 +01:00
isUnknown
7bc0dad32b refactor: reorganize App.vue by functional domains
- 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>
2025-11-24 18:01:47 +01:00
isUnknown
e8298a9fbf refactor: implement Pinia store for stylesheet management
- 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>
2025-11-24 17:55:42 +01:00
isUnknown
f51c77cefe feat: iframe-based PagedJS preview with reactive CSS editor
- 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>
2025-11-24 16:51:55 +01:00
isUnknown
dc0ae26464 init with kirby, vue and pagedjs interactive 2025-11-24 14:01:48 +01:00