@mechane-ai/elements 0.10.0 → 0.11.0

package/dist/content.js

@@ -1,7 +1,7 @@
-import { C as e, E as t, _ as n, g as r } from "./src-sU9b0oZW.js";
+import { C as e, E as t, _ as n, g as r } from "./src-D05isEh_.js";
 import { t as i } from "./viewer-styles-CpHqp5Qv.js";
-import { t as a } from "./code-block-D77maJBB.js";
-import { t as o } from "./content-link-BpSZeTNK.js";
+import { t as a } from "./code-block-B7xzM3tD.js";
+import { t as o } from "./content-link-CatGOrbo.js";
 import * as s from "@stylexjs/stylex";
 import { useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";

package/dist/elements.css

@@ -83,30 +83,30 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
   }
 
   :root, .x6mvf7n {
-    --xervi70: #993029;
-    --x1scgmo8: #994a29;
-    --xu5wby9: #992949;
-    --x1lp5jki: #992968;
-    --x1y31bxi: #992990;
-    --xzwo5h9: #7f2999;
-    --xt4yqhf: #612999;
-    --x15jwn1l: #432999;
-    --x1mq9snr: #292999;
-    --x1uo55dg: #294799;
-    --xiuxd98: #296199;
-    --x1ge60hr: #277693;
-    --x30ad9v: #22797f;
-    --xjm3f38: #217b72;
-    --xclnw48: #217d63;
-    --x1deadh4: #217d51;
-    --xh5lcut: #227f3f;
-    --xhi6zkb: #227f2a;
-    --xwl956u: #327d21;
-    --xibm5mh: #4c7b21;
-    --xyheekc: #64751f;
-    --x1d3dkqv: #7b7021;
-    --xh8xsxd: #8d6725;
-    --x9u8ejr: #995829;
+    --xervi70: #e3291c;
+    --x1scgmo8: #e1571c;
+    --xu5wby9: #e31c54;
+    --x1lp5jki: #e31c8d;
+    --x1y31bxi: #e31cd2;
+    --xzwo5h9: #b51ce3;
+    --xt4yqhf: #801ce3;
+    --x15jwn1l: #4a1ce3;
+    --x1mq9snr: #1c1ce3;
+    --x1uo55dg: #1c51e3;
+    --xiuxd98: #1c80e3;
+    --x1ge60hr: #178db8;
+    --x30ad9v: #13919a;
+    --xjm3f38: #129487;
+    --xclnw48: #139671;
+    --x1deadh4: #139858;
+    --xh5lcut: #13983d;
+    --xhi6zkb: #13981e;
+    --xwl956u: #2b9813;
+    --xibm5mh: #519412;
+    --xyheekc: #748d11;
+    --x1d3dkqv: #948412;
+    --xh8xsxd: #b17816;
+    --x9u8ejr: #d1661a;
   }
 
   :root, .x1e8hs47 {
@@ -189,30 +189,30 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
   }
 
   .x1on89sr.x1on89sr, .x1on89sr.x1on89sr:root {
-    --xervi70: #e7938d;
-    --x1uo55dg: #8da5e7;
-    --xiuxd98: #8dbae7;
-    --x1ge60hr: #8dcfe7;
-    --x30ad9v: #8de1e7;
-    --xjm3f38: #8de7de;
-    --xclnw48: #8de7ce;
-    --x1deadh4: #8de7bc;
-    --xh5lcut: #8de7aa;
-    --xhi6zkb: #8de795;
-    --xwl956u: #9ee78d;
-    --x1scgmo8: #e7a88d;
-    --xibm5mh: #b9e78d;
-    --xyheekc: #d5e78d;
-    --x1d3dkqv: #e7dc8d;
-    --xh8xsxd: #e7c68d;
-    --x9u8ejr: #e7b38d;
-    --xu5wby9: #e78da7;
-    --x1lp5jki: #e78dc0;
-    --x1y31bxi: #e78ddf;
-    --xzwo5h9: #d28de7;
-    --xt4yqhf: #ba8de7;
-    --x15jwn1l: #a28de7;
-    --x1mq9snr: #8d8de7;
+    --xervi70: #f07d75;
+    --x1uo55dg: #7596f0;
+    --xiuxd98: #75b3f0;
+    --x1ge60hr: #75cff0;
+    --x30ad9v: #75e8f0;
+    --xjm3f38: #75f0e3;
+    --xclnw48: #75f0cd;
+    --x1deadh4: #75f0b5;
+    --xh5lcut: #75f09c;
+    --xhi6zkb: #75f080;
+    --xwl956u: #8cf075;
+    --x1scgmo8: #f09a75;
+    --xibm5mh: #b0f075;
+    --xyheekc: #d7f075;
+    --x1d3dkqv: #f0e175;
+    --xh8xsxd: #f0c375;
+    --x9u8ejr: #f0a875;
+    --xu5wby9: #f07598;
+    --x1lp5jki: #f075bb;
+    --x1y31bxi: #f075e6;
+    --xzwo5h9: #d375f0;
+    --xt4yqhf: #b375f0;
+    --x15jwn1l: #9275f0;
+    --x1mq9snr: #7575f0;
   }
 
   .x8g9w8d.x8g9w8d, .x8g9w8d.x8g9w8d:root {
@@ -940,6 +940,10 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     column-gap: var(--x1qq5i99);
   }
 
