@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/theme/statusColor.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @file statusColor.ts
+ * @input Concrete sRGB colours (hex or rgb()) from resolved theme tokens
+ * @output Contrast, OKLCH, chroma, and lightness-solving helpers for status roles
+ * @position Pure colour maths shared by status-role derivation
+ *   (architecture:theme-compilation INV17) and the status contrast checks.
+ *
+ * Contrast follows WCAG 2.x relative luminance. Lightness adjustments move a
+ * colour along OKLCH lightness at its own hue, reducing chroma only as far as
+ * needed to stay inside sRGB, so a derived role keeps its status hue.
+ */
+import { type RGBA } from '../utils/color.js';
+export interface OKLCH {
+    l: number;
+    c: number;
+    h: number;
+}
+/** Composite a possibly translucent colour over an opaque backdrop. */
+export declare function composite(top: RGBA, under: RGBA): RGBA;
+/** WCAG relative luminance of an opaque colour. */
+export declare function relativeLuminance({ r, g, b }: RGBA): number;
+/** WCAG contrast ratio. A translucent foreground is composited over the background first. */
+export declare function contrastRatio(foreground: RGBA, background: RGBA): number;
+/** Convert opaque sRGB to OKLCH. */
+export declare function toOklch({ r, g, b }: RGBA): OKLCH;
+/** Convert OKLCH to sRGB, reducing chroma at the same lightness and hue until it fits. */
+export declare function fromOklch(color: OKLCH): RGBA;
+/** Lowest chroma and lightness band a status colour may occupy and still read as a hue. */
+export declare const STATUS_CHROMA_FLOOR = 0.03;
+export declare const STATUS_LIGHTNESS_RANGE: readonly [number, number];
+/**
+ * Whether a colour reads as a hue rather than a neutral grey, near-black, or
+ * near-white (architecture:theme-tokens INV11). Translucent colours are judged
+ * on their own channels.
+ */
+export declare function isChromatic(color: RGBA): boolean;
+/**
+ * Move `color` along OKLCH lightness, at its own hue, until it reaches
+ * `ratio` against every backdrop. Moves away from the backdrops' luminance;
+ * returns the colour unchanged when it already passes, or null when no
+ * lightness at that hue reaches the ratio.
+ */
+export declare function solveLightness(color: RGBA, backdrops: ReadonlyArray<RGBA>, ratio: number): RGBA | null;
+/** Parse a concrete colour, returning null for anything unresolved. */
+export declare function parseConcreteColor(value: string | undefined): RGBA | null;
+/** `#RRGGBB` or `#RRGGBBAA` for a colour. */
+export declare function toHex(color: RGBA): string;
+//# sourceMappingURL=statusColor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"statusColor.d.ts","sourceRoot":"","sources":["../../src/theme/statusColor.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,EAAwB,KAAK,IAAI,EAAC,MAAM,gBAAgB,CAAC;AAEhE,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAYD,uEAAuE;AACvE,wBAAgB,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAG,IAAI,CAQtD;AAED,mDAAmD;AACnD,wBAAgB,iBAAiB,CAAC,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,EAAE,IAAI,GAAG,MAAM,CAEzD;AAED,6FAA6F;AAC7F,wBAAgB,aAAa,CAAC,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,GAAG,MAAM,CASxE;AAED,oCAAoC;AACpC,wBAAgB,OAAO,CAAC,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,EAAE,IAAI,GAAG,KAAK,CAiB9C;AAeD,0FAA0F;AAC1F,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAc5C;AAED,2FAA2F;AAC3F,eAAO,MAAM,mBAAmB,OAAO,CAAC;AACxC,eAAO,MAAM,sBAAsB,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAe,CAAC;AAE7E;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,IAAI,GAAG,OAAO,CAOhD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,EAC9B,KAAK,EAAE,MAAM,GACZ,IAAI,GAAG,IAAI,CAgCb;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAEzE;AAED,6CAA6C;AAC7C,wBAAgB,KAAK,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,CAUzC"}

package/dist/theme/statusColor.js

