@mechane-ai/elements 0.6.0 → 0.7.0

package/dist/layout.js

@@ -1,5 +1,5 @@
 import { a as e } from "./src-CfDf8TY8.js";
-import { i as t, n, v as r, y as i } from "./src-DuTmAQp5.js";
+import { i as t, n, v as r, y as i } from "./src-BkCsvZGi.js";
 import { mergeProps as a } from "@base-ui/react/merge-props";
 import "@stylexjs/stylex";
 import { createContext as o, useContext as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
@@ -292,17 +292,59 @@ function P({ children: e }) {
 		children: e
 	});
 }
+// packages/layout/src/focus-page.tsx
+function F({ children: e }) {
+	return /* @__PURE__ */ p("main", {
+		id: "main",
+		tabIndex: -1,
+		className: "x9f619 x1ov3xa9 xrvj5dj x1ku5rj1 x1jvlu93 xpvm0e4 xbixft x1hz01jw xtqrqnz x1778rvt xvmahel",
+		children: /* @__PURE__ */ p("div", {
+			className: "xh8yej3 xxc7z9f xrvj5dj x1j825kq",
+			children: e
+		})
+	});
+}
+// packages/layout/src/workbench.tsx
+function I({ header: e, children: t, inspector: n }) {
+	return /* @__PURE__ */ m("div", {
+		className: "x78zum5 xdt5ytf x1b7uu3i xeuugli x2lwn1j",
+		children: [/* @__PURE__ */ p("div", {
+			className: "x1ydxw8w xnx3t7k xso031l x1q0q8m5 x1qndepd",
+			children: e
+		}), /* @__PURE__ */ m("div", {
+			className: "x78zum5 x98rzlu xeuugli x2lwn1j xb3r6kr",
+			children: [/* @__PURE__ */ p("div", {
+				...{
+					0: { className: "x78zum5 x98rzlu xdt5ytf xeuugli x2lwn1j" },
+					1: { className: "x98rzlu xdt5ytf xeuugli x2lwn1j x78zum5 x1g9v1si" }
+				}[n != null | 0],
+				children: t
+			}), n != null && /* @__PURE__ */ p("aside", {
+				"aria-label": "Execution inspector",
+				className: "x9f619 x1peuizl x1tama1k x2lah0s x1odjw0f x1c8xbx5 xpvm0e4 xe0pwq x19ypqd9 x1l3ounx",
+				children: n
+			})]
+		})]
+	});
+}
+function L({ children: e }) {
+	return /* @__PURE__ */ p("div", {
+		className: "x1odjw0f x98rzlu xeuugli x2lwn1j x1jvlu93",
+		children: e
+	});
+}
+function R({ children: e }) {
+	return /* @__PURE__ */ p("div", {
+		className: "x2lah0s x1c8xbx5 x178xt8z x13fuv20 xhjagg4 xpvm0e4",
+		children: e
+	});
+}
 // packages/layout/src/page-toolbar.tsx
-var F = { action: {
-	kZKoxP: "x5yr21d",
-	k7Eaqz: "x167izq3",
-	k8WAf4: "xt970qd",
-	kg3NbH: "x1m92p3w",
-	kaIpWk: "x2u8bby",
+var z = { action: {
 	kOIVth: "x1hnptsi",
 	$$css: !0
 } };
-function I({ title: e, actions: t, breadcrumb: n = !1, navigation: r = !0 }) {
+function B({ title: e, actions: t, breadcrumb: n = !1, navigation: r = !0 }) {
 	return /* @__PURE__ */ m("div", {
 		className: "x9f619 x78zum5 x12h1iku x14ut1dr x1qjc9v5 xcn9na3 x2lah0s xso031l x1q0q8m5 x1qndepd xpvm0e4 xbixft x1hz01jw x12myhf4 x1778rvt xvmahel xeuugli",
 		children: [
@@ -317,22 +359,22 @@ function I({ title: e, actions: t, breadcrumb: n = !1, navigation: r = !0 }) {
 				})
 			}),
 			t != null && /* @__PURE__ */ p("div", {
-				className: "x78zum5 x1qjc9v5 xeuugli x2lah0s x8x9d4c",
+				className: "x78zum5 x6s0dn4 xunmzkg x5g2kb4 xeuugli x2lah0s x8x9d4c",
 				children: t
 			})
 		]
 	});
 }
