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

/**

 * What a drawing is made of: the ask Claude is given, the reply read back

 * into SVGs, and the wall every SVG passes before it is kept. Pure

 * functions, no I/O — `src/draw.ts` runs Claude, `src/actions.ts` keeps

 * the rows.

 *

 * Every SVG is drawn in three placeholder colours, INK, GLOW and PAPER. A

 * palette swaps ink and glow for its own two and paper for its ground, so

 * one drawing reads in any theme; tone between them comes from opacity and

 * local gradients, never a fourth colour.

 * The colours themselves are data: `design/palettes.json`.

 */

import colours from "../design/palettes.json";

export const KINDS = {

  mark: "logo mark",

  icon: "app icon",

  badge: "badge",

  spot: "spot illustration",

} as const;

export type Kind = keyof typeof KINDS;

export const isKind = (value: unknown): value is Kind =>

  typeof value === "string" && Object.hasOwn(KINDS, value);

/** The placeholder colours every SVG is drawn in. */

export const INK: string = colours.placeholder.ink;

export const GLOW: string = colours.placeholder.glow;

/** The ground's colour, for highlights and cut-outs drawn on top. */

export const PAPER: string = colours.placeholder.paper;

/** Palettes a drawing can be shown and saved in. */

export const PALETTES: Readonly<

  Record<string, { label: string; ink: string; glow: string; ground: string }>

> = colours.palettes;

export type Palette = keyof typeof colours.palettes;

export const isPalette = (value: unknown): value is Palette =>

  typeof value === "string" && Object.hasOwn(PALETTES, value);

export const COUNT = 4;

export const PROMPT_MAX = 400;

/** The most a kept SVG may weigh, in characters. */

export const SVG_MAX = 48_000;

/** What Claude is asked, for one prompt. */

export function ask(prompt: string, kind: Kind): string {

  return `You are a senior identity designer who crafts polished, detailed vector marks — the finish of a studio logo, not clip art. Draw ${COUNT} distinct ${KINDS[kind]} concepts for this brief:

${prompt}

Rules for every SVG:

- Root element exactly: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">

- First child: <title> with a two-to-four word name for the concept.

- Colours: ONLY ${INK} (main ink), ${GLOW} (accent glow) and ${PAPER} (paper — the background colour, for highlights, cut-outs and inner detail drawn on top), plus "none". Write them as hex in fill, stroke and stop-color. No other colours, no colour functions, no CSS, no <style>.

- Depth and tone: build shading with linearGradient/radialGradient inside <defs> whose stops use only those colours (fade with stop-opacity), and with fill-opacity/stroke-opacity. Reference them as fill="url(#id)" or stroke="url(#id)"; clipPath works the same way with clip-path="url(#id)". Give every id a short prefix unique to the concept (a1, b1, …).

- Allowed elements: svg, title, defs, g, path, circle, ellipse, rect, line, polyline, polygon, linearGradient, radialGradient, stop, clipPath. No text, no images, no filters, no masks, no patterns, no use, no scripts, no links.

- Craft: layer several shapes — a confident silhouette, then secondary forms, highlights in paper, a shadow or inner bevel in a darker tone, and fine detail lines in varied stroke weights. Use precise curves (cubic béziers), consistent corner radii and optical balance. Aim for roughly 15–60 shapes, not 3.

- It must still read as one clear shape at 32 pixels: the detail rewards a close look, it never muddies the silhouette. Stay inside the viewBox with a margin of about 12.

- Make the ${COUNT} concepts genuinely different ideas, not variations of one.

Reply with exactly ${COUNT} fenced code blocks marked svg, one per concept, and nothing else.`;

}

/** The SVGs in Claude's reply: each fenced block, through the wall; the ones that do not pass are dropped. */

export function parseReply(reply: string): string[] {

  const blocks = [...reply.matchAll(/```(?:svg|xml)?\s*\n([\s\S]*?)```/g)].map(

    (m) => m[1] ?? "",

  );

  const found =

    blocks.length > 0 ? blocks : [...reply.matchAll(/<svg[\s\S]*?<\/svg>/g)].map((m) => m[0]);

  return found

    .map((svg) => sanitize(svg))

    .filter((svg): svg is string => svg !== undefined)

    .slice(0, COUNT);

}

// The wall. An SVG is rebuilt from what is allowed, never filtered from what is

// not: an element or attribute missing from these lists does not survive, so a

// trick nobody thought of has nothing to ride in on.

const ELEMENTS = new Set([

  "svg", "g", "path", "circle", "ellipse", "rect", "line", "polyline", "polygon", "title",

  "defs", "linearGradient", "radialGradient", "stop", "clipPath",

]);

const ATTRIBUTES = new Set([

  "viewBox", "d", "cx", "cy", "r", "rx", "ry", "x", "y", "x1", "y1", "x2", "y2",

  "width", "height", "points", "fill", "stroke", "stroke-width", "stroke-linecap",

  "stroke-linejoin", "stroke-miterlimit", "stroke-dasharray", "stroke-dashoffset",

  "fill-rule", "clip-rule", "opacity", "fill-opacity", "stroke-opacity", "transform",

  "id", "offset", "stop-color", "stop-opacity", "gradientUnits", "gradientTransform",

  "spreadMethod", "fx", "fy", "fr", "clip-path", "clipPathUnits",

]);

