@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/theme/themeAdaptations.js

@@ -3,7 +3,8 @@
 /**
  * @file themeAdaptations.ts
  * @input Ordered environment-conditioned theme value rules from defineTheme
- * @output Validated breakpoint metadata and resolved CSS-first rule layers
+ * @output Validated breakpoint metadata, the compact definition, and resolved
+ *   CSS-first rule layers
  * @position Theme system core; consumed by defineTheme, AppShell, and the CSS compiler
  *
  * Adaptations are deliberately closed and ordered. Width points are fixed names,
@@ -46,6 +47,34 @@ export const DEFAULT_WIDTH_BREAKPOINTS = Object.freeze({
   '2xl': 1536
 });
 
+/**
+ * When a screen is compact, for a component that chooses a presentation by
+ * screen size (`spec:AST-012` FR9): width below the theme's effective `md`
+ * point, or height below 500. The numbers are the same on every platform (CSS
+ * pixels on the web, points on iOS, density-independent pixels on Android).
+ */
+
+/** The viewport height below which a screen is compact (`spec:AST-012` FR9). */
+const COMPACT_HEIGHT_BELOW = 500;
+
+/**
+ * The compact definition for a theme's width points (`spec:AST-012` FR9).
+ * Pass a theme's effective width breakpoints; omit them for the defaults.
+ */
+export function compactDefinition(points = DEFAULT_WIDTH_BREAKPOINTS) {
+  const width = `(width < ${points.md}px)`;
+  const height = `(height < ${COMPACT_HEIGHT_BELOW}px)`;
+  return Object.freeze({
+    widthBelow: points.md,
+    heightBelow: COMPACT_HEIGHT_BELOW,
+    query: `${width}, ${height}`,
+    coarsePointerQuery: `${width} and (pointer: coarse), ${height} and (pointer: coarse)`
+  });
+}
+
+/** The compact definition at the default width points. */
+export const DEFAULT_COMPACT_DEFINITION = compactDefinition();
+
 /** Inclusive lower and exclusive upper edges for one width condition. */
 
 /** Closed environmental condition vocabulary. Fields are ANDed. */

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;AAGvB,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,CAyBxB;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;;;;;;;;;;;;;;;;;;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"}

package/dist/theme/tokens.js

@@ -22,6 +22,7 @@
 
 import { tokenDefaults } from "./defineTheme.js";
 import { parseColor, formatColor } from "../utils/color.js";
+import { generatedScopedStatusRoleDefaults } from "./generateThemeRules.js";
 
 /** Resolved color mode used when choosing the side of light/dark token values. */
 
@@ -353,6 +354,20 @@ export function resolveThemeTokens(theme, options) {
   if (theme == null) {
     return resolveReferences(resolved);
   }
+
+  // A theme's local tokens resolve its references to them, then leave the
+  // result: they are theme-local names, not Astryx tokens.
+  const localKeys = new Set(Object.keys(theme.localTokens ?? {}));
+  for (const [key, value] of Object.entries(theme.localTokens ?? {})) {
+    resolved[key] = resolveXDSTokenValue(value, mode);
+  }
+
+  // Status roles the theme leaves unset resolve as its generated root CSS
+  // declares them (architecture:theme-compilation INV16 and INV17), so
+  // JavaScript and CSS agree (architecture:theme-tokens INV6).
+  for (const [key, value] of generatedScopedStatusRoleDefaults(theme.tokens, theme.localTokens ?? {})) {
+    resolved[key] = resolveXDSTokenValue(value, mode);
+  }
   for (const [key, value] of Object.entries(theme.tokens)) {
     resolved[key] = resolveXDSTokenValue(value, mode);
   }
@@ -363,7 +378,7 @@ export function resolveThemeTokens(theme, options) {
       }
     }
   }
-  return resolveReferences(resolved);
+  return Object.fromEntries(Object.entries(resolveReferences(resolved)).filter(([key]) => !localKeys.has(key)));
 }
 
 /** Resolve one Astryx token value for a theme and effective color mode. */

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

