@epilot/volt-ui-experimental-griffel 0.2.3 → 0.3.1

package/dist/tokens/install.js.map

@@ -1 +1 @@
-{"version":3,"file":"install.js","sources":["../../src/tokens/install.ts"],"sourcesContent":["import { ensureSheet, __resetInstalledSheets } from \"@epilot/volt-ui-runtime\"\nimport { CSS as CORE_CSS, SHEET_HASH as CORE_HASH } from \"./core.generated\"\nimport {\n  CSS as PALETTE_CSS,\n  SHEET_HASH as PALETTE_HASH,\n} from \"./palette.generated\"\n\n/**\n * Token sheet delivery.\n *\n * Each sheet is keyed by the hash of its own CONTENT, so N copies of the same version insert it\n * once, and two builds with different token values coexist as two sheets. Crucially, the values\n * cannot fight: property NAMES carry a value-derived namespace segment, so different values mean\n * different names. That is what lets both sheets sit on `:root` — the PoC originally salted only\n * the CLASS namespace and measured exactly this defect, with two divergent builds rendering the\n * same colour and the winner decided by MFE load order.\n *\n * Two sheets rather than one, per DECISIONS.md D5. Core carries the semantic layer for the intent\n * families plus the owned scale; palette carries the decorative families, which are reachable only\n * through a consumer-facing `color` prop. `ensurePalette()` is called by the components that expose\n * one, so a consumer using only Dialog, Field and Tooltip never ships or inserts it.\n *\n * The PoC also modelled a `host` delivery variant — root-config ships the sheet, like today's\n * singleton `style.css` link. Not carried: it reintroduces the failure this architecture exists to\n * remove (a missing or stale host sheet unstyles every v2 MFE at once) and it requires a breaking\n * host change deployed ahead of the package.\n *\n * Note what did NOT move when the engine did. `ensureSheet` is the runtime's, because placement is\n * anchor-relative and the anchor is shared. The CSS below is this package's, because it is exactly\n * the thing that must differ between two co-resident versions. That is the same line the `host`\n * variant above got wrong, drawn one level further in.\n */\n\n/** Test-only: forget what this module thinks it has installed. */\nexport function __resetTokensForTests(): void {\n  __resetInstalledSheets()\n}\n\nexport function ensureCoreTokens(doc: Document = document): boolean {\n  return ensureSheet(doc, CORE_HASH, CORE_CSS)\n}\n\n/**\n * Called by components that accept a `color` prop, since a decorative family can arrive from a\n * runtime expression the build cannot see — `getColorForEntityLabel(label)` and\n * `WCAG_BADGE_MAP[level].color` both exist in consumer code today.\n */\nexport function ensurePaletteTokens(doc: Document = document): boolean {\n  return ensureSheet(doc, PALETTE_HASH, PALETTE_CSS)\n}\n\n/**\n * The families the CORE sheet declares. Everything else is decorative and lives in the palette\n * sheet. `core-families.test.ts` asserts this list against the generated sheets in both directions, so a\n * family moving between them cannot silently invalidate the check below.\n */\nconst CORE_FAMILIES = new Set([\n  \"accent\",\n  \"gray\",\n  \"error\",\n  \"info\",\n  \"success\",\n  \"warning\",\n])\n\n/**\n * Install the palette sheet only if this family actually needs it.\n *\n * The unconditional call was measured as the single most expensive thing a `color`-prop component\n * does: the palette sheet is 63,689 B of CSS, and a differential build put `Pill`'s marginal cost at\n * 69,087 B raw against `Button`'s 6,330 B. The flows pilot separately measured 69,787 B of runtime\n * token CSS in the document for a two-component consumer, 18× the 3,814 B of actual atoms.\n *\n * Passing the resolved family keeps the correctness the unconditional call was protecting. The\n * hazard it guarded against is a family arriving from an expression the BUILD cannot see; by render\n * time the value is in hand, so a dynamic `getColorForEntityLabel(label)` that returns `teal` still\n * installs the sheet before paint. What goes away is installing it for `accent` or `gray`.\n *\n * This does NOT reduce bundle size. `ensurePaletteTokens` stays referenced, so the sheet is still\n * emitted into any chunk that contains one of these components — cutting that needs build-time\n * knowledge of which families a consumer uses, which the package cannot have. See DECISIONS D14.\n */\nexport function ensurePaletteTokensFor(\n  family: string,\n  doc: Document = document\n): boolean {\n  if (CORE_FAMILIES.has(family)) return false\n\n  return ensurePaletteTokens(doc)\n}\n\nexport const TOKEN_SHEET_HASHES = {\n  core: CORE_HASH,\n  palette: PALETTE_HASH,\n} as const\n"],"names":["ensureCoreTokens","doc","ensureSheet","CORE_HASH","CORE_CSS","ensurePaletteTokens","PALETTE_HASH","PALETTE_CSS","CORE_FAMILIES","ensurePaletteTokensFor","family"],"mappings":";;;AAsCO,SAASA,EAAiBC,IAAgB,UAAmB;AAClE,SAAOC,EAAYD,GAAKE,GAAWC,CAAQ;AAC7C;AAOO,SAASC,EAAoBJ,IAAgB,UAAmB;AACrE,SAAOC,EAAYD,GAAKK,GAAcC,CAAW;AACnD;AAOA,MAAMC,wBAAoB,IAAI;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAmBM,SAASC,EACdC,GACAT,IAAgB,UACP;AACT,SAAIO,EAAc,IAAIE,CAAM,IAAU,KAE/BL,EAAoBJ,CAAG;AAChC;"}
+{"version":3,"file":"install.js","sources":["../../src/tokens/install.ts"],"sourcesContent":["import { ensureSheet, __resetInstalledSheets } from \"@epilot/volt-ui-runtime\"\nimport { CSS as CORE_CSS, SHEET_HASH as CORE_HASH } from \"./core.generated\"\nimport {\n  CSS as PALETTE_CSS,\n  SHEET_HASH as PALETTE_HASH,\n} from \"./palette.generated\"\n\n/**\n * Token sheet delivery.\n *\n * Each sheet is keyed by the hash of its own CONTENT, so N copies of the same version insert it\n * once, and two builds with different token values coexist as two sheets. Crucially, the values\n * cannot fight: property NAMES carry a value-derived namespace segment, so different values mean\n * different names. That is what lets both sheets sit on `:root` — the PoC originally salted only\n * the CLASS namespace and measured exactly this defect, with two divergent builds rendering the\n * same colour and the winner decided by MFE load order.\n *\n * Two sheets rather than one, per DECISIONS.md D5. Core carries the semantic layer for the intent\n * families plus the owned scale; palette carries the decorative families, which are reachable only\n * through a consumer-facing `color` prop. `ensurePalette()` is called by the components that expose\n * one, so a consumer using only Dialog, Field and Tooltip never ships or inserts it.\n *\n * The PoC also modelled a `host` delivery variant — root-config ships the sheet, like today's\n * singleton `style.css` link. Not carried: it reintroduces the failure this architecture exists to\n * remove (a missing or stale host sheet unstyles every v2 MFE at once) and it requires a breaking\n * host change deployed ahead of the package.\n *\n * Note what did NOT move when the engine did. `ensureSheet` is the runtime's, because placement is\n * anchor-relative and the anchor is shared. The CSS below is this package's, because it is exactly\n * the thing that must differ between two co-resident versions. That is the same line the `host`\n * variant above got wrong, drawn one level further in.\n */\n\n/** Test-only: forget what this module thinks it has installed. */\nexport function __resetTokensForTests(): void {\n  __resetInstalledSheets()\n}\n\nexport function ensureCoreTokens(doc: Document = document): boolean {\n  return ensureSheet(doc, CORE_HASH, CORE_CSS)\n}\n\n/**\n * Called by components that accept a `color` prop, since a decorative family can arrive from a\n * runtime expression the build cannot see — `getColorForEntityLabel(label)` and\n * `WCAG_BADGE_MAP[level].color` both exist in consumer code today.\n */\nexport function ensurePaletteTokens(doc: Document = document): boolean {\n  return ensureSheet(doc, PALETTE_HASH, PALETTE_CSS)\n}\n\n/**\n * The families the CORE sheet declares. Everything else is decorative and lives in the palette\n * sheet. `core-families.test.ts` asserts this list against the generated sheets in both directions, so a\n * family moving between them cannot silently invalidate the check below.\n */\nconst CORE_FAMILIES = new Set([\n  \"accent\",\n  \"gray\",\n  \"error\",\n  \"info\",\n  \"success\",\n  \"warning\",\n])\n\n/**\n * The single source of truth for \"which sheet does this family live in\", exported so a consumer's\n * OWN namespace-string interpolation (Badge, Pill) can ask the same question\n * `ensurePaletteTokensFor` answers below, instead of hand-picking a namespace and silently\n * disagreeing with it. That silent disagreement is exactly the shape of the bug this predicate\n * closes: `ensurePaletteTokensFor` correctly installed the palette sheet for a decorative family,\n * while the component's own `var(--volt2-<NS>-sem-<family>-<slot>)` string kept using the CORE\n * namespace regardless — so the sheet the family needed was present, and the property the\n * component actually referenced still didn't exist. See BADGE-NAMESPACE-TRIAGE.md.\n *\n * `CORE_FAMILIES` itself stays private — this predicate is the only way to read it, so nothing\n * outside this module can mutate the classification. Not re-exported from `src/index.ts` or the\n * generated `tokens/index.ts`: it is package-internal, imported the same way\n * `ensurePaletteTokensFor` already is (`\"../../tokens/install\"`), not part of the public API.\n */\nexport function isCoreFamily(family: string): boolean {\n  return CORE_FAMILIES.has(family)\n}\n\n/**\n * Install the palette sheet only if this family actually needs it.\n *\n * The unconditional call was measured as the single most expensive thing a `color`-prop component\n * does: the palette sheet is 63,689 B of CSS, and a differential build put `Pill`'s marginal cost at\n * 69,087 B raw against `Button`'s 6,330 B. The flows pilot separately measured 69,787 B of runtime\n * token CSS in the document for a two-component consumer, 18× the 3,814 B of actual atoms.\n *\n * Passing the resolved family keeps the correctness the unconditional call was protecting. The\n * hazard it guarded against is a family arriving from an expression the BUILD cannot see; by render\n * time the value is in hand, so a dynamic `getColorForEntityLabel(label)` that returns `teal` still\n * installs the sheet before paint. What goes away is installing it for `accent` or `gray`.\n *\n * This does NOT reduce bundle size. `ensurePaletteTokens` stays referenced, so the sheet is still\n * emitted into any chunk that contains one of these components — cutting that needs build-time\n * knowledge of which families a consumer uses, which the package cannot have. See DECISIONS D14.\n */\nexport function ensurePaletteTokensFor(\n  family: string,\n  doc: Document = document\n): boolean {\n  if (isCoreFamily(family)) return false\n\n  return ensurePaletteTokens(doc)\n}\n\nexport const TOKEN_SHEET_HASHES = {\n  core: CORE_HASH,\n  palette: PALETTE_HASH,\n} as const\n"],"names":["ensureCoreTokens","doc","ensureSheet","CORE_HASH","CORE_CSS","ensurePaletteTokens","PALETTE_HASH","PALETTE_CSS","CORE_FAMILIES","isCoreFamily","family","ensurePaletteTokensFor"],"mappings":";;;AAsCO,SAASA,EAAiBC,IAAgB,UAAmB;AAClE,SAAOC,EAAYD,GAAKE,GAAWC,CAAQ;AAC7C;AAOO,SAASC,EAAoBJ,IAAgB,UAAmB;AACrE,SAAOC,EAAYD,GAAKK,GAAcC,CAAW;AACnD;AAOA,MAAMC,wBAAoB,IAAI;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAiBM,SAASC,EAAaC,GAAyB;AACpD,SAAOF,EAAc,IAAIE,CAAM;AACjC;AAmBO,SAASC,EACdD,GACAT,IAAgB,UACP;AACT,SAAIQ,EAAaC,CAAM,IAAU,KAE1BL,EAAoBJ,CAAG;AAChC;"}

