npm - @cube-dev/ui-kit - Versions diffs - 0.169.0 → 0.170.0 - Mend

@cube-dev/ui-kit 0.169.0 → 0.170.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (600) hide show

package/dist/tokens/resolve.js.map CHANGED Viewed

	@@ -1 +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 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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"}
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 { subscribeSchema } from '../utils/react/useSchema';\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 schema /\n * contrast tier flipped. This store covers the second.\n \n The watching itself belongs to `subscribeSchema()` (`src/utils/react/useSchema.ts`),\n * which owns the definition of both axes — the `data-schema` / `data-contrast`\n * attributes and the media queries they fall back to are the same strings\n * `<Root>` registers `@dark` and `@hc` from. This store only counts the changes,\n * so there is one observer for the document rather than one per concern.\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 subscribeAppearance(listener: () => void): () => void {\n appearanceListeners.add(listener);\n\n if (appearanceListeners.size === 1) {\n stopWatchingAppearance = subscribeSchema(onAppearanceChange);\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 schema / 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 schema / 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 schema / 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.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ import { Styles } from "@tenphi/tasty";
  *
  * The shadow colors (`#shadow-sm` / `#shadow-md` / `#shadow-lg`) are
  * generated by Glaze and adapt automatically to dark / high-contrast
- * schemes — see `src/tokens/palette.ts`.
+ * schemas — see `src/tokens/palette.ts`.
  *
  * Keys use $ prefix for CSS custom properties.
  */

package/dist/tokens/shadows.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 //#region src/tokens/shadows.ts
 /**
 * Shadow tokens using tasty shorthand syntax.
@@ -9,7 +9,7 @@
 *
 * The shadow colors (`#shadow-sm` / `#shadow-md` / `#shadow-lg`) are
 * generated by Glaze and adapt automatically to dark / high-contrast
-* schemes — see `src/tokens/palette.ts`.
+* schemas — see `src/tokens/palette.ts`.
 *
 * Keys use $ prefix for CSS custom properties.
 */

package/dist/tokens/shadows.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shadows.js","names":[],"sources":["../../src/tokens/shadows.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n/*\n Shadow tokens using tasty shorthand syntax.\n \n Format: `<offset-y> <blur> <spread?> <color>`\n * - `1bw` = 1 × border-width\n * - `.5x` = 0.5 × gap\n \n The shadow colors (`#shadow-sm` / `#shadow-md` / `#shadow-lg`) are\n * generated by Glaze and adapt automatically to dark / high-contrast\n * ~~schemes~~ — see `src/tokens/palette.ts`.\n \n Keys use $ prefix for CSS custom properties.\n /\nexport const SHADOW_TOKENS: Styles = {\n /* Subtle shadow for list items /\n '$item-shadow': '0 1bw .375x #shadow-sm',\n /* Standard card shadow /\n '$card-shadow': '0 .5x 2x #shadow-md',\n /* Standard elevation /\n $shadow: '0 .5x 2x #shadow-md',\n /* Elevated dialog shadow */\n '$dialog-shadow': '0 1x 4x #shadow-lg',\n};\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,gBAAwB;CAEnC,gBAAgB;CAEhB,gBAAgB;CAEhB,SAAS;CAET,kBAAkB;CACnB"}
1	+ {"version":3,"file":"shadows.js","names":[],"sources":["../../src/tokens/shadows.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n/*\n Shadow tokens using tasty shorthand syntax.\n \n Format: `<offset-y> <blur> <spread?> <color>`\n * - `1bw` = 1 × border-width\n * - `.5x` = 0.5 × gap\n \n The shadow colors (`#shadow-sm` / `#shadow-md` / `#shadow-lg`) are\n * generated by Glaze and adapt automatically to dark / high-contrast\n * schemas — see `src/tokens/palette.ts`.\n \n Keys use $ prefix for CSS custom properties.\n /\nexport const SHADOW_TOKENS: Styles = {\n /* Subtle shadow for list items /\n '$item-shadow': '0 1bw .375x #shadow-sm',\n /* Standard card shadow /\n '$card-shadow': '0 .5x 2x #shadow-md',\n /* Standard elevation /\n $shadow: '0 .5x 2x #shadow-md',\n /* Elevated dialog shadow */\n '$dialog-shadow': '0 1x 4x #shadow-lg',\n};\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAa,gBAAwB;CAEnC,gBAAgB;CAEhB,gBAAgB;CAEhB,SAAS;CAET,kBAAkB;CACnB"}

package/dist/tokens/sizes.js CHANGED Viewed

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

package/dist/tokens/spacing.js CHANGED Viewed

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

package/dist/tokens/typography.js CHANGED Viewed

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

package/dist/utils/ResizeSensor.js CHANGED Viewed

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

package/dist/utils/index.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ import { useLayoutEffect } from "./react/useLayoutEffect.js";
 import { mergeRefs, useCombinedRefs } from "./react/useCombinedRefs.js";
 import { wrapNodeIfPlain } from "./react/wrapNodeIfPlain.js";
 import { useViewportSize } from "./react/useViewportSize.js";
+import { ColorSchema, resolveHighContrast, resolveSchema, subscribeSchema, useHighContrast, useSchema } from "./react/useSchema.js";
 import { useQaProps } from "./react/useQaProps.js";
 import { EventBusContextValue, EventBusListener, EventBusProvider, useEventBus, useEventListener } from "./react/useEventBus.js";
 import { UsePopoverSyncOptions, useDismissParentPopover, usePopoverSync } from "./react/usePopoverSync.js";

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

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

package/dist/utils/modules.js CHANGED Viewed

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

package/dist/utils/promise.js CHANGED Viewed

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

package/dist/utils/raf.js CHANGED Viewed

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

package/dist/utils/random.js CHANGED Viewed

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

package/dist/utils/range.js CHANGED Viewed

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

package/dist/utils/react/RenderCache.js CHANGED Viewed

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

package/dist/utils/react/Slots.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | 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 CHANGED Viewed

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

package/dist/utils/react/index.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ import { useLayoutEffect } from "./useLayoutEffect.js";
 import { mergeRefs, useCombinedRefs } from "./useCombinedRefs.js";
 import { wrapNodeIfPlain } from "./wrapNodeIfPlain.js";
 import { useViewportSize } from "./useViewportSize.js";
+import { ColorSchema, resolveHighContrast, resolveSchema, subscribeSchema, useHighContrast, useSchema } from "./useSchema.js";
 import { useQaProps } from "./useQaProps.js";
 import { EventBusContextValue, EventBusListener, EventBusProvider, useEventBus, useEventListener } from "./useEventBus.js";
 import { UsePopoverSyncOptions, useDismissParentPopover, usePopoverSync } from "./usePopoverSync.js";

package/dist/utils/react/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { getDisabledElementProps, omitActivationEventProps } from "./disabledProps.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
@@ -9,6 +9,7 @@ import { ClearSlots, SlotProvider, useSlotProps } from "./Slots.js";
 import { mergeRefs, useCombinedRefs } from "./useCombinedRefs.js";
 import { wrapNodeIfPlain } from "./wrapNodeIfPlain.js";
 import { useViewportSize } from "./useViewportSize.js";
+import { resolveHighContrast, resolveSchema, subscribeSchema, useHighContrast, useSchema } from "./useSchema.js";
 import { useQaProps } from "./useQaProps.js";
 import { EventBusProvider, useEventBus, useEventListener } from "./useEventBus.js";
 import { useDismissParentPopover, usePopoverSync } from "./usePopoverSync.js";

package/dist/utils/react/interactions.js CHANGED Viewed

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

package/dist/utils/react/isTextOnly.js CHANGED Viewed

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

package/dist/utils/react/mapProps.js CHANGED Viewed

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

package/dist/utils/react/mergeProps.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";

package/dist/utils/react/useBufferedValue.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useCallback, useRef, useState } from "react";

package/dist/utils/react/useCombinedRefs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";

package/dist/utils/react/useLayoutEffect.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import * as React$1 from "react";
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";

package/dist/utils/react/useMergeStyles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";

package/dist/utils/react/usePopoverSync.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";

package/dist/utils/react/useQaProps.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.170.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useSchema.d.ts ADDED Viewed

@@ -0,0 +1,58 @@
+//#region src/utils/react/useSchema.d.ts
+/** The color schema the document resolves to — the two arms of the `@dark` state. */
+type ColorSchema = 'light' | 'dark';
+/**
+ * The document's current color schema, read once — the JS answer to `@dark`.
+ *
+ * Outside React (a chart spec built in a module, an editor theme registered at
+ * import time). In React use {@link useSchema}, which also re-renders on change.
+ * Returns `'light'` with no DOM.
+ */
+declare function resolveSchema(): ColorSchema;
+/**
+ * Whether the document is showing the high-contrast tier, read once — the JS
+ * answer to `@hc`.
+ *
+ * Note this is an *ambient* condition, not the theme's `contrastLevel`: the
+ * level is a `PaletteConfig` seed the app supplies (read it with
+ * `getPaletteConfig()`), while this is the tier the viewer asked for.
+ * Returns `false` with no DOM.
+ */
+declare function resolveHighContrast(): boolean;
+/**
+ * Subscribe to ambient condition changes — either the schema or the contrast
+ * tier. Returns an unsubscribe function.
+ *
+ * The listener takes no argument: re-read with {@link resolveSchema} /
+ * {@link resolveHighContrast}, which is what the hooks below do. For non-React
+ * consumers that own a surface the stylesheet cannot reach — re-theming a Monaco
+ * instance, re-rendering a chart.
+ */
+declare function subscribeSchema(listener: () => void): () => void;
+/**
+ * The document's color schema, kept live — `'light'` or `'dark'`.
+ *
+ * ```tsx
+ * const schema = useSchema();
+ *
+ * <VegaChart spec={useMemo(() => buildSpec(schema), [schema])} />;
+ * ```
+ *
+ * Follows both the `<html data-schema>` opt-in and `prefers-color-scheme`,
+ * exactly as the `@dark` state does. Under SSR it renders `'light'` and
+ * re-renders with the real value after hydration.
+ */
+declare function useSchema(): ColorSchema;
+/**
+ * Whether the document is showing the high-contrast tier, kept live — the hook
+ * form of {@link resolveHighContrast}, following `<html data-contrast>` and
+ * `prefers-contrast` exactly as the `@hc` state does.
+ *
+ * Under SSR it renders `false` and re-renders with the real value after
+ * hydration.
+ */
+declare function useHighContrast(): boolean;
+//#endregion
+export { ColorSchema, resolveHighContrast, resolveSchema, subscribeSchema, useHighContrast, useSchema };
+//# sourceMappingURL=useSchema.d.ts.map