@nebutra/theme 0.2.2 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nebutra/theme
 
+## 3.0.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nebutra/tokens@3.0.0
+
+## 2.0.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nebutra/tokens@2.0.0
+
 ## 0.2.1
 
 ### Patch Changes

package/dist/brand-package-surface.d.ts

@@ -1 +1,2 @@
-export { BRAND_STORAGE_KEY, BrandPackage, BrandPackageInput, BrandRecipe, BrandRecipeInput, CompileResult, EmitBrandCssMode, EmitBrandCssOptions, ValidationResult, applyBrandCss, applyBrandPackage, applyBrandToIframe, clearBrand, compileReferoTokens, emitBrandCss, emitGlobalSkinSelector, getActiveBrandId, normalizeBrandPackage, restorePersistedBrand, useBrand, useBrandIframePreview, validateBrandPackage } from '@nebutra/tokens/brand-package';
+export { BRAND_STORAGE_KEY, BrandPackage, BrandPackageInput, BrandRecipe, BrandRecipeInput, CompileResult, EmitBrandCssMode, EmitBrandCssOptions, ValidationResult, applyBrandCss, applyBrandPackage, clearBrand, compileReferoTokens, emitBrandCss, emitGlobalSkinSelector, getActiveBrandId, normalizeBrandPackage, restorePersistedBrand, validateBrandPackage } from '@nebutra/tokens/brand-package';
+export { applyBrandToIframe, useBrand, useBrandIframePreview } from '@nebutra/tokens/use-brand';

package/dist/brand-package-surface.js

