@mechane-ai/elements 0.4.0 → 0.5.0

package/README.md

@@ -6,6 +6,9 @@ receive values and callbacks; applications own routing, data, identity, and pers
 
 ## Install
 
+Install [Elements from npm](https://www.npmjs.com/package/@mechane-ai/elements). React and React DOM are peer
+dependencies.
+
 ```sh
 pnpm add @mechane-ai/elements react react-dom
 ```
@@ -42,35 +45,36 @@ comes after it. Application styles and StyleX themes can override that layer.
 
 Every path below belongs to `@mechane-ai/elements`. There is one package, version, and stylesheet.
 
-| Entry                  | Responsibility                                                           |
-| ---------------------- | ------------------------------------------------------------------------ |
-| Root                   | Buttons, text, surfaces, disclosure, Avatar, and CopyValue.              |
-| `/forms`               | Fields, inputs, selection, file picking, and SettingsRow.                |
-| `/forms/dates`         | Civil-date calendars and range selection.                                |
-| `/overlays`            | Dialog, Drawer, Menu, Popover, Preview, Tooltip, and AlertDialog.        |
-| `/feedback`            | Loading, skeletons, progress, meters, notices, empty states, and toasts. |
-| `/navigation`          | Tabs, breadcrumbs, skip links, and shortcut labels.                      |
-| `/navigation/commands` | Command palette and scoped application-owned shortcuts.                  |
-| `/layout`              | Application shell, sidebar, toolbars, detail pages, and resizable panes. |
-| `/collections`         | Tables, inspectors, collection controls, metrics, and timestamps.        |
-| `/content`             | Trace, JSON, recorded logs, and stack traces.                            |
-| `/content/link`        | Safe content links without a renderer dependency.                        |
-| `/content/markdown`    | Completed and streaming Markdown.                                        |
-| `/content/code`        | Source-preserving code highlighting.                                     |
-| `/content/diff`        | File changes and patches.                                                |
-| `/content/tree`        | File paths, statuses, and controlled selection.                          |
-| `/ai`                  | Conversations, messages, prompts, approvals, sources, and citations.     |
-| `/charts`              | Shared frames, legends, selection, and category types.                   |
-| `/charts/cartesian`    | Lines, areas, sparklines, small multiples, bars, and scatter plots.      |
-| `/charts/distribution` | Histograms, cumulative distributions, intervals, and ranked values.      |
-| `/charts/matrix`       | Matrices, token heatmaps, and color legends.                             |
-| `/charts/graph`        | Supplied relationships and node selection.                               |
-| `/charts/hierarchy`    | Treemaps.                                                                |
-| `/charts/timeline`     | Waterfall intervals and instants.                                        |
-| `/theme`               | Light and dark theme props.                                              |
-| `/tokens`              | Compiled token references for runtime styles.                            |
-| `/tokens.stylex`       | Direct definitions for StyleX authoring and themes.                      |
-| `/styles.css`          | Component styles and token defaults.                                     |
+| Entry                  | Responsibility                                                                    |
+| ---------------------- | --------------------------------------------------------------------------------- |
+| Root                   | Buttons, text, surfaces, disclosure, Avatar, and CopyValue.                       |
+| `/forms`               | Fields, inputs, selection, file picking, and settings sections.                   |
+| `/forms/dates`         | Civil-date calendars and range selection.                                         |
+| `/overlays`            | Dialog, Drawer, Menu, Popover, Preview, Tooltip, and AlertDialog.                 |
+| `/feedback`            | Async regions, skeletons, progress, meters, notices, empty states, and toasts.    |
+| `/navigation`          | Tabs, page navigation, breadcrumbs, skip links, and shortcut labels.              |
+| `/navigation/commands` | Command palette and scoped application-owned shortcuts.                           |
+| `/layout`              | Application shell, sidebar, toolbars, compound record pages, and resizable panes. |
+| `/collections`         | Tables, inspectors, collection controls, metrics, and timestamps.                 |
+| `/content`             | Trace, JSON, recorded logs, and stack traces.                                     |
+| `/content/link`        | Safe content links without a renderer dependency.                                 |
+| `/content/markdown`    | Completed and streaming Markdown, embedded headings, and inert previews.          |
+| `/content/code`        | Source-preserving code highlighting.                                              |
+| `/content/diff`        | File changes and patches.                                                         |
+| `/content/tree`        | File paths, statuses, and controlled selection.                                   |
+| `/ai`                  | Conversations, messages, prompts, approvals, sources, and citations.              |
+| `/charts`              | Shared frames, legends, selection, and category types.                            |
+| `/charts/cartesian`    | Lines, areas, sparklines, small multiples, bars, and scatter plots.               |
+| `/charts/distribution` | Histograms, cumulative distributions, intervals, and ranked values.               |
+| `/charts/matrix`       | Matrices, token heatmaps, and color legends.                                      |
+| `/charts/graph`        | Supplied relationships and node selection.                                        |
+| `/charts/hierarchy`    | Treemaps.                                                                         |
+| `/charts/timeline`     | Waterfall intervals and instants.                                                 |
+| `/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.                               |
+| `/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
 initialize when used, without a consumer-managed worker pool or grammar CDN. The
@@ -92,6 +96,14 @@ resolution in the StyleX plugin, and use `stylex.createTheme`. The defining path
 generated variables match its compiled CSS. The ordinary `/tokens` entry supplies runtime references rather than
 compile-time definitions.
 
+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.
+
+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.
+This is [Base UI's CSP provider](https://base-ui.com/react/utils/csp-provider); it authorizes component style tags such
+as Select's scrollbar rules. The application owns nonce generation and its security policy.
+
 ## Develop and release
 
 From `workspaces/core`:

package/dist/ai.js

@@ -1,6 +1,6 @@
 import { b as e, f as t, p as n, t as r, v as i } from "./src-CbYaLvhD.js";
 import { t as a } from "./content-link-Bm-Td5wm.js";
-import { l as o, s } from "./src-CvpS9XIR.js";
+import { c as o, u as s } from "./src-CjnbzSgq.js";
 import { r as c } from "./src-CfDf8TY8.js";
 import * as l from "@stylexjs/stylex";
 import { createContext as u, useContext as d, useId as f, useRef as p } from "react";
@@ -207,11 +207,11 @@ function L({ label: e, value: t, onValueChange: n, onSubmit: r, name: a = "promp
 		onSubmit: M,
 		className: "x78zum5 xdt5ytf x1n8ia3y xeuugli",
 		children: [
-			/* @__PURE__ */ h(s.Root, {
+			/* @__PURE__ */ h(o.Root, {
 				invalid: C !== void 0,
 				children: [
-					/* @__PURE__ */ m(s.Label, { children: e }),
-					/* @__PURE__ */ m(o, {
+					/* @__PURE__ */ m(o.Label, { children: e }),
+					/* @__PURE__ */ m(s, {
 						name: a,
 						value: t,
 						onChange: (e) => n(e.currentTarget.value),
@@ -223,8 +223,8 @@ function L({ label: e, value: t, onValueChange: n, onSubmit: r, name: a = "promp
 						readOnly: d,
 						"aria-errormessage": C === void 0 ? void 0 : k
 					}),
-					S !== void 0 && /* @__PURE__ */ m(s.Description, { children: S }),
-					C !== void 0 && /* @__PURE__ */ m(s.Error, {
+					S !== void 0 && /* @__PURE__ */ m(o.Description, { children: S }),
+					C !== void 0 && /* @__PURE__ */ m(o.Error, {
 						id: k,
 						match: !0,
 						role: "alert",

package/dist/assets/stylex.css

@@ -343,6 +343,10 @@
     place-items: center;
   }
 
+  .x1hl2dhg {
+    text-decoration: none;
+  }
+
   .x76gt29:is([data-invalid], [aria-invalid="true"]), .xs95o9x[data-invalid] {
     border-color: var(--x5peq9z);
   }
@@ -367,6 +371,10 @@
     -webkit-font-smoothing: antialiased;
   }
 
+  .x1rh3ycu {
+    -webkit-user-select: text;
+  }
+
   .x1bzlxqo {
     accent-color: var(--x169lqhw);
   }
@@ -379,6 +387,10 @@
     align-items: center;
   }
 
+  .x1cy8zhl {
+    align-items: flex-start;
+  }
+
   .x7a106z {
     align-items: start;
   }
@@ -387,6 +399,18 @@
     align-items: stretch;
   }
 
+  .xwkv4th {
+    animation-duration: var(--xjjzqp4);
+  }
+
+  .xqcmdr3 {
+    animation-name: x18re5ia-B;
+  }
+
+  .x1c3o69q {
+    animation-timing-function: var(--x5xz5r2);
+  }
+
   .xjbqb8w {
     background-color: #0000;
   }
@@ -652,6 +676,14 @@
     fill-opacity: .08;
   }
 
+  .x1irul0l {
+    flex-basis: var(--xmu2bot);
+  }
+
+  .x1ewej1i {
+    flex-basis: var(--xyg5iyl);
+  }
+
   .xdt5ytf {
     flex-direction: column;
   }
@@ -1028,6 +1060,10 @@
     text-align: end;
   }
 
+  .x16tdsg8 {
+    text-align: inherit;
+  }
+
   .xdpxx8g {
     text-align: left;
   }
@@ -1362,6 +1398,10 @@
     border-bottom-color: var(--x-borderBottomColor);
   }
 
+  .xdjqune {
+    border-bottom-color: var(--x169lqhw);
+  }
+
   .x19u7erb {
     border-bottom-color: var(--x24btp3);
   }
@@ -1378,6 +1418,10 @@
     border-bottom-style: solid;
   }
 
+  .x1qhh985 {
+    border-bottom-width: 0;
+  }
+
   .xso031l {
     border-bottom-width: 1px;
   }
@@ -1474,6 +1518,10 @@
     height: 18px;
   }
 
+  .xg2ss61 {
+    height: 1lh;
+  }
+
   .xjm9jq1 {
     height: 1px;
   }
@@ -1766,6 +1814,10 @@
     min-width: var(--anchor-width);
   }
 
+  .x7w7ha4 {
+    min-width: var(--x-1utbgw4);
+  }
+
   .xkj4a21 {
     min-width: var(--x-minWidth);
   }
@@ -1794,6 +1846,10 @@
     overflow-y: auto;
   }
 
+  .x1e4zzel {
+    overscroll-behavior-y: contain;
+  }
+
   .x1wpizpg {
     padding-bottom: var(--x1drqizm);
   }
@@ -2020,6 +2076,12 @@
 }
 
 @layer priority7 {
+  @media (prefers-reduced-motion: reduce) {
+    .xcgnenq.xcgnenq {
+      animation-name: none;
+    }
+  }
+
   @media (width <= 800px) {
     .x1rhi5y4.x1rhi5y4 {
       display: flex;
@@ -2206,7 +2268,15 @@
     .xwu7q15.xwu7q15 {
       min-height: var(--x6uufy4);
     }
+  }
 
+  @media (width <= 600px) {
+    .xzw3fdc.xzw3fdc {
+      min-width: var(--x-1omz25w);
+    }
+  }
+
+  @media (pointer: coarse) {
     .xidce53.xidce53 {
       min-width: var(--x6uufy4);
     }
@@ -2451,6 +2521,16 @@
   }
 }
 
+@property --x-1omz25w {
+  syntax: "*";
+  inherits: false
+}
+
+@property --x-1utbgw4 {
+  syntax: "*";
+  inherits: false
+}
+
 @property --x-backgroundColor {
   syntax: "*";
   inherits: false
@@ -2506,6 +2586,16 @@
   inherits: false
 }
 
+@keyframes x18re5ia-B {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 :root, .x1i152zt {
   --x1asdyoo: 4px;
   --xz1oyae: 6px;
@@ -2617,6 +2707,8 @@
   --x1p8em4u: 64px;
   --xikiree: 32px;
   --xtf6uwx: 52px;
+  --xyg5iyl: 480px;
+  --xmu2bot: 240px;
 }
 
 .x12671sc.x12671sc, .x12671sc.x12671sc:root {

package/dist/{categorical-values-cMX7Mykq.js → categorical-values-BfAEQUd0.js}

@@ -1,5 +1,5 @@
 import { n as e, o as t } from "./chart-frame-bX0VLC_W.js";
-import { n } from "./chart-input-qnM44oen.js";
+import { n } from "./chart-input--VSrlMl-.js";
 import * as r from "@stylexjs/stylex";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 // packages/charts/src/categorical-values.tsx

package/dist/{chart-input-qnM44oen.js → chart-input--VSrlMl-.js}

@@ -1,4 +1,4 @@
-import { l as e } from "./src-BfvOOeA3.js";
+import { d as e } from "./src-CbJTK9oP.js";
 import { r as t } from "./chart-frame-bX0VLC_W.js";
 import { jsx as n } from "react/jsx-runtime";
 // packages/charts/src/chart-input.tsx

package/dist/charts/cartesian.js

@@ -1,9 +1,9 @@
-import { i as e, n as t, r as n, t as r } from "../categorical-values-cMX7Mykq.js";
+import { i as e, n as t, r as n, t as r } from "../categorical-values-BfAEQUd0.js";
 import { a as i, i as a, n as o, o as s, r as c, t as l } from "../chart-frame-bX0VLC_W.js";
-import { n as u, r as d, t as f } from "../chart-input-qnM44oen.js";
+import { n as u, r as d, t as f } from "../chart-input--VSrlMl-.js";
 import { t as p } from "../plot-width--OgdohB5.js";
 import { b as m } from "../src-CbYaLvhD.js";
-import { m as h } from "../src-CvpS9XIR.js";
+import { h } from "../src-CjnbzSgq.js";
 import { colors as g } from "../tokens.js";
 import * as _ from "@stylexjs/stylex";
 import { useEffect as v, useId as y, useMemo as b, useRef as x, useState as S } from "react";
@@ -28,30 +28,30 @@ function j({ categories: e, series: n, domain: r, mode: i }) {
 	}
 	if (i === "stacked" && e.some((e, t) => n.reduce((e, n) => e + (n.values[t] ?? 0), 0) > r[1])) return "Stacked bar totals must fit the supplied domain.";
 }
-function M({ title: e, description: t, categories: o, series: l, domain: u, mode: d = "grouped", formatValue: m, selection: h, height: g = 200 }) {
-	let v = j({
+function M({ title: e, description: t, categories: o, series: u, domain: d, mode: m = "grouped", formatValue: h, selection: g, height: v = 200 }) {
+	let y = j({
 		categories: o,
-		series: l,
-		domain: u,
-		mode: d
-	}), { ref: y, width: b } = p();
-	if (v !== void 0 || !Number.isFinite(g) || g < 48) return /* @__PURE__ */ w(f, {
+		series: u,
+		domain: d,
+		mode: m
+	}), { ref: b, width: x } = p();
+	if (y !== void 0 || !Number.isFinite(v) || v < 48) return /* @__PURE__ */ w(f, {
 		title: e,
 		description: t,
-		message: v ?? "Chart height must be at least 48 pixels."
+		message: y ?? "Chart height must be at least 48 pixels."
 	});
-	let x = g - 28, S = D({
-		domain: [...u],
-		range: [x, 12]
-	}), C = Math.max(52, ...S.ticks(3).map((e) => m(e).length * 7 + 12)), O = Math.max(C + 1, b - 16), A = E({
+	let S = v - 28, C = D({
+		domain: [...d],
+		range: [S, 12]
+	}), O = Math.max(52, ...C.ticks(3).map((e) => h(e).length * 7 + 12)), A = Math.max(O + 1, x - 16), M = E({
 		domain: o.map((e) => e.id),
-		range: [C, O],
+		range: [O, A],
 		padding: .3
-	}), M = E({
-		domain: l.map((e) => e.id),
-		range: [0, A.bandwidth()],
+	}), N = E({
+		domain: u.map((e) => e.id),
+		range: [0, M.bandwidth()],
 		padding: .08
-	}), N = Math.max(1, Math.ceil(56 / A.step())), P = Math.max(1, Math.floor(A.step() * N / 12) - 1), F = l.map((e, t) => ({
+	}), P = Math.max(1, Math.ceil(56 / M.step())), F = Math.max(1, Math.floor(M.step() * P / 12) - 1), I = u.map((e, t) => ({
 		id: e.id,
 		label: e.label,
 		tone: n(e.tone, t)
@@ -60,69 +60,69 @@ function M({ title: e, description: t, categories: o, series: l, domain: u, mode
 		title: e,
 		description: t,
 		children: [
-			/* @__PURE__ */ w(a, { items: F }),
+			/* @__PURE__ */ w(a, { items: I }),
 			/* @__PURE__ */ w("div", {
-				ref: y,
+				ref: b,
 				..._.props(i.plot, ee.plot),
-				children: o.length === 0 || l.length === 0 ? /* @__PURE__ */ w("p", {
+				children: o.length === 0 || u.length === 0 ? /* @__PURE__ */ w("p", {
 					className: "x153jb6y x1ghz6dp xy8obcc",
 					children: "No categories"
 				}) : /* @__PURE__ */ T("svg", {
 					role: "img",
 					"aria-label": e,
-					viewBox: `0 0 ${b} ${g}`,
-					height: g,
+					viewBox: `0 0 ${x} ${v}`,
+					height: v,
 					..._.props(i.svg),
-					children: [S.ticks(3).map((e) => /* @__PURE__ */ T("g", { children: [/* @__PURE__ */ w("line", {
-						x1: C,
-						x2: O,
-						y1: S(e),
-						y2: S(e),
+					children: [C.ticks(3).map((e) => /* @__PURE__ */ T("g", { children: [/* @__PURE__ */ w("line", {
+						x1: O,
+						x2: A,
+						y1: C(e),
+						y2: C(e),
 						..._.props(i.grid)
 					}), /* @__PURE__ */ w("text", {
-						x: C - 8,
-						y: S(e),
+						x: O - 8,
+						y: C(e),
 						textAnchor: "end",
 						dominantBaseline: "middle",
 						..._.props(i.label),
-						children: m(e)
-					})] }, e)), o.map((e, t) => /* @__PURE__ */ T("g", { children: [l.map((r, a) => {
+						children: h(e)
+					})] }, e)), o.map((e, t) => /* @__PURE__ */ T("g", { children: [u.map((r, a) => {
 						let o = r.values[t];
 						if (o == null) return null;
-						let c = d === "stacked" ? l.slice(0, a).reduce((e, n) => e + (n.values[t] ?? 0), 0) : 0, u = S(c), f = S(c + o);
+						let c = m === "stacked" ? u.slice(0, a).reduce((e, n) => e + (n.values[t] ?? 0), 0) : 0, l = C(c), d = C(c + o);
 						return /* @__PURE__ */ w(k, {
-							x: (A(e.id) ?? C) + (d === "stacked" ? 0 : M(r.id) ?? 0),
-							y: Math.min(u, f),
-							width: d === "stacked" ? A.bandwidth() : M.bandwidth(),
-							height: Math.max(+(o === 0), Math.abs(f - u)),
+							x: (M(e.id) ?? O) + (m === "stacked" ? 0 : N(r.id) ?? 0),
+							y: Math.min(l, d),
+							width: m === "stacked" ? M.bandwidth() : N.bandwidth(),
+							height: Math.max(+(o === 0), Math.abs(d - l)),
 							fill: s[n(r.tone, a)],
-							..._.props(h?.selectedId === e.id && i.selected),
+							..._.props(g?.selectedId === e.id && i.selected),
 							children: /* @__PURE__ */ T("title", { children: [
 								e.label,
 								" · ",
 								r.label,
 								": ",
-								m(o)
+								h(o)
 							] })
 						}, r.id);
-					}), t % N === 0 && /* @__PURE__ */ w("text", {
-						x: (A(e.id) ?? C) + A.bandwidth() / 2,
-						y: g - 4,
+					}), t % P === 0 && /* @__PURE__ */ w("text", {
+						x: (M(e.id) ?? O) + M.bandwidth() / 2,
+						y: v - 4,
 						textAnchor: "middle",
 						..._.props(i.label),
-						children: e.label.length > P ? `${e.label.slice(0, P)}…` : e.label
+						children: e.label.length > F ? `${e.label.slice(0, F)}…` : e.label
 					})] }, e.id))]
 				})
 			}),
-			/* @__PURE__ */ w(r, {
+			/* @__PURE__ */ w(l, { children: /* @__PURE__ */ w(r, {
 				items: o.map((e, t) => ({
 					id: e.id,
 					label: e.label,
-					valueLabel: l.map((e) => `${e.label}: ${e.values[t] === null || e.values[t] === void 0 ? "Unavailable" : m(e.values[t])}`).join(" · "),
+					valueLabel: u.map((e) => `${e.label}: ${e.values[t] === null || e.values[t] === void 0 ? "Unavailable" : h(e.values[t])}`).join(" · "),
 					tone: "neutral"
 				})),
-				selection: h
-			})
+				selection: g
+			}) })
 		]
 	});
 }

package/dist/charts/distribution.js

@@ -1,5 +1,5 @@
 import { n as e, o as t, r as n, t as r } from "../chart-frame-bX0VLC_W.js";
-import { n as i, r as a, t as o } from "../chart-input-qnM44oen.js";
+import { n as i, r as a, t as o } from "../chart-input--VSrlMl-.js";
 import { t as s } from "../plot-width--OgdohB5.js";
 import * as c from "@stylexjs/stylex";
 import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";

package/dist/charts/graph.js

@@ -1,5 +1,5 @@
 import { o as e, r as t, t as n } from "../chart-frame-bX0VLC_W.js";
-import { n as r, t as i } from "../chart-input-qnM44oen.js";
+import { n as r, t as i } from "../chart-input--VSrlMl-.js";
 import * as a from "@stylexjs/stylex";
 import { useId as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";

package/dist/charts/hierarchy.js

@@ -1,6 +1,6 @@
-import { i as e, r as t, t as n } from "../categorical-values-cMX7Mykq.js";
+import { i as e, r as t, t as n } from "../categorical-values-BfAEQUd0.js";
 import { a as r, o as i, r as a } from "../chart-frame-bX0VLC_W.js";
-import { t as o } from "../chart-input-qnM44oen.js";
+import { t as o } from "../chart-input--VSrlMl-.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,5 +1,5 @@
 import { colors as e } from "../tokens.js";
-import { n as t, r as n, t as r } from "../chart-input-qnM44oen.js";
+import { n as t, r as n, t as r } from "../chart-input--VSrlMl-.js";
 import { n as i, o as a, r as o, t as s } from "../chart-frame-bX0VLC_W.js";
 import * as c from "@stylexjs/stylex";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";