@mechane-ai/elements 0.11.0 → 0.12.0

package/README.md

@@ -104,8 +104,10 @@ which view is active and when to unmount it; use this for a draft or reading pos
 `WorkbenchScroll` requires an accessible `label`; its `flush` mode leaves list insets to the table. Its
 `scrollRestorationId` identifies the actual scroll region for application-owned restoration.
 
-`DataTable` uses 48px rows by default and truncates text to preserve stable column and virtualization geometry. Set
-`rowSizing="content"` for records that need multiline cells; virtualization then measures those rows. Long content
+Each `DataTable` column declares a role: `primary`, `text`, `status`, `number`, `timestamp`, or `actions`. Roles own
+alignment and minimum sizing; the primary column uses available space. Headers and placeholders follow the same
+geometry. The table uses 48px rows by default and truncates text to preserve stable column and virtualization geometry.
+Set `rowSizing="content"` for records that need multiline cells; virtualization then measures those rows. Long content
 belongs in a detail view or a deliberately content-sized row, not behind a clipped control. Use `DataTableText` for a
 primary string and optional secondary string inside one cell; both text elements own their ellipsis. Arbitrary nested
 layouts do not inherit text truncation. Give dates and numeric values sufficient column width or explicit content
@@ -125,8 +127,10 @@ acknowledgement, and draft retention.
 record and store named choices rather than catalog indexes. Identity palettes remain separate from status colors.
 
 `MetricGrid layout="columns"` distributes supplied metrics by available container width. Its inline layout suits compact
-record summaries. `SettingsSection` keeps wide tables inside their scroll region; group sections with `Stack` and align
-form actions with `Row`.
+record summaries. `PageContent` owns report insets and section gaps; keep full-width tables outside it so their cell
+insets remain the only gutter. `SettingsSection` keeps wide tables inside their scroll region, and `SettingsRow` aligns
+labels and controls. `FormActions` owns submission rows and their internal spacing. The enclosing section owns the gap
+before and after the actions.
 
 The default theme is light, with system fonts and a compact spacing scale. Import `themeProps` from
 `@mechane-ai/elements/theme` and spread `themeProps.light` or `themeProps.dark` onto the document root. Portaled content

package/dist/ai.js

@@ -1,7 +1,7 @@
-import { C as e, E as t, T as n, f as r, g as i, p as a, t as o, w as s } from "./src-D05isEh_.js";
-import { t as c } from "./content-link-CatGOrbo.js";
-import { r as l, t as u } from "./src-Cs0dRc4X.js";
-import { c as d, u as f } from "./src-C_heP5kL.js";
+import { C as e, E as t, T as n, f as r, g as i, p as a, t as o, w as s } from "./src-3gzujMhN.js";
+import { t as c } from "./content-link-C460m-O7.js";
+import { r as l, t as u } from "./src-CVlgjAlw.js";
+import { c as d, u as f } from "./src-DOzle5d4.js";
 import { t as p } from "./accessibility-C-aIZ1Yx.js";
 import * as m from "@stylexjs/stylex";
 import { createContext as h, useContext as g, useId as _, useRef as v } from "react";
