* docs: add image search & generation design spec and implementation plan
- Spec: dual-source image search (Openverse + Wikimedia), multi-provider image generation
- Plan: 16 tasks covering types, server endpoints, settings UI, property panel, auto-search pipeline, MCP integration
* feat(types): add image service types and imagePrompt to ImageNode
* feat(server): add image service API key validation endpoint
Adds POST /api/ai/image-service-test that validates credentials for
openverse (client_credentials), openai/custom (Bearer + /v1/models),
gemini (API key + v1beta/models), and replicate (Bearer + /v1/models).
* feat(server): add multi-provider image generation endpoint
* feat(server): add dual-source image search endpoint (Openverse + Wikimedia)
POST /api/ai/image-search searches freely-licensed images via Openverse
with automatic fallback to Wikimedia Commons on 429 rate-limit responses.
Supports optional OAuth credentials for authenticated Openverse requests.
* feat(store): add imageSearchStatuses to canvas store for runtime status tracking
* feat(store): add image generation config and Openverse OAuth to agent settings
* feat(editor): add Images tab to agent settings dialog
Adds Popover primitive, ImagesPage component with Image Search (Openverse OAuth, test) and Image Generation (provider select, API key, model, base URL) sections, and wires them into the settings dialog sidebar.
* feat(panels): add image search popover with Openverse/Wikimedia results grid
* feat(panels): add image generate popover with multi-provider support
* feat(panels): add Search and Generate buttons to image property section
* feat(ai): update prompts to use imagePrompt instead of src for image nodes
* feat(ai): add auto-search pipeline with Openverse/Wikimedia fallback
* feat(ai): trigger auto image search after design generation completes
* feat(mcp): implement G() operation for image search in batch design DSL
Adds the G(parent, mode, prompt) operation to batch_design DSL that creates
an image node and optionally fetches a real image URL via the image-search
API when mode is "search". Converts executeLine to async to support the
network call.
* feat(mcp): auto-fill images after design refinement in layered pipeline
* feat(ai): split imageSearchQuery and imagePrompt for search vs generation
- ImageNode now has both imageSearchQuery (short keywords for search)
and imagePrompt (long description for AI image generation)
- AI prompts instruct LLM to generate both fields
- Search pipeline and popovers use imageSearchQuery
- Generate popover uses imagePrompt
- Server-side simplifySearchQuery kept as fallback for manual input
* fix(ai): hook auto image search into orchestrator completion path
The primary generation path uses executeOrchestration -> insertStreamingNode,
not applyNodesToCanvas/animateNodesToCanvas. Added scanAndFillImages call
to orchestrator.ts after all sub-agents complete. Added debug logging.
Removed plan/spec docs from git.
* style(editor): remove provider names from image search ready status
* fix(panels): clean up image gen error display and settings UI
- Parse API error response to show concise message instead of raw JSON
- Limit error text to 2 lines with line-clamp
- Fix image gen test button sending wrong service name
- Inline Image Search ready indicator with section header
- Remove debug logging from image search pipeline
* style(panels): allow up to 4 lines for image gen error message
* fix: avoid 1-frame delay when resizing canvas (#60)
rAF callbacks run before ResizeObserver in the same frame.
Scheduling render in ResizeObserver via rAF defers it to the next frame.
Invoke render() synchronously to leverage ResizeObserver's pre-paint timing
and ensure immediate visual update.
* feat(electron): implement desktop application structure and auto-updater
- Introduced a new Electron desktop application with a structured directory for apps and packages.
- Added auto-updater functionality to manage application updates seamlessly.
- Created a comprehensive menu system for the desktop app.
- Implemented logging capabilities for better debugging and error tracking.
- Configured build settings for various platforms (macOS, Windows, Linux) using electron-builder.
- Established TypeScript configurations for both the desktop and web applications.
- Integrated Vite for the web application with support for React and Tailwind CSS.
- Added icons and assets for the desktop application.
* chore: update package versions to 0.5.0 across all package.json files and add pre-commit hook for version synchronization
- Bumped version to 0.5.0 in package.json files for the main project, desktop app, web app, and all packages.
- Introduced a pre-commit hook to automatically sync version numbers from branch names to all package.json files.
* chore: update package versions to 0.5.0 and refactor Skia components
- Bumped version to 0.5.0 in bun.lock and all relevant package.json files.
- Refactored Skia components to utilize shared functionality from @zseven-w/pen-renderer, including image loading, hit testing, and path utilities.
- Removed redundant code and improved modularity by re-exporting necessary functions and classes from the renderer package.
* fix(panels): handle string fill values in icon nodes (#61)
AI-generated icon/path nodes may have fill stored as a raw string
instead of a PenFill[] array, causing "Cannot use 'in' operator"
crash when selecting the node in the property panel.
* chore: update documentation and project structure for monorepo organization
- Added a new version bump command to synchronize all package.json files.
- Updated the project structure to reflect a monorepo setup with organized workspaces for apps and packages.
- Enhanced README files in multiple languages to include the new structure and commands.
- Adjusted image paths in documentation to point to the correct locations for the desktop application.
* feat(ai): incremental image search and improved image generation prompts
- Refactor image search from batch post-generation to incremental queue:
enqueueImageForSearch() triggers as each image node is inserted during
streaming, so images appear progressively instead of all at once after
generation completes. scanAndFillImages() remains as a final sweep.
- Update imagePrompt guidance to avoid "transparent background" and
similar phrases that many models cannot reliably produce.
- Pass node width/height from image panel to generation endpoint for
aspect-ratio-aware output (Gemini aspect ratio mapping, OpenAI size
selection, Replicate dimensions).
* feat(ai): multi-profile image generation config and cleaner error messages
- Support multiple image generation profiles with active selection;
first configured profile becomes default. Old single-config migrated
automatically on hydrate.
- Fix Gemini aspect ratio: move to generationConfig.imageConfig per API spec.
- Extract clean error messages from provider JSON responses (Gemini
error.message, OpenAI error.message, Replicate detail) instead of
returning raw JSON text.
- Remove destructive client-side regex that mangled error display.
* feat(design-md): integrate design system panel and functionality
- Added a new DesignMdPanel component for managing design system specifications.
- Implemented functionality to toggle the design system panel in the editor layout and toolbar.
- Introduced new commands for importing, exporting, and auto-generating design.md content.
- Updated AI chat handlers to utilize design.md data for enhanced design generation.
- Enhanced localization support for design system features across multiple languages.
* perf(canvas): skip draw calls for nodes outside the viewport (#64)
Add viewport culling in render() to avoid issuing CanvasKit draw calls
for off-screen nodes. A 64px screen-space buffer is kept around the
viewport edges so nearby nodes are pre-rendered, preventing pop-in
during fast panning.
* feat(utils): enhance Windows process spawning for CLI scripts
- Updated the buildSpawnClaudeCodeProcess function to handle .cmd and .ps1 scripts appropriately.
- Implemented PowerShell invocation for .ps1 files and ensured safe defaults for .cmd and .exe files.
- Improved handling of command execution to avoid limitations of cmd.exe.
* feat(ai): add support for Gemini CLI integration
- Extended the AI provider options to include 'gemini' across various components and APIs.
- Implemented functions for generating, validating, and connecting to the Gemini CLI.
- Added Gemini-specific error handling and model fetching logic.
- Updated UI components to display Gemini as a selectable provider with appropriate icons and labels.
- Enhanced localization support for Gemini-related features in multiple languages.
* feat(editor): warn before closing with unsaved changes
Intercept window/tab close when isDirty is true:
- Electron: native dialog with Save / Don't Save / Cancel
- Web: beforeunload handler + confirm on New/Open actions
- i18n: close-confirm strings for all 15 locales
* feat(ipc): extract IPC handlers to a dedicated module
- Moved IPC dialog handling and updater functions from main.ts to ipc-handlers.ts for better organization and maintainability.
- Implemented file open/save dialogs, theme setting, and preferences management through IPC.
- Enhanced updater functionality with state management and auto-update settings.
- Improved code structure by separating concerns, making it easier to manage IPC-related logic.
* feat(docs): update CLAUDE documentation and add new files for desktop and web apps
- Enhanced CLAUDE.md with detailed module documentation references for `packages/` and `apps/`.
- Updated `pen-core` description to include clone utilities in `pen-core`.
- Added new documentation files for the desktop and web applications, outlining their structure, components, and functionalities.
- Included IPC handler details in the desktop app documentation for better clarity on file dialogs and theme synchronization.
* feat(docker): add Gemini CLI support and update documentation
- Introduced a new Docker build stage for the Gemini CLI, allowing users to install and run it.
- Updated the Dockerfile to include the installation of the Gemini CLI alongside existing CLI tools.
- Enhanced README files in multiple languages to document the new `openpencil-gemini` image variant.
- Added Gemini CLI connection instructions to the main README for better user guidance.
* feat(docs): add Gemini CLI connection instructions to multiple language READMEs
- Updated README files in German, Spanish, French, Hindi, Indonesian, Japanese, Korean, Portuguese, Russian, Thai, Turkish, Vietnamese, and both Traditional and Simplified Chinese to include connection instructions for the Gemini CLI.
- Enhanced documentation to improve user guidance for connecting the Gemini CLI in agent settings.
* perf(renderer): replace count-based text cache limits with memory-based eviction (#66)
previous limits (PARA_CACHE_MAX=200, TEXT_CACHE_MAX=300) were too small
for scenes with many nodes, causing constant cache churn and paragraph
rebuilds every frame, which dropped FPS significantly during canvas pan.
- switch to byte-budget limits (64 MB paragraphs, 256 MB bitmaps)
- bitmap size measured exactly as cw*ch*4; paragraph WASM heap estimated
as content.length*64+4096
- eviction uses Map insertion order (FIFO) instead of a separate string[]
array, replacing O(n) array.shift() with O(1) Map.entries().next()
- evict before insert so the budget check includes the incoming entry
---------
Co-authored-by: Fini <fini.yang@gmail.com>
Co-authored-by: leinaldo <60176594+leinaldo@users.noreply.github.com>
* fix(ai): add icon name aliases and fix multi-path SVG concatenation
Add 55+ common icon name aliases (burger→hamburger, sushi→fish, etc.)
to both client icon-resolver and server icon API for robust AI-generated
icon resolution. Register Lucide's own aliases for broader coverage.
Fix SVG path concatenation bug where joining multiple <path> d-values
caused incorrect rendering — a standalone <path> treats initial lowercase
"m" as absolute, but after concatenation it becomes relative to the
previous sub-path endpoint. Now ensures each sub-path starts with
absolute "M".
Add tryAsyncIconFontResolution for icon_font nodes that miss local
lookup — fetches from server API, caches result, and triggers canvas
re-render.
* fix(canvas): preserve badge/overlay absolute positioning in auto-layout
Add isBadgeOverlayNode() detector for badge, indicator, notification-dot,
and overlay nodes. These nodes now retain their x/y coordinates instead
of being stripped by layout sanitization.
Update computeLayoutPositions to exclude badge nodes from the layout flow
— they keep absolute positioning and render on top (prepended for correct
z-order in reverse iteration).
* fix(ai): prevent duplicate canvas objects and fix emoji-to-icon pipeline
Streaming path: add ensureUniqueNodeIds before inserting nodes to prevent
ID collisions across multiple AI generations. Track newly inserted IDs
so subsequent streaming nodes don't collide either.
Canvas sync: deduplicate Fabric objects sharing the same penNodeId —
keep only the one tracked in objMap, remove stale duplicates.
Badge nodes: use shared isBadgeOverlayNode() for z-order insertion
and skip x/y stripping in layout parents.
Fix emoji-to-icon pipeline: re-run applyIconPathResolution after
applyNoEmojiIconHeuristic converts emoji text nodes to path nodes,
so the icon resolver can match by name (e.g. "Pizza Emoji Path" → pizza).
* fix(canvas): add async icon resolution fallback for icon_font nodes
When lookupIconByName fails locally, queue tryAsyncIconFontResolution
to fetch from server API. Cache result in ICON_PATH_MAP and trigger
canvas re-render via store update. Store iconFontName and iconStyle
on Fabric object for sync tracking.
* fix(ai): strengthen emoji ban in prompts and improve orchestrator defaults
Update all AI prompts to explicitly ban emoji characters with concrete
examples and redirect to icon_font nodes instead of the previously
incorrect "path nodes" guidance.
Add z-order rule to orchestrator prompt: overlay elements must come
before content they overlap.
Add padding support to OrchestratorPlan rootFrame type. Default mobile
root frame gap to 16 for consistent spacing.
* feat(electron): add publisher name to Windows build configuration
Updated the `electron-builder.yml` to include a publisher name for Windows builds, enhancing the identification of the application during installation. Additionally, revised the README files across multiple languages to reflect the new project description and features, emphasizing OpenPencil as the world's first AI-native open-source vector design tool with concurrent agent teams and design-as-code capabilities.
---------
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>
- 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.
- new TopBar component: layer panel toggle, new/open/save, centered filename, theme switch, fullscreen
- add layerPanelOpen state and toggleLayerPanel action to canvas-store
- add light theme CSS variables in styles.css, persisted via localStorage
- conditionally render LayerPanel based on toggle state
Set up the Fabric.js v7 canvas integration with bidirectional sync
to a Zustand document store. Includes drawing tools (select, rectangle,
ellipse, line, text, frame, hand), viewport pan/zoom, smart guides,
dimension labels, and the main editor layout with toolbar and status bar.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Added .cta.json for project settings including TypeScript, Tailwind, and Bun as package manager.
- Created .gitignore to exclude common build and environment files.
- Introduced bun.lock for dependency management.
- Added CLAUDE.md for guidance on using Claude Code with the project.
- Set up package.json with scripts for development, build, and testing.
- Created README.md outlining project features, tech stack, and getting started instructions.
- Configured TypeScript with tsconfig.json for strict type checking.
- Established Vite configuration in vite.config.ts for project bundling.
- Added VSCode settings to exclude generated files from linting.
- Included public assets such as favicon and logos.
- Implemented initial routing structure in src/router.tsx and generated route tree in src/routeTree.gen.ts.
- Developed canvas functionality with multiple files for object management and event handling in src/canvas.
- Styled the application using Tailwind CSS in src/styles.css.
Kayshen Xu