+  .x9vvk8s {
+    container-name: inspector;
+  }
+
   .x14ut1dr {
     container-name: toolbar;
   }
@@ -1132,6 +1136,10 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     grid-template-columns: 16px minmax(0, 1fr);
   }
 
+  .x4ruv2j {
+    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
+  }
+
   .xezdspq {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
   }
@@ -1156,8 +1164,8 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     grid-template-columns: minmax(110px, 1fr) minmax(120px, 2fr) minmax(110px, 1fr);
   }
 
-  .x135t7h {
-    grid-template-columns: repeat(auto-fill,minmax(var(--x1hdxzrk),1fr));
+  .xf46oua {
+    grid-template-columns: repeat(auto-fill,minmax(var(--xymjgzc),1fr));
   }
 
   .xpuu00s {
@@ -1492,6 +1500,10 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     text-overflow: ellipsis;
   }
 
+  .xn80e1m {
+    text-transform: capitalize;
+  }
+
   .xda060z {
     text-underline-offset: 3px;
   }
@@ -1776,6 +1788,10 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     outline-offset: 2px;
   }
 
+  .x12ijfkc:focus-visible {
+    outline-offset: 4px;
+  }
+
   .x17c0hmk:focus-visible {
     outline-offset: calc(-1 * var(--xxx3t85));
   }
@@ -1916,6 +1932,16 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     text-decoration-line: underline;
   }
 
+  @container inspector (width <= 860px) {
+    .xdctr63.xdctr63 {
+      border-inline-start-width: 0;
+    }
+
+    .x1yamub6.x1yamub6 {
+      display: flex;
+    }
+  }
+
   @container (width <= 420px) {
     .x1mf2q18.x1mf2q18 {
       display: none;
@@ -1933,6 +1959,20 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
       grid-template-columns: minmax(0, 1fr);
     }
   }
+
+  @container inspector (width <= 860px) {
+    .x1y7acmc.x1y7acmc {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .xhuqrux.xhuqrux {
+      padding-inline-start: 0;
+    }
+
+    .x7cfggw.x7cfggw {
+      position: static;
+    }
+  }
 }
 
 @layer priority5 {
@@ -2008,6 +2048,10 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     border-top-style: solid;
   }
 
+  .x972fbf {
+    border-top-width: 0;
+  }
+
   .x178xt8z {
     border-top-width: 1px;
   }
@@ -2164,6 +2208,10 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     margin-bottom: var(--x1drqizm);
   }
 