@@ -99,7 +99,6 @@ function I({ label: e = "Jump to latest" }) {
 function L({ label: t, onActivate: n }) {
 	let { scrollToEnd: r } = D(), i = g(A);
 	return /* @__PURE__ */ b(e, {
-		size: "sm",
 		onClick: () => {
 			n?.(), requestAnimationFrame(() => {
 				let e = i?.current;

package/dist/{categorical-values-FYc43JCa.js → categorical-values-CTrHn9jH.js}

@@ -1,5 +1,5 @@
-import { n as e, s as t } from "./chart-frame-Bczk5sWj.js";
-import { n } from "./chart-input-CbzVN76m.js";
+import { n as e, s as t } from "./chart-frame-38ES6kwK.js";
+import { n } from "./chart-input-C9fu7f1Q.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-frame-Bczk5sWj.js → chart-frame-38ES6kwK.js}

@@ -1,4 +1,4 @@
-import { g as e } from "./src-D05isEh_.js";
+import { g as e } from "./src-3gzujMhN.js";
 import { chartColors as t, colors as n } from "./tokens.js";
 import * as r from "@stylexjs/stylex";
 import { useId as i } from "react";
@@ -125,7 +125,7 @@ function f({ items: e, label: t = "Legend" }) {
 }
 function p({ label: e, selected: t = !1, onSelect: n, children: r }) {
 	return n === void 0 ? /* @__PURE__ */ a("div", {
-		className: "x78zum5 x1a02dak x6s0dn4 x1qughib x8zbtdt x1gkm1c7 xeuugli xaeotn9 xwu7q15 x9f619 xh8yej3 xc342km x1hmw7ec x5g2kb4 x1hz01jw xtqrqnz xj57cvi x1778rvt x1yc453h xj0a0fe xbixft xpvm0e4 xss6m8b",
+		className: "x78zum5 x1a02dak x6s0dn4 x1qughib x8zbtdt x1gkm1c7 xeuugli x17tes2r xwu7q15 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 xaeotn9 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 xaeotn9 xwu7q15 x9f619 xh8yej3 xc342km x1hmw7ec x5g2kb4 x1hz01jw xtqrqnz xj57cvi x1778rvt x1yc453h xj0a0fe xbixft xss6m8b x1ypdohk x1t137rt xzro8vx x1ecmtor x19rmrnh x9v5kkp x13qnu6 x1bqaal x1r7kqkb x1jmj9dw" }
+			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" }
 		}[!!t | 0],
 		children: r
 	});

package/dist/{chart-input-CbzVN76m.js → chart-input-C9fu7f1Q.js}

@@ -1,5 +1,5 @@
-import { f as e } from "./src-DXsGTJgv.js";
-import { r as t } from "./chart-frame-Bczk5sWj.js";
+import { m as e } from "./src-CI6KtN2w.js";
+import { r as t } from "./chart-frame-38ES6kwK.js";
 import { jsx as n } from "react/jsx-runtime";
 // packages/charts/src/chart-input.tsx
 function r(e) {

package/dist/charts/cartesian.js

@@ -1,10 +1,10 @@
-import { c as e } from "../src-DXsGTJgv.js";
-import { i as t, n, r, t as i } from "../categorical-values-FYc43JCa.js";
-import { a, i as o, n as s, o as c, r as l, s as u, t as d } from "../chart-frame-Bczk5sWj.js";
-import { n as f, r as p, t as m } from "../chart-input-CbzVN76m.js";
+import { u as e } from "../src-CI6KtN2w.js";
+import { i as t, n, r, t as i } from "../categorical-values-CTrHn9jH.js";
+import { a, i as o, n as s, o as c, r as l, s as u, t as d } from "../chart-frame-38ES6kwK.js";
+import { n as f, r as p, t as m } from "../chart-input-C9fu7f1Q.js";
 import { t as h } from "../plot-width--OgdohB5.js";
-import { E as g } from "../src-D05isEh_.js";
-import { h as _ } from "../src-C_heP5kL.js";
+import { E as g } from "../src-3gzujMhN.js";
+import { g as _ } from "../src-DOzle5d4.js";
 import { colors as v } from "../tokens.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";

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-Bczk5sWj.js";
-import { n as a, r as o, t as s } from "../chart-input-CbzVN76m.js";
+import { a as e, n as t, r as n, s as r, t as i } from "../chart-frame-38ES6kwK.js";
+import { n as a, r as o, t as s } from "../chart-input-C9fu7f1Q.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";

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-Bczk5sWj.js";
-import { n as a, t as o } from "../chart-input-CbzVN76m.js";
+import { a as e, n as t, r as n, s as r, t as i } from "../chart-frame-38ES6kwK.js";
+import { n as a, t as o } from "../chart-input-C9fu7f1Q.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: "xaeotn9 xwu7q15",
+		kAzted: "x17tes2r xwu7q15",
 		$$css: !0
 	},
 	position: (e, t) => [{

package/dist/charts/hierarchy.js

@@ -1,6 +1,6 @@
-import { i as e, r as t, t as n } from "../categorical-values-FYc43JCa.js";
-import { o as r, r as i, s as a } from "../chart-frame-Bczk5sWj.js";
-import { t as o } from "../chart-input-CbzVN76m.js";
+import { i as e, r as t, t as n } from "../categorical-values-CTrHn9jH.js";
+import { o as r, r as i, s as a } from "../chart-frame-38ES6kwK.js";
+import { t as o } from "../chart-input-C9fu7f1Q.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-CbzVN76m.js";
-import { a as i, n as a, r as o, s, t as c } from "../chart-frame-Bczk5sWj.js";
+import { n as t, r as n, t as r } from "../chart-input-C9fu7f1Q.js";
+import { a as i, n as a, r as o, s, t as c } from "../chart-frame-38ES6kwK.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

package/dist/charts/timeline.js

@@ -1,5 +1,5 @@
-import { c as e } from "../src-D05isEh_.js";
-import { n as t, t as n } from "../chart-input-CbzVN76m.js";
+import { c as e } from "../src-3gzujMhN.js";
+import { n as t, t as n } from "../chart-input-C9fu7f1Q.js";
 import * as r from "@stylexjs/stylex";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { scaleLinear as o } from "@visx/scale";
@@ -54,7 +54,7 @@ function f({ items: t, start: s, end: f, label: g, rowLabel: _, summaryLabel: v,
 		className: "xeuugli x1hz01jw x12h1iku",
 		children: [
 			/* @__PURE__ */ a("div", {
-				className: "xrvj5dj x13sfnbj x1prkh4w x6s0dn4 x1gkm1c7 x1y1mm1b xh8yej3 x9f619 x1doqdfy x1uey4wk x153jb6y xy8obcc xso031l x1q0q8m5 x1qndepd",
+				className: "xrvj5dj x13sfnbj x1prkh4w x6s0dn4 x1gkm1c7 x1y1mm1b xh8yej3 x9f619 x1doqdfy x17tes2r x153jb6y xy8obcc xso031l x1q0q8m5 x1qndepd",
 				children: [
 					/* @__PURE__ */ i(e, {
 						variant: "caption",
@@ -96,7 +96,7 @@ function f({ items: t, start: s, end: f, label: g, rowLabel: _, summaryLabel: v,
 					onClick: () => S(t.id),
 					...{
 						0: { className: "xrvj5dj x13sfnbj x1prkh4w x6s0dn4 x1gkm1c7 x1y1mm1b xh8yej3 x9f619 x1doqdfy xn9t2bk x1wiwyrm xc342km xso031l x1q0q8m5 x1qndepd xpvm0e4 xbixft x1hz01jw x1yc453h x1ypdohk x1t137rt xzro8vx x1ecmtor x19rmrnh x9v5kkp x13qnu6 x1bqaal x1t1lzn6" },
-						1: { className: "xrvj5dj x13sfnbj x1prkh4w x6s0dn4 x1gkm1c7 x1y1mm1b xh8yej3 x9f619 x1doqdfy xn9t2bk x1wiwyrm xc342km xso031l x1q0q8m5 x1qndepd xbixft x1hz01jw x1yc453h x1ypdohk x1t137rt xzro8vx x1ecmtor x19rmrnh x9v5kkp x13qnu6 x1bqaal x1t1lzn6 x1r7kqkb x1jmj9dw" }
+						1: { className: "xrvj5dj x13sfnbj x1prkh4w x6s0dn4 x1gkm1c7 x1y1mm1b xh8yej3 x9f619 x1doqdfy xn9t2bk x1wiwyrm xc342km xso031l x1q0q8m5 x1qndepd xbixft x1hz01jw x1yc453h x1ypdohk x1t137rt xzro8vx x1ecmtor x19rmrnh x9v5kkp x13qnu6 x1bqaal x1t1lzn6 x1r7kqkb xh3r7i3" }
 					}[b === t.id | 0],
 					children: [
 						/* @__PURE__ */ a("span", {

package/dist/charts.js

@@ -1 +1 @@
-export { r as ChartFrame, i as ChartLegend } from "./chart-frame-Bczk5sWj.js";
+export { r as ChartFrame, i as ChartLegend } from "./chart-frame-38ES6kwK.js";

package/dist/{code-block-B7xzM3tD.js → code-block-BjV2EFZS.js}

@@ -1,7 +1,7 @@
-import { _ as e } from "./src-D05isEh_.js";
+import { _ as e } from "./src-3gzujMhN.js";
 import { colors as t } from "./tokens.js";
 import { t as n } from "./viewer-styles-CpHqp5Qv.js";
-import { t as r } from "./pierre-theme-D9hnHv3Z.js";
+import { t as r } from "./pierre-theme-CBAncKdH.js";
 import * as i from "@stylexjs/stylex";
 import { useEffect as a, useRef as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";