npm - @cube-dev/ui-kit - Versions diffs - 0.0.0-canary-69f25fb → 0.0.0-canary-bafd63a - Mend

@cube-dev/ui-kit 0.0.0-canary-69f25fb → 0.0.0-canary-bafd63a

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 (558) hide show

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-69f25fb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bafd63a | 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.0.0-canary-69f25fb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bafd63a | 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.0.0-canary-69f25fb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bafd63a | 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.0.0-canary-69f25fb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bafd63a | 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.0.0-canary-69f25fb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bafd63a | 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

package/dist/utils/react/useSchema.js ADDED Viewed

@@ -0,0 +1,176 @@
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bafd63a | Cube Dev Team */
+import { useSyncExternalStore } from "react";
+//#region src/utils/react/useSchema.ts
+/**
+* The ambient viewing conditions — the color schema and the contrast tier the
+* document is showing right now.
+*
+* This module is the single owner of the definition: it builds the `@dark` /
+* `@hc` predefined states that `src/components/Root.tsx` registers with tasty,
+* *and* it answers the same question in JS. One definition, two readers, so the
+* CSS and the JS answers cannot drift apart.
+*
+* **For styling, do not use this.** `{ '': light, '@dark': dark, '@hc': hc }` is
+* the answer, and branching styles in JS gives up the conditionality that lets a
+* schema flip repaint without a re-render. Two cases the state map cannot serve:
+*
+* 1. **Surfaces the stylesheet does not reach** — a Vega spec, a CodeMirror or
+*    Monaco theme, a third-party iframe. They take values, not CSS, so `@dark`
+*    never applies and the branch has to happen in JS.
+* 2. **Control state that is not styling** — seeding or labelling a control from
+*    the ambient condition, e.g. a Light/Dark or Normal/High-contrast preview
+*    selector that starts on whatever the page is already showing.
+*
+* Root-level only, and deliberately not a generic state reader: tasty's state
+* vocabulary mixes element-local states (`hovered`, `pressed`, `disabled`) with
+* ambient ones (`@media(…)`, `@root(…)`), and only the ambient half is
+* answerable without an element. Evaluating the state language in JS would mean
+* a second implementation of the state algebra to keep in agreement with the CSS
+* one, for a question almost every caller asks about the root anyway.
+*/
+/**
+* The `data-*` attribute names the opt-in uses, and the media queries it falls
+* back to. `@root(schema=dark)` compiles to `:root[data-schema="dark"]`, hence
+* the `data-` prefix on the DOM side and the bare key on the tasty side.
+*/
+const SCHEMA_KEY = "schema";
+const CONTRAST_KEY = "contrast";
+const SCHEMA_ATTR = `data-${SCHEMA_KEY}`;
+const CONTRAST_ATTR = `data-${CONTRAST_KEY}`;
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+const HIGH_CONTRAST_QUERY = "(prefers-contrast: more)";
+/**
+* The `@dark` / `@hc` state aliases, in tasty's DSL — registered globally by
+* `<Root>` via `setGlobalPredefinedStates()`.
+*
+* The attribute opt-in wins over the system preference, and the fallback is
+* gated on the attribute being *absent* (`!@root(schema)`) rather than on it
+* being some other value — so `<html data-schema="light">` stays light inside a
+* dark OS, which is the whole point of an opt-in. {@link resolveSchema} and
+* {@link resolveHighContrast} read the same way.
+*/
+const AMBIENT_PREDEFINED_STATES = {
+	"@dark": `@root(${SCHEMA_KEY}=dark) | (!@root(${SCHEMA_KEY}) & @media${DARK_QUERY})`,
+	"@hc": `@root(${CONTRAST_KEY}=high) | (!@root(${CONTRAST_KEY}) & @media${HIGH_CONTRAST_QUERY})`
+};
+/**
+* `matchMedia` is called per read rather than cached, so a test that stubs it
+* takes effect immediately. Missing (older jsdom, non-DOM runtimes) reads as
+* "no preference", which lands on the light / normal-contrast defaults.
+*/
+function mediaMatches(query) {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false;
+}
+function rootAttribute(name) {
+	return typeof document === "undefined" ? null : document.documentElement.getAttribute(name);
+}
+/**
+* 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.
+*/
+function resolveSchema() {
+	const attribute = rootAttribute(SCHEMA_ATTR);
+	if (attribute !== null) return attribute === "dark" ? "dark" : "light";
+	return mediaMatches(DARK_QUERY) ? "dark" : "light";
+}
+/**
+* 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.
+*/
+function resolveHighContrast() {
+	const attribute = rootAttribute(CONTRAST_ATTR);
+	if (attribute !== null) return attribute === "high";
+	return mediaMatches(HIGH_CONTRAST_QUERY);
+}
+const listeners = /* @__PURE__ */ new Set();
+let stopWatching = null;
+function notify() {
+	listeners.forEach((listener) => listener());
+}
+/**
+* Both inputs have to be watched, because either can decide the answer: the
+* attribute when the opt-in is set, the media query otherwise. One observer and
+* one pair of query listeners are shared by every subscriber, and torn down when
+* the last one leaves.
+*/
+function startWatching() {
+	if (typeof document === "undefined") return () => {};
+	const observer = new MutationObserver(notify);
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: [SCHEMA_ATTR, CONTRAST_ATTR]
+	});
+	const queries = typeof window !== "undefined" && typeof window.matchMedia === "function" ? [window.matchMedia(DARK_QUERY), window.matchMedia(HIGH_CONTRAST_QUERY)] : [];
+	queries.forEach((query) => query.addEventListener("change", notify));
+	return () => {
+		observer.disconnect();
+		queries.forEach((query) => query.removeEventListener("change", notify));
+	};
+}
+/**
+* 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.
+*/
+function subscribeSchema(listener) {
+	listeners.add(listener);
+	if (!stopWatching) stopWatching = startWatching();
+	return () => {
+		listeners.delete(listener);
+		if (!listeners.size && stopWatching) {
+			stopWatching();
+			stopWatching = null;
+		}
+	};
+}
+/**
+* Snapshots are primitives, so React bails out on an unchanged value and no
+* memoization is needed — a contrast change re-runs a `useSchema()` reader's
+* `getSnapshot` and stops there.
+*/
+const getServerSchema = () => "light";
+const getServerHighContrast = () => false;
+/**
+* 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.
+*/
+function useSchema() {
+	return useSyncExternalStore(subscribeSchema, resolveSchema, getServerSchema);
+}
+/**
+* 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.
+*/
+function useHighContrast() {
+	return useSyncExternalStore(subscribeSchema, resolveHighContrast, getServerHighContrast);
+}
+//#endregion
+export { AMBIENT_PREDEFINED_STATES, resolveHighContrast, resolveSchema, subscribeSchema, useHighContrast, useSchema };
+//# sourceMappingURL=useSchema.js.map