-function L({ icon: e, children: t, ...n }) {
+function V({ icon: e, children: t, ...n }) {
 	let i = e != null;
 	return /* @__PURE__ */ p("div", {
-		className: "x9f619 x78zum5 x1qjc9v5 xeuugli xe0pwq x19ypqd9 x1l3ounx",
+		className: "x9f619 x78zum5 x1qjc9v5 xeuugli",
 		children: /* @__PURE__ */ m(r, {
 			...n,
 			variant: "ghost",
-			size: "md",
+			size: "sm",
 			"aria-label": n["aria-label"] ?? (typeof t == "string" ? t : void 0),
-			xstyle: F.action,
+			xstyle: z.action,
 			children: [e, i ? /* @__PURE__ */ p("span", {
 				className: "xeuugli xb3r6kr xlyipyv xuxw1ft xt0psk2 xlllsrz",
 				children: t
@@ -341,14 +383,14 @@ function L({ icon: e, children: t, ...n }) {
 	});
 }
 // packages/layout/src/record-page.tsx
-function R({ children: e }) {
+function H({ children: e }) {
 	return /* @__PURE__ */ p("div", {
 		className: "x78zum5 xdt5ytf xeuugli xbixft x1hz01jw xtqrqnz x1778rvt xvmahel",
 		children: e
 	});
 }
-function z({ backLabel: e, backHref: t, onBack: n, actions: r, navigation: i = !0 }) {
-	return /* @__PURE__ */ p(I, {
+function U({ backLabel: e, backHref: t, onBack: n, actions: r, navigation: i = !0 }) {
+	return /* @__PURE__ */ p(B, {
 		breadcrumb: !0,
 		navigation: i,
 		actions: r,
@@ -367,19 +409,19 @@ function z({ backLabel: e, backHref: t, onBack: n, actions: r, navigation: i = !
 		})
 	});
 }
-function B({ children: e }) {
+function W({ children: e }) {
 	return /* @__PURE__ */ p(P, { children: /* @__PURE__ */ p("div", {
 		className: "x78zum5 x1a02dak x1cy8zhl x1m6b44x xeuugli",
 		children: e
 	}) });
 }
-function V({ children: e }) {
+function G({ children: e }) {
 	return /* @__PURE__ */ p("div", {
 		className: "x78zum5 xdt5ytf x1ewej1i x1iyjqo2 x1j825kq xeuugli",
 		children: e
 	});
 }
-function H({ title: e, description: r, icon: i, titleRef: a }) {
+function K({ title: e, description: r, icon: i, titleRef: a }) {
 	return /* @__PURE__ */ m("header", {
 		className: "xrvj5dj x1n8ia3y xeuugli",
 		children: [/* @__PURE__ */ m("div", {
@@ -396,23 +438,23 @@ function H({ title: e, description: r, icon: i, titleRef: a }) {
 		}), r != null && /* @__PURE__ */ p(t, { children: r })]
 	});
 }
-function U({ children: e, label: t = "Properties" }) {
+function q({ children: e, label: t = "Properties" }) {
 	return /* @__PURE__ */ p("aside", {
 		"aria-label": t,
 		className: "x78zum5 xdt5ytf x1irul0l x1iyjqo2 x1j825kq xeuugli",
 		children: e
 	});
 }
-var W = {
-	Root: R,
-	Toolbar: z,
-	Body: B,
-	Content: V,
-	Header: H,
-	Aside: U
+var J = {
+	Root: H,
+	Toolbar: U,
+	Body: W,
+	Content: G,
+	Header: K,
+	Aside: q
 };
 // packages/layout/src/resizable.tsx
-function G({ orientation: e = "horizontal", initialSizes: t, onSizesChange: n, disabled: r, ref: i, ...o }) {
+function Y({ orientation: e = "horizontal", initialSizes: t, onSizesChange: n, disabled: r, ref: i, ...o }) {
 	return /* @__PURE__ */ p(v, {
 		orientation: e,
 		defaultLayout: t,
@@ -428,7 +470,7 @@ function G({ orientation: e = "horizontal", initialSizes: t, onSizesChange: n, d
 		...a({ className: "xeuugli x2lwn1j xh8yej3 x5yr21d" }, o)
 	});
 }
-function K({ id: e, initialSizePercent: t, minimumSizePercent: n = 10, maximumSizePercent: r = 100, collapsible: i = !1, ref: o, ...s }) {
+function X({ id: e, initialSizePercent: t, minimumSizePercent: n = 10, maximumSizePercent: r = 100, collapsible: i = !1, ref: o, ...s }) {
 	return /* @__PURE__ */ p(y, {
 		id: e,
 		defaultSize: t === void 0 ? void 0 : `${t}%`,
@@ -439,15 +481,15 @@ function K({ id: e, initialSizePercent: t, minimumSizePercent: n = 10, maximumSi
 		...a({ className: "xeuugli x2lwn1j xysyzu8" }, s)
 	});
 }
-function q({ ref: e, ...t }) {
+function Z({ ref: e, ...t }) {
 	return /* @__PURE__ */ p(b, {
 		elementRef: e,
 		...a({ className: "x1fa40ue x1i1rx1s xgc0pbm xir5lan xfaai28 x1rbdpqn x8wp5i9 x13qnu6 x9v5kkp x19rmrnh x13iak60" }, t)
 	});
 }
-var J = {
-	Root: G,
-	Pane: K,
-	Handle: q
+var Q = {
+	Root: Y,
+	Pane: X,
+	Handle: Z
 };
-export { N as AppShell, P as DetailPage, E as Navigation, D as NavigationItem, O as NavigationLink, I as PageToolbar, W as RecordPage, J as Resizable, A as SidebarFooter, k as SidebarLabel, L as ToolbarAction };
+export { N as AppShell, P as DetailPage, F as FocusPage, E as Navigation, D as NavigationItem, O as NavigationLink, B as PageToolbar, J as RecordPage, Q as Resizable, A as SidebarFooter, k as SidebarLabel, V as ToolbarAction, I as Workbench, R as WorkbenchFooter, L as WorkbenchScroll };

package/dist/navigation/commands.js

@@ -1,4 +1,4 @@
-import { l as e } from "../src-DjvJJoaw.js";
+import { l as e } from "../src-DjTM64tN.js";
 import { s as t } from "../src-CfDf8TY8.js";
 import { n } from "../navigation-yxK3iQXo.js";
 import "@stylexjs/stylex";

package/dist/packages/ai/src/prompt-input.d.ts

@@ -14,6 +14,7 @@ export type PromptInputProps = {
     readonly submitLabel?: string;
     readonly pendingLabel?: string;
     readonly enterBehavior?: 'newline' | 'submit';
+    readonly compact?: boolean;
     readonly description?: ReactNode;
     readonly error?: string | undefined;
     readonly controls?: ReactNode;
@@ -22,4 +23,4 @@ export type PromptInputProps = {
     readonly stopPending?: boolean;
     readonly stopLabel?: string;
 };
-export declare function PromptInput({ label, value, onValueChange, onSubmit, name, placeholder, maxLength, required, pending, disabled, submitDisabled, submitLabel, pendingLabel, enterBehavior, description, error, controls, attachments, onStop, stopPending, stopLabel, }: PromptInputProps): ReactNode;
+export declare function PromptInput({ label, value, onValueChange, onSubmit, name, placeholder, maxLength, required, pending, disabled, submitDisabled, submitLabel, pendingLabel, enterBehavior, compact, description, error, controls, attachments, onStop, stopPending, stopLabel, }: PromptInputProps): ReactNode;

package/dist/packages/collections/src/data-table.d.ts

@@ -54,7 +54,8 @@ export type DataTableProps<Row> = SortProperties<Row> & OptionalSelection<Row> &
     readonly caption: string;
     readonly empty: ReactNode;
     readonly rowAction?: DataTableRowAction<Row>;
-    readonly activeRowId?: string;
+    readonly activeRowId?: string | undefined;
+    readonly focusRowId?: string | undefined;
     readonly hideCaption?: boolean;
     readonly hideHeaders?: boolean;
     readonly window?: DataTableWindow;
@@ -62,5 +63,5 @@ export type DataTableProps<Row> = SortProperties<Row> & OptionalSelection<Row> &
     readonly onEndReached?: () => void;
     readonly footer?: ReactNode;
 };
-export declare function DataTable<Row extends object>({ rows, columns, getRowId, caption, empty, sort, onSortChange, selectedIds, onSelectionChange, selectionLabel, rowAction, activeRowId, hideCaption, hideHeaders, window, endContent, onEndReached, footer, }: DataTableProps<Row>): ReactNode;
+export declare function DataTable<Row extends object>({ rows, columns, getRowId, caption, empty, sort, onSortChange, selectedIds, onSelectionChange, selectionLabel, rowAction, activeRowId, focusRowId, hideCaption, hideHeaders, window, endContent, onEndReached, footer, }: DataTableProps<Row>): ReactNode;
 export {};

package/dist/packages/core/src/text.d.ts

@@ -8,7 +8,9 @@ type TextProps = ComponentProps<'span'> & {
     readonly tone?: TextTone;
     readonly xstyle?: PlacementStyle;
 };
-type HeadingProps = ComponentProps<'h1'>;
+type HeadingProps = ComponentProps<'h1'> & {
+    readonly compact?: boolean;
+};
 type SubheadingProps = ComponentProps<'h2'>;
 type MutedProps = ComponentProps<'p'>;
 type IdentifierProps = ComponentProps<'span'>;
@@ -20,7 +22,7 @@ type StatusProps = ComponentProps<'span'> & {
     readonly tone?: StatusTone;
 };
 export declare function Text({ variant, tone, xstyle, ...props }: TextProps): ReactNode;
-export declare function Heading(props: HeadingProps): ReactNode;
+export declare function Heading({ compact, ...props }: HeadingProps): ReactNode;
 export declare function Subheading(props: SubheadingProps): ReactNode;
 export declare function Muted(props: MutedProps): ReactNode;
 export declare function Identifier(props: IdentifierProps): ReactNode;

package/dist/packages/forms/src/field-styles.d.ts

@@ -63,6 +63,10 @@ export declare const fieldStyles: Readonly<{
         readonly resize: stylex.StyleXClassNameFor<"resize", "vertical">;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
     }>;
+    readonly compactTextarea: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 80>;
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "30dvh">;
+    }>;
 }>;
 export declare const inputSizeStyles: Readonly<{
     readonly sm: Readonly<{

package/dist/packages/forms/src/forms.d.ts

@@ -17,6 +17,7 @@ export type InputProps = Omit<BaseInputProps, 'value' | 'defaultValue' | 'onChan
 type NativeTextareaProps = ComponentProps<'textarea'>;
 type TextareaProps = Omit<NativeTextareaProps, 'value' | 'defaultValue' | 'onChange' | 'readOnly'> & TextValueProperties<NonNullable<NativeTextareaProps['value']>, NonNullable<NativeTextareaProps['onChange']>, NonNullable<BaseInputProps['onValueChange']>> & {
     readonly xstyle?: PlacementStyle;
+    readonly compact?: boolean;
 };
 declare function FieldRoot({ className, style, xstyle, ...props }: FieldRootProps): ReactNode;
 declare function FieldLabel({ className, style, ...props }: FieldLabelProps): ReactNode;
@@ -29,5 +30,5 @@ export declare const Field: {
     Error: typeof FieldError;
 };
 export declare function Input({ className, style, xstyle, size, ...props }: InputProps): ReactNode;
-export declare function Textarea({ value, defaultValue, onValueChange, name, disabled, readOnly, required, className, style, xstyle, ...props }: TextareaProps): ReactNode;
+export declare function Textarea({ compact, value, defaultValue, onValueChange, name, disabled, readOnly, required, className, style, xstyle, ...props }: TextareaProps): ReactNode;
 export {};

package/dist/packages/layout/src/focus-page.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare function FocusPage({ children }: {
+    readonly children: ReactNode;
+}): ReactNode;

package/dist/packages/layout/src/index.d.ts

@@ -1,5 +1,7 @@
 export { AppShell } from './app-shell.tsx';
 export { DetailPage } from './detail-page.tsx';
+export { FocusPage } from './focus-page.tsx';
+export { Workbench, WorkbenchScroll, WorkbenchFooter } from './workbench.tsx';
 export { PageToolbar, ToolbarAction } from './page-toolbar.tsx';
 export type { RecordPageRootProps, RecordPageToolbarProps, RecordPageBodyProps, RecordPageHeaderProps, RecordPageContentProps, RecordPageAsideProps, } from './record-page.tsx';
 export { RecordPage } from './record-page.tsx';

package/dist/packages/layout/src/workbench.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export declare function Workbench({ header, children, inspector, }: {
+    readonly header: ReactNode;
+    readonly children: ReactNode;
+    readonly inspector?: ReactNode;
+}): ReactNode;
+export declare function WorkbenchScroll({ children }: {
+    readonly children: ReactNode;
+}): ReactNode;
+export declare function WorkbenchFooter({ children }: {
+    readonly children: ReactNode;
+}): ReactNode;

package/dist/{pierre-tree-C-eebLcZ.js → pierre-tree-DVybsnm4.js}

@@ -1,5 +1,5 @@
-import { c as e } from "./src-DuTmAQp5.js";
-import { l as t } from "./src-DjvJJoaw.js";
+import { c as e } from "./src-BkCsvZGi.js";
+import { l as t } from "./src-DjTM64tN.js";
 import { conditions as n } from "./tokens.js";
 import { r } from "./pierre-theme-BpESNIsV.js";
 import * as i from "@stylexjs/stylex";

package/dist/{src-Daf4PUD6.js → src-B_DCatpY.js}

@@ -1,4 +1,4 @@
-import { i as e, s as t } from "./src-DuTmAQp5.js";
+import { i as e, s as t } from "./src-BkCsvZGi.js";
 import { t as n } from "./accessibility-C-aIZ1Yx.js";
 import { n as r, t as i } from "./popup-styles-CvtZDE2t.js";
 import { t as a } from "./style-composition-uYlczSsB.js";

package/dist/{src-DuTmAQp5.js → src-BkCsvZGi.js}

@@ -633,8 +633,11 @@ var X = {
 function ae({ variant: e = "body", tone: t = "ink", xstyle: n, ...a }) {
 	return /* @__PURE__ */ l("span", { ...r(i.props(X.text, Z[e], Q[t], n), a) });
 }
-function oe(e) {
-	return /* @__PURE__ */ l("h1", { ...r({ className: "x1ghz6dp x1hz01jw xvmahel xc0f4dz x1sfszr9 xzju6ct x197eox2 x1s688f x1wjjqco xbixft xj0a0fe" }, e) });
+function oe({ compact: e = !1, ...t }) {
+	return /* @__PURE__ */ l("h1", { ...r({
+		0: { className: "x1ghz6dp x1hz01jw xvmahel xc0f4dz x1sfszr9 xzju6ct x197eox2 x1s688f x1wjjqco xbixft xj0a0fe" },
+		1: { className: "x1ghz6dp x1hz01jw xvmahel x1i2cqwi x4fansv x1s688f xbixft" }
+	}[!!e | 0], t) });
 }
 function $(e) {
 	return /* @__PURE__ */ l("h2", { ...r({ className: "x1ghz6dp x1hz01jw xvmahel x1i2cqwi x4fansv x1s688f xbixft" }, e) });

package/dist/{src-DjvJJoaw.js → src-DjTM64tN.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./style-composition-uYlczSsB.js";
-import { i as t, s as n } from "./src-DuTmAQp5.js";
+import { i as t, s as n } from "./src-BkCsvZGi.js";
 import { mergeProps as r } from "@base-ui/react/merge-props";
 import * as i from "@stylexjs/stylex";
 import { useId as a } from "react";
@@ -80,6 +80,11 @@ var S = {
 		kHenm0: "x288g5",
 		kLWn49: "x1gj8gu9",
 		$$css: !0
+	},
+	compactTextarea: {
+		kAzted: "xseoqlg",
+		kskxy: "x1y3glee",
+		$$css: !0
 	}
 }, C = {
 	sm: {
@@ -738,20 +743,20 @@ function Ce({ className: t, style: n, xstyle: r, size: a = "md", ...s }) {
 		})
 	});
 }
-function we({ value: t, defaultValue: n, onValueChange: r, name: a, disabled: s, readOnly: c, required: l, className: u, style: d, xstyle: f, ...p }) {
+function we({ compact: t = !1, value: n, defaultValue: r, onValueChange: a, name: s, disabled: c, readOnly: l, required: u, className: d, style: f, xstyle: p, ...m }) {
 	return /* @__PURE__ */ o(g.Control, {
-		value: t,
-		defaultValue: n,
-		onValueChange: r,
-		name: a,
-		disabled: s,
-		readOnly: c,
-		required: l,
-		render: /* @__PURE__ */ o("textarea", { ...p }),
+		value: n,
+		defaultValue: r,
+		onValueChange: a,
+		name: s,
+		disabled: c,
+		readOnly: l,
+		required: u,
+		render: /* @__PURE__ */ o("textarea", { ...m }),
 		...e({
-			className: u,
-			style: d,
-			styles: i.props(S.input, S.textarea, f)
+			className: d,
+			style: f,
+			styles: i.props(S.input, S.textarea, t && S.compactTextarea, p)
 		})
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mechane-ai/elements",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Elements by Mechane — React components for applications, AI interfaces, and analytical graphics",
   "license": "Apache-2.0",
   "repository": {