* feat(canvas,panels): multi-selection drag, shift-key selection, and chat pipeline UI
- Preserve multi-selection when clicking a selected object without Shift,
enabling drag-move of the whole set
- Set selectionKey to shiftKey so only Shift+click toggles multi-select
- Refactor chat-message step rendering: extract step blocks with regex,
add pipeline checklist progress UI, separate step display from markdown
- Adjust AI chat panel selection count display and layout
* feat(opencode): integrate OpenCode SDK for enhanced AI interactions
- Add support for OpenCode as a new AI provider, allowing users to connect to a local OpenCode server.
- Implement new API endpoints for generating and streaming chat responses via OpenCode.
- Update UI components to include OpenCode in provider selection and display.
- Introduce OpenCode logo and enhance the agent settings dialog to manage OpenCode connections.
- Refactor existing chat and generation logic to accommodate provider-specific routing.
- Include type definitions for OpenCode SDK to ensure type safety and improve developer experience.
* feat(electron): integrate Electron framework for desktop application support
- 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.
* fix(canvas): multi-selection drag reparenting and infinite recursion guard
- Add re-entry guard to object:modified handler to prevent infinite
recursion caused by discardActiveObject() firing object:modified
via _finalizeCurrentTransform
- Extend drag-into detection to non-layout root frames (rootFrameBounds)
in addition to layout containers (layoutContainerBounds)
- Add checkReparentIntoFrame() fallback for root-level objects dragged
into frames, handling both layout and non-layout targets
- Redirect _currentTransform to ActiveSelection in mouse:down so the
whole group moves/scales/rotates together
- Support same-container reorder in commitDragIntoMulti
- Fix guide-utils getEdges() for center-origin ActiveSelection objects
- Track selection descendants for visual drag-follow during multi-drag
- Show position coordinates during multi-selection drag in dimension label
* feat(store,canvas): add reusable component and instance system
add makeReusable/detachComponent store methods, RefNode resolution in
canvas sync with component/instance selection borders, virtual child ID
handling in selection context, purple/instance-colored frame labels,
and collision avoidance when duplicating nodes
* feat(panels): add component/instance UI to layer and property panels
layer panel shows diamond icon and purple/#9281f7 styling for
components/instances with context menu actions; property panel resolves
RefNode display, routes instance overrides, adds header with go-to and
detach buttons, and supports inline name editing on click
* feat(canvas): match hover outline to selection style for components and instances
hover outlines now use purple solid for reusable components and #9281f7
dashed for instances, consistent with their selection border styling
* fix(editor): save directly without dialog for previously opened files
prioritize fileName check over File System Access API so opened files
save via download without showing a file picker; also add Cmd+Alt+K
shortcut for creating reusable components
* refactor(canvas): remove dimension label overlay
remove the blue dimension/position label that appeared on selection,
drag, and scale interactions
* feat(export): add export section for raster image export functionality
- Introduce a new ExportSection component to facilitate exporting layers as raster images in various formats (PNG, JPEG, WEBP) with adjustable scale options.
- Integrate the ExportSection into the PropertyPanel for easy access during design editing.
- Enhance export utility functions to support exporting layers and managing descendant nodes.
* feat(assets): add new icon files for application branding
- Introduce new icon files in various formats (ICNS, ICO, PNG) for application branding.
- Add logo image for the Electron interface to enhance visual identity.
- Update canvas selection logic to allow programmatic selection from the layer panel.
* feat(electron): enhance Electron app integration and CI/CD workflows
- Add new commands for Electron development, compilation, and building processes in CLAUDE.md.
- Update README.md to reflect the availability of the application as both a web and desktop app.
- Introduce a FixedChecklist component in the AI chat panel for better user interaction with generated tasks.
- Implement CI/CD workflows for automated testing and Electron builds in GitHub Actions.
- Refactor design generator prompts to support element-by-element streaming for improved performance.
* feat(ai): enhance chat functionality and orchestration capabilities
- Introduce context optimization to manage chat history size and prevent unbounded growth.
- Implement complexity assessment for design prompts to determine orchestration needs.
- Add orchestrator functionality for parallel design generation, improving performance and responsiveness.
- Update chat message parsing to include explicit status handling for orchestrator steps.
- Refactor design generator to support orchestration and streamline context building.
* refactor(ai): streamline orchestration and remove complexity classifier
- Remove the complexity classifier as its functionality is no longer needed.
- Update design generator to always route through the orchestrator, simplifying the logic.
- Enhance error handling during orchestration to ensure fallback to direct generation is clear.
- Introduce a new sub-agent prompt for improved output formatting and clarity in design generation.
* feat(ai): refine orchestrator prompt and timeout settings
- Update the ORCHESTRATOR_PROMPT to allow for more granular task division, specifying 4-15 atomic sections.
- Enhance the JSON output structure by adding new subtasks for the hero section.
- Adjust ORCHESTRATOR_TIMEOUTS to extend hard and no-text timeout values for improved orchestration performance.
* feat(docs): update CLAUDE.md and README.md for new features and improvements
- Expand the Fabric.js integration section in CLAUDE.md to include new files and functionalities.
- Highlight new features such as double-click frame entry, advanced drag-and-drop capabilities, and per-layer export options in README.md.
- Add context optimization and multi-provider support for AI in README.md.
- Update the project structure descriptions for clarity and completeness.
* refactor(config): update Vite configuration import for Vitest compatibility
* chore(ci): update GitHub Actions workflow to trigger on main branch pushes
* feat(uikit): introduce UIKit browser and component management features
- Add a new ComponentBrowserPanel for browsing and managing UI components.
- Implement ComponentBrowserGrid and ComponentBrowserCard for displaying components.
- Integrate UIKit store for managing component kits, search queries, and active categories.
- Enhance editor layout to support toggling the UIKit browser with keyboard shortcuts.
- Include import/export functionality for UIKit components.
* feat(types): add clipContent to ContainerProps
Allow frames to explicitly clip overflowing children, essential for
cards with cornerRadius + image children.
* feat(canvas): wire letterSpacing, textGrowth and clipContent to Fabric.js
- Convert letterSpacing (px) to Fabric charSpacing (1/1000 em) in
factory and sync
- Select IText vs Textbox based on textGrowth mode, restore canvas
selection after text object recreation
- Add multi-line text height estimation with CJK character support
- Honor clipContent flag in clipping logic
* feat(panels): split text Layout and Typography into separate sections
- Add readOnly prop to NumberInput for non-editable dimension display
- Extract text Layout section (dimensions, fill/hug, resizing toggles)
into text-layout-section.tsx
- Enhance Typography section with line height, letter spacing, vertical
alignment controls
- Reorder property panel: Size → Layout → Appearance → Fill → Stroke →
Typography → Effects
- Add hideWH prop to SizeSection to avoid duplicate W/H inputs
* feat(panels): rewrite layout-section with full Flex Layout panel
- 3x3 alignment grid with context-aware behavior per layout direction
- Gap section with numeric/space-between/space-around radio modes
- Multi-mode padding: single, 2-axis (V/H), 4-individual (T/R/B/L)
with gear popover
- Dimensions (W/H) and sizing checkboxes (fill/hug/clip) integrated
into layout panel
* feat(panels): improve layer panel with auto-collapse and scroll-to-selection
- Collapse all layers by default, auto-collapse newly added nodes
- Auto-expand ancestor layers when a child is selected on canvas
- Scroll selected layer item into view after expansion
* fix(panels): improve AI chat panel overflow and color picker styling
- Fix chat panel overflow with proper flex layout and min-h-0
- Cap checklist height with scrollable overflow
- Adjust color picker input sizing
* feat(codegen): add textGrowth, textAlignVertical and clipContent to code generation
- textGrowth: auto → whitespace-nowrap, fixed-width-height → overflow-hidden
- textAlignVertical: middle/bottom → vertical-align CSS
- clipContent: true → overflow-hidden on containers
* feat(ai): integrate text typography properties into design prompts
- Add textGrowth, lineHeight, letterSpacing, textAlignVertical, fontStyle
to PEN_NODE_SCHEMA and sub-agent prompt
- Add typography scale guidelines with lineHeight/letterSpacing defaults
- Update examples with lineHeight, clipContent, fill_container usage
- Add phone placeholder and clipContent rules
* feat(ai): enhance streaming service with runtime config and thinking modes
- Extract timeout constants to ai-runtime-config.ts
- Add thinking mode control (adaptive/disabled/enabled) to stream options
- Add StyleGuide interface for orchestrator visual consistency
- Add ping timeout and first-text timeout options
* feat(ai): improve design generator with typography defaults and phone placeholder
- Set default lineHeight on text nodes (1.2 for headings, 1.5 for body)
- Expand phone/mockup placeholder detection with shape-based fallback
- Flatten nested phone-shaped frames in post-streaming tree fixes
- Increase CJK character width estimation and button padding buffer
* feat(ai): enhance orchestrator with style guide and prompt optimizer
- Pass style guide from orchestrator plan to sub-agent prompts
- Add orchestrator-prompt-optimizer for context-aware prompt tuning
- Improve parallel sub-task generation and error recovery
* feat(ai): add thinking mode and Codex provider support to server API
- Support thinkingMode/effort params in chat and generate endpoints
- Add Codex (OpenAI) provider streaming via codex-client utility
- Forward thinking config to both Anthropic SDK and Agent SDK paths
* feat(mcp): implement OpenPencil file format and MCP server integration
- Introduce support for .op file format alongside .pen
- Add MCP server functionality for document management and tool operations
- Implement batch processing tools for design and variable management
- Enhance save and open dialogs to accommodate new file format
- Update dependencies and scripts for MCP server compilation and execution
* feat(build): update electron build configuration and resource handling
- 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
---------
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
- Introduce support for .op file format alongside .pen
- Add MCP server functionality for document management and tool operations
- Implement batch processing tools for design and variable management
- Enhance save and open dialogs to accommodate new file format
- Update dependencies and scripts for MCP server compilation and execution
- Support thinkingMode/effort params in chat and generate endpoints
- Add Codex (OpenAI) provider streaming via codex-client utility
- Forward thinking config to both Anthropic SDK and Agent SDK paths
- Pass style guide from orchestrator plan to sub-agent prompts
- Add orchestrator-prompt-optimizer for context-aware prompt tuning
- Improve parallel sub-task generation and error recovery
- Set default lineHeight on text nodes (1.2 for headings, 1.5 for body)
- Expand phone/mockup placeholder detection with shape-based fallback
- Flatten nested phone-shaped frames in post-streaming tree fixes
- Increase CJK character width estimation and button padding buffer
- Collapse all layers by default, auto-collapse newly added nodes
- Auto-expand ancestor layers when a child is selected on canvas
- Scroll selected layer item into view after expansion
- 3x3 alignment grid with context-aware behavior per layout direction
- Gap section with numeric/space-between/space-around radio modes
- Multi-mode padding: single, 2-axis (V/H), 4-individual (T/R/B/L)
with gear popover
- Dimensions (W/H) and sizing checkboxes (fill/hug/clip) integrated
into layout panel
- Convert letterSpacing (px) to Fabric charSpacing (1/1000 em) in
factory and sync
- Select IText vs Textbox based on textGrowth mode, restore canvas
selection after text object recreation
- Add multi-line text height estimation with CJK character support
- Honor clipContent flag in clipping logic
- Add a new ComponentBrowserPanel for browsing and managing UI components.
- Implement ComponentBrowserGrid and ComponentBrowserCard for displaying components.
- Integrate UIKit store for managing component kits, search queries, and active categories.
- Enhance editor layout to support toggling the UIKit browser with keyboard shortcuts.
- Include import/export functionality for UIKit components.
- Expand the Fabric.js integration section in CLAUDE.md to include new files and functionalities.
- Highlight new features such as double-click frame entry, advanced drag-and-drop capabilities, and per-layer export options in README.md.
- Add context optimization and multi-provider support for AI in README.md.
- Update the project structure descriptions for clarity and completeness.
- Update the ORCHESTRATOR_PROMPT to allow for more granular task division, specifying 4-15 atomic sections.
- Enhance the JSON output structure by adding new subtasks for the hero section.
- Adjust ORCHESTRATOR_TIMEOUTS to extend hard and no-text timeout values for improved orchestration performance.
- Remove the complexity classifier as its functionality is no longer needed.
- Update design generator to always route through the orchestrator, simplifying the logic.
- Enhance error handling during orchestration to ensure fallback to direct generation is clear.
- Introduce a new sub-agent prompt for improved output formatting and clarity in design generation.
- Introduce context optimization to manage chat history size and prevent unbounded growth.
- Implement complexity assessment for design prompts to determine orchestration needs.
- Add orchestrator functionality for parallel design generation, improving performance and responsiveness.
- Update chat message parsing to include explicit status handling for orchestrator steps.
- Refactor design generator to support orchestration and streamline context building.
- Add new commands for Electron development, compilation, and building processes in CLAUDE.md.
- Update README.md to reflect the availability of the application as both a web and desktop app.
- Introduce a FixedChecklist component in the AI chat panel for better user interaction with generated tasks.
- Implement CI/CD workflows for automated testing and Electron builds in GitHub Actions.
- Refactor design generator prompts to support element-by-element streaming for improved performance.
- Introduce new icon files in various formats (ICNS, ICO, PNG) for application branding.
- Add logo image for the Electron interface to enhance visual identity.
- Update canvas selection logic to allow programmatic selection from the layer panel.
- Introduce a new ExportSection component to facilitate exporting layers as raster images in various formats (PNG, JPEG, WEBP) with adjustable scale options.
- Integrate the ExportSection into the PropertyPanel for easy access during design editing.
- Enhance export utility functions to support exporting layers and managing descendant nodes.
prioritize fileName check over File System Access API so opened files
save via download without showing a file picker; also add Cmd+Alt+K
shortcut for creating reusable components
layer panel shows diamond icon and purple/#9281f7 styling for
components/instances with context menu actions; property panel resolves
RefNode display, routes instance overrides, adds header with go-to and
detach buttons, and supports inline name editing on click
add makeReusable/detachComponent store methods, RefNode resolution in
canvas sync with component/instance selection borders, virtual child ID
handling in selection context, purple/instance-colored frame labels,
and collision avoidance when duplicating nodes
- Add re-entry guard to object:modified handler to prevent infinite
recursion caused by discardActiveObject() firing object:modified
via _finalizeCurrentTransform
- Extend drag-into detection to non-layout root frames (rootFrameBounds)
in addition to layout containers (layoutContainerBounds)
- Add checkReparentIntoFrame() fallback for root-level objects dragged
into frames, handling both layout and non-layout targets
- Redirect _currentTransform to ActiveSelection in mouse:down so the
whole group moves/scales/rotates together
- Support same-container reorder in commitDragIntoMulti
- Fix guide-utils getEdges() for center-origin ActiveSelection objects
- Track selection descendants for visual drag-follow during multi-drag
- Show position coordinates during multi-selection drag in dimension label
- 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.
- Add support for OpenCode as a new AI provider, allowing users to connect to a local OpenCode server.
- Implement new API endpoints for generating and streaming chat responses via OpenCode.
- Update UI components to include OpenCode in provider selection and display.
- Introduce OpenCode logo and enhance the agent settings dialog to manage OpenCode connections.
- Refactor existing chat and generation logic to accommodate provider-specific routing.
- Include type definitions for OpenCode SDK to ensure type safety and improve developer experience.
- Preserve multi-selection when clicking a selected object without Shift,
enabling drag-move of the whole set
- Set selectionKey to shiftKey so only Shift+click toggles multi-select
- Refactor chat-message step rendering: extract step blocks with regex,
add pipeline checklist progress UI, separate step display from markdown
- Adjust AI chat panel selection count display and layout
- Update AI design generation functions to incorporate document variables and themes, allowing for dynamic references in generated designs.
- Modify the buildContextString function to include variable summaries for improved context during AI interactions.
- Enhance prompts to instruct the AI on using variable references instead of hardcoded values, ensuring consistency and flexibility in design outputs.
- Refactor related types and services to support the new variable and theme structures, improving overall design generation capabilities.
- Update history store to support up to 300 undo/redo states, improving user experience during complex editing sessions.
- Refactor batch handling in various components to ensure accurate history tracking and prevent unnecessary entries.
- Implement checks to avoid adding duplicate states to the undo stack, optimizing performance and memory usage.
- Enhance event handling in canvas and keyboard shortcuts to maintain consistent history state during user interactions.
- Add variable management capabilities to the document store, including setting, removing, and renaming variables.
- Implement a VariablesPanel in the editor layout for user interaction with variables.
- Enhance UI components (e.g., AppearanceSection, FillSection, LayoutSection, StrokeSection) to support variable binding for opacity, fill color, gap, and padding.
- Update code generation services to output CSS variables and React code with variable references.
- Introduce keyboard shortcuts for toggling the variables panel and improve overall user experience.
- Increase undo history to 300 states, deduplicate identical snapshots
- endBatch accepts optional currentDoc to skip no-op batches
- Add AI streaming guards: disable canvas interaction during generation
- Defer transform batch close via rAF so object:modified fires before endBatch
- Restrict layout reorder to move drags only (not scale/rotate handles)
- Extend checkDragReparent to work for any parent container, not just root frames
- Wrap design apply/modify in history batches for proper undo support
- Update rotation cursor SVG for improved design consistency and clarity.
- Refactor rotation control offsets and sizes for better maintainability.
- Implement a patch for `_setCursorFromEvent` to ensure rotation cursors display correctly when hovering over active object controls.
- Integrate rotation cursor handler setup in the fabric canvas initialization.
- Introduce a "Thinking..." indicator in the AI chat panel to improve user experience during processing.
- Update chat message styles for better spacing and alignment.
- Implement batch undo functionality for number input adjustments to streamline user interactions.
- Refactor canvas event handling to ensure accurate history tracking during drag operations.
- Add keyboard shortcuts for agent settings and improve canvas selection handling during history state restoration.
- Remove hasManualX/hasManualY in computeLayoutPositions so layout children
always use computed positions — fixes re-flow gap after drag-out
- Add layoutContainerBounds map populated during flattenNodes for drag-into
hit detection
- Extract shared insertion-indicator.ts for indicator + container highlight
state used by both layout-reorder and drag-into-layout
- Add drag-into-layout.ts: detect layout container under cursor during drag,
show insertion indicator + dashed container highlight, reparent on drop
- Wire drag-into checks into object:moving / object:modified / mouse:up
- Clear clip paths on first object:moving to prevent stale ancestor clipping
during drag; force re-sync after object:modified to restore them
- Prevent browser text selection during layer panel drag
- Path icons: use uniform scaling (preserve aspect ratio instead of squishing),
fillRule 'evenodd' for compound paths with cutouts, transparent fill for
stroke-only icons, strokeUniform to keep stroke width constant
- Text centering: use actual Fabric rendered height (fontSize * lineHeight)
for cross-axis centering instead of declared height
- Hover cursor: use default arrow instead of move/crosshair on elements
- Stream reliability: server sends keep-alive pings every 15s during API TTFT,
forwards thinking_delta events, client resets timeout on ping/thinking chunks
- Remove silent fallback from streamChat to generateCompletion (was causing
double requests when server is unresponsive)
- Add 3-minute timeout to generateCompletion
- AI prompts: instruct model to preserve icon aspect ratios
Implement Figma-style canvas interactions:
- Hover outlines: solid blue on hovered element, dashed on direct children
- Depth-aware selection: single click selects at current depth, double-click
enters containers progressively, Escape exits frame context
- Root frame clipping: depth-0 frames always clip overflowing children
- Drag-out reparenting: dragging a child outside its root frame detaches it
to the overlapping frame or promotes to root level, with undo support
- Layout reorder drag with insertion indicator
- AI design generation with staggered fade-in animation
- Use default cursor on hover instead of move/crosshair
Group consecutive action steps without blank-line breaks between them.
Add width and overflow constraints on assistant message and design
block containers to prevent horizontal overflow.
Polish ActionStepItem with rounded card style, chevron toggle, and
green checkmark for completed steps. Restyle DesignJsonBlock with
consistent card layout, expand/collapse chevron, and nested JSON
preview area.
- Separate design generation and modification into dedicated functions
with multi-step iterative pipeline (generateDesign, generateDesignModification)
- Add chat title derived from first message, shown in header and minimized bar
- Add panel resize via top drag handle with height constraints
- Show streaming loader icon next to chat title during AI generation
- Display selected object count in input area for context awareness
- Enhance chat-message with step collapsing and applied state styling
- Expand AI prompts for improved design generation quality
Remove intermediate syncTargetToStore calls during object:moving/scaling/
rotating to avoid excessive store writes during drag. In layout computation,
preserve explicit child coordinates set by user drag instead of overwriting
with auto-layout positions.
Use viewport coordinates (clientX/Y relative to canvas element) instead
of scene coordinates for zoomToPoint. Bump zoom factor from 1.002 to
1.005 for snappier pinch-to-zoom response.
