@mechane-ai/elements 0.7.0 → 0.8.0

package/README.md

@@ -58,7 +58,7 @@ Every path below belongs to `@mechane-ai/elements`. There is one package, versio
 | `/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.                 |
+| `/collections`         | Tables, inspectors, collection controls, timelines, 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.          |
@@ -90,6 +90,22 @@ Use Base UI's `render` composition and named variants for appearance. Native att
 available. Typed `xstyle` inputs permit placement styles compiled by the application's StyleX setup. Applications own
 asynchronous work and pass its pending, success, or failure state to controls.
 
+Use `ToolbarAction` for page-header actions, including links composed with `render`. A clipboard action can compose
+`CopyValue render={<ToolbarAction />}`; the rendered control owns its appearance and CopyValue owns copy feedback. Use
+`Row` for aligned inline actions, `Stack` for related content, and `RecordPage.Content` for separated page sections.
+Detail titles wrap; list metadata truncates. Sidebar items share contiguous hit areas. Put scrolling commands with the
+navigation and reserve the divided sidebar footer for persistent account information.
+
+`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
+belongs in a detail view or a deliberately content-sized row, not behind a clipped control. `CollectionEnd` renders
+nothing when complete unless an explicit summary is supplied. `Timeline.Root` and `Timeline.Item` compose readable
+activity with supplied titles, icons, timestamps, metadata, and body content, without interpreting domain events.
+
+`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`.
+
 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
 then inherits the same theme. The application owns the preference; no theme provider is required.

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-BkCsvZGi.js";
-import { t as a } from "./content-link-HLYu0cmz.js";
-import { c as o, u as s } from "./src-DjTM64tN.js";
+import { b as e, f as t, p as n, t as r, v as i } from "./src-Bc5sEhdO.js";
+import { t as a } from "./content-link-Dd8gapwc.js";
+import { c as o, u as s } from "./src-Eg_ytPjv.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";

package/dist/assets/stylex.css

@@ -48,6 +48,10 @@
   .x69ldcm {
     padding: var(--xxhyxt);
   }
+
+  .x1az1eml:empty {
+    padding: 0;
+  }
 }
 
 @layer priority3 {
@@ -231,6 +235,10 @@
     overflow: auto;
   }
 
+  .x7giv3 {
+    overflow: clip;
+  }
+
   .xb3r6kr {
     overflow: hidden;
   }
@@ -584,6 +592,10 @@
     column-gap: var(--x1iwxfi2);
   }
 
+  .x1y1mm1b {
+    column-gap: var(--x1qq5i99);
+  }
+
   .x14ut1dr {
     container-name: toolbar;
   }
@@ -792,6 +804,10 @@
     grid-template-columns: minmax(90px, 1fr) minmax(0, 1.6fr);
   }
 
+  .xpuu00s {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
+  }
+
   .xhuszhj {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
   }
@@ -904,6 +920,10 @@
     outline-offset: 3px;
   }
 
+  .x1t137rt {
+    outline-style: none;
+  }
+
   .xaatb59 {
     outline-style: solid;
   }
@@ -1568,6 +1588,14 @@
     height: 44px;
   }
 
+  .x1dqyrwa {
+    height: 47px;
+  }
+
+  .xsdox4t {
+    height: 48px;
+  }
+
   .xqu0tyb {
     height: 4px;
   }
@@ -1580,6 +1608,10 @@
     height: 8px;
   }
 
+  .xt7dq6l {
+    height: auto;
+  }
+
   .x1b7uu3i {
     height: calc(100dvh - var(--xrzfcxb));
   }
@@ -1672,6 +1704,10 @@
     max-height: 400px;
   }
 
+  .xjexgjb {
+    max-height: 47px;
+  }
+
   .x14eurpq {
     max-height: 480px;
   }
@@ -1872,6 +1908,10 @@
     padding-bottom: var(--x1drqizm);
   }
 
+  .xhlx3wy {
+    padding-bottom: var(--x1iwxfi2);
+  }
+
   .x1uwsqpk {
     padding-bottom: var(--x1p8em4u);
   }
@@ -2076,6 +2116,14 @@
     border-bottom-width: 0;
   }
 
+  .xup0pd7:last-child {
+    padding-bottom: 0;
+  }
+
+  .x15x95ik:empty {
+    min-height: 0;
+  }
+
   @media (width <= 1100px) {
     .x1tama1k.x1tama1k {
       width: 100%;
@@ -2368,7 +2416,7 @@
     background-color: var(--x7wqmh8);
   }
 
-  .xtccgxd:after {
+  .x1mi36wk:before, .xtccgxd:after {
     background-color: var(--xe11pje);
   }
 
@@ -2416,6 +2464,10 @@
     inset-inline-start: 0;
   }
 
+  .x1lk18uv:before {
+    inset-inline-start: 7px;
+  }
+
   .x1k5xxp6::file-selector-button {
     margin-inline-end: var(--xxhyxt);
   }
@@ -2444,6 +2496,10 @@
     transform: none;
   }
 
+  .x1wse844:last-child:before {
+    display: none;
+  }
+
   .xysgshy:disabled::file-selector-button {
     color: var(--x24btp3);
   }
@@ -2458,6 +2514,10 @@
     border-bottom-width: 2px;
   }
 
+  .x1jw5pjq:before {
+    bottom: 4px;
+  }
+
   .x1a5uphr:after, .xj3gwzc:before {
     height: 16px;
   }