@@ -2,7 +2,6 @@
 import {
   applyBrandCss,
   applyBrandPackage,
-  applyBrandToIframe,
   BRAND_STORAGE_KEY,
   clearBrand,
   compileReferoTokens,
@@ -11,10 +10,13 @@ import {
   getActiveBrandId,
   normalizeBrandPackage,
   restorePersistedBrand,
-  useBrand,
-  useBrandIframePreview,
   validateBrandPackage
 } from "@nebutra/tokens/brand-package";
+import {
+  applyBrandToIframe,
+  useBrand,
+  useBrandIframePreview
+} from "@nebutra/tokens/use-brand";
 export {
   BRAND_STORAGE_KEY,
   applyBrandCss,

package/dist/brand-package-surface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/brand-package-surface.ts"],"sourcesContent":["/**\n * Tooling / Create Center surface — compile + iframe preview + emit.\n * Prefer `@nebutra/tokens/brand-package` in new code; this re-export keeps\n * historical `@nebutra/theme` compile entry points without bloating the root.\n */\n\nexport {\n  applyBrandCss,\n  applyBrandPackage,\n  applyBrandToIframe,\n  BRAND_STORAGE_KEY,\n  type BrandPackage,\n  type BrandPackageInput,\n  type BrandRecipe,\n  type BrandRecipeInput,\n  type CompileResult,\n  clearBrand,\n  compileReferoTokens,\n  type EmitBrandCssMode,\n  type EmitBrandCssOptions,\n  emitBrandCss,\n  emitGlobalSkinSelector,\n  getActiveBrandId,\n  normalizeBrandPackage,\n  restorePersistedBrand,\n  useBrand,\n  useBrandIframePreview,\n  type ValidationResult,\n  validateBrandPackage,\n} from \"@nebutra/tokens/brand-package\";\n"],"mappings":";AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAMA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;","names":[]}
+{"version":3,"sources":["../src/brand-package-surface.ts"],"sourcesContent":["/**\n * Tooling / Create Center surface — compile + iframe preview + emit.\n * Prefer `@nebutra/tokens/brand-package` in new code; this re-export keeps\n * historical `@nebutra/theme` compile entry points without bloating the root.\n */\n\nexport {\n  applyBrandCss,\n  applyBrandPackage,\n  BRAND_STORAGE_KEY,\n  type BrandPackage,\n  type BrandPackageInput,\n  type BrandRecipe,\n  type BrandRecipeInput,\n  type CompileResult,\n  clearBrand,\n  compileReferoTokens,\n  type EmitBrandCssMode,\n  type EmitBrandCssOptions,\n  emitBrandCss,\n  emitGlobalSkinSelector,\n  getActiveBrandId,\n  normalizeBrandPackage,\n  restorePersistedBrand,\n  type ValidationResult,\n  validateBrandPackage,\n} from \"@nebutra/tokens/brand-package\";\n\nexport {\n  applyBrandToIframe,\n  useBrand,\n  useBrandIframePreview,\n} from \"@nebutra/tokens/use-brand\";\n"],"mappings":";AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAMA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/dist/{chunk-YJGDBU5Y.js → chunk-4CNXYWPJ.js}

@@ -10,6 +10,8 @@ var languages_default = {
       name: "Nebutra Factory",
       kind: "design-language",
       description: "Default product chrome from @nebutra/tokens (no skin). Clear data-brand to restore.",
+      tagline: "the token source, unskinned",
+      shortName: "Factory",
       proves: ["factory HSL SSOT", "recipe defaults", "action\u2261brand-mark until skin"],
       darkDefault: true,
       brandPath: null,
@@ -25,11 +27,41 @@ var languages_default = {
         dataBrand: true
       }
     },
+    {
+      id: "cosmos",
+      name: "Cosmos",
+      kind: "design-language",
+      description: "Linen gallery canvas with a monochrome chrome: the filled Ink button and the brand mark are the same colour, there is no accent role at all. One 16px radius everywhere, zero elevation, serif display at weight 350.",
+      tagline: "images sit; chrome recedes",
+      shortName: "Cosmos",
+      proves: [
+        "monochrome chrome (action \u2261 brand-mark, no accent role)",
+        "single-radius system (16px everywhere; 9999px only for the floating nav)",
+        "elevation=none by contract (flat surfaces, contrast-only depth)",
+        "serif display below weight 400 (headingWeight 350)",
+        "light-first dual mode (dark inverts the gallery)"
+      ],
+      darkDefault: false,
+      brandPath: "brands/cosmos/brand.json",
+      skinPath: "skins/cosmos.css",
+      install: {
+        command: "nebutra theme use cosmos",
+        cssImport: "@nebutra/tokens/skins/cosmos.css"
+      },
+      compatibility: {
+        tailwind: "4",
+        cssVariables: true,
+        brandPackage: true,
+        dataBrand: true
+      }
+    },
     {
       id: "gsap",
       name: "GSAP",
       kind: "design-language",
       description: "Dark cream-on-void; shockingly-green is accent \u2014 CTA is gradient-stroke/outline, not solid green fill.",
+      tagline: "saturated, fast easing",
+      shortName: "GSAP",
       proves: [
         "outline / gradient-stroke recipe",
         "category extensions",
@@ -54,6 +86,8 @@ var languages_default = {
       name: "Linear",
       kind: "design-language",
       description: "Dual-mode: dark void default + light paper; solid acid-lime CTA, compact density.",
+      tagline: "tight radii, low-contrast chrome",
+      shortName: "Linear",
       proves: ["chromatic solid action", "dark product chrome", "dual-mode light/dark palettes"],
       darkDefault: true,
       brandPath: "brands/linear/brand.json",
@@ -74,6 +108,8 @@ var languages_default = {
       name: "Notion",
       kind: "design-language",
       description: "Warm paper notebook; Notion Blue sole filled CTA \u2260 Ink brand-mark; 8px buttons / 12px cards; elev=none + hairline; accent hues decorative only.",
+      tagline: "paper surfaces, muted ink",
+      shortName: "Notion",
       proves: [
         "action \u2260 brand-mark (blue vs ink)",
         "canvas\u2260card (paper-warmth vs pure-white)",
@@ -100,6 +136,8 @@ var languages_default = {
       name: "Raycast",
       kind: "design-language",
       description: "Neutral Mist/Iron filled CTA; Coral is brand-mark only. Key elevation stack.",
+      tagline: "dark glass and a coloured halo",
+      shortName: "Raycast",
       proves: ["action \u2260 brand-mark", "elevation=key free CSS"],
       darkDefault: true,
       brandPath: "brands/raycast/brand.json",
@@ -120,6 +158,8 @@ var languages_default = {
       name: "Stripe",
       kind: "design-language",
       description: "Indigo-ink ledger on frost glass; Indigo action \u2260 Midnight brand-mark; 4px controls; elevation=none (tint + frost rules).",
+      tagline: "soft elevation, generous type",
+      shortName: "Stripe",
       proves: [
         "action \u2260 brand-mark (chromatic indigo vs midnight)",
         "elevation=none tint-ladder depth",
@@ -145,6 +185,8 @@ var languages_default = {
       name: "Vanta",
       kind: "design-language",
       description: "Editorial violet on parchment; Vivid Violet action \u2260 Indigo Ink brand-mark; full pills; elevation=none (carbon hairlines).",
+      tagline: "high-trust enterprise blues",
+      shortName: "Vanta",
       proves: [
         "action \u2260 brand-mark (chromatic)",
         "elevation=none border-only",
@@ -170,6 +212,8 @@ var languages_default = {
       name: "Vercel",
       kind: "design-language",
       description: "Monochrome dual-mode: light paper + Obsidian CTA; dark carbon + white CTA; hairline elevation (no chromatic CTA).",
+      tagline: "monochrome, hard edges, lit top edge",
+      shortName: "Vercel",
       proves: ["light monochrome action", "elevation=hairline", "dual-mode light/dark palettes"],
       darkDefault: false,
       brandPath: "brands/vercel/brand.json",
@@ -212,4 +256,4 @@ export {
   getLanguageById,
   listSkinLanguages
 };
-//# sourceMappingURL=chunk-YJGDBU5Y.js.map
+//# sourceMappingURL=chunk-4CNXYWPJ.js.map

package/dist/chunk-4CNXYWPJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/languages.json","../src/languages.ts"],"sourcesContent":["{\n  \"$schema\": \"https://nebutra.com/schemas/design-language-registry.json\",\n  \"version\": \"2026.07\",\n  \"defaultLanguage\": \"factory\",\n  \"description\": \"Design-language catalog for global product chrome swap (Create Center / SaaS theme). Not color moods — full Brand Packages (roles + recipe + elev + zones).\",\n  \"languages\": [\n    {\n      \"id\": \"factory\",\n      \"name\": \"Nebutra Factory\",\n      \"kind\": \"design-language\",\n      \"description\": \"Default product chrome from @nebutra/tokens (no skin). Clear data-brand to restore.\",\n      \"tagline\": \"the token source, unskinned\",\n      \"shortName\": \"Factory\",\n      \"proves\": [\"factory HSL SSOT\", \"recipe defaults\", \"action≡brand-mark until skin\"],\n      \"darkDefault\": true,\n      \"brandPath\": null,\n      \"skinPath\": null,\n      \"install\": {\n        \"command\": \"nebutra theme use factory\",\n        \"cssImport\": null\n      },\n      \"compatibility\": {\n        \"tailwind\": \"4\",\n        \"cssVariables\": true,\n        \"brandPackage\": true,\n        \"dataBrand\": true\n      }\n    },\n    {\n      \"id\": \"cosmos\",\n      \"name\": \"Cosmos\",\n      \"kind\": \"design-language\",\n      \"description\": \"Linen gallery canvas with a monochrome chrome: the filled Ink button and the brand mark are the same colour, there is no accent role at all. One 16px radius everywhere, zero elevation, serif display at weight 350.\",\n      \"tagline\": \"images sit; chrome recedes\",\n      \"shortName\": \"Cosmos\",\n      \"proves\": [\n        \"monochrome chrome (action ≡ brand-mark, no accent role)\",\n        \"single-radius system (16px everywhere; 9999px only for the floating nav)\",\n        \"elevation=none by contract (flat surfaces, contrast-only depth)\",\n        \"serif display below weight 400 (headingWeight 350)\",\n        \"light-first dual mode (dark inverts the gallery)\"\n      ],\n      \"darkDefault\": false,\n      \"brandPath\": \"brands/cosmos/brand.json\",\n      \"skinPath\": \"skins/cosmos.css\",\n      \"install\": {\n        \"command\": \"nebutra theme use cosmos\",\n        \"cssImport\": \"@nebutra/tokens/skins/cosmos.css\"\n      },\n      \"compatibility\": {\n        \"tailwind\": \"4\",\n        \"cssVariables\": true,\n        \"brandPackage\": true,\n        \"dataBrand\": true\n      }\n    },\n    {\n      \"id\": \"gsap\",\n      \"name\": \"GSAP\",\n      \"kind\": \"design-language\",\n      \"description\": \"Dark cream-on-void; shockingly-green is accent — CTA is gradient-stroke/outline, not solid green fill.\",\n      \"tagline\": \"saturated, fast easing\",\n      \"shortName\": \"GSAP\",\n      \"proves\": [\n        \"outline / gradient-stroke recipe\",\n        \"category extensions\",\n        \"marketing display zone\"\n      ],\n      \"darkDefault\": true,\n      \"brandPath\": \"brands/gsap/brand.json\",\n      \"skinPath\": \"skins/gsap.css\",\n      \"install\": {\n        \"command\": \"nebutra theme use gsap\",\n        \"cssImport\": \"@nebutra/tokens/skins/gsap.css\"\n      },\n      \"compatibility\": {\n        \"tailwind\": \"4\",\n        \"cssVariables\": true,\n        \"brandPackage\": true,\n        \"dataBrand\": true\n      }\n    },\n    {\n      \"id\": \"linear\",\n      \"name\": \"Linear\",\n      \"kind\": \"design-language\",\n      \"description\": \"Dual-mode: dark void default + light paper; solid acid-lime CTA, compact density.\",\n      \"tagline\": \"tight radii, low-contrast chrome\",\n      \"shortName\": \"Linear\",\n      \"proves\": [\"chromatic solid action\", \"dark product chrome\", \"dual-mode light/dark palettes\"],\n      \"darkDefault\": true,\n      \"brandPath\": \"brands/linear/brand.json\",\n      \"skinPath\": \"skins/linear.css\",\n      \"install\": {\n        \"command\": \"nebutra theme use linear\",\n        \"cssImport\": \"@nebutra/tokens/skins/linear.css\"\n      },\n      \"compatibility\": {\n        \"tailwind\": \"4\",\n        \"cssVariables\": true,\n        \"brandPackage\": true,\n        \"dataBrand\": true\n      }\n    },\n    {\n      \"id\": \"notion\",\n      \"name\": \"Notion\",\n      \"kind\": \"design-language\",\n      \"description\": \"Warm paper notebook; Notion Blue sole filled CTA ≠ Ink brand-mark; 8px buttons / 12px cards; elev=none + hairline; accent hues decorative only.\",\n      \"tagline\": \"paper surfaces, muted ink\",\n      \"shortName\": \"Notion\",\n      \"proves\": [\n        \"action ≠ brand-mark (blue vs ink)\",\n        \"canvas≠card (paper-warmth vs pure-white)\",\n        \"elevation=none content cards + raised nav shadow slot\",\n        \"table radius priority (8/12 over tertiary 4px)\",\n        \"decorative accents never product CTA\"\n      ],\n      \"darkDefault\": false,\n      \"brandPath\": \"brands/notion/brand.json\",\n      \"skinPath\": \"skins/notion.css\",\n      \"install\": {\n        \"command\": \"nebutra theme use notion\",\n        \"cssImport\": \"@nebutra/tokens/skins/notion.css\"\n      },\n      \"compatibility\": {\n        \"tailwind\": \"4\",\n        \"cssVariables\": true,\n        \"brandPackage\": true,\n        \"dataBrand\": true\n      }\n    },\n    {\n      \"id\": \"raycast\",\n      \"name\": \"Raycast\",\n      \"kind\": \"design-language\",\n      \"description\": \"Neutral Mist/Iron filled CTA; Coral is brand-mark only. Key elevation stack.\",\n      \"tagline\": \"dark glass and a coloured halo\",\n      \"shortName\": \"Raycast\",\n      \"proves\": [\"action ≠ brand-mark\", \"elevation=key free CSS\"],\n      \"darkDefault\": true,\n      \"brandPath\": \"brands/raycast/brand.json\",\n      \"skinPath\": \"skins/raycast.css\",\n      \"install\": {\n        \"command\": \"nebutra theme use raycast\",\n        \"cssImport\": \"@nebutra/tokens/skins/raycast.css\"\n      },\n      \"compatibility\": {\n        \"tailwind\": \"4\",\n        \"cssVariables\": true,\n        \"brandPackage\": true,\n        \"dataBrand\": true\n      }\n    },\n    {\n      \"id\": \"stripe\",\n      \"name\": \"Stripe\",\n      \"kind\": \"design-language\",\n      \"description\": \"Indigo-ink ledger on frost glass; Indigo action ≠ Midnight brand-mark; 4px controls; elevation=none (tint + frost rules).\",\n      \"tagline\": \"soft elevation, generous type\",\n      \"shortName\": \"Stripe\",\n      \"proves\": [\n        \"action ≠ brand-mark (chromatic indigo vs midnight)\",\n        \"elevation=none tint-ladder depth\",\n        \"4px squared controls (not pill)\",\n        \"whisper heading weight 300\"\n      ],\n      \"darkDefault\": false,\n      \"brandPath\": \"brands/stripe/brand.json\",\n      \"skinPath\": \"skins/stripe.css\",\n      \"install\": {\n        \"command\": \"nebutra theme use stripe\",\n        \"cssImport\": \"@nebutra/tokens/skins/stripe.css\"\n      },\n      \"compatibility\": {\n        \"tailwind\": \"4\",\n        \"cssVariables\": true,\n        \"brandPackage\": true,\n        \"dataBrand\": true\n      }\n    },\n    {\n      \"id\": \"vanta\",\n      \"name\": \"Vanta\",\n      \"kind\": \"design-language\",\n      \"description\": \"Editorial violet on parchment; Vivid Violet action ≠ Indigo Ink brand-mark; full pills; elevation=none (carbon hairlines).\",\n      \"tagline\": \"high-trust enterprise blues\",\n      \"shortName\": \"Vanta\",\n      \"proves\": [\n        \"action ≠ brand-mark (chromatic)\",\n        \"elevation=none border-only\",\n        \"999px pill controls\",\n        \"serif display + sans UI zones\"\n      ],\n      \"darkDefault\": false,\n      \"brandPath\": \"brands/vanta/brand.json\",\n      \"skinPath\": \"skins/vanta.css\",\n      \"install\": {\n        \"command\": \"nebutra theme use vanta\",\n        \"cssImport\": \"@nebutra/tokens/skins/vanta.css\"\n      },\n      \"compatibility\": {\n        \"tailwind\": \"4\",\n        \"cssVariables\": true,\n        \"brandPackage\": true,\n        \"dataBrand\": true\n      }\n    },\n    {\n      \"id\": \"vercel\",\n      \"name\": \"Vercel\",\n      \"kind\": \"design-language\",\n      \"description\": \"Monochrome dual-mode: light paper + Obsidian CTA; dark carbon + white CTA; hairline elevation (no chromatic CTA).\",\n      \"tagline\": \"monochrome, hard edges, lit top edge\",\n      \"shortName\": \"Vercel\",\n      \"proves\": [\"light monochrome action\", \"elevation=hairline\", \"dual-mode light/dark palettes\"],\n      \"darkDefault\": false,\n      \"brandPath\": \"brands/vercel/brand.json\",\n      \"skinPath\": \"skins/vercel.css\",\n      \"install\": {\n        \"command\": \"nebutra theme use vercel\",\n        \"cssImport\": \"@nebutra/tokens/skins/vercel.css\"\n      },\n      \"compatibility\": {\n        \"tailwind\": \"4\",\n        \"cssVariables\": true,\n        \"brandPackage\": true,\n        \"dataBrand\": true\n      }\n    }\n  ]\n}\n","/**\n * Design-language catalog — the real product surface of @nebutra/theme.\n *\n * A \"language\" is a full Brand Package (roles + recipe + elev), proven by\n * external DS stress tests (Linear / GSAP / Raycast / Vercel / Vanta / Stripe / Notion).\n * Swapping `html[data-brand]` (or applyLanguage) recolors product chrome without\n * call-site edits.\n *\n * Multi-mood oklch catalog was removed. Use LANGUAGE_REGISTRY / isLanguageId only.\n */\n\n/** Generated by scripts/sync-languages.mjs from brands + languages.meta.json */\nimport languagesJson from \"./languages.json\" with { type: \"json\" };\n\nexport interface DesignLanguageInstall {\n  command: string;\n  /** Single-skin import for demos; null for factory */\n  cssImport: string | null;\n}\n\nexport interface DesignLanguageCompatibility {\n  tailwind: \"4\";\n  cssVariables: boolean;\n  brandPackage: boolean;\n  dataBrand: boolean;\n}\n\nexport interface DesignLanguageEntry {\n  id: string;\n  name: string;\n  kind: \"design-language\";\n  description: string;\n  /**\n   * One line naming what this language does, for a picker's caption. Short on\n   * purpose — `description` is the catalog entry, this is the label under eight\n   * buttons. Null for a language whose meta has not written one.\n   */\n  tagline: string | null;\n  /** Button-width label. Falls back to `name` for the languages that fit. */\n  shortName: string;\n  /** Contract proofs this fixture exercises */\n  proves: string[];\n  darkDefault: boolean;\n  /** Relative to @nebutra/tokens package root; null = factory (no override) */\n  brandPath: string | null;\n  skinPath: string | null;\n  install: DesignLanguageInstall;\n  compatibility: DesignLanguageCompatibility;\n}\n\nexport interface DesignLanguageRegistry {\n  $schema: string;\n  version: string;\n  defaultLanguage: string;\n  description: string;\n  languages: DesignLanguageEntry[];\n}\n\nexport const LANGUAGE_REGISTRY = languagesJson as DesignLanguageRegistry;\nexport const LANGUAGE_IDS = LANGUAGE_REGISTRY.languages.map((l) => l.id);\nexport const DEFAULT_LANGUAGE = LANGUAGE_REGISTRY.defaultLanguage;\n/** Alias — “theme” in product speak = design language */\nexport const BUILT_IN_LANGUAGE_IDS = LANGUAGE_IDS;\n\nexport type LanguageId = string;\n\nexport function isLanguageId(id: string): boolean {\n  return LANGUAGE_IDS.includes(id);\n}\n\nexport function getLanguageById(id: string): DesignLanguageEntry | undefined {\n  return LANGUAGE_REGISTRY.languages.find((l) => l.id === id);\n}\n\n/** Fixture languages that ship a Brand Package (excludes factory). */\nexport function listSkinLanguages(): DesignLanguageEntry[] {\n  return LANGUAGE_REGISTRY.languages.filter((l) => l.brandPath != null);\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-ZSOVG5W4.js → chunk-XDRU7ACJ.js}

@@ -1,9 +1,10 @@
 import {
   getLanguageById
-} from "./chunk-YJGDBU5Y.js";
+} from "./chunk-4CNXYWPJ.js";
 
 // src/built-in-packages.generated.ts
 import { normalizeBrandPackage } from "@nebutra/tokens/brand-package";
+import cosmos from "@nebutra/tokens/brands/cosmos/brand.json";
 import gsap from "@nebutra/tokens/brands/gsap/brand.json";
 import linear from "@nebutra/tokens/brands/linear/brand.json";
 import notion from "@nebutra/tokens/brands/notion/brand.json";
@@ -12,6 +13,7 @@ import stripe from "@nebutra/tokens/brands/stripe/brand.json";
 import vanta from "@nebutra/tokens/brands/vanta/brand.json";
 import vercel from "@nebutra/tokens/brands/vercel/brand.json";
 var RAW_BUILT_IN = {
+  cosmos,
   gsap,
   linear,
   notion,
@@ -86,4 +88,4 @@ export {
   clearLanguage,
   getActiveLanguageId
 };
-//# sourceMappingURL=chunk-ZSOVG5W4.js.map
+//# sourceMappingURL=chunk-XDRU7ACJ.js.map

package/dist/chunk-XDRU7ACJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/built-in-packages.generated.ts","../src/apply-language.ts"],"sourcesContent":["/**\n * AUTO-GENERATED by scripts/sync-languages.mjs — DO NOT EDIT.\n * Built-in Brand Packages for applyLanguage(id) without manual JSON import.\n * Source: packages/design/tokens/brands/<id>/brand.json\n */\n\nimport { type BrandPackage, normalizeBrandPackage } from \"@nebutra/tokens/brand-package\";\nimport cosmos from \"@nebutra/tokens/brands/cosmos/brand.json\" with { type: \"json\" };\nimport gsap from \"@nebutra/tokens/brands/gsap/brand.json\" with { type: \"json\" };\nimport linear from \"@nebutra/tokens/brands/linear/brand.json\" with { type: \"json\" };\nimport notion from \"@nebutra/tokens/brands/notion/brand.json\" with { type: \"json\" };\nimport raycast from \"@nebutra/tokens/brands/raycast/brand.json\" with { type: \"json\" };\nimport stripe from \"@nebutra/tokens/brands/stripe/brand.json\" with { type: \"json\" };\nimport vanta from \"@nebutra/tokens/brands/vanta/brand.json\" with { type: \"json\" };\nimport vercel from \"@nebutra/tokens/brands/vercel/brand.json\" with { type: \"json\" };\n\nconst RAW_BUILT_IN: Record<string, BrandPackage> = {\n  cosmos: cosmos as BrandPackage,\n  gsap: gsap as BrandPackage,\n  linear: linear as BrandPackage,\n  notion: notion as BrandPackage,\n  raycast: raycast as BrandPackage,\n  stripe: stripe as BrandPackage,\n  vanta: vanta as BrandPackage,\n  vercel: vercel as BrandPackage,\n};\n\n/** Normalized package for a shipped design-language id, or undefined. */\nexport function getBuiltInBrandPackage(id: string): BrandPackage | undefined {\n  const raw = RAW_BUILT_IN[id];\n  if (!raw) return undefined;\n  return normalizeBrandPackage({ ...raw, id });\n}\n\nexport function listBuiltInBrandIds(): string[] {\n  return Object.keys(RAW_BUILT_IN);\n}\n\nexport function hasBuiltInBrandPackage(id: string): boolean {\n  return id in RAW_BUILT_IN;\n}\n","/**\n * Runtime design-language switch — Create Center / SaaS global theme swap.\n *\n * Light/dark remains class=\"dark\" on @nebutra/tokens ThemeProvider.\n * Design language is html[data-brand] + Brand Package CSS inject.\n *\n * Built-in languages load Brand Packages automatically; pass `package` only for\n * custom / compile-time packages (Create Center preview).\n */\n\nimport {\n  type ApplyBrandOptions,\n  applyBrandPackage,\n  type BrandPackage,\n  clearBrand,\n  getActiveBrandId,\n  normalizeBrandPackage,\n  validateBrandPackage,\n} from \"@nebutra/tokens/brand-package\";\nimport { getBuiltInBrandPackage } from \"./built-in-packages\";\nimport { type DesignLanguageEntry, getLanguageById } from \"./languages\";\n\nexport type { ApplyBrandOptions };\n\nexport interface ApplyLanguageOptions extends ApplyBrandOptions {\n  /**\n   * Preloaded Brand Package (Create Center compile result or override).\n   * When omitted, built-in languages resolve from brands/<id>/brand.json.\n   */\n  package?: BrandPackage;\n}\n\n/**\n * Apply a design language by id.\n * - `factory` / unknown without package → clearBrand (tokens SSOT)\n * - built-in id without package → load shipped Brand Package\n * - with `package` → applyBrandPackage (full carrier swap)\n */\nexport function applyLanguage(\n  languageId: string,\n  options: ApplyLanguageOptions = {},\n): DesignLanguageEntry | null {\n  const entry = getLanguageById(languageId);\n\n  if (!entry || entry.id === \"factory\" || entry.brandPath == null) {\n    if (options.package) {\n      const v = validateBrandPackage(options.package);\n      if (!v.ok) {\n        throw new Error(`Invalid Brand Package: ${v.errors.join(\"; \")}`);\n      }\n      applyBrandPackage(normalizeBrandPackage(options.package), options);\n      return entry ?? null;\n    }\n    clearBrand(options);\n    return entry ?? getLanguageById(\"factory\") ?? null;\n  }\n\n  const pkg = options.package ?? getBuiltInBrandPackage(languageId);\n  if (!pkg) {\n    throw new Error(\n      `Language \"${languageId}\" has no built-in Brand Package and no options.package. ` +\n        `Load @nebutra/tokens/${entry.brandPath} or compileReferoTokens(), then ` +\n        `applyLanguage(\"${languageId}\", { package }). ` +\n        `Or import the single skin CSS: ${entry.install.cssImport ?? \"(none)\"}.`,\n    );\n  }\n\n  const v = validateBrandPackage(pkg);\n  if (!v.ok) {\n    throw new Error(`Invalid Brand Package for ${languageId}: ${v.errors.join(\"; \")}`);\n  }\n  const normalized = normalizeBrandPackage({\n    ...pkg,\n    id: languageId,\n  });\n  applyBrandPackage(normalized, options);\n  return entry;\n}\n\n/** Restore factory product chrome (clear data-brand + injected skin). */\nexport function clearLanguage(options: ApplyBrandOptions = {}): void {\n  clearBrand(options);\n}\n\nexport function getActiveLanguageId(doc?: Document): string {\n  return getActiveBrandId(doc) ?? \"factory\";\n}\n"],"mappings":";;;;;AAMA,SAA4B,6BAA6B;AACzD,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,OAAO,YAAY;AACnB,OAAO,YAAY;AACnB,OAAO,aAAa;AACpB,OAAO,YAAY;AACnB,OAAO,WAAW;AAClB,OAAO,YAAY;AAEnB,IAAM,eAA6C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,SAAS,uBAAuB,IAAsC;AAC3E,QAAM,MAAM,aAAa,EAAE;AAC3B,MAAI,CAAC,IAAK,QAAO;AACjB,SAAO,sBAAsB,EAAE,GAAG,KAAK,GAAG,CAAC;AAC7C;AAEO,SAAS,sBAAgC;AAC9C,SAAO,OAAO,KAAK,YAAY;AACjC;AAEO,SAAS,uBAAuB,IAAqB;AAC1D,SAAO,MAAM;AACf;;;AC9BA;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA,yBAAAA;AAAA,EACA;AAAA,OACK;AAoBA,SAAS,cACd,YACA,UAAgC,CAAC,GACL;AAC5B,QAAM,QAAQ,gBAAgB,UAAU;AAExC,MAAI,CAAC,SAAS,MAAM,OAAO,aAAa,MAAM,aAAa,MAAM;AAC/D,QAAI,QAAQ,SAAS;AACnB,YAAMC,KAAI,qBAAqB,QAAQ,OAAO;AAC9C,UAAI,CAACA,GAAE,IAAI;AACT,cAAM,IAAI,MAAM,0BAA0BA,GAAE,OAAO,KAAK,IAAI,CAAC,EAAE;AAAA,MACjE;AACA,wBAAkBC,uBAAsB,QAAQ,OAAO,GAAG,OAAO;AACjE,aAAO,SAAS;AAAA,IAClB;AACA,eAAW,OAAO;AAClB,WAAO,SAAS,gBAAgB,SAAS,KAAK;AAAA,EAChD;AAEA,QAAM,MAAM,QAAQ,WAAW,uBAAuB,UAAU;AAChE,MAAI,CAAC,KAAK;AACR,UAAM,IAAI;AAAA,MACR,aAAa,UAAU,gFACG,MAAM,SAAS,kDACrB,UAAU,mDACM,MAAM,QAAQ,aAAa,QAAQ;AAAA,IACzE;AAAA,EACF;AAEA,QAAM,IAAI,qBAAqB,GAAG;AAClC,MAAI,CAAC,EAAE,IAAI;AACT,UAAM,IAAI,MAAM,6BAA6B,UAAU,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,EAAE;AAAA,EACnF;AACA,QAAM,aAAaA,uBAAsB;AAAA,IACvC,GAAG;AAAA,IACH,IAAI;AAAA,EACN,CAAC;AACD,oBAAkB,YAAY,OAAO;AACrC,SAAO;AACT;AAGO,SAAS,cAAc,UAA6B,CAAC,GAAS;AACnE,aAAW,OAAO;AACpB;AAEO,SAAS,oBAAoB,KAAwB;AAC1D,SAAO,iBAAiB,GAAG,KAAK;AAClC;","names":["normalizeBrandPackage","v","normalizeBrandPackage"]}

package/dist/client.d.ts

@@ -1,3 +1,45 @@
+import { ApplyBrandOptions, BrandPackage } from '@nebutra/tokens/brand-package';
 export { BrandPackage, applyBrandPackage, clearBrand, normalizeBrandPackage } from '@nebutra/tokens/brand-package';
-export { ApplyLanguageOptions, applyLanguage, clearLanguage, getActiveLanguageId, getBuiltInBrandPackage, hasBuiltInBrandPackage, listBuiltInBrandIds } from './index.js';
-export { BUILT_IN_LANGUAGE_IDS, DEFAULT_LANGUAGE, DesignLanguageEntry, DesignLanguageRegistry, LANGUAGE_IDS, LANGUAGE_REGISTRY, getLanguageById, isLanguageId, listSkinLanguages } from './languages.js';
+import { DesignLanguageEntry } from './languages.js';
+export { BUILT_IN_LANGUAGE_IDS, DEFAULT_LANGUAGE, DesignLanguageRegistry, LANGUAGE_IDS, LANGUAGE_REGISTRY, getLanguageById, isLanguageId, listSkinLanguages } from './languages.js';
+
+/**
+ * Runtime design-language switch — Create Center / SaaS global theme swap.
+ *
+ * Light/dark remains class="dark" on @nebutra/tokens ThemeProvider.
+ * Design language is html[data-brand] + Brand Package CSS inject.
+ *
+ * Built-in languages load Brand Packages automatically; pass `package` only for
+ * custom / compile-time packages (Create Center preview).
+ */
+
+interface ApplyLanguageOptions extends ApplyBrandOptions {
+    /**
+     * Preloaded Brand Package (Create Center compile result or override).
+     * When omitted, built-in languages resolve from brands/<id>/brand.json.
+     */
+    package?: BrandPackage;
+}
+/**
+ * Apply a design language by id.
+ * - `factory` / unknown without package → clearBrand (tokens SSOT)
+ * - built-in id without package → load shipped Brand Package
+ * - with `package` → applyBrandPackage (full carrier swap)
+ */
+declare function applyLanguage(languageId: string, options?: ApplyLanguageOptions): DesignLanguageEntry | null;
+/** Restore factory product chrome (clear data-brand + injected skin). */
+declare function clearLanguage(options?: ApplyBrandOptions): void;
+declare function getActiveLanguageId(doc?: Document): string;
+
+/**
+ * AUTO-GENERATED by scripts/sync-languages.mjs — DO NOT EDIT.
+ * Built-in Brand Packages for applyLanguage(id) without manual JSON import.
+ * Source: packages/design/tokens/brands/<id>/brand.json
+ */
+
+/** Normalized package for a shipped design-language id, or undefined. */
+declare function getBuiltInBrandPackage(id: string): BrandPackage | undefined;
+declare function listBuiltInBrandIds(): string[];
+declare function hasBuiltInBrandPackage(id: string): boolean;
+
+export { type ApplyLanguageOptions, DesignLanguageEntry, applyLanguage, clearLanguage, getActiveLanguageId, getBuiltInBrandPackage, hasBuiltInBrandPackage, listBuiltInBrandIds };

package/dist/client.js

@@ -5,7 +5,7 @@ import {
   getBuiltInBrandPackage,
   hasBuiltInBrandPackage,
   listBuiltInBrandIds
-} from "./chunk-ZSOVG5W4.js";
+} from "./chunk-XDRU7ACJ.js";
 import {
   BUILT_IN_LANGUAGE_IDS,
   DEFAULT_LANGUAGE,
@@ -14,7 +14,7 @@ import {
   getLanguageById,
   isLanguageId,
   listSkinLanguages
-} from "./chunk-YJGDBU5Y.js";
+} from "./chunk-4CNXYWPJ.js";
 
 // src/client.ts
 import {

package/dist/index.d.ts

@@ -1,45 +1,11 @@
-import { ApplyBrandOptions, BrandPackage } from '@nebutra/tokens/brand-package';
 export { ApplyBrandOptions, BrandPackage, ValidationResult, applyBrandPackage, clearBrand, getActiveBrandId, normalizeBrandPackage, validateBrandPackage } from '@nebutra/tokens/brand-package';
-import { DesignLanguageEntry } from './languages.js';
-export { BUILT_IN_LANGUAGE_IDS, DEFAULT_LANGUAGE, DesignLanguageCompatibility, DesignLanguageInstall, DesignLanguageRegistry, LANGUAGE_IDS, LANGUAGE_REGISTRY, LanguageId, getLanguageById, isLanguageId, listSkinLanguages } from './languages.js';
+export { ApplyLanguageOptions, applyLanguage, clearLanguage, getActiveLanguageId, getBuiltInBrandPackage, hasBuiltInBrandPackage, listBuiltInBrandIds } from './client.js';
+export { BUILT_IN_LANGUAGE_IDS, DEFAULT_LANGUAGE, DesignLanguageCompatibility, DesignLanguageEntry, DesignLanguageInstall, DesignLanguageRegistry, LANGUAGE_IDS, LANGUAGE_REGISTRY, LanguageId, getLanguageById, isLanguageId, listSkinLanguages } from './languages.js';
 
 /**
- * Runtime design-language switch — Create Center / SaaS global theme swap.
- *
- * Light/dark remains class="dark" on @nebutra/tokens ThemeProvider.
- * Design language is html[data-brand] + Brand Package CSS inject.
- *
- * Built-in languages load Brand Packages automatically; pass `package` only for
- * custom / compile-time packages (Create Center preview).
+ * `null` until mounted, so a caller can hold the server markup for one paint
+ * rather than guess and flip. The channels only exist once CSS has applied.
  */
+declare function useDarkSurface(): boolean | null;
 
-interface ApplyLanguageOptions extends ApplyBrandOptions {
-    /**
-     * Preloaded Brand Package (Create Center compile result or override).
-     * When omitted, built-in languages resolve from brands/<id>/brand.json.
-     */
-    package?: BrandPackage;
-}
-/**
- * Apply a design language by id.
- * - `factory` / unknown without package → clearBrand (tokens SSOT)
- * - built-in id without package → load shipped Brand Package
- * - with `package` → applyBrandPackage (full carrier swap)
- */
-declare function applyLanguage(languageId: string, options?: ApplyLanguageOptions): DesignLanguageEntry | null;
-/** Restore factory product chrome (clear data-brand + injected skin). */
-declare function clearLanguage(options?: ApplyBrandOptions): void;
-declare function getActiveLanguageId(doc?: Document): string;
-
-/**
- * AUTO-GENERATED by scripts/sync-languages.mjs — DO NOT EDIT.
- * Built-in Brand Packages for applyLanguage(id) without manual JSON import.
- * Source: packages/design/tokens/brands/<id>/brand.json
- */
-
-/** Normalized package for a shipped design-language id, or undefined. */
-declare function getBuiltInBrandPackage(id: string): BrandPackage | undefined;
-declare function listBuiltInBrandIds(): string[];
-declare function hasBuiltInBrandPackage(id: string): boolean;
-
-export { type ApplyLanguageOptions, DesignLanguageEntry, applyLanguage, clearLanguage, getActiveLanguageId, getBuiltInBrandPackage, hasBuiltInBrandPackage, listBuiltInBrandIds };
+export { useDarkSurface };

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   getBuiltInBrandPackage,
   hasBuiltInBrandPackage,
   listBuiltInBrandIds
-} from "./chunk-ZSOVG5W4.js";
+} from "./chunk-XDRU7ACJ.js";
 import {
   BUILT_IN_LANGUAGE_IDS,
   DEFAULT_LANGUAGE,
@@ -14,7 +14,7 @@ import {
   getLanguageById,
   isLanguageId,
   listSkinLanguages
-} from "./chunk-YJGDBU5Y.js";
+} from "./chunk-4CNXYWPJ.js";
 
 // src/index.ts
 import {
@@ -24,6 +24,35 @@ import {
   normalizeBrandPackage,
   validateBrandPackage
 } from "@nebutra/tokens/brand-package";
+
+// src/use-dark-surface.ts
+import * as React from "react";
+var DARK_THRESHOLD = 50;
+function readCanvasLightness() {
+  if (typeof document === "undefined") return null;
+  const raw = getComputedStyle(document.documentElement).getPropertyValue("--background").trim();
+  const lightness = raw.split(/\s+/)[2];
+  if (!lightness) return null;
+  const parsed = Number.parseFloat(lightness);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+function useDarkSurface() {
+  const [isDark, setIsDark] = React.useState(null);
+  React.useEffect(() => {
+    const sync = () => {
+      const lightness = readCanvasLightness();
+      setIsDark(lightness === null ? null : lightness < DARK_THRESHOLD);
+    };
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-brand", "data-theme", "style"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return isDark;
+}
 export {
   BUILT_IN_LANGUAGE_IDS,
   DEFAULT_LANGUAGE,
@@ -42,6 +71,7 @@ export {
   listBuiltInBrandIds,
   listSkinLanguages,
   normalizeBrandPackage,
+  useDarkSurface,
   validateBrandPackage
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @nebutra/theme — Design-language switch surface (client-safe root)\n *\n * Root exports are intentionally lean for app bundles:\n *   applyLanguage / LANGUAGE_REGISTRY / built-in packages\n *\n * Light/dark ThemeProvider: import from `@nebutra/tokens` only (not here).\n *\n * Compile & Create Center tooling:\n *   @nebutra/tokens/brand-package  (preferred)\n *   @nebutra/theme/brand-package   (re-export alias)\n *\n * Layers:\n *   @nebutra/tokens  product chrome SSOT (styles.css + recipe.css + ThemeProvider)\n *   @nebutra/theme   LANGUAGE_REGISTRY + applyLanguage + skins.css\n */\n\n// Re-export apply helpers used with applyLanguage({ package })\nexport {\n  type ApplyBrandOptions,\n  applyBrandPackage,\n  type BrandPackage,\n  clearBrand,\n  getActiveBrandId,\n  normalizeBrandPackage,\n  type ValidationResult,\n  validateBrandPackage,\n} from \"@nebutra/tokens/brand-package\";\nexport {\n  type ApplyLanguageOptions,\n  applyLanguage,\n  clearLanguage,\n  getActiveLanguageId,\n} from \"./apply-language\";\nexport {\n  getBuiltInBrandPackage,\n  hasBuiltInBrandPackage,\n  listBuiltInBrandIds,\n} from \"./built-in-packages\";\nexport {\n  BUILT_IN_LANGUAGE_IDS,\n  DEFAULT_LANGUAGE,\n  type DesignLanguageCompatibility,\n  type DesignLanguageEntry,\n  type DesignLanguageInstall,\n  type DesignLanguageRegistry,\n  getLanguageById,\n  isLanguageId,\n  LANGUAGE_IDS,\n  LANGUAGE_REGISTRY,\n  type LanguageId,\n  listSkinLanguages,\n} from \"./languages\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/use-dark-surface.ts"],"sourcesContent":["/**\n * @nebutra/theme — Design-language switch surface (client-safe root)\n *\n * Root exports are intentionally lean for app bundles:\n *   applyLanguage / LANGUAGE_REGISTRY / built-in packages\n *\n * Light/dark ThemeProvider: import from `@nebutra/tokens` only (not here).\n *\n * Compile & Create Center tooling:\n *   @nebutra/tokens/brand-package  (preferred)\n *   @nebutra/theme/brand-package   (re-export alias)\n *\n * Layers:\n *   @nebutra/tokens  product chrome SSOT (styles.css + recipe.css + ThemeProvider)\n *   @nebutra/theme   LANGUAGE_REGISTRY + applyLanguage + skins.css\n */\n\n// Re-export apply helpers used with applyLanguage({ package })\nexport {\n  type ApplyBrandOptions,\n  applyBrandPackage,\n  type BrandPackage,\n  clearBrand,\n  getActiveBrandId,\n  normalizeBrandPackage,\n  type ValidationResult,\n  validateBrandPackage,\n} from \"@nebutra/tokens/brand-package\";\nexport {\n  type ApplyLanguageOptions,\n  applyLanguage,\n  clearLanguage,\n  getActiveLanguageId,\n} from \"./apply-language\";\nexport {\n  getBuiltInBrandPackage,\n  hasBuiltInBrandPackage,\n  listBuiltInBrandIds,\n} from \"./built-in-packages\";\nexport {\n  BUILT_IN_LANGUAGE_IDS,\n  DEFAULT_LANGUAGE,\n  type DesignLanguageCompatibility,\n  type DesignLanguageEntry,\n  type DesignLanguageInstall,\n  type DesignLanguageRegistry,\n  getLanguageById,\n  isLanguageId,\n  LANGUAGE_IDS,\n  LANGUAGE_REGISTRY,\n  type LanguageId,\n  listSkinLanguages,\n} from \"./languages\";\nexport { useDarkSurface } from \"./use-dark-surface\";\n","\"use client\";\n\n/**\n * Is the surface actually dark, whatever the theme is called?\n *\n * Components that flip an asset for a dark background — an inverted wordmark, a\n * mono logomark — asked `resolvedTheme !== \"light\"`. That was the same question\n * as long as the only way to get a dark canvas was the theme toggle. Design\n * languages broke the equivalence: gsap, linear and raycast paint a dark canvas\n * while the theme is still light, so the navbar rendered the dark wordmark on\n * the dark canvas and the logo disappeared.\n *\n * The canvas knows. `--background` holds the bare HSL channels the active skin\n * resolved to, and its third component is the lightness — one reading answers\n * for the theme, the design language, and any combination of the two, including\n * ones that do not exist yet.\n */\n\nimport * as React from \"react\";\n\n/** Lightness below this reads as a dark surface. */\nconst DARK_THRESHOLD = 50;\n\nfunction readCanvasLightness(): number | null {\n  if (typeof document === \"undefined\") return null;\n  const raw = getComputedStyle(document.documentElement).getPropertyValue(\"--background\").trim();\n  // \"222 47% 11%\" — the shadcn-style tokens are channels, not colours.\n  const lightness = raw.split(/\\s+/)[2];\n  if (!lightness) return null;\n  const parsed = Number.parseFloat(lightness);\n  return Number.isFinite(parsed) ? parsed : null;\n}\n\n/**\n * `null` until mounted, so a caller can hold the server markup for one paint\n * rather than guess and flip. The channels only exist once CSS has applied.\n */\nexport function useDarkSurface(): boolean | null {\n  const [isDark, setIsDark] = React.useState<boolean | null>(null);\n\n  React.useEffect(() => {\n    const sync = () => {\n      const lightness = readCanvasLightness();\n      setIsDark(lightness === null ? null : lightness < DARK_THRESHOLD);\n    };\n    sync();\n\n    // Both switches land on <html>: next-themes writes `class`, the language\n    // switcher writes `data-brand`. Watching the element covers either without\n    // knowing which one moved.\n    const observer = new MutationObserver(sync);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-brand\", \"data-theme\", \"style\"],\n    });\n    return () => observer.disconnect();\n  }, []);\n\n  return isDark;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;;;ACTP,YAAY,WAAW;AAGvB,IAAM,iBAAiB;AAEvB,SAAS,sBAAqC;AAC5C,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAM,MAAM,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAc,EAAE,KAAK;AAE7F,QAAM,YAAY,IAAI,MAAM,KAAK,EAAE,CAAC;AACpC,MAAI,CAAC,UAAW,QAAO;AACvB,QAAM,SAAS,OAAO,WAAW,SAAS;AAC1C,SAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AAC5C;AAMO,SAAS,iBAAiC;AAC/C,QAAM,CAAC,QAAQ,SAAS,IAAU,eAAyB,IAAI;AAE/D,EAAM,gBAAU,MAAM;AACpB,UAAM,OAAO,MAAM;AACjB,YAAM,YAAY,oBAAoB;AACtC,gBAAU,cAAc,OAAO,OAAO,YAAY,cAAc;AAAA,IAClE;AACA,SAAK;AAKL,UAAM,WAAW,IAAI,iBAAiB,IAAI;AAC1C,aAAS,QAAQ,SAAS,iBAAiB;AAAA,MACzC,YAAY;AAAA,MACZ,iBAAiB,CAAC,SAAS,cAAc,cAAc,OAAO;AAAA,IAChE,CAAC;AACD,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;","names":[]}

package/dist/language-switcher.d.ts

@@ -0,0 +1,62 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DesignLanguageEntry } from './languages.js';
+
+/** Catalog order, factory first — it is the way back. */
+declare const LANGUAGES: DesignLanguageEntry[];
+/**
+ * Flip the language, with the change animated rather than cut.
+ *
+ * The attribute swap rewrites some two hundred custom properties in one frame,
+ * and custom properties do not interpolate — so the whole page used to change
+ * between two frames and read as a reload. The properties that *read* those
+ * variables do interpolate, so a blanket transition is armed just before the
+ * flip and disarmed after: alive for the length of the change and no longer,
+ * because leaving it on would put 400ms of lag on every hover afterwards.
+ *
+ * Where the browser has view transitions, they replace that entirely. A
+ * cross-fade carries the discrete changes a property transition cannot — the
+ * typeface, gradients with different stop counts, shadow stacks of different
+ * lengths — because by then they are pixels rather than properties. Only one of
+ * the two ever runs: both together animate the same change twice, and two clocks
+ * beating against each other is its own kind of jitter.
+ *
+ * `requestAnimationFrame` before writing the attribute matters on the fallback
+ * path — set the class and the attribute in the same frame and the browser has
+ * no previous computed value to transition from, so it cuts anyway.
+ */
+declare function applyLanguageAttribute(id: string, animate?: boolean): void;
+/**
+ * Shared state for every mounted switcher.
+ *
+ * The state lives on the document element rather than in any one component, so
+ * two mounted controls broadcast to each other instead of each keeping a private
+ * copy that goes stale the moment the other is clicked.
+ */
+declare function useDesignLanguage(): {
+    active: string;
+    select: (id: string) => void;
+    ready: boolean;
+};
+interface DesignLanguageSwitcherProps {
+    className?: string;
+    /** `compact` for a header rail, `picker` for a primary on-page control. */
+    variant?: "compact" | "picker";
+    /** Shown under a `picker`: names the active language and what it changes. */
+    caption?: boolean;
+    /**
+     * Visible "Design language" label. Off where the surrounding surface already
+     * says it — on the marketing card the legend sat directly under a heading
+     * reading the same thing. Still rendered for assistive tech either way.
+     */
+    showLegend?: boolean;
+}
+/**
+ * Eight buttons and, optionally, a line saying what the current one does.
+ *
+ * Deliberately built from plain elements rather than the component library: this
+ * ships inside the package that defines the languages, and a control that
+ * re-skins itself mid-press is a distraction from the page it is re-skinning.
+ */
+declare function DesignLanguageSwitcher({ className, variant, caption, showLegend, }: DesignLanguageSwitcherProps): react_jsx_runtime.JSX.Element;
+
+export { DesignLanguageSwitcher, type DesignLanguageSwitcherProps, LANGUAGES, applyLanguageAttribute, useDesignLanguage };