brandrail 0.9.0 → 0.10.0

package/dist/brandrail.mjs

@@ -1444,15 +1444,15 @@ var require_rules = __commonJS({
     }
     exports.isJSONType = isJSONType;
     function getRules() {
-      const groups = {
+      const groups2 = {
         number: { type: "number", rules: [] },
         string: { type: "string", rules: [] },
         array: { type: "array", rules: [] },
         object: { type: "object", rules: [] }
       };
       return {
-        types: { ...groups, integer: true, boolean: true, null: true },
-        rules: [{ rules: [] }, groups.number, groups.string, groups.array, groups.object],
+        types: { ...groups2, integer: true, boolean: true, null: true },
+        rules: [{ rules: [] }, groups2.number, groups2.string, groups2.array, groups2.object],
         post: { rules: [] },
         all: {},
         keywords: {}
@@ -3190,9 +3190,9 @@ var require_utils = __commonJS({
         }
       }
       if (bestLength < 2) return hextets.join(":");
-      const head = hextets.slice(0, bestStart).join(":");
+      const head2 = hextets.slice(0, bestStart).join(":");
       const tail = hextets.slice(bestStart + bestLength).join(":");
-      return head + "::" + tail;
+      return head2 + "::" + tail;
     }
     function normalizeIPv6Address(input2) {
       const compression = input2.indexOf("::");
@@ -3383,9 +3383,9 @@ var require_utils = __commonJS({
       let output2 = "";
       for (let i2 = 0; i2 < input2.length; i2++) {
         if (input2[i2] === "%" && i2 + 2 < input2.length) {
-          const hex3 = input2.slice(i2 + 1, i2 + 3);
-          if (isHexPair(hex3)) {
-            const normalizedHex = hex3.toUpperCase();
+          const hex4 = input2.slice(i2 + 1, i2 + 3);
+          if (isHexPair(hex4)) {
+            const normalizedHex = hex4.toUpperCase();
             const decoded = String.fromCharCode(parseInt(normalizedHex, 16));
             if (decodeUnreserved && isUnreserved(decoded)) {
               output2 += decoded;
@@ -3405,9 +3405,9 @@ var require_utils = __commonJS({
       for (let i2 = 0; i2 < input2.length; i2++) {
         const ch = input2[i2];
         if (ch === "%" && i2 + 2 < input2.length) {
-          const hex3 = input2.slice(i2 + 1, i2 + 3);
-          if (isHexPair(hex3)) {
-            const normalizedHex = hex3.toUpperCase();
+          const hex4 = input2.slice(i2 + 1, i2 + 3);
+          if (isHexPair(hex4)) {
+            const normalizedHex = hex4.toUpperCase();
             const decoded = String.fromCharCode(parseInt(normalizedHex, 16));
             if (decoded !== "." && isUnreserved(decoded)) {
               output2 += decoded;
@@ -3447,9 +3447,9 @@ var require_utils = __commonJS({
       for (let i2 = 0; i2 < input2.length; i2++) {
         const ch = input2[i2];
         if (ch === "%" && i2 + 2 < input2.length) {
-          const hex3 = input2.slice(i2 + 1, i2 + 3);
-          if (isHexPair(hex3)) {
-            output2 += "%" + hex3.toUpperCase();
+          const hex4 = input2.slice(i2 + 1, i2 + 3);
+          if (isHexPair(hex4)) {
+            output2 += "%" + hex4.toUpperCase();
             i2 += 2;
             continue;
           }
@@ -3485,9 +3485,9 @@ var require_utils = __commonJS({
       for (let i2 = 0; i2 < input2.length; i2++) {
         const ch = input2[i2];
         if (ch === "%" && i2 + 2 < input2.length) {
-          const hex3 = input2.slice(i2 + 1, i2 + 3);
-          if (isHexPair(hex3)) {
-            output2 += "%" + hex3.toUpperCase();
+          const hex4 = input2.slice(i2 + 1, i2 + 3);
+          if (isHexPair(hex4)) {
+            output2 += "%" + hex4.toUpperCase();
             i2 += 2;
             continue;
           }
@@ -3532,9 +3532,9 @@ var require_utils = __commonJS({
       for (let i2 = 0; i2 < input2.length; i2++) {
         const ch = input2[i2];
         if (ch === "%" && i2 + 2 < input2.length) {
-          const hex3 = input2.slice(i2 + 1, i2 + 3);
-          if (isHexPair(hex3)) {
-            const normalizedHex = hex3.toUpperCase();
+          const hex4 = input2.slice(i2 + 1, i2 + 3);
+          if (isHexPair(hex4)) {
+            const normalizedHex = hex4.toUpperCase();
             const decoded = String.fromCharCode(parseInt(normalizedHex, 16));
             if (isUnreserved(decoded)) {
               output2 += decoded;
@@ -3572,9 +3572,9 @@ var require_utils = __commonJS({
       let output2 = "";
       for (let i2 = 0; i2 < input2.length; i2++) {
         if (input2[i2] === "%" && i2 + 2 < input2.length) {
-          const hex3 = input2.slice(i2 + 1, i2 + 3);
-          if (isHexPair(hex3)) {
-            output2 += "%" + hex3.toUpperCase();
+          const hex4 = input2.slice(i2 + 1, i2 + 3);
+          if (isHexPair(hex4)) {
+            output2 += "%" + hex4.toUpperCase();
             i2 += 2;
             continue;
           }
@@ -7744,8 +7744,8 @@ function unzipSync(data2, opts) {
 
 // ../engine/src/color.ts
 var clamp = (n, lo = 0, hi = 255) => Math.min(hi, Math.max(lo, n));
-function parseHex(hex3) {
-  let h = hex3.replace(/^#/, "").toLowerCase();
+function parseHex(hex4) {
+  let h = hex4.replace(/^#/, "").toLowerCase();
   if (!/^[0-9a-f]+$/.test(h)) return null;
   if (h.length === 3 || h.length === 4) h = h.split("").map((c) => c + c).join("");
   if (h.length !== 6 && h.length !== 8) return null;
@@ -7768,10 +7768,10 @@ function parseColor(input2) {
   if (!m) return null;
   const parts = m[2].split(/[\s,/]+/).filter(Boolean);
   if (parts.length < 3) return null;
-  const num = (p, max2) => p.endsWith("%") ? parseFloat(p) / 100 * max2 : parseFloat(p);
-  const alpha = parts[3] !== void 0 ? num(parts[3], 1) : 1;
+  const num2 = (p, max2) => p.endsWith("%") ? parseFloat(p) / 100 * max2 : parseFloat(p);
+  const alpha = parts[3] !== void 0 ? num2(parts[3], 1) : 1;
   if (m[1].startsWith("rgb")) {
-    const [r2, g2, b3] = parts.slice(0, 3).map((p) => num(p, 255));
+    const [r2, g2, b3] = parts.slice(0, 3).map((p) => num2(p, 255));
     if ([r2, g2, b3].some((v) => Number.isNaN(v))) return null;
     return { r: clamp(r2), g: clamp(g2), b: clamp(b3), a: alpha };
   }
@@ -7849,7 +7849,7 @@ function colorValue(v) {
   if (v && typeof v === "object" && ("components" in v || "hex" in v)) {
     const c = v;
     const alpha = typeof c.alpha === "number" ? c.alpha : 1;
-    const withAlpha = (hex4) => alpha < 1 ? `${hex4.slice(0, 7)}${Math.round(alpha * 255).toString(16).padStart(2, "0")}` : hex4.slice(0, 7);
+    const withAlpha = (hex5) => alpha < 1 ? `${hex5.slice(0, 7)}${Math.round(alpha * 255).toString(16).padStart(2, "0")}` : hex5.slice(0, 7);
     if (typeof c.hex === "string" && /^#[0-9a-f]{6}/i.test(c.hex)) return withAlpha(c.hex.toLowerCase());
     const comps = c.components?.map((x2) => typeof x2 === "number" ? x2 : 0);
     if (comps?.length === 3 && (!c.colorSpace || /srgb|display-p3/i.test(c.colorSpace))) {
@@ -7859,9 +7859,9 @@ function colorValue(v) {
   }
   if (v && typeof v === "object" && "r" in v) {
     const c = v;
-    const hex4 = toHex({ r: c.r * 255, g: c.g * 255, b: c.b * 255, a: 1 });
+    const hex5 = toHex({ r: c.r * 255, g: c.g * 255, b: c.b * 255, a: 1 });
     const a = c.a ?? 1;
-    return a < 1 ? `${hex4}${Math.round(a * 255).toString(16).padStart(2, "0")}` : hex4;
+    return a < 1 ? `${hex5}${Math.round(a * 255).toString(16).padStart(2, "0")}` : hex5;
   }
   if (typeof v !== "string") return null;
   const s = v.trim();
@@ -7871,8 +7871,8 @@ function colorValue(v) {
   }
   const rgb = parseColor(s);
   if (!rgb) return null;
-  const hex3 = toHex(rgb);
-  return rgb.a < 1 ? `${hex3}${Math.round(rgb.a * 255).toString(16).padStart(2, "0")}` : hex3;
+  const hex4 = toHex(rgb);
+  return rgb.a < 1 ? `${hex4}${Math.round(rgb.a * 255).toString(16).padStart(2, "0")}` : hex4;
 }
 var dim = (v) => {
   if (v && typeof v === "object" && "value" in v) {
@@ -8196,19 +8196,19 @@ function fromModeObject(obj, opts = {}) {
     plainLeaves(v, [], l);
     return { name, leaves: l, keys: new Set(l.map((x2) => x2.key.join("/"))) };
   });
-  const groups = [];
+  const groups2 = [];
   for (const m of leafSets) {
-    const g = groups.find((grp) => {
+    const g = groups2.find((grp) => {
       const a = grp[0].keys;
       let same = 0;
       for (const k of m.keys) if (a.has(k)) same++;
       return same / Math.max(a.size, m.keys.size) >= 0.8;
     });
     if (g) g.push(m);
-    else groups.push([m]);
+    else groups2.push([m]);
   }
   const byLeaf = /* @__PURE__ */ new Map();
-  groups.forEach((grp, gi) => {
+  groups2.forEach((grp, gi) => {
     for (const m of grp) for (const l of m.leaves) {
       const k = l.key[l.key.length - 1];
       const e = byLeaf.get(k) ?? { group: gi, values: /* @__PURE__ */ new Map() };
@@ -8224,13 +8224,13 @@ function fromModeObject(obj, opts = {}) {
     const ref = byLeaf.get(v) ?? byLeaf.get(v.replace(REF, "$1"));
     if (!ref) return v;
     referenced.add(v);
-    const grp = groups[ref.group];
+    const grp = groups2[ref.group];
     const mode = pick2(grp, want) ?? pick2(grp, "default");
     return deref(ref.values.get(mode.name) ?? [...ref.values.values()][0], want, depth + 1);
   };
   const out = [];
   const pending = [];
-  for (const grp of groups) {
+  for (const grp of groups2) {
     const def = pick2(grp, "default");
     const dark = pick2(grp, "dark");
     if (grp.length > 1) notes.push(`${grp.map((m) => m.name).join(" / ")} look like modes of one collection; used \u201C${def.name}\u201D${dark && dark !== def ? ` (and \u201C${dark.name}\u201D as dark)` : ""}.`);
@@ -8541,10 +8541,10 @@ function resolveConfig(config2) {
     if (!l.type && !l.path.startsWith("color")) continue;
     const rgb = parseColor(l.value);
     if (!rgb) continue;
-    const cssVar3 = `--${l.path.replace(/\./g, "-")}`;
-    colors.push({ path: l.path, cssVar: cssVar3, hex: toHex(rgb), lab: rgbToLab(rgb), alpha: rgb.a });
+    const cssVar4 = `--${l.path.replace(/\./g, "-")}`;
+    colors.push({ path: l.path, cssVar: cssVar4, hex: toHex(rgb), lab: rgbToLab(rgb), alpha: rgb.a });
     const dark = typeof l.dark === "string" ? parseColor(l.dark) : null;
-    if (dark) colors.push({ path: l.path, cssVar: cssVar3, hex: toHex(dark), lab: rgbToLab(dark), alpha: dark.a, mode: "dark" });
+    if (dark) colors.push({ path: l.path, cssVar: cssVar4, hex: toHex(dark), lab: rgbToLab(dark), alpha: dark.a, mode: "dark" });
   }
   const spaceLeaves = all.filter((l) => /^(space|spacing)\./.test(l.path));
   const spacing = [0, 1, 2];
@@ -8592,15 +8592,17 @@ function resolveConfig(config2) {
 }
 
 // ../engine/src/frameworks.ts
-var FRAMEWORKS = ["react", "angular", "vue", "web-components", "html"];
+var FRAMEWORKS = ["react", "angular", "vue", "svelte", "solid", "web-components", "html"];
 var FRAMEWORK_LABEL = {
   react: "React",
   angular: "Angular",
   vue: "Vue",
+  svelte: "Svelte",
+  solid: "Solid",
   "web-components": "Web Components",
   html: "Plain HTML"
 };
-var LANG = { react: "tsx", angular: "html", vue: "vue", "web-components": "html", html: "html" };
+var LANG = { react: "tsx", angular: "html", vue: "vue", svelte: "svelte", solid: "tsx", "web-components": "html", html: "html" };
 var isFramework = (x2) => typeof x2 === "string" && FRAMEWORKS.includes(x2);
 var kebab = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/\./g, "-").toLowerCase();
 var prefixOf = (tag) => tag.includes("-") ? `${tag.split("-")[0]}-` : tag;
@@ -8611,6 +8613,10 @@ function webComponentSetup(target, u, tag) {
       return `Web component: add \`CUSTOM_ELEMENTS_SCHEMA\` to the \`schemas\` of every NgModule or standalone component whose template uses it (with module federation, each remote's modules too). ${load} Importing it again in another bundle is harmless.`.trim();
     case "vue":
       return `Web component: set \`compilerOptions.isCustomElement = (tag) => tag.startsWith("${prefixOf(tag)}")\` in the Vue config. ${load}`.trim();
+    case "svelte":
+      return `Web component: ${load || "load it once at the app entry."} In SvelteKit, import it in the root +layout.svelte inside onMount (custom elements need the browser). Svelte sets properties on custom elements, so lists and objects pass directly.`.trim();
+    case "solid":
+      return `Web component: ${load || "load it once at the app entry."} For TypeScript, add the ${prefixOf(tag)}* tags to JSX.IntrinsicElements once (declare module "solid-js" { namespace JSX { interface IntrinsicElements { \u2026 } } }); page templates include the file.`.trim();
     case "html":
       return u.importPath ? `Web component: load \`${u.importPath}\` once (a bundler import or \`<script type="module">\`).` : void 0;
     default:
@@ -8651,8 +8657,10 @@ function fromUsage(c, framework, kind, u) {
       }
       break;
     case "vue":
+    case "svelte":
+    case "solid":
       tag ||= u.importName || c.name;
-      if (path) importLine = `import { ${u.importName || tag} } from "${path}";`;
+      if (path) importLine = kind === "svelte" && !u.importName ? `import ${tag} from "${path}";` : `import { ${u.importName || tag} } from "${path}";`;
       break;
     case "web-components":
       tag ||= kebab(c.name);
@@ -8698,6 +8706,18 @@ function bindingHowTo(u) {
       return [
         ce ? `Props: \`:prop="expr"\`. Events: \`@${ev.name}\` with the value in \`$event.detail\`.${caseNote} Example: \`${open2(`${valueProp ? ` :${valueProp}="model"` : ""} @${ev.name}="model = $event.detail"`)}\`` : `Events: \`@${ev.name}="handler"\`.`
       ];
+    case "svelte":
+      if (!ce) return [`Events: \`on${ev.name}={handler}\` (Svelte 5) or \`on:${ev.name}\` (Svelte 4).`];
+      return [
+        `Props: \`prop={expr}\` (Svelte sets the element's property, so lists and objects work). Events: \`on${ev.name}={(e) => \u2026}\` with the value in \`e.detail\` (Svelte 5; \`on:${ev.name}\` in Svelte 4).`,
+        `Example: \`${open2(`${valueProp ? ` ${valueProp}={value}` : ""} on${ev.name}={(e) => (value = e.detail)}`)}\``
+      ];
+    case "solid":
+      if (!ce) return [`Events: \`on${pascal(ev.name)}={handler}\`.`];
+      return [
+        `Props: static strings as attributes; lists, objects and signals with \`prop:name={value()}\` (Solid sets attributes otherwise). Events: \`on:${ev.name}={(e) => \u2026}\` with the value in \`e.detail\`.`,
+        `Example: \`${open2(`${valueProp ? ` prop:${valueProp}={value()}` : ""} on:${ev.name}={(e) => setValue(e.detail)}`)}\``
+      ];
     case "react":
       return [];
     default:
@@ -8715,8 +8735,10 @@ function detectFramework(pkg) {
   const has = (name) => name in deps;
   if (has("@angular/core")) return "angular";
   if (has("vue") || has("nuxt")) return "vue";
+  if (has("solid-js") || has("@solidjs/start")) return "solid";
+  if (has("svelte") || has("@sveltejs/kit")) return "svelte";
   if (has("react") || has("next") || has("preact")) return "react";
-  if (has("svelte") || has("lit") || has("@stencil/core") || has("@sveltejs/kit")) return "web-components";
+  if (has("lit") || has("@stencil/core")) return "web-components";
   return "html";
 }
 
@@ -9502,6 +9524,13 @@ function parseHtmlAttributes(code, start) {
     const c = code[i2];
     if (c === void 0) return null;
     if (c === ">" || c === "/" && code[i2 + 1] === ">") return { attrs, end: i2 };
+    if (c === "{" && code[i2 + 1] !== "{" && code[i2 + 1] !== "%") {
+      const end = skipBalanced(code, i2);
+      const inner = code.slice(i2 + 1, end - 1).trim();
+      if (/^[A-Za-z_$][\w$]*$/.test(inner)) attrs.push({ name: inner, offset: i2 });
+      i2 = end;
+      continue;
+    }
     if (c === "{" || c === "<" && code[i2 + 1] === "?") {
       const close = c === "{" ? code[i2 + 1] === "%" ? "%}" : "}}" : "?>";
       const e = code.indexOf(close, i2 + 2);
@@ -9517,7 +9546,8 @@ function parseHtmlAttributes(code, start) {
       i2++;
       while (/\s/.test(code[i2] ?? "")) i2++;
       const q = code[i2];
-      if (q === '"' || q === "'") {
+      if (q === "{") i2 = skipBalanced(code, i2);
+      else if (q === '"' || q === "'") {
         const e = code.indexOf(q, i2 + 1);
         i2 = e === -1 ? code.length : e + 1;
       } else while (i2 < code.length && !/[\s>]/.test(code[i2])) i2++;
@@ -9526,9 +9556,12 @@ function parseHtmlAttributes(code, start) {
   return null;
 }
 var HTML_GLOBAL = /^(?:id|class|style|title|role|hidden|tabindex|lang|dir|slot|part|is|key|ref|name|for|form|aria-.+|data-.+)$/;
-function propName(raw) {
+function propName(raw, framework) {
   let n = raw;
   if (/^(?:\(|@|on-|v-on:|\*|#|let-|ref-|v-(?!bind:|model:))/.test(n)) return null;
+  if (/^(?:class|style|use|transition|in|out|animate|let|ref|on|oncapture|use):/.test(n)) return null;
+  n = n.replace(/^(?:bind|prop|attr|bool):/, "");
+  if (framework === "svelte" && /^on[a-z]/.test(n)) return null;
   n = n.replace(/^v-bind:|^v-model:|^bind-|^:/, "").replace(/^\[\(?|\)?\]$/g, "");
   if (/^(?:attr|class|style)\./.test(n) || /^ng[A-Z]/.test(n) || /^(?:formControl|formControlName|formGroup|routerLink|routerLinkActive)$/.test(n)) return null;
   n = n.replace(/\.(?:px|rem|em|%)$/, "").replace(/\..*$/, "");
@@ -9537,10 +9570,14 @@ function propName(raw) {
 }
 var sameName = (a, b) => a.replace(/-/g, "").toLowerCase() === b.replace(/-/g, "").toLowerCase();
 var NATIVE_EVENT = /^(?:click|dblclick|auxclick|contextmenu|focus|blur|focusin|focusout|key(?:down|up|press)|mouse\w+|pointer\w+|touch\w+|wheel|drag\w*|drop|scroll|animation\w+|transition\w+)$/;
-function eventName(raw) {
-  const m = /^\(([^)]+)\)$|^on-(.+)$|^@([^.]+)|^v-on:([^.]+)/.exec(raw);
-  return m ? (m[1] ?? m[2] ?? m[3] ?? m[4]).replace(/\..*$/, "") : null;
+function eventName(raw, framework) {
+  const m = /^\(([^)]+)\)$|^on-(.+)$|^@([^.]+)|^v-on:([^.]+)|^on(?:capture)?:([^|]+)/.exec(raw);
+  if (m) return (m[1] ?? m[2] ?? m[3] ?? m[4] ?? m[5]).replace(/\..*$/, "");
+  if (framework === "svelte" && /^on[a-z][\w-]*$/.test(raw)) return raw.slice(2);
+  return null;
 }
+var listen = (framework, ev) => framework === "angular" ? `(${ev})` : framework === "vue" ? `@${ev}` : framework === "svelte" ? `on${ev}={\u2026}` : framework === "solid" ? `on:${ev}={\u2026}` : `"${ev}"`;
+var detailOf = (framework) => framework === "angular" ? "$any($event).detail" : framework === "vue" ? "$event.detail" : framework === "svelte" || framework === "solid" ? "e.detail" : "event.detail";
 function templateProps({ code, config: config2, framework }) {
   const tagged = [];
   for (const comp of config2.components) {
@@ -9563,23 +9600,23 @@ function templateProps({ code, config: config2, framework }) {
     const passed = [];
     for (const a of parsed.attrs) {
       const raw = a.name;
-      const ev = eventName(raw);
+      const ev = eventName(raw, framework);
       if (ev) {
         if (!t.events?.length || NATIVE_EVENT.test(ev) || t.events.some((e) => e.name === ev)) continue;
         const like = t.events.find((e) => e.name.endsWith(`-${ev}`) || e.name.endsWith(ev)) ?? (t.events.length === 1 ? t.events[0] : void 0);
         out.push({
           offset: a.offset,
           message: `<${t.tag}> has no "${ev}" event`,
-          suggestion: `${like ? `Listen to ${framework === "angular" ? `(${like.name})` : framework === "vue" ? `@${like.name}` : `"${like.name}"`}${like.detail ? ` and read ${framework === "angular" ? "$any($event).detail" : framework === "vue" ? "$event.detail" : "event.detail"} (${like.detail})` : ""}. ` : ""}Events: ${t.events.map((e) => e.name).join(", ")}`
+          suggestion: `${like ? `Listen to ${listen(framework, like.name)}${like.detail ? ` and read ${detailOf(framework)} (${like.detail})` : ""}. ` : ""}Events: ${t.events.map((e) => e.name).join(", ")}`
         });
         continue;
       }
       if (/^v-model$/.test(raw)) passed.push("modelValue", "value");
       if (/^\[\(ngModel\)\]$/.test(raw)) passed.push("value");
-      const n = propName(raw);
+      const n = propName(raw, framework);
       if (!n || !t.props?.length) continue;
       passed.push(n);
-      if (t.ce && n.includes("-") && /^(?:\[(?!attr\.)|:|v-bind:|bind-)/.test(raw)) {
+      if (t.ce && n.includes("-") && (framework === "angular" || framework === "vue") && /^(?:\[(?!attr\.)|:|v-bind:|bind-)/.test(raw)) {
         const camel2 = n.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
         out.push({
           offset: a.offset,
@@ -9767,7 +9804,7 @@ function fileFramework(path, kind, code, project) {
     case "vue":
       return "vue";
     case "svelte":
-      return "web-components";
+      return "svelte";
     case "template":
       return "html";
     case "css":
@@ -9777,6 +9814,7 @@ function fileFramework(path, kind, code, project) {
       return project === "vue" || project === "web-components" ? project : "html";
     case "jsx":
       if (ANGULAR_COMPONENT.test(code)) return "angular";
+      if (project === "solid" && /\.(tsx|jsx)$/.test(p)) return "solid";
       if (/\.(tsx|jsx|mdx)$/.test(p)) return "react";
       return project ?? "react";
     default:
@@ -9884,7 +9922,7 @@ function makeIgnore(globs) {
 }
 
 // ../engine/src/check.ts
-var ENGINE_VERSION = "0.9.0";
+var ENGINE_VERSION = "0.10.0";
 var WEIGHT = { error: 4, warning: 1.5, info: 0.25 };
 function computeScore(counts, lines) {
   const penalty = counts.error * WEIGHT.error + counts.warning * WEIGHT.warning + counts.info * WEIGHT.info;
@@ -10281,7 +10319,7 @@ var RULE_FILES = [
 // ../engine/src/rendered.ts
 function collectRenderedNodes(maxNodes = 3e3) {
   const SKIP = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "IFRAME", "HEAD", "META", "LINK", "BR", "WBR", "SOURCE", "TRACK"]);
-  const px3 = (v) => {
+  const px4 = (v) => {
     const n = parseFloat(v);
     return Number.isFinite(n) ? Math.round(n * 100) / 100 : 0;
   };
@@ -10329,8 +10367,8 @@ function collectRenderedNodes(maxNodes = 3e3) {
     const r = el.getBoundingClientRect();
     if (r.width < 1 || r.height < 1) continue;
     const text2 = Array.from(el.childNodes).filter((n) => n.nodeType === 3).map((n) => n.textContent ?? "").join(" ").replace(/\s+/g, " ").trim();
-    const borderW = Math.max(px3(cs.borderTopWidth), px3(cs.borderRightWidth), px3(cs.borderBottomWidth), px3(cs.borderLeftWidth));
-    const borderSide = px3(cs.borderTopWidth) > 0 ? cs.borderTopColor : px3(cs.borderBottomWidth) > 0 ? cs.borderBottomColor : px3(cs.borderLeftWidth) > 0 ? cs.borderLeftColor : cs.borderRightColor;
+    const borderW = Math.max(px4(cs.borderTopWidth), px4(cs.borderRightWidth), px4(cs.borderBottomWidth), px4(cs.borderLeftWidth));
+    const borderSide = px4(cs.borderTopWidth) > 0 ? cs.borderTopColor : px4(cs.borderBottomWidth) > 0 ? cs.borderBottomColor : px4(cs.borderLeftWidth) > 0 ? cs.borderLeftColor : cs.borderRightColor;
     nodes.push({
       selector: selectorOf(el),
       tag: el.tagName.toLowerCase(),
@@ -10340,12 +10378,12 @@ function collectRenderedNodes(maxNodes = 3e3) {
       borderColor: borderW > 0 && cs.borderTopStyle !== "none" ? borderSide : void 0,
       effectiveBackground: effectiveBg(el),
       fontFamily: cs.fontFamily,
-      fontSize: px3(cs.fontSize),
+      fontSize: px4(cs.fontSize),
       fontWeight: parseInt(cs.fontWeight, 10) || 400,
-      radius: Math.max(px3(cs.borderTopLeftRadius), px3(cs.borderTopRightRadius), px3(cs.borderBottomLeftRadius), px3(cs.borderBottomRightRadius)),
+      radius: Math.max(px4(cs.borderTopLeftRadius), px4(cs.borderTopRightRadius), px4(cs.borderBottomLeftRadius), px4(cs.borderBottomRightRadius)),
       minSide: Math.round(Math.min(r.width, r.height)),
-      padding: [px3(cs.paddingTop), px3(cs.paddingRight), px3(cs.paddingBottom), px3(cs.paddingLeft)],
-      gap: cs.display.includes("flex") || cs.display.includes("grid") ? [px3(cs.rowGap), px3(cs.columnGap)] : []
+      padding: [px4(cs.paddingTop), px4(cs.paddingRight), px4(cs.paddingBottom), px4(cs.paddingLeft)],
+      gap: cs.display.includes("flex") || cs.display.includes("grid") ? [px4(cs.rowGap), px4(cs.columnGap)] : []
     });
   }
   const links = Array.from(document.querySelectorAll("a[href]")).map((a) => a.href).filter((h) => {
@@ -10378,8 +10416,8 @@ function closestToken(config2, rgb) {
   return { token: best, distance: bestD };
 }
 function colorLabel(rgb) {
-  const hex3 = toHex(rgb);
-  return rgb.a < 1 ? `${hex3} at ${Math.round(rgb.a * 100)}%` : hex3;
+  const hex4 = toHex(rgb);
+  return rgb.a < 1 ? `${hex4} at ${Math.round(rgb.a * 100)}%` : hex4;
 }
 function checkRendered(pages, configInput, opts = {}) {
   const t0 = Date.now();
@@ -10391,14 +10429,14 @@ function checkRendered(pages, configInput, opts = {}) {
   const spacing = config2.spacing;
   const radii = config2.radii.filter((r) => r < 999);
   for (const page of pages) {
-    const groups = /* @__PURE__ */ new Map();
+    const groups2 = /* @__PURE__ */ new Map();
     const add = (key, g, selector) => {
       const sev = config2.rules[g.ruleId];
       if (sev === "off") return;
-      const cur = groups.get(key) ?? { ...g, severity: sev ?? g.severity, selectors: [], count: 0 };
+      const cur = groups2.get(key) ?? { ...g, severity: sev ?? g.severity, selectors: [], count: 0 };
       cur.count++;
       if (cur.selectors.length < examples && !cur.selectors.includes(selector)) cur.selectors.push(selector);
-      groups.set(key, cur);
+      groups2.set(key, cur);
     };
     const colorCheck = (raw, where, selector) => {
       if (!raw || !config2.colors.length) return;
@@ -10502,7 +10540,7 @@ function checkRendered(pages, configInput, opts = {}) {
         suggestion: "Open it in a browser: it may have crashed, need a login (use --storage-state), or need longer to load (--wait)."
       });
     }
-    for (const g of groups.values()) {
+    for (const g of groups2.values()) {
       violations.push({
         ruleId: g.ruleId,
         severity: g.severity,
@@ -10550,10 +10588,10 @@ function pagePath(url2) {
 var cssVar = (path) => `--${path.replace(/\./g, "-")}`;
 function generateTokensCss(tokens, opts = {}) {
   const flat = flattenTokens(tokens);
-  const head = `/* Generated by Brandrail from the ${opts.org ? `${opts.org} ` : ""}Brand Kit${opts.version ? ` v${opts.version}` : ""}. Do not edit: run \`npx brandrail init --from-api\` to update. */`;
+  const head2 = `/* Generated by Brandrail from the ${opts.org ? `${opts.org} ` : ""}Brand Kit${opts.version ? ` v${opts.version}` : ""}. Do not edit: run \`npx brandrail init --from-api\` to update. */`;
   const light = flat.map((t) => `  ${cssVar(t.path)}: ${t.type === "fontFamily" ? t.value : t.value};`);
   const dark = flat.filter((t) => t.dark).map((t) => `  ${cssVar(t.path)}: ${t.dark};`);
-  const out = [head, "", ":root {", ...light, "}"];
+  const out = [head2, "", ":root {", ...light, "}"];
   if (dark.length) {
     out.push("", '[data-theme="dark"] {', ...dark, "}", "", "@media (prefers-color-scheme: dark) {", '  :root:not([data-theme="light"]) {', ...dark.map((l) => `  ${l}`), "  }", "}");
   }
@@ -10619,8 +10657,8 @@ var px2 = (v) => {
   return m ? Number.parseFloat(m[1]) * (m[2] === "rem" ? 16 : 1) : null;
 };
 var nearest2 = (values, v) => values.reduce((best, x2) => Math.abs(x2 - v) < Math.abs(best - v) ? x2 : best, values[0]);
-function luminance(hex3) {
-  const n = hex3.replace("#", "").slice(0, 6);
+function luminance(hex4) {
+  const n = hex4.replace("#", "").slice(0, 6);
   const [r, g, b] = [0, 2, 4].map((i2) => parseInt(n.slice(i2, i2 + 2), 16) / 255).map((c) => c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 }
@@ -11519,11 +11557,12 @@ var jsonAttr = (v) => JSON.stringify(v).replace(/'/g, "&#39;");
 var ind = (d) => "  ".repeat(d);
 function missing(part, d, ctx) {
   const msg = `${pascal2(part.node.part)}: no ${part.node.component} in your registry for ${FRAMEWORK_LABEL[ctx.fw]}. Ask find_component for "${part.node.purpose.toLowerCase()}", or build it with semantic HTML and the design tokens.`;
-  return ctx.fw === "react" ? `${ind(d)}{/* ${msg} */}` : `${ind(d)}<!-- ${msg} -->`;
+  return ctx.fw === "react" || ctx.fw === "solid" ? `${ind(d)}{/* ${msg} */}` : `${ind(d)}<!-- ${msg} -->`;
 }
 function actStatement(a, ctx, value) {
-  if ("store" in a) return ctx.fw === "react" ? `${setter(a.store)}(${value})` : `${ctx.fw === "angular" ? "this." : ""}${a.store} = ${value}`;
-  const assign = ctx.fw === "react" ? `${setter(a.set)}(${a.to})` : ctx.fw === "vue" ? `${a.set}.value = ${a.to}` : `this.${a.set} = ${a.to}`;
+  const signals = ctx.fw === "react" || ctx.fw === "solid";
+  if ("store" in a) return signals ? `${setter(a.store)}(${value})` : `${ctx.fw === "angular" ? "this." : ""}${a.store} = ${value}`;
+  const assign = signals ? `${setter(a.set)}(${a.to})` : ctx.fw === "vue" ? `${a.set}.value = ${a.to}` : ctx.fw === "svelte" ? `${a.set} = ${a.to}` : `this.${a.set} = ${a.to}`;
   return a.when ? `if (${value} === ${JSON.stringify(a.when)}) ${assign};` : `${assign};`;
 }
 function renderNode(n, d, ctx) {
@@ -11582,6 +11621,8 @@ function renderMarkup(part, d, ctx) {
   const needsId = fw === "html" || fw === "web-components";
   const hasEvents = Object.keys(node2.on ?? {}).length > 0;
   if (needsId && (hasEvents || isBoundTarget(node2, ctx))) attrs.push(`id="${id}"`);
+  const custom2 = Boolean(usage.customElement || usage.via === "web-components");
+  if (fw === "svelte" || fw === "solid") return renderSignals(part, d, ctx, custom2);
   for (const [prop, name, value] of acceptedProps(part, fw)) {
     if (node2.bind?.[prop]) continue;
     if (isData(value)) {
@@ -11602,7 +11643,6 @@ function renderMarkup(part, d, ctx) {
   }
   for (const [prop, a] of Object.entries(node2.on ?? {})) {
     const ev = eventFor(part, prop);
-    const custom2 = usage.customElement || usage.via === "web-components";
     const detail = fw === "angular" ? custom2 ? "$any($event).detail" : "$event" : custom2 ? "$event.detail" : "$event";
     if (fw === "angular" || fw === "vue") {
       if ("store" in a) attrs.push(`${fw === "angular" ? `(${ev})` : `@${ev}`}="${a.store} = ${detail}"`);
@@ -11626,6 +11666,35 @@ function renderMarkup(part, d, ctx) {
   if (!node2.children?.length) return `${open2}</${usage.tag}>`;
   return [open2, ...node2.children.map((c) => renderNode(c, d + 1, ctx)), `${ind(d)}</${usage.tag}>`].join("\n");
 }
+function renderSignals(part, d, ctx, custom2) {
+  const { node: node2, usage } = part;
+  const solid = ctx.fw === "solid";
+  const attrs = [];
+  const bindName = (prop, name) => custom2 ? solid ? `prop:${camel(prop)}` : camel(prop) : name;
+  for (const [prop, name, value] of acceptedProps(part, ctx.fw)) {
+    if (node2.bind?.[prop]) continue;
+    if (isData(value)) attrs.push(`${bindName(prop, name)}={${value.$data}}`);
+    else if (typeof value === "string") attrs.push(`${name}="${attrEsc(value)}"`);
+    else if (value === true && !solid) attrs.push(name);
+    else attrs.push(`${custom2 && !solid ? name : bindName(prop, name)}={${JSON.stringify(value)}}`);
+  }
+  for (const [prop, v] of Object.entries(node2.bind ?? {})) attrs.push(`${bindName(prop, prop)}={${v}${solid ? "()" : ""}}`);
+  for (const [prop, a] of Object.entries(node2.on ?? {})) {
+    const ev = eventFor(part, prop);
+    const on = custom2 ? solid ? `on:${ev}` : `on${ev}` : prop;
+    const arg = custom2 ? "e: CustomEvent" : "value: string";
+    const val = custom2 ? "e.detail" : "value";
+    if ("store" in a) attrs.push(`${on}={(${arg}) => ${solid ? `${setter(a.store)}(${val})` : `(${a.store} = ${val})`}}`);
+    else if (a.when) {
+      const name = `on${pascal2(node2.part)}${pascal2(prop.replace(/^on/, ""))}`;
+      ctx.handlers.push({ name, param: true, body: [actStatement(a, ctx, "value")] });
+      attrs.push(`${on}={(${arg}) => ${name}(${val})}`);
+    } else attrs.push(`${on}={() => ${solid ? `${setter(a.set)}(${a.to})` : `(${a.set} = ${a.to})`}}`);
+  }
+  const open2 = `${ind(d)}<${usage.tag}${attrs.length ? ` ${attrs.join(" ")}` : ""}`;
+  if (!node2.children?.length) return custom2 || !solid ? `${open2}></${usage.tag}>` : `${open2} />`;
+  return [`${open2}>`, ...node2.children.map((c) => renderNode(c, d + 1, ctx)), `${ind(d)}</${usage.tag}>`].join("\n");
+}
 function boundTargets(stateVar, ctx) {
   const out = [];
   walk(ctx.tpl.tree, (n) => {
@@ -11663,7 +11732,14 @@ function renderTemplate(config2, template, framework) {
   if (fw === "react" && [...parts.values()].some((p) => p.usage && p.component?.importPath === KIT2)) {
     setup.add(`Import \`${KIT2}/styles.css\` and \`brandrail.tokens.css\` once at the app entry.`);
   } else setup.add("Import `brandrail.tokens.css` (from `npx brandrail init`) once at the app entry, so the layout and components get the Brand Kit's variables.");
-  const body = renderNode(template.tree, fw === "react" ? 2 : fw === "vue" ? 1 : 0, ctx);
+  const body = renderNode(template.tree, fw === "react" || fw === "solid" ? 2 : fw === "vue" ? 1 : 0, ctx);
+  const isCe = (p) => Boolean(p.usage && (p.usage.via === "web-components" || p.usage.customElement));
+  const cePackages = [
+    ...new Set(
+      [...parts.values()].filter(isCe).map((p) => p.component?.frameworks?.["web-components"]?.importPath ?? p.component?.frameworks?.html?.importPath).filter((x2) => !!x2 && !/\.css(\?|$)/.test(x2))
+    )
+  ];
+  const ownImports = [...new Set([...parts.values()].filter((p) => p.usage && !isCe(p) && p.usage.importLine).map((p) => p.usage.importLine))];
   const usedData = Object.keys(template.data).filter((k) => JSON.stringify(template.tree).includes(`"$data":"${k}"`));
   const dataDecl = (decl, kw, pad = "", key = decl) => `${kw} ${decl} = ${literal(template.data[key], pad)};`;
   const files = [];
@@ -11736,6 +11812,72 @@ function renderTemplate(config2, template, framework) {
       { path: `${base}-page.component.html`, lang: "html", content: body + "\n" },
       { path: `${base}-page.component.css`, lang: "css", content: css + "\n" }
     );
+  } else if (fw === "svelte") {
+    const state = Object.entries(template.state);
+    const script = [
+      `<script lang="ts">`,
+      ...cePackages.length ? [`import { onMount } from "svelte";`] : [],
+      ...ownImports,
+      `import "./${base}-page.css";`,
+      "",
+      ...cePackages.length ? ["// Custom elements need the browser: load them once the page is mounted (fine with SvelteKit's server rendering).", `onMount(() => {
+${cePackages.map((u) => `  import("${u}");`).join("\n")}
+});`, ""] : [],
+      ...state.map(([k, v]) => `let ${k} = $state(${JSON.stringify(v)});`),
+      ...usedData.map((k) => dataDecl(k, "const")),
+      ...ctx.handlers.map((h) => `
+function ${h.name}(value: string) {
+  ${h.body.join("\n  ")}
+}`),
+      `</script>`
+    ].join("\n");
+    files.push({ path: `${pascal2(base)}Page.svelte`, lang: "svelte", content: `${script}
+
+${body}
+` }, { path: `${base}-page.css`, lang: "css", content: css + "\n" });
+  } else if (fw === "solid") {
+    const state = Object.entries(template.state);
+    const solidImports = [...state.length ? ["createSignal"] : [], ...cePackages.length ? ["onMount"] : []];
+    const code = [
+      ...solidImports.length ? [`import { ${solidImports.join(", ")} } from "solid-js";`] : [],
+      ...ownImports,
+      `import "./${base}-page.css";`,
+      "",
+      ...usedData.flatMap((k) => [dataDecl(k, "const"), ""]),
+      `export default function ${Name}() {`,
+      ...state.map(([k, v]) => `  const [${k}, ${setter(k)}] = createSignal(${JSON.stringify(v)});`),
+      ...ctx.handlers.map((h) => `  const ${h.name} = (value: string) => {
+    ${h.body.join("\n    ")}
+  };`),
+      ...cePackages.length ? ["  // Custom elements need the browser: load them once the page is in the DOM (fine with SolidStart's server rendering).", ...cePackages.map((u) => `  onMount(() => void import("${u}"));`)] : [],
+      "",
+      "  return (",
+      body,
+      "  );",
+      "}",
+      ""
+    ].join("\n");
+    files.push({ path: `${pascal2(base)}Page.tsx`, lang: "tsx", content: code }, { path: `${base}-page.css`, lang: "css", content: css + "\n" });
+    const prefixes = [...new Set([...parts.values()].filter(isCe).map((p) => p.usage.tag.includes("-") ? `${p.usage.tag.split("-")[0]}-` : p.usage.tag))];
+    if (prefixes.length) {
+      files.push({
+        path: "brandrail-elements.d.ts",
+        lang: "ts",
+        content: [
+          "// Lets TypeScript accept the design system's custom elements in Solid TSX. Keep one copy in the app.",
+          'import "solid-js";',
+          "",
+          'declare module "solid-js" {',
+          "  namespace JSX {",
+          "    interface IntrinsicElements {",
+          ...prefixes.map((p) => `      [tag: \`${p}\${string}\`]: any;`),
+          "    }",
+          "  }",
+          "}",
+          ""
+        ].join("\n")
+      });
+    }
   } else if (fw === "vue") {
     const state = Object.entries(template.state);
     const script = [
@@ -11829,6 +11971,433 @@ function templateList() {
   return PAGE_TEMPLATES.map((t) => `- \`${t.id}\` \u2014 ${t.name}: ${t.description}`).join("\n");
 }
 
+// ../engine/src/platforms.ts
+var EXPORT_FORMATS = [
+  { id: "css", label: "CSS variables", platform: "web", description: "One variable per token, dark mode included" },
+  { id: "tailwind", label: "Tailwind v4", platform: "web", description: "@theme mapping onto the CSS variables" },
+  { id: "json", label: "DTCG JSON", platform: "web", description: "The W3C design tokens file" },
+  { id: "ios", label: "iOS (SwiftUI)", platform: "mobile", description: "Color, spacing, radius and Font extensions; dark mode follows the system" },
+  { id: "compose", label: "Android (Compose)", platform: "mobile", description: "Kotlin: colour schemes for light and dark, dp and sp scales, TextStyles" },
+  { id: "android-xml", label: "Android (XML)", platform: "mobile", description: "colors.xml with a values-night copy, and dimens.xml" },
+  { id: "react-native", label: "React Native", platform: "mobile", description: "A typed module with light and dark colours and a useBrandColors hook" },
+  { id: "flutter", label: "Flutter", platform: "mobile", description: "A ThemeExtension for colours, plus spacing, radius and TextStyles" }
+];
+var hexToRgba = (hex4) => {
+  const m = /^#([0-9a-f]{6})([0-9a-f]{2})?$/i.exec(hex4.trim());
+  if (!m) return null;
+  const n = Number.parseInt(m[1], 16);
+  return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255, a: m[2] ? Number.parseInt(m[2], 16) / 255 : 1 };
+};
+var px3 = (v) => {
+  const m = /^(-?\d*\.?\d+)(px|rem|em)?$/.exec(v.trim());
+  if (!m) return null;
+  const n = Number(m[1]);
+  return m[2] === "rem" || m[2] === "em" ? n * 16 : n;
+};
+function tokenIdentifier(segments, prefix) {
+  const words = [...prefix ? [prefix] : [], ...segments].flatMap((s) => s.split(/[^A-Za-z0-9]+/)).filter(Boolean);
+  const id = words.map((w, i2) => i2 === 0 ? w.charAt(0).toLowerCase() + w.slice(1) : w.charAt(0).toUpperCase() + w.slice(1)).join("");
+  return /^[0-9]/.test(id) ? `t${id}` : id || "token";
+}
+var GENERIC = /^(-apple-system|blinkmacsystemfont|system-ui|ui-sans-serif|ui-serif|ui-monospace|sfmono-regular|segoe ui|roboto|helvetica|helvetica neue|arial|noto sans|sans-serif|serif|monospace|menlo|consolas)$/i;
+function bundledFamily(stack) {
+  for (const raw of stack.split(",")) {
+    const f = raw.trim().replace(/^["']|["']$/g, "");
+    if (f && !GENERIC.test(f)) return f;
+  }
+  return null;
+}
+var RESERVED = new Set(
+  "as break case catch class const continue default do else enum extends extension false final for fun func if import in interface is let new null object operator package private protocol public return static struct super switch this throw true try type typealias val var void when where while with yield".split(" ")
+);
+function groups(tokens) {
+  const flat = flattenTokens(tokens);
+  const deprecated = new Map(tokenDeprecations(tokens).map((d) => [d.path, d]));
+  const g = { colors: [], spacing: [], radius: [], type: [], fonts: [], other: [] };
+  const sizes = /* @__PURE__ */ new Map();
+  const lines = /* @__PURE__ */ new Map();
+  const weights = /* @__PURE__ */ new Map();
+  const used = /* @__PURE__ */ new Set();
+  const unique = (raw) => {
+    const id = RESERVED.has(raw) ? `${raw}Token` : raw;
+    let out = id;
+    for (let i2 = 2; used.has(out); i2++) out = `${id}${i2}`;
+    used.add(out);
+    return out;
+  };
+  for (const t of flat) {
+    const seg = t.path.split(".");
+    if (t.type === "color") {
+      const light = hexToRgba(t.value);
+      if (!light) continue;
+      const d = deprecated.get(t.path);
+      g.colors.push({
+        name: unique(tokenIdentifier(seg[0] === "color" ? seg.slice(1) : seg)),
+        path: t.path,
+        light,
+        dark: t.dark && hexToRgba(t.dark) || light,
+        description: t.description?.replace(/\s+/g, " ").trim() || void 0,
+        deprecated: d ? `Deprecated${d.replacement ? `: use ${d.replacement}` : ""}${d.removeAfter ? ` (removed after ${d.removeAfter})` : ""}${d.reason ? `. ${d.reason.replace(/\s+/g, " ")}` : ""}` : void 0
+      });
+    } else if (t.path.startsWith("font.size.")) {
+      const v = px3(t.value);
+      if (v !== null) sizes.set(seg.slice(2).join("."), v);
+    } else if (t.path.startsWith("font.line-height.")) {
+      const v = px3(t.value);
+      if (v !== null) lines.set(seg.slice(2).join("."), v);
+    } else if (t.path.startsWith("font.weight.") || t.type === "fontWeight") {
+      const v = Number.parseInt(t.value, 10);
+      if (Number.isFinite(v)) weights.set(seg.slice(2).join("."), v);
+    } else if (t.type === "fontFamily" || t.path.startsWith("font.family.")) {
+      g.fonts.push({ name: unique(tokenIdentifier(seg.slice(2).length ? seg.slice(2) : seg)), path: t.path, family: bundledFamily(t.value), stack: t.value });
+    } else if (/^(space|spacing)\./.test(t.path)) {
+      const v = px3(t.value);
+      if (v !== null && !/\.unit$/.test(t.path)) g.spacing.push({ name: unique(tokenIdentifier(seg.slice(1), "space")), path: t.path, px: v });
+    } else if (/^(radius|radii)\./.test(t.path)) {
+      const v = px3(t.value);
+      if (v !== null) g.radius.push({ name: unique(tokenIdentifier(seg.slice(1), "radius")), path: t.path, px: Math.min(v, 9999) });
+    } else if (t.type === "dimension" || t.type === "number") {
+      const v = px3(t.value);
+      if (v !== null) g.other.push({ name: unique(tokenIdentifier(seg)), path: t.path, px: v });
+    }
+  }
+  for (const [step, size] of sizes) {
+    g.type.push({ name: unique(tokenIdentifier(step.split("."), "text")), size, lineHeight: lines.get(step), weight: weights.get(step) ?? 400 });
+  }
+  g.type.sort((a, b) => a.size - b.size);
+  return g;
+}
+var num = (n, places = 2) => Number.isInteger(n) ? String(n) : String(Math.round(n * 10 ** places) / 10 ** places);
+var hex2 = (n) => Math.round(n).toString(16).padStart(2, "0").toUpperCase();
+var argb = (c) => `0x${hex2(c.a * 255)}${hex2(c.r)}${hex2(c.g)}${hex2(c.b)}`;
+var rgbHex = (c) => `#${hex2(c.r)}${hex2(c.g)}${hex2(c.b)}${c.a < 1 ? hex2(c.a * 255) : ""}`.toLowerCase();
+var head = (comment, opts) => `${comment} Generated by Brandrail from the ${opts.org ? `${opts.org} ` : ""}Brand Kit${opts.version ? ` v${opts.version}` : ""}. Do not edit: run \`npx brandrail export\` to update.`;
+function swift(g, o) {
+  const ui = (c) => `rgb(0x${hex2(c.r)}${hex2(c.g)}${hex2(c.b)}${c.a < 1 ? `, ${num(c.a, 3)}` : ""})`;
+  const font = g.fonts[0];
+  const lines = [
+    head("//", o),
+    "import SwiftUI",
+    "#if canImport(UIKit)",
+    "import UIKit",
+    "",
+    "private func rgb(_ hex: UInt32, _ alpha: CGFloat = 1) -> UIColor {",
+    "    UIColor(red: CGFloat((hex >> 16) & 0xFF) / 255, green: CGFloat((hex >> 8) & 0xFF) / 255, blue: CGFloat(hex & 0xFF) / 255, alpha: alpha)",
+    "}",
+    "",
+    "private func dynamic(_ light: UIColor, _ dark: UIColor) -> Color {",
+    "    Color(UIColor { $0.userInterfaceStyle == .dark ? dark : light })",
+    "}",
+    "",
+    "/// Brand colours. Each one switches with the system's light or dark appearance.",
+    "public enum BrandColor {",
+    ...g.colors.flatMap((c) => [
+      ...c.description ? [`    /// ${c.description}`] : [],
+      ...c.deprecated ? [`    @available(*, deprecated, message: ${JSON.stringify(c.deprecated)})`] : [],
+      `    public static let ${c.name} = dynamic(${ui(c.light)}, ${ui(c.dark)})`
+    ]),
+    "}",
+    "#endif",
+    "",
+    "/// Spacing scale in points. Padding, margins and stack spacing use these.",
+    "public enum BrandSpacing {",
+    ...g.spacing.map((s) => `    public static let ${s.name}: CGFloat = ${num(s.px)}`),
+    "}",
+    "",
+    "/// Corner radius scale in points.",
+    "public enum BrandRadius {",
+    ...g.radius.map((r) => `    public static let ${r.name}: CGFloat = ${num(r.px)}`),
+    "}",
+    "",
+    `/// The type scale${font?.family ? `, in ${font.family} (add the font files to the app and Info.plist)` : " in the system font"}.`,
+    "public enum BrandFont {",
+    ...g.type.map((t) => {
+      const w = t.weight >= 700 ? ".bold" : t.weight >= 600 ? ".semibold" : t.weight >= 500 ? ".medium" : t.weight <= 300 ? ".light" : ".regular";
+      return font?.family ? `    public static let ${t.name} = Font.custom("${font.family}", size: ${num(t.size)}).weight(${w})` : `    public static let ${t.name} = Font.system(size: ${num(t.size)}, weight: ${w})`;
+    }),
+    "",
+    "    /// Extra space between lines for each step (line height minus font size), for .lineSpacing().",
+    ...g.type.filter((t) => t.lineHeight).map((t) => `    public static let ${t.name}LineSpacing: CGFloat = ${num(Math.max(0, t.lineHeight - t.size))}`),
+    "}",
+    ""
+  ];
+  return {
+    format: "ios",
+    files: [{ path: "BrandTokens.swift", content: lines.join("\n") }],
+    usage: [
+      "Add BrandTokens.swift to the app target.",
+      "Use the names in views: .foregroundStyle(BrandColor.fgDefault), .padding(BrandSpacing.space4), .font(BrandFont.textBase).",
+      "Dark mode follows the system appearance automatically."
+    ]
+  };
+}
+function compose(g, o, pkg = "com.brand.tokens") {
+  const weight = (w) => `FontWeight(${Math.round(w / 100) * 100})`;
+  const font = g.fonts[0];
+  const content = [
+    head("//", o),
+    `package ${pkg}`,
+    "",
+    "import androidx.compose.foundation.isSystemInDarkTheme",
+    "import androidx.compose.runtime.Composable",
+    "import androidx.compose.runtime.Immutable",
+    "import androidx.compose.runtime.ReadOnlyComposable",
+    "import androidx.compose.runtime.staticCompositionLocalOf",
+    "import androidx.compose.ui.graphics.Color",
+    "import androidx.compose.ui.text.TextStyle",
+    "import androidx.compose.ui.text.font.FontWeight",
+    "import androidx.compose.ui.unit.dp",
+    "import androidx.compose.ui.unit.sp",
+    "",
+    "/** Brand colours. Read them with BrandTheme.colors, which follows the system's dark theme. */",
+    "@Immutable",
+    "data class BrandColors(",
+    ...g.colors.map((c) => `    ${c.deprecated ? `@Deprecated(${JSON.stringify(c.deprecated).replace(/\$/g, "\\$")}) ` : ""}val ${c.name}: Color,`),
+    ")",
+    "",
+    "val BrandLightColors = BrandColors(",
+    ...g.colors.map((c) => `    ${c.name} = Color(${argb(c.light)}),`),
+    ")",
+    "",
+    "val BrandDarkColors = BrandColors(",
+    ...g.colors.map((c) => `    ${c.name} = Color(${argb(c.dark)}),`),
+    ")",
+    "",
+    "val LocalBrandColors = staticCompositionLocalOf { BrandLightColors }",
+    "",
+    "object BrandTheme {",
+    "    val colors: BrandColors",
+    "        @Composable @ReadOnlyComposable get() = LocalBrandColors.current",
+    "}",
+    "",
+    "/** Picks light or dark colours from the system setting. Wrap the app (or a screen) in it. */",
+    "@Composable",
+    "fun brandColors(darkTheme: Boolean = isSystemInDarkTheme()): BrandColors = if (darkTheme) BrandDarkColors else BrandLightColors",
+    "",
+    "/** Spacing scale. Padding, margins and Arrangement.spacedBy use these. */",
+    "object BrandSpacing {",
+    ...g.spacing.map((s) => `    val ${s.name} = ${num(s.px)}.dp`),
+    "}",
+    "",
+    "/** Corner radius scale: RoundedCornerShape(BrandRadius.radiusMd). */",
+    "object BrandRadius {",
+    ...g.radius.map((r) => `    val ${r.name} = ${num(r.px)}.dp`),
+    "}",
+    "",
+    `/** The type scale${font?.family ? `. Set fontFamily to ${font.family} once it's in res/font` : ""}. */`,
+    "object BrandType {",
+    ...g.type.map((t) => `    val ${t.name} = TextStyle(fontSize = ${num(t.size)}.sp${t.lineHeight ? `, lineHeight = ${num(t.lineHeight)}.sp` : ""}, fontWeight = ${weight(t.weight)})`),
+    "}",
+    ""
+  ].join("\n");
+  return {
+    format: "compose",
+    files: [{ path: "BrandTokens.kt", content }],
+    usage: [
+      `Add BrandTokens.kt to the app module (package ${pkg}; change it to yours).`,
+      "Provide the colours once: CompositionLocalProvider(LocalBrandColors provides brandColors()) { App() }",
+      "Then use BrandTheme.colors.actionPrimary, Modifier.padding(BrandSpacing.space4), BrandType.textBase."
+    ]
+  };
+}
+function androidXml(g, o) {
+  const res = (id) => `brand_${id.replace(/([a-z0-9])([A-Z])/g, "$1_$2").toLowerCase()}`;
+  const color = (c) => `#${hex2(c.a * 255)}${hex2(c.r)}${hex2(c.g)}${hex2(c.b)}`;
+  const xml = (body) => [`<?xml version="1.0" encoding="utf-8"?>`, `<!-- ${head("", o).trim()} -->`, "<resources>", ...body, "</resources>", ""].join("\n");
+  return {
+    format: "android-xml",
+    files: [
+      { path: "values/brand_colors.xml", content: xml(g.colors.map((c) => `    <color name="${res(c.name)}">${color(c.light)}</color>${c.deprecated ? ` <!-- ${c.deprecated} -->` : ""}`)) },
+      { path: "values-night/brand_colors.xml", content: xml(g.colors.map((c) => `    <color name="${res(c.name)}">${color(c.dark)}</color>`)) },
+      {
+        path: "values/brand_dimens.xml",
+        content: xml([
+          ...g.spacing.map((s) => `    <dimen name="${res(s.name)}">${num(s.px)}dp</dimen>`),
+          ...g.radius.map((r) => `    <dimen name="${res(r.name)}">${num(r.px)}dp</dimen>`),
+          ...g.type.map((t) => `    <dimen name="${res(t.name)}_size">${num(t.size)}sp</dimen>`),
+          ...g.type.filter((t) => t.lineHeight).map((t) => `    <dimen name="${res(t.name)}_line_height">${num(t.lineHeight)}sp</dimen>`)
+        ])
+      }
+    ],
+    usage: [
+      "Copy the three files into app/src/main/res/ (values-night switches the colours in dark mode).",
+      "Use them as @color/brand_action_primary and @dimen/brand_space4 in layouts, or R.color.brand_action_primary in code."
+    ]
+  };
+}
+function reactNative(g, o) {
+  const font = g.fonts[0];
+  const obj = (pairs, pad = "  ") => pairs.map(([k, v]) => `${pad}${k}: ${v},`).join("\n");
+  const content = [
+    head("//", o),
+    'import { useColorScheme } from "react-native";',
+    "",
+    "/** Brand colours in light mode. */",
+    `export const lightColors = {
+${obj(g.colors.map((c) => [c.name, JSON.stringify(rgbHex(c.light))]))}
+} as const;`,
+    "",
+    "/** Brand colours in dark mode. */",
+    `export const darkColors: { [K in keyof typeof lightColors]: string } = {
+${obj(g.colors.map((c) => [c.name, JSON.stringify(rgbHex(c.dark))]))}
+};`,
+    "",
+    "export type BrandColors = { [K in keyof typeof lightColors]: string };",
+    "",
+    "/** The colours for the system's light or dark appearance. */",
+    "export function useBrandColors(): BrandColors {",
+    '  return useColorScheme() === "dark" ? darkColors : lightColors;',
+    "}",
+    "",
+    "/** Spacing scale, for padding, margin and gap. */",
+    `export const spacing = {
+${obj(g.spacing.map((s) => [s.name, num(s.px)]))}
+} as const;`,
+    "",
+    "/** Corner radius scale, for borderRadius. */",
+    `export const radius = {
+${obj(g.radius.map((r) => [r.name, num(r.px)]))}
+} as const;`,
+    "",
+    `/** The type scale as Text styles${font?.family ? ` (${font.family} must be linked into the app)` : ""}. */`,
+    `export const type = {
+${obj(
+      g.type.map((t) => [
+        t.name,
+        `{ ${[`fontSize: ${num(t.size)}`, ...t.lineHeight ? [`lineHeight: ${num(t.lineHeight)}`] : [], `fontWeight: "${Math.round(t.weight / 100) * 100}" as const`, ...font?.family ? [`fontFamily: ${JSON.stringify(font.family)}`] : []].join(", ")} }`
+      ])
+    )}
+} as const;`,
+    ""
+  ].join("\n");
+  return {
+    format: "react-native",
+    files: [{ path: "brandTokens.ts", content }],
+    usage: [
+      "Add brandTokens.ts to the app (e.g. src/theme/).",
+      "In a component: const colors = useBrandColors(); style={{ backgroundColor: colors.canvasDefault, padding: spacing.space4 }} and <Text style={type.textBase}>."
+    ]
+  };
+}
+function flutter(g, o) {
+  const font = g.fonts[0];
+  const fields = g.colors;
+  const content = [
+    head("//", o),
+    "import 'package:flutter/material.dart';",
+    "",
+    "/// Brand colours as a ThemeExtension: add BrandColors.light and BrandColors.dark to your ThemeData,",
+    "/// then read them with Theme.of(context).extension<BrandColors>()!.",
+    "@immutable",
+    "class BrandColors extends ThemeExtension<BrandColors> {",
+    "  const BrandColors({",
+    ...fields.map((c) => `    required this.${c.name},`),
+    "  });",
+    "",
+    ...fields.flatMap((c) => [...c.description ? [`  /// ${c.description}`] : [], ...c.deprecated ? [`  @Deprecated('${c.deprecated.replace(/[\\'$]/g, "\\$&")}')`] : [], `  final Color ${c.name};`]),
+    "",
+    "  static const light = BrandColors(",
+    ...fields.map((c) => `    ${c.name}: Color(${argb(c.light)}),`),
+    "  );",
+    "",
+    "  static const dark = BrandColors(",
+    ...fields.map((c) => `    ${c.name}: Color(${argb(c.dark)}),`),
+    "  );",
+    "",
+    "  @override",
+    "  BrandColors copyWith({",
+    ...fields.map((c) => `    Color? ${c.name},`),
+    "  }) {",
+    "    return BrandColors(",
+    ...fields.map((c) => `      ${c.name}: ${c.name} ?? this.${c.name},`),
+    "    );",
+    "  }",
+    "",
+    "  @override",
+    "  BrandColors lerp(ThemeExtension<BrandColors>? other, double t) {",
+    "    if (other is! BrandColors) return this;",
+    "    return BrandColors(",
+    ...fields.map((c) => `      ${c.name}: Color.lerp(${c.name}, other.${c.name}, t)!,`),
+    "    );",
+    "  }",
+    "}",
+    "",
+    "/// Spacing scale, for EdgeInsets and SizedBox.",
+    "abstract final class BrandSpacing {",
+    ...g.spacing.map((s) => `  static const double ${s.name} = ${num(s.px)};`),
+    "}",
+    "",
+    "/// Corner radius scale: BorderRadius.circular(BrandRadius.radiusMd).",
+    "abstract final class BrandRadius {",
+    ...g.radius.map((r) => `  static const double ${r.name} = ${num(r.px)};`),
+    "}",
+    "",
+    `/// The type scale${font?.family ? ` (declare the ${font.family} font in pubspec.yaml)` : ""}.`,
+    "abstract final class BrandText {",
+    ...g.type.map((t) => {
+      const parts = [`fontSize: ${num(t.size)}`, ...t.lineHeight ? [`height: ${num(t.lineHeight / t.size, 3)}`] : [], `fontWeight: FontWeight.w${Math.min(900, Math.max(100, Math.round(t.weight / 100) * 100))}`, ...font?.family ? [`fontFamily: '${font.family.replace(/'/g, "\\'")}'`] : []];
+      return `  static const TextStyle ${t.name} = TextStyle(${parts.join(", ")});`;
+    }),
+    "}",
+    ""
+  ].join("\n");
+  return {
+    format: "flutter",
+    files: [{ path: "brand_tokens.dart", content }],
+    usage: [
+      "Add brand_tokens.dart to lib/.",
+      "ThemeData(extensions: [BrandColors.light]) and darkTheme: ThemeData(extensions: [BrandColors.dark]).",
+      "Then Theme.of(context).extension<BrandColors>()!.actionPrimary, EdgeInsets.all(BrandSpacing.space4), BrandText.textBase."
+    ]
+  };
+}
+var cssVar2 = (path) => `--${path.replace(/\./g, "-")}`;
+function tailwind(flat) {
+  const step = (p, re) => p.replace(re, "").replace(/\./g, "-");
+  const lines = [
+    ...flat.filter((t) => t.type === "color").map((t) => `  --color-${step(t.path, /^color\./)}: var(${cssVar2(t.path)});`),
+    ...flat.filter((t) => t.path.startsWith("font.family.")).map((t) => `  --font-${step(t.path, /^font\.family\./)}: var(${cssVar2(t.path)});`),
+    ...flat.filter((t) => t.path.startsWith("font.size.")).flatMap((t) => {
+      const name = step(t.path, /^font\.size\./);
+      const lh = flat.find((x2) => x2.path === `font.line-height.${t.path.slice("font.size.".length)}`);
+      return [`  --text-${name}: ${t.value};`, ...lh ? [`  --text-${name}--line-height: ${lh.value};`] : []];
+    }),
+    ...flat.filter((t) => /^(radius|radii)\./.test(t.path)).map((t) => `  --radius-${step(t.path, /^(radius|radii)\./)}: ${t.value};`),
+    ...flat.filter((t) => /^(space|spacing)\./.test(t.path) && !/\.unit$/.test(t.path)).map((t) => `  --spacing-${step(t.path, /^(space|spacing)\./)}: ${t.value};`)
+  ];
+  return `/* Paste after the CSS variables export, in your main stylesheet */
+@theme inline {
+  --color-*: initial;
+  --spacing-*: initial;
+  --radius-*: initial;
+  --text-*: initial;
+${lines.join("\n")}
+}
+`;
+}
+function exportTokens(tokens, format, opts = {}) {
+  switch (format) {
+    case "css":
+      return { format, files: [{ path: "brandrail.tokens.css", content: generateTokensCss(tokens, opts) }], usage: ["Import it once at the app entry, before other styles."] };
+    case "tailwind":
+      return { format, files: [{ path: "brandrail-theme.css", content: tailwind(flattenTokens(tokens)) }], usage: ["Import it after brandrail.tokens.css in the stylesheet that loads Tailwind v4."] };
+    case "json":
+      return { format, files: [{ path: "tokens.json", content: `${JSON.stringify(tokens ?? {}, null, 2)}
+` }], usage: ["Feed it to Style Dictionary, Tokens Studio or any DTCG tool."] };
+    case "ios":
+      return swift(groups(tokens), opts);
+    case "compose":
+      return compose(groups(tokens), opts);
+    case "android-xml":
+      return androidXml(groups(tokens), opts);
+    case "react-native":
+      return reactNative(groups(tokens), opts);
+    case "flutter":
+      return flutter(groups(tokens), opts);
+  }
+}
+var isExportFormat = (x2) => EXPORT_FORMATS.some((f) => f.id === x2);
+
 // src/api.ts
 var DEFAULT_API = "https://www.brandrail.com.au";
 function apiBase() {
@@ -12150,7 +12719,7 @@ __export(external_exports, {
   gte: () => _gte,
   guid: () => guid2,
   hash: () => hash,
-  hex: () => hex2,
+  hex: () => hex3,
   hostname: () => hostname3,
   httpUrl: () => httpUrl,
   iban: () => iban2,
@@ -13311,8 +13880,8 @@ function base64urlToUint8Array(base64url3) {
 function uint8ArrayToBase64url(bytes) {
   return uint8ArrayToBase64(bytes).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
 }
-function hexToUint8Array(hex3) {
-  const cleanHex = hex3.replace(/^0x/, "");
+function hexToUint8Array(hex4) {
+  const cleanHex = hex4.replace(/^0x/, "");
   if (cleanHex.length % 2 !== 0) {
     throw new Error("Invalid hex string length");
   }
@@ -29089,7 +29658,7 @@ __export(schemas_exports2, {
   function: () => _function,
   guid: () => guid2,
   hash: () => hash,
-  hex: () => hex2,
+  hex: () => hex3,
   hostname: () => hostname3,
   httpUrl: () => httpUrl,
   iban: () => iban2,
@@ -29782,7 +30351,7 @@ function stringFormat(format, fnOrRegex, _params = {}) {
 function hostname3(_params) {
   return _stringFormat(ZodCustomStringFormat, "hostname", hostname2, _params);
 }
-function hex2(_params) {
+function hex3(_params) {
   return _stringFormat(ZodCustomStringFormat, "hex", hex, _params);
 }
 function currencyCode2(_params) {
@@ -41421,7 +41990,7 @@ var CATEGORY = {
   radius: (l) => /^(radius|radii)\./.test(l.path),
   typography: (l) => l.path.startsWith("font.") || l.type === "fontFamily"
 };
-var cssVar2 = (path) => `var(--${path.replace(/\./g, "-")})`;
+var cssVar3 = (path) => `var(--${path.replace(/\./g, "-")})`;
 function componentDoc(c, fw) {
   const u = resolveUsage(c, fw);
   const others = availableFrameworks(c).filter((f) => f !== fw).map((f) => FRAMEWORK_LABEL[f]);
@@ -41467,13 +42036,13 @@ function componentDoc(c, fw) {
   if (others.length) lines.push("", `Also available for: ${others.join(", ")}.`);
   return lines.join("\n");
 }
-var frameworkInput = external_exports.enum(FRAMEWORKS).optional().describe("The project's UI framework (from its package.json: @angular/core \u2192 angular, vue \u2192 vue, react \u2192 react). Defaults to the one set for this connection.");
+var frameworkInput = external_exports.enum(FRAMEWORKS).optional().describe("The project's UI framework (from its package.json: @angular/core \u2192 angular, vue \u2192 vue, svelte \u2192 svelte, solid-js \u2192 solid, react \u2192 react). Defaults to the one set for this connection.");
 var text = (t) => ({ content: [{ type: "text", text: t }] });
 function createBrandrailMcp(ctx) {
   const server = new McpServer(
     { name: "brandrail", title: `Brandrail \u2014 ${ctx.org} design system`, version: ENGINE_VERSION },
     {
-      instructions: `Design system for ${ctx.org}. Before writing UI: call get_guidelines once. For a new page or screen, start from get_template. Use find_component for every UI element (pass \`framework\` \u2014 angular, vue, react, web-components or html \u2014 when the project isn't ${ctx.framework ? FRAMEWORK_LABEL[ctx.framework] : "React"}) (use only the props it lists) and get_design_tokens for colours/spacing. After writing UI: call validate_snippet once with all changed files and fix every violation before finishing.`
+      instructions: `Design system for ${ctx.org}. Before writing UI: call get_guidelines once. For a new page or screen, start from get_template. Use find_component for every UI element (pass \`framework\` \u2014 angular, vue, svelte, solid, react, web-components or html \u2014 when the project isn't ${ctx.framework ? FRAMEWORK_LABEL[ctx.framework] : "React"}) (use only the props it lists) and get_design_tokens for colours/spacing. After writing UI: call validate_snippet once with all changed files and fix every violation before finishing.`
     }
   );
   const resolved = resolveConfig(ctx.config);
@@ -41504,8 +42073,8 @@ function createBrandrailMcp(ctx) {
       lines.push("| Token | Use | Value | Meaning |", "| --- | --- | --- | --- |");
       for (const l of pick2) {
         const dep = resolved.deprecatedTokens.get(`--${l.path.replace(/\./g, "-")}`);
-        const note = dep ? `**Deprecated**${dep.replacement ? `: use \`${cssVar2(dep.replacement)}\`` : ""}${dep.removeAfter ? ` (removed after ${dep.removeAfter})` : ""}.` : l.description ?? "";
-        lines.push(`| ${l.path} | \`${cssVar2(l.path)}\` | ${String(l.value)}${l.dark ? ` (dark ${String(l.dark)})` : ""} | ${note} |`);
+        const note = dep ? `**Deprecated**${dep.replacement ? `: use \`${cssVar3(dep.replacement)}\`` : ""}${dep.removeAfter ? ` (removed after ${dep.removeAfter})` : ""}.` : l.description ?? "";
+        lines.push(`| ${l.path} | \`${cssVar3(l.path)}\` | ${String(l.value)}${l.dark ? ` (dark ${String(l.dark)})` : ""} | ${note} |`);
       }
       if (pick2.some((l) => l.dark)) lines.push("", "Colours with a dark value switch automatically: always use the variable, never the hex, so both themes work.");
       if (category === "all" || category === "spacing") lines.push("", `Allowed spacing (px): ${resolved.spacing.filter((s) => s > 2).join(", ")}`);
@@ -41959,6 +42528,7 @@ Usage
   brandrail import <files\u2026>   Load tokens into the config: DTCG, Tokens Studio, Figma variables JSON, or Figma's Export modes ZIP
   brandrail rules              List the rules
   brandrail template [name]    Start a page (list, detail, form, settings, dashboard, sign-in) from your components
+  brandrail export <formats\u2026>  Write the Brand Kit for other platforms: ios, compose, android-xml, react-native, flutter, css, tailwind, json
 
 Options for check
   --config <file>        Config file (default: nearest brandrail.config.json)
@@ -41975,7 +42545,7 @@ Options for init
   --no-rules             Don't write AGENTS.md (Codex), CLAUDE.md, Cursor, Copilot, Windsurf, Gemini rule files
   --mcp                  Also add the Brandrail MCP server to .mcp.json, .cursor/mcp.json, .vscode/mcp.json
                          and print the Codex / Windsurf config
-  --framework <name>     react | angular | vue | web-components | html (default: detected from package.json)
+  --framework <name>     react | angular | vue | svelte | solid | web-components | html (default: detected from package.json)
   --tokens-css <file>    Where to write the CSS variables (default src/brandrail.tokens.css); --no-tokens-css to skip
   --force                Overwrite an existing brandrail.config.json
 
@@ -42009,6 +42579,10 @@ Options for import
   --replace              Replace the config's tokens instead of merging
   --primitives           Keep raw palette ramps (gray.100\u2026900) that semantic tokens point at
 
+Options for export
+  --out <folder>         Where to write (default: here; with several formats, a folder per format)
+  --from-api             Use the published Brand Kit instead of brandrail.config.json
+
 Options for template
   --framework <name>     Override the detected framework
   --out <folder>         Where to write the files (default: here)
@@ -42393,17 +42967,17 @@ async function cmdScan(cwd, positional, flags) {
   const url2 = positional[0];
   if (!url2) throw new Error("Usage: brandrail scan <url> [--pages 3] [--storage-state auth.json] [--upload]");
   const { config: config2, source } = await loadConfig(cwd, flags);
-  const num = (k, d, max2) => typeof flags[k] === "string" ? Math.min(Math.max(Number(flags[k]) || d, 0), max2) : d;
+  const num2 = (k, d, max2) => typeof flags[k] === "string" ? Math.min(Math.max(Number(flags[k]) || d, 0), max2) : d;
   log2(`Scanning ${url2} \u2026`);
   const { report, pages } = await scanPages(
     cwd,
     url2,
     config2,
     {
-      pages: Math.max(1, num("pages", 1, 20)),
+      pages: Math.max(1, num2("pages", 1, 20)),
       storageState: typeof flags["storage-state"] === "string" ? flags["storage-state"] : void 0,
-      waitMs: num("wait", 0, 3e4),
-      width: num("width", 1280, 3840) || 1280
+      waitMs: num2("wait", 0, 3e4),
+      width: num2("width", 1280, 3840) || 1280
     },
     log2
   );
@@ -42480,6 +43054,44 @@ function cmdImport(cwd, positional, flags) {
   log2("\nNext: npx brandrail init (to refresh AI rule files), then npx brandrail check");
   return 0;
 }
+async function cmdExport(cwd, positional, flags) {
+  if (!positional.length) {
+    process.stdout.write(`Formats:
+${EXPORT_FORMATS.map((f) => `  ${f.id.padEnd(14)} ${f.label}: ${f.description}`).join("\n")}
+
+Usage: brandrail export <format\u2026> [--out <folder>] [--from-api]
+`);
+    return 0;
+  }
+  const bad = positional.filter((f) => !isExportFormat(f));
+  if (bad.length) throw new Error(`Unknown format: ${bad.join(", ")}. Use one of: ${EXPORT_FORMATS.map((f) => f.id).join(", ")}.`);
+  let config2;
+  let org;
+  if (flags["from-api"]) {
+    const key = resolveKey();
+    if (!key) throw new Error(`--from-api: ${NO_KEY}`);
+    const local = findConfig(cwd);
+    const res = await fetchBrandKit(key, local ? readConfig(local).brandKitVersion : void 0);
+    config2 = res.config;
+    org = res.org;
+  } else {
+    ({ config: config2 } = await loadConfig(cwd, flags));
+    org = config2.org;
+  }
+  const base = resolve3(cwd, typeof flags.out === "string" ? flags.out : ".");
+  for (const format of new Set(positional)) {
+    const r = exportTokens(config2.tokens, format, { org, version: config2.tokenVersion });
+    const dir = positional.length > 1 ? join7(base, format) : base;
+    for (const f of r.files) {
+      const p = join7(dir, f.path);
+      mkdirSync4(dirname4(p), { recursive: true });
+      writeFileSync4(p, f.content);
+    }
+    log2(`\u2714 ${EXPORT_FORMATS.find((x2) => x2.id === format).label}: ${r.files.map((f) => relative3(cwd, join7(dir, f.path))).join(", ")}`);
+    for (const u of r.usage) log2(`  \xB7 ${u}`);
+  }
+  return 0;
+}
 async function cmdTemplate(cwd, positional, flags) {
   if (!positional.length) {
     process.stdout.write(`Page templates, built from your registry's components:
@@ -42533,6 +43145,8 @@ async function main(argv = process.argv.slice(2)) {
       return cmdRules();
     case "template":
       return cmdTemplate(cwd, positional, flags);
+    case "export":
+      return cmdExport(cwd, positional, flags);
     case "connect":
       return cmdConnect(cwd, flags);
     case "mcp":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brandrail",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Keep AI-generated UI on-brand: checks code and live pages against your design system, and wires your Brand Kit into Claude Code, Cursor, Copilot and Codex.",
   "keywords": [
     "design-system",
@@ -43,8 +43,8 @@
     "playwright-core": "1.63.0",
     "typescript": "5.9.3",
     "zod": "4.6.7",
-    "@brandrail/mcp": "0.1.0",
-    "@brandrail/engine": "0.1.0"
+    "@brandrail/engine": "0.1.0",
+    "@brandrail/mcp": "0.1.0"
   },
   "scripts": {
     "build": "esbuild src/index.ts --bundle --platform=node --target=node18 --format=esm --outfile=dist/brandrail.mjs --external:playwright --external:playwright-core --banner:js='#!/usr/bin/env node' && chmod +x dist/brandrail.mjs",