@@ -2490,6 +2550,10 @@
     top: 10px;
   }
 
+  .x1gi6gvw:before {
+    top: 24px;
+  }
+
   .xoqv437:after {
     top: 50%;
   }
@@ -2498,7 +2562,7 @@
     width: 16px;
   }
 
-  .xv6d0c5:after {
+  .x1vgi0k:before, .xv6d0c5:after {
     width: 1px;
   }
 

package/dist/{categorical-values-75J0TUkR.js → categorical-values-dGbaZ0tp.js}

@@ -1,5 +1,5 @@
-import { n as e, o as t } from "./chart-frame--DOsZKwP.js";
-import { n } from "./chart-input-C-g586YE.js";
+import { n as e, o as t } from "./chart-frame-DgPdIguO.js";
+import { n } from "./chart-input-Sac4StHN.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--DOsZKwP.js → chart-frame-DgPdIguO.js}

@@ -1,4 +1,4 @@
-import { h as e } from "./src-BkCsvZGi.js";
+import { h as e } from "./src-Bc5sEhdO.js";
 import { chartColors as t, colors as n } from "./tokens.js";
 import * as r from "@stylexjs/stylex";
 import { useId as i } from "react";
@@ -58,6 +58,7 @@ var s = {
 		$$css: !0
 	},
 	focus: {
+		k3XXqK: "x1t137rt",
 		kZs9gx: "x19rmrnh",
 		k7shQP: "x9v5kkp",
 		kPJHz1: "x13qnu6",

package/dist/{chart-input-C-g586YE.js → chart-input-Sac4StHN.js}

@@ -1,5 +1,5 @@
-import { d as e } from "./src-B_DCatpY.js";
-import { r as t } from "./chart-frame--DOsZKwP.js";
+import { d as e } from "./src-DV0BNk1M.js";
+import { r as t } from "./chart-frame-DgPdIguO.js";
 import { jsx as n } from "react/jsx-runtime";
 // packages/charts/src/chart-input.tsx
 function r(e) {

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-75J0TUkR.js";
-import { a as i, i as a, n as o, o as s, r as c, t as l } from "../chart-frame--DOsZKwP.js";
-import { n as u, r as d, t as f } from "../chart-input-C-g586YE.js";
+import { i as e, n as t, r as n, t as r } from "../categorical-values-dGbaZ0tp.js";
+import { a as i, i as a, n as o, o as s, r as c, t as l } from "../chart-frame-DgPdIguO.js";
+import { n as u, r as d, t as f } from "../chart-input-Sac4StHN.js";
 import { t as p } from "../plot-width--OgdohB5.js";
-import { b as m } from "../src-BkCsvZGi.js";
-import { h } from "../src-DjTM64tN.js";
+import { b as m } from "../src-Bc5sEhdO.js";
+import { h } from "../src-Eg_ytPjv.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";
@@ -777,6 +777,7 @@ function Z({ title: e, summary: t, unit: n, series: r, valueDomain: i }) {
 // packages/charts/src/cartesian/time-series.tsx
 var le = { plot: {
 	k7Eaqz: "xeuugli",
+	k3XXqK: "x1t137rt",
 	kInvED: "x1hl8ikr",
 	kZs9gx: "x19rmrnh",
 	k7shQP: "x9v5kkp",

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--DOsZKwP.js";
-import { n as i, r as a, t as o } from "../chart-input-C-g586YE.js";
+import { n as e, o as t, r as n, t as r } from "../chart-frame-DgPdIguO.js";
+import { n as i, r as a, t as o } from "../chart-input-Sac4StHN.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--DOsZKwP.js";
-import { n as r, t as i } from "../chart-input-C-g586YE.js";
+import { o as e, r as t, t as n } from "../chart-frame-DgPdIguO.js";
+import { n as r, t as i } from "../chart-input-Sac4StHN.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-75J0TUkR.js";
-import { a as r, o as i, r as a } from "../chart-frame--DOsZKwP.js";
-import { t as o } from "../chart-input-C-g586YE.js";
+import { i as e, r as t, t as n } from "../categorical-values-dGbaZ0tp.js";
+import { a as r, o as i, r as a } from "../chart-frame-DgPdIguO.js";
+import { t as o } from "../chart-input-Sac4StHN.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-C-g586YE.js";
-import { n as i, o as a, r as o, t as s } from "../chart-frame--DOsZKwP.js";
+import { n as t, r as n, t as r } from "../chart-input-Sac4StHN.js";
+import { n as i, o as a, r as o, t as s } from "../chart-frame-DgPdIguO.js";
 import * as c from "@stylexjs/stylex";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 // packages/charts/src/matrix/heatmap-scale.ts

package/dist/charts/timeline.js

@@ -1,4 +1,4 @@
-import { c as e } from "../src-BkCsvZGi.js";
+import { c as e } from "../src-Bc5sEhdO.js";
 import * as t from "@stylexjs/stylex";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { scaleLinear as i } from "@visx/scale";

package/dist/charts.js

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

package/dist/{code-block-D0Jmsj7w.js → code-block-BRNdtTaP.js}

@@ -1,4 +1,4 @@
-import { g as e } from "./src-BkCsvZGi.js";
+import { g as e } from "./src-Bc5sEhdO.js";
 import { colors as t } from "./tokens.js";
 import { t as n } from "./pierre-theme-BpESNIsV.js";
 import * as r from "@stylexjs/stylex";