@@ -39,15 +39,34 @@ export declare const colorDefaults: {
     readonly '--color-background-popover': "light-dark(#FFFFFF, #28292C)";
     readonly '--color-background-inverted': "light-dark(#0A1317, #FFFFFF)";
     readonly '--color-background-error-inverted': "light-dark(#AA071E, #E3193B)";
+    readonly '--color-info': "light-dark(#0064E0, #0064E0)";
+    readonly '--color-info-muted': "light-dark(#0082FB33, #0082FB3F)";
+    readonly '--color-on-info': "light-dark(#FFFFFF, #FFFFFF)";
     readonly '--color-success': "light-dark(#0D8626, #0D8626)";
     readonly '--color-success-muted': "light-dark(#0B991F33, #0B991F3F)";
     readonly '--color-on-success': "light-dark(#FFFFFF, #FFFFFF)";
     readonly '--color-error': "light-dark(#E3193B, #F5394F)";
     readonly '--color-error-muted': "light-dark(#E3193B33, #F5394F3F)";
-    readonly '--color-on-error': "light-dark(#FFFFFF, #FFFFFF)";
+    readonly '--color-on-error': "light-dark(#FFFFFF, #0A1317)";
     readonly '--color-warning': "light-dark(#E9AF08, #F2C00B)";
     readonly '--color-warning-muted': "light-dark(#E2A40033, #E2A4003F)";
     readonly '--color-on-warning': "light-dark(#0A1317, #0A1317)";
+    readonly '--color-text-info': "var(--color-text-blue)";
+    readonly '--color-text-success': "var(--color-text-green)";
+    readonly '--color-text-warning': "var(--color-text-yellow)";
+    readonly '--color-text-error': "var(--color-text-red)";
+    readonly '--color-icon-info': "var(--color-text-info)";
+    readonly '--color-icon-success': "var(--color-text-success)";
+    readonly '--color-icon-warning': "var(--color-text-warning)";
+    readonly '--color-icon-error': "var(--color-text-error)";
+    readonly '--color-border-info': "var(--color-text-info)";
+    readonly '--color-border-success': "var(--color-text-success)";
+    readonly '--color-border-warning': "var(--color-text-warning)";
+    readonly '--color-border-error': "var(--color-text-error)";
+    readonly '--color-on-info-muted': "var(--color-text-blue)";
+    readonly '--color-on-success-muted': "var(--color-text-green)";
+    readonly '--color-on-warning-muted': "var(--color-text-yellow)";
+    readonly '--color-on-error-muted': "var(--color-text-red)";
     readonly '--color-border': "light-dark(#05365919, #F2F4F619)";
     readonly '--color-border-emphasized': "light-dark(#CCD3DB, #494D53)";
     readonly '--color-skeleton': "light-dark(#CCD3DB, #5A5E66)";
@@ -120,15 +139,34 @@ export declare const colorVars: stylex.VarGroup<Readonly<{
     readonly '--color-background-popover': "light-dark(#FFFFFF, #28292C)";
     readonly '--color-background-inverted': "light-dark(#0A1317, #FFFFFF)";
     readonly '--color-background-error-inverted': "light-dark(#AA071E, #E3193B)";
+    readonly '--color-info': "light-dark(#0064E0, #0064E0)";
+    readonly '--color-info-muted': "light-dark(#0082FB33, #0082FB3F)";
+    readonly '--color-on-info': "light-dark(#FFFFFF, #FFFFFF)";
     readonly '--color-success': "light-dark(#0D8626, #0D8626)";
     readonly '--color-success-muted': "light-dark(#0B991F33, #0B991F3F)";
     readonly '--color-on-success': "light-dark(#FFFFFF, #FFFFFF)";
     readonly '--color-error': "light-dark(#E3193B, #F5394F)";
     readonly '--color-error-muted': "light-dark(#E3193B33, #F5394F3F)";
-    readonly '--color-on-error': "light-dark(#FFFFFF, #FFFFFF)";
+    readonly '--color-on-error': "light-dark(#FFFFFF, #0A1317)";
     readonly '--color-warning': "light-dark(#E9AF08, #F2C00B)";
     readonly '--color-warning-muted': "light-dark(#E2A40033, #E2A4003F)";
     readonly '--color-on-warning': "light-dark(#0A1317, #0A1317)";
+    readonly '--color-text-info': "var(--color-text-blue)";
+    readonly '--color-text-success': "var(--color-text-green)";
+    readonly '--color-text-warning': "var(--color-text-yellow)";
+    readonly '--color-text-error': "var(--color-text-red)";
+    readonly '--color-icon-info': "var(--color-text-info)";
+    readonly '--color-icon-success': "var(--color-text-success)";
+    readonly '--color-icon-warning': "var(--color-text-warning)";
+    readonly '--color-icon-error': "var(--color-text-error)";
+    readonly '--color-border-info': "var(--color-text-info)";
+    readonly '--color-border-success': "var(--color-text-success)";
+    readonly '--color-border-warning': "var(--color-text-warning)";
+    readonly '--color-border-error': "var(--color-text-error)";
+    readonly '--color-on-info-muted': "var(--color-text-blue)";
+    readonly '--color-on-success-muted': "var(--color-text-green)";
+    readonly '--color-on-warning-muted': "var(--color-text-yellow)";
+    readonly '--color-on-error-muted': "var(--color-text-red)";
     readonly '--color-border': "light-dark(#05365919, #F2F4F619)";
     readonly '--color-border-emphasized': "light-dark(#CCD3DB, #494D53)";
     readonly '--color-skeleton': "light-dark(#CCD3DB, #5A5E66)";
@@ -302,9 +340,11 @@ 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)";
+    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-exit': "cubic-bezier(0.3, 0, 0.6, 0.6)";
 }>, symbol>;
 export type EaseVarName = keyof typeof easeDefaults;
 export declare const typographyDefaults: {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHhB,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;AAM5D,eAAO,MAAM,YAAY;;CAEf,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;;;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"}

package/dist/theme/tokens.stylex.js

@@ -51,16 +51,42 @@ export const colorDefaults = {
   '--color-background-popover': 'light-dark(#FFFFFF, #28292C)',
   '--color-background-inverted': 'light-dark(#0A1317, #FFFFFF)',
   '--color-background-error-inverted': 'light-dark(#AA071E, #E3193B)',
-  // Status/Sentiment
+  // Status fills (architecture:theme-tokens INV11). Each `--color-<status>` is
+  // the strong status fill, and `--color-on-<status>` is content on it at
+  // 4.5:1 or more. `-muted` is the pale fill, with `--color-on-<status>-muted`.
+  // Info is independent of the accent.
+  '--color-info': 'light-dark(#0064E0, #0064E0)',
+  '--color-info-muted': 'light-dark(#0082FB33, #0082FB3F)',
+  '--color-on-info': 'light-dark(#FFFFFF, #FFFFFF)',
   '--color-success': 'light-dark(#0D8626, #0D8626)',
   '--color-success-muted': 'light-dark(#0B991F33, #0B991F3F)',
   '--color-on-success': 'light-dark(#FFFFFF, #FFFFFF)',
   '--color-error': 'light-dark(#E3193B, #F5394F)',
   '--color-error-muted': 'light-dark(#E3193B33, #F5394F3F)',
-  '--color-on-error': 'light-dark(#FFFFFF, #FFFFFF)',
+  // Dark error is light enough that white misses 4.5:1, so its content is dark.
+  '--color-on-error': 'light-dark(#FFFFFF, #0A1317)',
   '--color-warning': 'light-dark(#E9AF08, #F2C00B)',
   '--color-warning-muted': 'light-dark(#E2A40033, #E2A4003F)',
   '--color-on-warning': 'light-dark(#0A1317, #0A1317)',
+  // Status text on the default page and card surfaces, 4.5:1 or more.
+  '--color-text-info': 'var(--color-text-blue)',
+  '--color-text-success': 'var(--color-text-green)',
+  '--color-text-warning': 'var(--color-text-yellow)',
+  '--color-text-error': 'var(--color-text-red)',
+  // Status icons and borders on those surfaces follow the text role.
+  '--color-icon-info': 'var(--color-text-info)',
+  '--color-icon-success': 'var(--color-text-success)',
+  '--color-icon-warning': 'var(--color-text-warning)',
+  '--color-icon-error': 'var(--color-text-error)',
+  '--color-border-info': 'var(--color-text-info)',
+  '--color-border-success': 'var(--color-text-success)',
+  '--color-border-warning': 'var(--color-text-warning)',
+  '--color-border-error': 'var(--color-text-error)',
+  // Content on pale status fills.
+  '--color-on-info-muted': 'var(--color-text-blue)',
+  '--color-on-success-muted': 'var(--color-text-green)',
+  '--color-on-warning-muted': 'var(--color-text-yellow)',
+  '--color-on-error-muted': 'var(--color-text-red)',
   // Border
   '--color-border': 'light-dark(#05365919, #F2F4F619)',
   '--color-border-emphasized': 'light-dark(#CCD3DB, #494D53)',
@@ -161,6 +187,9 @@ export const colorVars = {
   "--color-background-popover": "var(--color-background-popover)",
   "--color-background-inverted": "var(--color-background-inverted)",
   "--color-background-error-inverted": "var(--color-background-error-inverted)",
+  "--color-info": "var(--color-info)",
+  "--color-info-muted": "var(--color-info-muted)",
+  "--color-on-info": "var(--color-on-info)",
   "--color-success": "var(--color-success)",
   "--color-success-muted": "var(--color-success-muted)",
   "--color-on-success": "var(--color-on-success)",
@@ -170,6 +199,22 @@ export const colorVars = {
   "--color-warning": "var(--color-warning)",
   "--color-warning-muted": "var(--color-warning-muted)",
   "--color-on-warning": "var(--color-on-warning)",
+  "--color-text-info": "var(--color-text-info)",
+  "--color-text-success": "var(--color-text-success)",
+  "--color-text-warning": "var(--color-text-warning)",
+  "--color-text-error": "var(--color-text-error)",
+  "--color-icon-info": "var(--color-icon-info)",
+  "--color-icon-success": "var(--color-icon-success)",
+  "--color-icon-warning": "var(--color-icon-warning)",
+  "--color-icon-error": "var(--color-icon-error)",
+  "--color-border-info": "var(--color-border-info)",
+  "--color-border-success": "var(--color-border-success)",
+  "--color-border-warning": "var(--color-border-warning)",
+  "--color-border-error": "var(--color-border-error)",
+  "--color-on-info-muted": "var(--color-on-info-muted)",
+  "--color-on-success-muted": "var(--color-on-success-muted)",
+  "--color-on-warning-muted": "var(--color-on-warning-muted)",
+  "--color-on-error-muted": "var(--color-on-error-muted)",
   "--color-border": "var(--color-border)",
   "--color-border-emphasized": "var(--color-border-emphasized)",
   "--color-skeleton": "var(--color-skeleton)",
@@ -403,12 +448,18 @@ export const durationVars = {
 // =============================================================================
 // Motion Tokens — Easing
 // =============================================================================
+// --ease-standard decelerates: things arriving and state changes.
+// --ease-exit accelerates: things leaving. It moves off from rest (no rise at
+// the start) and is quickest as the surface leaves, so the travel lands inside
+// the duration instead of in its first few frames.
 
 export const easeDefaults = {
-  '--ease-standard': 'cubic-bezier(0.24, 1, 0.4, 1)'
+  '--ease-standard': '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-exit": "var(--ease-exit)",
   __varGroupHash__: "xf09i69"
 };
 // =============================================================================

package/dist/theme/useTheme.d.ts

@@ -60,10 +60,12 @@ export interface UseThemeReturn {
 export declare function useThemeName(): string | null;
 /**
  * Return the nearest theme object, falling back to the registered root theme
- * only when no provider context is available.
+ * only when no provider context is available. With `enabled` false it reads
+ * nothing and subscribes to nothing, for a consumer that needs the theme only
+ * in some configurations.
  * @internal
  */
-export declare function useThemeDefinition(): DefinedTheme | undefined;
+export declare function useThemeDefinition(enabled?: boolean): DefinedTheme | undefined;
 /**
  * Access the current Astryx theme's token values, resolved for the active color mode.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/theme/useTheme.ts"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AACvC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,eAAe,CAAC;AAUhD;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,KAAK,EAAE,YAAY,CAAC;IACpB,0CAA0C;IAC1C,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAO1E;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;;;OAaG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC;;;;;;;OAOG;IACH,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AA+HD;;;;;;;GAOG;AACH,wBAAgB,YAAY,IAAI,MAAM,GAAG,IAAI,CAM5C;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,YAAY,GAAG,SAAS,CAK7D;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,QAAQ,IAAI,cAAc,CAmCzC"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/theme/useTheme.ts"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AACvC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,eAAe,CAAC;AAUhD;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,KAAK,EAAE,YAAY,CAAC;IACpB,0CAA0C;IAC1C,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAO1E;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;;;OAaG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC;;;;;;;OAOG;IACH,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AA+HD;;;;;;;GAOG;AACH,wBAAgB,YAAY,IAAI,MAAM,GAAG,IAAI,CAM5C;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,UAAO,GAAG,YAAY,GAAG,SAAS,CAS3E;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,QAAQ,IAAI,cAAc,CAmCzC"}

package/dist/theme/useTheme.js

@@ -164,13 +164,19 @@ export function useThemeName() {
 
 /**
  * Return the nearest theme object, falling back to the registered root theme
- * only when no provider context is available.
+ * only when no provider context is available. With `enabled` false it reads
+ * nothing and subscribes to nothing, for a consumer that needs the theme only
+ * in some configurations.
  * @internal
  */
-export function useThemeDefinition() {
-  const ctx = use(ThemeContext);
+export function useThemeDefinition(enabled = true) {
+  // `use` may be called conditionally, unlike the other hooks.
+  const ctx = enabled ? use(ThemeContext) : null;
   const hasCtx = ctx != null;
-  const rootThemeName = useRootThemeNameAttr(hasCtx);
+  const rootThemeName = useRootThemeNameAttr(hasCtx || !enabled);
+  if (!enabled) {
+    return undefined;
+  }
   return ctx?.theme ?? getRegisteredTheme(rootThemeName) ?? undefined;
 }
 

package/dist/utils/edgeAutoscroll.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @file edgeAutoscroll.ts
+ * @input How far to scroll on the next tick, and a way to scroll that far
+ * @output `edgeAutoscroll`: the timer behind an edge autoscroll. While a
+ *   pointer rests near a scroll edge, the content scrolls toward it one step
+ *   per tick, until the step is 0 or an edge stops it
+ * @position Shared by the menu press model (hooks/useMenuPress.ts, its edge
+ *   autoscroll) and anything else that scrolls under a held pointer
+ *
+ * The caller owns the geometry: `step` reads where the pointer is and
+ * answers how far to scroll (0 when it is out of the edge zone), and
+ * `apply` scrolls and answers how far the content actually moved, so the
+ * caller can re-read what is under the pointer by exactly that much. An edge
+ * stops the timer (`apply` answers 0); nothing latches, so the next `update`
+ * starts it again whenever `step` is not 0.
+ */
+/** Options of `edgeAutoscroll`. */
+export interface EdgeAutoscrollOptions {
+    /** Milliseconds between ticks. */
+    readonly intervalMs: number;
+    /**
+     * The signed distance to scroll on the next tick (positive toward the end),
+     * read at every tick and by `update`; 0 stops the timer.
+     */
+    readonly step: () => number;
+    /**
+     * Scrolls by `delta` and returns how far the content actually moved; 0 (an
+     * edge) stops the timer.
+     */
+    readonly apply: (delta: number) => number;
+    /** Ticks once as the timer starts, rather than one interval later. @default false */
+    readonly immediate?: boolean;
+    /**
+     * Keeps to the interval's clock: a late timer catches up by one tick, a
+     * longer stall is skipped, as a run loop's missed timer fires are.
+     * @default false
+     */
+    readonly catchUp?: boolean;
+    /** The clock, in milliseconds. @default performance.now */
+    readonly now?: () => number;
+}
+/** A running or idle edge autoscroll. */
+export interface EdgeAutoscroll {
+    /** Starts the timer when `step` is not 0, and stops it when it is. */
+    update(): void;
+    /** Stops the timer. */
+    stop(): void;
+    /** Whether the timer runs. */
+    readonly isRunning: boolean;
+}
+/** An edge autoscroll; idle until `update` finds a step. */
+export declare function edgeAutoscroll(options: EdgeAutoscrollOptions): EdgeAutoscroll;
+//# sourceMappingURL=edgeAutoscroll.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"edgeAutoscroll.d.ts","sourceRoot":"","sources":["../../src/utils/edgeAutoscroll.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,mCAAmC;AACnC,MAAM,WAAW,qBAAqB;IACpC,kCAAkC;IAClC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,MAAM,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,qFAAqF;IACrF,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,2DAA2D;IAC3D,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,MAAM,CAAC;CAC7B;AAED,yCAAyC;AACzC,MAAM,WAAW,cAAc;IAC7B,sEAAsE;IACtE,MAAM,IAAI,IAAI,CAAC;IACf,uBAAuB;IACvB,IAAI,IAAI,IAAI,CAAC;IACb,8BAA8B;IAC9B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;CAC7B;AAED,4DAA4D;AAC5D,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,cAAc,CAsD7E"}

package/dist/utils/edgeAutoscroll.js

@@ -0,0 +1,81 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file edgeAutoscroll.ts
+ * @input How far to scroll on the next tick, and a way to scroll that far
+ * @output `edgeAutoscroll`: the timer behind an edge autoscroll. While a
+ *   pointer rests near a scroll edge, the content scrolls toward it one step
+ *   per tick, until the step is 0 or an edge stops it
+ * @position Shared by the menu press model (hooks/useMenuPress.ts, its edge
+ *   autoscroll) and anything else that scrolls under a held pointer
+ *
+ * The caller owns the geometry: `step` reads where the pointer is and
+ * answers how far to scroll (0 when it is out of the edge zone), and
+ * `apply` scrolls and answers how far the content actually moved, so the
+ * caller can re-read what is under the pointer by exactly that much. An edge
+ * stops the timer (`apply` answers 0); nothing latches, so the next `update`
+ * starts it again whenever `step` is not 0.
+ */
+
+/** Options of `edgeAutoscroll`. */
+
+/** A running or idle edge autoscroll. */
+
+/** An edge autoscroll; idle until `update` finds a step. */
+export function edgeAutoscroll(options) {
+  const {
+    intervalMs,
+    immediate = false,
+    catchUp = false
+  } = options;
+  const now = options.now ?? (() => performance.now());
+  let timer = null;
+  let base = 0;
+  let ticks = 0;
+  const stop = () => {
+    if (timer != null) {
+      clearInterval(timer);
+      timer = null;
+    }
+  };
+
+  // `onClock` is false for the tick `immediate` adds as the timer starts: it
+  // is not one of the interval's ticks, so it leaves the catch-up count alone.
+  const tick = onClock => {
+    const step = options.step();
+    if (step === 0) {
+      stop();
+      return;
+    }
+    let count = 1;
+    if (catchUp && onClock) {
+      const due = Math.floor((now() - base) / intervalMs);
+      count = Math.max(1, Math.min(2, due - ticks));
+      ticks = Math.max(ticks + count, due);
+    }
+    if (options.apply(step * count) === 0) {
+      stop();
+    }
+  };
+  return {
+    update() {
+      if (options.step() === 0) {
+        stop();
+        return;
+      }
+      if (timer != null) {
+        return;
+      }
+      base = now();
+      ticks = 0;
+      timer = setInterval(() => tick(true), intervalMs);
+      if (immediate) {
+        tick(false);
+      }
+    },
+    stop,
+    get isRunning() {
+      return timer != null;
+    }
+  };
+}

package/dist/utils/hitArea.d.ts

@@ -0,0 +1,72 @@
+/** A rect in client pixels. */
+export interface HitRect {
+    readonly left: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+}
+/** How far a hit area extends past its target on each side, px. */
+export interface HitInsets {
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+}
+/** The smallest touch target, px (Apple's 44 pt). */
+export declare const MIN_TOUCH_TARGET = 44;
+/** No growth: the hit area is the target. */
+export declare const NO_HIT_INSETS: HitInsets;
+/**
+ * The custom properties `writeHitInsets` sets, in px, for a coarse-only hit
+ * layer to read (`inset: calc(var(--astryx-hit-inset-top, 0px) * -1) ...`).
+ */
+export declare const HIT_INSET_PROPERTIES: {
+    readonly top: "--astryx-hit-inset-top";
+    readonly right: "--astryx-hit-inset-right";
+    readonly bottom: "--astryx-hit-inset-bottom";
+    readonly left: "--astryx-hit-inset-left";
+};
+/**
+ * How far `target` may grow on each side: toward `minSize` on each axis,
+ * centered, and on each side no further than half the gap to a neighbour.
+ * A neighbour counts when either one, at full growth toward `minSize`, would
+ * reach into the other's half of the gap, or their full areas would meet; it
+ * stops the side facing it, or,
+ * for a neighbour apart on both axes (diagonal), the side with the larger gap.
+ * That decision rests on the two rects alone, so the neighbour decides the
+ * same about this target and the two areas never overlap. A neighbour
+ * overlapping the target (an ancestor, an overlay) is not beside it and stops
+ * nothing.
+ */
+export declare function clampedHitInsets(target: HitRect, neighbours: ReadonlyArray<HitRect>, minSize?: number): HitInsets;
+/**
+ * Which of `rects` a touch at (x, y) is for: the nearest target (inside two
+ * overlapping targets, the one whose center is nearer), when the touch is
+ * within that target's growth toward `minSize`; -1 otherwise. Being nearest,
+ * it is on that target's side of every midpoint, corners included. For a
+ * group that measures its actions at press start.
+ */
+export declare function resolveHitTarget(x: number, y: number, rects: ReadonlyArray<HitRect>, minSize?: number): number;
+/** Sets `HIT_INSET_PROPERTIES` on `element`. */
+export declare function writeHitInsets(element: HTMLElement, insets: HitInsets): void;
+/** Options of `watchHitArea`. */
+export interface WatchHitAreaOptions {
+    /** The size to grow toward, px. @default 44 */
+    readonly minSize?: number;
+}
+/**
+ * Stops every watch and forgets them, for tests: no observer, listener or
+ * answer outlives a test that left a watch behind.
+ */
+export declare function resetHitAreaForTests(): void;
+/**
+ * Keeps `element`'s hit insets live until the returned function runs:
+ * `onInsets` hears each change (typically `writeHitInsets` on the control).
+ * Where the primary pointer is not coarse the insets are 0 and nothing but
+ * the pointer query is listened to; where it is, the element is measured
+ * while on screen, on resize (its own, its parent's, the window's) and once
+ * its parent's text and children settle after a change, all in the shared
+ * per-frame pass, and re-measured at once when a touch starts on it.
+ */
+export declare function watchHitArea(element: Element, onInsets: (insets: HitInsets) => void, { minSize }?: WatchHitAreaOptions): () => void;
+//# sourceMappingURL=hitArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hitArea.d.ts","sourceRoot":"","sources":["../../src/utils/hitArea.ts"],"names":[],"mappings":"AA+BA,+BAA+B;AAC/B,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,mEAAmE;AACnE,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,qDAAqD;AACrD,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,6CAA6C;AAC7C,eAAO,MAAM,aAAa,EAAE,SAAkD,CAAC;AAE/E;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;AAmCX;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,OAAO,EACf,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAClC,OAAO,GAAE,MAAyB,GACjC,SAAS,CA4CX;AAYD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,EAC7B,OAAO,GAAE,MAAyB,GACjC,MAAM,CAoBR;AAED,gDAAgD;AAChD,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,GAAG,IAAI,CAI5E;AAodD,iCAAiC;AACjC,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAW3C;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,EACrC,EAAC,OAA0B,EAAC,GAAE,mBAAwB,GACrD,MAAM,IAAI,CAyDZ"}