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.
- Implement improved tool state management for drawing and selection tools, ensuring proper handling of canvas selection and event propagation.
- Refactor layer panel to support drag-and-drop functionality with visual indicators for drop positions (above, below, inside).
- Update layer item component to handle visibility and locking states more intuitively, enhancing user experience during layer manipulation.
- Introduce new keyboard shortcuts for selecting all top-level nodes, aligning with manual selection behavior.
- Enhance the README to reflect new features and improvements in the canvas and layer management systems.
- Introduce a new pen tool for freehand drawing, allowing users to create custom paths on the canvas.
- Cache native dimensions of objects before scaling to ensure accurate rendering.
- Update object synchronization to utilize cached dimensions, improving scaling accuracy during transformations.
- Enhance event handling to support pen tool interactions, including pointer down, move, and up events.
- Add a shape tool dropdown in the toolbar for easy access to shape tools, including the new pen tool.
- Implement an icon picker dialog for importing SVG icons into the canvas.
- Introduce a new module for managing parent-child drag sessions, including functions for initiating, ending, and propagating transformations (move, scale, rotate) to descendant objects.
- Enhance the canvas event handling to support these transformations, ensuring visual feedback during drag operations.
- Add store methods for scaling and rotating descendant nodes in the document structure, maintaining consistency between the canvas and the underlying data model.
- Add support for 'thinking' state in chat message streaming to indicate processing.
- Update toolbar to parse SVG files into editable nodes, allowing for better integration of SVG graphics.
- Refactor image handling to accommodate both SVG and raster images, ensuring proper placement and scaling on the canvas.
- Improve error handling and user feedback during file uploads.
- Add agent settings dialog to connect local Claude Code and Codex CLI
- Connect button fetches real models from Agent SDK / Codex models cache
- Provider logos (Claude, OpenAI) as React icon components in top-bar and dialog
- Model selector in AI chat panel grouped by provider with logos and Best badge
- MCP CLI integration toggles (Claude Code, Codex, Gemini, OpenCode, Kiro)
- Persist agent settings to localStorage with hydrate on mount
- Redesign AI chat panel: header, empty state pills, input area, color layering
- Add shadcn Switch component, agent-settings types and Zustand store
- add fitContentWidth/fitContentHeight to compute container size from children
- getNodeWidth/getNodeHeight fallback to fit-content for containers without explicit dimensions
- computeLayoutPositions always propagates resolved width/height to child nodes
- trigger initial document-to-canvas sync on mount so default frame renders
- canvas background follows dark/light theme via MutationObserver
- add zoomToFitContent() to center viewport on document content
- call zoomToFitContent after canvas init, new document, and open file
- refactor top-bar theme init to useEffect for SSR hydration safety
- 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
- new documents start with a 1920x1080 white root frame
- AI-generated content inserts into the root frame instead of document root
- export DEFAULT_FRAME_ID constant for cross-module access
- property panel only renders when an element is selected
- layer items show eye/lock icons only on the hovered row (group/layer scope)
- replace drag handle with chevron expand/collapse for nodes with children
- track collapsed state in LayerPanel, default all expanded
- remove uppercase from panel section headers
Introduce a new SectionHeader component for consistent section titles and action buttons across panels. Refactor existing sections (Appearance, Effects, Fill, Stroke, Text) to utilize SectionHeader, improving visual hierarchy and user experience. Update styles for better alignment and spacing in various input components, ensuring a cohesive design throughout the property panel.
Add a new toolbar component with tools for selecting, drawing shapes, and adding images. Implement image upload functionality that allows users to add images to the canvas, including handling file selection and scaling images to fit the canvas. Update layer item icons to include an image icon for better visual representation.
Enhance AI chat and generation functionalities by introducing model selection. Update the chat and generation endpoints to accept an optional model parameter. Implement a new API endpoint to fetch available AI models from the server, and integrate model selection into the AI chat panel for improved user experience.
Enhance CLAUDE.md with detailed architecture, key modules, and AI configuration. Introduce LICENSE file with MIT License terms. Remove obsolete Header component to streamline the codebase.
Add section on using shadcn/ui design tokens for UI components and establish guidelines for Git commit messages following the Conventional Commits format. Include details on commit types, scopes, and rules for writing clear commit messages.
Rename all component files to kebab-case per project convention
(e.g. EditorLayout.tsx → editor-layout.tsx). Remove obsolete
PascalCase originals that were replaced by kebab-case versions.
Implement code generators that convert PenNode trees to React+Tailwind
and HTML+CSS output. Add code panel with tab switching, syntax
highlighting, and copy-to-clipboard. Supports generating code for
selected elements or the entire document.
Add floating AI assistant panel with streaming chat, design keyword
detection, and automatic PenNode JSON extraction to canvas. Server
endpoints use Anthropic SDK (with API key) or Claude Agent SDK (local
OAuth) as fallback. Panel supports minimize, drag-to-snap, and
quick action presets.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Implement history store with undo/redo stacks using structuredClone
snapshots. Add keyboard shortcuts for common operations (copy, paste,
delete, group, save, export). Implement save-as dialog (.pen file
download) and export dialog (PNG/SVG with scale options).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Implement property panel with sections for size, fill, stroke, corner
radius, text, appearance, and effects. Add layer panel with drag-and-drop
reordering, visibility toggles, and right-click context menu. Shared
form components: color picker, number input, and dropdown select.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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.
