* feat(electron): update electron-builder.yml to specify artifact naming convention for Windows builds. This change enhances clarity and consistency in the build output.
* feat(electron): implement a file logger for the main process
- Added a new logger module that writes logs to `{userData}/logs/main.log` with daily rotation and retains logs for the last 7 days.
- Integrated logging functionality into the main process, replacing console error messages with log entries for better error tracking and debugging.
- Introduced IPC handlers to retrieve the log directory path for user access.
- Updated the preload and main files to utilize the new logging system, enhancing overall application reliability and maintainability.
* feat(mcp): introduce layered design workflow and selection management
- Added a new layered design workflow with tools: `design_skeleton`, `design_content`, and `design_refine` for improved multi-section design generation.
- Implemented segmented prompt retrieval in `get_design_prompt` to allow focused access to design knowledge.
- Created new API endpoints for managing canvas selection state with `selection.get` and `selection.post`, enabling real-time updates and synchronization.
- Enhanced document management with live selection fetching and improved node operations for better design content handling.
- Updated README and CLAUDE.md to reflect new features and usage guidelines for the layered design process.
* feat(mcp): enhance document management and design tools
- Updated `openDocument` to always re-fetch the live canvas, ensuring user edits are captured.
- Introduced new tools: `get_design_prompt` for retrieving design guidelines and `batch_design` for executing multiple design operations using a DSL.
- Improved `handleInsertNode` and `handleUpdateNode` to include validation for node data and return the final node state after operations.
- Enhanced design prompt with detailed PenNode schema and layout rules for better AI-generated designs.
- Added validation functions to ensure node data integrity during CRUD operations.
- Updated `handleOpenDocument` to provide context-aware design prompts based on document content.
* feat(electron): enhance build configuration and auto-update functionality
- Updated `electron-builder.yml` to include artifact naming conventions for Windows and Linux builds.
- Enhanced NSIS installer settings to create desktop and start menu shortcuts.
- Improved path handling for GUI applications on Windows to ensure proper environment variable inheritance.
- Refactored auto-update logic in `main.ts` to streamline update checks and improve error handling.
- Added new IPC handlers for managing pending file paths and improved file handling during application startup.
- Updated `use-electron-menu` hook to handle additional menu structures and improve document loading logic.
* chore: bump version to 0.3.1 and update project description
- Updated version in package.json to 0.3.1.
- Enhanced project description to highlight OpenPencil as the world's first open-source AI-native vector design tool featuring concurrent Agent Teams and Design-as-Code capabilities.
- Refactored auto-updater to utilize constants for GitHub repository details, improving maintainability.
- Introduced a new constants file to centralize shared values for the Electron application, enhancing code clarity and reducing duplication.
- Updated various components to use new constants for port file handling and window dimensions, ensuring consistency across the application.
* feat(ai): clarify mobile design guidelines and mockup usage
- Updated design guidelines to emphasize that "mobile" requests should generate actual mobile-sized screens (375x812) instead of desktop mockups.
- Added critical notes regarding the use of phone mockups, specifying they should only be used for marketing showcases and not for functional mobile screens.
- Enhanced clarity on sizing and layout rules for mobile and web designs to ensure consistent application of design principles.
* fix(canvas): improve text centering, layout inference, and Pencil format rendering
- Resolve fit-content parent dimensions in computeLayoutPositions instead of
using 0 (which caused negative available space and broken child positioning)
- Reduce text width estimation minimum from 20px to 1px to fix centering of
narrow single-character text in fixed-size centered frames
- Add inferLayout() to detect padding-only frames as layout containers, so
padding offsets are applied to children (fixes badge text ignoring padding)
- Use Fabric's fontSize * 1.13 for single-line text height in centering
calculations instead of fontSize * lineHeight
- Add fontWeight propagation to text width/height estimation functions
- Refine defaultLineHeight() tiers for better Pencil format compatibility
- Support Pencil's singular `effect` property alongside `effects` array
- Handle plain color strings in fill/stroke resolution for Pencil format
- Add directional stroke rendering as synthetic border rectangles
- Add icon_font node type rendering via lookupIconByName
- Fix z-order reconciliation to use fresh canvas object map after text recreation
- Fix canvas initialization race: defer reference tracking until canvas is ready
- Resolve $variable references with circular reference guards
* feat(types): add icon_font node type with panel and store support
- Add IconFontNode type to pen.ts for icon_font nodes storing iconFontName
- Extend property panel and icon section to recognize icon_font nodes
- Add icon_font type icon in layer panel
- Support icon_font in document tree utilities
* feat(ai): improve design generation accuracy and validation
- Add pre-validation pass to fix text with explicit pixel height to fit_content
- Enhance validation tree dump with textGrowth and lineHeight fields
- Update orchestrator prompts with structural patterns from Pencil analysis
- Simplify role-resolver defaults to match Pencil conventions
- Only force textGrowth=fixed-width on text >15 chars in streaming insertion
* feat(ai): optimize generation pipeline and fix streaming layout
- Disable LLM validation layer (pre-validation heuristics still run)
- Remove visual-ref pipeline (3 fewer LLM calls per generation)
- Compress sub-agent prompt and design principles (~70% smaller)
- Remove width>480 guards so mobile gets root frame height expansion
- Add gap field to orchestrator rootFrame format and guidance
- Default icon_font nodes to lucide family in generation heuristics
* feat(ai): load full Lucide icon set and default icon_font to lucide
- Load all 1,729 Lucide icons as primary set (replaces 286 hand-picked)
- Keep Feather as fallback for unmatched names
- Default iconFontFamily to 'lucide' during .pen file normalization
* feat(codegen): add icon_font support to all 8 code generators
Output Lucide icon references instead of 'Unknown node' comments.
React/RN use component syntax, HTML/Vue/Svelte use data-lucide,
Flutter/SwiftUI/Compose use framework-native icon APIs.
* feat(panels): replace product card quick action with food app homepage
* feat(electron): implement preferences management and app storage abstraction
- Introduced a new preferences management system in Electron, replacing localStorage with a JSON-based preferences file.
- Added IPC handlers for getting, setting, and removing preferences, ensuring data persistence across sessions.
- Created an app storage utility to provide a consistent API for accessing preferences in both Electron and web environments.
- Updated various components and stores to utilize the new app storage system for improved data handling and synchronization.
- Enhanced the initialization process to load preferences at startup, ensuring a seamless user experience.
* fix(electron): update desktop entry configuration for OpenPencil
- Enhanced the desktop entry in electron-builder.yml to include detailed application metadata.
- Added fields for Name, Exec, Terminal, Type, Icon, Categories, and MimeType to improve application integration on Linux systems.
* fix(electron): prevent automatic publishing during build
- Updated the Electron app build command to include the `--publish never` flag, ensuring that builds do not automatically publish to the repository.
* refactor(electron): remove GitHub publish configuration from electron-builder.yml
- Deleted the publish section to prevent automatic publishing during builds, aligning with recent changes to the build process.
---------
Co-authored-by: Fini <fini.yang@gmail.com>
* feat(mcp): enhance document management and design tools
- Updated `openDocument` to always re-fetch the live canvas, ensuring user edits are captured.
- Introduced new tools: `get_design_prompt` for retrieving design guidelines and `batch_design` for executing multiple design operations using a DSL.
- Improved `handleInsertNode` and `handleUpdateNode` to include validation for node data and return the final node state after operations.
- Enhanced design prompt with detailed PenNode schema and layout rules for better AI-generated designs.
- Added validation functions to ensure node data integrity during CRUD operations.
- Updated `handleOpenDocument` to provide context-aware design prompts based on document content.
* feat(electron): enhance build configuration and auto-update functionality
- Updated `electron-builder.yml` to include artifact naming conventions for Windows and Linux builds.
- Enhanced NSIS installer settings to create desktop and start menu shortcuts.
- Improved path handling for GUI applications on Windows to ensure proper environment variable inheritance.
- Refactored auto-update logic in `main.ts` to streamline update checks and improve error handling.
- Added new IPC handlers for managing pending file paths and improved file handling during application startup.
- Updated `use-electron-menu` hook to handle additional menu structures and improve document loading logic.
* chore: bump version to 0.3.1 and update project description
- Updated version in package.json to 0.3.1.
- Enhanced project description to highlight OpenPencil as the world's first open-source AI-native vector design tool featuring concurrent Agent Teams and Design-as-Code capabilities.
- Refactored auto-updater to utilize constants for GitHub repository details, improving maintainability.
- Introduced a new constants file to centralize shared values for the Electron application, enhancing code clarity and reducing duplication.
- Updated various components to use new constants for port file handling and window dimensions, ensuring consistency across the application.
* feat(ai): clarify mobile design guidelines and mockup usage
- Updated design guidelines to emphasize that "mobile" requests should generate actual mobile-sized screens (375x812) instead of desktop mockups.
- Added critical notes regarding the use of phone mockups, specifying they should only be used for marketing showcases and not for functional mobile screens.
- Enhanced clarity on sizing and layout rules for mobile and web designs to ensure consistent application of design principles.
* fix(canvas): improve text centering, layout inference, and Pencil format rendering
- Resolve fit-content parent dimensions in computeLayoutPositions instead of
using 0 (which caused negative available space and broken child positioning)
- Reduce text width estimation minimum from 20px to 1px to fix centering of
narrow single-character text in fixed-size centered frames
- Add inferLayout() to detect padding-only frames as layout containers, so
padding offsets are applied to children (fixes badge text ignoring padding)
- Use Fabric's fontSize * 1.13 for single-line text height in centering
calculations instead of fontSize * lineHeight
- Add fontWeight propagation to text width/height estimation functions
- Refine defaultLineHeight() tiers for better Pencil format compatibility
- Support Pencil's singular `effect` property alongside `effects` array
- Handle plain color strings in fill/stroke resolution for Pencil format
- Add directional stroke rendering as synthetic border rectangles
- Add icon_font node type rendering via lookupIconByName
- Fix z-order reconciliation to use fresh canvas object map after text recreation
- Fix canvas initialization race: defer reference tracking until canvas is ready
- Resolve $variable references with circular reference guards
* feat(types): add icon_font node type with panel and store support
- Add IconFontNode type to pen.ts for icon_font nodes storing iconFontName
- Extend property panel and icon section to recognize icon_font nodes
- Add icon_font type icon in layer panel
- Support icon_font in document tree utilities
* feat(ai): improve design generation accuracy and validation
- Add pre-validation pass to fix text with explicit pixel height to fit_content
- Enhance validation tree dump with textGrowth and lineHeight fields
- Update orchestrator prompts with structural patterns from Pencil analysis
- Simplify role-resolver defaults to match Pencil conventions
- Only force textGrowth=fixed-width on text >15 chars in streaming insertion
* feat(ai): optimize generation pipeline and fix streaming layout
- Disable LLM validation layer (pre-validation heuristics still run)
- Remove visual-ref pipeline (3 fewer LLM calls per generation)
- Compress sub-agent prompt and design principles (~70% smaller)
- Remove width>480 guards so mobile gets root frame height expansion
- Add gap field to orchestrator rootFrame format and guidance
- Default icon_font nodes to lucide family in generation heuristics
* feat(ai): load full Lucide icon set and default icon_font to lucide
- Load all 1,729 Lucide icons as primary set (replaces 286 hand-picked)
- Keep Feather as fallback for unmatched names
- Default iconFontFamily to 'lucide' during .pen file normalization
* feat(codegen): add icon_font support to all 8 code generators
Output Lucide icon references instead of 'Unknown node' comments.
React/RN use component syntax, HTML/Vue/Svelte use data-lucide,
Flutter/SwiftUI/Compose use framework-native icon APIs.
* feat(panels): replace product card quick action with food app homepage
* feat(electron): implement preferences management and app storage abstraction
- Introduced a new preferences management system in Electron, replacing localStorage with a JSON-based preferences file.
- Added IPC handlers for getting, setting, and removing preferences, ensuring data persistence across sessions.
- Created an app storage utility to provide a consistent API for accessing preferences in both Electron and web environments.
- Updated various components and stores to utilize the new app storage system for improved data handling and synchronization.
- Enhanced the initialization process to load preferences at startup, ensuring a seamless user experience.
* fix(electron): update desktop entry configuration for OpenPencil
- Enhanced the desktop entry in electron-builder.yml to include detailed application metadata.
- Added fields for Name, Exec, Terminal, Type, Icon, Categories, and MimeType to improve application integration on Linux systems.
---------
Co-authored-by: Fini <fini.yang@gmail.com>
* feat(mcp): enhance document management and design tools
- Updated `openDocument` to always re-fetch the live canvas, ensuring user edits are captured.
- Introduced new tools: `get_design_prompt` for retrieving design guidelines and `batch_design` for executing multiple design operations using a DSL.
- Improved `handleInsertNode` and `handleUpdateNode` to include validation for node data and return the final node state after operations.
- Enhanced design prompt with detailed PenNode schema and layout rules for better AI-generated designs.
- Added validation functions to ensure node data integrity during CRUD operations.
- Updated `handleOpenDocument` to provide context-aware design prompts based on document content.
* feat(electron): enhance build configuration and auto-update functionality
- Updated `electron-builder.yml` to include artifact naming conventions for Windows and Linux builds.
- Enhanced NSIS installer settings to create desktop and start menu shortcuts.
- Improved path handling for GUI applications on Windows to ensure proper environment variable inheritance.
- Refactored auto-update logic in `main.ts` to streamline update checks and improve error handling.
- Added new IPC handlers for managing pending file paths and improved file handling during application startup.
- Updated `use-electron-menu` hook to handle additional menu structures and improve document loading logic.
* chore: bump version to 0.3.1 and update project description
- Updated version in package.json to 0.3.1.
- Enhanced project description to highlight OpenPencil as the world's first open-source AI-native vector design tool featuring concurrent Agent Teams and Design-as-Code capabilities.
- Refactored auto-updater to utilize constants for GitHub repository details, improving maintainability.
- Introduced a new constants file to centralize shared values for the Electron application, enhancing code clarity and reducing duplication.
- Updated various components to use new constants for port file handling and window dimensions, ensuring consistency across the application.
* feat(ai): clarify mobile design guidelines and mockup usage
- Updated design guidelines to emphasize that "mobile" requests should generate actual mobile-sized screens (375x812) instead of desktop mockups.
- Added critical notes regarding the use of phone mockups, specifying they should only be used for marketing showcases and not for functional mobile screens.
- Enhanced clarity on sizing and layout rules for mobile and web designs to ensure consistent application of design principles.
* fix(canvas): improve text centering, layout inference, and Pencil format rendering
- Resolve fit-content parent dimensions in computeLayoutPositions instead of
using 0 (which caused negative available space and broken child positioning)
- Reduce text width estimation minimum from 20px to 1px to fix centering of
narrow single-character text in fixed-size centered frames
- Add inferLayout() to detect padding-only frames as layout containers, so
padding offsets are applied to children (fixes badge text ignoring padding)
- Use Fabric's fontSize * 1.13 for single-line text height in centering
calculations instead of fontSize * lineHeight
- Add fontWeight propagation to text width/height estimation functions
- Refine defaultLineHeight() tiers for better Pencil format compatibility
- Support Pencil's singular `effect` property alongside `effects` array
- Handle plain color strings in fill/stroke resolution for Pencil format
- Add directional stroke rendering as synthetic border rectangles
- Add icon_font node type rendering via lookupIconByName
- Fix z-order reconciliation to use fresh canvas object map after text recreation
- Fix canvas initialization race: defer reference tracking until canvas is ready
- Resolve $variable references with circular reference guards
* feat(types): add icon_font node type with panel and store support
- Add IconFontNode type to pen.ts for icon_font nodes storing iconFontName
- Extend property panel and icon section to recognize icon_font nodes
- Add icon_font type icon in layer panel
- Support icon_font in document tree utilities
* feat(ai): improve design generation accuracy and validation
- Add pre-validation pass to fix text with explicit pixel height to fit_content
- Enhance validation tree dump with textGrowth and lineHeight fields
- Update orchestrator prompts with structural patterns from Pencil analysis
- Simplify role-resolver defaults to match Pencil conventions
- Only force textGrowth=fixed-width on text >15 chars in streaming insertion
* feat(ai): optimize generation pipeline and fix streaming layout
- Disable LLM validation layer (pre-validation heuristics still run)
- Remove visual-ref pipeline (3 fewer LLM calls per generation)
- Compress sub-agent prompt and design principles (~70% smaller)
- Remove width>480 guards so mobile gets root frame height expansion
- Add gap field to orchestrator rootFrame format and guidance
- Default icon_font nodes to lucide family in generation heuristics
* feat(ai): load full Lucide icon set and default icon_font to lucide
- Load all 1,729 Lucide icons as primary set (replaces 286 hand-picked)
- Keep Feather as fallback for unmatched names
- Default iconFontFamily to 'lucide' during .pen file normalization
* feat(codegen): add icon_font support to all 8 code generators
Output Lucide icon references instead of 'Unknown node' comments.
React/RN use component syntax, HTML/Vue/Svelte use data-lucide,
Flutter/SwiftUI/Compose use framework-native icon APIs.
* feat(panels): replace product card quick action with food app homepage
* feat(electron): implement preferences management and app storage abstraction
- Introduced a new preferences management system in Electron, replacing localStorage with a JSON-based preferences file.
- Added IPC handlers for getting, setting, and removing preferences, ensuring data persistence across sessions.
- Created an app storage utility to provide a consistent API for accessing preferences in both Electron and web environments.
- Updated various components and stores to utilize the new app storage system for improved data handling and synchronization.
- Enhanced the initialization process to load preferences at startup, ensuring a seamless user experience.
---------
Co-authored-by: Fini <fini.yang@gmail.com>
* feat(boolean-operations): implement boolean operations in the editor
- Added a new BooleanToolbar component for union, subtract, and intersect operations.
- Integrated boolean operations into the layer context menu and keyboard shortcuts.
- Enhanced the editor layout to include the boolean toolbar for improved user interaction.
- Updated internationalization support with new translation keys for boolean operations.
- Bumped version to 0.3.0 to reflect the addition of these features.
* refactor(editor): update editor layout and panels for improved functionality
- Replaced the PropertyPanel with a new RightPanel that includes both Property and Code panels.
- Removed the CodePanel from the main editor layout and integrated it into the RightPanel.
- Updated keyboard shortcuts to switch the right panel to the code tab.
- Enhanced the LayerPanel with a resizable width feature for better user experience.
- Added internationalization support for new right panel labels and code panel features.
- Introduced new code generation capabilities for various frameworks in the CodePanel.
- Improved overall layout structure for better responsiveness and usability.
* feat(electron): implement .op file association and enhance file handling
- Added support for .op file association in electron-builder, allowing OpenPencil documents to be opened directly from the file system.
- Implemented IPC handlers for opening and reading .op files, ensuring proper loading of document content.
- Enhanced the main process to handle file opening events on macOS and single-instance locking on Windows/Linux.
- Updated the renderer to listen for file open events and load documents accordingly.
- Improved README to reflect new file association feature.
* fix(canvas): improve layout accuracy for AI-generated designs
- Unify lineHeight default via canonical defaultLineHeight() function
- Unify text measurement by removing duplicate estimators in generation-utils
- Fix optical centering formula to scale proportionally with fontSize
- Round layout positions to whole pixels to prevent sub-pixel artifacts
- Recursively sanitize nested x/y in streaming layout containers
- Fix input trailing icon alignment using fill_container instead of space_between
* feat(canvas): right-align agent badge and add breathing glow border
- Agent badge now right-aligned to frame's right edge instead of after label
- Added breathing glow border around agent-owned frames during generation
- Glow border uses same color and lifecycle as the agent badge
- Removed unused BADGE_GAP constant and useDocumentStore import
* feat(code-panel): enhance tab scrolling functionality and add scrollbar utility
- Introduced left and right scroll buttons for tab navigation in the CodePanel, improving user experience for navigating long tab lists.
- Added a custom utility to hide scrollbars for a cleaner interface.
- Updated styles for better responsiveness and usability in the CodePanel layout.
* fix(docs): update Discord invite links in multiple README files
- Replaced outdated Discord invite links with the new link across all language-specific README files.
- Ensured consistency in the documentation for community engagement.
* feat(code-panel): enhance system prompt for responsive design
- Updated the ENHANCE_SYSTEM_PROMPT to emphasize the importance of responsive design in code rewriting.
- Added detailed guidelines for converting fixed pixel widths to relative units and using responsive Tailwind breakpoints.
- Ensured that the output remains visually faithful on desktop while adapting gracefully across screen sizes.
* feat(docs): add WeChat group information to README.zh.md and include group image
- Introduced a new section in the Chinese README to provide details about the WeChat group for community engagement.
- Added an image representing the WeChat group for better visibility and user interaction.
* feat(electron): enhance theme management and title bar overlay for Windows/Linux
- Updated the `setTheme` method in the Electron API to accept custom colors for the title bar overlay, improving theme synchronization across platforms.
- Adjusted title bar overlay colors for Windows and Linux to ensure proper visibility and aesthetics.
- Enhanced the top bar component to read computed CSS colors and apply them dynamically, ensuring a consistent user interface.
- Improved handling of theme changes in the application to support background and foreground color customization.
* fix(screenshot): update screenshot image for improved clarity and quality
* fix(docs): update WeChat group image path in README.zh.md for consistency
* fix(ai): fix post-generation validation pipeline and text centering
- Fix Agent SDK validation: save temp screenshots inside project dir
(.openpencil-tmp/) so Claude Code plan mode can read them, instead
of /tmp/ which is outside the project sandbox
- Enrich validation tree dump with fill colors, stroke, fontSize,
fontWeight, textAlign, cornerRadius, opacity for comprehensive
visual analysis
- Add multi-round validation with quality scoring (threshold 8/10),
500ms stabilization delay between rounds
- Add detailed debug logging to applyValidationFixes showing which
nodes were found/skipped and property changes
- Fix canvas sync needsTextbox check to also account for textAlign
(matching isFixedWidthText in factory), preventing IText↔Textbox
thrashing on every sync tick
- Auto-center text in vertical+center layouts by expanding to full
container width and injecting textAlign:'center'
- Force Textbox for non-left-aligned text so textAlign is respected
(IText ignores width and computes its own)
* fix(canvas): use precise text width estimation for fit-content layout
Remove the 14% safety factor from text width estimation when computing
fit-content/natural-width text dimensions. IText auto-computes its own
width and ignores our setting, so the safety margin only inflated the
layout allocation, making text appear left-shifted within its container.
* fix(canvas): center fit-content text in horizontal layouts
For text nodes with fit-content width in horizontal layouts, set
textAlign:'center' to compensate for width estimation inaccuracy.
The estimated box is typically wider than the actual rendered text,
causing left-aligned text to appear visually shifted. Centering
distributes the estimation error evenly on both sides.
* feat(ai): show validation details in checklist panel
- Accumulate validation log (screenshot, analysis, fixes) instead of
overwriting status messages, so the full process is visible
- Preserve step thinking content in buildFinalStepTags (was discarded)
- Add details field to pipeline items and render in checklist UI
- Each validation step now shows: screenshot captured, issues found,
quality score, fixes applied
* feat(ai): add visual reference pipeline types and integration hooks
- Add DesignSystem and VisualReference types to ai-types
- Add 'visual-ref' mode to AIDesignRequest and SubTask.htmlReference
- Detect visual-ref candidates in chat handlers (landing pages, websites)
- Wire visual-ref mode in design-generator and orchestrator
- Inject HTML reference snippets into sub-agent prompts
* feat(ai): add modular design principles for sub-agent context
- Add design-principles module with topic files: color, typography,
spacing, composition, components
- Selectively load relevant principles based on prompt content
- Inject design principles into sub-agent system prompts
* feat(ai): implement visual reference pipeline
- Add design-system-generator: generates color/typography/spacing tokens
- Add design-code-generator: generates HTML/CSS from design system
- Add html-renderer: renders HTML to screenshot via html2canvas
- Add visual-ref-orchestrator: coordinates the full pipeline
(design system → HTML code → screenshot → enrich subtasks)
- Add html2canvas dependency for client-side HTML rendering
* feat(mcp): default filePath to live canvas and fix cross-platform issues
- Default all MCP tool filePath to live://canvas when omitted, so tools
operate on the real-time canvas instead of stale files
- Remove filePath from required params in all tool schemas (21 interfaces)
- Fix mcp-server-manager.ts using process.cwd() which fails in Electron
production on Linux — now checks ELECTRON_RESOURCES_PATH first
- Fix stopMcpHttpServer using SIGTERM on Windows — use taskkill instead
- Force new children reference in applyExternalDocument to ensure canvas
sync subscriber always detects MCP-pushed document updates
* feat(mcp): enhance design prompt with semantic roles, CJK typography, and layout rules
Add comprehensive design knowledge to MCP design prompt for better
AI-generated designs: design type detection (mobile vs desktop), full
semantic role reference with context-aware defaults, CJK typography
rules, expanded text/layout/form guidelines, and detailed post-processing
documentation.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* feat(ai): implement intent classification for chat handlers
- Replace hardcoded keyword matching with a lightweight LLM call to classify user intent in chat messages.
- Introduce a new function `classifyIntent` to determine if the request is for design generation or conversation.
- Update design request handling in `useChatHandlers` to utilize the new classification method.
- Enhance design prompt documentation to reflect changes in design type detection based on intent rather than keywords.
* fix(ai): handle string qualityScore in validation response parsing
The LLM sometimes returns qualityScore as a string (e.g. "8" instead of 8),
causing it to fall through to 0. Also hide misleading "quality: 0/10" display
when the score couldn't be determined, and log raw response for debugging.
* fix(ai): increase validation timeout to 90s and fix quality score parsing
Agent SDK validation requires spawning a process, reading the image, and
analyzing it — 30s was consistently timing out. Also handle string
qualityScore values from LLM responses and hide misleading 0/10 display.
* fix(ai): fix validation timeout and response parsing
- Increase validation timeout from 30s to 180s (Agent SDK needs time
for subprocess spawn + OAuth auth + multi-turn image reading)
- Strip <tool_use> XML blocks from Agent SDK response before extracting
JSON — the tool call XML was confusing the regex, causing qualityScore
to parse as 0 despite valid JSON being present
- Handle string qualityScore values and hide misleading "quality: 0/10"
- Revert unnecessary direct API key approach for validation
* fix(ai): prevent node ID collisions between generations
When generating new content on a canvas with existing nodes, AI-generated
IDs (e.g. brand-spacer) would collide with previous generations. Now
captures pre-existing node IDs at generation start and checks against
them during upsert sanitization. Remapped IDs are tracked in
generationRemappedIds so progressive streaming updates can still find
their nodes.
* fix(ai): require styleGuide in orchestrator plan and fix validation detail icons
- Add fallback default styleGuide when orchestrator LLM omits it
- Strengthen prompt to mark styleGuide as REQUIRED
- Replace emoji icons in validation details with [done]/[pending]/[error]
markers for consistent styling with the checklist design system
* feat(server): add port file plugin for server instance discovery
- Introduce a new Nitro plugin that writes a port file on server startup to allow the MCP server to discover the running instance, whether it's a development server or Electron.
- Implement error handling in the Electron main process for writing the port file, logging any failures.
- Update Vite configuration to include additional external dependencies in the rollup configuration.
* feat(electron): implement IPC for retrieving pending file paths
- Added a new IPC handler `file:getPending` to retrieve and clear the pending file path when the React app mounts.
- Updated the Electron API to include `getPendingFile` for renderer access.
- Enhanced the `useElectronMenu` hook to load any pending file on application startup.
- Updated UI components to reflect changes in file handling and improved user experience.
* fix(panels): replace emoji icons with styled icons in validation checklist
- Parse [done]/[pending]/[error] prefixes in detail lines and render as
styled circle icons matching the parent checklist design system
- Replace remaining emoji markers in design-validation.ts with text prefixes
- Fix isApplied detection to recognize new [done] Applied marker
* refactor(electron): update settings path to use platform-standard app data directory
- Changed the settings file path to utilize Electron's user data directory for better cross-platform compatibility.
- Updated the settings writing function to ensure the user data directory is created if it doesn't exist.
- Added comments to clarify the storage location for different operating systems.
- Implemented a fixed partition for localStorage/cookies to maintain data across server port changes.
* feat(ai): enhance validation with pre-checks, structural fixes, and border detection
- Add design-pre-validation.ts: pure code checks before LLM validation
- Invisible container detection (same fill as parent → auto-add border)
- Sibling consistency (majority-rule for height/cornerRadius)
- Add structural fixes to validation: addChild/removeNode operations
- Icon injection via lookupIconByName with server fallback
- autoFixParentLayout with child count guard to prevent layout breakage
- Add strokeColor/strokeWidth to safe fix properties for border fixes
- Simplify intent classification: all design requests use visual-ref pipeline
- Fix checklist: "Found N issues" now shows [done] instead of [pending]
- Fix qualityScore: only update when > 0 to preserve valid round scores
* fix(ai): cherry-pick safe validation improvements, drop aggressive pre-checks
Keep: stroke tree dump bug fix (object not array), qualityScore=0 false
positive detection, fit_content→fixed safety guard, empty path removal,
type-specific sibling consistency, repeated fix filtering, screenshot
extraction to design-screenshot.ts.
Drop: detectForcedFixedHeight (destroyed input/button heights),
MAX_VALIDATION_ROUNDS 5 (too many rounds), removal of quality threshold
early stop, section regeneration phase.
---------
Co-authored-by: Fini <fini.yang@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
* chore(electron): update mac build scripts for improved artifact handling
- Modified the `electron:build:mac-arm64` script to rename the generated YAML file for better clarity.
- Adjusted the `electron:build:mac-both` script to run builds sequentially without file renaming logic, ensuring consistent output.
* chore(electron): enable notarization for macOS builds and update build workflow secrets
- Added notarization support in `electron-builder.yml` for enhanced security.
- Updated GitHub Actions workflow to include necessary Apple credentials for notarization.
* chore(electron): add additional secrets for macOS notarization in build workflow
- Included CSC_LINK and CSC_KEY_PASSWORD in the GitHub Actions workflow to support code signing for macOS builds.
* feat(types): add ImageFitMode type and objectFit to ImageNode
Support fill/fit/crop/tile image scaling modes, matching Figma's
image fill behavior. Default is 'fill' (cover) for backward compat.
* feat(canvas): render images per fill mode with native crop
Add computeImageTransform helper supporting fill/fit/crop/tile modes.
Fill/crop uses FabricImage native cropX/cropY instead of clipPath to
avoid conflict with parent frame clipping. Tile mode creates a Rect
with Pattern fill. Detect mode changes via __needsRecreation flag for
object recreation when switching between tile and non-tile modes.
* feat(panels): add image fit mode dropdown to property panel
New ImageSection component with Fill/Fit/Crop/Tile dropdown for
image nodes. Wired into PropertyPanel between icon and appearance
sections.
* feat(figma): preserve image scale mode from Figma import
Map Figma imageScaleMode (FIT/FILL/TILE) to objectFit property on
imported ImageNodes so fill mode is preserved across import.
* fix(canvas): fix zoom-to-fit bounds inflated by clipped children
computeDocBounds was recursing into frame children, inflating the
bounding box beyond visible frame bounds. Now only recurses into
groups. Also use double-RAF in Figma import for reliable timing.
* feat(figma): implement Figma clipboard paste functionality
- Added a new hook, useFigmaPaste, to handle pasting Figma clipboard data into the canvas.
- Integrated clipboard data extraction and processing to convert Figma nodes into PenNodes.
- Enhanced keyboard shortcuts to attempt reading Figma data from the system clipboard as a fallback.
- Introduced utility functions for decoding and processing Figma clipboard HTML data.
- Updated editor layout to utilize the new Figma paste functionality.
* feat(figma): implement Figma clipboard support for pasting nodes
- Added a new hook, `useFigmaPaste`, to handle Figma clipboard data extraction and processing.
- Integrated Figma clipboard support into the editor layout and keyboard shortcuts for seamless pasting.
- Updated README to reflect changes in file format from `.pen` to `.op`.
- Refactored AI service methods to route to appropriate provider SDK based on the `provider` field, enhancing flexibility in AI interactions.
* fix(figma): preserve imported node order and disable openpencil auto layout
Prevent imported/generated nodes from being prepended in auto-layout containers, which could reverse visual order during progressive insertion.
Hide the unfinished OpenPencil auto-layout path from the import dialog to avoid selecting a mode that is not ready yet.
* fix(ai): enforce explicit provider and model routing
Pass selected provider and model through design generation, orchestration, sub-agent, and validation flows.
Disable provider/model fallback and remove model retry-without-selection behavior so requests fail fast instead of silently routing to Claude.
* chore(package): bump version to 0.1.1
---------
Co-authored-by: Fini <fini.yang@gmail.com>
* feat(editor): implement Figma import functionality
- Added a new FigmaImportDialog component for importing .fig files.
- Integrated file processing and conversion logic to handle Figma files.
- Enhanced the editor layout to include a button for opening the Figma import dialog.
- Introduced page tabs for better navigation between document pages.
- Updated various components to utilize active page children for rendering and interactions.
- Added new dependencies: fzstd and kiwi-schema for improved functionality.
* fix(ai): harden Claude agent env variable resolution
- Filter empty strings and object values from settings.json env
- Validate ANTHROPIC_CUSTOM_HEADERS is valid JSON before passing
- Remove incorrect ANTHROPIC_CUSTOM_HEADERS auto-generation from auth token
* refactor(ai): remove silent fallback logic, surface errors in AI panel
- Remove direct-stream fallback in generateDesign, delegate to orchestrator
- Remove orchestrator planner fallback plan (buildFallbackPlanFromPrompt)
- Remove sub-agent retry logic, minimal mode retry, and placeholder insertion
- Throw on sub-agent error instead of silently degrading
- Call updateLastMessage in catch block so errors display immediately
- Clean up unused imports, functions, and console.log/warn statements
* fix(ai): add 30s API connect timeout for faster error detection
- Set maxRetries: 0 on Anthropic SDK to prevent retry delays on 429
- Add AbortController-based 30s timeout for initial API connection
- If the provider doesn't respond within 30s, abort and send SSE error
- Refactor streamViaAnthropicSDK with shared send() helper
* fix(editor): improve Figma import visual fidelity
- Extract image files from .fig ZIP archive and resolve by SHA-1 hash
- Map Figma textCase property (UPPER/LOWER/TITLE) to text content
- Convert ellipse nodes with image fills to image nodes
- Decode Figma vector paths and match icons via Lucide icon registry
- Fix z-order: move background rectangles behind content layers
- Set clipContent=true for Figma frames (default clip behavior)
- Unwrap single-artboard pages to use artboard as root frame
* fix(canvas): preserve clipPath during async image load and invalidate cache
- Copy clipPath from placeholder rect to FabricImage in onload callback
- Set obj.dirty=true after applying/removing clipPath so Fabric.js
re-renders with the updated clip region instead of using stale cache
* fix(ai): use page-aware empty frame detection and place new designs as siblings
- Fix isCanvasOnlyEmptyFrame() to use getActivePageChildren() instead of
document.children which is empty after page migration
- When canvas is empty, replace default frame (existing behavior restored)
- When canvas has content, add generated frame as top-level sibling
positioned to the right with 100px gap
- Track generationRootFrameId so height adjustment targets correct frame
- Add WIDTH SELECTION rule: app screens use 375x812 mobile dimensions
- Include selected node dimensions in AI context string
* feat(electron): implement application menu with native actions
- Added a native application menu for macOS and Windows, including File, Edit, View, and Window menus.
- Integrated menu actions for creating, opening, saving files, and editing operations like undo/redo.
- Enhanced the editor layout to handle Electron menu actions through a custom hook.
- Updated icon components in the toolbar and top bar for consistent styling.
- Refactored padding and layout components for improved structure and readability.
* fix(canvas): use page-aware children for selection depth resolution
getSelectableNodeIds() used doc.children which is empty under the
pages architecture. Switch to getActivePageChildren() so canvas
selection correctly syncs to the layers panel.
* fix(panels): adjust property panel sections for image nodes
Hide fill/stroke sections (not applicable to images) and show
corner radius section for image elements.
* feat(canvas): implement image corner radius via clipPath
FabricImage does not support rx/ry natively. Use a rounded-rect
clipPath instead, with objectCaching disabled to ensure immediate
re-render on radius changes.
* fix(canvas): use page-aware forcePageResync for canvas re-sync
The old pattern { ...doc, children: [...doc.children] } only touched
root-level children which are empty under pages architecture. Extract
forcePageResync() into canvas-sync-utils and replace all 7 occurrences
across canvas-object-modified, drag-into-layout, and layout-reorder.
* fix(canvas): preserve image corner radius clipPath during drag
Three issues caused corner radius loss on image drag:
1. Scale baking in object:modified changed FabricImage width from
natural to display dimensions, creating a clipPath size mismatch.
Exclude images from scale baking (like paths/polygons).
2. object:moving unconditionally cleared all clipPaths to avoid stale
frame clipping. Now only clears absolutePositioned (frame) clips,
preserving object-level clips like image corner radius.
3. Post-drag re-sync overwrote the corner radius clipPath with the
parent frame clip. Now skips frame clip when the object already
has its own non-absolutePositioned clipPath.
* feat(ai): enhance chat functionality with image attachments support
- Added support for image attachments in chat messages, allowing users to send images alongside text.
- Implemented temporary file handling for attachments, ensuring they are accessible to the AI processing.
- Updated chat message structure to include attachments, and modified the prompt building logic to reference these images.
- Enhanced the chat panel UI to allow users to select and preview images before sending.
- Introduced a new state management for pending attachments in the AI store.
- Refactored related components to accommodate the new attachment feature, improving user experience and interaction.
* feat(multi-page): introduce multi-page architecture and enhance agent settings UI
- Added multi-page architecture to the document structure, allowing for page CRUD actions such as add, remove, rename, reorder, and duplicate.
- Implemented `activePageId` state management in the canvas store for better page handling.
- Enhanced the top bar with an `AgentStatusButton` to display connected AI providers and their statuses.
- Updated the agent settings dialog to improve the UI for managing AI integrations, including better layout and connection indicators.
- Refactored related components for improved usability and visual consistency.
* docs(README): add contributors section with dynamic contributor image
* feat(ai): improve chat streaming and error handling
- Added functionality to hide the checklist when streaming stops with no completed items.
- Implemented abort controller management to handle user-initiated stops during chat generation.
- Enhanced error handling to prevent displaying errors for user-initiated stops while preserving partial content.
- Updated orchestration and design generation functions to support abort signals, improving responsiveness during streaming.
* fix(canvas): align z-order with layer panel convention (top = front)
Establish consistent z-order: children[0] = top of layer panel = frontmost
on canvas. This matches the standard design tool convention (Figma, Sketch).
- Reverse flattenNodes iteration so children[0] is added last to canvas
- Add z-order reconciliation via moveObjectTo after each sync pass
- Figma import: sort children descending so front items are at children[0]
- addNode defaults to prepend (index 0) so new items appear at top
- duplicateNode inserts clone above original (at idx instead of idx+1)
- drag-reparent inserts at index 0 (frontmost) instead of childCount
- Async image loading preserves z-order via insertAt instead of add
- Add FigmaImportLayoutMode toggle (preserve vs openpencil auto-layout)
* chore: resolve .gitignore merge conflict
* fix(canvas): clamp corner radius to half the element height
* chore: update version to 0.1.0 and modify mac artifact naming in electron-builder configuration
---------
Co-authored-by: Fini <fini.yang@gmail.com>
* feat(editor): add github releases auto update flow
Enable desktop auto-update checks and install prompt so packaged apps can update from published GitHub Releases.
* fix(canvas): keep frame labels aligned during zoom
Draw labels in viewport space with zoom-aware positioning so frame titles stay anchored while panning and zooming.
* fix(ai): disable chat interactions when no models connected
Prevent sending and shortcut actions when provider models are unavailable, and show a concise model picker hint to avoid false-available UI states.
* docs: refresh readme community and demo section
Embed the product demo video inline, add a styled Discord community entry, and update media assets for clearer README presentation.
* chore: update nitro external dependency settings
Align SSR bundling with current runtime usage by removing the unnecessary @opencode-ai external entries.
* feat(electron): enhance macOS build process and update auto-updater
- Added a new build script for macOS that allows building for both arm64 and x64 architectures.
- Updated GitHub Actions workflow to support separate build arguments for macOS arm64 and x64.
- Implemented a custom GitHub update provider for macOS to handle versioning based on architecture.
- Introduced a new icon for the electron app and removed the old logo image.
---------
Co-authored-by: Fini <fini.yang@gmail.com>
- Add mcp-server.cjs to extraResources in electron-builder.yml for production packaging
- Modify package.json build script to include MCP server compilation
- Enhance main.ts to set ELECTRON_RESOURCES_PATH for resource access
- Update mcp-install.ts to resolve MCP server path from resources in production
- Add Electron configuration and main process setup for building a desktop application.
- Implement IPC communication for file operations (open, save) between the renderer and main processes.
- Create a preload script to expose Electron APIs to the renderer.
- Update package.json to include Electron and related dependencies.
- Enhance the build process with electron-builder for packaging the application.
- Introduce a new electron-builder.yml configuration file for build settings.
- Modify Vite configuration to support Electron-specific builds.
- Update UI components to accommodate Electron's window management and drag regions.
Kayshen Xu