package/dist/utils/react/useSchema.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useSchema.js","names":[],"sources":["../../../src/utils/react/useSchema.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\n/**\n * The ambient viewing conditions — the color schema and the contrast tier the\n * document is showing right now.\n *\n * This module is the single owner of the definition: it builds the `@dark` /\n * `@hc` predefined states that `src/components/Root.tsx` registers with tasty,\n * *and* it answers the same question in JS. One definition, two readers, so the\n * CSS and the JS answers cannot drift apart.\n *\n * **For styling, do not use this.** `{ '': light, '@dark': dark, '@hc': hc }` is\n * the answer, and branching styles in JS gives up the conditionality that lets a\n * schema flip repaint without a re-render. Two cases the state map cannot serve:\n *\n * 1. **Surfaces the stylesheet does not reach** — a Vega spec, a CodeMirror or\n * Monaco theme, a third-party iframe. They take values, not CSS, so `@dark`\n * never applies and the branch has to happen in JS.\n * 2. **Control state that is not styling** — seeding or labelling a control from\n * the ambient condition, e.g. a Light/Dark or Normal/High-contrast preview\n * selector that starts on whatever the page is already showing.\n *\n * Root-level only, and deliberately not a generic state reader: tasty's state\n * vocabulary mixes element-local states (`hovered`, `pressed`, `disabled`) with\n * ambient ones (`@media(…)`, `@root(…)`), and only the ambient half is\n * answerable without an element. Evaluating the state language in JS would mean\n * a second implementation of the state algebra to keep in agreement with the CSS\n * one, for a question almost every caller asks about the root anyway.\n */\n\n// ============================================================================\n// The definition\n// ============================================================================\n\n/**\n * The `data-*` attribute names the opt-in uses, and the media queries it falls\n * back to. `@root(schema=dark)` compiles to `:root[data-schema=\"dark\"]`, hence\n * the `data-` prefix on the DOM side and the bare key on the tasty side.\n */\nconst SCHEMA_KEY = 'schema';\nconst CONTRAST_KEY = 'contrast';\nconst SCHEMA_ATTR = `data-${SCHEMA_KEY}`;\nconst CONTRAST_ATTR = `data-${CONTRAST_KEY}`;\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\nconst HIGH_CONTRAST_QUERY = '(prefers-contrast: more)';\n\n/**\n * The `@dark` / `@hc` state aliases, in tasty's DSL — registered globally by\n * `<Root>` via `setGlobalPredefinedStates()`.\n *\n * The attribute opt-in wins over the system preference, and the fallback is\n * gated on the attribute being *absent* (`!@root(schema)`) rather than on it\n * being some other value — so `<html data-schema=\"light\">` stays light inside a\n * dark OS, which is the whole point of an opt-in. {@link resolveSchema} and\n * {@link resolveHighContrast} read the same way.\n */\nexport const AMBIENT_PREDEFINED_STATES = {\n '@dark': `@root(${SCHEMA_KEY}=dark) | (!@root(${SCHEMA_KEY}) & @media${DARK_QUERY})`,\n '@hc': `@root(${CONTRAST_KEY}=high) | (!@root(${CONTRAST_KEY}) & @media${HIGH_CONTRAST_QUERY})`,\n} as const;\n\n/** The color schema the document resolves to — the two arms of the `@dark` state. */\nexport type ColorSchema = 'light' | 'dark';\n\n// ============================================================================\n// Reading\n// ============================================================================\n\n/**\n * `matchMedia` is called per read rather than cached, so a test that stubs it\n * takes effect immediately. Missing (older jsdom, non-DOM runtimes) reads as\n * \"no preference\", which lands on the light / normal-contrast defaults.\n */\nfunction mediaMatches(query: string): boolean {\n return typeof window !== 'undefined' &&\n typeof window.matchMedia === 'function'\n ? window.matchMedia(query).matches\n : false;\n}\n\nfunction rootAttribute(name: string): string | null {\n return typeof document === 'undefined'\n ? null\n : document.documentElement.getAttribute(name);\n}\n\n/**\n * The document's current color schema, read once — the JS answer to `@dark`.\n *\n * Outside React (a chart spec built in a module, an editor theme registered at\n * import time). In React use {@link useSchema}, which also re-renders on change.\n * Returns `'light'` with no DOM.\n */\nexport function resolveSchema(): ColorSchema {\n const attribute = rootAttribute(SCHEMA_ATTR);\n\n if (attribute !== null) {\n return attribute === 'dark' ? 'dark' : 'light';\n }\n\n return mediaMatches(DARK_QUERY) ? 'dark' : 'light';\n}\n\n/**\n * Whether the document is showing the high-contrast tier, read once — the JS\n * answer to `@hc`.\n *\n * Note this is an *ambient* condition, not the theme's `contrastLevel`: the\n * level is a `PaletteConfig` seed the app supplies (read it with\n * `getPaletteConfig()`), while this is the tier the viewer asked for.\n * Returns `false` with no DOM.\n */\nexport function resolveHighContrast(): boolean {\n const attribute = rootAttribute(CONTRAST_ATTR);\n\n if (attribute !== null) {\n return attribute === 'high';\n }\n\n return mediaMatches(HIGH_CONTRAST_QUERY);\n}\n\n// ============================================================================\n// Watching\n// ============================================================================\n\nconst listeners = new Set<() => void>();\n\nlet stopWatching: (() => void) | null = null;\n\nfunction notify() {\n listeners.forEach((listener) => listener());\n}\n\n/**\n * Both inputs have to be watched, because either can decide the answer: the\n * attribute when the opt-in is set, the media query otherwise. One observer and\n * one pair of query listeners are shared by every subscriber, and torn down when\n * the last one leaves.\n */\nfunction startWatching(): () => void {\n if (typeof document === 'undefined') {\n return () => {};\n }\n\n const observer = new MutationObserver(notify);\n\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: [SCHEMA_ATTR, CONTRAST_ATTR],\n });\n\n const queries =\n typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n ? [window.matchMedia(DARK_QUERY), window.matchMedia(HIGH_CONTRAST_QUERY)]\n : [];\n\n queries.forEach((query) => query.addEventListener('change', notify));\n\n return () => {\n observer.disconnect();\n queries.forEach((query) => query.removeEventListener('change', notify));\n };\n}\n\n/**\n * Subscribe to ambient condition changes — either the schema or the contrast\n * tier. Returns an unsubscribe function.\n *\n * The listener takes no argument: re-read with {@link resolveSchema} /\n * {@link resolveHighContrast}, which is what the hooks below do. For non-React\n * consumers that own a surface the stylesheet cannot reach — re-theming a Monaco\n * instance, re-rendering a chart.\n */\nexport function subscribeSchema(listener: () => void): () => void {\n listeners.add(listener);\n\n if (!stopWatching) {\n stopWatching = startWatching();\n }\n\n return () => {\n listeners.delete(listener);\n\n if (!listeners.size && stopWatching) {\n stopWatching();\n stopWatching = null;\n }\n };\n}\n\n// ============================================================================\n// React bindings\n// ============================================================================\n\n/**\n * Snapshots are primitives, so React bails out on an unchanged value and no\n * memoization is needed — a contrast change re-runs a `useSchema()` reader's\n * `getSnapshot` and stops there.\n */\nconst getServerSchema = (): ColorSchema => 'light';\nconst getServerHighContrast = () => false;\n\n/**\n * The document's color schema, kept live — `'light'` or `'dark'`.\n *\n * ```tsx\n * const schema = useSchema();\n *\n * <VegaChart spec={useMemo(() => buildSpec(schema), [schema])} />;\n * ```\n *\n * Follows both the `<html data-schema>` opt-in and `prefers-color-scheme`,\n * exactly as the `@dark` state does. Under SSR it renders `'light'` and\n * re-renders with the real value after hydration.\n */\nexport function useSchema(): ColorSchema {\n return useSyncExternalStore(subscribeSchema, resolveSchema, getServerSchema);\n}\n\n/**\n * Whether the document is showing the high-contrast tier, kept live — the hook\n * form of {@link resolveHighContrast}, following `<html data-contrast>` and\n * `prefers-contrast` exactly as the `@hc` state does.\n *\n * Under SSR it renders `false` and re-renders with the real value after\n * hydration.\n */\nexport function useHighContrast(): boolean {\n return useSyncExternalStore(\n subscribeSchema,\n resolveHighContrast,\n getServerHighContrast,\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,aAAa;AACnB,MAAM,eAAe;AACrB,MAAM,cAAc,QAAQ;AAC5B,MAAM,gBAAgB,QAAQ;AAC9B,MAAM,aAAa;AACnB,MAAM,sBAAsB;;;;;;;;;;;AAY5B,MAAa,4BAA4B;CACvC,SAAS,SAAS,WAAW,mBAAmB,WAAW,YAAY,WAAW;CAClF,OAAO,SAAS,aAAa,mBAAmB,aAAa,YAAY,oBAAoB;CAC9F;;;;;;AAcD,SAAS,aAAa,OAAwB;AAC5C,QAAO,OAAO,WAAW,eACvB,OAAO,OAAO,eAAe,aAC3B,OAAO,WAAW,MAAM,CAAC,UACzB;;AAGN,SAAS,cAAc,MAA6B;AAClD,QAAO,OAAO,aAAa,cACvB,OACA,SAAS,gBAAgB,aAAa,KAAK;;;;;;;;;AAUjD,SAAgB,gBAA6B;CAC3C,MAAM,YAAY,cAAc,YAAY;AAE5C,KAAI,cAAc,KAChB,QAAO,cAAc,SAAS,SAAS;AAGzC,QAAO,aAAa,WAAW,GAAG,SAAS;;;;;;;;;;;AAY7C,SAAgB,sBAA+B;CAC7C,MAAM,YAAY,cAAc,cAAc;AAE9C,KAAI,cAAc,KAChB,QAAO,cAAc;AAGvB,QAAO,aAAa,oBAAoB;;AAO1C,MAAM,4BAAY,IAAI,KAAiB;AAEvC,IAAI,eAAoC;AAExC,SAAS,SAAS;AAChB,WAAU,SAAS,aAAa,UAAU,CAAC;;;;;;;;AAS7C,SAAS,gBAA4B;AACnC,KAAI,OAAO,aAAa,YACtB,cAAa;CAGf,MAAM,WAAW,IAAI,iBAAiB,OAAO;AAE7C,UAAS,QAAQ,SAAS,iBAAiB;EACzC,YAAY;EACZ,iBAAiB,CAAC,aAAa,cAAc;EAC9C,CAAC;CAEF,MAAM,UACJ,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,aAC1D,CAAC,OAAO,WAAW,WAAW,EAAE,OAAO,WAAW,oBAAoB,CAAC,GACvE,EAAE;AAER,SAAQ,SAAS,UAAU,MAAM,iBAAiB,UAAU,OAAO,CAAC;AAEpE,cAAa;AACX,WAAS,YAAY;AACrB,UAAQ,SAAS,UAAU,MAAM,oBAAoB,UAAU,OAAO,CAAC;;;;;;;;;;;;AAa3E,SAAgB,gBAAgB,UAAkC;AAChE,WAAU,IAAI,SAAS;AAEvB,KAAI,CAAC,aACH,gBAAe,eAAe;AAGhC,cAAa;AACX,YAAU,OAAO,SAAS;AAE1B,MAAI,CAAC,UAAU,QAAQ,cAAc;AACnC,iBAAc;AACd,kBAAe;;;;;;;;;AAcrB,MAAM,wBAAqC;AAC3C,MAAM,8BAA8B;;;;;;;;;;;;;;AAepC,SAAgB,YAAyB;AACvC,QAAO,qBAAqB,iBAAiB,eAAe,gBAAgB;;;;;;;;;;AAW9E,SAAgB,kBAA2B;AACzC,QAAO,qBACL,iBACA,qBACA,sBACD"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-69f25fb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bafd63a | Cube Dev Team */
 import { useEffect, useState } from "react";
 //#region src/utils/react/useViewportSize.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-69f25fb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bafd63a | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";

