@mechane-ai/elements 0.13.0 → 0.14.0

package/README.md

@@ -77,7 +77,8 @@ Every path below belongs to `@mechane-ai/elements`. There is one package, versio
 | `/theme`               | Light and dark theme props.                                                         |
 | `/csp`                 | Application-supplied content security policy configuration.                         |
 | `/tokens`              | Compiled token references for runtime styles.                                       |
-| `/tokens.stylex`       | Direct definitions for StyleX authoring and themes.                                 |
+| `/tokens.stylex`       | Variable definitions for StyleX authoring and themes.                               |
+| `/constants.stylex`    | Compile-time conditions, palette values, layers, and shared geometry.               |
 | `/styles.css`          | Component styles and token defaults.                                                |
 
 Focused entries keep renderer and chart dependencies out of basic controls. There is no all-components barrel. Renderers
@@ -98,10 +99,10 @@ Detail titles wrap; list metadata truncates. Sidebar items share contiguous hit
 navigation and reserve the divided sidebar footer for persistent account controls. Use
 `SidebarFooter layout="navigation"` for a group of commands; its intrinsic height keeps the scrolling navigation clear.
 
-`AppShell focus` temporarily hides navigation while retaining its expansion state. `ViewStack.Panel` keeps inactive
-content mounted and measurable but removes it from keyboard and assistive-technology navigation. The application owns
-which view is active and when to unmount it; use this for a draft or reading position that must survive inspection.
-`WorkbenchScroll` requires an accessible `label`; its `flush` mode leaves list insets to the table. Its
+`AppShell shouldFocus` temporarily hides navigation while retaining its expansion state. `ViewStack.Panel` keeps
+inactive content mounted and measurable but removes it from keyboard and assistive-technology navigation. The
+application owns which view is active and when to unmount it; use this for a draft or reading position that must survive
+inspection. `WorkbenchScroll` requires an accessible `label`; its `isFlush` mode leaves list insets to the table. Its
 `scrollRestorationId` identifies the actual scroll region for application-owned restoration.
 
 Each `DataTable` column declares a role: `primary`, `text`, `status`, `number`, `timestamp`, or `actions`. Roles own
@@ -136,13 +137,35 @@ The default theme is light, with system fonts and a compact spacing scale. Impor
 `@mechane-ai/elements/theme` and spread `themeProps.light` or `themeProps.dark` onto the document root. Portaled content
 then inherits the same theme. The application owns the preference; no theme provider is required.
 
-For custom StyleX themes, import definitions from `@mechane-ai/elements/tokens.stylex`, enable `useCSSLayers: true` and
-CommonJS module resolution in the StyleX plugin, and use `stylex.createTheme`. The defining path is preserved in the
-archive so generated variables match its compiled CSS. The ordinary `/tokens` entry supplies runtime references rather
-than compile-time definitions.
+For custom StyleX styles and themes, import variables from `@mechane-ai/elements/tokens.stylex` and compile-time
+constants from `@mechane-ai/elements/constants.stylex`. The archive preserves both defining paths. Variables retain the
+same names as the packaged CSS; constants need their source compiled with the consuming styles. The ordinary `/tokens`
+entry supplies runtime references and values for both groups.
+
+With Vite and StyleX 0.19.1, configure the consumer as follows:
+
+```ts
+import stylex from '@stylexjs/unplugin/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    stylex({
+      useCSSLayers: true,
+      debug: false,
+      runtimeInjection: false,
+      unstable_moduleResolution: { type: 'commonJS' },
+      externalPackages: ['@mechane-ai/elements'],
+    }),
+  ],
+  resolve: { alias: [{ find: /^@mechane-ai\/elements\/tokens\.stylex$/, replacement: '@mechane-ai/elements/tokens' }] },
+});
+```
 
-Set the consumer compiler's `debug: false` so placement overrides use the archive's property keys. Keep definition
-resolution for compilation; bundle `/tokens` runtime references to avoid reinjecting defaults over a chosen theme.
+The bundler alias uses compiled variable references without re-emitting defaults over the selected theme. StyleX still
+resolves the original defining path during compilation. Keep `/constants.stylex` direct so its metadata reaches the
+compiler. Consumer styles can then use `[conditions.coarsePointer]` from that entry, and
+`stylex.createTheme(colors, ...)` with `colors` from `/tokens.stylex`.
 
 When an application's Content Security Policy requires nonces, wrap its component tree in `CSPProvider` from
 `@mechane-ai/elements/csp` and pass the same request nonce used in its policy. Preserve that nonce during hydration.
