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 two placeholder colours, INK and GLOW. A palette is

 * those two swapped for two others, here for a download and in

 * `static/glyph.js` for the preview, so one drawing reads in any theme.

 * 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;

/** 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 = 16_000;

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

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

  return `You are a sharp vector designer. 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 64 64">

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

- Use ONLY these colours, written as hex in fill/stroke attributes: ${INK} (main ink) and ${GLOW} (accent glow), plus "none". No other colours, no gradients, no opacity tricks, no CSS, no <style>.

- Allowed elements: g, path, circle, ellipse, rect, line, polyline, polygon, title. No text, no images, no filters, no scripts, no links.

- Bold and simple: it must still read at 24 pixels. Round line caps and joins. Stay inside the viewBox with a little margin.

- 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",

]);

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",

]);

/** A value: numbers, path data, a colour keyword or hex — never a url, a function but a transform's, or markup. */

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 > 4000) continue;

      if (/\(/.test(value) && key !== "transform") continue;

      if (key === "transform" && !/^(\s*(matrix|translate|scale|rotate|skewX|skewY)\([-\d.,\s]*\)\s*)+$/.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. */

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

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

  return svg

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

    .replace(new RegExp(GLOW, "gi"), glow)

    .replace(/\u0000ink/g, ink);

}