@mechane-ai/ui 0.2.2 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # Mechane UI
 
-React components, visual tokens, application layouts, and charts built with Base UI, StyleX, and visx. Mechane's Console
+React controls, content viewers, agent interfaces, layouts, and charts with a shared compact design. Mechane's Console
 consumes this same package. Components receive values and callbacks; applications own routing, data, and identity.
 
 ## Install
@@ -37,18 +37,39 @@ export function Example() {
 The package supplies compiled ESM, TypeScript declarations, and CSS. Ordinary React consumers need no StyleX compiler.
 Applications install their own reset and fonts. Put reset rules in the `reset` CSS layer; the package's `mechane` layer
 comes after it. Application styles and StyleX themes can override the package layer. The default theme is light, with
-system fonts and a compact spacing scale.
+system fonts and a compact spacing scale. Apply `themeProps.light` or `themeProps.dark` from the root entry to the
+document root to choose a theme for both content and portaled controls. Applications own the preference.
 
 ## Entry points
 
-| Import                         | Responsibility                                           |
-| ------------------------------ | -------------------------------------------------------- |
-| `@mechane-ai/ui`               | Accessible controls, forms, text, tables, and feedback   |
-| `@mechane-ai/ui/layout`        | AppShell, navigation, PageToolbar, and DetailPage        |
-| `@mechane-ai/ui/charts`        | Generic Waterfall and its input type                     |
-| `@mechane-ai/ui/tokens`        | Compiled visual token references for runtime styles      |
-| `@mechane-ai/ui/tokens.stylex` | Direct token definitions for StyleX authoring and themes |
-| `@mechane-ai/ui/styles.css`    | Component styles and token defaults                      |
+| Import                               | Responsibility                                                       |
+| ------------------------------------ | -------------------------------------------------------------------- |
+| `@mechane-ai/ui`                     | Controls, forms, text, feedback, generic Trace, and theme props.     |
+| `@mechane-ai/ui/layout`              | Application shell, navigation, toolbars, details, and split panes.   |
+| `@mechane-ai/ui/collections`         | Tables, inspectors, collection controls, dates, and scoped commands. |
+| `@mechane-ai/ui/content`             | Markdown, JSON, recorded logs, and stack traces.                     |
+| `@mechane-ai/ui/content/link`        | Safe content links without loading the Markdown renderer.            |
+| `@mechane-ai/ui/content/code`        | CodeBlock with source-preserving highlighting.                       |
+| `@mechane-ai/ui/content/diff`        | DiffViewer for file changes and patches.                             |
+| `@mechane-ai/ui/content/tree`        | FileTree for paths, status, and controlled selection.                |
+| `@mechane-ai/ui/ai`                  | Conversations, messages, prompts, approvals, sources, and citations. |
+| `@mechane-ai/ui/charts`              | Shared chart parts and all chart families, including Waterfall.      |
+| `@mechane-ai/ui/charts/cartesian`    | Time series, categorical bars, breakdowns, and treemaps.             |
+| `@mechane-ai/ui/charts/distribution` | Histograms, cumulative distributions, intervals, and ranked values.  |
+| `@mechane-ai/ui/charts/matrix`       | Matrices, exact token highlights, and scatter plots.                 |
+| `@mechane-ai/ui/charts/graph`        | Read-only supplied relationships and node selection.                 |
+| `@mechane-ai/ui/tokens`              | Compiled token references for runtime styles.                        |
+| `@mechane-ai/ui/tokens.stylex`       | Direct definitions for StyleX authoring and themes.                  |
+| `@mechane-ai/ui/styles.css`          | Component styles and token defaults.                                 |
+
+These are modules of one package, with one version and stylesheet. Focused imports keep heavier families out of the core
+entry. Content renderers initialize when used; applications do not configure a renderer worker pool or fetch syntax
+grammars from a CDN. See the
+[content guide](https://github.com/mechane-ai/mechane/blob/main/workspaces/core/docs/ui-content.md) for renderer assets
+and fallback behavior.
+
+When upgrading from 0.2, move `Table`, `Cell`, `Details`, `Inspector`, and `ListFooter` imports to `/collections`. The
+layout, Waterfall, and token entry points retain their existing paths.
 
 Use `render` for Base UI composition and named variants for appearance. Native attributes, events, and refs remain
 available. Typed `xstyle` inputs allow placement styles compiled by the consuming application's StyleX setup.
@@ -66,9 +87,9 @@ source exports let Mechane and Storybook compile the canonical components with t
 publication selects the compiled exports declared in `publishConfig`.
 
 Run `pnpm --filter @mechane/console storybook` for the component catalog. The
-[component guide](https://github.com/mechane-ai/mechane/blob/main/workspaces/core/docs/components.md) explains
-composition, supported states, and browser review. Stories use synthetic inputs. The repository's existing checks cover
-source and package boundaries; installation releases and UI releases have independent versions.
+[component guide](https://github.com/mechane-ai/mechane/blob/main/workspaces/core/docs/components.md) explains family
+selection, composition, supported states, and browser review. Stories use synthetic inputs. The repository's existing
+checks cover source and package boundaries; installation releases and UI releases have independent versions.
 
 The public repository publishes npm packages when an immutable `ui-vVERSION` GitHub release is published. The release
 workflow rebuilds the reviewed archive and checks its digest before publishing with npm trusted publishing and

package/dist/ai.js

@@ -0,0 +1,315 @@
+import { H as e, V as t, X as n, Y as r, it as i, m as a, ot as o, q as s } from "./src-E7YRJBMO.js";
+import { t as c } from "./content-link-52aZVX3X.js";
+import * as l from "@stylexjs/stylex";
+import { createContext as u, useContext as d, useId as f, useRef as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { ArrowDown as g, ArrowUp as _, ExternalLink as v, File as y, Square as b } from "lucide-react";
+import { MessageScroller as x, useMessageScroller as S, useMessageScrollerScrollable as C } from "@shadcn/react/message-scroller";
+// packages/ai/src/conversation.tsx
+var w = u(void 0);
+function T({ children: e, initialPosition: t = "end", follow: n = !0 }) {
+	let r = p(null);
+	return /* @__PURE__ */ m(w.Provider, {
+		value: r,
+		children: /* @__PURE__ */ m(x.Provider, {
+			autoScroll: n,
+			defaultScrollPosition: t,
+			children: /* @__PURE__ */ m(x.Root, {
+				className: "x1n2onr6 x78zum5 xdt5ytf x5yr21d x2lwn1j xeuugli x1l90twa xgl13c xoedhln x118kxxs x1hyyzld",
+				children: e
+			})
+		})
+	});
+}
+function E({ label: e, children: t }) {
+	let n = d(w);
+	return /* @__PURE__ */ m(x.Viewport, {
+		ref: n,
+		"aria-label": e,
+		className: "x98rzlu x2lwn1j xeuugli x1odjw0f x1046ku7 x185mbhu x1fa2hmj xnktsf1 x9v5kkp x1m2ab5f x1bqaal",
+		children: t
+	});
+}
+function D({ children: e, streaming: t = !1 }) {
+	return /* @__PURE__ */ m(x.Content, {
+		"aria-live": "polite",
+		"aria-relevant": "additions",
+		"aria-busy": t,
+		className: "x78zum5 xdt5ytf x179h1ev x1h65vws xeuugli",
+		children: e
+	});
+}
+function O({ messageId: e, children: t }) {
+	return /* @__PURE__ */ m(x.Item, {
+		messageId: e,
+		className: "xeuugli xj0a0fe",
+		children: t
+	});
+}
+function k({ label: e = "Jump to latest" }) {
+	let { scrollToEnd: t } = S(), { end: n } = C(), r = d(w);
+	return n ? /* @__PURE__ */ m("div", {
+		className: "x10l6tqk xjsifmk x1nrll8i xuuh30",
+		children: /* @__PURE__ */ h(i, {
+			onClick: () => {
+				t({ behavior: "instant" }), r?.current?.focus({ preventScroll: !0 });
+			},
+			children: [/* @__PURE__ */ m(g, {
+				size: 16,
+				"aria-hidden": !0
+			}), e]
+		})
+	}) : null;
+}
+var A = {
+	Root: T,
+	Viewport: E,
+	Content: D,
+	Item: O,
+	JumpToLatest: k
+}, j = {
+	root: {
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		kOIVth: "xtmze7h",
+		k7Eaqz: "xeuugli",
+		kMwMTN: "xgl13c",
+		kMv6JI: "xoedhln",
+		kGuDYH: "x118kxxs",
+		kLWn49: "x1hyyzld",
+		$$css: !0
+	},
+	user: {
+		kmVPX3: "x1h65vws",
+		kMzoRj: "xmkeg23",
+		ksu8eU: "x1y0btm7",
+		kVAM5u: "x1yww3zy",
+		kaIpWk: "x1fa2hmj",
+		kWkggS: "x1m7rfvg",
+		$$css: !0
+	},
+	assistant: { $$css: !0 },
+	system: {
+		kMwMTN: "xv9cywu",
+		k8WAf4: "x4wz14",
+		$$css: !0
+	}
+}, M = {
+	user: j.user,
+	assistant: j.assistant,
+	system: j.system
+};
+function N({ author: e, children: t, id: n, kind: r = "assistant", meta: i, actions: a, attachments: o }) {
+	return /* @__PURE__ */ h("article", {
+		id: n,
+		"aria-label": e,
+		...l.props(j.root, M[r]),
+		children: [
+			/* @__PURE__ */ h("header", {
+				className: "x78zum5 x1pha0wt xf0fr40 x1a02dak xeuugli",
+				children: [/* @__PURE__ */ m("span", {
+					className: "xk50ysn xj0a0fe",
+					children: e
+				}), i !== void 0 && /* @__PURE__ */ m("div", {
+					className: "xv9cywu xut3y95 xam3yii",
+					children: i
+				})]
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "xeuugli xj0a0fe",
+				children: t
+			}),
+			o !== void 0 && /* @__PURE__ */ m("div", {
+				className: "x78zum5 x1a02dak x1qjc9v5 xf0fr40",
+				children: o
+			}),
+			a !== void 0 && /* @__PURE__ */ m("footer", {
+				className: "x78zum5 x1a02dak x6s0dn4 xf0fr40",
+				children: a
+			})
+		]
+	});
+}
+function P({ name: e, description: t, href: n, actions: r }) {
+	return /* @__PURE__ */ h("div", {
+		className: "x78zum5 x6s0dn4 xtmze7h xeuugli x193iq5w x1i1dks5 xmkeg23 x1y0btm7 x1yww3zy x1fa2hmj x1l90twa xoedhln x118kxxs x1hyyzld",
+		children: [
+			/* @__PURE__ */ m(y, {
+				size: 16,
+				"aria-hidden": !0,
+				className: "xv9cywu x2lah0s"
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "x78zum5 xdt5ytf x1r8op4a xeuugli xj0a0fe",
+				children: [n === void 0 ? /* @__PURE__ */ m("span", { children: e }) : /* @__PURE__ */ m(c, {
+					href: n,
+					children: e
+				}), t !== void 0 && /* @__PURE__ */ m("span", {
+					className: "xv9cywu xut3y95 xam3yii",
+					children: t
+				})]
+			}),
+			r
+		]
+	});
+}
+// packages/ai/src/prompt-input.tsx
+function F({ label: e, value: t, onValueChange: n, onSubmit: a, name: o = "prompt", placeholder: c, maxLength: l, required: u = !0, pending: d = !1, disabled: p = !1, submitDisabled: g = !1, submitLabel: v = "Send message", pendingLabel: y = "Sending…", enterBehavior: x = "newline", description: S, error: C, controls: w, attachments: T, onStop: E, stopPending: D = !1, stopLabel: O = "Stop response" }) {
+	let k = f(), A = p || d;
+	function j(e) {
+		if (x !== "submit" || e.key !== "Enter" || e.repeat) return;
+		let t = e.altKey || e.ctrlKey || e.metaKey;
+		e.shiftKey || t || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229 || (e.preventDefault(), !A && !g && E === void 0 && e.currentTarget.form?.requestSubmit());
+	}
+	function M(e) {
+		e.preventDefault(), !A && !g && E === void 0 && a(e);
+	}
+	return /* @__PURE__ */ h("form", {
+		onSubmit: M,
+		className: "x78zum5 xdt5ytf xtmze7h xeuugli",
+		children: [
+			/* @__PURE__ */ h(s.Root, {
+				invalid: C !== void 0,
+				children: [
+					/* @__PURE__ */ m(s.Label, { children: e }),
+					/* @__PURE__ */ m(r, {
+						name: o,
+						value: t,
+						onChange: (e) => n(e.currentTarget.value),
+						onKeyDown: j,
+						placeholder: c,
+						maxLength: l,
+						required: u,
+						disabled: p,
+						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, {
+						id: k,
+						match: !0,
+						role: "alert",
+						children: C
+					})
+				]
+			}),
+			T,
+			/* @__PURE__ */ h("div", {
+				className: "x78zum5 x1a02dak x6s0dn4 x1qughib xtmze7h",
+				children: [/* @__PURE__ */ m("div", {
+					className: "x78zum5 x1a02dak x6s0dn4 xf0fr40 xeuugli",
+					children: w
+				}), E === void 0 ? /* @__PURE__ */ h(i, {
+					type: "submit",
+					variant: "solid",
+					disabled: p || g,
+					pending: d,
+					pendingLabel: y,
+					children: [/* @__PURE__ */ m(_, {
+						size: 16,
+						"aria-hidden": !0
+					}), v]
+				}) : /* @__PURE__ */ h(i, {
+					type: "button",
+					onClick: (e) => {
+						e.preventDefault(), E();
+					},
+					disabled: p,
+					pending: D,
+					pendingLabel: "Stopping…",
+					children: [/* @__PURE__ */ m(b, {
+						size: 14,
+						"aria-hidden": !0
+					}), O]
+				})]
+			})
+		]
+	});
+}
+// packages/ai/src/approval.tsx
+function I(e) {
+	return /* @__PURE__ */ h("section", {
+		"aria-label": e.title,
+		"data-request-id": e.requestId,
+		className: "x78zum5 xdt5ytf xtmze7h xeuugli x1h65vws xmkeg23 x1y0btm7 x1yww3zy x1fa2hmj x1l90twa xgl13c xoedhln x118kxxs x1hyyzld",
+		children: [
+			/* @__PURE__ */ m("h3", {
+				className: "x1ghz6dp x118kxxs x1hyyzld xk50ysn xj0a0fe",
+				children: e.title
+			}),
+			e.description !== void 0 && /* @__PURE__ */ m("p", {
+				className: "x1ghz6dp xv9cywu xj0a0fe",
+				children: e.description
+			}),
+			e.children,
+			e.status === "pending" ? /* @__PURE__ */ h(t, { children: [/* @__PURE__ */ m(i, {
+				variant: "solid",
+				onClick: e.onApprove,
+				disabled: e.disabled === !0 || e.busy !== void 0,
+				pending: e.busy === "approve",
+				pendingLabel: "Approving…",
+				children: e.approveLabel ?? "Approve"
+			}), /* @__PURE__ */ m(i, {
+				onClick: e.onDeny,
+				disabled: e.disabled === !0 || e.busy !== void 0,
+				pending: e.busy === "deny",
+				pendingLabel: "Denying…",
+				children: e.denyLabel ?? "Deny"
+			})] }) : /* @__PURE__ */ m(n, { children: e.statusLabel })
+		]
+	});
+}
+// packages/ai/src/sources.tsx
+function L({ sources: e, label: t = "Sources" }) {
+	return /* @__PURE__ */ h("section", {
+		"aria-label": t,
+		className: "x78zum5 xdt5ytf xf0fr40 xeuugli xoedhln x118kxxs x1hyyzld xgl13c",
+		children: [/* @__PURE__ */ m("h3", {
+			className: "x1ghz6dp x118kxxs x1hyyzld xk50ysn",
+			children: t
+		}), /* @__PURE__ */ m("ol", {
+			className: "x78zum5 xdt5ytf xtmze7h x1ghz6dp x1717udv x3ct3a4",
+			children: e.map((e) => /* @__PURE__ */ h("li", {
+				className: "x78zum5 xdt5ytf x1r8op4a xeuugli xj0a0fe",
+				children: [/* @__PURE__ */ h("span", {
+					className: "x3nfvp2 x1pha0wt xzwl0l2 x1a02dak",
+					children: [/* @__PURE__ */ m(c, {
+						href: e.href,
+						children: e.title
+					}), /* @__PURE__ */ m(v, {
+						size: 12,
+						"aria-hidden": !0,
+						className: "x2lah0s xv9cywu"
+					})]
+				}), e.description !== void 0 && /* @__PURE__ */ m("p", {
+					className: "x1ghz6dp xv9cywu xut3y95 xam3yii xj0a0fe",
+					children: e.description
+				})]
+			}, e.id))
+		})]
+	});
+}
+function R({ source: t, label: n }) {
+	return /* @__PURE__ */ m("span", {
+		className: "xt0psk2 x11njtxf xss6m8b",
+		children: /* @__PURE__ */ h(a.Root, { children: [/* @__PURE__ */ m(a.Trigger, {
+			render: /* @__PURE__ */ m(o, {}),
+			"aria-label": `Source ${n}: ${t.title}`,
+			children: n
+		}), /* @__PURE__ */ m(a.Portal, { children: /* @__PURE__ */ m(a.Positioner, {
+			side: "top",
+			children: /* @__PURE__ */ m(a.Popup, { children: /* @__PURE__ */ h(e, {
+				compact: !0,
+				children: [
+					/* @__PURE__ */ m(a.Title, { children: t.title }),
+					t.description !== void 0 && /* @__PURE__ */ m(a.Description, { children: t.description }),
+					/* @__PURE__ */ m(c, {
+						href: t.href,
+						children: "Open source"
+					})
+				]
+			}) })
+		}) })] })
+	});
+}
+export { I as Approval, A as Conversation, R as InlineCitation, N as Message, P as MessageAttachment, F as PromptInput, L as Sources };