apps/glyph Public The code is public; the app answers only to 1 person who can change it and the crew.

Detail #6

Merged wrencrew opened this 4d agoin answer to benjiversowner

shipped merged

In short

by grok, 4d ago

src/glyph.ts now asks for a 256-unit layered mark (gradients, opacity, ~15–60 shapes) and sanitize keeps local defs/linearGradient/radialGradient/stop/clipPath plus exact url(#id) on fill, stroke, and clip-path; SVG cap rises to 48k.
Issue #5 only asked for more detailed logos instead of flat, paint-like marks.
Also adds a third placeholder, paper in design/palettes.json, swapped once to each palette’s ground, and updates README, MCP draw, and OpenAPI colour wording.
Riskiest: the new url(#id) exception in sanitize — a loose match could let a non-local URL through, and ids are not rewritten so pasted SVGs can clash.
In the preview, draw a real concept and check gradients/clips render, it still reads at 32px, and Sage/Neon/Blueprint downloads have no leftover ink, glow, or paper.

wrencrew opened this 4d ago

Drawings now come out detailed and layered instead of flat. The flatness wasn't only the prompt: the sanitizer also threw away every url(), so a gradient was removed even when Claude drew one. This pull fixes both.

What changed

The prompt (ask in src/glyph.ts): it now asks for a polished studio mark on a 256-unit canvas instead of 64. It asks for layered shapes, shading with gradients and opacity, highlights in the background colour, fine detail lines of different weights, and roughly 15–60 shapes. Each drawing must still read as one clear shape at 32px. Expect each drawing to take a bit longer than before.
The sanitizer (sanitize): it now also lets through defs, linearGradient, radialGradient, stop and clipPath, plus the attributes they need. url() is kept only when it is exactly url(#id) on fill, stroke or clip-path; anything else, like a web or data: address, is still dropped. Ids must start with a letter. A gradient's transform follows the same rules as a normal transform. Previews are still <img> data URIs, so ids can't clash between drawings on the page.
A third placeholder colour, "paper" (design/palettes.json): each palette swaps it for its background colour, so highlights and cut-outs follow the theme. Each colour is now replaced exactly once, even when one palette's colour is the same as another placeholder.
Size limit: an SVG can now be 48k characters (was 16k), and one attribute 16k (was 4k).
Descriptions: the README, the MCP draw tool and the API description now name the three colours. contract/openapi.json is regenerated.

Tests

bun test passes: 59 tests.
I changed one existing test on purpose: "no url(#…)" was right for the old rule and now checks "only a local url". Two tests are new: gradients and clip paths survive the sanitizer, and every palette swaps paper to its background colour. Both would fail without this change.
I checked the whole flow with a fake Claude reply containing a layered lighthouse SVG I wrote. It survived the sanitizer unchanged, appeared on the page with its gradients, and downloaded in Sage, Neon and Blueprint with no placeholder colour left over.
I couldn't run a real drawing, because there is no CLAUDE_CODE_OAUTH_TOKEN here. I also had no way to render an SVG, so I haven't actually looked at a picture. Whether the output now looks detailed depends on how Claude answers the new prompt, and only the preview can show that.

Left out on purpose

No masks, patterns, filters or <use>: the sanitizer stays tight, and gradients, opacity and clipping are enough for depth.
Ids aren't rewritten, so pasting two drawings into the same HTML page could clash. The prompt asks for a different id prefix per concept, which covers the four drawn together. Inside the app there's no clash, because each preview is its own image.
Drawings made before this change keep their old flat look; they aren't redrawn.
No change to contract.json.

In the preview With a token set, enter "a lighthouse for a monitoring app" as a logo mark, wait for the four tiles, then switch to Neon and Blueprint. Gradients, glows and paper-coloured highlights should follow each palette, and Save should download a file in that palette.

🤖 Generated with Claude Code

Closes #5

benjiversowner merged this 4d ago