@aziontech/theme 4.1.0 → 4.3.0

package/src/scripts/build-tokens.mjs

@@ -26,24 +26,24 @@ import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { animate } from '../tokens/primitives/animations/animate.js';
+import { animate, curve, duration } from '../tokens/primitives/animations/animate.js';
 import { animateExtras, keyframes } from '../tokens/primitives/animations/keyframes.js';
 import { breakpoints } from '../tokens/primitives/breakpoints.js';
-import { buildTrees, flatten } from './compile-primitives.js';
+import { compilePrimitivesVars } from './compile-primitives.js';
 import { compileThemeCss, compileThemeVars } from './compile-theme.js';
 import { containersData } from '../tokens/semantic/containers.data.js';
 import { spacingsData } from '../tokens/semantic/spacings.data.js';
 import { textsData } from '../tokens/semantic/texts.data.js';
+import { zIndicesData } from '../tokens/semantic/z-indices.data.js';
+import { assertNoZeroWithUnit } from './zero-unit.mjs';
 
 const BREAKPOINT_ORDER = ['sm', 'md', 'lg', 'xl', '2xl'];
 
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 
 // ─── 1. Primitives ──────────────────────────────────────────────────────────
-const flattenPrimitives = () => {
-  const { refsTree, varsTree } = buildTrees();
-  return flatten(varsTree, refsTree);
-};
+// compilePrimitivesVars throws on any unresolved tokenRef (see refs.js).
+const flattenPrimitives = () => compilePrimitivesVars();
 
 // ─── 2. Semantic flattening ─────────────────────────────────────────────────
 const splitResponsive = (value) => {
@@ -91,6 +91,7 @@ const buildFlatModel = () => ({
   primitives: flattenPrimitives(),
   containers: flattenSingleValue(containersData, (k) => `--container-${k}`),
   spacings: flattenSingleValue(spacingsData, (k) => `--${k}`),
+  zIndices: flattenSingleValue(zIndicesData, (k) => `--${k}`),
   texts: flattenBundle(textsData),
 });
 
@@ -291,10 +292,24 @@ const emitCssV4 = () => {
     themeVars[`--animate-${name}`] = shorthand;
   }
 
+  // Named `duration-*` / `ease-*` utilities. Without these the design system's
+  // own `duration-moderate-02` / `ease-productive-entrance` classes compile to
+  // NOTHING (Tailwind v4 silently drops an unknown named step), and every
+  // component that declares one falls back to Tailwind's default 150ms `ease`.
+  // The namespaces are fixed by Tailwind: `--transition-duration-*` backs
+  // `duration-*`, `--ease-*` backs `ease-*`.
+  for (const [name, value] of Object.entries(duration)) {
+    themeVars[`--transition-duration-${name}`] = value;
+  }
+  for (const [name, value] of Object.entries(curve)) {
+    themeVars[`--ease-${name}`] = value;
+  }
+
   const semanticBase = {
     ...rootPrimitiveVars,
     ...(m.containers._ || {}),
     ...(m.spacings._ || {}),
+    ...(m.zIndices._ || {}),
     ...(m.texts._ || {}),
   };
 
@@ -303,6 +318,7 @@ const emitCssV4 = () => {
     const merged = {
       ...(m.containers[bp] || {}),
       ...(m.spacings[bp] || {}),
+      ...(m.zIndices[bp] || {}),
       ...(m.texts[bp] || {}),
     };
     if (Object.keys(merged).length === 0) continue;
@@ -378,6 +394,7 @@ const importIdx = rawCss.indexOf(IMPORT_LINE);
 if (importIdx === -1) throw new Error('emitCssV4 output is missing the tailwind import line');
 const afterImport = importIdx + IMPORT_LINE.length;
 const css = `${rawCss.slice(0, afterImport)}\n\n${fontsCss}${rawCss.slice(afterImport)}`;
+assertNoZeroWithUnit(css, 'globals.css');
 await writeFile(resolve(dir, 'globals.css'), css, 'utf8');
 await writeFile(resolve(dir, 'globals.scss'), css, 'utf8');
 console.log(`✓ v4 → ${dir}`);

package/src/scripts/compile-primitives.js

@@ -3,7 +3,7 @@
  *
  * Imports every primitive module (colors, shape, typography, effects,
  * breakpoints, border-widths, ring-offset), resolves `tokenRef(...)` aliases,
- * and produces a `:root { ... }` block. Mirrors the `injectCssVars` helper
+ * and produces a `:root { ... }` block. Mirrors `injectThemeCss` (compile-theme.js)
  * but for primitives only — no semantic light/dark split.
  */
 
@@ -33,7 +33,7 @@ import { fontWeight } from '../tokens/primitives/typography/font-weight.js'
 import { leading } from '../tokens/primitives/typography/leading.js'
 import { lineHeight } from '../tokens/primitives/typography/line-height.js'
 import { tracking } from '../tokens/primitives/typography/tracking.js'
-import { isTokenRef } from './refs.js'
+import { assertResolvedRefs, isTokenRef } from './refs.js'
 
 /**
  * Returns two trees:
@@ -123,17 +123,18 @@ const varNameFor = (path) => {
   return `--${segments.join('-')}`
 }
 
-export const flatten = (obj, refsTree, prefix = []) => {
+export const flatten = (obj, refsTree, prefix = [], unresolved = null) => {
   const result = {}
   Object.entries(obj).forEach(([key, value]) => {
     const nextPath = [...prefix, key]
     if (isTokenRef(value)) {
       const resolved = resolveRef(value.__ref, refsTree)
+      if (resolved == null) unresolved?.push(`${varNameFor(nextPath)} → ${value.__ref}`)
       result[varNameFor(nextPath)] = resolved ?? value.__ref
       return
     }
     if (value && typeof value === 'object' && !Array.isArray(value)) {
-      Object.assign(result, flatten(value, refsTree, nextPath))
+      Object.assign(result, flatten(value, refsTree, nextPath, unresolved))
       return
     }
     if (typeof value === 'string' || typeof value === 'number') {
@@ -145,7 +146,10 @@ export const flatten = (obj, refsTree, prefix = []) => {
 
 export const compilePrimitivesVars = () => {
   const { refsTree, varsTree } = buildTrees()
-  return flatten(varsTree, refsTree)
+  const unresolved = []
+  const vars = flatten(varsTree, refsTree, [], unresolved)
+  assertResolvedRefs('primitives', unresolved)
+  return vars
 }
 
 export const compilePrimitivesCss = () => {

package/src/scripts/compile-theme.js

@@ -24,7 +24,7 @@ import { ring } from '../tokens/theme/ring.js'
 import { secondary } from '../tokens/theme/secondary.js'
 import { surfaces } from '../tokens/theme/surfaces.js'
 import { text } from '../tokens/theme/text.js'
-import { isTokenRef } from './refs.js'
+import { assertResolvedRefs, isTokenRef } from './refs.js'
 
 const VARIANTS = ['light', 'dark']
 
@@ -58,23 +58,25 @@ const resolveRef = (ref, surfacesResolved) => {
   return null
 }
 
-const resolveGroup = (group, surfacesResolved) => {
+const resolveGroup = (group, surfacesResolved, variant, unresolved) => {
   const result = {}
   Object.entries(group).forEach(([key, value]) => {
     if (!isTokenRef(value)) return
     const resolved = resolveRef(value.__ref, surfacesResolved)
     if (resolved != null) result[`--${key}`] = String(resolved)
+    else unresolved.push(`[${variant}] --${key} → ${value.__ref}`)
   })
   return result
 }
 
-const compileVariant = (variant) => {
+const compileVariant = (variant, unresolved) => {
   // Surfaces resolved first — other groups depend on them.
   const surfacesResolved = {}
   Object.entries(surfaces[variant]).forEach(([key, value]) => {
     if (!isTokenRef(value)) return
     const v = resolveRef(value.__ref, {})
     if (v != null) surfacesResolved[key] = String(v)
+    else unresolved.push(`[${variant}] --${key} → ${value.__ref}`)
   })
 
   const vars = {}
@@ -96,12 +98,16 @@ const compileVariant = (variant) => {
     danger[variant],
     info[variant]
   ]
-  groups.forEach((g) => Object.assign(vars, resolveGroup(g, surfacesResolved)))
+  groups.forEach((g) => Object.assign(vars, resolveGroup(g, surfacesResolved, variant, unresolved)))
   return vars
 }
 
-export const compileThemeVars = () =>
-  Object.fromEntries(VARIANTS.map((v) => [v, compileVariant(v)]))
+export const compileThemeVars = () => {
+  const unresolved = []
+  const vars = Object.fromEntries(VARIANTS.map((v) => [v, compileVariant(v, unresolved)]))
+  assertResolvedRefs('semantic theme tokens', unresolved)
+  return vars
+}
 
 export const compileThemeCss = () => {
   const { light, dark } = compileThemeVars()

package/src/scripts/refs.d.ts

@@ -2,4 +2,5 @@ export function tokenRef(path: any): {
     __ref: any;
 };
 export function isTokenRef(value: any): boolean;
+export function assertResolvedRefs(context: any, unresolved: any): void;
 //# sourceMappingURL=refs.d.ts.map

package/src/scripts/refs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"refs.d.ts","sourceRoot":"","sources":["refs.js"],"names":[],"mappings":"AAIO;;EAA4C;AAE5C,gDAA6F"}
+{"version":3,"file":"refs.d.ts","sourceRoot":"","sources":["refs.js"],"names":[],"mappings":"AAIO;;EAA4C;AAE5C,gDAA6F;AAO7F,wEAIN"}

package/src/scripts/refs.js

@@ -5,3 +5,14 @@
 export const tokenRef = (path) => ({ __ref: path })
 
 export const isTokenRef = (value) => typeof value === 'object' && value !== null && '__ref' in value
+
+/**
+ * Fail loudly on unresolved refs. A typo'd token must never silently vanish
+ * from the compiled CSS or ship as a raw `path.to.token` string — the compilers
+ * collect every miss and this throws once with the full list.
+ */
+export const assertResolvedRefs = (context, unresolved) => {
+  if (unresolved.length === 0) return
+  const lines = unresolved.map((entry) => `  ${entry}`).join('\n')
+  throw new Error(`[theme] ${unresolved.length} unresolved tokenRef(s) in ${context}:\n${lines}`)
+}

package/src/scripts/zero-unit.mjs

@@ -0,0 +1,64 @@
+/**
+ * Zero-with-unit gate for the compiled token stylesheet — the only check that sees token
+ * values (authored in JS, so no linter does), run on the final CSS before globals.css is
+ * written. A zero length is `0`; inside calc()/min()/max()/clamp() it must carry a unit, and
+ * that unit is `rem` (.claude/rules/styling.md). Mirror of the zero checks in packages/webkit
+ * token-checks.js, kept in sync — LENGTH_UNITS is the same string. Pure: node built-ins only.
+ */
+
+// Opens a math function; balances parens one level deep (a zero nested deeper falls back to
+// the bare-zero check).
+const MATH_FN = '(?:calc|min|max|clamp)\\((?:[^()]|\\([^()]*\\))*';
+
+// Complete CSS length-unit set — must be complete, since a missing unit silently passes.
+export const LENGTH_UNITS =
+  'px|rem|em|ex|rex|ch|rch|cap|rcap|ic|ric|lh|rlh|vw|vh|vi|vb|vmin|vmax|svw|svh|svi|svb|svmin|svmax|lvw|lvh|lvi|lvb|lvmin|lvmax|dvw|dvh|dvi|dvb|dvmin|dvmax|cqw|cqh|cqi|cqb|cqmin|cqmax|cm|mm|Q|in|pt|pc';
+
+// Mutually exclusive, so a value is reported once. Non-global so `.test()` is stateless —
+// findZeroMisuse adds `g` locally to enumerate matches.
+export const ZERO_WITH_UNIT = new RegExp(`(?<![\\w.])(?<!${MATH_FN})0(?:${LENGTH_UNITS})(?![\\w%])`, 'i');
+export const ZERO_UNIT_IN_MATH = new RegExp(
+  `(?<=${MATH_FN})(?<![\\w.])0(?!rem)(?:${LENGTH_UNITS})(?![\\w%])`,
+  'i',
+);
+
+/**
+ * Matches of `regex` in `cssText` as `{ line, n }`. Scans the whole string, not line-by-line,
+ * so a calc() wrapped across newlines is still seen as in-math.
+ */
+export const findZeroMisuse = (cssText, regex) => {
+  const scan = new RegExp(regex.source, `${regex.flags.replace('g', '')}g`);
+  const out = [];
+  for (let m; (m = scan.exec(cssText)); ) {
+    const lineStart = cssText.lastIndexOf('\n', m.index - 1) + 1;
+    const nlIdx = cssText.indexOf('\n', m.index);
+    const lineEnd = nlIdx === -1 ? cssText.length : nlIdx;
+    out.push({ line: cssText.slice(lineStart, lineEnd).trim(), n: cssText.slice(0, m.index).split('\n').length });
+  }
+  return out;
+};
+
+// The `--custom-property` a line declares, to name the token to fix; null off a `--token:` line.
+const tokenOf = (line) => line.match(/(--[\w-]+)\s*:/)?.[1] ?? null;
+
+/** Throw if `cssText` misuses a zero length. `source` names the artifact in the message. */
+export const assertNoZeroWithUnit = (cssText, source = 'globals.css') => {
+  const bare = findZeroMisuse(cssText, ZERO_WITH_UNIT);
+  const inMath = findZeroMisuse(cssText, ZERO_UNIT_IN_MATH);
+  if (bare.length === 0 && inMath.length === 0) return;
+
+  const detail = (rows) => rows.map(({ line, n }) => `  ${source}:${n}  ${line}`).join('\n');
+  const tokens = [...new Set([...bare, ...inMath].map(({ line }) => tokenOf(line)).filter(Boolean))];
+  const parts = [`build:tokens — ${bare.length + inMath.length} token value(s) misuse a zero.`];
+  if (bare.length > 0) {
+    parts.push(`A zero length takes no unit: write '0', not '0px' / '0rem' / '0em'.\n${detail(bare)}`);
+  }
+  if (inMath.length > 0) {
+    parts.push(
+      `Inside calc()/min()/max()/clamp() the zero needs a unit, and that unit is rem: write '0rem'.\n${detail(inMath)}`,
+    );
+  }
+  const grepHint = tokens.length > 0 ? ` — grep the offending token name (${tokens.join(', ')})` : '';
+  parts.push(`Fix the token at its source under src/tokens/**${grepHint}, not the generated ${source}.`);
+  throw new Error(parts.join('\n'));
+};

package/src/tokens/README.md

@@ -39,8 +39,6 @@ tokens/theme/**               ─┤                                    dist/v4/
                                │
 scripts/{compile-primitives,  ─┘
         compile-theme,
-        resolve,
-        css-vars,
         refs}.js  (building blocks used by build-tokens.mjs)
 ```
 
@@ -115,17 +113,11 @@ src/
 │   │   └── animations.js
 │   ├── theme.js                 # Tailwind theme.extend (colors + semantic mappings)
 │   └── index.js                 # public re-exports
-├── scripts/
-│   ├── refs.js                  # tokenRef helper + isTokenRef guard
-│   ├── resolve.js               # resolves `tokenRef` paths to literal values
-│   ├── css-vars.js              # builds light/dark CSS var maps from semantic refs
-│   ├── compile-primitives.js    # flattens primitive trees into CSS vars
-│   ├── compile-theme.js         # legacy theme compiler (used by the harness pages)
-│   └── build-tokens.mjs         # main entrypoint: emits dist/v3 and dist/v4 bundles
-└── tests/
-    ├── primitives.html          # visual harness for all primitives
-    ├── theme.html               # semantic tokens with light/dark toggle
-    └── tokens.html              # combined view
+└── scripts/
+    ├── refs.js                  # tokenRef helper + isTokenRef guard + assertResolvedRefs
+    ├── compile-primitives.js    # flattens primitive trees into CSS vars
+    ├── compile-theme.js         # semantic light/dark compiler (exported as ./theme-colors)
+    └── build-tokens.mjs         # main entrypoint: emits the dist/v4 bundle
 ```
 
 ---
@@ -216,18 +208,18 @@ Utilities like `text-default`, `bg-surface`, `border-default`, `text-primary`, `
 ### As JS objects (Node / build steps)
 
 ```js
-import { createCssVars, cssVarsString } from '@aziontech/theme'
+import { compileThemeVars, compileThemeCss } from '@aziontech/theme/theme-colors'
 
-createCssVars() // → { light: { '--text-default': '#1A1A1A', … }, dark: { … } }
-cssVarsString() // → ':root, [data-theme=light], .azion.azion-light { … } [data-theme=dark], … { … }'
+compileThemeVars() // → { light: { '--primary': '…', … }, dark: { … } }
+compileThemeCss() // → ':root, [data-theme=light], .azion.azion-light { … }\n\n[data-theme=dark], … { … }'
 ```
 
 ### Injecting at runtime (browser)
 
 ```js
-import { injectCssVars } from '@aziontech/theme'
+import { injectThemeCss } from '@aziontech/theme/theme-colors'
 
-injectCssVars() // appends a <style data-azion-tokens> element to <head>
+injectThemeCss() // appends a <style data-azion-theme> element to <head>
 ```
 
 Only useful if you can't precompile and import `globals.css` — production usage should prefer the static stylesheet.
@@ -306,18 +298,17 @@ Bundles with `fontSize: 'inherit'` are omitted from the Tailwind `fontSize` pres
 
 ## 🔗 Token references (`tokenRef`)
 
-`tokenRef(path)` returns a marker object `{ __ref: path }` that the compiler resolves at build time. Supported path prefixes (see `scripts/resolve.js`):
+`tokenRef(path)` returns a marker object `{ __ref: path }` that the compilers resolve at build time. Primitive-tree refs (`scripts/compile-primitives.js`) resolve against the full primitives tree (e.g. `shape.container.3xs`). Semantic theme refs (`scripts/compile-theme.js`) support these prefixes:
 
-| Prefix                        | Looks up                                                                                               |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `primitives.X.Y.Z`            | `tokens/primitives/colors/colors.js` tree (e.g., `primitives.gray.900`, `primitives.alpha.orange.100`) |
-| `surfacePrimitives.surface.N` | the surface palette (used internally; usually referenced via `brand.surfaces.…`)                       |
-| `brand.surfaces.surface-N`    | `surfacePrimitives.surface[N]` (e.g., `brand.surfaces.surface-100` → `#F5F5F5`)                        |
-| `brand.primary.primary-N`     | `brandPrimitives.primary[N]` (e.g., `brand.primary.primary-500` → `#FE601F`)                           |
-| `brand.accent.accent-N`       | `brandPrimitives.accent[N]`                                                                            |
-| `brand.absolute.X`            | `brandPrimitives.absolute.X` (`black` / `white`)                                                       |
+| Prefix                    | Looks up                                                                                               |
+| ------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `primitives.X.Y.Z`        | `tokens/primitives/colors/colors.js` tree (e.g., `primitives.gray.900`, `primitives.alpha.orange.100`) |
+| `brand.primary.primary-N` | `brandPrimitives.primary[N]` (e.g., `brand.primary.primary-500` → `#FE601F`)                           |
+| `brand.accent.accent-N`   | `brandPrimitives.accent[N]`                                                                            |
+| `brand.absolute.X`        | `brandPrimitives.absolute.X` (`black` / `white`)                                                       |
+| `theme.surfaces.X`        | the variant's pre-resolved surfaces group (`tokens/theme/surfaces.js`)                                 |
 
-Refs of unknown prefixes are left as the raw path string in the output — flag for "this needs resolver support".
+A ref that does not resolve — unknown prefix or dead path — **fails the build**: the compilers collect every miss and throw one aggregated `--var → ref` list (`assertResolvedRefs` in `scripts/refs.js`).
 
 ---
 

package/src/tokens/index.d.ts

@@ -2,5 +2,4 @@ export * from "./primitives/colors/colors.js";
 export * from "./semantic/colors.js";
 export * from "./theme.js";
 export { textsData } from "./semantic/texts.data.js";
-export { createCssVars, cssVarsString, injectCssVars } from "../scripts/css-vars.js";
 //# sourceMappingURL=index.d.ts.map

package/src/tokens/index.js

@@ -2,7 +2,6 @@
  * Tokens public exports.
  */
 
-export { createCssVars, cssVarsString, injectCssVars } from '../scripts/css-vars.js'
 export * from './primitives/colors/colors.js'
 export * from './semantic/colors.js'
 export { textsData } from './semantic/texts.data.js'

package/src/tokens/primitives/animations/animate.d.ts

@@ -33,6 +33,7 @@ export const animate: {
     'slide-out-right': string;
     'progress-indeterminate': string;
     'progress-indeterminate-short': string;
+    'flow-dash': string;
 };
 export const useWhen: {
     spin: string;
@@ -53,6 +54,7 @@ export const useWhen: {
     'slide-out-right': string;
     'progress-indeterminate': string;
     'progress-indeterminate-short': string;
+    'flow-dash': string;
 };
 declare namespace _default {
     export { animate };

package/src/tokens/primitives/animations/animate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["animate.js"],"names":[],"mappings":"AAAA;;;;;EAKC;AAED;;;;;;;;;EASC;AAED;;;;;;;;;;;;;;;;;;;EAmBC;AAED;;;;;;;;;;;;;;;;;;;EAsBC"}
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["animate.js"],"names":[],"mappings":"AAAA;;;;;EAKC;AAED;;;;;;;;;EASC;AAED;;;;;;;;;;;;;;;;;;;;EAsBC;AAED;;;;;;;;;;;;;;;;;;;;EAwBC"}

package/src/tokens/primitives/animations/animate.js

@@ -34,7 +34,10 @@ export const animate = {
   'slide-in-right': `slideInRight ${duration['moderate-02']} ${curve['productive-entrance']}`,
   'slide-out-right': `slideOutRight ${duration['moderate-01']} ${curve['productive-exit']}`,
   'progress-indeterminate': `progressIndeterminate ${duration['slow-04']} ${curve['productive-entrance']} infinite`,
-  'progress-indeterminate-short': `progressIndeterminateShort ${duration['slow-04']} ${curve['expressive-entrance']} ${duration['slow-03']} infinite`
+  'progress-indeterminate-short': `progressIndeterminateShort ${duration['slow-04']} ${curve['expressive-entrance']} ${duration['slow-03']} infinite`,
+  // `linear` (not a curve token) for the same reason as spin/shimmer: an endlessly
+  // looping animation must not accelerate, or the seam between repeats is visible.
+  'flow-dash': `flowDash ${duration['slow-02']} linear infinite`
 }
 
 export const useWhen = {
@@ -58,7 +61,9 @@ export const useWhen = {
   'slide-in-right': 'Right-anchored panel entering (settings/detail drawer).',
   'slide-out-right': 'Right-anchored panel leaving (pair of slide-in-right).',
   'progress-indeterminate': 'Indeterminate linear progress bar (primary sweep).',
-  'progress-indeterminate-short': 'Indeterminate linear progress bar (secondary short sweep).'
+  'progress-indeterminate-short': 'Indeterminate linear progress bar (secondary short sweep).',
+  'flow-dash':
+    'Flowing connection along an SVG connector stroke in a node-based / network diagram. Set a stroke-dasharray whose cycle divides 24 (e.g. 4 4) so the loop is seamless.'
 }
 
 export default { animate, curve, duration, useWhen }

package/src/tokens/primitives/animations/keyframes.d.ts

@@ -57,6 +57,10 @@ export namespace keyframes {
         '60%': string;
         '100%': string;
     };
+    let flowDash: {
+        '0%': string;
+        '100%': string;
+    };
 }
 /**
  * Utilities that need CSS properties beyond the `animation` shorthand

package/src/tokens/primitives/animations/keyframes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["keyframes.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA;;;;GAIG;AACH;;;;;;;EAGC"}
+{"version":3,"file":"keyframes.d.ts","sourceRoot":"","sources":["keyframes.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA;;;;GAIG;AACH;;;;;;;EAGC"}

package/src/tokens/primitives/animations/keyframes.js

@@ -37,12 +37,12 @@ export const keyframes = {
     '100%': 'background-position: -200% 0'
   },
   popupScaleIn: {
-    '0%': 'opacity: 0; transform: scale(0.95)',
+    '0%': 'opacity: 0; transform: scale(0.9)',
     '100%': 'opacity: 1; transform: scale(1)'
   },
   popupScaleOut: {
     '0%': 'opacity: 1; transform: scale(1)',
-    '100%': 'opacity: 0; transform: scale(0.95)'
+    '100%': 'opacity: 0; transform: scale(0.9)'
   },
   slideInLeft: {
     '0%': 'transform: translateX(-100%)',
@@ -69,6 +69,15 @@ export const keyframes = {
     '0%': 'inset-inline-start: -200%; inset-inline-end: 100%',
     '60%': 'inset-inline-start: 107%; inset-inline-end: -8%',
     '100%': 'inset-inline-start: 107%; inset-inline-end: -8%'
+  },
+  // Marching dashes along an SVG stroke — the "flowing connection" of a node-based
+  // diagram. The travel distance is 24, so the loop is seamless for any
+  // `stroke-dasharray` whose cycle DIVIDES 24 (`4 4` = 8, `2 4` = 6, `8 4` = 12): the
+  // pattern lands exactly where it started. A cycle that does not divide 24 (`5 5` = 10)
+  // visibly jumps on repeat.
+  flowDash: {
+    '0%': 'stroke-dashoffset: 24',
+    '100%': 'stroke-dashoffset: 0'
   }
 }
 

package/src/tokens/primitives/shape/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["container.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;EAcC"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["container.js"],"names":[],"mappings":"AAiBA;;;;;;;;;;;;;;EAcC"}

package/src/tokens/primitives/shape/container.js

@@ -1,17 +1,34 @@
+/*
+ * Container widths — a geometric rhythm, not a hand-picked list.
+ *
+ * The scale is anchored at both ends: `3xs` stays 256px (the narrowest useful
+ * field/rail width) and `7xl` is 1620px (the widest page measure). The eleven
+ * slots between them are `256 × r^n` with r = (1620 / 256)^(1/12) ≈ 1.1662 —
+ * so every neighbouring pair sits at the same ~+16.6% apart and the whole set
+ * reads as one progression instead of two grids spliced together (the previous
+ * scale stepped +32, then +64, then +96, then +128).
+ *
+ * Values are rounded to the 4px grid; `7xl` keeps its exact anchor and `4xl`
+ * is nudged 4px to land on 1024 (2.6px off the ideal, and a landmark worth
+ * keeping). Ratio between neighbours therefore ranges 1.157–1.172.
+ *
+ * Rounding is 4px, not 8px, because 1620 is not a multiple of 8 — the anchor
+ * defines the grid, so a stricter grid could not reach it.
+ */
 export const container = {
-  '3xs': '256px',
-  '2xs': '288px',
-  xs: '320px',
-  sm: '384px',
-  md: '448px',
-  lg: '512px',
-  xl: '576px',
-  '2xl': '672px',
-  '3xl': '768px',
-  '4xl': '896px',
-  '5xl': '1024px',
-  '6xl': '1152px',
-  '7xl': '1280px'
+  '3xs': '256px', //  ×1     — anchor
+  '2xs': '300px', //  +44
+  xs: '348px', //     +48
+  sm: '408px', //     +60
+  md: '472px', //     +64
+  lg: '552px', //     +80
+  xl: '644px', //     +92
+  '2xl': '752px', //  +108
+  '3xl': '876px', //  +124
+  '4xl': '1024px', // +148
+  '5xl': '1192px', // +168
+  '6xl': '1388px', // +196
+  '7xl': '1620px' //  +232 — anchor
 }
 
 export default { container }

package/src/tokens/primitives/typography/leading.d.ts

@@ -1,4 +1,5 @@
 export namespace leading {
+    let none: number;
     let tight: number;
     let snug: number;
     let normal: number;

package/src/tokens/primitives/typography/leading.js

@@ -1,4 +1,5 @@
 export const leading = {
+  none: 1,
   tight: 1.25,
   snug: 1.375,
   normal: 1.5,

package/src/tokens/primitives/typography/tracking.js

@@ -1,10 +1,16 @@
+/**
+ * Letter-spacing scale, in `rem` so the emitted CSS carries a single measure
+ * unit across the whole token set (font sizes, spacings and tracking are all
+ * root-relative). Values are the em-scale numbers kept as-is, so `widest`
+ * resolves to a fixed 1.6px instead of 10% of the element's font size.
+ */
 export const tracking = {
-  tighter: '-0.05em',
-  tight: '-0.025em',
-  normal: '0em',
-  wide: '0.025em',
-  wider: '0.05em',
-  widest: '0.1em'
+  tighter: '-0.05rem',
+  tight: '-0.025rem',
+  normal: '0',
+  wide: '0.025rem',
+  wider: '0.05rem',
+  widest: '0.1rem'
 }
 
 export default { tracking }

package/src/tokens/semantic/colors.js

@@ -4,8 +4,11 @@
  * Single source of truth for semantic color tokens.
  *
  * - `semanticColorsData`: token refs grouped by category (`text`, `background`,
- *   `border`) and mode (`light`, `dark`). Consumed by `tokens/build/css-vars.js`
- *   to emit `:root` / `.dark` CSS variables.
+ *   `border`) and mode (`light`, `dark`). The raw ref source `semanticColors`
+ *   derives from; only re-exported via `tokens/index.js` today. Note: its
+ *   `backdrop` / `primary-mask` refs point at `alpha` shades that do not exist
+ *   (`alpha.neutral`, `alpha.brand`) — fix them before wiring this data to a
+ *   compiler, or the unresolved-ref guard will reject it.
  * - `semanticColors`: derived map of `var(--…)` strings, grouped by category,
  *   consumed by `tokens/theme.js` to extend Tailwind's `textColor`,
  *   `backgroundColor`, and `borderColor`. Generates utilities like

package/src/tokens/semantic/texts.data.d.ts

@@ -100,22 +100,22 @@ export const textsData: {
     'text-label-code-sm': {
         fontFamily: string;
         fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
+        lineHeight: number;
+        fontWeight: number;
         letterSpacing: string;
     };
     'text-label-code-md': {
         fontFamily: string;
         fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
+        lineHeight: number;
+        fontWeight: number;
         letterSpacing: string;
     };
     'text-label-code-lg': {
         fontFamily: string;
         fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
+        lineHeight: number;
+        fontWeight: number;
         letterSpacing: string;
     };
     'text-body-lg': {

package/src/tokens/semantic/texts.data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"texts.data.d.ts","sourceRoot":"","sources":["texts.data.js"],"names":[],"mappings":"AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2JE,8FAA8F;;;;;;;;;;;;;;;;;;EAkB/F"}
+{"version":3,"file":"texts.data.d.ts","sourceRoot":"","sources":["texts.data.js"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2JE,8FAA8F;;;;;;;;;;;;;;;;;;EAkB/F"}