@palate/cli 0.0.0-stage → 0.0.2

package/src/systems/load.mjs

@@ -0,0 +1,251 @@
+// Design systems: parses kb/systems/*/DESIGN.md (frontmatter format and the older prose format) into one
+// model with colour roles, a type scale, radii, spacing, component specs, the system's own written rules,
+// and facets computed from the values themselves. No model calls.
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import YAML from "yaml";
+import { fontClass, hueSat, luminance, parseColor } from "../catalog/classify.mjs";
+import { KB_ROOT } from "../paths.mjs";
+
+export const SYSTEMS_DIR = process.env.PALATE_SYSTEMS ?? path.join(KB_ROOT, "systems");
+
+const px = (v) => {
+  const m = /(-?[\d.]+)\s*(px|rem|em)?/.exec(String(v ?? ""));
+  if (!m) return undefined;
+  const n = Number(m[1]);
+  return m[2] === "rem" ? n * 16 : n;
+};
+const em = (tracking, size) => {
+  const s = String(tracking ?? "").trim();
+  if (!s || s === "0" || s === "normal") return 0;
+  if (s.endsWith("em")) return Number.parseFloat(s);
+  const p = px(s);
+  return p !== undefined && size ? Math.round((p / size) * 1000) / 1000 : 0;
+};
+
+function sectionsOf(body) {
+  const out = {};
+  let title = "intro";
+  for (const line of body.split("\n")) {
+    const h = /^#{2,3}\s+(?:\d+\.\s*)?(.*)$/.exec(line);
+    if (h) {
+      title = h[1].trim().toLowerCase();
+      out[title] ??= "";
+      continue;
+    }
+    out[title] = (out[title] ?? "") + line + "\n";
+  }
+  for (const k of Object.keys(out)) out[k] = out[k].trim();
+  return out;
+}
+
+// Frontmatter that fails to parse is usually an unquoted description containing ": ".
+// Returns undefined when the frontmatter is beyond repair, so the caller falls back to the prose parser.
+function parseFrontmatter(text) {
+  try {
+    return YAML.parse(text);
+  } catch {
+    // Quote plain top-level values, and rename keys mangled by translation (they'd clash with a real key).
+    const fixed = text
+      .split("\n")
+      .map((line) => {
+        const m = /^([^\s#][^:]*):\s+(?!["'|>{[])(.+)$/.exec(line);
+        if (!m) return line;
+        const key = /^[\w-]+$/.test(m[1]) ? m[1] : "summary";
+        return `${key}: ${JSON.stringify(m[2])}`;
+      })
+      .join("\n");
+    try {
+      return YAML.parse(fixed);
+    } catch {
+      return undefined;
+    }
+  }
+}
+
+const first = (obj, keys) => {
+  for (const k of keys) if (obj?.[k]) return obj[k];
+  return undefined;
+};
+
+function rolesFromColors(c) {
+  const canvas = first(c, ["canvas", "background", "canvas-light", "surface", "page"]) ?? "#ffffff";
+  const ink = first(c, ["ink", "text", "foreground", "ink-deep", "body-strong"]) ?? "#111111";
+  return {
+    canvas,
+    ink,
+    body: first(c, ["body", "body-strong", "ink-muted"]) ?? ink,
+    muted: first(c, ["muted", "mute", "ink-subtle", "ink-muted", "body-muted", "stone", "slate", "steel", "ash"]),
+    hairline: first(c, ["hairline", "hairline-soft", "border", "divider", "hairline-strong"]),
+    hairlineStrong: first(c, ["hairline-strong", "border-strong"]),
+    surface: first(c, ["surface-card", "surface-1", "surface", "card", "canvas"]) ?? canvas,
+    surfaceSoft: first(c, ["surface-soft", "canvas-soft", "surface-2", "surface-muted", "surface-strong"]),
+    primary: first(c, ["primary", "brand", "accent"]),
+    onPrimary: first(c, ["on-primary"]),
+    success: first(c, ["success", "semantic-success"]),
+    warning: first(c, ["warning", "semantic-warning"]),
+    error: first(c, ["error", "semantic-error", "danger"]),
+    link: first(c, ["link"]),
+  };
+}
+
+function typeFromYaml(t) {
+  return Object.entries(t ?? {})
+    .map(([role, v]) => ({
+      role,
+      family: String(v.fontFamily ?? "").split(",")[0].replace(/["']/g, "").trim(),
+      size: px(v.fontSize),
+      weight: Number(v.fontWeight) || undefined,
+      lineHeight: Number(v.lineHeight) || (px(v.lineHeight) && px(v.fontSize) ? Math.round((px(v.lineHeight) / px(v.fontSize)) * 100) / 100 : undefined),
+      tracking: em(v.letterSpacing, px(v.fontSize)),
+    }))
+    .filter((r) => r.size);
+}
+
+// Older prose format: "- **Name** (`#hex`): role" bullets and a markdown table for the type hierarchy.
+function legacyColors(sections) {
+  // Colour bullets live in sub-sections (Primary, Neutral, Semantic…), so search the whole document.
+  const text = Object.values(sections).join("\n");
+  const entries = [...text.matchAll(/\*\*([^*]+)\*\*\s*\(`?(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\))`?[^)]*\):?\s*(.*)/g)].map((m) => ({ name: m[1], value: m[2], role: m[3] }));
+  const find = (re) => entries.find((e) => re.test(`${e.name} ${e.role}`))?.value;
+  // The page colour is a neutral whose role says background/canvas/page/surface.
+  const neutral = (v) => {
+    const alpha = /rgba\([^)]*,\s*([\d.]+)\s*\)/i.exec(v)?.[1];
+    if (alpha !== undefined && Number(alpha) < 0.5) return false;
+    const rgb = parseColor(v);
+    return rgb ? hueSat(rgb).s < 0.2 : false;
+  };
+  // Strongest wording first, so "page canvas" wins over a "footer surface" mentioned earlier.
+  const canvas = [/\bcanvas\b/i, /\bpage\b/i, /\bbackground\b/i, /\b(primary|base) surface\b/i, /\bwhite\b/i]
+    .map((re) => entries.find((e) => re.test(`${e.name} ${e.role}`) && !/footer|dark section|inverse/i.test(`${e.name} ${e.role}`) && neutral(e.value))?.value)
+    .find(Boolean);
+  const colors = Object.fromEntries(entries.map((e) => [e.name.toLowerCase().replace(/[^a-z0-9]+/g, "-"), e.value]));
+  return {
+    colors,
+    roles: {
+      canvas: canvas ?? "#ffffff",
+      ink: find(/\b(primary text|near black|heading|ink|text)\b/i) ?? "#111111",
+      body: find(/\bbody\b/i),
+      muted: find(/\b(secondary text|muted|tertiary|subtle)\b/i),
+      hairline: find(/\b(border|divider|hairline)\b/i),
+      surface: find(/\b(card|surface)\b/i),
+      primary: find(/\b(primary cta|cta|brand|primary|accent)\b/i),
+      onPrimary: undefined,
+      success: find(/\b(success|positive)\b/i),
+      warning: find(/\bwarning\b/i),
+      error: find(/\b(error|danger|negative)\b/i),
+    },
+  };
+}
+
+function legacyType(sections) {
+  // The type hierarchy is the first markdown table whose header has a Size column.
+  const tables = Object.values(sections)
+    .join("\n")
+    .split(/\n(?!\s*\|)/)
+    .map((block) => block.split("\n").filter((l) => l.trim().startsWith("|") && !/^\|\s*:?-/.test(l.trim())))
+    .filter((t) => t.length > 1 && /size/i.test(t[0]));
+  const rows = tables[0] ?? [];
+  if (rows.length < 2) return [];
+  const head = rows[0].split("|").map((c) => c.trim().toLowerCase());
+  const col = (n) => head.findIndex((h) => h.includes(n));
+  return rows
+    .slice(1)
+    .map((r) => r.split("|").map((c) => c.trim()))
+    .map((c) => ({
+      role: (c[col("role") >= 0 ? col("role") : col("token")] ?? "").toLowerCase().replace(/[{}`]/g, "").replace(/^typography./, "").replace(/[^a-z0-9]+/g, "-"),
+      family: (c[col("font")] ?? "").split(",")[0].replace(/[`"']/g, "").trim(),
+      size: px(c[col("size")]),
+      weight: Number.parseInt(c[col("weight")] ?? "", 10) || undefined,
+      lineHeight: Number.parseFloat(c[col("line")] ?? "") || undefined,
+      tracking: em((c[col("letter")] ?? "").replace(/\(.*\)/, ""), px(c[col("size")])),
+    }))
+    .filter((r) => r.size && r.role);
+}
+
+function numbersIn(obj) {
+  return Object.fromEntries(Object.entries(obj ?? {}).map(([k, v]) => [k, px(v)]).filter(([, v]) => v !== undefined));
+}
+
+function facets(sys) {
+  const rgb = (c) => (c ? parseColor(c) : undefined);
+  const canvas = rgb(sys.roles.canvas);
+  const lum = canvas ? luminance(canvas) : 1;
+  const primary = rgb(sys.roles.primary);
+  const ph = primary ? hueSat(primary) : undefined;
+  // Brand colours only: status colours (success, error…) don't make a palette colourful.
+  const chromatic = Object.entries(sys.colors)
+    .filter(([k]) => !/success|error|warning|danger|info|semantic|positive|negative|alert|status/i.test(k))
+    .map(([, v]) => rgb(v))
+    .filter(Boolean)
+    .map(hueSat)
+    .filter((h) => h.s > 0.4);
+  const hues = new Set(chromatic.map((h) => Math.round(h.h / 30)));
+  const sizes = sys.type.map((t) => t.size).filter(Boolean);
+  const display = sys.type.filter((t) => /display|hero|heading-1|h1|title-xl/.test(t.role)).sort((a, b) => b.size - a.size)[0] ?? [...sys.type].sort((a, b) => b.size - a.size)[0];
+  const body = sys.type.find((t) => /^body(-md)?$/.test(t.role)) ?? sys.type.find((t) => /body/.test(t.role));
+  const text = Object.values(sys.sections).join("\n").toLowerCase();
+  const shadowWords = (text.match(/shadow/g) ?? []).length;
+  const borderWords = (text.match(/hairline|1px (solid )?border|border-only|flat/g) ?? []).length;
+  const buttonRadius = px(sys.components?.["button-primary"]?.rounded?.replace?.(/[{}]/g, "").split(".").pop() && sys.radii[sys.components["button-primary"].rounded.replace(/[{}]/g, "").split(".").pop()]) ?? sys.radii.md ?? sys.radii.sm;
+  const cardRadius = sys.radii.lg ?? sys.radii.md;
+  return {
+    theme: lum > 0.4 ? "light" : lum < 0.15 ? "dark" : "mid",
+    accent: !ph ? "none" : ph.s < 0.15 ? "neutral" : "chromatic",
+    accentHue: ph && ph.s >= 0.15 ? Math.round(ph.h) : undefined,
+    palette: hues.size <= 1 ? "restrained" : hues.size <= 3 ? "accented" : "colourful",
+    displaySize: display?.size,
+    displayWeight: display?.weight,
+    displayTracking: display?.tracking,
+    displayClass: fontClass(display?.family) ?? (/(serif|times|garamond|georgia|tiempos|domaine|waldenburg)/i.test(display?.family ?? "") ? "serif" : undefined),
+    bodySize: body?.size,
+    density: (body?.size ?? 16) <= 14 ? "dense" : (body?.size ?? 16) >= 18 ? "airy" : "regular",
+    radius: buttonRadius === undefined ? "unknown" : buttonRadius >= 999 ? "pill" : buttonRadius <= 4 ? "sharp" : buttonRadius <= 10 ? "soft" : "round",
+    cardRadius,
+    elevation: shadowWords > borderWords * 1.5 ? "shadow" : borderWords > shadowWords ? "hairline" : "mixed",
+    scaleSteps: new Set(sizes).size,
+    gradients: /gradient|orb|mesh/.test(text),
+  };
+}
+
+export function loadSystems() {
+  if (!fs.existsSync(SYSTEMS_DIR)) return [];
+  return fs
+    .readdirSync(SYSTEMS_DIR, { withFileTypes: true })
+    .filter((d) => d.isDirectory() && fs.existsSync(path.join(SYSTEMS_DIR, d.name, "DESIGN.md")))
+    .map((d) => {
+      const file = path.join(SYSTEMS_DIR, d.name, "DESIGN.md");
+      const src = fs.readFileSync(file, "utf8").replace(/\r\n/g, "\n");
+      const fm = src.match(/^---\n([\s\S]*?)\n---\n?([\s\S]*)$/);
+      const body = fm ? fm[2] : src;
+      const sections = sectionsOf(body);
+      let sys;
+      const y = fm ? parseFrontmatter(fm[1]) : undefined;
+      if (y) {
+        sys = {
+          description: String(y.description ?? y.summary ?? ""),
+          colors: y.colors ?? {},
+          roles: rolesFromColors(y.colors ?? {}),
+          type: typeFromYaml(y.typography),
+          radii: numbersIn(y.rounded),
+          spacing: numbersIn(y.spacing),
+          components: y.components ?? {},
+        };
+      } else {
+        const { colors, roles } = legacyColors(sections);
+        const radii = {};
+        const rs = [...body.matchAll(/(\d+)px\s+radius|radius[^.\n]*?(\d+)px/gi)].map((m) => Number(m[1] ?? m[2]));
+        if (rs.length) {
+          const sorted = [...new Set(rs)].sort((a, b) => a - b);
+          radii.sm = sorted[0];
+          radii.md = sorted[Math.floor(sorted.length / 2)];
+          radii.lg = sorted[sorted.length - 1];
+        }
+        sys = { description: (sections["visual theme & atmosphere"] ?? sections.intro ?? "").split("\n\n")[0], colors, roles, type: legacyType(sections), radii, spacing: {}, components: {} };
+      }
+      const name = /^#\s+(.*)$/m.exec(body)?.[1]?.replace(/^Design System Inspired by\s+/i, "").replace(/\s+Inspired Design System Analysis$/i, "").trim() ?? d.name;
+      const full = { id: d.name, name, file, sections, ...sys };
+      return { ...full, facets: facets(full) };
+    });
+}

package/src/systems/pick.mjs

@@ -0,0 +1,213 @@
+// `palate system pick`: choose the design system whose craft fits this request and this codebase.
+// No questions: intent comes from the request words, the kind of screen, the project's own brand and
+// any product the user names. Returns three distinct candidates with reasons.
+import fs from "node:fs";
+import path from "node:path";
+import { SYSTEMS_DIR, loadSystems } from "./load.mjs";
+import { projectProfile } from "../refs.mjs";
+import { hueSat, parseColor } from "../catalog/classify.mjs";
+
+const words = (s) => String(s ?? "").toLowerCase().match(/[a-z0-9]+/g) ?? [];
+
+const KIND = {
+  tool: /\b(dashboard|table|list|settings|admin|app|crm|inbox|editor|members|team|analytics|queue|approvals|runs|kanban|workspace|console|internal)\b/,
+  marketing: /\b(landing|homepage|home page|hero|marketing|launch|website|pricing|campaign|brand|waitlist|portfolio)\b/,
+  commerce: /\b(shop|store|product page|checkout|cart|collection|ecommerce|e-commerce|candle|fashion|retail)\b/,
+  docs: /\b(docs|documentation|api reference|changelog|guide|reference)\b/,
+};
+
+// What kind of screen the request is: tool, marketing, commerce or docs.
+export function readKind(request) {
+  const text = String(request ?? "").toLowerCase();
+  const scores = Object.entries(KIND).map(([k, re]) => [k, (text.match(new RegExp(re.source, "g")) ?? []).length + (k === "marketing" && /\b(landing|homepage|hero)\b/.test(text) ? 2 : 0)]);
+  scores.sort((a, b) => b[1] - a[1]);
+  return scores[0][1] > 0 ? scores[0][0] : "marketing";
+}
+
+// Tone words → the facet values they pull toward.
+const TONE = [
+  [/\b(calm|quiet|minimal|clean|simple|restrained|subtle)\b/, { palette: "restrained", elevation: "hairline" }],
+  [/\b(bold|vibrant|playful|fun|colou?rful|energetic|loud)\b/, { palette: "colourful", radius: "round" }],
+  [/\b(premium|luxury|elegant|refined|editorial|sophisticated)\b/, { displayWeightMax: 500, palette: "restrained" }],
+  [/\b(technical|developer|engineering|precise|terminal|dev)\b/, { density: "dense", elevation: "hairline" }],
+  [/\b(dark|night|moody)\b/, { theme: "dark" }],
+  [/\b(light|bright|airy|fresh)\b/, { theme: "light" }],
+  [/\b(warm|friendly|human|soft|cosy|cozy)\b/, { warm: true, radius: "round" }],
+  [/\b(dense|compact|information|data)\b/, { density: "dense" }],
+  [/\b(trust|trustworthy|serious|enterprise|corporate|finance|bank)\b/, { palette: "restrained", radius: "soft" }],
+];
+
+function canvasWarm(sys) {
+  const rgb = parseColor(sys.roles.canvas);
+  if (!rgb) return false;
+  const { h, s } = hueSat(rgb);
+  return s > 0.04 && h >= 15 && h <= 65;
+}
+
+function vector(sys) {
+  const f = sys.facets;
+  return [
+    f.theme === "dark" ? 1 : 0,
+    f.accent === "chromatic" ? 1 : 0,
+    { restrained: 0, accented: 0.5, colourful: 1 }[f.palette] ?? 0.5,
+    { sharp: 0, soft: 0.33, round: 0.66, pill: 1 }[f.radius] ?? 0.5,
+    f.elevation === "shadow" ? 1 : f.elevation === "mixed" ? 0.5 : 0,
+    { dense: 0, regular: 0.5, airy: 1 }[f.density] ?? 0.5,
+    f.displayClass === "serif" ? 1 : 0,
+    Math.min(1, (f.displaySize ?? 48) / 96),
+    canvasWarm(sys) ? 1 : 0,
+  ];
+}
+const distance = (a, b) => Math.sqrt(a.reduce((n, x, i) => n + (x - b[i]) ** 2, 0));
+
+// Recently applied systems for this project: used to avoid repeating the same look (novelty).
+function history(dir) {
+  try {
+    return JSON.parse(fs.readFileSync(path.join(dir, ".palate", "systems.json"), "utf8"));
+  } catch {
+    return [];
+  }
+}
+
+function categories() {
+  try {
+    return JSON.parse(fs.readFileSync(path.join(SYSTEMS_DIR, "categories.json"), "utf8"));
+  } catch {
+    return {};
+  }
+}
+
+export function pickSystems(request, { dir, count = 3 } = {}) {
+  const systems = loadSystems();
+  const text = String(request ?? "").toLowerCase();
+  const q = new Set(words(text).filter((w) => w.length > 2));
+  const profile = dir ? projectProfile(dir) : {};
+  const kind = readKind(text);
+  const cats = categories();
+  const wants = {};
+  for (const [re, pull] of TONE) if (re.test(text)) Object.assign(wants, pull);
+  const theme = wants.theme ?? profile.theme;
+  const used = new Set(dir ? history(dir).map((h) => h.id) : []);
+
+  const scored = systems.map((s) => {
+    const f = s.facets;
+    const reasons = [];
+    let score = 0;
+
+    // 1. The user named a product: their reference comes first.
+    const named = [s.id.replace(/\.(app|ai|com)$/, ""), s.name.toLowerCase()].some((n) => n.length > 2 && new RegExp(`\\b${n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\b`).test(text));
+    if (named) {
+      score += 10;
+      reasons.push("you named it");
+    }
+
+    // 2. Words in the request against what the system is about.
+    const doc = new Set(words(`${s.description} ${s.sections.overview ?? ""} ${s.sections["visual theme & atmosphere"] ?? ""}`));
+    const hits = [...q].filter((w) => doc.has(w) && !["the", "and", "for", "with", "page"].includes(w));
+    score += Math.min(2, hits.length * 0.25);
+    if (hits.length >= 3) reasons.push(`description matches ${hits.slice(0, 4).join(", ")}`);
+
+    // 3. Where the system comes from: product UI systems for work tools, the right industry for the rest.
+    const cat = cats[s.id] ?? {};
+    const toolCats = ["productivity", "b2b-saas", "devtools", "design-tools"];
+    if (kind === "tool" || kind === "docs") {
+      score += cat.product_ui ? 1.2 : -1.5;
+      if (toolCats.includes(cat.category)) score += 0.8;
+      if (["media", "luxury", "automotive", "retro", "betting", "entertainment"].includes(cat.category)) score -= 2;
+    }
+    if (kind === "commerce") {
+      if (["retail", "commerce-platform", "consumer", "consumer-hardware"].includes(cat.category)) score += 1;
+      if (["devtools", "betting", "retro"].includes(cat.category)) score -= 1;
+    }
+    if (kind === "marketing") {
+      if (["betting", "retro"].includes(cat.category)) score -= 1.5;
+      // Industry affinity: a software product's landing page learns from software brands, a shop from retail.
+      const software = /\b(ai|crm|saas|b2b|startup|platform|api|tool|software|agents?|developer|app|workflow|automation|analytics)\b/.test(text);
+      const money = /\b(bank|banking|finance|fintech|payments?|invoic\w*|money|crypto)\b/.test(text);
+      if (software && ["productivity", "b2b-saas", "devtools", "ai", "design-tools"].includes(cat.category)) score += 1.2;
+      if (money && cat.category === "fintech") score += 1.2;
+      if ((software || money) && ["retail", "automotive", "luxury", "media", "enterprise", "consumer-hardware", "entertainment", "aerospace"].includes(cat.category)) score -= 1.2;
+    }
+    const domainHits = (cat.domains ?? []).filter((d) => words(d).every((w) => q.has(w) || q.has(w + "s")));
+    if (domainHits.length) {
+      score += 0.8 * domainHits.length;
+      reasons.push(`same kind of product (${domainHits.join(", ")})`);
+    }
+
+    // 4. The kind of screen.
+    if (kind === "tool") {
+      score += (f.elevation === "hairline" ? 0.8 : 0) + (f.palette !== "colourful" ? 0.6 : -0.6) + (f.radius === "sharp" || f.radius === "soft" ? 0.6 : f.radius === "pill" ? -0.6 : 0) + (f.density !== "airy" ? 0.4 : -0.4) + (f.gradients ? -0.4 : 0);
+      if (f.elevation === "hairline" && f.palette !== "colourful") reasons.push("quiet, hairline craft suits a work tool");
+    } else if (kind === "docs") {
+      score += (f.elevation === "hairline" ? 0.6 : 0) + (f.palette === "restrained" ? 0.5 : 0) + (f.density !== "airy" ? 0.3 : 0);
+    } else if (kind === "commerce") {
+      score += (f.radius === "round" || f.radius === "pill" ? 0.4 : 0) + (f.accent === "chromatic" ? 0.3 : 0);
+    } else {
+      score += (f.displaySize ?? 0) >= 56 ? 0.5 : 0;
+    }
+
+    // 5. Tone words.
+    for (const [k, v] of Object.entries(wants)) {
+      if (k === "warm" && v && canvasWarm(s)) {
+        score += 0.8;
+        reasons.push("warm canvas");
+      } else if (k === "displayWeightMax" && f.displayWeight && f.displayWeight <= v) {
+        score += 0.6;
+        reasons.push("light, refined display weight");
+      } else if (f[k] === v) {
+        score += 0.7;
+        reasons.push(`${k}: ${v}`);
+      }
+    }
+
+    // 6. Fit with the project as it is.
+    if (theme && f.theme !== "mid") {
+      if (f.theme === theme) score += 1;
+      else score -= named ? 0 : 2;
+    }
+    if (profile.typeClass && f.displayClass === profile.typeClass) {
+      score += 0.4;
+      reasons.push(`same type character as your project (${profile.typeClass})`);
+    }
+
+    // 7. Novelty: don't hand this project the look it already had.
+    if (used.has(s.id)) score -= 1.5;
+
+    return { system: s, score, reasons, v: vector(s) };
+  });
+
+  scored.sort((a, b) => b.score - a.score);
+  // Three that differ: maximal marginal relevance on the facet vectors.
+  const picked = [];
+  const pool = scored.slice(0, 20);
+  const maxScore = Math.max(...pool.map((p) => p.score), 1e-9);
+  while (picked.length < count && pool.length) {
+    let best = 0;
+    let bestVal = -Infinity;
+    pool.forEach((c, i) => {
+      const sim = picked.length ? Math.max(...picked.map((p) => 1 - Math.min(1, distance(p.v, c.v) / 2))) : 0;
+      const val = 0.75 * (c.score / maxScore) - 0.25 * sim;
+      if (val > bestVal) {
+        bestVal = val;
+        best = i;
+      }
+    });
+    picked.push(pool.splice(best, 1)[0]);
+  }
+  return { kind, theme, wants, profile, picked };
+}
+
+export function pickReport(request, opts) {
+  const r = pickSystems(request, opts);
+  const out = [`# Design systems for: ${request}`, "", `Read as a ${r.kind} screen${r.theme ? `, ${r.theme} base` : ""}${Object.keys(r.wants).length ? `, tone: ${Object.entries(r.wants).map(([k, v]) => `${k}=${v}`).join(", ")}` : ""}.`, ""];
+  r.picked.forEach((p, i) => {
+    const f = p.system.facets;
+    out.push(`## ${i + 1}. ${p.system.name} (id: ${p.system.id})`);
+    out.push(`- ${p.system.description.slice(0, 280)}${p.system.description.length > 280 ? "…" : ""}`);
+    out.push(`- craft: ${f.theme} · ${f.accent} accent · ${f.palette} palette · ${f.radius} radii · ${f.elevation} elevation · ${f.density} · display ${f.displaySize}px/${f.displayWeight} ${f.displayClass ?? ""}`.replace(/\s+$/, ""));
+    out.push(`- why: ${p.reasons.join("; ") || "closest overall fit"}`);
+    out.push("");
+  });
+  out.push("Apply one with: palate system apply <id>   (keeps your brand accent; transfers type, spacing, radii, elevation and density)");
+  return out.join("\n");
+}

package/templates/vite-react-tw/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{title}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/vite-react-tw/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "{{name}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^24.19.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.3",
+    "vite": "^8.3.4"
+  }
+}

package/templates/vite-react-tw/src/App.tsx

@@ -0,0 +1,3 @@
+export default function App() {
+  return <main></main>
+}

package/templates/vite-react-tw/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/vite-react-tw/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/templates/vite-react-tw/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/templates/vite-react-tw/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/templates/vite-react-tw/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/vite-react-tw/vite.config.ts

@@ -0,0 +1,8 @@
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from 'vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})