@@ -162,7 +185,8 @@ Use `AsyncRegion` from `/feedback` with an explicit `pending`, `ready`, or `fail
 loading duration, and ordinary callers do not configure timing.
 
 Wrap a page in `LoadingScope` and pass its navigation `identity` to share one clock across dependent reads. Updating the
-identity resets pending presentation without remounting ready children. Keep refreshes in the ready state and retain
+identity resets pending presentation without remounting ready children. Use `initialStartedAt` only to preserve elapsed
+document loading time at hydration; later identities start their own clock. Keep refreshes in the ready state and retain
 their content, focus, and drafts; display progress or failure alongside the last result.
 
 Build placeholders from the same layouts as their destinations. `DataTablePlaceholder` accepts the real table's

package/dist/ai.js

@@ -1,8 +1,8 @@
-import { C as e, E as t, O as n, T as r, f as i, g as a, p as o, t as s, w as c } from "./src-BNlyCwOr.js";
-import { t as l } from "./content-link-Oj-MtNYi.js";
-import { r as u, t as d } from "./src-CVlgjAlw.js";
-import { c as f, d as p } from "./src-B0UTwpOz.js";
-import { c as m, u as h } from "./src-DMsnWyru.js";
+import { C as e, E as t, O as n, T as r, f as i, g as a, p as o, t as s, w as c } from "./src-CyJd2qSZ.js";
+import { t as l } from "./content-link-CEx2s1MU.js";
+import { r as u, t as d } from "./src-d7EAi61b.js";
+import { c as f, d as p } from "./src-C9GQP3px.js";
+import { c as m, u as h } from "./src-BkXlN6aZ.js";
 import { t as g } from "./accessibility-C-aIZ1Yx.js";
 import * as _ from "@stylexjs/stylex";
 import { createContext as v, useContext as y, useId as b, useRef as x } from "react";
@@ -28,14 +28,14 @@ function M(t) {
 			t.status === "pending" ? /* @__PURE__ */ C(i, { children: [/* @__PURE__ */ S(e, {
 				variant: "solid",
 				onClick: t.onApprove,
-				disabled: t.disabled === !0 || t.busy !== void 0,
-				pending: t.busy === "approve",
+				disabled: t.isDisabled === !0 || t.busy !== void 0,
+				isPending: t.busy === "approve",
 				pendingLabel: "Approving…",
 				children: t.approveLabel ?? "Approve"
 			}), /* @__PURE__ */ S(e, {
 				onClick: t.onDeny,
-				disabled: t.disabled === !0 || t.busy !== void 0,
-				pending: t.busy === "deny",
+				disabled: t.isDisabled === !0 || t.busy !== void 0,
+				isPending: t.busy === "deny",
 				pendingLabel: "Denying…",
 				children: t.denyLabel ?? "Deny"
 			})] }) : /* @__PURE__ */ S(s, { children: t.statusLabel })
@@ -44,7 +44,7 @@ function M(t) {
 }
 // packages/ai/src/conversation.tsx
 var N = v(void 0);
-function P({ children: e, initialPosition: t = "end", follow: n = !0, viewportRef: r }) {
+function P({ children: e, initialPosition: t = "end", shouldFollow: n = !0, viewportRef: r }) {
 	let i = x(null), a = r ?? i;
 	return /* @__PURE__ */ S(N.Provider, {
 		value: a,
@@ -68,7 +68,7 @@ function F({ label: e, children: t, scrollRestorationId: n }) {
 		children: t
 	});
 }
-function I({ children: e, streaming: t = !1 }) {
+function I({ children: e, isStreaming: t = !1 }) {
 	return /* @__PURE__ */ S(k.Content, {
 		"aria-live": "polite",
 		"aria-relevant": "additions",
@@ -186,7 +186,7 @@ function G({ author: e, children: t, id: n, kind: r = "assistant", meta: i, avat
 				children: s
 			}),
 			o !== void 0 && /* @__PURE__ */ S("footer", {
-				className: "x78zum5 x1a02dak x6s0dn4 xeuugli xunmzkg x1hc1fzr x1ac4sdd xea5s0o xbfgl4k",
+				className: "x78zum5 x1a02dak x6s0dn4 xeuugli xunmzkg x1hc1fzr x12vu8c0 xtf8l8m x1thm12b",
 				children: o
 			})
 		]
@@ -262,7 +262,7 @@ var X = { action: {
 	keTefX: "xvc5jky",
 	$$css: !0
 } };
-function Z({ compact: e = !1 }) {
+function Z({ isCompact: e = !1 }) {
 	return /* @__PURE__ */ S("div", {
 		"aria-hidden": !0,
 		inert: !0,
@@ -281,14 +281,14 @@ function Z({ compact: e = !1 }) {
 					className: "x78zum5 x1a02dak x6s0dn4 x1hnptsi xeuugli x12lumcd xy8obcc xas2l8k",
 					children: /* @__PURE__ */ S(p, { width: "8ch" })
 				}), /* @__PURE__ */ S(f, {
-					icon: !0,
+					isIconOnly: !0,
 					xstyle: X.action
 				})]
 			})]
 		})
 	});
 }
-function Q({ label: e, value: t, onValueChange: n, onSubmit: r, name: i = "prompt", placeholder: a, maxLength: o, required: s = !0, pending: l = !1, disabled: u = !1, submitDisabled: f = !1, submitLabel: p = "Send message", pendingLabel: v = "Sending…", enterBehavior: y = "newline", compact: x = !1, description: w, error: E, controls: D, attachments: k, onStop: A, stopPending: j = !1, stopLabel: M = "Stop response" }) {
+function Q({ label: e, value: t, onValueChange: n, onSubmit: r, name: i = "prompt", placeholder: a, maxLength: o, required: s = !0, isPending: l = !1, disabled: u = !1, isSubmitDisabled: f = !1, submitLabel: p = "Send message", pendingLabel: v = "Sending…", enterBehavior: y = "newline", isCompact: x = !1, description: w, error: E, controls: D, attachments: k, onStop: A, isStopPending: j = !1, stopLabel: M = "Stop response" }) {
 	let N = b(), P = u || l, F = p;
 	A === void 0 ? l ? F = v : y === "submit" && (F = `${p} · Enter`) : F = j ? "Stopping…" : M;
 	function I(e) {
@@ -318,7 +318,7 @@ function Q({ label: e, value: t, onValueChange: n, onSubmit: r, name: i = "promp
 						/* @__PURE__ */ S(h, {
 							appearance: "plain",
 							rows: x ? 1 : 2,
-							compact: x,
+							isCompact: x,
 							name: i,
 							value: t,
 							onChange: (e) => n(e.currentTarget.value),
@@ -342,7 +342,7 @@ function Q({ label: e, value: t, onValueChange: n, onSubmit: r, name: i = "promp
 								variant: "solid",
 								"aria-label": l ? v : p,
 								disabled: u || f,
-								pending: l,
+								isPending: l,
 								children: /* @__PURE__ */ S(T, {
 									size: 16,
 									"aria-hidden": !0
@@ -355,7 +355,7 @@ function Q({ label: e, value: t, onValueChange: n, onSubmit: r, name: i = "promp
 									e.preventDefault(), A();
 								},
 								disabled: u,
-								pending: j,
+								isPending: j,
 								children: /* @__PURE__ */ S(O, {
 									size: 14,
 									"aria-hidden": !0
@@ -415,7 +415,7 @@ function ee({ source: e, label: n }) {
 		}), /* @__PURE__ */ S(u.Portal, { children: /* @__PURE__ */ S(u.Positioner, {
 			side: "top",
 			children: /* @__PURE__ */ S(u.Popup, { children: /* @__PURE__ */ C(o, {
-				compact: !0,
+				isCompact: !0,
 				children: [
 					/* @__PURE__ */ S(u.Title, { children: e.title }),
 					e.description !== void 0 && /* @__PURE__ */ S(u.Description, { children: e.description }),

package/dist/{categorical-values-DwobbjBq.js → categorical-values-BnWfIPlv.js}

@@ -1,5 +1,5 @@
-import { n as e, s as t } from "./chart-frame-DAxsgMyl.js";
-import { n } from "./chart-input-B0snxbMH.js";
+import { n as e, s as t } from "./chart-frame-Dm8UNfYD.js";
+import { n } from "./chart-input-ceiMZYI-.js";
 import * as r from "@stylexjs/stylex";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 // packages/charts/src/categorical-values.tsx
@@ -40,7 +40,7 @@ function f({ items: n, selection: o }) {
 		className: "xrvj5dj x1ghz6dp x1717udv xe8uvvx",
 		children: n.map((n) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ a(e, {
 			label: `${n.label}: ${n.valueLabel}`,
-			selected: o?.selectedId === n.id,
+			isSelected: o?.selectedId === n.id,
 			onSelect: o === void 0 ? void 0 : () => o.onSelect(n.id),
 			children: [/* @__PURE__ */ a("span", {
 				className: "x78zum5 x6s0dn4 x1hnptsi x1slnebi xeuugli",

package/dist/{chart-frame-DAxsgMyl.js → chart-frame-Dm8UNfYD.js}

@@ -1,5 +1,5 @@
-import { g as e } from "./src-BNlyCwOr.js";
-import { chartColors as t, colors as n } from "./tokens.js";
+import { g as e } from "./src-CyJd2qSZ.js";
+import { n as t, r as n } from "./tokens.stylex-DTHHFbyl.js";
 import * as r from "@stylexjs/stylex";
 import { useId as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
@@ -123,9 +123,9 @@ function f({ items: e, label: t = "Legend" }) {
 		}, e.id))
 	});
 }
-function p({ label: e, selected: t = !1, onSelect: n, children: r }) {
+function p({ label: e, isSelected: t = !1, onSelect: n, children: r }) {
 	return n === void 0 ? /* @__PURE__ */ a("div", {
-		className: "x78zum5 x1a02dak x6s0dn4 x1qughib x8zbtdt x1gkm1c7 xeuugli x17tes2r xwu7q15 x9f619 xh8yej3 xc342km x1hmw7ec x5g2kb4 x1hz01jw xtqrqnz xj57cvi x1778rvt x1yc453h xj0a0fe xbixft xpvm0e4 xss6m8b",
+		className: "x78zum5 x1a02dak x6s0dn4 x1qughib x8zbtdt x1gkm1c7 xeuugli x17tes2r x17oiadl x9f619 xh8yej3 xc342km x1hmw7ec x5g2kb4 x1hz01jw xtqrqnz xj57cvi x1778rvt x1yc453h xj0a0fe xbixft xpvm0e4 xss6m8b",
 		children: r
 	}) : /* @__PURE__ */ a("button", {
 		type: "button",
@@ -133,8 +133,8 @@ function p({ label: e, selected: t = !1, onSelect: n, children: r }) {
 		"aria-pressed": t,
 		onClick: n,
 		...{
-			0: { className: "x78zum5 x1a02dak x6s0dn4 x1qughib x8zbtdt x1gkm1c7 xeuugli x17tes2r xwu7q15 x9f619 xh8yej3 xc342km x1hmw7ec x5g2kb4 x1hz01jw xtqrqnz xj57cvi x1778rvt x1yc453h xj0a0fe xbixft xpvm0e4 xss6m8b x1ypdohk x1t137rt xzro8vx x1ecmtor x19rmrnh x9v5kkp x13qnu6 x1bqaal" },
-			1: { className: "x78zum5 x1a02dak x6s0dn4 x1qughib x8zbtdt x1gkm1c7 xeuugli x17tes2r xwu7q15 x9f619 xh8yej3 xc342km x1hmw7ec x5g2kb4 x1hz01jw xtqrqnz xj57cvi x1778rvt x1yc453h xj0a0fe xbixft xss6m8b x1ypdohk x1t137rt xzro8vx x1ecmtor x19rmrnh x9v5kkp x13qnu6 x1bqaal x1r7kqkb xh3r7i3" }
+			0: { className: "x78zum5 x1a02dak x6s0dn4 x1qughib x8zbtdt x1gkm1c7 xeuugli x17tes2r x17oiadl x9f619 xh8yej3 xc342km x1hmw7ec x5g2kb4 x1hz01jw xtqrqnz xj57cvi x1778rvt x1yc453h xj0a0fe xbixft xpvm0e4 xss6m8b x1ypdohk x1t137rt xif5pkx x1ecmtor x19rmrnh x9v5kkp x13qnu6 x1bqaal" },
+			1: { className: "x78zum5 x1a02dak x6s0dn4 x1qughib x8zbtdt x1gkm1c7 xeuugli x17tes2r x17oiadl x9f619 xh8yej3 xc342km x1hmw7ec x5g2kb4 x1hz01jw xtqrqnz xj57cvi x1778rvt x1yc453h xj0a0fe xbixft xss6m8b x1ypdohk x1t137rt xif5pkx x1ecmtor x19rmrnh x9v5kkp x13qnu6 x1bqaal x1r7kqkb xh3r7i3" }
 		}[!!t | 0],
 		children: r
 	});

package/dist/{chart-input-B0snxbMH.js → chart-input-ceiMZYI-.js}

@@ -1,5 +1,5 @@
-import { m as e } from "./src-B0UTwpOz.js";
-import { r as t } from "./chart-frame-DAxsgMyl.js";
+import { m as e } from "./src-C9GQP3px.js";
+import { r as t } from "./chart-frame-Dm8UNfYD.js";
 import { jsx as n } from "react/jsx-runtime";
 // packages/charts/src/chart-input.tsx
 function r(e) {
@@ -13,7 +13,7 @@ function a({ title: r, description: i, message: a }) {
 		title: r,
 		description: i,
 		children: /* @__PURE__ */ n(e, {
-			error: !0,
+			hasError: !0,
 			children: a
 		})
 	});

package/dist/charts/cartesian.js

@@ -1,11 +1,11 @@
-import { u as e } from "../src-B0UTwpOz.js";
-import { i as t, n, r, t as i } from "../categorical-values-DwobbjBq.js";
-import { a, i as o, n as s, o as c, r as l, s as u, t as d } from "../chart-frame-DAxsgMyl.js";
-import { n as f, r as p, t as m } from "../chart-input-B0snxbMH.js";
+import { u as e } from "../src-C9GQP3px.js";
+import { i as t, n, r, t as i } from "../categorical-values-BnWfIPlv.js";
+import { a, i as o, n as s, o as c, r as l, s as u, t as d } from "../chart-frame-Dm8UNfYD.js";
+import { n as f, r as p, t as m } from "../chart-input-ceiMZYI-.js";
 import { t as h } from "../plot-width--OgdohB5.js";
-import { E as g } from "../src-BNlyCwOr.js";
-import { g as _ } from "../src-DMsnWyru.js";
-import { colors as v } from "../tokens.js";
+import { E as g } from "../src-CyJd2qSZ.js";
+import { g as _ } from "../src-BkXlN6aZ.js";
+import { r as v } from "../tokens.stylex-DTHHFbyl.js";
 import * as y from "@stylexjs/stylex";
 import { useEffect as b, useId as x, useMemo as S, useRef as C, useState as w } from "react";
 import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
@@ -333,9 +333,9 @@ var U = 260, W = 56, G = 20, K = 12, q = 1e3, re = {
 		kZs9gx: "x19rmrnh",
 		k7shQP: "x9v5kkp",
 		kiEn40: "x175ew0f",
-		kmCx7Z: "x1e7sry0",
-		kJrEVn: "xehdg9o",
-		kLz2MD: "xp9r5ej",
+		kmCx7Z: "xwycy1x",
+		kJrEVn: "x15ajoc",
+		kLz2MD: "x13ljvab",
 		k1CtGv: "xzgvv12",
 		$$css: !0
 	},
@@ -415,7 +415,7 @@ function ie(e) {
 			}),
 			r.length > 0 && /* @__PURE__ */ E(d, { children: r.map((e) => /* @__PURE__ */ D(s, {
 				label: `${e.label}, ${c}: ${p(e.x)}, ${f}: ${g(e.y)}`,
-				selected: _?.selectedId === e.id,
+				isSelected: _?.selectedId === e.id,
 				onSelect: _ === void 0 ? void 0 : () => _.onSelect(e.id),
 				children: [/* @__PURE__ */ E("span", { children: e.label }), /* @__PURE__ */ D("span", {
 					className: "xeuugli xss6m8b xj0a0fe x153jb6y",
@@ -868,14 +868,14 @@ function ge(e) {
 	return /* @__PURE__ */ E(ye, {
 		...e,
 		kind: "line",
-		stacked: !1
+		isStacked: !1
 	});
 }
-function _e({ stacked: e = !1, ...t }) {
+function _e({ isStacked: e = !1, ...t }) {
 	return /* @__PURE__ */ E(ye, {
 		...t,
 		kind: "area",
-		stacked: e
+		isStacked: e
 	});
 }
 function ve({ charts: e, ...t }) {
@@ -927,13 +927,13 @@ function ve({ charts: e, ...t }) {
 			formatValue: e.formatValue,
 			markers: e.markers,
 			kind: "line",
-			stacked: !1,
+			isStacked: !1,
 			sharedInspection: c,
 			axisWidth: u
 		}, e.id))
 	});
 }
-function ye({ title: e, description: t, series: n, timestampUnit: r, formatTimestamp: i, formatValue: a, markers: s = [], height: f = 180, actions: p, kind: g, stacked: _, sharedInspection: O, axisWidth: ee }) {
+function ye({ title: e, description: t, series: n, timestampUnit: r, formatTimestamp: i, formatValue: a, markers: s = [], height: f = 180, actions: p, kind: g, isStacked: _, sharedInspection: O, axisWidth: ee }) {
 	let j = !Number.isFinite(f) || f < 48 ? "Chart height must be at least 48 pixels." : se({
 		series: n,
 		isStacked: _,

package/dist/charts/distribution.js

@@ -1,5 +1,5 @@
-import { a as e, n as t, r as n, s as r, t as i } from "../chart-frame-DAxsgMyl.js";
-import { n as a, r as o, t as s } from "../chart-input-B0snxbMH.js";
+import { a as e, n as t, r as n, s as r, t as i } from "../chart-frame-Dm8UNfYD.js";
+import { n as a, r as o, t as s } from "../chart-input-ceiMZYI-.js";
 import { t as c } from "../plot-width--OgdohB5.js";
 import * as l from "@stylexjs/stylex";
 import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
@@ -304,7 +304,7 @@ function C({ title: a, description: o, points: c, domain: m, valueLabel: h, prob
 				let n = _(e.value), r = e.probability === null ? "Unavailable" : y(e.probability);
 				return /* @__PURE__ */ d(t, {
 					label: `${h}: ${n}, ${g}: ${r}`,
-					selected: C?.selectedId === e.id,
+					isSelected: C?.selectedId === e.id,
 					onSelect: C === void 0 ? void 0 : () => C.onSelect(e.id),
 					children: /* @__PURE__ */ f("span", {
 						...l.props(b.value),
@@ -399,7 +399,7 @@ function T({ title: a, description: o, bins: c, domain: h, maximumCount: g, valu
 				let n = e.count === null ? "Unavailable" : C(e.count), r = `${S(e.lowerBound)} – ${S(e.upperBound)}`;
 				return /* @__PURE__ */ d(t, {
 					label: `${e.label}, ${r}, ${y}: ${n}`,
-					selected: T?.selectedId === e.id,
+					isSelected: T?.selectedId === e.id,
 					onSelect: T === void 0 ? void 0 : () => T.onSelect(e.id),
 					children: /* @__PURE__ */ f("span", {
 						...l.props(b.value),
@@ -460,7 +460,7 @@ function D({ title: e, description: i, items: a, domain: o, valueLabel: u, inter
 				let n = e.estimate === null ? "Estimate unavailable" : h(e.estimate), i = `${m}: ${e.lower === null ? "Unavailable" : h(e.lower)} – ${e.upper === null ? "Unavailable" : h(e.upper)}`, a = r[e.tone ?? "series1"];
 				return /* @__PURE__ */ d(t, {
 					label: `${e.label}, ${u}: ${n}, ${i}`,
-					selected: g?.selectedId === e.id,
+					isSelected: g?.selectedId === e.id,
 					onSelect: g === void 0 ? void 0 : () => g.onSelect(e.id),
 					children: /* @__PURE__ */ f("span", {
 						...l.props(b.row),
@@ -586,7 +586,7 @@ function k({ title: e, description: i, items: a, domain: o, valueLabel: u, forma
 				let n = e.value === null ? "Unavailable" : h(e.value), i = e.rank === void 0 ? e.label : `${e.rank} · ${e.label}`, a = r[e.tone ?? "series1"];
 				return /* @__PURE__ */ d(t, {
 					label: `${i}, ${u}: ${n}`,
-					selected: g?.selectedId === e.id,
+					isSelected: g?.selectedId === e.id,
 					onSelect: g === void 0 ? void 0 : () => g.onSelect(e.id),
 					children: /* @__PURE__ */ f("span", {
 						...l.props(b.row),

package/dist/charts/graph.js

@@ -1,5 +1,5 @@
-import { a as e, n as t, r as n, s as r, t as i } from "../chart-frame-DAxsgMyl.js";
-import { n as a, t as o } from "../chart-input-B0snxbMH.js";
+import { a as e, n as t, r as n, s as r, t as i } from "../chart-frame-Dm8UNfYD.js";
+import { n as a, t as o } from "../chart-input-ceiMZYI-.js";
 import * as s from "@stylexjs/stylex";
 import { useId as c } from "react";
 import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
@@ -38,7 +38,7 @@ var f = {
 		k9WMMc: "x1yc453h",
 		kMv6JI: "x1hz01jw",
 		k63SB2: "xj57cvi",
-		kAzted: "x17tes2r xwu7q15",
+		kAzted: "x17tes2r x17oiadl",
 		$$css: !0
 	},
 	position: (e, t) => [{
@@ -64,7 +64,7 @@ var f = {
 	action: {
 		kkrTdU: "x1ypdohk",
 		k3XXqK: "x1t137rt",
-		kGzVvX: "xzro8vx",
+		kGzVvX: "xif5pkx",
 		kSReZ0: "x1ecmtor",
 		kPJHz1: "x13qnu6",
 		kZs9gx: "x19rmrnh",
@@ -197,7 +197,7 @@ function v({ title: a, description: f, nodes: m, edges: h, groups: g = [], width
 					className: "x1ghz6dp x1717udv xe8uvvx",
 					children: m.map((e) => /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u(t, {
 						label: [e.label, e.description].filter((e) => e !== void 0).join(", "),
-						selected: x?.selectedId === e.id,
+						isSelected: x?.selectedId === e.id,
 						onSelect: x === void 0 ? void 0 : () => x.onSelect(e.id),
 						children: /* @__PURE__ */ d("span", {
 							className: "xrvj5dj xfko13i xeuugli xh8yej3",

package/dist/charts/hierarchy.js

@@ -1,6 +1,6 @@
-import { i as e, r as t, t as n } from "../categorical-values-DwobbjBq.js";
-import { o as r, r as i, s as a } from "../chart-frame-DAxsgMyl.js";
-import { t as o } from "../chart-input-B0snxbMH.js";
+import { i as e, r as t, t as n } from "../categorical-values-BnWfIPlv.js";
+import { o as r, r as i, s as a } from "../chart-frame-Dm8UNfYD.js";
+import { t as o } from "../chart-input-ceiMZYI-.js";
 import { t as s } from "../plot-width--OgdohB5.js";
 import * as c from "@stylexjs/stylex";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";

package/dist/charts/matrix.js

@@ -1,6 +1,6 @@
-import { colors as e } from "../tokens.js";
-import { n as t, r as n, t as r } from "../chart-input-B0snxbMH.js";
-import { a as i, n as a, r as o, s, t as c } from "../chart-frame-DAxsgMyl.js";
+import { r as e } from "../tokens.stylex-DTHHFbyl.js";
+import { n as t, r as n, t as r } from "../chart-input-ceiMZYI-.js";
+import { a as i, n as a, r as o, s, t as c } from "../chart-frame-Dm8UNfYD.js";
 import * as l from "@stylexjs/stylex";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 // packages/charts/src/matrix/heatmap-scale.ts
@@ -78,8 +78,8 @@ var b = {
 		k1xSpc: "x78zum5",
 		kGNEyG: "x6s0dn4",
 		kjj79g: "xl56j7k",
-		kzqmXN: "x100vrsf xi5vo7p",
-		kZKoxP: "x1vqgdyp x17kqdoe",
+		kzqmXN: "x100vrsf x1ff4b4a",
+		kZKoxP: "x1vqgdyp x992rv9",
 		kB7OPa: "x9f619",
 		kMzoRj: "xmkeg23",
 		ksu8eU: "x1y0btm7",
@@ -102,7 +102,7 @@ var b = {
 		kZs9gx: "x19rmrnh",
 		k7shQP: "x9v5kkp",
 		kiEn40: "x1bqaal",
-		kaVNsj: "x1fs8giu",
+		kaVNsj: "x1box67k",
 		$$css: !0
 	},
 	selected: {
@@ -178,7 +178,7 @@ function T({ title: e, description: t, rows: n, columns: s, cells: l, domain: f,
 						let n = x.get(e.id)?.get(t.id), r = `${e.label} → ${t.label}`, i = O(n, f, g);
 						return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ d(a, {
 							label: `${r}: ${i}`,
-							selected: n !== void 0 && _?.selectedId === n.id,
+							isSelected: n !== void 0 && _?.selectedId === n.id,
 							onSelect: n === void 0 || _ === void 0 ? void 0 : () => _.onSelect(n.id),
 							children: [/* @__PURE__ */ u("span", { children: r }), /* @__PURE__ */ u("span", { children: i })]
 						}) }, JSON.stringify([e.id, t.id]));
@@ -204,7 +204,7 @@ function T({ title: e, description: t, rows: n, columns: s, cells: l, domain: f,
 					title: e.label,
 					className: "x1717udv xy8obcc xas2l8k xj57cvi x153jb6y x1yc453h xuxw1ft",
 					children: /* @__PURE__ */ u("span", {
-						className: "x1lliihq x100vrsf xi5vo7p xb3r6kr xlyipyv x2b8uid x1hmw7ec",
+						className: "x1lliihq x100vrsf x1ff4b4a xb3r6kr xlyipyv x2b8uid x1hmw7ec",
 						children: e.label
 					})
 				}, e.id))] }) }), /* @__PURE__ */ u("tbody", { children: n.map((e) => /* @__PURE__ */ d("tr", { children: [/* @__PURE__ */ u("th", {
@@ -218,7 +218,7 @@ function T({ title: e, description: t, rows: n, columns: s, cells: l, domain: f,
 				}), s.map((t) => {
 					let n = x.get(e.id)?.get(t.id);
 					return /* @__PURE__ */ u("td", {
-						className: "x1717udv x100vrsf xi5vo7p x2b8uid",
+						className: "x1717udv x100vrsf x1ff4b4a x2b8uid",
 						children: /* @__PURE__ */ u(E, {
 							cell: n,
 							label: `${e.label}, ${t.label}`,
@@ -238,7 +238,7 @@ function E({ cell: e, label: t, domain: n, palette: r, formatValue: i, selection
 		role: "img",
 		"aria-label": `${t}: not supplied`,
 		title: `${t}: not supplied`,
-		className: "x78zum5 x6s0dn4 xl56j7k x100vrsf xi5vo7p x1vqgdyp x17kqdoe x9f619 xmkeg23 x1ey3b81 x1717udv x1hz01jw xy8obcc xj57cvi xas2l8k xss6m8b x153jb6y x1r7kqkb xbsl7fq",
+		className: "x78zum5 x6s0dn4 xl56j7k x100vrsf x1ff4b4a x1vqgdyp x992rv9 x9f619 xmkeg23 x1ey3b81 x1717udv x1hz01jw xy8obcc xj57cvi xas2l8k xss6m8b x153jb6y x1r7kqkb xbsl7fq",
 		children: "·"
 	});
 	let o = e.kind === "value" && !m(e.value, n), s = O(e, n, i), c = `${t}: ${s}`, d = e.kind === "value" && !o ? h(e.value, {
@@ -328,12 +328,12 @@ var A = {
 	interactive: {
 		kkrTdU: "x1ypdohk",
 		k3XXqK: "x1t137rt",
-		kLWn49: "x1778rvt x1m5v4a8",
+		kLWn49: "x1778rvt xwpstqy",
 		kPJHz1: "x13qnu6",
 		kZs9gx: "x19rmrnh",
 		k7shQP: "x9v5kkp",
 		kiEn40: "x13iak60",
-		kGzVvX: "xzro8vx",
+		kGzVvX: "xif5pkx",
 		kSReZ0: "x1ecmtor",
 		$$css: !0
 	},
@@ -418,7 +418,7 @@ function M({ title: e, description: t, tokens: n, domain: s, palette: f, valueLa
 						className: "x1hmw7ec x5g2kb4 xso031l x1q0q8m5 x1qndepd x1yc453h xj57cvi x1df8dnd",
 						children: /* @__PURE__ */ u(a, {
 							label: `Select token ${e.index}: ${JSON.stringify(e.text)}`,
-							selected: _?.selectedId === e.id,
+							isSelected: _?.selectedId === e.id,
 							onSelect: _ === void 0 ? void 0 : () => _.onSelect(e.id),
 							children: e.index
 						})