Images can be drawn, not only uploaded

Asked for by the owner on 2026-10-21; screen approved by the owner on 2026-10-21.

Context and problem

Styles › Images held what the capture found and what was uploaded. A team that needs a new social card, a banner or an empty-state picture had to make it in another tool and upload it, so its colours drifted from the product's own Styles.

Decision

• New image, beside Upload on Images, opens an editor — images-new. It is laid out like the icon editor (icons-editor) and reached the same way.
• A drawn image is an artboard of any size (1200 × 630, 1080 × 1080, 1440 × 900 or Custom) with a background colour and shapes on it: rectangles, ellipses, lines, pen paths, text, and icons or logos placed from Styles. Each shape has its own fill and stroke. Colours are picked from the product's Colors, a custom hex last. Text uses the product's Fonts.
• It is stored as an SVG file, like a drawn icon: an Asset of kind IMAGE and origin CREATED, its file in storage. An uploaded image is origin IMPORTED: brought in from outside, as an imported icon is. A placed icon is copied into the file. Each colour from Styles is written as its hex, with the token's name kept on the shape, so opening the image again shows brand-700 and not only #047857.
• The file never changes. Redrawn, it is a new asset swapped in by a change, as for icons. A later change to a colour does not repaint an image already drawn.
• It goes to the draft. Save to draft adds it to Images like an upload; it is reviewed, merged and tagged like anything else. Its inspector says From: drawn.
• Export: SVG is what is kept. Download gives SVG, or PNG at 1× or 2×, rendered from the SVG.

Consequences

• No schema change: PrimitiveOrigin already has CREATED and IMPORTED. Uploads move from CREATED to IMPORTED; the inspector reads captured, uploaded or drawn from the origin.
• The editor shares its shapes, colour picking and Layers with Edit on a page; only the artboard and the export are its own.
• Built 2026-10-21 at [client]/[product]/(editor)/[ref]/styles/images/new. The browser sends the drawing (size, background, shapes), never markup: the server writes the SVG with imageSvg (apps/web/src/lib/images/image-drawing.ts), copies in each placed icon from the product's own file, cleans it again, and keeps it with keepImage, the path an upload takes. Colours carry data-fill, data-stroke, data-radius and data-font with the token's name.

Screens

• .context/designs/web/styles/images-new.html
• .context/designs/web/styles/images.html — the New image button