+  .x1xxlxpq {
+    margin-bottom: var(--x1qq5i99);
+  }
+
   .x1jfksii {
     margin-bottom: var(--xxhyxt);
   }
@@ -2448,6 +2496,10 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     padding-bottom: var(--xxhyxt);
   }
 
+  .xexx8yu {
+    padding-top: 0;
+  }
+
   .x14y0u4g {
     padding-top: var(--x13hs181);
   }
@@ -2468,6 +2520,10 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     right: 0;
   }
 
+  .x14ijc3v {
+    scroll-margin-top: var(--x1qq5i99);
+  }
+
   .x13vifvy {
     top: 0;
   }
@@ -2484,6 +2540,10 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
     top: var(--x1drqizm);
   }
 
+  .xqfmuo8 {
+    top: var(--x1qq5i99);
+  }
+
   .x1m7q2ru {
     top: var(--x1xijsos);
   }
@@ -2679,6 +2739,16 @@ html[dir=ltr],[data-sonner-toaster][dir=ltr]{--toast-icon-margin-start:-3px;--to
   .x15x95ik:empty {
     min-height: 0;
   }
+
+  @container inspector (width <= 860px) {
+    .x1mg79u0.x1mg79u0 {
+      border-top-width: 1px;
+    }
+
+    .xdz7uhd.xdz7uhd {
+      padding-top: var(--x1qq5i99);
+    }
+  }
 }
 
 @layer priority6 {

package/dist/feedback.js

@@ -1 +1 @@
-export { t as AsyncRegion, n as ContentReveal, d as EmptyState, s as Loading, a as Meter, f as Notice, o as Progress, c as Skeleton, l as SkeletonText, u as Spinner, r as Toaster, i as toast } from "./src-CBspCKfO.js";
+export { t as AsyncRegion, n as ContentReveal, d as EmptyState, s as Loading, a as Meter, f as Notice, o as Progress, c as Skeleton, l as SkeletonText, u as Spinner, r as Toaster, i as toast } from "./src-DXsGTJgv.js";

package/dist/forms/dates.js

@@ -1,4 +1,4 @@
-import { C as e, E as t } from "../src-sU9b0oZW.js";
+import { C as e, E as t } from "../src-D05isEh_.js";
 import { r as n } from "../src-Cs0dRc4X.js";
 import "@stylexjs/stylex";
 import { useState as r } from "react";

package/dist/forms.js

@@ -1 +1 @@
-export { g as AgentAvatarPicker, r as Checkbox, _ as Combobox, c as Field, d as Fieldset, f as FilePicker, l as Input, p as InputGroup, m as NumberField, i as RadioGroup, s as Select, n as SettingsRow, t as SettingsSection, h as Slider, a as Switch, u as Textarea, o as ToggleGroup } from "./src-Be7NLG8c.js";
+export { g as AgentAvatarPicker, r as Checkbox, _ as Combobox, c as Field, d as Fieldset, f as FilePicker, l as Input, p as InputGroup, m as NumberField, i as RadioGroup, s as Select, n as SettingsRow, t as SettingsSection, h as Slider, a as Switch, u as Textarea, o as ToggleGroup } from "./src-C_heP5kL.js";

package/dist/index.js

@@ -1 +1 @@
-export { h as Accordion, v as AgentAvatar, S as Avatar, t as Badge, C as Button, g as Collapsible, l as Columns, _ as CopyValue, u as Divider, n as Heading, w as IconButton, T as IconLink, r as Identifier, i as Muted, d as Panel, a as Prose, f as Row, p as Stack, o as Status, s as Subheading, m as SurfaceLink, c as Text, E as TextButton, D as TextLink, y as agentAppearance, b as agentAvatarColors, x as agentAvatarShapes } from "./src-sU9b0oZW.js";
+export { h as Accordion, v as AgentAvatar, S as Avatar, t as Badge, C as Button, g as Collapsible, l as Columns, _ as CopyValue, u as Divider, n as Heading, w as IconButton, T as IconLink, r as Identifier, i as Muted, d as Panel, a as Prose, f as Row, p as Stack, o as Status, s as Subheading, m as SurfaceLink, c as Text, E as TextButton, D as TextLink, y as agentAppearance, b as agentAvatarColors, x as agentAvatarShapes } from "./src-D05isEh_.js";

package/dist/layout.js

@@ -1,5 +1,5 @@
 import { a as e } from "./src-Cs0dRc4X.js";
-import { C as t, i as n, n as r, w as i } from "./src-sU9b0oZW.js";
+import { C as t, i as n, n as r, w as i } from "./src-D05isEh_.js";
 import { mergeProps as a } from "@base-ui/react/merge-props";
 import * as o from "@stylexjs/stylex";
 import { createContext as s, useContext as c, useEffect as l, useId as u, useRef as d, useState as f } from "react";

package/dist/navigation/commands.js

@@ -1,4 +1,4 @@
-import { l as e } from "../src-Be7NLG8c.js";
+import { l as e } from "../src-C_heP5kL.js";
 import { s as t } from "../src-Cs0dRc4X.js";
 import { n } from "../navigation-D2_sGy3C.js";
 import "@stylexjs/stylex";

package/dist/packages/ai/src/conversation.d.ts

@@ -1,8 +1,9 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 export type ConversationRootProps = {
     readonly children: ReactNode;
     readonly initialPosition?: 'start' | 'end';
     readonly follow?: boolean;
+    readonly viewportRef?: RefObject<HTMLDivElement | null> | undefined;
 };
 export type ConversationViewportProps = {
     readonly label: string;
@@ -20,16 +21,27 @@ export type ConversationItemProps = {
 export type ConversationJumpProps = {
     readonly label?: string;
 };
-declare function ConversationRoot({ children, initialPosition, follow }: ConversationRootProps): ReactNode;
+export type ConversationControlsProps = {
+    readonly children: ReactNode;
+};
+export type ConversationLatestButtonProps = {
+    readonly label: string;
+    readonly onActivate?: () => void;
+};
+declare function ConversationRoot({ children, initialPosition, follow, viewportRef, }: ConversationRootProps): ReactNode;
 declare function ConversationViewport({ label, children, scrollRestorationId }: ConversationViewportProps): ReactNode;
 declare function ConversationContent({ children, streaming }: ConversationContentProps): ReactNode;
 declare function ConversationItem({ messageId, children }: ConversationItemProps): ReactNode;
+declare function ConversationControls({ children }: ConversationControlsProps): ReactNode;
 declare function ConversationJumpToLatest({ label }: ConversationJumpProps): ReactNode;
+declare function ConversationLatestButton({ label, onActivate }: ConversationLatestButtonProps): ReactNode;
 export declare const Conversation: {
     Root: typeof ConversationRoot;
     Viewport: typeof ConversationViewport;
     Content: typeof ConversationContent;
     Item: typeof ConversationItem;
+    Controls: typeof ConversationControls;
+    LatestButton: typeof ConversationLatestButton;
     JumpToLatest: typeof ConversationJumpToLatest;
 };
 export {};

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

@@ -1,6 +1,6 @@
 export type { ApprovalProps } from './approval.tsx';
 export { Approval } from './approval.tsx';
-export type { ConversationRootProps, ConversationViewportProps, ConversationContentProps, ConversationItemProps, ConversationJumpProps, } from './conversation.tsx';
+export type { ConversationRootProps, ConversationViewportProps, ConversationContentProps, ConversationItemProps, ConversationJumpProps, ConversationControlsProps, ConversationLatestButtonProps, } from './conversation.tsx';
 export { Conversation } from './conversation.tsx';
 export type { MessageKind, MessageProps, MessageAttachmentProps } from './message.tsx';
 export { Message, MessageAttachment } from './message.tsx';

package/dist/packages/charts/src/timeline/waterfall.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, Ref } from 'react';
 type WaterfallGeometry = {
     readonly kind: 'interval';
     readonly start: number;
@@ -27,8 +27,9 @@ type WaterfallProps = {
     readonly summaryLabel: string;
     readonly emptyLabel: string;
     readonly selectedId: string | undefined;
+    readonly selectedRef?: Ref<HTMLButtonElement> | undefined;
     readonly onSelect: (id: string) => void;
     readonly formatOffset: (offset: number) => string;
 };
-export declare function Waterfall({ items, start, end, label, rowLabel, summaryLabel, emptyLabel, selectedId, onSelect, formatOffset, }: WaterfallProps): ReactNode;
+export declare function Waterfall({ items, start, end, label, rowLabel, summaryLabel, emptyLabel, selectedId, selectedRef, onSelect, formatOffset, }: WaterfallProps): ReactNode;
 export {};

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

@@ -4,6 +4,7 @@ export type { DataTableColumn, DataTableSort, DataTableWindow, DataTableProps, D
 export { DataTable, DataTableText } from './data-table.tsx';
 export type { CollectionEndProps, CollectionScrollProps } from './collection-scroll.tsx';
 export { CollectionEnd, CollectionScroll } from './collection-scroll.tsx';
+export type { InspectorProps } from './inspector.tsx';
 export { Inspector, Details } from './inspector.tsx';
 export { ListFooter } from './list-footer.tsx';
 export { MetricGrid, Metric } from './metrics.tsx';

package/dist/packages/collections/src/inspector.d.ts

@@ -1,8 +1,11 @@
-import type { ComponentProps, ReactNode } from 'react';
-type InspectorProps = ComponentProps<'div'> & {
+import type { ComponentProps, ReactNode, RefObject } from 'react';
+export type InspectorProps = ComponentProps<'div'> & {
     readonly master: ReactNode;
     readonly detail: ReactNode;
     readonly label: string;
+    readonly masterLabel: string;
+    readonly revealKey?: string | undefined;
+    readonly returnFocusRef?: RefObject<HTMLElement | null>;
 };
 type DetailItem = {
     readonly label: string;
@@ -11,6 +14,6 @@ type DetailItem = {
 type DetailsProps = ComponentProps<'dl'> & {
     readonly items: ReadonlyArray<DetailItem>;
 };
-export declare function Inspector({ master, detail, label, ...props }: InspectorProps): ReactNode;
+export declare function Inspector({ master, detail, label, masterLabel, revealKey, returnFocusRef, ...props }: InspectorProps): ReactNode;
 export declare function Details({ items, ...props }: DetailsProps): ReactNode;
 export {};

package/dist/packages/core/src/agent-avatar-glyphs.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
 export declare const seededAgentAvatarShapes: readonly ["spark", "facet", "orbit", "loop", "clover", "petal", "wheel", "compass", "grid", "steps", "chevron", "wave", "ripple", "arch", "bridge", "peak", "zigzag", "helix", "kite", "cube", "prism", "frame", "brackets", "diamond", "hexagon", "signal", "crest", "bolt", "link", "split", "aster", "portal"];
-export declare const agentAvatarShapes: readonly ["spark", "facet", "orbit", "loop", "clover", "petal", "wheel", "compass", "grid", "steps", "chevron", "wave", "ripple", "arch", "bridge", "peak", "zigzag", "helix", "kite", "cube", "prism", "frame", "brackets", "diamond", "hexagon", "signal", "crest", "bolt", "link", "split", "aster", "portal"];
+export declare const agentAvatarShapes: readonly ["spark", "facet", "orbit", "loop", "clover", "petal", "wheel", "compass", "grid", "steps", "chevron", "wave", "ripple", "arch", "bridge", "peak", "zigzag", "helix", "kite", "cube", "prism", "frame", "brackets", "diamond", "hexagon", "signal", "crest", "bolt", "link", "split", "aster", "portal", "rosette", "blossom", "pinwheel", "lantern", "lattice", "mosaic", "dahlia", "lotus", "mandala", "braid", "gem", "eclipse", "gyre", "crossweave", "tessera", "triad"];
 export type AgentAvatarShape = (typeof agentAvatarShapes)[number];
 export declare const agentAvatarGlyphs: Readonly<Record<AgentAvatarShape, ReactNode>>;

package/dist/{pierre-tree-BFxEuxwb.js → pierre-tree-D47uA7lb.js}

@@ -1,5 +1,5 @@
-import { c as e } from "./src-sU9b0oZW.js";
-import { l as t } from "./src-Be7NLG8c.js";
+import { c as e } from "./src-D05isEh_.js";
+import { l as t } from "./src-C_heP5kL.js";
 import { conditions as n } from "./tokens.js";
 import { r } from "./pierre-theme-D9hnHv3Z.js";
 import * as i from "@stylexjs/stylex";

package/dist/{src-Be7NLG8c.js → src-C_heP5kL.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./style-composition-uYlczSsB.js";
-import { b as t, i as n, s as r, v as i, x as a } from "./src-sU9b0oZW.js";
+import { b as t, i as n, s as r, v as i, x as a } from "./src-D05isEh_.js";
 import { mergeProps as o } from "@base-ui/react/merge-props";
 import * as s from "@stylexjs/stylex";
 import { useId as c } from "react";
@@ -471,65 +471,87 @@ function J({ value: e, onValueChange: n, disabled: r = !1 }) {
 	let o = c(), s = c();
 	return /* @__PURE__ */ u("div", {
 		className: "x78zum5 xdt5ytf xaml1ju x1hz01jw xj57cvi xeuugli x193iq5w x16m5f1z",
-		children: [/* @__PURE__ */ u("div", {
-			className: "x78zum5 xdt5ytf x1hnptsi xeuugli",
-			children: [/* @__PURE__ */ l("span", {
-				id: o,
-				className: "x153jb6y xy8obcc xas2l8k xk4h15q",
-				children: "Shape"
-			}), /* @__PURE__ */ l(g, {
-				"aria-labelledby": o,
-				value: e.shape,
-				onValueChange: (t) => n({
-					...e,
-					shape: t
-				}),
-				disabled: r,
-				className: "xrvj5dj x135t7h x11iowk6 xunmzkg",
-				children: a.map((t) => /* @__PURE__ */ l(h.Root, {
-					value: t,
-					"aria-label": t,
-					title: t,
-					className: "x3nfvp2 x6s0dn4 xl56j7k x9f619 x1udcv4t xidce53 xaeotn9 xwu7q15 x1s01oa9 xmkeg23 x1y0btm7 x9r1u3d x1ok0vyi xjbqb8w x1ypdohk x1bn55bi xgm7wsc x19fjeqo x1480za7 x13qnu6 x9v5kkp x19rmrnh x7s97pk x1m8qfh3 xwj21n9",
-					children: /* @__PURE__ */ l(i, {
-						seed: t,
-						appearance: {
-							...e,
-							shape: t
-						}
-					})
-				}, t))
-			})]
-		}), /* @__PURE__ */ u("div", {
-			className: "x78zum5 xdt5ytf x1hnptsi xeuugli",
-			children: [/* @__PURE__ */ l("span", {
-				id: s,
-				className: "x153jb6y xy8obcc xas2l8k xk4h15q",
-				children: "Color"
-			}), /* @__PURE__ */ l(g, {
-				"aria-labelledby": s,
-				value: e.color,
-				onValueChange: (t) => n({
-					...e,
-					color: t
-				}),
-				disabled: r,
-				className: "xrvj5dj x135t7h x11iowk6 xunmzkg",
-				children: t.map((t) => /* @__PURE__ */ l(h.Root, {
-					value: t,
-					"aria-label": t,
-					title: t,
-					className: "x3nfvp2 x6s0dn4 xl56j7k x9f619 x1udcv4t xidce53 xaeotn9 xwu7q15 x1s01oa9 xmkeg23 x1y0btm7 x9r1u3d x1ok0vyi xjbqb8w x1ypdohk x1bn55bi xgm7wsc x19fjeqo x1480za7 x13qnu6 x9v5kkp x19rmrnh x7s97pk x1m8qfh3 xwj21n9",
-					children: /* @__PURE__ */ l(i, {
-						seed: t,
-						appearance: {
-							...e,
-							color: t
-						}
-					})
-				}, t))
-			})]
-		})]
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "x78zum5 x6s0dn4 x1n8ia3y xeuugli",
+				children: [/* @__PURE__ */ l(i, {
+					seed: "preview",
+					appearance: e,
+					size: "lg"
+				}), /* @__PURE__ */ u("div", {
+					className: "x78zum5 xdt5ytf xeuugli",
+					children: [/* @__PURE__ */ l("span", {
+						className: "xbixft xtqrqnz xk4h15q x1778rvt xn80e1m",
+						children: e.shape
+					}), /* @__PURE__ */ l("span", {
+						className: "x153jb6y xy8obcc xas2l8k xn80e1m",
+						children: e.color
+					})]
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "x78zum5 xdt5ytf x1hnptsi xeuugli",
+				children: [/* @__PURE__ */ l("span", {
+					id: o,
+					className: "x153jb6y xy8obcc xas2l8k xk4h15q",
+					children: "Shape"
+				}), /* @__PURE__ */ l(g, {
+					"aria-labelledby": o,
+					value: e.shape,
+					onValueChange: (t) => n({
+						...e,
+						shape: t
+					}),
+					disabled: r,
+					className: "xrvj5dj xf46oua x11iowk6 xunmzkg",
+					children: a.map((t) => /* @__PURE__ */ l(h.Root, {
+						value: t,
+						"aria-label": t,
+						title: t,
+						className: "x3nfvp2 x6s0dn4 xl56j7k x9f619 xelkyza xidce53 x1uey4wk xwu7q15 x1s01oa9 xmkeg23 x1y0btm7 x9r1u3d xy32g2j xjbqb8w x1ypdohk x1bn55bi xgm7wsc x19fjeqo x1480za7 x13qnu6 x9v5kkp x19rmrnh x7s97pk x1m8qfh3 xwj21n9",
+						children: /* @__PURE__ */ l(i, {
+							seed: t,
+							appearance: {
+								...e,
+								shape: t
+							},
+							size: "md"
+						})
+					}, t))
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "x78zum5 xdt5ytf x1hnptsi xeuugli",
+				children: [/* @__PURE__ */ l("span", {
+					id: s,
+					className: "x153jb6y xy8obcc xas2l8k xk4h15q",
+					children: "Color"
+				}), /* @__PURE__ */ l(g, {
+					"aria-labelledby": s,
+					value: e.color,
+					onValueChange: (t) => n({
+						...e,
+						color: t
+					}),
+					disabled: r,
+					className: "xrvj5dj xf46oua x11iowk6 xunmzkg",
+					children: t.map((t) => /* @__PURE__ */ l(h.Root, {
+						value: t,
+						"aria-label": t,
+						title: t,
+						className: "x3nfvp2 x6s0dn4 xl56j7k x9f619 xelkyza xidce53 x1uey4wk xwu7q15 x1s01oa9 xmkeg23 x1y0btm7 x9r1u3d xy32g2j xjbqb8w x1ypdohk x1bn55bi xgm7wsc x19fjeqo x1480za7 x13qnu6 x9v5kkp x19rmrnh x7s97pk x1m8qfh3 xwj21n9",
+						children: /* @__PURE__ */ l(i, {
+							seed: t,
+							appearance: {
+								...e,
+								color: t
+							},
+							size: "md"
+						})
+					}, t))
+				})]
+			})
+		]
 	});
 }
 // packages/forms/src/form-controls.tsx