@@ -0,0 +1,203 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file statusColor.ts
+ * @input Concrete sRGB colours (hex or rgb()) from resolved theme tokens
+ * @output Contrast, OKLCH, chroma, and lightness-solving helpers for status roles
+ * @position Pure colour maths shared by status-role derivation
+ *   (architecture:theme-compilation INV17) and the status contrast checks.
+ *
+ * Contrast follows WCAG 2.x relative luminance. Lightness adjustments move a
+ * colour along OKLCH lightness at its own hue, reducing chroma only as far as
+ * needed to stay inside sRGB, so a derived role keeps its status hue.
+ */
+
+import { formatHex, parseColor } from "../utils/color.js";
+const toLinear = v => {
+  const c = v / 255;
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+};
+const fromLinear = v => {
+  const c = v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
+  return c * 255;
+};
+
+/** Composite a possibly translucent colour over an opaque backdrop. */
+export function composite(top, under) {
+  const a = top.a;
+  return {
+    r: top.r * a + under.r * (1 - a),
+    g: top.g * a + under.g * (1 - a),
+    b: top.b * a + under.b * (1 - a),
+    a: 1
+  };
+}
+
+/** WCAG relative luminance of an opaque colour. */
+export function relativeLuminance({
+  r,
+  g,
+  b
+}) {
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+
+/** WCAG contrast ratio. A translucent foreground is composited over the background first. */
+export function contrastRatio(foreground, background) {
+  const bg = background.a < 1 ? composite(background, {
+    r: 255,
+    g: 255,
+    b: 255,
+    a: 1
+  }) : background;
+  const fg = foreground.a < 1 ? composite(foreground, bg) : foreground;
+  const a = relativeLuminance(fg);
+  const b = relativeLuminance(bg);
+  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+}
+
+/** Convert opaque sRGB to OKLCH. */
+export function toOklch({
+  r,
+  g,
+  b
+}) {
+  const lr = toLinear(r);
+  const lg = toLinear(g);
+  const lb = toLinear(b);
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  return {
+    l: L,
+    c: Math.hypot(A, B),
+    h: Math.atan2(B, A)
+  };
+}
+function oklchToLinear({
+  l: L,
+  c,
+  h
+}) {
+  const A = c * Math.cos(h);
+  const B = c * Math.sin(h);
+  const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3;
+  const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3;
+  const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3;
+  return [4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s];
+}
+
+/** Convert OKLCH to sRGB, reducing chroma at the same lightness and hue until it fits. */
+export function fromOklch(color) {
+  let c = color.c;
+  for (let i = 0; i < 40; i++) {
+    const rgb = oklchToLinear({
+      ...color,
+      c
+    });
+    if (rgb.every(v => v >= -1e-4 && v <= 1 + 1e-4)) {
+      const [r, g, b] = rgb.map(v => fromLinear(Math.min(1, Math.max(0, v))));
+      return {
+        r,
+        g,
+        b,
+        a: 1
+      };
+    }
+    c *= 0.9;
+  }
+  const [r, g, b] = oklchToLinear({
+    ...color,
+    c: 0
+  }).map(v => fromLinear(Math.min(1, Math.max(0, v))));
+  return {
+    r,
+    g,
+    b,
+    a: 1
+  };
+}
+
+/** Lowest chroma and lightness band a status colour may occupy and still read as a hue. */
+export const STATUS_CHROMA_FLOOR = 0.03;
+export const STATUS_LIGHTNESS_RANGE = [0.2, 0.95];
+
+/**
+ * Whether a colour reads as a hue rather than a neutral grey, near-black, or
+ * near-white (architecture:theme-tokens INV11). Translucent colours are judged
+ * on their own channels.
+ */
+export function isChromatic(color) {
+  const {
+    l,
+    c
+  } = toOklch(color);
+  return c >= STATUS_CHROMA_FLOOR && l >= STATUS_LIGHTNESS_RANGE[0] && l <= STATUS_LIGHTNESS_RANGE[1];
+}
+
+/**
+ * Move `color` along OKLCH lightness, at its own hue, until it reaches
+ * `ratio` against every backdrop. Moves away from the backdrops' luminance;
+ * returns the colour unchanged when it already passes, or null when no
+ * lightness at that hue reaches the ratio.
+ */
+export function solveLightness(color, backdrops, ratio) {
+  const passes = candidate => backdrops.every(backdrop => contrastRatio(candidate, backdrop) >= ratio);
+  const opaque = {
+    ...color,
+    a: 1
+  };
+  if (passes(opaque)) {
+    return opaque;
+  }
+  const meanLuminance = backdrops.reduce((sum, b) => sum + relativeLuminance(b), 0) / backdrops.length;
+  const base = toOklch(opaque);
+  // Light backdrops need a darker colour; dark backdrops a lighter one.
+  const darker = meanLuminance > 0.18;
+  let lo = darker ? 0 : base.l;
+  let hi = darker ? base.l : 1;
+  const at = l => fromOklch({
+    ...base,
+    l
+  });
+  const target = darker ? at(0) : at(1);
+  if (!passes(target)) {
+    return null;
+  }
+  // Binary search for the passing lightness closest to the original.
+  for (let i = 0; i < 32; i++) {
+    const mid = (lo + hi) / 2;
+    const ok = passes(at(mid));
+    if (darker) {
+      if (ok) {
+        lo = mid;
+      } else {
+        hi = mid;
+      }
+    } else if (ok) {
+      hi = mid;
+    } else {
+      lo = mid;
+    }
+  }
+  const solved = at(darker ? lo : hi);
+  return passes(solved) ? solved : target;
+}
+
+/** Parse a concrete colour, returning null for anything unresolved. */
+export function parseConcreteColor(value) {
+  return value === undefined ? null : parseColor(value);
+}
+
+/** `#RRGGBB` or `#RRGGBBAA` for a colour. */
+export function toHex(color) {
+  const hex = formatHex(color.r, color.g, color.b);
+  if (color.a >= 1) {
+    return hex;
+  }
+  const alpha = Math.round(color.a * 255).toString(16).padStart(2, '0').toUpperCase();
+  return `${hex}${alpha}`;
+}

package/dist/theme/statusRoleDerivation.d.ts

@@ -0,0 +1,11 @@
+export declare const STATUS_NAMES: readonly ["info", "success", "warning", "error"];
+export type StatusName = (typeof STATUS_NAMES)[number];
+/** The strong fill of a status, the source its other roles derive from. */
+export declare function statusSourceToken(status: StatusName): string;
+/**
+ * Concrete `light-dark()` values for every status role a theme leaves unset
+ * while setting a colour that role is measured against. Authored roles are
+ * never overridden.
+ */
+export declare function deriveStatusRoleTokens(tokens: Record<string, string>, localTokens?: Record<string, string>): [string, string][];
+//# sourceMappingURL=statusRoleDerivation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"statusRoleDerivation.d.ts","sourceRoot":"","sources":["../../src/theme/statusRoleDerivation.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,YAAY,kDAAmD,CAAC;AAC7E,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AASvD,2EAA2E;AAC3E,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,CAE5D;AAiMD;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,WAAW,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACvC,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAwCpB"}

package/dist/theme/statusRoleDerivation.js

@@ -0,0 +1,236 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file statusRoleDerivation.ts
+ * @input A theme's portable and local token maps
+ * @output Concrete values for the status roles the theme does not set
+ * @position Theme generation step for architecture:theme-compilation INV17,
+ *   called by generateThemeRules for runtime and static output alike.
+ *
+ * Each status (`info`, `success`, `warning`, `error`) has one strong fill,
+ * `--color-<status>`. A theme that sets a fill, its content, its pale fill, or
+ * a surface gets the roles it leaves unset, computed against its own colours:
+ * - `--color-on-<status>`: the theme's light or dark content colour
+ *   (`--color-on-dark` or `--color-on-light`), whichever contrasts more with
+ *   the fill, or pure white or black when neither reaches 4.5:1;
+ * - `--color-text-<status>`: the fill's hue at 4.5:1 on surface and card;
+ * - `--color-on-<status>-muted`: the fill's hue at 4.5:1 on the pale fill over
+ *   the surface.
+ * Fills are never derived: a fill a theme does not set is Core's. Icon and
+ * border roles alias the text role through the scoped status-role aliases in
+ * generateThemeRules, so they are not computed here.
+ */
+
+import { colorDefaults } from "./tokens.stylex.js";
+import { composite, contrastRatio, isChromatic, parseConcreteColor, solveLightness, toHex } from "./statusColor.js";
+export const STATUS_NAMES = ['info', 'success', 'warning', 'error'];
+const TEXT_RATIO = 4.5;
+// Solve slightly above the floor so rounding to #RRGGBB never lands below it.
+const SOLVE_RATIO = TEXT_RATIO + 0.08;
+const MODES = ['light', 'dark'];
+
+/** The strong fill of a status, the source its other roles derive from. */
+export function statusSourceToken(status) {
+  return `--color-${status}`;
+}
+function splitTopLevel(input) {
+  const parts = [];
+  let depth = 0;
+  let current = '';
+  for (const ch of input) {
+    if (ch === '(') {
+      depth++;
+    }
+    if (ch === ')') {
+      depth--;
+    }
+    if (ch === ',' && depth === 0) {
+      parts.push(current.trim());
+      current = '';
+      continue;
+    }
+    current += ch;
+  }
+  parts.push(current.trim());
+  return parts;
+}
+
+/**
+ * Resolve one token to a concrete value for a mode, following `light-dark()`
+ * and `var()` through the theme's tokens and then Core's colour defaults.
+ * This stays local (rather than using tokens.ts) so theme generation does not
+ * import the runtime token helpers that themselves depend on defineTheme.
+ */
+function resolveToken(tokens, name, mode, seen = new Set()) {
+  if (seen.has(name)) {
+    return undefined;
+  }
+  const raw = tokens[name] ?? colorDefaults[name];
+  return resolveValue(tokens, raw, mode, new Set([...seen, name]));
+}
+function resolveValue(tokens, raw, mode, seen) {
+  if (Array.isArray(raw)) {
+    return resolveValue(tokens, raw[mode === 'light' ? 0 : 1], mode, seen);
+  }
+  if (typeof raw !== 'string') {
+    return undefined;
+  }
+  const value = raw.trim();
+  if (/^light-dark\(/i.test(value) && value.endsWith(')')) {
+    const [light, dark] = splitTopLevel(value.slice(value.indexOf('(') + 1, -1));
+    return resolveValue(tokens, mode === 'light' ? light : dark, mode, seen);
+  }
+  const ref = /^var\(\s*(--[\w-]+)\s*(?:,(.*))?\)$/s.exec(value);
+  if (ref) {
+    const resolved = resolveToken(tokens, ref[1], mode, seen);
+    return resolved ?? (ref[2] ? resolveValue(tokens, ref[2], mode, seen) : undefined);
+  }
+  return value;
+}
+const CORE_TOKENS = {};
+function resolveModes(tokens) {
+  const names = new Set([...Object.keys(colorDefaults), ...Object.keys(tokens)]);
+  const at = mode => {
+    const out = {};
+    for (const name of names) {
+      const value = resolveToken(tokens, name, mode);
+      if (value !== undefined) {
+        out[name] = value;
+      }
+    }
+    return out;
+  };
+  return {
+    light: at('light'),
+    dark: at('dark')
+  };
+}
+let coreCache;
+function core() {
+  coreCache ??= resolveModes(CORE_TOKENS);
+  return coreCache;
+}
+function statusHue(status, resolved, mode) {
+  const color = parseConcreteColor(resolved[statusSourceToken(status)]);
+  if (color !== null && isChromatic(color)) {
+    return {
+      ...color,
+      a: 1
+    };
+  }
+  // A grey source falls back to Core's own status hue, so derived text stays
+  // chromatic.
+  const fallback = parseConcreteColor(core()[mode][statusSourceToken(status)]);
+  return fallback === null ? null : {
+    ...fallback,
+    a: 1
+  };
+}
+function opaqueOver(color, under) {
+  return color.a < 1 ? composite(color, under) : color;
+}
+function deriveForMode(status, resolved, mode) {
+  // Every colour the computations measure must be concrete. When one is not
+  // (an oklch() value, an unknown reference), the status keeps its scoped
+  // aliases instead of a guess (architecture:theme-compilation INV17).
+  const source = parseConcreteColor(resolved[statusSourceToken(status)]);
+  const hue = statusHue(status, resolved, mode);
+  const surface = parseConcreteColor(resolved['--color-background-surface']);
+  const cardColor = parseConcreteColor(resolved['--color-background-card']);
+  const muted = parseConcreteColor(resolved[`--color-${status}-muted`]);
+  const onDark = parseConcreteColor(resolved['--color-on-dark']);
+  const onLight = parseConcreteColor(resolved['--color-on-light']);
+  if (source === null || hue === null || surface === null || cardColor === null || muted === null || onDark === null || onLight === null) {
+    return null;
+  }
+  const opaqueSurface = opaqueOver(surface, {
+    r: 255,
+    g: 255,
+    b: 255,
+    a: 1
+  });
+  const card = opaqueOver(cardColor, opaqueSurface);
+  const fill = opaqueOver(source, opaqueSurface);
+  const roles = {};
+  const lightInk = opaqueOver(onDark, fill);
+  const darkInk = opaqueOver(onLight, fill);
+  const themeInk = contrastRatio(lightInk, fill) >= contrastRatio(darkInk, fill) ? lightInk : darkInk;
+  // A theme's off-white and off-black content can both miss the floor on a
+  // mid-tone fill; pure white or black always reaches it.
+  const white = {
+    r: 255,
+    g: 255,
+    b: 255,
+    a: 1
+  };
+  const black = {
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 1
+  };
+  roles.on = contrastRatio(themeInk, fill) >= TEXT_RATIO ? themeInk : contrastRatio(white, fill) >= contrastRatio(black, fill) ? white : black;
+  const text = solveLightness(hue, [opaqueSurface, card], SOLVE_RATIO);
+  if (text !== null) {
+    roles.text = text;
+  }
+  const pale = composite(muted.a < 1 ? muted : {
+    ...muted,
+    a: 1
+  }, opaqueSurface);
+  const onMuted = solveLightness(hue, [pale], SOLVE_RATIO);
+  if (onMuted !== null) {
+    roles.onMuted = onMuted;
+  }
+  return roles;
+}
+const ROLE_TOKENS = {
+  on: s => `--color-on-${s}`,
+  text: s => `--color-text-${s}`,
+  onMuted: s => `--color-on-${s}-muted`
+};
+
+/**
+ * Concrete `light-dark()` values for every status role a theme leaves unset
+ * while setting a colour that role is measured against. Authored roles are
+ * never overridden.
+ */
+export function deriveStatusRoleTokens(tokens, localTokens = {}) {
+  const authored = new Set(Object.keys(tokens));
+  const surfaceSet = authored.has('--color-background-surface') || authored.has('--color-background-card');
+  const inkSet = authored.has('--color-on-dark') || authored.has('--color-on-light');
+  const resolved = resolveModes({
+    ...localTokens,
+    ...tokens
+  });
+  const entries = [];
+  for (const status of STATUS_NAMES) {
+    const fillSet = authored.has(statusSourceToken(status));
+    const mutedSet = authored.has(`--color-${status}-muted`);
+    // Which roles this theme's own colours affect.
+    const affects = {
+      on: fillSet || inkSet,
+      text: fillSet || surfaceSet,
+      onMuted: fillSet || mutedSet || surfaceSet
+    };
+    if (!affects.on && !affects.text && !affects.onMuted) {
+      continue;
+    }
+    const perMode = MODES.map(mode => deriveForMode(status, resolved[mode], mode));
+    if (perMode.some(r => r === null)) {
+      continue;
+    }
+    for (const key of Object.keys(ROLE_TOKENS)) {
+      const token = ROLE_TOKENS[key](status);
+      if (!affects[key] || authored.has(token)) {
+        continue;
+      }
+      const [light, dark] = perMode.map(r => r?.[key]);
+      if (light === undefined || dark === undefined) {
+        continue;
+      }
+      entries.push([token, `light-dark(${toHex(light)}, ${toHex(dark)})`]);
+    }
+  }
+  return entries;
+}

package/dist/theme/syntax/SyntaxTheme.d.ts

@@ -4,7 +4,7 @@
  * @output SyntaxTheme provider, useSyntaxTheme hook
  * @position Provider component; wraps code surfaces to apply syntax coloring
  *
- * @see https://github.com/facebook/astryx/issues/1148
+ * @see https://github.com/meta/astryx/issues/1148
  */
 import React from 'react';
 import { type SyntaxThemeDefinition, type SyntaxThemeTokenKey } from './defineSyntaxTheme.js';

package/dist/theme/syntax/SyntaxTheme.js

@@ -8,7 +8,7 @@
  * @output SyntaxTheme provider, useSyntaxTheme hook
  * @position Provider component; wraps code surfaces to apply syntax coloring
  *
- * @see https://github.com/facebook/astryx/issues/1148
+ * @see https://github.com/meta/astryx/issues/1148
  */
 import React, { createContext, use, useMemo } from 'react';
 import { syntaxThemeStyle, resolveSyntaxTokenForMode, ALL_SYNTAX_KEYS } from "./defineSyntaxTheme.js";

package/dist/theme/syntax/defineSyntaxTheme.js

@@ -8,7 +8,7 @@
  * @output defineSyntaxTheme, SyntaxTheme, syntaxThemeStyle
  * @position Syntax theme definition API; consumed by presets, SyntaxTheme, defineTheme
  *
- * @see https://github.com/facebook/astryx/issues/1148
+ * @see https://github.com/meta/astryx/issues/1148
  */
 import { syntaxTokenDefaults, DIFF_SYNTAX_TOKEN_NAMES } from "./tokens.js";
 import { devWarn } from "../../utils/devWarning.js";

package/dist/theme/syntax/presets.d.ts

@@ -6,7 +6,7 @@
  * All original themes are MIT licensed. Only color values are extracted.
  * See THIRD_PARTY_LICENSES.md for full attribution.
  *
- * @see https://github.com/facebook/astryx/issues/1148
+ * @see https://github.com/meta/astryx/issues/1148
  */
 import { type SyntaxThemeDefinition } from './defineSyntaxTheme.js';
 /** One Dark Pro (Binaryify) — MIT */

package/dist/theme/syntax/presets.js

@@ -8,7 +8,7 @@
  * All original themes are MIT licensed. Only color values are extracted.
  * See THIRD_PARTY_LICENSES.md for full attribution.
  *
- * @see https://github.com/facebook/astryx/issues/1148
+ * @see https://github.com/meta/astryx/issues/1148
  */
 
 import { defineSyntaxTheme } from "./defineSyntaxTheme.js";

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

@@ -17,7 +17,7 @@
  * to semantic tokens, so a syntax theme that does not set them keeps a
  * readable diff.
  *
- * @see https://github.com/facebook/astryx/issues/1148
+ * @see https://github.com/meta/astryx/issues/1148
  */
 export declare const syntaxTokenDefaults: {
     readonly '--color-syntax-keyword': "var(--color-text-accent)";

package/dist/theme/syntax/tokens.js

@@ -19,7 +19,7 @@
  * to semantic tokens, so a syntax theme that does not set them keeps a
  * readable diff.
  *
- * @see https://github.com/facebook/astryx/issues/1148
+ * @see https://github.com/meta/astryx/issues/1148
  */
 
 export const syntaxTokenDefaults = {

package/dist/theme/themeAdaptations.d.ts

@@ -1,7 +1,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,
@@ -33,6 +34,29 @@ export type WidthBreakpointName = (typeof WIDTH_BREAKPOINT_NAMES)[number];
 export type WidthBreakpoints = Record<WidthBreakpointName, number>;
 /** The default Astryx viewport-width tier start points in CSS px. */
 export declare const DEFAULT_WIDTH_BREAKPOINTS: Readonly<WidthBreakpoints>;
+/**
+ * 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).
+ */
+export interface CompactDefinition {
+    /** Compact below this viewport width: the effective `md` point. */
+    readonly widthBelow: number;
+    /** Compact below this viewport height. */
+    readonly heightBelow: number;
+    /** The definition as a media query list, without the `@media` keyword. */
+    readonly query: string;
+    /** Compact and a coarse primary pointer, without the `@media` keyword. */
+    readonly coarsePointerQuery: string;
+}
+/**
+ * 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 declare function compactDefinition(points?: Readonly<Pick<WidthBreakpoints, 'md'>>): CompactDefinition;
+/** The compact definition at the default width points. */
+export declare const DEFAULT_COMPACT_DEFINITION: CompactDefinition;
 /** Inclusive lower and exclusive upper edges for one width condition. */
 export interface ThemeAdaptationWidthCondition {
     /** Match at and above this named point. */

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

@@ -1 +1 @@
-{"version":3,"file":"themeAdaptations.d.ts","sourceRoot":"","sources":["../../src/theme/themeAdaptations.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"themeAdaptations.d.ts","sourceRoot":"","sources":["../../src/theme/themeAdaptations.ts"],"names":[],"mappings":"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"}