package/dist/utils/selection.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-69f25fb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bafd63a | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-69f25fb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bafd63a | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-69f25fb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bafd63a | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-69f25fb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bafd63a | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js CHANGED Viewed

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-69f25fb | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-bafd63a | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-69f25fb";
+const VERSION = "0.0.0-canary-bafd63a";
 const TASTY_VERSION = "3.3.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/Theming.md CHANGED Viewed

@@ -395,6 +395,38 @@ subscribePaletteConfig(() => {
 `getPaletteConfig()` always returns the fully resolved form, so `getPaletteConfig().themes.danger.saturation` is a number even if nobody ever set it. `DEFAULT_PALETTE_CONFIG` is the shipped baseline in the same shape.
+## Reading the ambient schema
+The palette config is what the app *asked for*; the schema and contrast tier are
+what the viewer is *seeing* — `<html data-schema>` / `prefers-color-scheme`, and
+`<html data-contrast>` / `prefers-contrast`. They are not part of the config,
+so `getPaletteConfig()` says nothing about them:
+```tsx
+import { useHighContrast, useSchema } from '@cube-dev/ui-kit';
+const schema = useSchema(); // 'light' | 'dark'
+const isHighContrast = useHighContrast(); // boolean
+```
+Both resolve exactly as the `@dark` / `@hc` states do — attribute opt-in first,
+media query only when the attribute is absent — and re-render when either input
+changes. Outside React: `resolveSchema()`, `resolveHighContrast()` and
+`subscribeSchema(listener)`, which fires on a change to either condition.
+Reach for these only where CSS cannot go. Styling belongs in a state map
+(`{ '': …, '@dark': …, '@hc': … }`), which repaints on a schema flip with no
+re-render at all. What the states cannot reach is a surface that takes values
+rather than CSS — a Vega spec, a CodeMirror or Monaco theme, an iframe — or a
+control whose value *is* the condition, like the Light/Dark and
+Normal/High-contrast selectors over the [theme builder](#theme-builder).
+Note the distinction from `contrastLevel`: the level is a config seed the app
+supplies and can read back, while high contrast is a viewing condition the
+document is in. They also pair up — `renderColorTokens({ scheme, highContrast })`
+takes both, so a region can be previewed in the conditions the page is actually
+showing.
 ## `<Root palette>`
 `<Root>` accepts the same config as a prop, applied during render so the first paint is already correct:

package/docs/Usage.md CHANGED Viewed

@@ -113,6 +113,21 @@ The `@dark` and `@hc` predefined states are wired up in `src/components/Root.tsx
 When the attribute is absent, the scheme falls back to `@media (prefers-color-scheme: dark)` and `@media (prefers-contrast: more)`.
+#### Reading the schema from JS
+For styling, use the state map — `{ '': light, '@dark': dark, '@hc': hc }`. Two cases it cannot serve: a surface the stylesheet never reaches (a Vega spec, a CodeMirror / Monaco theme, an iframe), and a control whose value *is* the ambient condition (a Light/Dark preview selector). For those, read the same two conditions from JS:
+```tsx
+import { useHighContrast, useSchema } from '@cube-dev/ui-kit';
+const schema = useSchema(); // 'light' | 'dark' — the JS answer to `@dark`
+const isHighContrast = useHighContrast(); // boolean — the JS answer to `@hc`
+```
+Both follow the attribute opt-in first and the media query second, exactly as the states do, and re-render when either changes. Outside React: `resolveSchema()`, `resolveHighContrast()`, and `subscribeSchema(listener)` (fires on either condition; re-read in the listener).
+Root-level only — there is no element-scoped or generic state reader, on purpose. Tasty's state vocabulary mixes element-local states (`hovered`, `pressed`, `disabled`) with ambient ones (`@media(…)`, `@root(…)`), and only the ambient half is answerable without an element.
 ### Surface & Text Vocabulary
 The neutral palette uses a `surface` / `surface-text` model. Each surface depth has its own AAA text color, plus a soft (AA) variant for secondary copy:

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-69f25fb",
+  "version": "0.0.0-canary-bafd63a",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {

package/dist/components/fields/ListBoxPopover/useCompositeFocus.d.ts DELETED Viewed

	@@ -1,2 +0,0 @@
1	-
2	- import React, { RefObject } from "react";

package/dist/components/portal/PortalProvider.d.ts DELETED Viewed

	@@ -1,2 +0,0 @@
1	-
2	- import { RefObject } from "react";