Skip to content

feat(core): Illustration primitive + svg-illustration skill - #10

Merged
daniellee-ux merged 1 commit into
mainfrom
claude/recursing-spence-ddbdda
Jul 5, 2026
Merged

daniellee-ux merged 1 commit into
mainfrom
claude/recursing-spence-ddbdda

Conversation

@daniellee-ux

Copy link
Copy Markdown
Owner

Summary

Designs could previously only fake illustrative art with CSS shapes (gradient Ellipses, emoji Icons, bordered Boxes). This PR adds real inline-SVG illustration support:

  • New <Illustration> primitive — a full-bleed host for hand-authored SVG with its own data-ox-type, so it avoids the Inspector's icon-typed behaviors (the blank text-popover whose empty save would delete SVG children, and the color swatch writing an inert prop). Its background prop paints a mat behind the artwork; board.css sizes a direct <svg> child to fill the box.
  • Inspector — background handled everywhere fill is: fillProp routing, currentColorOf, fillIndeterminate, and one shared display name across the swatch label, aria-label, toast, and both commitProps edit labels.
  • LayersPanel — glyph for the new type.
  • New svg-illustration skill (canonical + committed demo mirror) — hosting contract, JSX-not-raw-SVG casing, useId()-prefixed defs ids, viewBox bleed margins for filters, theme-token + color-mix() palette derivation, primitives-first build order, render-look-fix loop, and a compact technique checklist. Referenced from canva-authoring; Icon is rescoped to small glyphs/marks.
  • Docs — skill lists and primitive enumerations updated across AGENTS.md/CLAUDE.md, READMEs, and the init template; apply-comments prop list gains background.

Deliberately deferred

overflow.ts occlusion checks (either direction) for illustration objects — the skill's render-look-fix step covers this manually; the lint's crowding check already exempts the new type by never listing it. Tracked as a fast-follow.

Verification

  • npm run typecheck, npx tsc --noEmit -p apps/demo, npm run build — all pass
  • npm run sync + check:sync — committed mirror matches canonical; .claude/skills/ stays untracked
  • opencanva init into a scratch dir picks up the new skill automatically
  • In-browser: drag/resize/rotate/z write-back targets the <Illustration> JSX; no text popover for the new type; swatch writes background and labels/toast agree; useId() ids don't collide across two instances + live/thumbnail double render; lint clean incl. no crowding false-positive for full-bleed placement
  • Export fidelity: PNG (window.__ox.pngDataUrl()), standalone SVG, and real PDF export all match the live preview incl. gradients, color-mix() in presentation attributes, clipPath, and expanded-region filters
  • End-to-end comment flow proven: @canva-comment on an <Illustration> → apply-comments → SVG edit → render-look-fix → lint clean

🤖 Generated with Claude Code

Designs could previously only fake illustrative art with CSS shapes
(gradient Ellipses, emoji Icons, bordered Boxes). This adds real inline-SVG
illustration support:

- New <Illustration> primitive: a full-bleed host for hand-authored SVG,
  with its own data-ox-type so it avoids the Inspector's icon-typed
  behaviors (blank text-popover whose empty save would delete the SVG
  children, color swatch writing an inert prop). Its `background` prop
  paints a mat behind the artwork; board.css sizes a direct <svg> child
  to fill the box.
- Inspector: `background` handled everywhere `fill` is (fillProp routing,
  currentColorOf, fillIndeterminate, and one shared display name across
  the swatch label, aria-label, toast, and edit labels).
- LayersPanel: glyph for the new type.
- New svg-illustration skill (canonical + committed demo mirror):
  hosting contract, JSX-not-raw-SVG casing, useId()-prefixed defs ids,
  viewBox bleed margins for filters, theme-token + color-mix() palette
  derivation, primitives-first build order, render-look-fix loop, and a
  compact technique checklist. Referenced from canva-authoring; Icon is
  rescoped to small glyphs/marks.
- Docs: skill lists and primitive enumerations updated across AGENTS.md/
  CLAUDE.md, READMEs, and the init template; apply-comments prop list
  gains `background`.

Deliberately deferred: overflow.ts occlusion checks (either direction)
for illustration objects — the skill's render-look-fix step covers this
manually; the lint's crowding check already exempts the new type by
never listing it.

Verified: typecheck, build, sync + check:sync, init scaffold pickup, and
in-browser write-back/lint/export (PNG/SVG/PDF) fidelity.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@daniellee-ux

Copy link
Copy Markdown
Owner Author

Codex review (codex exec review --base main, codex-cli 0.139.0) verdict:

The changes add the Illustration primitive, inspector support for its background mat, layers labeling, and synchronized skill/docs updates without introducing an actionable correctness issue. Typecheck passed in the available sandbox.

No actionable findings — merging as-is.

@daniellee-ux
daniellee-ux merged commit 4b113b7 into main Jul 5, 2026
1 check passed
@daniellee-ux
daniellee-ux deleted the claude/recursing-spence-ddbdda branch July 5, 2026 05:37
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