Skip to content

feat(engine): lucide icon system + dot-grid canvas + chrome restyle (0.3.1)#6

Merged
leefanv merged 1 commit into
mainfrom
claude/charming-mclean-e3ed6b
May 9, 2026
Merged

feat(engine): lucide icon system + dot-grid canvas + chrome restyle (0.3.1)#6
leefanv merged 1 commit into
mainfrom
claude/charming-mclean-e3ed6b

Conversation

@leefanv
Copy link
Copy Markdown
Owner

@leefanv leefanv commented May 9, 2026

Summary

  • Adds lucide-react as engine runtime dep; replaces all workspace UI chrome emojis / text icons (toolbar, header pills, sidebar, EntryPicker, RightPanel, ThemeEditor, ExportFigmaDialog, OverviewPanel, LibraryPage, PrdsPanel) with lucide glyphs. Project / group / catalog icon fields stay user data and are untouched.
  • "Export to Figma" pill switches to the official 5-color Figma logo (inline SVG); "Library" pill uses lucide Library.
  • Adds a dot-grid background pattern to the canvas surface (.canvas-root + .shell-design-stage__canvas). Inline SVG, 16×16 tile, fill-opacity: 0.1.
  • Restructures canvas-mode header: position: absolute + transparent so the canvas + dot pattern fill the page edge-to-edge; pills float overlay-style with pointer-events: none on the strip and auto on children. Side panels (EntryPicker pinned/floating, RightPanel) gain top: 84px to clear the floating header. .shell-studio__header (workspace home) bg color and bottom border removed.
  • Restyles .copy-btn (Inspect Copy / Download / @1x@3x export) from accent-purple to white-with-gray-border, dark-gray text.

Bumps @omit-design/engine 0.3.0 → 0.3.1.

Test plan

  • CI: lint + typecheck (engine, cli)
  • /workspace — header has no bg/border; project cards still render with their emoji icons
  • /workspace/:id — dot pattern fills entire page (header + body); pills hover above canvas; Pages / Settings / Library / Theme / Export pills show lucide icons; Figma pill shows 5-color Figma logo
  • EntryPicker (pinned + floating) starts at top:84, doesn't collide with floating header
  • RightPanel (Inspect / Theme) starts at top:84
  • Tool rail shows lucide MousePointer2 / Hand / SquareDashed / Ruler / Accessibility / MessageSquare (or Palette in DesignFrame)
  • Inspect Copy / @nx export buttons render white + gray border, no purple
  • CanvasHUD shows lucide + / -; DeviceToolbar rotate uses RotateCw
  • /workspace/:id/library header shows lucide ← Back + separator; PrdsPanel "Copied" state shows Check
  • /workspace/:id/theme-editor Publish has lucide Check; Colors / Spacing tabs use Palette / Ruler

🤖 Generated with Claude Code

- Add lucide-react as runtime dep; replace all workspace chrome
  emojis / text icons (toolbar, header pills, side panels, theme
  editor, export dialog, overview hints, library page header / Prds
  copy-prompt button). Export to Figma button uses official 5-color
  Figma logo. Library nav pill uses Library icon. User-supplied
  project / group / catalog icons preserved.
- Add dot-grid background pattern to .canvas-root and DesignFrame
  stage canvas.
- Restructure canvas-mode header: absolute + transparent so canvas
  fills the page; pills float overlay-style. Side panels offset
  top:84px. Workspace home header bg + border removed.
- Restyle .copy-btn (Inspect Copy / @nx export) to white + gray border
  + dark gray text.

Bumps @omit-design/engine 0.3.0 → 0.3.1.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@leefanv leefanv merged commit ff92b64 into main May 9, 2026
1 check passed
@leefanv leefanv deleted the claude/charming-mclean-e3ed6b branch May 9, 2026 08:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant