@nebutra/tokens 0.1.2 → 0.1.3

package/src/brand-package/__tests__/compile-refero.test.ts

@@ -1,427 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { compileReferoTokens } from "../compile-refero";
-import { hexToHslChannels } from "../hex-to-hsl";
-
-describe("hexToHslChannels", () => {
-  it("converts green", () => {
-    assert.match(hexToHslChannels("#0ae448"), /^\d+ \d+% \d+%$/);
-  });
-});
-
-describe("compileReferoTokens — GSAP", () => {
-  it("produces gradient-stroke recipe and category extensions", () => {
-    const result = compileReferoTokens({
-      id: "gsap",
-      designMd: "gradient-stroked CTA pill outlined-only",
-      tokens: {
-        color: {
-          "just-black": { $value: "#0e100f", $type: "color" },
-          "surface-cream": { $value: "#fffce1", $type: "color" },
-          "surface-50": { $value: "#7c7c6f", $type: "color" },
-          "surface-25": { $value: "#42433d", $type: "color" },
-          "off-black": { $value: "#191919", $type: "color" },
-          "shockingly-green": { $value: "#0ae448", $type: "color" },
-          pink: { $value: "#fec5fb", $type: "color" },
-          orangey: { $value: "#ff8709", $type: "color" },
-          lilac: { $value: "#9d95ff", $type: "color" },
-          blue: { $value: "#00bae2", $type: "color" },
-        },
-        radius: {
-          full: { $value: "100px", $type: "dimension" },
-          lg: { $value: "8px", $type: "dimension" },
-        },
-        $extensions: {
-          "com.refero.extraction": { siteName: "Gsap", url: "https://gsap.com" },
-        },
-      },
-    });
-    assert.equal(result.brand.recipe.buttonDefault, "gradient-stroke");
-    assert.equal(result.brand.recipe.radii.button, "100px");
-    assert.match(result.brand.recipe.elevationTokens.card, /0 0 #0000|0 0 #0000/);
-    assert.ok(result.brand.extensions?.categories?.scroll);
-    assert.match(result.css, /--btn-default-bg: transparent/);
-    assert.match(result.css, /--btn-default-stroke-gradient:/);
-    assert.match(result.css, /--btn-default-border-width: 1\.5px/);
-    assert.match(result.css, /@font-face/);
-    assert.match(result.css, /zone-marketing/);
-    assert.equal(result.brand.zones?.marketing?.display?.fontSize, "224px");
-    assert.ok((result.brand.typography.faces?.length ?? 0) > 0);
-    assert.ok(result.warnings.some((w) => w.includes("shockingly-green")));
-  });
-});
-
-describe("compileReferoTokens — Linear", () => {
-  it("produces solid CTA recipe", () => {
-    const result = compileReferoTokens({
-      id: "linear",
-      tokens: {
-        color: {
-          void: { $value: "#08090a", $type: "color" },
-          carbon: { $value: "#0f1011", $type: "color" },
-          graphite: { $value: "#23252a", $type: "color" },
-          paper: { $value: "#ffffff", $type: "color" },
-          "acid-lime": { $value: "#e4f222", $type: "color" },
-        },
-      },
-    });
-    assert.equal(result.brand.recipe.buttonDefault, "solid");
-    assert.match(result.css, /--btn-default-bg: hsl\(var\(--primary\)\)/);
-    assert.match(result.css, /--btn-default-border-width: 0px/);
-    // Canonical free radii/elev
-    assert.equal(result.brand.recipe.radii?.button, "6px");
-    assert.ok(result.brand.recipe.elevationTokens?.card);
-    // Dual-mode dark default + light paper
-    assert.equal(result.brand.darkDefault, true);
-    assert.ok(result.brand.modes?.dark?.semantic);
-    assert.ok(result.brand.modes?.light?.semantic);
-    assert.match(result.brand.modes?.light?.semantic?.background ?? "", /^0 0% 100%$/);
-    assert.match(result.css, /dualMode=true/);
-    assert.match(result.css, /\.dark,\nhtml\.dark\[data-brand="linear"\]/);
-  });
-});
-
-describe("validateBrandPackage", () => {
-  it("accepts compiled packages", async () => {
-    const { validateBrandPackage } = await import("../validate");
-    const result = compileReferoTokens({
-      id: "linear",
-      tokens: {
-        color: {
-          void: { $value: "#08090a", $type: "color" },
-          paper: { $value: "#ffffff", $type: "color" },
-          "acid-lime": { $value: "#e4f222", $type: "color" },
-        },
-      },
-    });
-    const v = validateBrandPackage(result.brand);
-    assert.equal(v.ok, true);
-    assert.ok(result.brand.roles?.action);
-    assert.equal(result.brand.semantic.primary, result.brand.roles?.action);
-    assert.ok(result.brand.recipe.elevationTokens?.card);
-    assert.ok(result.brand.recipe.radii?.button);
-  });
-});
-
-describe("carrier contract — action ≠ brand", () => {
-  it("keeps Raycast brand mark off primary", () => {
-    const result = compileReferoTokens({
-      id: "raycast",
-      tokens: {
-        color: {
-          "void-black": { $value: "#040506", $type: "color" },
-          mist: { $value: "#e6e6e6", $type: "color" },
-          iron: { $value: "#454647", $type: "color" },
-          "coral-pulse": { $value: "#ff6363", $type: "color" },
-          "pure-white": { $value: "#ffffff", $type: "color" },
-          ink: { $value: "#07080a", $type: "color" },
-        },
-      },
-    });
-    assert.ok(result.brand.roles?.brand);
-    assert.notEqual(result.brand.roles?.action, result.brand.roles?.brand);
-    assert.equal(result.brand.semantic.primary, result.brand.roles?.action);
-    assert.match(result.css, /--brand-mark:/);
-    assert.match(result.css, /--role-action:/);
-  });
-});
-
-describe("compileReferoTokens — Vercel", () => {
-  it("uses light monochrome Obsidian CTA and hairline elevation", () => {
-    const result = compileReferoTokens({
-      id: "vercel",
-      designMd:
-        "Typeset terminal on white paper. Filled Black Button #171717. Build depth with hairline borders via stacked box-shadows — never with drop-shadow. Never introduce chromatic color outside Terminal Green.",
-      tokens: {
-        color: {
-          "paper-white": { $value: "#fafafa", $type: "color" },
-          "pure-white": { $value: "#ffffff", $type: "color" },
-          hairline: { $value: "#ebebeb", $type: "color" },
-          obsidian: { $value: "#171717", $type: "color" },
-          charcoal: { $value: "#4d4d4d", $type: "color" },
-          "terminal-green": { $value: "#297a3a", $type: "color" },
-        },
-        surface: {
-          "page-canvas": { $value: "#fafafa", $type: "color" },
-          "card-surface": { $value: "#ffffff", $type: "color" },
-        },
-        $extensions: {
-          "com.refero.extraction": { siteName: "Vercel", url: "https://vercel.com" },
-        },
-      },
-    });
-    assert.equal(result.brand.id, "vercel");
-    assert.equal(result.brand.darkDefault, false);
-    assert.equal(result.brand.recipe.buttonDefault, "solid");
-    assert.equal(result.brand.recipe.radii.button, "6px");
-    assert.match(result.brand.recipe.elevationTokens.card, /1px|inset/);
-    // Light paper background (~98%)
-    assert.match(result.brand.semantic.background, /9[0-9]%/);
-    // Obsidian primary (~9%)
-    assert.match(result.brand.semantic.primary, /^0 0% 9%|0 0% 8%|0 0% 10%/);
-    assert.match(result.css, /0px 0px 0px 1px/);
-    assert.ok(!result.css.includes("rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset"));
-    // Dual-mode: light + dark palettes, separate CSS blocks
-    assert.ok(result.brand.modes?.light?.semantic);
-    assert.ok(result.brand.modes?.dark?.semantic);
-    assert.match(result.brand.modes!.dark!.semantic!.background, /^0 0% 0%$/);
-    assert.match(result.brand.modes!.dark!.semantic!.primary, /^0 0% 100%$/);
-    assert.match(result.css, /dualMode=true/);
-    assert.match(result.css, /\.dark,\nhtml\.dark\[data-brand="vercel"\]/);
-  });
-});
-
-describe("compileReferoTokens — Notion", () => {
-  it("uses paper canvas, notion-blue action, ink brand-mark, 8/12 radii, elev none", () => {
-    const result = compileReferoTokens({
-      id: "notion",
-      designMd: `
-# Notion — Style Reference
-**Theme:** light
-**Density:** comfortable
-Page canvas #f6f5f4, cards #ffffff.
-Do not add shadows to content cards — hairline borders only.
-| cards | 12px |
-| pills | 9999px |
-| small | 4px |
-| buttons | 8px |
-Primary CTA Button Background #0075de. Notion Blue only filled button.
-Outlined Text Button border-radius 4px (tertiary only).
-`,
-      tokens: {
-        color: {
-          "notion-blue": { $value: "#0075de", $type: "color" },
-          "paper-warmth": { $value: "#f6f5f4", $type: "color" },
-          "pure-white": { $value: "#ffffff", $type: "color" },
-          "ink-black": { $value: "#000000", $type: "color" },
-          stone: { $value: "#757575", $type: "color" },
-          "sky-tint": { $value: "#e6f3fe", $type: "color" },
-          marigold: { $value: "#ffb110", $type: "color" },
-          coral: { $value: "#f64932", $type: "color" },
-          "midnight-ink": { $value: "#02093a", $type: "color" },
-        },
-        font: {
-          notioninter: { $value: "NotionInter", $type: "fontFamily" },
-          "lyon-text": { $value: "Lyon Text", $type: "fontFamily" },
-        },
-        radius: {
-          md: { $value: "4px", $type: "dimension" },
-          lg: { $value: "8px", $type: "dimension" },
-          xl: { $value: "12px", $type: "dimension" },
-          full: { $value: "9999px", $type: "dimension" },
-        },
-        $extensions: {
-          "com.refero.extraction": { siteName: "Notion", url: "https://www.notion.com" },
-        },
-      },
-    });
-
-    assert.equal(result.brand.id, "notion");
-    assert.equal(result.brand.darkDefault, false);
-    assert.equal(result.brand.recipe.buttonDefault, "solid");
-    assert.match(result.brand.recipe.elevationTokens.card, /0 0 #0000|0 0 #0000/);
-    assert.equal(result.brand.recipe.radii.button, "8px");
-    assert.equal(result.brand.recipe.radii.card, "12px");
-    // Paper warmth canvas (~96% L), not pure white as page if distinct
-    assert.match(result.brand.semantic.background, /9[0-9]%/);
-    assert.notEqual(result.brand.semantic.background, result.brand.semantic.card);
-    // Notion blue action
-    assert.match(result.brand.semantic.primary, /4[0-5]%|43%|44%/);
-    assert.ok(result.brand.roles?.brand);
-    assert.notEqual(result.brand.roles?.action, result.brand.roles?.brand);
-    assert.match(result.css, /--elevation-card: 0 0 #0000/);
-    assert.match(result.css, /--radius-button: 8px/);
-    assert.match(result.css, /--radius-card: 12px/);
-    assert.match(result.css, /--brand-mark:/);
-    assert.ok(result.warnings.some((w) => /notion-blue|decorative/i.test(w)));
-  });
-});
-
-describe("compileReferoTokens — shadcn-named import mapping", () => {
-  it("maps HSL channel triples under shadcn keys without falling back to defaults", () => {
-    const result = compileReferoTokens({
-      id: "imported-shadcn",
-      name: "Imported",
-      tokens: {
-        color: {
-          background: { $value: "0 0% 98%", $type: "color" },
-          foreground: { $value: "0 0% 9%", $type: "color" },
-          primary: { $value: "228 85% 56%", $type: "color" },
-          "primary-foreground": { $value: "0 0% 100%", $type: "color" },
-          card: { $value: "0 0% 100%", $type: "color" },
-          border: { $value: "0 0% 90%", $type: "color" },
-          muted: { $value: "0 0% 94%", $type: "color" },
-          "muted-foreground": { $value: "0 0% 45%", $type: "color" },
-        },
-      },
-    });
-    assert.equal(result.brand.darkDefault, false);
-    assert.equal(result.brand.semantic.background, "0 0% 98%");
-    assert.equal(result.brand.semantic.primary, "228 85% 56%");
-    assert.equal(result.brand.semantic.foreground, "0 0% 9%");
-    assert.equal(result.brand.semantic.card, "0 0% 100%");
-  });
-});
-
-describe("compileReferoTokens — Stripe", () => {
-  it("uses indigo action, midnight brand-mark, 4px radius, elevation none", () => {
-    const result = compileReferoTokens({
-      id: "stripe",
-      designMd: `
-# Stripe — Style Reference
-**Theme:** light
-**Density:** comfortable
-Stripe avoids shadows entirely. Depth comes from background tint.
-Do not use shadows, blurs, or any form of CSS elevation.
-Use 4px border-radius on all buttons, inputs, and cards — never pill.
-Indigo Ink #533afd for filled buttons. Midnight Ink #061b31 for wordmark.
-| buttons | 4px |
-| cards | 4px |
-Primary Filled Button Background #533afd.
-`,
-      tokens: {
-        color: {
-          "indigo-ink": { $value: "#533afd", $type: "color" },
-          "indigo-hover": { $value: "#7389ff", $type: "color" },
-          "midnight-ink": { $value: "#061b31", $type: "color" },
-          slate: { $value: "#64748d", $type: "color" },
-          "pure-white": { $value: "#ffffff", $type: "color" },
-          mist: { $value: "#f8fafd", $type: "color" },
-          frost: { $value: "#e5edf5", $type: "color" },
-          "lavender-border": { $value: "#b9b9f9", $type: "color" },
-          "periwinkle-wash": { $value: "#e8e9ff", $type: "color" },
-        },
-        font: {
-          "sohne-var": { $value: "sohne-var", $type: "fontFamily" },
-        },
-        $extensions: {
-          "com.refero.extraction": { siteName: "Stripe", url: "https://stripe.com" },
-        },
-      },
-    });
-
-    assert.equal(result.brand.id, "stripe");
-    assert.equal(result.brand.darkDefault, false);
-    assert.equal(result.brand.recipe.buttonDefault, "solid");
-    assert.match(result.brand.recipe.elevationTokens.card, /0 0 #0000|0 0 #0000/);
-    assert.equal(result.brand.recipe.radii.button, "4px");
-    assert.equal(result.brand.recipe.radii.card, "4px");
-    assert.equal(result.brand.typography.headingWeight, 300);
-    // Indigo action (~61% L), not mist/white
-    assert.match(result.brand.semantic.primary, /6[0-5]%|5[5-9]%/);
-    assert.ok(result.brand.roles?.brand);
-    assert.notEqual(result.brand.roles?.action, result.brand.roles?.brand);
-    assert.match(result.brand.semantic.background, /100%|99%/);
-    assert.match(result.css, /--elevation-card: 0 0 #0000/);
-    assert.match(result.css, /--radius-button: 4px/);
-    assert.match(result.css, /--brand-mark:/);
-    assert.ok(result.warnings.some((w) => /indigo-ink|midnight/i.test(w)));
-  });
-});
-
-describe("compileReferoTokens — Vanta", () => {
-  it("separates vivid-violet action from indigo-ink brand-mark; pill + no shadow", () => {
-    const result = compileReferoTokens({
-      id: "vanta",
-      designMd: `
-# Vanta — Style Reference
-Editorial violet ledger on parchment
-**Density:** comfortable
-Don't drop shadows on cards — the flat 1px-border treatment is the system.
-Don't use #5e05c4 as decorative icon fill — it's action-only.
-Set every button, input, and badge to 999px radius — the pill is the signature.
-Vanta rejects drop shadows entirely. Elevation is 1px hairline borders.
-Primary Filled Button fill #5e05c4. Logo in Reckless #260048.
-`,
-      tokens: {
-        color: {
-          "indigo-ink": { $value: "#260048", $type: "color" },
-          "vivid-violet": { $value: "#5e05c4", $type: "color" },
-          "mid-violet": { $value: "#8f47d5", $type: "color" },
-          "lavender-wash": { $value: "#ddd6ff", $type: "color" },
-          carbon: { $value: "#181822", $type: "color" },
-          slate: { $value: "#484960", $type: "color" },
-          parchment: { $value: "#f7f8fa", $type: "color" },
-          paper: { $value: "#ffffff", $type: "color" },
-          "amber-signal": { $value: "#ffbe0f", $type: "color" },
-        },
-        font: {
-          reckless: { $value: "Reckless", $type: "fontFamily" },
-          "inter-variable": { $value: "Inter Variable", $type: "fontFamily" },
-        },
-        radius: {
-          buttons: { $value: "999px", $type: "dimension" },
-          cards: { $value: "16px", $type: "dimension" },
-          badges: { $value: "999px", $type: "dimension" },
-          inputs: { $value: "999px", $type: "dimension" },
-        },
-        $extensions: {
-          "com.refero.extraction": { siteName: "Vanta", url: "https://www.vanta.com" },
-        },
-      },
-    });
-
-    assert.equal(result.brand.id, "vanta");
-    assert.equal(result.brand.darkDefault, false);
-    assert.equal(result.brand.recipe.buttonDefault, "solid");
-    assert.match(result.brand.recipe.elevationTokens.card, /0 0 #0000|0 0 #0000/);
-    assert.equal(result.brand.recipe.density, "comfortable");
-    assert.match(result.brand.recipe.radii.button, /999/);
-    assert.equal(result.brand.recipe.radii.card, "16px");
-    assert.equal(result.brand.recipe.badgeDefault, "muted");
-
-    // action = vivid violet (~39% L), not indigo (~14% L)
-    assert.match(result.brand.semantic.primary, /3[6-9]%|40%/);
-    assert.ok(result.brand.roles?.brand);
-    assert.notEqual(result.brand.roles?.action, result.brand.roles?.brand);
-    assert.equal(result.brand.semantic.primary, result.brand.roles?.action);
-
-    // Light parchment canvas + dark carbon text (not white-on-white)
-    assert.match(result.brand.semantic.background, /9[0-9]%/);
-    assert.match(result.brand.semantic.foreground, /^24[0-9] |^240 |^0 0% 1|^273 /);
-
-    assert.match(result.css, /--brand-mark:/);
-    assert.match(result.css, /--elevation-card: 0 0 #0000/);
-    assert.match(result.css, /--radius-button: 999/);
-    assert.match(result.brand.typography.fontSans, /Inter/i);
-    assert.match(result.brand.typography.fontDisplay ?? "", /Reckless/i);
-    assert.equal(result.brand.zones?.marketing?.display?.fontSize, "90px");
-    assert.ok(result.warnings.some((w) => /indigo-ink|brand-mark/i.test(w)));
-  });
-});
-
-describe("compileReferoTokens — Raycast", () => {
-  it("uses neutral Mist CTA and key elevation, not coral fill", () => {
-    const result = compileReferoTokens({
-      id: "raycast",
-      designMd:
-        "Neutral Filled Button Mist fill. Don't use chromatic action buttons. keyboard key shadow stack. Hero gradient artwork only.",
-      tokens: {
-        color: {
-          "void-black": { $value: "#040506", $type: "color" },
-          ink: { $value: "#07080a", $type: "color" },
-          mist: { $value: "#e6e6e6", $type: "color" },
-          iron: { $value: "#454647", $type: "color" },
-          "coral-pulse": { $value: "#ff6363", $type: "color" },
-          "pure-white": { $value: "#ffffff", $type: "color" },
-          graphite: { $value: "#1b1c1e", $type: "color" },
-          slate: { $value: "#2f3031", $type: "color" },
-        },
-        $extensions: {
-          "com.refero.extraction": { siteName: "Raycast", url: "https://raycast.com" },
-        },
-      },
-    });
-    assert.equal(result.brand.id, "raycast");
-    assert.equal(result.brand.recipe.buttonDefault, "solid");
-    assert.equal(result.brand.recipe.radii.button, "8px");
-    assert.equal(result.brand.recipe.radii.card, "16px");
-    assert.match(result.brand.recipe.elevationTokens.card, /inset|1px/);
-    assert.equal(result.brand.recipe.badgeDefault, "muted");
-    // Mist primary (light), not void-black / coral
-    assert.match(result.brand.semantic.primary, /90%|89%|91%/);
-    assert.match(result.css, /--elevation-card: rgba\(255/);
-    assert.match(result.css, /--badge-default-bg: hsl\(var\(--secondary\)\)/);
-    assert.ok(result.warnings.some((w) => w.includes("coral")));
-  });
-});

package/src/brand-package/__tests__/emit-css.test.ts

@@ -1,130 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { emitBrandCss, emitGlobalSkinSelector } from "../emit-css";
-import type { BrandPackage } from "../types";
-
-function minimalBrand(
-  overrides: Partial<BrandPackage> & Pick<BrandPackage, "id" | "darkDefault">,
-): BrandPackage {
-  return {
-    name: overrides.name ?? overrides.id,
-    version: "1.0.0",
-    semantic: {
-      background: "0 0% 100%",
-      foreground: "0 0% 10%",
-      card: "0 0% 100%",
-      cardForeground: "0 0% 10%",
-      popover: "0 0% 100%",
-      popoverForeground: "0 0% 10%",
-      primary: "220 90% 50%",
-      primaryForeground: "0 0% 100%",
-      secondary: "0 0% 96%",
-      secondaryForeground: "0 0% 10%",
-      muted: "0 0% 96%",
-      mutedForeground: "0 0% 40%",
-      accent: "0 0% 96%",
-      accentForeground: "0 0% 10%",
-      destructive: "0 72% 51%",
-      destructiveForeground: "0 0% 100%",
-      border: "0 0% 90%",
-      input: "0 0% 100%",
-      ring: "220 90% 50%",
-    },
-    recipe: {
-      buttonDefault: "solid",
-      density: "comfortable",
-      radii: {
-        button: "0.375rem",
-        card: "0.75rem",
-        badge: "9999px",
-        input: "0.375rem",
-        pill: "9999px",
-      },
-      elevationTokens: {
-        card: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-        control: "0 0 #0000",
-        raised: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
-      },
-    },
-    typography: { fontSans: "Inter, sans-serif" },
-    ...overrides,
-  };
-}
-
-describe("emitBrandCss darkDefault binding", () => {
-  it("includes .dark only for darkDefault packs in global mode", () => {
-    const dark = emitBrandCss(minimalBrand({ id: "linear-like", darkDefault: true }));
-    assert.match(dark, /:root,\n\.dark,\nhtml\[data-brand="linear-like"\] \{/);
-
-    const light = emitBrandCss(minimalBrand({ id: "stripe-like", darkDefault: false }));
-    assert.match(light, /:root,\nhtml\[data-brand="stripe-like"\] \{/);
-    assert.doesNotMatch(light, /\.dark/);
-  });
-
-  it("scoped mode never binds :root or .dark", () => {
-    const css = emitBrandCss(minimalBrand({ id: "vanta", darkDefault: false }), { mode: "scoped" });
-    assert.match(css, /html\[data-brand="vanta"\] \{/);
-    assert.doesNotMatch(css, /:root/);
-    assert.doesNotMatch(css, /\.dark/);
-  });
-
-  it("emitGlobalSkinSelector matches darkDefault contract", () => {
-    assert.equal(emitGlobalSkinSelector("x", true), `:root,\n.dark,\nhtml[data-brand="x"] {`);
-    assert.equal(emitGlobalSkinSelector("y", false), `:root,\nhtml[data-brand="y"] {`);
-  });
-
-  it("dual-mode packs emit separate light and dark color blocks", () => {
-    const lightSemantic = minimalBrand({ id: "dual", darkDefault: false }).semantic;
-    const darkSemantic = {
-      ...lightSemantic,
-      background: "0 0% 6%",
-      foreground: "0 0% 98%",
-      card: "0 0% 10%",
-      primary: "220 90% 60%",
-    };
-    const css = emitBrandCss({
-      ...minimalBrand({ id: "dual", darkDefault: false }),
-      modes: {
-        light: { semantic: lightSemantic },
-        dark: { semantic: darkSemantic },
-      },
-    });
-    assert.match(css, /dualMode=true/);
-    assert.match(css, /:root,\nhtml\[data-brand="dual"\] \{/);
-    assert.match(css, /\.dark,\nhtml\.dark\[data-brand="dual"\] \{/);
-    assert.match(css, /--background: 0 0% 100%/); // light
-    assert.match(css, /--background: 0 0% 6%/); // dark
-    // light block must not list bare .dark in the same selector
-    assert.doesNotMatch(css, /:root,\n\.dark,\nhtml\[data-brand="dual"\]/);
-  });
-
-  it("product zone emits --text-display once with heading fallback", () => {
-    const css = emitBrandCss(
-      minimalBrand({
-        id: "zoney",
-        darkDefault: false,
-        zones: {
-          product: {
-            body: { fontSize: "16px", lineHeight: 1.5 },
-            heading: { fontSize: "24px" },
-            display: { fontSize: "32px" },
-          },
-          marketing: {
-            body: { fontSize: "18px", lineHeight: 1.5 },
-            display: { fontSize: "48px" },
-          },
-        },
-      }),
-    );
-    const productBlock = css.match(
-      /\[data-zone="product"\][\s\S]*?(?=\[data-zone="marketing"\]|$)/,
-    )?.[0];
-    assert.ok(productBlock, "expected product zone block");
-    const displayDecls = productBlock.match(/--text-display:/g) ?? [];
-    assert.equal(displayDecls.length, 1, "no duplicate --text-display in product zone");
-    assert.match(
-      productBlock,
-      /--text-display:\s*var\(--zone-product-display-size,\s*var\(--zone-product-heading-size,\s*inherit\)\)/,
-    );
-  });
-});

package/src/brand-package/apply-brand.ts

@@ -1,92 +0,0 @@
-import { emitBrandCss } from "./emit-css";
-import type { BrandPackage } from "./types";
-
-export const BRAND_STYLE_ELEMENT_ID = "nebutra-brand-skin";
-export const BRAND_STORAGE_KEY = "nebutra-brand-package";
-
-export interface ApplyBrandOptions {
-  /** Persist package JSON to localStorage for Create Center preview reload */
-  persist?: boolean;
-  /** Target document (iframe preview support) */
-  doc?: Document;
-}
-
-function targetDoc(doc?: Document): Document | null {
-  if (doc) return doc;
-  if (typeof document === "undefined") return null;
-  return document;
-}
-
-/**
- * Inject brand skin CSS at runtime (Create Center preview / tenant switch).
- * Does not require rebuilding app CSS — overrides semantic + recipe vars.
- */
-export function applyBrandCss(
-  css: string,
-  brandId?: string,
-  options: ApplyBrandOptions = {},
-): void {
-  const d = targetDoc(options.doc);
-  if (!d) return;
-
-  let el = d.getElementById(BRAND_STYLE_ELEMENT_ID) as HTMLStyleElement | null;
-  if (!el) {
-    el = d.createElement("style");
-    el.id = BRAND_STYLE_ELEMENT_ID;
-    el.setAttribute("data-nebutra-brand", brandId ?? "custom");
-    d.head.appendChild(el);
-  }
-  el.textContent = css;
-  if (brandId) {
-    d.documentElement.dataset.brand = brandId;
-  }
-}
-
-/** Apply a full Brand Package (emit CSS + optional persist). */
-export function applyBrandPackage(brand: BrandPackage, options: ApplyBrandOptions = {}): void {
-  const css = emitBrandCss(brand);
-  applyBrandCss(css, brand.id, options);
-
-  if (options.persist && typeof localStorage !== "undefined") {
-    try {
-      localStorage.setItem(BRAND_STORAGE_KEY, JSON.stringify(brand));
-    } catch {
-      // quota / private mode — ignore
-    }
-  }
-}
-
-/** Remove runtime brand skin and restore default Nebutra tokens. */
-export function clearBrand(options: ApplyBrandOptions = {}): void {
-  const d = targetDoc(options.doc);
-  if (!d) return;
-  d.getElementById(BRAND_STYLE_ELEMENT_ID)?.remove();
-  delete d.documentElement.dataset.brand;
-  if (options.persist && typeof localStorage !== "undefined") {
-    try {
-      localStorage.removeItem(BRAND_STORAGE_KEY);
-    } catch {
-      // ignore
-    }
-  }
-}
-
-/** Restore brand package previously persisted by applyBrandPackage({ persist: true }). */
-export function restorePersistedBrand(options: ApplyBrandOptions = {}): BrandPackage | null {
-  if (typeof localStorage === "undefined") return null;
-  try {
-    const raw = localStorage.getItem(BRAND_STORAGE_KEY);
-    if (!raw) return null;
-    const brand = JSON.parse(raw) as BrandPackage;
-    if (!brand?.id || !brand?.semantic || !brand?.recipe) return null;
-    applyBrandPackage(brand, { ...options, persist: false });
-    return brand;
-  } catch {
-    return null;
-  }
-}
-
-export function getActiveBrandId(doc?: Document): string | null {
-  const d = targetDoc(doc);
-  return d?.documentElement.dataset.brand ?? null;
-}