Repository navigation
feat(core): Illustration primitive + svg-illustration skill - #10
Merged
Merged
Conversation
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>
Owner
Author
|
Codex review (
No actionable findings — merging as-is. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Designs could previously only fake illustrative art with CSS shapes (gradient
Ellipses, emojiIcons, borderedBoxes). This PR adds real inline-SVG illustration support:<Illustration>primitive — a full-bleed host for hand-authored SVG with its owndata-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). Itsbackgroundprop paints a mat behind the artwork;board.csssizes a direct<svg>child to fill the box.backgroundhandled everywherefillis:fillProprouting,currentColorOf,fillIndeterminate, and one shared display name across the swatch label, aria-label, toast, and bothcommitPropsedit labels.svg-illustrationskill (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 fromcanva-authoring;Iconis rescoped to small glyphs/marks.AGENTS.md/CLAUDE.md, READMEs, and the init template;apply-commentsprop list gainsbackground.Deliberately deferred
overflow.tsocclusion 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 passnpm run sync+check:sync— committed mirror matches canonical;.claude/skills/stays untrackedopencanva initinto a scratch dir picks up the new skill automatically<Illustration>JSX; no text popover for the new type; swatch writesbackgroundand 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 placementwindow.__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@canva-commenton an<Illustration>→apply-comments→ SVG edit → render-look-fix → lint clean🤖 Generated with Claude Code