package/dist/tokens/use-palette-tokens.js

@@ -0,0 +1,20 @@
+import * as o from "react";
+import { ensurePaletteTokensFor as r, ensurePaletteTokens as s } from "./install.js";
+import { useVoltTargetDocument as n } from "../styles/document-context.js";
+function c(t) {
+  const e = n();
+  o.useInsertionEffect(() => {
+    e && r(t, e);
+  });
+}
+function i(t) {
+  const e = n();
+  o.useInsertionEffect(() => {
+    !e || !t || s(e);
+  });
+}
+export {
+  c as useVoltPaletteTokensFor,
+  i as useVoltPaletteTokensWhen
+};
+//# sourceMappingURL=use-palette-tokens.js.map

package/dist/tokens/use-palette-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-palette-tokens.js","sources":["../../src/tokens/use-palette-tokens.ts"],"sourcesContent":["import * as React from \"react\"\n\nimport { ensurePaletteTokensFor, ensurePaletteTokens } from \"./install\"\nimport { useVoltTargetDocument } from \"../styles/document-context\"\n\n/**\n * Commit-phase replacement for a bare `ensurePaletteTokensFor(family)` call in a component's render\n * body (Avatar/Badge/Pill). The hook itself is called unconditionally, every render, preserving\n * hook order; `family` — the RESOLVED value, computed during render exactly as before — is closed\n * over by the effect. There is deliberately NO dependency array (not `[doc, family]`): the effect\n * runs after every commit regardless of whether `doc`/`family` changed since the last one, matching\n * the pre-WP2B2 render-phase behavior of calling this fresh on every render.\n *\n * Running on every commit, rather than being gated to fire only when something changed, is what\n * lets the PALETTE token sheet specifically get restored on the next commit if removed externally,\n * with unchanged props — the WP2A restoration guarantee, extended here to the palette sheet. This\n * does not extend to an arbitrary Griffel atom bucket rule removed out from under a component;\n * `ensurePaletteTokensFor` only knows how to reconcile the ONE sheet it owns.\n */\nexport function useVoltPaletteTokensFor(family: string): void {\n  const doc = useVoltTargetDocument()\n  React.useInsertionEffect(() => {\n    if (!doc) return\n    ensurePaletteTokensFor(family, doc)\n  })\n}\n\n/**\n * Commit-phase replacement for Skeleton's `if (variant === \"ai\") ensurePaletteTokens()`. The hook is\n * still called unconditionally — the boolean requirement is computed during render (`variant ===\n * \"ai\"`) and the branch lives INSIDE the effect, never around the hook call itself.\n */\nexport function useVoltPaletteTokensWhen(required: boolean): void {\n  const doc = useVoltTargetDocument()\n  React.useInsertionEffect(() => {\n    if (!doc || !required) return\n    ensurePaletteTokens(doc)\n  })\n}\n"],"names":["useVoltPaletteTokensFor","family","doc","useVoltTargetDocument","React","ensurePaletteTokensFor","useVoltPaletteTokensWhen","required","ensurePaletteTokens"],"mappings":";;;AAmBO,SAASA,EAAwBC,GAAsB;AAC5D,QAAMC,IAAMC,EAAA;AACZ,EAAAC,EAAM,mBAAmB,MAAM;AAC7B,IAAKF,KACLG,EAAuBJ,GAAQC,CAAG;AAAA,EACpC,CAAC;AACH;AAOO,SAASI,EAAyBC,GAAyB;AAChE,QAAML,IAAMC,EAAA;AACZ,EAAAC,EAAM,mBAAmB,MAAM;AAC7B,IAAI,CAACF,KAAO,CAACK,KACbC,EAAoBN,CAAG;AAAA,EACzB,CAAC;AACH;"}

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
-  "$comment": "GENERATED. Design token values for consumers that do not render this package's React components. Compile these into your own CSS under your own names at your own build time; do not reference this package's runtime custom properties, whose names are content-hashed and change with their values.",
+  "$comment": "GENERATED. Design token values for consumers that do not render this package's React components. Compile these into your own CSS under your own names at your own build time; do not reference this package's runtime custom properties, whose names are content-hashed and change with their values. `themes.light`/`themes.dark` are mode-resolved; `densities.compact`/`densities.normal`/`densities.comfortable` resolve the component layer's geometry tokens (WP9A-ACCEPTANCE-WP9B1) and carry no mode of their own — do not read a value out of `themes` for a key that only exists under `densities`, or the reverse. This file is copied verbatim to this package's public `tokens.json` export (`package.json`'s `build` script, `cp src/tokens/values.generated.json dist/tokens.json`).",
   "package": "@epilot/volt-ui-experimental-griffel",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "themes": {
     "light": {
       "accent-1": "#fcfdfe",
@@ -924,13 +924,21 @@
       "sky-indicator": "#7ce2fe",
       "sky-surface": "#eef9fdcc",
       "sky-track": "#7ce2fe",
+      "spacing-element-0-5": "0.125rem",
       "spacing-element-1": "0.25rem",
+      "spacing-element-1-5": "0.375rem",
       "spacing-element-2": "0.5rem",
+      "spacing-element-2-5": "0.625rem",
       "spacing-element-3": "0.75rem",
       "spacing-group-1": "0.5rem",
       "spacing-group-2": "1rem",
+      "spacing-layout-0-5": "1.25rem",
       "spacing-layout-1": "1.5rem",
+      "spacing-layout-1-5": "1.75rem",
       "spacing-layout-2": "2rem",
+      "spacing-layout-2-5": "2.25rem",
+      "spacing-layout-3": "2.5rem",
+      "spacing-layout-4": "3rem",
       "spacing-none": "0px",
       "success-1": "#fbfefc",
       "success-10": "#2b9a66",
@@ -1999,13 +2007,21 @@
       "sky-indicator": "#7ce2fe",
       "sky-surface": "#13233b80",
       "sky-track": "#7ce2fe",
+      "spacing-element-0-5": "0.125rem",
       "spacing-element-1": "0.25rem",
+      "spacing-element-1-5": "0.375rem",
       "spacing-element-2": "0.5rem",
+      "spacing-element-2-5": "0.625rem",
       "spacing-element-3": "0.75rem",
       "spacing-group-1": "0.5rem",
       "spacing-group-2": "1rem",
+      "spacing-layout-0-5": "1.25rem",
       "spacing-layout-1": "1.5rem",
+      "spacing-layout-1-5": "1.75rem",
       "spacing-layout-2": "2rem",
+      "spacing-layout-2-5": "2.25rem",
+      "spacing-layout-3": "2.5rem",
+      "spacing-layout-4": "3rem",
       "spacing-none": "0px",
       "success-1": "#0e1512",
       "success-10": "#33b074",
@@ -2153,5 +2169,70 @@
       "yellow-surface": "#231f1380",
       "yellow-track": "#ffe629"
     }
+  },
+  "densities": {
+    "compact": {
+      "button-base-min-height": "2rem",
+      "button-base-padding-inline": "0.75rem",
+      "button-icon-size": "1.75rem",
+      "field-input-height": "1.25rem",
+      "field-padding-x": "0.5rem",
+      "field-padding-y": "0.25rem",
+      "field-set-gap": "1.5rem",
+      "list-index-min-width": "1.5rem",
+      "list-index-padding-x": "0.375rem",
+      "list-item-gap": "0.5rem",
+      "list-item-min-height": "2rem",
+      "list-item-padding-x": "0.5rem",
+      "list-item-padding-y": "0.25rem",
+      "select-content-gap": "0.125rem",
+      "select-content-padding": "0.25rem",
+      "select-item-padding-left": "0.25rem",
+      "select-item-padding-y": "0.25rem",
+      "table-cell-padding-y": "0.375rem",
+      "table-head-height": "2rem"
+    },
+    "normal": {
+      "button-base-min-height": "2rem",
+      "button-base-padding-inline": "1rem",
+      "button-icon-size": "2rem",
+      "field-input-height": "1.5rem",
+      "field-padding-x": "0.75rem",
+      "field-padding-y": "0.5rem",
+      "field-set-gap": "2rem",
+      "list-index-min-width": "1.75rem",
+      "list-index-padding-x": "0.5rem",
+      "list-item-gap": "0.75rem",
+      "list-item-min-height": "2.5rem",
+      "list-item-padding-x": "0.75rem",
+      "list-item-padding-y": "0.5rem",
+      "select-content-gap": "0.25rem",
+      "select-content-padding": "0.5rem",
+      "select-item-padding-left": "0.5rem",
+      "select-item-padding-y": "0.375rem",
+      "table-cell-padding-y": "0.5rem",
+      "table-head-height": "2.25rem"
+    },
+    "comfortable": {
+      "button-base-min-height": "2.5rem",
+      "button-base-padding-inline": "1.25rem",
+      "button-icon-size": "2.5rem",
+      "field-input-height": "1.75rem",
+      "field-padding-x": "1rem",
+      "field-padding-y": "0.75rem",
+      "field-set-gap": "2.5rem",
+      "list-index-min-width": "2rem",
+      "list-index-padding-x": "0.5rem",
+      "list-item-gap": "1rem",
+      "list-item-min-height": "3rem",
+      "list-item-padding-x": "1rem",
+      "list-item-padding-y": "0.75rem",
+      "select-content-gap": "0.375rem",
+      "select-content-padding": "0.75rem",
+      "select-item-padding-left": "0.75rem",
+      "select-item-padding-y": "0.625rem",
+      "table-cell-padding-y": "0.75rem",
+      "table-head-height": "2.5rem"
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/volt-ui-experimental-griffel",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "description": "Experimental Volt UI rebuild: Radix primitives styled with Griffel, bundled per micro-frontend instead of shared as a singleton",
   "type": "module",
   "repository": {
@@ -30,8 +30,10 @@
     "tokens.js",
     "tokens.d.ts",
     "README.md",
-    "AGENTS.md",
-    "AUTHORING.md"
+    "ADOPTING.md",
+    "scripts/migration-sweep.mjs",
+    "scripts/migration-diagnostics.mjs",
+    "scripts/migration-diagnostics-core.mjs"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -48,15 +50,21 @@
     "gate:griffel-contract": "bun --filter @epilot/volt-ui-runtime test",
     "gate:isolation": "node gates/isolation.mjs",
     "gate:cascade": "node gates/cascade-conformance/build-and-run.mjs",
+    "gate:lifecycle-commit-phase": "node gates/lifecycle-commit-phase/build-and-run.mjs",
     "gate:vr": "bun vr/run.mjs",
     "release": "npm publish --tag experiment",
     "gate:token-value-skew": "node gates/token-value-skew/run.mjs",
     "gate:class-salt-skew": "node gates/class-salt-skew/run.mjs",
-    "gates": "bun run gate:vr && bun run gate:isolation && bun run gate:token-value-skew && bun run gate:class-salt-skew && bun run gate:cascade && bun run gate:griffel-contract && bun run gate:dts-self-contained",
+    "gate:a11y": "node scripts/a11y-browser-check.mjs",
+    "gate:palette-namespace": "node scripts/palette-namespace-check.mjs",
+    "gates": "bun run gate:vr && bun run gate:isolation && bun run gate:token-value-skew && bun run gate:class-salt-skew && bun run gate:cascade && bun run gate:lifecycle-commit-phase && bun run gate:griffel-contract && bun run gate:dts-self-contained && bun run gate:a11y && bun run gate:palette-namespace",
     "measure:coresidency": "bun scripts/pilot-coresidency.mjs",
     "migration:sweep": "bun scripts/migration-sweep.mjs",
+    "test:migration-sweep": "bun test scripts/migration-diagnostics.test.mjs scripts/migration-diagnostics-core.test.mjs scripts/migration-sweep-packed-cli.test.mjs scripts/build-diagnostic-identity.test.mjs",
     "gate:one-bare-specifier": "node gates/one-bare-specifier.mjs",
-    "gate:dts-self-contained": "node gates/dts-self-contained.mjs"
+    "gate:dts-self-contained": "node gates/dts-self-contained.mjs",
+    "verify:release": "bun ../../scripts/verify-release.ts",
+    "verify:consumer": "bun ../../scripts/verify-packed-consumer.ts"
   },
   "peerDependencies": {
     "react": ">=18",