- 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.
- 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
- 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.
- 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.
- 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.
- 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
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.
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 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>
- 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.