/** Attributes that may point at a paint or clip in the same SVG — `url(#id)` and nothing else. */

const REFERENCES = new Set(["fill", "stroke", "clip-path"]);

const LOCAL = /^url\(#[A-Za-z][\w-]*\)$/;

const TRANSFORM = /^(\s*(matrix|translate|scale|rotate|skewX|skewY)\([-\d.,\s]*\)\s*)+$/;

/** A value: numbers, path data, a colour keyword or hex — never markup; a function only as a transform or a local url. */

const VALUE = /^[-\w\s.,#%()]*$/;

/** Text as text: a bare & is escaped, an entity already written stays one (entities are inert). */

const escapeText = (s: string): string =>

  s

    .replace(/&(?!(?:amp|lt|gt|quot|apos|#\d+|#x[0-9a-f]+);)/gi, "&")

    .replace(/</g, "&lt;")

    .replace(/>/g, ">");

/** The SVG rebuilt from what is allowed, or undefined when there is no SVG worth keeping. */

export function sanitize(input: string): string | undefined {

  if (input.length > SVG_MAX * 2) return undefined;

  // Comments, CDATA, doctypes and processing instructions go before reading tags.

  const source = input

    .replace(/<!--[\s\S]*?-->/g, "")

    .replace(/<!\[CDATA\[[\s\S]*?\]\]>/g, "")

    .replace(/<![^>]*>/g, "")

    .replace(/<\?[\s\S]*?\?>/g, "");

  const out: string[] = [];

  const open: string[] = [];

  let skipping = 0; // depth inside an element that is dropped with its content

  let rootSeen = false;

  const tag = /<(\/?)([A-Za-z][\w:-]*)((?:\s+[^\s=>\/]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?)*)\s*(\/?)>|([^<]+)|</g;

  for (const m of source.matchAll(tag)) {

    const [, closing, rawName, attrs = "", selfClosing, text] = m;

    if (text !== undefined || rawName === undefined) {

      // Text is kept only inside a title; anything else between tags is whitespace or noise.

      if (skipping === 0 && open.at(-1) === "title" && text !== undefined)

        out.push(escapeText(text));

      continue;

    }

    const name = rawName;

    if (closing === "/") {

      if (skipping > 0) {

        skipping--;

        continue;

      }

      if (open.at(-1) === name) {

        open.pop();

        out.push(`</${name}>`);

        if (name === "svg" && open.length === 0) break;

      }

      continue;

    }

    const allowed = ELEMENTS.has(name) && (name === "svg" ? !rootSeen : rootSeen && open.length > 0);

    if (!allowed || skipping > 0) {

      if (selfClosing !== "/") skipping++;

      continue;

    }

    if (name === "svg") rootSeen = true;

    const kept: string[] = name === "svg" ? [`xmlns="http://www.w3.org/2000/svg"`] : [];

    for (const a of attrs.matchAll(/([^\s=>\/]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g)) {

      const key = a[1] ?? "";

      const value = a[2] ?? a[3] ?? a[4] ?? "";

      if (!ATTRIBUTES.has(key) || !VALUE.test(value) || value.length > 16_000) continue;

      const transform = key === "transform" || key === "gradientTransform";

      if (/\(/.test(value) && !(transform && TRANSFORM.test(value)) && !(REFERENCES.has(key) && LOCAL.test(value))) continue;

      if (key === "id" && !/^[A-Za-z][\w-]*$/.test(value)) continue;

      kept.push(`${key}="${value}"`);

    }

    const head = `<${name}${kept.length ? ` ${kept.join(" ")}` : ""}`;

    if (selfClosing === "/") out.push(`${head}/>`);

    else {

      out.push(`${head}>`);

      open.push(name);

    }

  }

  if (!rootSeen) return undefined;

  while (open.length > 0) out.push(`</${open.pop()}>`);

  const svg = out.join("");

  // A drawing has something in it besides its name.

  if (!/<(path|circle|ellipse|rect|line|polyline|polygon)\b/.test(svg)) return undefined;

  if (!/viewBox=/.test(svg)) return undefined;

  return svg.length <= SVG_MAX ? svg : undefined;

}

/** The concept's name, from its <title>. */

export function nameOf(svg: string): string {

  const title = /<title>([^<]*)<\/title>/.exec(svg)?.[1]?.trim();

  return title === undefined || title === "" ? "Untitled" : title.replace(/&/g, "&");

}

/** The SVG in a palette: INK and GLOW swapped for the palette's two, PAPER for its ground. */

export function inPalette(svg: string, palette: Palette): string {

  const { ink, glow, ground } = PALETTES[palette]!;

  // Every placeholder is marked before any is swapped, so a palette whose colour is another placeholder is not swapped twice.

  return svg

    .replace(new RegExp(INK, "gi"), "\u0000ink")

    .replace(new RegExp(GLOW, "gi"), "\u0000glow")

    .replace(new RegExp(PAPER, "gi"), "\u0000paper")

    .replace(/\u0000ink/g, ink)

    .replace(/\u0000glow/g, glow)

    .replace(/\u0000paper/g, ground);

}