@cube-dev/ui-kit 0.0.0-canary-b4ff7b4 → 0.0.0-canary-3235a6e

package/dist/probe/css.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { getCSSTextForNode } from "@tenphi/tasty";
 
 //#region src/probe/css.ts

package/dist/probe/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { canonicalize, canonicalizeClassNames, canonicalizeIds } from "./canonicalize.js";
 import { captureCss, diffRules, splitRules } from "./css.js";
 

package/dist/provider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { EventBusProvider } from "./utils/react/useEventBus.js";
 import { defaultNavigationAdapter } from "./providers/navigationAdapter.default.js";
 import { createContext, useContext, useMemo } from "react";

package/dist/providers/TrackingProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { createContext, useContext, useMemo } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/providers/navigationAdapter.default.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/providers/navigationAdapter.default.ts
 /**
 * Converts a Path object to a string URL

package/dist/tokens/all-tokens.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { getPaletteVersion } from "./palette-config.js";
 import { BASE_TOKENS } from "./base.js";
 import { lazyStyles } from "./lazy-styles.js";

package/dist/tokens/base.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/tokens/base.ts
 /**
 * Base design system tokens.
@@ -26,6 +26,7 @@ const BASE_TOKENS = {
 	"$disclosure-transition": "120ms",
 	"$tab-transition": "120ms",
 	"$fade-transition": "200ms",
+	"$tokens-applied": "1",
 	"$scrollbar-width": "1.5x",
 	"$scrollbar-outline-width": "1ow",
 	"$scrollbar-radius": "1.5r",

package/dist/tokens/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","names":[],"sources":["../../src/tokens/base.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n/**\n * Base design system tokens.\n * These define the fundamental units and values used throughout the system.\n *\n * Keys use $ prefix for CSS custom properties.\n */\nexport const BASE_TOKENS: Styles = {\n  // Typography base\n  /** @deprecated Use preset tokens instead */\n  '$font-size': '14px',\n  /** @deprecated Use preset tokens instead */\n  '$line-height': '20px',\n\n  // Input typography\n  '$input-font-size': '14px',\n  '$input-line-height': '20px',\n  '$input-letter-spacing': '0.02em',\n\n  // Opacity & dimensions\n  /** Opacity for disabled elements */\n  '$disabled-opacity': '.4',\n  /** Base gap unit for spacing (used with `.5x`, `1x`, `2x` etc.) */\n  $gap: '8px',\n  /** Stroke width for icons */\n  '$stroke-width': 1.5,\n  /** Focus outline width */\n  '$outline-width': 'calc(1rem / 16 * 3)',\n  /** Border width for bordered elements */\n  '$border-width': '1px',\n\n  // Border radius\n  /** Base border radius (used with `1r`, `2r` etc.) */\n  $radius: '6px',\n  /** Larger radius using tasty calc: 1r + 0.5x */\n  '$large-radius': '(1r + .5x)',\n  /** Card border radius */\n  '$card-radius': '(1r + .5x)',\n  /** Sharp corner for leaf shapes */\n  '$sharp-radius': '0px',\n\n  // Misc dimensions\n  /** Minimum dialog width (responsive) */\n  '$min-dialog-size': 'min(288px, calc(100vw - (2 * var(--gap))))',\n\n  // Transitions\n  /** Default transition duration */\n  $transition: '80ms',\n  /** Transition for disclosure animations */\n  '$disclosure-transition': '120ms',\n  /** Transition for tab animations */\n  '$tab-transition': '120ms',\n  /** Transition for fade animations */\n  '$fade-transition': '200ms',\n\n  // Scrollbar tokens\n  '$scrollbar-width': '1.5x',\n  '$scrollbar-outline-width': '1ow',\n  '$scrollbar-radius': '1.5r',\n  '#scrollbar-thumb': '#text.5',\n  '#scrollbar-outline': '#clear',\n  '#scrollbar-bg': '#surface-2',\n  '#scrollbar-corner': '#clear',\n};\n"],"mappings":";;;;;;;;AAQA,MAAa,cAAsB;CAGjC,cAAc;CAEd,gBAAgB;CAGhB,oBAAoB;CACpB,sBAAsB;CACtB,yBAAyB;CAIzB,qBAAqB;CAErB,MAAM;CAEN,iBAAiB;CAEjB,kBAAkB;CAElB,iBAAiB;CAIjB,SAAS;CAET,iBAAiB;CAEjB,gBAAgB;CAEhB,iBAAiB;CAIjB,oBAAoB;CAIpB,aAAa;CAEb,0BAA0B;CAE1B,mBAAmB;CAEnB,oBAAoB;CAGpB,oBAAoB;CACpB,4BAA4B;CAC5B,qBAAqB;CACrB,oBAAoB;CACpB,sBAAsB;CACtB,iBAAiB;CACjB,qBAAqB;CACtB"}
+{"version":3,"file":"base.js","names":[],"sources":["../../src/tokens/base.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n/**\n * Base design system tokens.\n * These define the fundamental units and values used throughout the system.\n *\n * Keys use $ prefix for CSS custom properties.\n */\nexport const BASE_TOKENS: Styles = {\n  // Typography base\n  /** @deprecated Use preset tokens instead */\n  '$font-size': '14px',\n  /** @deprecated Use preset tokens instead */\n  '$line-height': '20px',\n\n  // Input typography\n  '$input-font-size': '14px',\n  '$input-line-height': '20px',\n  '$input-letter-spacing': '0.02em',\n\n  // Opacity & dimensions\n  /** Opacity for disabled elements */\n  '$disabled-opacity': '.4',\n  /** Base gap unit for spacing (used with `.5x`, `1x`, `2x` etc.) */\n  $gap: '8px',\n  /** Stroke width for icons */\n  '$stroke-width': 1.5,\n  /** Focus outline width */\n  '$outline-width': 'calc(1rem / 16 * 3)',\n  /** Border width for bordered elements */\n  '$border-width': '1px',\n\n  // Border radius\n  /** Base border radius (used with `1r`, `2r` etc.) */\n  $radius: '6px',\n  /** Larger radius using tasty calc: 1r + 0.5x */\n  '$large-radius': '(1r + .5x)',\n  /** Card border radius */\n  '$card-radius': '(1r + .5x)',\n  /** Sharp corner for leaf shapes */\n  '$sharp-radius': '0px',\n\n  // Misc dimensions\n  /** Minimum dialog width (responsive) */\n  '$min-dialog-size': 'min(288px, calc(100vw - (2 * var(--gap))))',\n\n  // Transitions\n  /** Default transition duration */\n  $transition: '80ms',\n  /** Transition for disclosure animations */\n  '$disclosure-transition': '120ms',\n  /** Transition for tab animations */\n  '$tab-transition': '120ms',\n  /** Transition for fade animations */\n  '$fade-transition': '200ms',\n\n  /**\n   * Marks an element as carrying the token block. Not a design value — nothing\n   * styles against it.\n   *\n   * `resolveTokenValue()` reads it to answer the one question a computed value\n   * cannot: \"are the kit's tokens in effect here?\" Tasty registers `@property`\n   * defaults with real initial values — `--gap` is `4px` off the block, not\n   * `0px` — so a token read from outside `<Root>` comes back plausible and\n   * wrong, and no amount of inspecting the value would reveal it. This is\n   * declared alongside the tokens, so it is present exactly where they are.\n   */\n  '$tokens-applied': '1',\n\n  // Scrollbar tokens\n  '$scrollbar-width': '1.5x',\n  '$scrollbar-outline-width': '1ow',\n  '$scrollbar-radius': '1.5r',\n  '#scrollbar-thumb': '#text.5',\n  '#scrollbar-outline': '#clear',\n  '#scrollbar-bg': '#surface-2',\n  '#scrollbar-corner': '#clear',\n};\n"],"mappings":";;;;;;;;AAQA,MAAa,cAAsB;CAGjC,cAAc;CAEd,gBAAgB;CAGhB,oBAAoB;CACpB,sBAAsB;CACtB,yBAAyB;CAIzB,qBAAqB;CAErB,MAAM;CAEN,iBAAiB;CAEjB,kBAAkB;CAElB,iBAAiB;CAIjB,SAAS;CAET,iBAAiB;CAEjB,gBAAgB;CAEhB,iBAAiB;CAIjB,oBAAoB;CAIpB,aAAa;CAEb,0BAA0B;CAE1B,mBAAmB;CAEnB,oBAAoB;CAapB,mBAAmB;CAGnB,oBAAoB;CACpB,4BAA4B;CAC5B,qBAAqB;CACrB,oBAAoB;CACpB,sBAAsB;CACtB,iBAAiB;CACjB,qBAAqB;CACtB"}

package/dist/tokens/color-seed.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { glaze } from "@tenphi/glaze";
 
 //#region src/tokens/color-seed.ts

package/dist/tokens/color-theme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { colorSeed } from "./color-seed.js";
 import { DEFAULT_HUE, DEFAULT_SATURATION, getPaletteConfig, getPaletteVersion, usePaletteVersion } from "./palette-config.js";
 import { tintRecipe } from "./palette.js";

package/dist/tokens/colors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { getPaletteVersion } from "./palette-config.js";
 import { BASE_TOKENS } from "./base.js";
 import { lazyStyles } from "./lazy-styles.js";

package/dist/tokens/layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/tokens/layout.ts
 /**
 * Layout-related tokens for common UI dimensions.

package/dist/tokens/lazy-styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/tokens/lazy-styles.ts
 /**
 * Proxy that defers to `factory()` on every property / enumeration access.

package/dist/tokens/palette-config.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { colorSeed } from "./color-seed.js";
 import { useSyncExternalStore } from "react";
 

package/dist/tokens/palette.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { SURFACE_SATURATION_SHARE, getPaletteConfig, getPaletteVersion, resolvePaletteConfig } from "./palette-config.js";
 import { lazyStyles } from "./lazy-styles.js";
 import { apcaContrast, glaze, okhslToLinearSrgb, variantToOkhsl } from "@tenphi/glaze";

package/dist/tokens/resolve.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../utils/react/useLayoutEffect.js";
 import { warn } from "../utils/warnings.js";
 import { getPaletteVersion, usePaletteVersion } from "./palette-config.js";
@@ -12,26 +12,44 @@ import { useState, useSyncExternalStore } from "react";
 * a CodeMirror / Monaco theme object, a Vega spec. Those take colors, lengths and
 * font descriptors as values; `var(--purple-color)` means nothing to them.
 *
-* There are two ways to get this wrong by hand, and both fail silently:
+* Doing it by hand fails silently, because a token read from the wrong element
+* does not come back empty. Tasty registers `@property` rules — its own defaults
+* plus one for every custom property whose type it can infer — and an undeclared
+* token reads back as that rule's `initial-value`. Some of those are obvious
+* duds (`rgba(0, 0, 0, 0)` for a `<color>`, `0px` for a `<length>`), but many are
+* ordinary-looking values: off the token block `--gap` reads `4px` rather than
+* the kit's `8px`, `--transition` reads `80ms`, `--radius` reads `6px`. So
+* inspecting the value cannot tell a real token from a miss, in either
+* direction — `#clear` really is `transparent` and `$h2-letter-spacing` really
+* is `0px`.
 *
-* 1. **Reading from the wrong element.** `<Root>` declares the token block on
-*    `<body>` (see `src/components/GlobalStyles.tsx`), so `<html>` — and any
-*    detached node — is outside it.
-* 2. **Trusting what comes back.** Tasty registers an `@property` rule for every
-*    custom property it can infer a type for, which means an *undeclared* token
-*    does not read back as `''`. It reads back as that rule's `initial-value`:
-*    `rgba(0, 0, 0, 0)` for `<color>`, `0px` for `<length>`, `0deg`, `0s`, `0`.
-*    A placeholder is a plausible-looking value, so it propagates into an
-*    invisible chart series or a zero-height font instead of throwing.
+* The question that CAN be answered is "are the kit's tokens in effect on this
+* element?", and `$tokens-applied` (see `src/tokens/base.ts`) answers it: it is
+* declared alongside the tokens, so it is present exactly where they are. Off
+* that surface every read is reported as unresolved; on it, the computed value
+* is the truth.
+*/
+/**
+* Declared by the token block and nothing else — see `src/tokens/base.ts`.
 *
-* The helpers below read from the declaration site by default and return `null`
-* (or an explicit `fallback`) rather than a placeholder.
+* Matched by VALUE rather than by presence, because presence is not the signal
+* it looks like: tasty infers a type for the marker as readily as for any other
+* token, registers `@property --tokens-applied` with `initial-value: 0`, and so
+* hands back `0` off the block instead of an empty string. Comparing against the
+* declared value is right either way, and cannot drift from `base.ts`.
 */
+const SURFACE_MARKER = "$tokens-applied";
+function isTokenSurface(computed) {
+	const declared = getTokens()[SURFACE_MARKER];
+	const name = tokenToProperty(SURFACE_MARKER);
+	if (typeof declared !== "string" || !name) return false;
+	return normalizeValue(computed.getPropertyValue(name)) === normalizeValue(declared);
+}
 /**
-* The `initial-value`s tasty auto-registers, whitespace-stripped for comparison.
-* A token that reads back as one of these is almost always undeclared where it
-* was read — `resolve.browser.test.tsx` is what keeps this set honest against
-* the tasty version we ship with.
+* Values that mean "this property was never declared" once we already know the
+* token block IS in effect. Only used to catch a token the kit does not declare
+* at all — a typo, or a name from another design system — since for those there
+* is no marker to lean on.
 */
 const PLACEHOLDER_VALUES = new Set([
 	"transparent",
@@ -76,30 +94,27 @@ function normalizeValue(value) {
 	return value.replace(/\s+/g, "").toLowerCase();
 }
 /**
-* Tokens whose *declared* value is itself placeholder-shaped, keyed by custom
-* property name — `--clear-color` is `transparent` on purpose, `--sharp-radius`
-* is `0px` on purpose, and every `--*-letter-spacing` that reads `0` is a real
-* `0`. Without this the guard below would report them as unset.
+* Every custom property the kit declares, by name. Membership only — the value
+* is deliberately not consulted, because a token's declared value tells you
+* nothing about whether it is in effect where you read it.
 *
 * Memoized against the palette version, like {@link getTokens} itself.
 */
-let literalsCache = null;
-function getPlaceholderShapedTokens() {
+let knownNamesCache = null;
+function getKnownTokenNames() {
 	const version = getPaletteVersion();
-	if (!literalsCache || literalsCache.version !== version) {
+	if (!knownNamesCache || knownNamesCache.version !== version) {
 		const names = /* @__PURE__ */ new Set();
-		for (const [key, value] of Object.entries(getTokens())) {
-			if (typeof value !== "string") continue;
-			if (!PLACEHOLDER_VALUES.has(normalizeValue(value))) continue;
+		for (const key of Object.keys(getTokens())) {
 			const name = tokenToProperty(key);
 			if (name) names.add(name);
 		}
-		literalsCache = {
+		knownNamesCache = {
 			version,
 			names
 		};
 	}
-	return literalsCache.names;
+	return knownNamesCache.names;
 }
 /** These fire per token, per page — once each, not once per render. */
 const warnedTokens = /* @__PURE__ */ new Set();
@@ -114,16 +129,20 @@ function resolveTarget(element) {
 	if (typeof document === "undefined") return null;
 	return document.body ?? document.documentElement ?? null;
 }
-function readValue(computed, token, fallback, silent) {
+function readValue(computed, token, fallback, silent, onTokenSurface) {
 	const name = tokenToProperty(token);
 	if (!name) {
 		warnOnce(`name:${token}`, `"${token}" is not a valid design token name.`);
 		return fallback;
 	}
+	if (!onTokenSurface) {
+		if (!silent) warnOnce(`surface:${name}`, `Token "${token}" (${name}) was read from an element the design tokens are not in effect on, so any value there is tasty's @property default rather than the kit's. <Root> declares the token block on <body>, so <html>, a detached node, and a tree that has not mounted <Root> yet are all outside it. Pass \`element\` to read from a specific subtree, or \`fallback\` for a value to use instead.`);
+		return fallback;
+	}
 	const value = computed.getPropertyValue(name).trim();
 	if (!value) return fallback;
-	if (PLACEHOLDER_VALUES.has(normalizeValue(value)) && !getPlaceholderShapedTokens().has(name)) {
-		if (!silent) warnOnce(`placeholder:${name}`, `Token "${token}" (${name}) read back as an @property placeholder, meaning it is not declared on the element it was read from. <Root> declares tokens on <body>, so <html>, a detached node, and a tree that has not mounted <Root> yet all return placeholders. Pass \`element\` to read from a specific subtree, or \`fallback\` for a value to use instead.`);
+	if (PLACEHOLDER_VALUES.has(normalizeValue(value)) && !getKnownTokenNames().has(name)) {
+		if (!silent) warnOnce(`unknown:${name}`, `Token "${token}" (${name}) is not declared by the kit, and read back as an unset custom property. Check the name, or pass \`fallback\`.`);
 		return fallback;
 	}
 	return value;
@@ -170,7 +189,8 @@ function readTokens(tokens, options, silent) {
 		return result;
 	}
 	const computed = view.getComputedStyle(target);
-	for (const token of tokens) result[token] = readValue(computed, token, fallback, silent);
+	const onTokenSurface = isTokenSurface(computed);
+	for (const token of tokens) result[token] = readValue(computed, token, fallback, silent, onTokenSurface);
 	return result;
 }
 /**
@@ -249,8 +269,18 @@ function subscribeAppearance(listener) {
 function getAppearanceVersion() {
 	return appearanceVersion;
 }
+/**
+* A version React only ever hands out while rendering on the server or
+* hydrating: `useSyncExternalStore` reads `getServerSnapshot` in exactly those
+* two cases and `getSnapshot` in every other. That makes it a reliable "this
+* render has to match the server's markup" flag — see {@link useResolvedTokens}.
+*
+* A plain client render (`createRoot`) never sees it, so a CSR app still
+* resolves on its first render rather than paying an extra pass.
+*/
+const HYDRATING = -1;
 function getServerAppearanceVersion() {
-	return 0;
+	return HYDRATING;
 }
 /**
 * Re-render on a scheme / contrast change. Returns the version rather than the
@@ -270,7 +300,7 @@ function useResolvedTokens(tokens, key, options) {
 	const { element, fallback } = options;
 	const paletteVersion = usePaletteVersion();
 	const appearance = useAppearanceVersion();
-	const [values, setValues] = useState(() => resolveTokenValues(tokens, options));
+	const [values, setValues] = useState(() => appearance === HYDRATING ? unresolved(tokens, fallback) : resolveTokenValues(tokens, options));
 	useLayoutEffect$1(() => {
 		setValues((previous) => {
 			const next = resolveTokenValues(tokens, {
@@ -288,6 +318,17 @@ function useResolvedTokens(tokens, key, options) {
 	]);
 	return values;
 }
+/**
+* What the server rendered: no DOM, so every token is the fallback. The first
+* client render has to agree with it or hydration reports a mismatch for any
+* consumer that renders the value; the layout effect above replaces it with the
+* resolved values before the browser paints.
+*/
+function unresolved(tokens, fallback) {
+	const result = {};
+	for (const token of tokens) result[token] = fallback ?? null;
+	return result;
+}
 /** Keeps the previous object when nothing moved, so it stays usable as a dep. */
 function isSameRecord(a, b) {
 	const keys = Object.keys(b);
@@ -332,7 +373,7 @@ function usePresetValues(preset, options = {}) {
 	const { element, fallback } = options;
 	const paletteVersion = usePaletteVersion();
 	const appearance = useAppearanceVersion();
-	const [values, setValues] = useState(() => resolvePresetValues(preset, options));
+	const [values, setValues] = useState(() => appearance === HYDRATING ? unresolvedPreset(fallback) : resolvePresetValues(preset, options));
 	useLayoutEffect$1(() => {
 		setValues((previous) => {
 			const next = resolvePresetValues(preset, {
@@ -350,6 +391,12 @@ function usePresetValues(preset, options = {}) {
 	]);
 	return values;
 }
+/** {@link unresolved} for the fixed shape {@link resolvePresetValues} returns. */
+function unresolvedPreset(fallback) {
+	const resolved = {};
+	for (const field of PRESET_FIELDS) resolved[field] = fallback ?? null;
+	return resolved;
+}
 
 //#endregion
 export { resolvePresetValues, resolveTokenValue, resolveTokenValues, usePresetValues, useTokenValue, useTokenValues };

package/dist/tokens/resolve.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolve.js","names":[],"sources":["../../src/tokens/resolve.ts"],"sourcesContent":["import { useState, useSyncExternalStore } from 'react';\n\nimport { useLayoutEffect } from '../utils/react/useLayoutEffect';\nimport { warn } from '../utils/warnings';\n\nimport { getTokens } from './all-tokens';\nimport { getPaletteVersion, usePaletteVersion } from './palette-config';\n\n/**\n * Resolving a design token to a literal value, for consumers that render into a\n * surface our stylesheets do not reach — a third-party iframe (Stripe Elements),\n * a CodeMirror / Monaco theme object, a Vega spec. Those take colors, lengths and\n * font descriptors as values; `var(--purple-color)` means nothing to them.\n *\n * There are two ways to get this wrong by hand, and both fail silently:\n *\n * 1. **Reading from the wrong element.** `<Root>` declares the token block on\n *    `<body>` (see `src/components/GlobalStyles.tsx`), so `<html>` — and any\n *    detached node — is outside it.\n * 2. **Trusting what comes back.** Tasty registers an `@property` rule for every\n *    custom property it can infer a type for, which means an *undeclared* token\n *    does not read back as `''`. It reads back as that rule's `initial-value`:\n *    `rgba(0, 0, 0, 0)` for `<color>`, `0px` for `<length>`, `0deg`, `0s`, `0`.\n *    A placeholder is a plausible-looking value, so it propagates into an\n *    invisible chart series or a zero-height font instead of throwing.\n *\n * The helpers below read from the declaration site by default and return `null`\n * (or an explicit `fallback`) rather than a placeholder.\n */\n\n/**\n * The `initial-value`s tasty auto-registers, whitespace-stripped for comparison.\n * A token that reads back as one of these is almost always undeclared where it\n * was read — `resolve.browser.test.tsx` is what keeps this set honest against\n * the tasty version we ship with.\n */\nconst PLACEHOLDER_VALUES = new Set([\n  'transparent',\n  'rgba(0,0,0,0)',\n  '0',\n  '0px',\n  '0deg',\n  '0s',\n]);\n\n/** Custom property names are CSS identifiers: a letter or `_`, then word chars or `-`. */\nconst PROPERTY_NAME_RE = /^[a-zA-Z_][\\w-]*$/;\n\nexport interface ResolveTokenOptions {\n  /**\n   * Element to read the tokens off. Defaults to the document `<body>`, which is\n   * where `<Root>` declares them.\n   *\n   * Pass an element when the value has to reflect a *local* override — a subtree\n   * carrying its own `tokens` prop (`renderColorTokens()`), or one under a\n   * `data-schema` / `data-contrast` attribute that differs from the document's.\n   * The element's own document and view are used, so a node inside a same-origin\n   * iframe resolves against that iframe.\n   */\n  element?: Element | null;\n  /**\n   * Returned in place of `null` when a token is unset, unresolvable, or reads\n   * back as an `@property` placeholder — including on the server, where there is\n   * no DOM to read.\n   */\n  fallback?: string;\n}\n\n/**\n * Fields mirror {@link TypographyPreset}. A field the preset does not define is\n * `null`, except `fontFamily`, which falls back to the document's `--font-sans`\n * so the common case (`t1`–`t4`, `h1`–`h6`, which inherit the sans stack rather\n * than naming it) still hands back a usable stack.\n */\nexport type ResolvedPreset = {\n  fontFamily: string | null;\n  fontSize: string | null;\n  fontStyle: string | null;\n  fontWeight: string | null;\n  lineHeight: string | null;\n  letterSpacing: string | null;\n  textTransform: string | null;\n  boldFontWeight: string | null;\n  iconSize: string | null;\n};\n\nconst PRESET_FIELD_SUFFIXES: Record<keyof ResolvedPreset, string> = {\n  fontFamily: 'font-family',\n  fontSize: 'font-size',\n  fontStyle: 'font-style',\n  fontWeight: 'font-weight',\n  lineHeight: 'line-height',\n  letterSpacing: 'letter-spacing',\n  textTransform: 'text-transform',\n  boldFontWeight: 'bold-font-weight',\n  iconSize: 'icon-size',\n};\n\nconst PRESET_FIELDS = Object.keys(\n  PRESET_FIELD_SUFFIXES,\n) as (keyof ResolvedPreset)[];\n\n/**\n * Map a token to its CSS custom property name, using the same convention tasty's\n * style DSL does: `#name` is a color (`--name-color`), `$name` is everything else\n * (`--name`). A raw `--name` or a bare `name` is taken as written.\n *\n * Returns `null` for anything that would not be a valid custom property.\n */\nfunction tokenToProperty(token: string): string | null {\n  const trimmed = token.trim();\n\n  let name: string;\n\n  if (trimmed.startsWith('--')) {\n    name = trimmed.slice(2);\n  } else if (trimmed.startsWith('#')) {\n    name = `${trimmed.slice(1)}-color`;\n  } else if (trimmed.startsWith('$')) {\n    name = trimmed.slice(1);\n  } else {\n    name = trimmed;\n  }\n\n  return PROPERTY_NAME_RE.test(name) ? `--${name}` : null;\n}\n\n/** Whitespace and case are not meaningful in the values we compare against. */\nfunction normalizeValue(value: string): string {\n  return value.replace(/\\s+/g, '').toLowerCase();\n}\n\n/**\n * Tokens whose *declared* value is itself placeholder-shaped, keyed by custom\n * property name — `--clear-color` is `transparent` on purpose, `--sharp-radius`\n * is `0px` on purpose, and every `--*-letter-spacing` that reads `0` is a real\n * `0`. Without this the guard below would report them as unset.\n *\n * Memoized against the palette version, like {@link getTokens} itself.\n */\nlet literalsCache: { version: number; names: Set<string> } | null = null;\n\nfunction getPlaceholderShapedTokens(): Set<string> {\n  const version = getPaletteVersion();\n\n  if (!literalsCache || literalsCache.version !== version) {\n    const names = new Set<string>();\n\n    for (const [key, value] of Object.entries(getTokens())) {\n      // Glaze color tokens are per-scheme state maps, not literals — they never\n      // declare a placeholder, so only strings are worth indexing.\n      if (typeof value !== 'string') continue;\n      if (!PLACEHOLDER_VALUES.has(normalizeValue(value))) continue;\n\n      const name = tokenToProperty(key);\n\n      if (name) names.add(name);\n    }\n\n    literalsCache = { version, names };\n  }\n\n  return literalsCache.names;\n}\n\n/** These fire per token, per page — once each, not once per render. */\nconst warnedTokens = new Set<string>();\n\nfunction warnOnce(key: string, message: string) {\n  if (warnedTokens.has(key)) return;\n\n  warnedTokens.add(key);\n\n  warn(message);\n}\n\n/** The document `<body>` is where `<Root>` declares the token block. */\nfunction resolveTarget(element?: Element | null): Element | null {\n  if (element) return element;\n  if (typeof document === 'undefined') return null;\n\n  return document.body ?? document.documentElement ?? null;\n}\n\nfunction readValue(\n  computed: CSSStyleDeclaration,\n  token: string,\n  fallback: string | null,\n  silent: boolean,\n): string | null {\n  const name = tokenToProperty(token);\n\n  if (!name) {\n    warnOnce(`name:${token}`, `\"${token}\" is not a valid design token name.`);\n\n    return fallback;\n  }\n\n  const value = computed.getPropertyValue(name).trim();\n\n  if (!value) return fallback;\n\n  if (\n    PLACEHOLDER_VALUES.has(normalizeValue(value)) &&\n    !getPlaceholderShapedTokens().has(name)\n  ) {\n    if (!silent) {\n      warnOnce(\n        `placeholder:${name}`,\n        `Token \"${token}\" (${name}) read back as an @property placeholder, meaning it is not declared on the element it was read from. <Root> declares tokens on <body>, so <html>, a detached node, and a tree that has not mounted <Root> yet all return placeholders. Pass \\`element\\` to read from a specific subtree, or \\`fallback\\` for a value to use instead.`,\n      );\n    }\n\n    return fallback;\n  }\n\n  return value;\n}\n\n/**\n * Read the resolved value of one design token — a color, a length, a font\n * descriptor — as a literal string.\n *\n * ```ts\n * resolveTokenValue('#purple'); // 'oklch(0.52 0.24 285)'\n * resolveTokenValue('$space-md'); // '8px'\n * resolveTokenValue('$t3-font-size'); // '14px'\n * ```\n *\n * Returns `options.fallback ?? null` when the token is not declared on the\n * element it was read from — see {@link ResolveTokenOptions}.\n */\nexport function resolveTokenValue(\n  token: string,\n  options: ResolveTokenOptions = {},\n): string | null {\n  return resolveTokenValues([token], options)[token];\n}\n\n/**\n * {@link resolveTokenValue} for several tokens at once, through a single\n * `getComputedStyle` call. Prefer this when building a theme object — a Stripe\n * `Appearance`, a CodeMirror theme — which needs a dozen values at a time.\n *\n * ```ts\n * const { '#surface': background, '#surface-text': color } = resolveTokenValues([\n *   '#surface',\n *   '#surface-text',\n * ]);\n * ```\n */\nexport function resolveTokenValues<T extends string>(\n  tokens: readonly T[],\n  options: ResolveTokenOptions = {},\n): Record<T, string | null> {\n  return readTokens(tokens, options, false);\n}\n\n/** Shared by the public reader and the preset reader, which suppresses warnings. */\nfunction readTokens<T extends string>(\n  tokens: readonly T[],\n  options: ResolveTokenOptions,\n  silent: boolean,\n): Record<T, string | null> {\n  const { element, fallback = null } = options;\n  const result = {} as Record<T, string | null>;\n  const target = resolveTarget(element);\n  const view = target?.ownerDocument?.defaultView;\n\n  if (!target || !view) {\n    for (const token of tokens) result[token] = fallback;\n\n    return result;\n  }\n\n  const computed = view.getComputedStyle(target);\n\n  for (const token of tokens) {\n    result[token] = readValue(computed, token, fallback, silent);\n  }\n\n  return result;\n}\n\n/**\n * Resolve a typography preset — `'t3'`, `'h2'`, `'s3'` — to the literal font\n * descriptors behind it, for a surface that takes a font as values rather than\n * as a `preset` style.\n *\n * ```ts\n * const { fontFamily, fontSize, lineHeight } = resolvePresetValues('t3');\n * ```\n *\n * A preset legitimately leaves most of these unset — only headings carry an\n * `iconSize`, only the `s*` family names a `fontFamily` — so unlike\n * {@link resolveTokenValues} a miss here is expected and never warns.\n */\nexport function resolvePresetValues(\n  preset: string,\n  options: ResolveTokenOptions = {},\n): ResolvedPreset {\n  const { fallback = null } = options;\n  const names = PRESET_FIELDS.map(\n    (field) => `$${preset}-${PRESET_FIELD_SUFFIXES[field]}`,\n  );\n  const values = readTokens(\n    [...names, '--font-sans'],\n    { element: options.element },\n    true,\n  );\n  const resolved = {} as ResolvedPreset;\n\n  PRESET_FIELDS.forEach((field, index) => {\n    resolved[field] = values[names[index]] ?? fallback;\n  });\n\n  // Every preset but the `s*` family inherits the sans stack rather than naming\n  // it, so the token is absent by design and `--font-sans` is the real answer.\n  resolved.fontFamily =\n    values[names[PRESET_FIELDS.indexOf('fontFamily')]] ??\n    values['--font-sans'] ??\n    fallback;\n\n  return resolved;\n}\n\n// ============================================================================\n// Appearance subscription\n// ============================================================================\n\n/**\n * A token's resolved value changes for two reasons: the palette was re-seeded\n * (`setPaletteConfig()`, covered by `usePaletteVersion`), or the scheme /\n * contrast tier flipped. This store covers the second.\n *\n * Both axes are the ones `@dark` and `@hc` resolve against (see\n * `src/components/Root.tsx`): the `data-schema` / `data-contrast` attributes on\n * `<html>`, and the `prefers-color-scheme` / `prefers-contrast` media queries\n * they fall back to. An attribute flip is invisible to `matchMedia` and a system\n * flip is invisible to a `MutationObserver`, so both are watched.\n */\nconst APPEARANCE_QUERIES = [\n  '(prefers-color-scheme: dark)',\n  '(prefers-contrast: more)',\n];\nconst APPEARANCE_ATTRIBUTES = ['data-schema', 'data-contrast'];\n\nlet appearanceVersion = 0;\nlet stopWatchingAppearance: (() => void) | null = null;\n\nconst appearanceListeners = new Set<() => void>();\n\nfunction onAppearanceChange() {\n  appearanceVersion++;\n\n  appearanceListeners.forEach((listener) => listener());\n}\n\nfunction watchAppearance(): () => void {\n  const teardowns: (() => void)[] = [];\n\n  // Guarded rather than assumed: jsdom ships neither `matchMedia` nor a\n  // `MediaQueryList` in every version, and a consumer's unit tests are exactly\n  // where a hook like this gets mounted. Losing one source of change is a stale\n  // value; throwing is a broken render.\n  if (typeof window.matchMedia === 'function') {\n    for (const query of APPEARANCE_QUERIES) {\n      const list = window.matchMedia(query);\n\n      if (typeof list?.addEventListener !== 'function') continue;\n\n      list.addEventListener('change', onAppearanceChange);\n      teardowns.push(() =>\n        list.removeEventListener('change', onAppearanceChange),\n      );\n    }\n  }\n\n  if (typeof MutationObserver === 'function' && document.documentElement) {\n    const observer = new MutationObserver(onAppearanceChange);\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: APPEARANCE_ATTRIBUTES,\n    });\n\n    teardowns.push(() => observer.disconnect());\n  }\n\n  return () => teardowns.forEach((teardown) => teardown());\n}\n\nfunction subscribeAppearance(listener: () => void): () => void {\n  appearanceListeners.add(listener);\n\n  if (appearanceListeners.size === 1 && typeof window !== 'undefined') {\n    stopWatchingAppearance = watchAppearance();\n  }\n\n  return () => {\n    appearanceListeners.delete(listener);\n\n    if (!appearanceListeners.size) {\n      stopWatchingAppearance?.();\n      stopWatchingAppearance = null;\n    }\n  };\n}\n\nfunction getAppearanceVersion(): number {\n  return appearanceVersion;\n}\n\nfunction getServerAppearanceVersion(): number {\n  return 0;\n}\n\n/**\n * Re-render on a scheme / contrast change. Returns the version rather than the\n * state so the snapshot is a primitive — the same reason `usePaletteVersion`\n * does, see `src/tokens/palette-config.ts`.\n */\nfunction useAppearanceVersion(): number {\n  return useSyncExternalStore(\n    subscribeAppearance,\n    getAppearanceVersion,\n    getServerAppearanceVersion,\n  );\n}\n\n// ============================================================================\n// React bindings\n// ============================================================================\n\n/**\n * The value is read out of the DOM, so it re-resolves whenever the palette is\n * re-seeded or the scheme / contrast tier flips, and it is `fallback ?? null`\n * during SSR. The layout effect is what covers the first commit: a consumer\n * rendered in the same pass as `<Root>` reads before the token block lands.\n */\nfunction useResolvedTokens<T extends string>(\n  tokens: readonly T[],\n  key: string,\n  options: ResolveTokenOptions,\n): Record<T, string | null> {\n  const { element, fallback } = options;\n  const paletteVersion = usePaletteVersion();\n  const appearance = useAppearanceVersion();\n\n  const [values, setValues] = useState(() =>\n    resolveTokenValues(tokens, options),\n  );\n\n  useLayoutEffect(() => {\n    setValues((previous) => {\n      const next = resolveTokenValues(tokens, { element, fallback });\n\n      return isSameRecord(previous, next) ? previous : next;\n    });\n    // `tokens` is a fresh array on all but the first render, so `key` — its\n    // joined identity — is what belongs in the dependency list.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key, element, fallback, paletteVersion, appearance]);\n\n  return values;\n}\n\n/** Keeps the previous object when nothing moved, so it stays usable as a dep. */\nfunction isSameRecord<T extends Record<string, string | null>>(\n  a: T,\n  b: T,\n): boolean {\n  const keys = Object.keys(b);\n\n  if (Object.keys(a).length !== keys.length) return false;\n\n  return keys.every((key) => a[key] === b[key]);\n}\n\n/**\n * {@link resolveTokenValue} as a hook: re-renders when the palette is re-seeded\n * or the scheme / contrast tier flips.\n *\n * ```tsx\n * const accent = useTokenValue('#purple');\n *\n * return <Chart series={{ color: accent ?? '#000' }} />;\n * ```\n */\nexport function useTokenValue(\n  token: string,\n  options: ResolveTokenOptions = {},\n): string | null {\n  return useResolvedTokens([token], token, options)[token];\n}\n\n/**\n * {@link resolveTokenValues} as a hook. The returned object keeps its identity\n * while the values are unchanged, so it is safe as a dependency of the theme\n * object built from it — and the token list may be an inline literal.\n *\n * ```tsx\n * const colors = useTokenValues(['#surface', '#surface-text', '#border']);\n *\n * const appearance = useMemo(() => toStripeAppearance(colors), [colors]);\n * ```\n */\nexport function useTokenValues<T extends string>(\n  tokens: readonly T[],\n  options: ResolveTokenOptions = {},\n): Record<T, string | null> {\n  return useResolvedTokens(tokens, tokens.join(' '), options);\n}\n\n/**\n * {@link resolvePresetValues} as a hook.\n *\n * ```tsx\n * const { fontFamily, fontSize } = usePresetValues('s3');\n * ```\n */\nexport function usePresetValues(\n  preset: string,\n  options: ResolveTokenOptions = {},\n): ResolvedPreset {\n  const { element, fallback } = options;\n  const paletteVersion = usePaletteVersion();\n  const appearance = useAppearanceVersion();\n\n  const [values, setValues] = useState(() =>\n    resolvePresetValues(preset, options),\n  );\n\n  useLayoutEffect(() => {\n    setValues((previous) => {\n      const next = resolvePresetValues(preset, { element, fallback });\n\n      return isSameRecord(previous, next) ? previous : next;\n    });\n  }, [preset, element, fallback, paletteVersion, appearance]);\n\n  return values;\n}\n"],"mappings":"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"}
+{"version":3,"file":"resolve.js","names":[],"sources":["../../src/tokens/resolve.ts"],"sourcesContent":["import { useState, useSyncExternalStore } from 'react';\n\nimport { useLayoutEffect } from '../utils/react/useLayoutEffect';\nimport { warn } from '../utils/warnings';\n\nimport { getTokens } from './all-tokens';\nimport { getPaletteVersion, usePaletteVersion } from './palette-config';\n\n/**\n * Resolving a design token to a literal value, for consumers that render into a\n * surface our stylesheets do not reach — a third-party iframe (Stripe Elements),\n * a CodeMirror / Monaco theme object, a Vega spec. Those take colors, lengths and\n * font descriptors as values; `var(--purple-color)` means nothing to them.\n *\n * Doing it by hand fails silently, because a token read from the wrong element\n * does not come back empty. Tasty registers `@property` rules — its own defaults\n * plus one for every custom property whose type it can infer — and an undeclared\n * token reads back as that rule's `initial-value`. Some of those are obvious\n * duds (`rgba(0, 0, 0, 0)` for a `<color>`, `0px` for a `<length>`), but many are\n * ordinary-looking values: off the token block `--gap` reads `4px` rather than\n * the kit's `8px`, `--transition` reads `80ms`, `--radius` reads `6px`. So\n * inspecting the value cannot tell a real token from a miss, in either\n * direction — `#clear` really is `transparent` and `$h2-letter-spacing` really\n * is `0px`.\n *\n * The question that CAN be answered is \"are the kit's tokens in effect on this\n * element?\", and `$tokens-applied` (see `src/tokens/base.ts`) answers it: it is\n * declared alongside the tokens, so it is present exactly where they are. Off\n * that surface every read is reported as unresolved; on it, the computed value\n * is the truth.\n */\n\n/**\n * Declared by the token block and nothing else — see `src/tokens/base.ts`.\n *\n * Matched by VALUE rather than by presence, because presence is not the signal\n * it looks like: tasty infers a type for the marker as readily as for any other\n * token, registers `@property --tokens-applied` with `initial-value: 0`, and so\n * hands back `0` off the block instead of an empty string. Comparing against the\n * declared value is right either way, and cannot drift from `base.ts`.\n */\nconst SURFACE_MARKER = '$tokens-applied';\n\nfunction isTokenSurface(computed: CSSStyleDeclaration): boolean {\n  const declared = getTokens()[SURFACE_MARKER];\n  const name = tokenToProperty(SURFACE_MARKER);\n\n  if (typeof declared !== 'string' || !name) return false;\n\n  return (\n    normalizeValue(computed.getPropertyValue(name)) === normalizeValue(declared)\n  );\n}\n\n/**\n * Values that mean \"this property was never declared\" once we already know the\n * token block IS in effect. Only used to catch a token the kit does not declare\n * at all — a typo, or a name from another design system — since for those there\n * is no marker to lean on.\n */\nconst PLACEHOLDER_VALUES = new Set([\n  'transparent',\n  'rgba(0,0,0,0)',\n  '0',\n  '0px',\n  '0deg',\n  '0s',\n]);\n\n/** Custom property names are CSS identifiers: a letter or `_`, then word chars or `-`. */\nconst PROPERTY_NAME_RE = /^[a-zA-Z_][\\w-]*$/;\n\nexport interface ResolveTokenOptions {\n  /**\n   * Element to read the tokens off. Defaults to the document `<body>`, which is\n   * where `<Root>` declares them.\n   *\n   * Pass an element when the value has to reflect a *local* override — a subtree\n   * carrying its own `tokens` prop (`renderColorTokens()`), or one under a\n   * `data-schema` / `data-contrast` attribute that differs from the document's.\n   * The element's own document and view are used, so a node inside a same-origin\n   * iframe resolves against that iframe.\n   */\n  element?: Element | null;\n  /**\n   * Returned in place of `null` when a token is unset, unresolvable, or reads\n   * back as an `@property` placeholder — including on the server, where there is\n   * no DOM to read.\n   */\n  fallback?: string;\n}\n\n/**\n * Fields mirror {@link TypographyPreset}. A field the preset does not define is\n * `null`, except `fontFamily`, which falls back to the document's `--font-sans`\n * so the common case (`t1`–`t4`, `h1`–`h6`, which inherit the sans stack rather\n * than naming it) still hands back a usable stack.\n */\nexport type ResolvedPreset = {\n  fontFamily: string | null;\n  fontSize: string | null;\n  fontStyle: string | null;\n  fontWeight: string | null;\n  lineHeight: string | null;\n  letterSpacing: string | null;\n  textTransform: string | null;\n  boldFontWeight: string | null;\n  iconSize: string | null;\n};\n\nconst PRESET_FIELD_SUFFIXES: Record<keyof ResolvedPreset, string> = {\n  fontFamily: 'font-family',\n  fontSize: 'font-size',\n  fontStyle: 'font-style',\n  fontWeight: 'font-weight',\n  lineHeight: 'line-height',\n  letterSpacing: 'letter-spacing',\n  textTransform: 'text-transform',\n  boldFontWeight: 'bold-font-weight',\n  iconSize: 'icon-size',\n};\n\nconst PRESET_FIELDS = Object.keys(\n  PRESET_FIELD_SUFFIXES,\n) as (keyof ResolvedPreset)[];\n\n/**\n * Map a token to its CSS custom property name, using the same convention tasty's\n * style DSL does: `#name` is a color (`--name-color`), `$name` is everything else\n * (`--name`). A raw `--name` or a bare `name` is taken as written.\n *\n * Returns `null` for anything that would not be a valid custom property.\n */\nfunction tokenToProperty(token: string): string | null {\n  const trimmed = token.trim();\n\n  let name: string;\n\n  if (trimmed.startsWith('--')) {\n    name = trimmed.slice(2);\n  } else if (trimmed.startsWith('#')) {\n    name = `${trimmed.slice(1)}-color`;\n  } else if (trimmed.startsWith('$')) {\n    name = trimmed.slice(1);\n  } else {\n    name = trimmed;\n  }\n\n  return PROPERTY_NAME_RE.test(name) ? `--${name}` : null;\n}\n\n/** Whitespace and case are not meaningful in the values we compare against. */\nfunction normalizeValue(value: string): string {\n  return value.replace(/\\s+/g, '').toLowerCase();\n}\n\n/**\n * Every custom property the kit declares, by name. Membership only — the value\n * is deliberately not consulted, because a token's declared value tells you\n * nothing about whether it is in effect where you read it.\n *\n * Memoized against the palette version, like {@link getTokens} itself.\n */\nlet knownNamesCache: { version: number; names: Set<string> } | null = null;\n\nfunction getKnownTokenNames(): Set<string> {\n  const version = getPaletteVersion();\n\n  if (!knownNamesCache || knownNamesCache.version !== version) {\n    const names = new Set<string>();\n\n    for (const key of Object.keys(getTokens())) {\n      const name = tokenToProperty(key);\n\n      if (name) names.add(name);\n    }\n\n    knownNamesCache = { version, names };\n  }\n\n  return knownNamesCache.names;\n}\n\n/** These fire per token, per page — once each, not once per render. */\nconst warnedTokens = new Set<string>();\n\nfunction warnOnce(key: string, message: string) {\n  if (warnedTokens.has(key)) return;\n\n  warnedTokens.add(key);\n\n  warn(message);\n}\n\n/** The document `<body>` is where `<Root>` declares the token block. */\nfunction resolveTarget(element?: Element | null): Element | null {\n  if (element) return element;\n  if (typeof document === 'undefined') return null;\n\n  return document.body ?? document.documentElement ?? null;\n}\n\nfunction readValue(\n  computed: CSSStyleDeclaration,\n  token: string,\n  fallback: string | null,\n  silent: boolean,\n  onTokenSurface: boolean,\n): string | null {\n  const name = tokenToProperty(token);\n\n  if (!name) {\n    warnOnce(`name:${token}`, `\"${token}\" is not a valid design token name.`);\n\n    return fallback;\n  }\n\n  if (!onTokenSurface) {\n    if (!silent) {\n      warnOnce(\n        `surface:${name}`,\n        `Token \"${token}\" (${name}) was read from an element the design tokens are not in effect on, so any value there is tasty's @property default rather than the kit's. <Root> declares the token block on <body>, so <html>, a detached node, and a tree that has not mounted <Root> yet are all outside it. Pass \\`element\\` to read from a specific subtree, or \\`fallback\\` for a value to use instead.`,\n      );\n    }\n\n    return fallback;\n  }\n\n  const value = computed.getPropertyValue(name).trim();\n\n  if (!value) return fallback;\n\n  // On a token surface the computed value is the truth, including a genuinely\n  // transparent color or a real `0px`. The only thing left to catch is a name\n  // the kit never declares, where an @property default is all there is to read.\n  if (\n    PLACEHOLDER_VALUES.has(normalizeValue(value)) &&\n    !getKnownTokenNames().has(name)\n  ) {\n    if (!silent) {\n      warnOnce(\n        `unknown:${name}`,\n        `Token \"${token}\" (${name}) is not declared by the kit, and read back as an unset custom property. Check the name, or pass \\`fallback\\`.`,\n      );\n    }\n\n    return fallback;\n  }\n\n  return value;\n}\n\n/**\n * Read the resolved value of one design token — a color, a length, a font\n * descriptor — as a literal string.\n *\n * ```ts\n * resolveTokenValue('#purple'); // 'oklch(0.52 0.24 285)'\n * resolveTokenValue('$space-md'); // '8px'\n * resolveTokenValue('$t3-font-size'); // '14px'\n * ```\n *\n * Returns `options.fallback ?? null` when the token is not declared on the\n * element it was read from — see {@link ResolveTokenOptions}.\n */\nexport function resolveTokenValue(\n  token: string,\n  options: ResolveTokenOptions = {},\n): string | null {\n  return resolveTokenValues([token], options)[token];\n}\n\n/**\n * {@link resolveTokenValue} for several tokens at once, through a single\n * `getComputedStyle` call. Prefer this when building a theme object — a Stripe\n * `Appearance`, a CodeMirror theme — which needs a dozen values at a time.\n *\n * ```ts\n * const { '#surface': background, '#surface-text': color } = resolveTokenValues([\n *   '#surface',\n *   '#surface-text',\n * ]);\n * ```\n */\nexport function resolveTokenValues<T extends string>(\n  tokens: readonly T[],\n  options: ResolveTokenOptions = {},\n): Record<T, string | null> {\n  return readTokens(tokens, options, false);\n}\n\n/** Shared by the public reader and the preset reader, which suppresses warnings. */\nfunction readTokens<T extends string>(\n  tokens: readonly T[],\n  options: ResolveTokenOptions,\n  silent: boolean,\n): Record<T, string | null> {\n  const { element, fallback = null } = options;\n  const result = {} as Record<T, string | null>;\n  const target = resolveTarget(element);\n  const view = target?.ownerDocument?.defaultView;\n\n  if (!target || !view) {\n    for (const token of tokens) result[token] = fallback;\n\n    return result;\n  }\n\n  const computed = view.getComputedStyle(target);\n  // One read for the whole batch: the marker is a property of the element, not\n  // of any individual token.\n  const onTokenSurface = isTokenSurface(computed);\n\n  for (const token of tokens) {\n    result[token] = readValue(\n      computed,\n      token,\n      fallback,\n      silent,\n      onTokenSurface,\n    );\n  }\n\n  return result;\n}\n\n/**\n * Resolve a typography preset — `'t3'`, `'h2'`, `'s3'` — to the literal font\n * descriptors behind it, for a surface that takes a font as values rather than\n * as a `preset` style.\n *\n * ```ts\n * const { fontFamily, fontSize, lineHeight } = resolvePresetValues('t3');\n * ```\n *\n * A preset legitimately leaves most of these unset — only headings carry an\n * `iconSize`, only the `s*` family names a `fontFamily` — so unlike\n * {@link resolveTokenValues} a miss here is expected and never warns.\n */\nexport function resolvePresetValues(\n  preset: string,\n  options: ResolveTokenOptions = {},\n): ResolvedPreset {\n  const { fallback = null } = options;\n  const names = PRESET_FIELDS.map(\n    (field) => `$${preset}-${PRESET_FIELD_SUFFIXES[field]}`,\n  );\n  const values = readTokens(\n    [...names, '--font-sans'],\n    { element: options.element },\n    true,\n  );\n  const resolved = {} as ResolvedPreset;\n\n  PRESET_FIELDS.forEach((field, index) => {\n    resolved[field] = values[names[index]] ?? fallback;\n  });\n\n  // Every preset but the `s*` family inherits the sans stack rather than naming\n  // it, so the token is absent by design and `--font-sans` is the real answer.\n  resolved.fontFamily =\n    values[names[PRESET_FIELDS.indexOf('fontFamily')]] ??\n    values['--font-sans'] ??\n    fallback;\n\n  return resolved;\n}\n\n// ============================================================================\n// Appearance subscription\n// ============================================================================\n\n/**\n * A token's resolved value changes for two reasons: the palette was re-seeded\n * (`setPaletteConfig()`, covered by `usePaletteVersion`), or the scheme /\n * contrast tier flipped. This store covers the second.\n *\n * Both axes are the ones `@dark` and `@hc` resolve against (see\n * `src/components/Root.tsx`): the `data-schema` / `data-contrast` attributes on\n * `<html>`, and the `prefers-color-scheme` / `prefers-contrast` media queries\n * they fall back to. An attribute flip is invisible to `matchMedia` and a system\n * flip is invisible to a `MutationObserver`, so both are watched.\n */\nconst APPEARANCE_QUERIES = [\n  '(prefers-color-scheme: dark)',\n  '(prefers-contrast: more)',\n];\nconst APPEARANCE_ATTRIBUTES = ['data-schema', 'data-contrast'];\n\nlet appearanceVersion = 0;\nlet stopWatchingAppearance: (() => void) | null = null;\n\nconst appearanceListeners = new Set<() => void>();\n\nfunction onAppearanceChange() {\n  appearanceVersion++;\n\n  appearanceListeners.forEach((listener) => listener());\n}\n\nfunction watchAppearance(): () => void {\n  const teardowns: (() => void)[] = [];\n\n  // Guarded rather than assumed: jsdom ships neither `matchMedia` nor a\n  // `MediaQueryList` in every version, and a consumer's unit tests are exactly\n  // where a hook like this gets mounted. Losing one source of change is a stale\n  // value; throwing is a broken render.\n  if (typeof window.matchMedia === 'function') {\n    for (const query of APPEARANCE_QUERIES) {\n      const list = window.matchMedia(query);\n\n      if (typeof list?.addEventListener !== 'function') continue;\n\n      list.addEventListener('change', onAppearanceChange);\n      teardowns.push(() =>\n        list.removeEventListener('change', onAppearanceChange),\n      );\n    }\n  }\n\n  if (typeof MutationObserver === 'function' && document.documentElement) {\n    const observer = new MutationObserver(onAppearanceChange);\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: APPEARANCE_ATTRIBUTES,\n    });\n\n    teardowns.push(() => observer.disconnect());\n  }\n\n  return () => teardowns.forEach((teardown) => teardown());\n}\n\nfunction subscribeAppearance(listener: () => void): () => void {\n  appearanceListeners.add(listener);\n\n  if (appearanceListeners.size === 1 && typeof window !== 'undefined') {\n    stopWatchingAppearance = watchAppearance();\n  }\n\n  return () => {\n    appearanceListeners.delete(listener);\n\n    if (!appearanceListeners.size) {\n      stopWatchingAppearance?.();\n      stopWatchingAppearance = null;\n    }\n  };\n}\n\nfunction getAppearanceVersion(): number {\n  return appearanceVersion;\n}\n\n/**\n * A version React only ever hands out while rendering on the server or\n * hydrating: `useSyncExternalStore` reads `getServerSnapshot` in exactly those\n * two cases and `getSnapshot` in every other. That makes it a reliable \"this\n * render has to match the server's markup\" flag — see {@link useResolvedTokens}.\n *\n * A plain client render (`createRoot`) never sees it, so a CSR app still\n * resolves on its first render rather than paying an extra pass.\n */\nconst HYDRATING = -1;\n\nfunction getServerAppearanceVersion(): number {\n  return HYDRATING;\n}\n\n/**\n * Re-render on a scheme / contrast change. Returns the version rather than the\n * state so the snapshot is a primitive — the same reason `usePaletteVersion`\n * does, see `src/tokens/palette-config.ts`.\n */\nfunction useAppearanceVersion(): number {\n  return useSyncExternalStore(\n    subscribeAppearance,\n    getAppearanceVersion,\n    getServerAppearanceVersion,\n  );\n}\n\n// ============================================================================\n// React bindings\n// ============================================================================\n\n/**\n * The value is read out of the DOM, so it re-resolves whenever the palette is\n * re-seeded or the scheme / contrast tier flips, and it is `fallback ?? null`\n * during SSR. The layout effect is what covers the first commit: a consumer\n * rendered in the same pass as `<Root>` reads before the token block lands.\n */\nfunction useResolvedTokens<T extends string>(\n  tokens: readonly T[],\n  key: string,\n  options: ResolveTokenOptions,\n): Record<T, string | null> {\n  const { element, fallback } = options;\n  const paletteVersion = usePaletteVersion();\n  const appearance = useAppearanceVersion();\n\n  const [values, setValues] = useState(() =>\n    appearance === HYDRATING\n      ? unresolved(tokens, fallback)\n      : resolveTokenValues(tokens, options),\n  );\n\n  useLayoutEffect(() => {\n    setValues((previous) => {\n      const next = resolveTokenValues(tokens, { element, fallback });\n\n      return isSameRecord(previous, next) ? previous : next;\n    });\n    // `tokens` is a fresh array on all but the first render, so `key` — its\n    // joined identity — is what belongs in the dependency list.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key, element, fallback, paletteVersion, appearance]);\n\n  return values;\n}\n\n/**\n * What the server rendered: no DOM, so every token is the fallback. The first\n * client render has to agree with it or hydration reports a mismatch for any\n * consumer that renders the value; the layout effect above replaces it with the\n * resolved values before the browser paints.\n */\nfunction unresolved<T extends string>(\n  tokens: readonly T[],\n  fallback: string | undefined,\n): Record<T, string | null> {\n  const result = {} as Record<T, string | null>;\n\n  for (const token of tokens) result[token] = fallback ?? null;\n\n  return result;\n}\n\n/** Keeps the previous object when nothing moved, so it stays usable as a dep. */\nfunction isSameRecord<T extends Record<string, string | null>>(\n  a: T,\n  b: T,\n): boolean {\n  const keys = Object.keys(b);\n\n  if (Object.keys(a).length !== keys.length) return false;\n\n  return keys.every((key) => a[key] === b[key]);\n}\n\n/**\n * {@link resolveTokenValue} as a hook: re-renders when the palette is re-seeded\n * or the scheme / contrast tier flips.\n *\n * ```tsx\n * const accent = useTokenValue('#purple');\n *\n * return <Chart series={{ color: accent ?? '#000' }} />;\n * ```\n */\nexport function useTokenValue(\n  token: string,\n  options: ResolveTokenOptions = {},\n): string | null {\n  return useResolvedTokens([token], token, options)[token];\n}\n\n/**\n * {@link resolveTokenValues} as a hook. The returned object keeps its identity\n * while the values are unchanged, so it is safe as a dependency of the theme\n * object built from it — and the token list may be an inline literal.\n *\n * ```tsx\n * const colors = useTokenValues(['#surface', '#surface-text', '#border']);\n *\n * const appearance = useMemo(() => toStripeAppearance(colors), [colors]);\n * ```\n */\nexport function useTokenValues<T extends string>(\n  tokens: readonly T[],\n  options: ResolveTokenOptions = {},\n): Record<T, string | null> {\n  return useResolvedTokens(tokens, tokens.join(' '), options);\n}\n\n/**\n * {@link resolvePresetValues} as a hook.\n *\n * ```tsx\n * const { fontFamily, fontSize } = usePresetValues('s3');\n * ```\n */\nexport function usePresetValues(\n  preset: string,\n  options: ResolveTokenOptions = {},\n): ResolvedPreset {\n  const { element, fallback } = options;\n  const paletteVersion = usePaletteVersion();\n  const appearance = useAppearanceVersion();\n\n  const [values, setValues] = useState(() =>\n    appearance === HYDRATING\n      ? unresolvedPreset(fallback)\n      : resolvePresetValues(preset, options),\n  );\n\n  useLayoutEffect(() => {\n    setValues((previous) => {\n      const next = resolvePresetValues(preset, { element, fallback });\n\n      return isSameRecord(previous, next) ? previous : next;\n    });\n  }, [preset, element, fallback, paletteVersion, appearance]);\n\n  return values;\n}\n\n/** {@link unresolved} for the fixed shape {@link resolvePresetValues} returns. */\nfunction unresolvedPreset(fallback: string | undefined): ResolvedPreset {\n  const resolved = {} as ResolvedPreset;\n\n  for (const field of PRESET_FIELDS) resolved[field] = fallback ?? null;\n\n  return resolved;\n}\n"],"mappings":"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"}

package/dist/tokens/shadows.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/tokens/shadows.ts
 /**
 * Shadow tokens using tasty shorthand syntax.

package/dist/tokens/sizes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/tokens/sizes.ts
 /**
 * Component size values in pixels.

package/dist/tokens/spacing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/tokens/spacing.ts
 /**
 * Spacing tokens using tasty multiplier syntax.

package/dist/tokens/typography.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/tokens/typography.ts
 /**
 * Typography presets for headings, text, and special styles.

package/dist/utils/ResizeSensor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/utils/ResizeSensor.ts
 /**
 * Iterate over each of the provided element(s).

package/dist/utils/is-dev-env.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/utils/is-dev-env.ts
 function isDevEnv() {
 	if (typeof window !== "undefined" && window.localStorage) try {

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/utils/modules.ts
 function extractModule(promise) {
 	return promise.then((module) => module.default || module);

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/disabledProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/utils/react/disabledProps.ts
 /**
 * Tags where `disabled` is a real HTML attribute. Browsers refuse to dispatch

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { chain } from "./chain.js";
 import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b4ff7b4 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3235a6e | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {