@astryxdesign/core 0.7.5 → 0.7.6-canary.0ef60dd

package/dist/theme/tokenReferences.js

@@ -0,0 +1,132 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file tokenReferences.ts
+ * @input A flat map of token names to raw CSS values
+ * @output `resolveTokenReferences`, which follows `var(--name[, fallback])`
+ *   references through the map, and the CSS parsing helpers it shares
+ *   (`splitTopLevelComma`, `findMatchingParen`)
+ * @position Theme utility with no imports: tokens.ts resolves a theme's token
+ *   graph on it (evaluating color functions as it goes), and themeMotion.ts
+ *   resolves motion tokens written as references on it. Pure; safe on the
+ *   server.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/theme/tokens.ts
+ * - /packages/core/src/theme/themeMotion.ts
+ */
+
+/**
+ * Split the arguments of a CSS function body on the first top-level comma.
+ * Handles nested functions such as rgba(), color-mix(), var(), and quoted strings.
+ */
+export function splitTopLevelComma(input) {
+  let depth = 0;
+  let quote = null;
+  let isEscaped = false;
+  for (let i = 0; i < input.length; i++) {
+    const char = input[i];
+    if (quote !== null) {
+      if (isEscaped) {
+        isEscaped = false;
+      } else if (char === '\\') {
+        isEscaped = true;
+      } else if (char === quote) {
+        quote = null;
+      }
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+      continue;
+    }
+    if (char === '(') {
+      depth++;
+      continue;
+    }
+    if (char === ')') {
+      depth = Math.max(0, depth - 1);
+      continue;
+    }
+    if (char === ',' && depth === 0) {
+      return [input.slice(0, i).trim(), input.slice(i + 1).trim()];
+    }
+  }
+  return null;
+}
+
+/** Index of the `)` matching the `(` at `openIndex`, or -1 when unbalanced. */
+export function findMatchingParen(input, openIndex) {
+  let depth = 0;
+  for (let i = openIndex; i < input.length; i++) {
+    const char = input[i];
+    if (char === '(') {
+      depth++;
+    } else if (char === ')') {
+      depth--;
+      if (depth === 0) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+
+/**
+ * Resolves every value in `raw` to a concrete one: each `var(--name[,
+ * fallback])` is replaced by `name`'s resolved value, or by its fallback when
+ * `raw` has no `name`, and is kept as written when neither exists or the
+ * references form a cycle. `evaluate` then runs on each substituted value
+ * (tokens.ts evaluates CSS color functions there).
+ */
+export function resolveTokenReferences(raw, evaluate = expr => expr) {
+  const cache = {};
+
+  // `seen` tracks the reference chain, so a cycle resolves to the literal
+  // reference instead of recursing forever.
+  const substitute = (expr, seen) => {
+    const start = expr.indexOf('var(');
+    if (start === -1) {
+      return expr;
+    }
+    const openIndex = start + 'var'.length;
+    const closeIndex = findMatchingParen(expr, openIndex);
+    if (closeIndex === -1) {
+      return expr;
+    }
+    const inner = expr.slice(openIndex + 1, closeIndex);
+    const commaSplit = splitTopLevelComma(inner);
+    const name = (commaSplit ? commaSplit[0] : inner).trim();
+    const fallback = commaSplit ? commaSplit[1] : null;
+    let replacement;
+    if (seen.has(name)) {
+      replacement = expr.slice(start, closeIndex + 1);
+    } else if (name in raw) {
+      seen.add(name);
+      replacement = reference(name, seen);
+      seen.delete(name);
+    } else if (fallback !== null) {
+      replacement = substitute(fallback.trim(), seen);
+    } else {
+      replacement = expr.slice(start, closeIndex + 1);
+    }
+    const rest = substitute(expr.slice(closeIndex + 1), seen);
+    return expr.slice(0, start) + replacement + rest;
+  };
+  const reference = (name, seen) => {
+    if (name in cache) {
+      return cache[name];
+    }
+    const value = raw[name];
+    if (value === undefined) {
+      return '';
+    }
+    const resolved = evaluate(value.includes('var(') ? substitute(value, seen) : value);
+    cache[name] = resolved;
+    return resolved;
+  };
+  for (const name of Object.keys(raw)) {
+    reference(name, new Set());
+  }
+  return cache;
+}

package/dist/theme/tokens.d.ts

@@ -15,6 +15,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/theme/useTheme.ts
+ * - /packages/core/src/theme/tokenReferences.ts (the `var()` resolver)
  * - /packages/core/src/theme/index.ts
  */
 import { type DefinedTheme, type TokenName } from './defineTheme.js';

package/dist/theme/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,SAAS,EAEf,MAAM,eAAe,CAAC;AAIvB,kFAAkF;AAClF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,4DAA4D;AAC5D,MAAM,WAAW,yBAAyB;IACxC,kGAAkG;IAClG,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,2DAA2D;AAC3D,MAAM,WAAW,wBAAyB,SAAQ,yBAAyB;IACzE,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,MAAM,CAEhE;AAED,sFAAsF;AACtF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAElB,CAAC;AAqT/B;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EACtC,OAAO,EAAE,yBAAyB,GACjC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA8CxB;AAED,2EAA2E;AAC3E,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EACtC,IAAI,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,OAAO,EAAE,wBAAwB,GAChC,MAAM,CAGR"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,SAAS,EAEf,MAAM,eAAe,CAAC;AASvB,kFAAkF;AAClF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,4DAA4D;AAC5D,MAAM,WAAW,yBAAyB;IACxC,kGAAkG;IAClG,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,2DAA2D;AAC3D,MAAM,WAAW,wBAAyB,SAAQ,yBAAyB;IACzE,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,MAAM,CAEhE;AAED,sFAAsF;AACtF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAElB,CAAC;AAgK/B;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EACtC,OAAO,EAAE,yBAAyB,GACjC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA8CxB;AAED,2EAA2E;AAC3E,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EACtC,IAAI,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,OAAO,EAAE,wBAAwB,GAChC,MAAM,CAGR"}

package/dist/theme/tokens.js

@@ -17,12 +17,14 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/theme/useTheme.ts
+ * - /packages/core/src/theme/tokenReferences.ts (the `var()` resolver)
  * - /packages/core/src/theme/index.ts
  */
 
 import { tokenDefaults } from "./defineTheme.js";
 import { parseColor, formatColor } from "../utils/color.js";
 import { generatedScopedStatusRoleDefaults } from "./generateThemeRules.js";
+import { findMatchingParen, resolveTokenReferences, splitTopLevelComma } from "./tokenReferences.js";
 
 /** Resolved color mode used when choosing the side of light/dark token values. */
 
@@ -54,45 +56,6 @@ export function tokenVar(name) {
 /** Flat map of every known Astryx token name to its `var(--token-name)` reference. */
 export const tokenVars = Object.fromEntries(Object.keys(tokenDefaults).map(name => [name, tokenVar(name)]));
 
-/**
- * Split the arguments of a CSS function body on the first top-level comma.
- * Handles nested functions such as rgba(), color-mix(), var(), and quoted strings.
- */
-function splitTopLevelComma(input) {
-  let depth = 0;
-  let quote = null;
-  let isEscaped = false;
-  for (let i = 0; i < input.length; i++) {
-    const char = input[i];
-    if (quote !== null) {
-      if (isEscaped) {
-        isEscaped = false;
-      } else if (char === '\\') {
-        isEscaped = true;
-      } else if (char === quote) {
-        quote = null;
-      }
-      continue;
-    }
-    if (char === '"' || char === "'") {
-      quote = char;
-      continue;
-    }
-    if (char === '(') {
-      depth++;
-      continue;
-    }
-    if (char === ')') {
-      depth = Math.max(0, depth - 1);
-      continue;
-    }
-    if (char === ',' && depth === 0) {
-      return [input.slice(0, i).trim(), input.slice(i + 1).trim()];
-    }
-  }
-  return null;
-}
-
 /** Parse a CSS light-dark(light, dark) function into its two argument values. */
 function parseLightDark(value) {
   const trimmed = value.trim();
@@ -129,27 +92,11 @@ function resolveXDSTokenValue(value, mode) {
 // Generated themes emit derived tokens as references to other tokens rather
 // than baked-in values, so a scoped CSS override of a base token re-themes the
 // subtree that references it. The CSS cascade resolves those references, but
-// non-CSS consumers (canvas, SVG, data-viz) need the concrete value. These
-// helpers replay the same resolution in JS: follow `var()` references through
-// the resolved token map (iteratively, guarding against cycles) and evaluate
-// the CSS color functions used by the theme generator against those values.
-
-/** Index of the `)` matching the `(` at `openIndex`, or -1 when unbalanced. */
-function findMatchingParen(input, openIndex) {
-  let depth = 0;
-  for (let i = openIndex; i < input.length; i++) {
-    const char = input[i];
-    if (char === '(') {
-      depth++;
-    } else if (char === ')') {
-      depth--;
-      if (depth === 0) {
-        return i;
-      }
-    }
-  }
-  return -1;
-}
+// non-CSS consumers (canvas, SVG, data-viz) need the concrete value. The same
+// resolution replays in JS: tokenReferences.ts follows `var()` references
+// through the resolved token map (guarding against cycles), and these helpers
+// evaluate the CSS color functions used by the theme generator against those
+// values.
 
 /** Split a color-mix component into its color and optional percentage. */
 function parseMixComponent(part) {
@@ -262,73 +209,6 @@ function evaluateColorFunctions(expr) {
   return expr.slice(0, idx) + replacement + evaluateColorFunctions(expr.slice(closeIndex + 1));
 }
 
-/**
- * Substitute `var(--name[, fallback])` references with their resolved values.
- * `seen` tracks the reference chain so cycles resolve to the literal reference
- * instead of recursing forever.
- */
-function substituteVars(expr, raw, cache, seen) {
-  const start = expr.indexOf('var(');
-  if (start === -1) {
-    return expr;
-  }
-  const openIndex = start + 'var'.length;
-  const closeIndex = findMatchingParen(expr, openIndex);
-  if (closeIndex === -1) {
-    return expr;
-  }
-  const inner = expr.slice(openIndex + 1, closeIndex);
-  const commaSplit = splitTopLevelComma(inner);
-  const name = (commaSplit ? commaSplit[0] : inner).trim();
-  const fallback = commaSplit ? commaSplit[1] : null;
-  let replacement;
-  if (seen.has(name)) {
-    replacement = expr.slice(start, closeIndex + 1);
-  } else if (name in raw) {
-    seen.add(name);
-    replacement = resolveReference(name, raw, cache, seen);
-    seen.delete(name);
-  } else if (fallback !== null) {
-    replacement = substituteVars(fallback.trim(), raw, cache, seen);
-  } else {
-    replacement = expr.slice(start, closeIndex + 1);
-  }
-  const rest = substituteVars(expr.slice(closeIndex + 1), raw, cache, seen);
-  return expr.slice(0, start) + replacement + rest;
-}
-
-/** Fully resolve a single expression: substitute references, then evaluate colors. */
-function resolveExpression(expr, raw, cache, seen) {
-  if (!expr.includes('var(') && !expr.includes('color-mix(')) {
-    return expr;
-  }
-  const substituted = substituteVars(expr, raw, cache, seen);
-  return evaluateColorFunctions(substituted);
-}
-
-/** Resolve one token by name, memoizing the result in `cache`. */
-function resolveReference(name, raw, cache, seen) {
-  if (name in cache) {
-    return cache[name];
-  }
-  const value = raw[name];
-  if (value === undefined) {
-    return '';
-  }
-  const resolved = resolveExpression(value, raw, cache, seen);
-  cache[name] = resolved;
-  return resolved;
-}
-
-/** Resolve every reference/color function in a raw token map to concrete values. */
-function resolveReferences(raw) {
-  const cache = {};
-  for (const name of Object.keys(raw)) {
-    resolveReference(name, raw, cache, new Set());
-  }
-  return cache;
-}
-
 /**
  * Resolve all Astryx token values for a theme and effective color mode.
  *
@@ -352,7 +232,7 @@ export function resolveThemeTokens(theme, options) {
     resolved[key] = resolveXDSTokenValue(value, mode);
   }
   if (theme == null) {
-    return resolveReferences(resolved);
+    return resolveTokenReferences(resolved, evaluateColorFunctions);
   }
 
   // A theme's local tokens resolve its references to them, then leave the
@@ -378,7 +258,7 @@ export function resolveThemeTokens(theme, options) {
       }
     }
   }
-  return Object.fromEntries(Object.entries(resolveReferences(resolved)).filter(([key]) => !localKeys.has(key)));
+  return Object.fromEntries(Object.entries(resolveTokenReferences(resolved, evaluateColorFunctions)).filter(([key]) => !localKeys.has(key)));
 }
 
 /** Resolve one Astryx token value for a theme and effective color mode. */

package/dist/theme/tokens.stylex.d.ts

@@ -340,10 +340,22 @@ export declare const durationVars: stylex.VarGroup<Readonly<{
 export type DurationVarName = keyof typeof durationDefaults;
 export declare const easeDefaults: {
     readonly '--ease-standard': "cubic-bezier(0.24, 1, 0.4, 1)";
+    /**
+     * Entrances: a layer or element arriving. A theme's `character` sets it
+     * (spec:AST-108 FR2); at `'standard'` it equals --ease-standard.
+     */
+    readonly '--ease-entrance': "cubic-bezier(0.24, 1, 0.4, 1)";
+    /**
+     * Moves: an element changing place or size on screen. A theme's
+     * `character` sets it; at `'standard'` it equals --ease-standard.
+     */
+    readonly '--ease-move': "cubic-bezier(0.24, 1, 0.4, 1)";
     readonly '--ease-exit': "cubic-bezier(0.3, 0, 0.6, 0.6)";
 };
 export declare const easeVars: stylex.VarGroup<Readonly<{
     readonly '--ease-standard': "cubic-bezier(0.24, 1, 0.4, 1)";
+    readonly '--ease-entrance': "cubic-bezier(0.24, 1, 0.4, 1)";
+    readonly '--ease-move': "cubic-bezier(0.24, 1, 0.4, 1)";
     readonly '--ease-exit': "cubic-bezier(0.3, 0, 0.6, 0.6)";
 }>, symbol>;
 export type EaseVarName = keyof typeof easeDefaults;

package/dist/theme/tokens.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.stylex.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAM3C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAmC,CAAC;AAS1D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;CAgBlB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;WAAqC,CAAC;AAM9D,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;WAAkC,CAAC;AAMxD,eAAO,MAAM,cAAc;;CAEjB,CAAC;AAEX,eAAO,MAAM,UAAU;;WAAoC,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAWxD,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;WAAmC,CAAC;AAM1D,eAAO,MAAM,cAAc;;;;;;;;CAWjB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;WAAoC,CAAC;AAQ5D,eAAO,MAAM,cAAc;;;;;;;;;CAejB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;WAAoC,CAAC;AAU5D,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;WAAsC,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAU5D,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,eAAO,MAAM,QAAQ;;;WAAkC,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AAKpD,eAAO,MAAM,kBAAkB;;;;CAMrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;WAAwC,CAAC;AAMpE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAcnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;WAAsC,CAAC;AAMhE,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;WAAwC,CAAC;AAMpE,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AACpD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAChE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC5D,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAehE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DpB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAuC,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC"}
+{"version":3,"file":"tokens.stylex.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAM3C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAmC,CAAC;AAS1D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;CAgBlB,CAAC;AAEX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;WAAqC,CAAC;AAM9D,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;WAAkC,CAAC;AAMxD,eAAO,MAAM,cAAc;;CAEjB,CAAC;AAEX,eAAO,MAAM,UAAU;;WAAoC,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAWxD,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;WAAmC,CAAC;AAM1D,eAAO,MAAM,cAAc;;;;;;;;CAWjB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;WAAoC,CAAC;AAQ5D,eAAO,MAAM,cAAc;;;;;;;;;CAejB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;WAAoC,CAAC;AAU5D,eAAO,MAAM,gBAAgB;;;;;;;;;;CAUnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;WAAsC,CAAC;AAEhE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAU5D,eAAO,MAAM,YAAY;;IAEvB;;;OAGG;;IAEH;;;OAGG;;;CAGK,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;;WAAkC,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AAKpD,eAAO,MAAM,kBAAkB;;;;CAMrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;WAAwC,CAAC;AAMpE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;CAcnB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;WAAsC,CAAC;AAMhE,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;WAAwC,CAAC;AAMpE,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AACpD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAChE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC5D,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAehE,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DpB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAuC,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC"}

package/dist/theme/tokens.stylex.js

@@ -455,10 +455,22 @@ export const durationVars = {
 
 export const easeDefaults = {
   '--ease-standard': 'cubic-bezier(0.24, 1, 0.4, 1)',
+  /**
+   * Entrances: a layer or element arriving. A theme's `character` sets it
+   * (spec:AST-108 FR2); at `'standard'` it equals --ease-standard.
+   */
+  '--ease-entrance': 'cubic-bezier(0.24, 1, 0.4, 1)',
+  /**
+   * Moves: an element changing place or size on screen. A theme's
+   * `character` sets it; at `'standard'` it equals --ease-standard.
+   */
+  '--ease-move': 'cubic-bezier(0.24, 1, 0.4, 1)',
   '--ease-exit': 'cubic-bezier(0.3, 0, 0.6, 0.6)'
 };
 export const easeVars = {
   "--ease-standard": "var(--ease-standard)",
+  "--ease-entrance": "var(--ease-entrance)",
+  "--ease-move": "var(--ease-move)",
   "--ease-exit": "var(--ease-exit)",
   __varGroupHash__: "xf09i69"
 };

package/dist/utils/focusReturn.d.ts

@@ -1,3 +1,15 @@
+/**
+ * @file focusReturn.ts
+ * @input The document's current active element and the shared interaction
+ *   modality.
+ * @output Whether focus is currently "detached" — on nothing in particular —
+ *   and a focus move whose ring follows the last input.
+ * @position Utility; used by overlay triggers (e.g. DateInput, DateTimeInput)
+ *   that return focus to their control when the overlay closes, but only when
+ *   the dismiss did not already move focus somewhere the user chose, and by
+ *   overlays (Dialog, DropdownMenu) that move focus programmatically.
+ */
+import { type InteractionModality } from './interactionModality.js';
 /**
  * True when focus rests on nothing in particular — no active element, or the
  * document body / root element.
@@ -21,8 +33,12 @@ export declare function isFocusDetached(doc?: Document): boolean;
  * autofocus target, the control that opened a Dialog, or a menu trigger the
  * caller renders. Pass `options` (for example `preventScroll`) as to `focus()`.
  *
+ * `modality` defaults to the page's last input. A caller moving focus inside a
+ * second document (a same-origin iframe, a Document Picture-in-Picture window)
+ * passes that document's, which it tracks with `trackInteractionModalityIn`.
+ *
  * Make sure modality tracking is active (`useInteractionModalityTracking()`)
  * in the component that calls this.
  */
-export declare function focusForLastInput(element: HTMLElement, options?: FocusOptions): void;
+export declare function focusForLastInput(element: HTMLElement, options?: FocusOptions, modality?: InteractionModality): void;
 //# sourceMappingURL=focusReturn.d.ts.map

package/dist/utils/focusReturn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focusReturn.d.ts","sourceRoot":"","sources":["../../src/utils/focusReturn.ts"],"names":[],"mappings":"AAgBA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,GAAG,GAAE,QAAmB,GAAG,OAAO,CAKjE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,WAAW,EACpB,OAAO,CAAC,EAAE,YAAY,GACrB,IAAI,CAwBN"}
+{"version":3,"file":"focusReturn.d.ts","sourceRoot":"","sources":["../../src/utils/focusReturn.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,uBAAuB,CAAC;AAE/B;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,GAAG,GAAE,QAAmB,GAAG,OAAO,CAKjE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,WAAW,EACpB,OAAO,CAAC,EAAE,YAAY,EACtB,QAAQ,GAAE,mBAA8C,GACvD,IAAI,CA2BN"}

package/dist/utils/focusReturn.js

@@ -41,14 +41,21 @@ export function isFocusDetached(doc = document) {
  * autofocus target, the control that opened a Dialog, or a menu trigger the
  * caller renders. Pass `options` (for example `preventScroll`) as to `focus()`.
  *
+ * `modality` defaults to the page's last input. A caller moving focus inside a
+ * second document (a same-origin iframe, a Document Picture-in-Picture window)
+ * passes that document's, which it tracks with `trackInteractionModalityIn`.
+ *
  * Make sure modality tracking is active (`useInteractionModalityTracking()`)
  * in the component that calls this.
  */
-export function focusForLastInput(element, options) {
+export function focusForLastInput(element, options, modality = getInteractionModality()) {
   // A text-entry field paints its own focus treatment to show where typing
-  // goes, and an extra blur there can run validation or mark it touched.
-  const isTextEntry = element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement || element.isContentEditable;
-  if (isTextEntry || getInteractionModality() !== 'pointer') {
+  // goes, and an extra blur there can run validation or mark it touched. The
+  // field's own window: one in an iframe or a Picture-in-Picture window is
+  // never an instance of the page's constructors.
+  const view = element.ownerDocument.defaultView ?? window;
+  const isTextEntry = element instanceof view.HTMLInputElement || element instanceof view.HTMLTextAreaElement || element instanceof view.HTMLSelectElement || element.isContentEditable;
+  if (isTextEntry || modality !== 'pointer') {
     if (options === undefined) {
       element.focus();
     } else {

package/dist/utils/getNodeText.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+/**
+ * The plain text a node renders through strings, numbers and element
+ * children, joined with spaces. Text a component renders internally, from
+ * props other than `children`, is not reachable and yields `''`.
+ */
+export declare function getNodeText(node: ReactNode): string;
+//# sourceMappingURL=getNodeText.d.ts.map

package/dist/utils/getNodeText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getNodeText.d.ts","sourceRoot":"","sources":["../../src/utils/getNodeText.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAkBnD"}

package/dist/utils/getNodeText.js

@@ -0,0 +1,37 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file getNodeText.ts
+ * @input Receives a React node
+ * @output Exports getNodeText, the node's plain text
+ * @position Shared utility; consumed where a rendered node also needs a
+ *   spoken name (Toast announcements, Table column-resize handle names)
+ */
+
+import { isValidElement } from 'react';
+/**
+ * The plain text a node renders through strings, numbers and element
+ * children, joined with spaces. Text a component renders internally, from
+ * props other than `children`, is not reachable and yields `''`.
+ */
+export function getNodeText(node) {
+  if (node == null || typeof node === 'boolean') {
+    return '';
+  }
+  if (typeof node === 'string') {
+    return node;
+  }
+  if (typeof node === 'number') {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(getNodeText).filter(Boolean).join(' ');
+  }
+  if (/*#__PURE__*/isValidElement(node)) {
+    const {
+      children
+    } = node.props;
+    return getNodeText(children);
+  }
+  return '';
+}

package/dist/utils/interactionModality.d.ts

@@ -2,8 +2,17 @@ export type InteractionModality = 'keyboard' | 'pointer';
 declare function trackInteractionModality(): () => void;
 /** Activate shared modality tracking when the first consumer mounts. */
 export declare function useInteractionModalityTracking(): void;
-/** How the user last interacted with the page. */
-export declare function getInteractionModality(): InteractionModality;
+/**
+ * Track a second document while a consumer there is mounted: a component an
+ * app renders into a same-origin iframe or a Document Picture-in-Picture
+ * window gets input there that never reaches the page's listeners. The first
+ * consumer installs the document's listener pair and the last one's cleanup
+ * removes it. Read the value with `getInteractionModality(doc)`. The page's
+ * own document keeps its document-lifetime listeners.
+ */
+export declare function trackInteractionModalityIn(targetDocument: Document): () => void;
+/** How the user last interacted with the page, or with `targetDocument`. */
+export declare function getInteractionModality(targetDocument?: Document): InteractionModality;
 /** Test-only: restore the initial state between cases. */
 export declare function __resetInteractionModalityForTest(): void;
 /** Test-only: activate the tracker without rendering a hook. */

package/dist/utils/interactionModality.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interactionModality.d.ts","sourceRoot":"","sources":["../../src/utils/interactionModality.ts"],"names":[],"mappings":"AAkCA,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,SAAS,CAAC;AA8CzD,iBAAS,wBAAwB,IAAI,MAAM,IAAI,CAsB9C;AAED,wEAAwE;AACxE,wBAAgB,8BAA8B,IAAI,IAAI,CAErD;AAED,kDAAkD;AAClD,wBAAgB,sBAAsB,IAAI,mBAAmB,CAI5D;AAED,0DAA0D;AAC1D,wBAAgB,iCAAiC,IAAI,IAAI,CAIxD;AAED,gEAAgE;AAChE,eAAO,MAAM,yCAAyC,iCAC5B,CAAC"}
+{"version":3,"file":"interactionModality.d.ts","sourceRoot":"","sources":["../../src/utils/interactionModality.ts"],"names":[],"mappings":"AAwCA,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,SAAS,CAAC;AAgDzD,iBAAS,wBAAwB,IAAI,MAAM,IAAI,CAsB9C;AAED,wEAAwE;AACxE,wBAAgB,8BAA8B,IAAI,IAAI,CAErD;AAED;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,QAAQ,GACvB,MAAM,IAAI,CAkCZ;AAED,4EAA4E;AAC5E,wBAAgB,sBAAsB,CACpC,cAAc,CAAC,EAAE,QAAQ,GACxB,mBAAmB,CAOrB;AAED,0DAA0D;AAC1D,wBAAgB,iCAAiC,IAAI,IAAI,CAIxD;AAED,gEAAgE;AAChE,eAAO,MAAM,yCAAyC,iCAC5B,CAAC"}

package/dist/utils/interactionModality.js

@@ -6,7 +6,9 @@
  * @file interactionModality.ts
  * @input Global pointerdown/keydown events
  * @output `useInteractionModalityTracking()` activates document-lifetime tracking;
- *   `getInteractionModality()` reads how the user last interacted
+ *   `getInteractionModality()` reads how the user last interacted;
+ *   `trackInteractionModalityIn(doc)` and `getInteractionModality(doc)` do the
+ *   same for a second document
  * @position Internal document-wide singleton; used where `:focus-visible` alone
  *   is too broad
  *
@@ -26,8 +28,12 @@
  * The store lives on `document`, so duplicate Astryx bundles share one state
  * value and one listener pair. The first mounted consumer activates tracking;
  * the listeners then remain for the document lifetime so input during a gap
- * between consumers is not lost. Importing this module has no DOM side effects,
- * and server rendering keeps the keyboard-safe default.
+ * between consumers is not lost. A second document (a same-origin iframe, a
+ * Document Picture-in-Picture window) gets its own store when a component
+ * tracks it, since input there never reaches the page's listeners; its
+ * listeners stay only while a consumer there is mounted. Importing this module
+ * has no DOM side effects, and server rendering keeps the keyboard-safe
+ * default.
  */
 import { useEffect } from 'react';
 const interactionModalityStoreKey = Symbol.for('@astryxdesign/core/interaction-modality/v1');
@@ -89,8 +95,55 @@ export function useInteractionModalityTracking() {
   useEffect(() => trackInteractionModality(), []);
 }
 
-/** How the user last interacted with the page. */
-export function getInteractionModality() {
+/**
+ * Track a second document while a consumer there is mounted: a component an
+ * app renders into a same-origin iframe or a Document Picture-in-Picture
+ * window gets input there that never reaches the page's listeners. The first
+ * consumer installs the document's listener pair and the last one's cleanup
+ * removes it. Read the value with `getInteractionModality(doc)`. The page's
+ * own document keeps its document-lifetime listeners.
+ */
+export function trackInteractionModalityIn(targetDocument) {
+  if (typeof document !== 'undefined' && targetDocument === document) {
+    return trackInteractionModality();
+  }
+  const store = getStore(targetDocument);
+  store.consumers = (store.consumers ?? 0) + 1;
+  if (store.consumers === 1) {
+    store.isListening = true;
+    targetDocument.addEventListener('pointerdown', store.onPointerDown, {
+      capture: true,
+      passive: true
+    });
+    targetDocument.addEventListener('keydown', store.onKeyDown, {
+      capture: true,
+      passive: true
+    });
+  }
+  let isReleased = false;
+  return () => {
+    if (isReleased) {
+      return;
+    }
+    isReleased = true;
+    store.consumers = (store.consumers ?? 1) - 1;
+    if (store.consumers === 0) {
+      store.isListening = false;
+      targetDocument.removeEventListener('pointerdown', store.onPointerDown, {
+        capture: true
+      });
+      targetDocument.removeEventListener('keydown', store.onKeyDown, {
+        capture: true
+      });
+    }
+  };
+}
+
+/** How the user last interacted with the page, or with `targetDocument`. */
+export function getInteractionModality(targetDocument) {
+  if (targetDocument != null) {
+    return getStore(targetDocument).modality;
+  }
   return typeof document === 'undefined' ? 'keyboard' : getStore(document).modality;
 }
 

package/dist/utils/interactionOverlay.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interactionOverlay.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/interactionOverlay.stylex.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;WAEpB,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW;IACtB,iEAAiE;;CAEjE,CAAC;AAoGH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HnC,CAAC"}
+{"version":3,"file":"interactionOverlay.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/interactionOverlay.stylex.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;WAEpB,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW;IACtB,iEAAiE;;CAEjE,CAAC;AA6GH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8HnC,CAAC"}