Commit graph

105 commits

Author SHA1 Message Date
Kayshen Xu f3f3bf19b3 V0.0.3 (#12)
* 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.

* feat(editor): enhance update ready banner with additional states and UI improvements

- Added new state management for checking updates and dismissed status.
- Improved visibility logic for the update banner based on update states.
- Enhanced UI to display current and latest version information, download progress, and error messages.
- Updated layout and styling for better user experience and accessibility.

* docs: replace stripped video embed with clickable cover link

GitHub sanitizes README HTML video tags, so the embedded demo player does not render on repository pages.

Use a clickable poster image and explicit watch link to preserve the demo entry point across GitHub README rendering.

---------

Co-authored-by: Fini <fini.yang@gmail.com>
2026-02-26 21:47:42 +08:00
Kayshen Xu 198a2685a6 V0.0.3 (#11)
* 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>
2026-02-26 21:33:48 +08:00
Kayshen Xu 69b5d9f264 V0.0.2 (#10)
* chore(docs): add video demo to README.md for enhanced project visibility

* refactor(ai): centralize Claude Agent SDK env resolution with debug logging and model retry

Extract shared buildClaudeAgentEnv() and getClaudeAgentDebugFilePath() into
resolve-claude-agent-env.ts to eliminate duplicated env setup across all
server endpoints. Add model fallback retry logic (retry without explicit
model on exit code 1) and diagnostic hints from debug log tail on failures.

* fix(canvas): normalize layout justify/align values from CSS aliases

AI-generated nodes may use CSS-style values like "flex-start",
"space-between", "middle" etc. Add normalizeJustifyContent and
normalizeAlignItems to map these to internal enum values in both
the layout engine and the property panel.

* fix(canvas): improve text and path rendering accuracy

- Remove icon-specific bounding box override on path scaling to prevent
  pathOffset drift that visually offsets icons in logo containers
- Only use Textbox for explicit fixed-width text modes instead of any
  node with width > 0, preventing unwanted word wrapping on auto-width text
- Add widthSafetyFactor for Latin text estimation (1.14x vs 1.06x CJK)
  to reduce accidental line wraps from font width variation

* feat(ai): add input icon affordance rules and trailing icon alignment

Prompt AI to include semantic icons in form inputs (search, password,
email). Add normalizeInputTrailingIconAlignment post-pass in
role-resolver to auto-set justifyContent="space_between" on input
frames with a trailing icon node.

* feat(ai): persist model selection across sessions via localStorage

Add preferredModel and selectModel to ai-store with localStorage
read/write. Hydrate on mount to restore user's last chosen model.
Add isHydrated flag to agent-settings-store to prevent race
conditions during provider list construction.

* chore(package): update version to 0.0.2 and add new build scripts for mac architectures

---------

Co-authored-by: Fini <fini.yang@gmail.com>
2026-02-26 09:41:19 +08:00
Kayshen Xu 7db7a99ff2 V0.0.2 (#9)
* chore(docs): add video demo to README.md for enhanced project visibility

* refactor(ai): centralize Claude Agent SDK env resolution with debug logging and model retry

Extract shared buildClaudeAgentEnv() and getClaudeAgentDebugFilePath() into
resolve-claude-agent-env.ts to eliminate duplicated env setup across all
server endpoints. Add model fallback retry logic (retry without explicit
model on exit code 1) and diagnostic hints from debug log tail on failures.

* fix(canvas): normalize layout justify/align values from CSS aliases

AI-generated nodes may use CSS-style values like "flex-start",
"space-between", "middle" etc. Add normalizeJustifyContent and
normalizeAlignItems to map these to internal enum values in both
the layout engine and the property panel.

* fix(canvas): improve text and path rendering accuracy

- Remove icon-specific bounding box override on path scaling to prevent
  pathOffset drift that visually offsets icons in logo containers
- Only use Textbox for explicit fixed-width text modes instead of any
  node with width > 0, preventing unwanted word wrapping on auto-width text
- Add widthSafetyFactor for Latin text estimation (1.14x vs 1.06x CJK)
  to reduce accidental line wraps from font width variation

* feat(ai): add input icon affordance rules and trailing icon alignment

Prompt AI to include semantic icons in form inputs (search, password,
email). Add normalizeInputTrailingIconAlignment post-pass in
role-resolver to auto-set justifyContent="space_between" on input
frames with a trailing icon node.

* feat(ai): persist model selection across sessions via localStorage

Add preferredModel and selectModel to ai-store with localStorage
read/write. Hydrate on mount to restore user's last chosen model.
Add isHydrated flag to agent-settings-store to prevent race
conditions during provider list construction.

---------

Co-authored-by: Fini <fini.yang@gmail.com>
2026-02-26 09:38:48 +08:00
Kayshen-X f997a76186 chore(docs): update CLAUDE.md and README.md for clarity and consistency
- Translated code style guidelines from Chinese to English for better accessibility.
- Revised Git commit conventions section for clarity and consistency in language.
- Updated README.md to reflect the correct GitHub repository and added a demo screenshot.
- Added new demo screenshot file to enhance visual representation of the project.
2026-02-24 09:44:51 +08:00
Fini 63b9208a8d feat(ai): resolve brand icons during streaming with immediate fetch fallback
- icon-resolver: refactor ICON_PATH_MAP with shared IconEntry constants
  and s()/f() helpers to eliminate duplicate path strings; fix timer and
  pencil icon paths which were incorrectly aliased to clock/edit
- icon-resolver: remove BRAND_PLACEHOLDER_MAP — brand icons now go
  straight to async resolution (simple-icons) without a Feather placeholder
- icon-resolver: add tryImmediateIconResolution() — fires a 600ms-timeout
  fetch during streaming so brand icons appear without waiting for
  post-stream resolution; pending queue remains as fallback on timeout
- design-canvas-ops: normalize gradient stops in insertStreamingNode to
  catch AI-generated nodes before they reach the store
- design-canvas-ops: call resolveAllPendingIcons() after all non-streaming
  apply paths (applyNodesToCanvas, animateNodesToCanvas)
2026-02-24 04:06:44 +08:00
Fini 7bc24ee46b feat(ai): bundle lucide and simple-icons server-side for offline icon resolution
Install @iconify-json/lucide and @iconify-json/simple-icons as server-only
dependencies. Rewrite /api/ai/icon to read from local bundled JSON instead
of fetching from api.iconify.design, eliminating the external network
dependency that caused brand icons to silently fail.

Search order: simple-icons first (brand logos only — no UI name collisions),
then lucide (UI icons). Covers 3670 brand icons and 1729 Lucide icons
with sub-millisecond lookup. No impact on client bundle size.
2026-02-24 04:06:35 +08:00
Fini 022c9fea9a feat(ai): remove OpenPencil built-in icon picker collection
All icons in icon-resolver.ts now carry iconId (e.g. feather:search),
so after AI generation each node automatically maps to the correct
library in the property panel picker. The built-in "OpenPencil"
collection in the picker is no longer needed.

Removes BUILTIN_ICONS import, BUILTIN_ICON_MAP, buildBuiltinSvg,
getIconColorRaw, and all openpencil-specific branches from the dialog.
2026-02-24 04:06:27 +08:00
Fini f4d313464e fix(ai): normalize gradient stop offsets to prevent NaN display
AI sometimes omits the offset field on gradient stops, causing
Math.round(undefined * 100) = NaN in the UI. Fix at two layers:
- normalize-pen-file.ts: auto-distribute missing offsets evenly across
  [0,1] and convert percentage-format offsets (>1) to 0-1 range
- fill-section.tsx: defensive guard in the stop percentage display
2026-02-24 04:06:19 +08:00
Fini 763886ea01 fix(ai): add line/polyline/polygon parsing to Feather icon bundler
featherBodyToPathD was missing <line>, <polyline>, and <polygon>
support. Feather icons heavily use these elements — e.g. arrow-right,
menu, check, x all use <line> or <polyline>. Without this support,
many common icons returned d=null and were never added to ICON_PATH_MAP,
causing them to fall back to async Iconify fetch or the generic star
placeholder instead of rendering correctly.

Now all 286 Feather icons are fully parsed and available offline.
2026-02-24 01:44:01 +08:00
Fini b10f99e17d feat(ai): guarantee icon usage from bundled Feather set
- Export AVAILABLE_FEATHER_ICONS list from icon-resolver
- Add findPrefixFallback() for compound icon name resolution
- Fix rawName="" edge case when node is named exactly "Icon"
- Inject full Feather icon list into AI prompts so the model
  only picks names guaranteed to resolve locally without network
2026-02-24 01:27:32 +08:00
Fini 6e6c818820 feat(ai): bundle all 286 Feather icons for instant offline icon resolution
Install @iconify-json/feather and populate ICON_PATH_MAP at module init time
by parsing the bundled SVG body strings (handles <path>, <circle>, <ellipse>,
<rect> elements). Both kebab-case ("arrow-right") and normalized ("arrowright")
keys are registered so the icon name resolver finds them immediately without
any Iconify API calls.
2026-02-24 01:18:46 +08:00
Fini 3ef28b5d2b feat(ai): expand built-in icon map and fix empty rawName edge case
- Add ~40 more common Lucide icons to ICON_PATH_MAP (phone, calendar, clock,
  bookmark, edit, trash, chat, shield, zap, camera, chart, filter, etc.)
  so they resolve instantly without relying on the Iconify async fetch
- Fix rawName="" bug: when a node is named exactly "Icon" or "Logo", stripping
  the suffix leaves an empty string causing the async queue guard to silently
  skip it; now falls back to the full normalized name for the queue key
2026-02-24 01:11:33 +08:00
Fini 312ffd7cb4 fix(canvas): ensure icon selection box is always square with centered content
For icon nodes (PathNode with iconId), expand Fabric's logical bounding box to
the declared w×h so selection handles always form a perfect square, while the
path content remains centered via Fabric's natural pathOffset.
2026-02-24 00:50:23 +08:00
Fini 0c456fe4d2 feat(panels): add icon section with library picker and in-place path replacement
- Add IconSection panel shown when a path node with iconId is selected
- Add IconPickerDialog: anchored popover with collection browsing, search,
  current icon highlight, and outside-click/Escape to close
- Add iconId field to PathNode to track Iconify icon identity
- Fix canvas path sync to update d in-place (no object recreation/focus loss)
- Fix multi-element SVG icons: convert circles, rects, lines to path commands
  so shapes like emoji face circles are not dropped during icon replacement
- Filter invisible bounding-box paths (Tabler's M0 0h24v24H0z) before merging
- Preserve original node width/height on icon replace; carry over display color
- Populate iconId in AI icon resolver and server-side Iconify proxy
2026-02-24 00:25:49 +08:00
Kayshen-X cd32399890 feat(canvas): enhance canvas functionality with new layout engine, node creation, and object modification features
- Introduced a layout engine for auto-layout computation, including padding resolution and fit-content size calculations.
- Added a node creator for various drawing tools (rectangle, frame, ellipse, line, text) to streamline object creation.
- Implemented object modification handling to sync changes back to the document store, improving interaction with Fabric.js.
- Enhanced text measurement utilities for better width and height estimation, including support for CJK characters.
- Added new API endpoints for AI icon retrieval and validation, supporting multimodal content analysis.
2026-02-23 13:22:17 +08:00
Fini cad9ac59fb feat(ai): add text layout direction awareness, dense card protection, and centered column context
- Differentiate text defaults by parent layout direction in insertStreamingNode (vertical=fill, horizontal=fit_content)
- Add shouldDemoteHorizontalTextFillInLayout to prevent short labels from stretching in horizontal rows
- Add countVisibleChildren utility for accurate sibling-aware text demotion
- Add isLikelyCenteredColumnContext, shouldCenterTextInCenteredColumn, shouldCenterButtonRowInContext
- Add isDenseCardPrimaryVisualCandidate to protect primary visual icons during dense card compaction
- Integrate text demotion and centered column logic into Fix 1 and applyTextFillContainerInLayout
- Apply shouldCenterButtonRowInContext in Fix 11 and applyFormChildFillContainer
2026-02-23 00:15:33 +08:00
Fini 206a2939ec feat(ai): add table detection, badge/pill/button classification, and compact control heuristics
- Add isTableLikeFrame/isTableRowLikeFrame detection to skip text-fill and form-fill heuristics for table structures
- Propagate table context through applyGenerationHeuristics and applyTreeFixesRecursive
- Consolidate button marker regex (isExplicitButtonMarker, isCtaLikeLabel, isLikelyActionFrame)
- Add inline info pill detection (isInlineInfoPillFrame/isInlineInfoPillLikeFrame) and sizing heuristic
- Tighten badge char limits (CJK <=8 / Latin <=16), add clause separator rejection
- Expand isCompactControlFrame to cover inline pills and generic compact controls
- Add Fix 13.5 (inline info pill post-tree sizing) and Fix 13.6 (compact control width clamping)
- Add Fix 11.5: expand fit_content columns with long text in horizontal content rows
- Guard button spacing, button width, and form-child-fill heuristics against non-action frames
2026-02-23 00:15:12 +08:00
Fini 4f0f52e75a feat(ai): add phone mockup placeholder label support in design generator
- Allow one centered text label inside phone placeholder frames instead of stripping all children
- Add Fix 8.5: migrate sibling placeholder labels into the closest phone frame
- Add phone label detection, creation, and normalization utilities
- Update screenshot heuristic to preserve normalized label content
2026-02-23 00:13:52 +08:00
Fini 4367d2613a feat(ai): refine prompts for text layout direction, badge limits, phone labels, and hero layout
- Differentiate text width strategy: vertical layouts use fill_container, horizontal rows use fit_content
- Tighten badge/chip char limits (CJK <=8 / Latin <=16), reject longer text for badge style
- Allow one centered placeholder label inside phone mockup frames instead of forcing empty
- Add hero+phone two-column layout hint for desktop
- Add prompt optimizer detectors for dense cards, table structure, and hero phone layout
- Inject native dense-card, table, and hero instructions into sub-agent prompts
2026-02-23 00:13:24 +08:00
Fini fa234e7233 feat(ai): add dense card compaction, inner wrapper flattening, and layout heuristic refinements
- Add dense card row compaction (5+ cards): aggressively shorten text,
  limit to 2 text blocks per card, remove non-essential decorative elements
- Flatten redundant single "Inner" wrapper layers to keep hierarchy shallow
- Add phone placeholder and divider frame detection and normalization
- Add isCompactButtonLikeFrame/isCompactControlFrame to prevent badge
  heuristics from mis-targeting buttons and CTA elements
- Improve text width promotion logic with shouldPromoteTextWidthToFillInLayout
- Add long-text padding adjustment to prevent excessive horizontal padding
  from squeezing body text in narrow containers
- Simplify horizontal overflow fix: remove fit_content strategy, prefer
  parent expansion
- Reduce minimum section padding from 40px to 24px for desktop layouts
- Tune CJK lineHeight defaults (body 1.55, heading 1.35) and auto-height
  estimation with paragraph-aware line wrapping
- Add shallow hierarchy and dense card row rules to AI prompts
2026-02-22 20:35:59 +08:00
Fini 3fe1cd3ca5 fix(canvas): filter invisible nodes in layout, fix fill_container fallback, and layer order
- Skip invisible nodes (visible=false) in layout computation, flattenNodes,
  and document bounds calculation
- Add getRootFillWidthFallback() to resolve fill_container width when parent
  is unavailable, preventing frames from collapsing to content width
- Increase CJK glyph width estimate from 1.08 to 1.12 for more accurate sizing
- Pass parentAvail through fitContentWidth for better nested width resolution
- Remove reverse() in layer panel tree rendering to fix display order
2026-02-22 20:35:47 +08:00
Fini 0d9d20e8e8 fix(canvas): recreate path objects on d change and refine badge detection
- Use invisible fallback path (M0 0 L0 0) instead of dot for empty d attr
- Track __sourceD on path objects to detect d changes requiring recreation
- Generalize textRecreated to objectRecreated for path recreation support
- Tighten isBadgeLikeFrame: max height 40px, max 3 children, 1 icon max,
  exclude explicit button names, width cap 260px, CJK label limit 10 chars
- Use full capsule radius (height/2) instead of clamped range for badges
2026-02-22 16:33:49 +08:00
Fini e99ac132b3 feat(ai): add copywriting guidelines to design generation prompts
Add COPYWRITING section to CHAT_SYSTEM_PROMPT, DESIGN_GENERATOR_PROMPT,
and SUB_AGENT_PROMPT enforcing concise text in generated designs:
headlines 2-6 words, descriptions ≤20 words, no 3+ sentence paragraphs.
2026-02-22 16:04:25 +08:00
Fini fa02ccb3fc feat(canvas): improve CJK text rendering, badge styling, and path safety
- Add splitByGrapheme for CJK text to enable natural character-level wrapping
- Add optical vertical centering offset for single-line text in horizontal layouts
- Use fallback path data when SVG d attribute is empty to prevent render errors
- Fix stroke-only path detection to check for visible stroke (non-zero width)
- Add isBadgeLikeFrame heuristic for badge/chip/tag detection
- Enhance badge sizing: auto corner-radius, icon normalization, CJK-aware padding
- Fix fill-style icon resolution to always apply visible fill color
- Add dot/bullet/point/circlefill to icon path map
2026-02-22 16:04:18 +08:00
Fini 4a82605322 fix(canvas): improve text width and height estimation for CJK and multi-line content
Refactor text measurement to use per-glyph width estimation with distinct
ranges for CJK, uppercase, lowercase, and digits. Add letter-spacing support
and paragraph-aware line wrapping to fix under-estimated text dimensions.
2026-02-22 15:19:15 +08:00
Kayshen Xu 1a476b7866 Merge branch 'main' into v0.0.1 2026-02-22 12:15:53 +08:00
Kayshen Xu fd581695c1 V0.0.1 (#4)
* 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>
2026-02-22 12:09:12 +08:00
Kayshen-X d67a6a9be6 chore(package): update author information and enhance build workflow
- Change author field in package.json to include name and email
- Add MCP server compilation step to the build workflow in build-electron.yml
2026-02-22 12:09:11 +08:00
Kayshen-X 94131a02dc 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
2026-02-22 12:05:34 +08:00
Kayshen-X 403eeac193 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
2026-02-22 11:48:52 +08:00
Fini e3d4f49456 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
2026-02-22 08:19:08 +08:00
Fini 7b51291620 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
2026-02-22 08:19:07 +08:00
Fini 97195c3b2c 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
2026-02-22 08:19:06 +08:00
Fini 7ebc4db95b 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
2026-02-22 08:19:05 +08:00
Fini 531874da10 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
2026-02-22 08:19:04 +08:00
Fini 3db537d0bb 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
2026-02-22 08:19:03 +08:00
Fini b1cfc3137d 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
2026-02-22 08:19:02 +08:00
Fini 341eb5d61a 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
2026-02-22 08:19:01 +08:00
Fini 3bacb5cc27 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
2026-02-22 08:19:00 +08:00
Fini 22dc37890b 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
2026-02-22 08:18:59 +08:00
Fini c5021887f7 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
2026-02-22 08:18:58 +08:00
Fini 7f3afc6ef0 feat(types): add clipContent to ContainerProps
Allow frames to explicitly clip overflowing children, essential for
cards with cornerRadius + image children.
2026-02-22 08:18:57 +08:00
Kayshen-X 007c622dfa 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.
2026-02-21 21:11:15 +08:00
Kayshen-X cd783b958a chore(ci): update GitHub Actions workflow to trigger on main branch pushes 2026-02-21 20:05:39 +08:00
Kayshen-X 5aa3175fec refactor(config): update Vite configuration import for Vitest compatibility 2026-02-21 20:03:07 +08:00
Kayshen-X ca1e215572 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.
2026-02-21 19:59:49 +08:00
Kayshen-X 586978c450 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.
2026-02-21 17:31:41 +08:00
Kayshen-X 4d23d684ee 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.
2026-02-21 17:31:23 +08:00
Kayshen-X cbd211df4b 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.
2026-02-21 16:34:33 +08:00