@moldable-ai/ui 0.2.26 → 0.2.29

package/dist/catalog/core-foundation-stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core-foundation-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-foundation-stories.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE/D,eAAO,MAAM,qBAAqB,EAAE,wBA2InC,CAAA"}
+{"version":3,"file":"core-foundation-stories.d.ts","sourceRoot":"","sources":["../../src/catalog/core-foundation-stories.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAE/D,eAAO,MAAM,qBAAqB,EAAE,wBAkLnC,CAAA"}

package/dist/catalog/core-foundation-stories.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronLeftIcon, ChevronRightIcon, LocateFixedIcon, PlusIcon, } from 'lucide-react';
-import { AppFrame, AppFrameContent, } from '../components/ui/app-frame.js';
+import { ChevronLeftIcon, ChevronRightIcon, ImageIcon, LocateFixedIcon, PaletteIcon, PlusIcon, Redo2Icon, Undo2Icon, } from 'lucide-react';
+import { AppFrame, AppFrameContent } from '../components/ui/app-frame.js';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '../components/ui/card.js';
 import { IconButton } from '../components/ui/icon-button.js';
 import { Material, MaterialGroup } from '../components/ui/material.js';
 import { Panel, PanelContent, PanelGroup, PanelHeader, } from '../components/ui/panel.js';
 import { Text } from '../components/ui/text.js';
 import { Toolbar, ToolbarActions, ToolbarContent, ToolbarDescription, ToolbarTitle, } from '../components/ui/toolbar.js';
+import { ToolbarBackButton, ToolbarButton, ToolbarControlGroup, ToolbarControlSeparator, ToolbarIconButton, ToolbarOverflowMenu, ToolbarSidebarToggle, ToolbarTitleField, } from '../components/ui/toolbar-controls.js';
 export const coreFoundationSection = {
     id: 'window-foundations',
     title: 'Window foundations',
@@ -40,6 +41,17 @@ export const coreFoundationSection = {
             viewports: ['narrow'],
             render: () => (_jsxs(Toolbar, { className: "rounded-container border", children: [_jsxs(ToolbarContent, { children: [_jsx(ToolbarTitle, { children: "Daily plan" }), _jsx(ToolbarDescription, { children: "Three tasks remaining" })] }), _jsx(ToolbarActions, { children: _jsx(IconButton, { label: "Add task", variant: "ghost", size: "sm", children: _jsx(PlusIcon, {}) }) })] })),
         },
+        {
+            id: 'document-toolbar-controls',
+            title: 'Document toolbar controls',
+            description: 'Contextual navigation, closely related groups, secondary actions, overflow, and one primary action.',
+            components: ['toolbar', 'toolbar-controls'],
+            viewports: ['wide'],
+            render: () => (_jsxs(Toolbar, { position: "top", className: "rounded-container border", children: [_jsx(ToolbarSidebarToggle, { expanded: true, onExpandedChange: () => undefined }), _jsx(ToolbarBackButton, { onClick: () => undefined }), _jsx(ToolbarTitleField, { defaultValue: "Open House" }), _jsxs(ToolbarActions, { children: [_jsxs(ToolbarControlGroup, { "aria-label": "Edit history", children: [_jsx(ToolbarIconButton, { label: "Undo", children: _jsx(Undo2Icon, {}) }), _jsx(ToolbarControlSeparator, {}), _jsx(ToolbarIconButton, { label: "Redo", children: _jsx(Redo2Icon, {}) })] }), _jsx(ToolbarIconButton, { label: "Style", children: _jsx(PaletteIcon, {}) }), _jsx(ToolbarIconButton, { label: "Assets", children: _jsx(ImageIcon, {}) }), _jsx(ToolbarOverflowMenu, { items: [
+                                    { id: 'history', label: 'Version history' },
+                                    { id: 'publish', label: 'Publish' },
+                                ] }), _jsx(ToolbarButton, { variant: "default", children: "Present" })] })] })),
+        },
         {
             id: 'work-surfaces',
             title: 'Work surfaces',

package/dist/components/ui/button.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "link" | "toolbar" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,cAAc;;;8EAkCnB,CAAA;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AA4CH,iBAAS,MAAM,CAAC,EACd,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAe,EACf,OAAO,EACP,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAqDb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,cAAc;;;8EAoCnB,CAAA;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AA4CH,iBAAS,MAAM,CAAC,EACd,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAe,EACf,OAAO,EACP,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAqDb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -8,6 +8,7 @@ const buttonVariants = cva("text-ui-body relative inline-flex shrink-0 cursor-po
     variants: {
         variant: {
             default: 'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80',
+            toolbar: 'border-[var(--toolbar-control-border)] bg-[var(--toolbar-control-background)] text-foreground shadow-[var(--toolbar-control-shadow)] border hover:bg-[var(--toolbar-control-hover)] active:bg-[var(--toolbar-control-pressed)]',
             destructive: 'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive/80 dark:bg-destructive/60',
             outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground active:bg-control-pressed dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:active:bg-control-pressed',
             secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/65',

package/dist/components/ui/date-field.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const dateFieldVariants: (props?: ({
     variant?: "default" | "filled" | null | undefined;
-    density?: "default" | "compact" | "comfortable" | null | undefined;
+    density?: "compact" | "default" | "comfortable" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface DateFieldProps extends Omit<React.ComponentProps<'input'>, 'defaultValue' | 'size' | 'type' | 'value'>, VariantProps<typeof dateFieldVariants> {
     /** ISO calendar date in YYYY-MM-DD form. No timezone conversion is applied. */

package/dist/components/ui/index.d.ts

@@ -74,5 +74,6 @@ export * from './text.js';
 export * from './toggle.js';
 export * from './toggle-group.js';
 export * from './toolbar.js';
+export * from './toolbar-controls.js';
 export * from './tooltip.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA"}

package/dist/components/ui/index.js

@@ -74,4 +74,5 @@ export * from './text.js';
 export * from './toggle.js';
 export * from './toggle-group.js';
 export * from './toolbar.js';
+export * from './toolbar-controls.js';
 export * from './tooltip.js';

package/dist/components/ui/input-group.d.ts

@@ -3,11 +3,11 @@ import { Button } from './button.js';
 import { type VariantProps } from 'class-variance-authority';
 declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>): import("react/jsx-runtime").JSX.Element;
 declare function InputGroupText({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/toolbar-controls.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import type { MenuItems } from '../../lib/host-native-menu.js';
+import { Button } from './button.js';
+import { type IconButtonProps, type IconButtonSize } from './icon-button.js';
+import { Separator } from './separator.js';
+type ToolbarControlAppearance = 'chrome' | 'quiet';
+export interface ToolbarButtonProps extends React.ComponentProps<typeof Button> {
+    /**
+     * `chrome` uses the raised translucent toolbar surface. `quiet` is useful
+     * inside a ToolbarControlGroup, which owns the shared surface.
+     */
+    appearance?: ToolbarControlAppearance;
+}
+declare function ToolbarButton({ appearance, className, size, variant, ...props }: ToolbarButtonProps): import("react/jsx-runtime").JSX.Element;
+export interface ToolbarIconButtonProps extends Omit<IconButtonProps, 'size'> {
+    appearance?: ToolbarControlAppearance;
+    size?: IconButtonSize;
+}
+declare function ToolbarIconButton({ appearance, className, size, variant, ...props }: ToolbarIconButtonProps): import("react/jsx-runtime").JSX.Element;
+export interface ToolbarControlGroupProps extends React.ComponentProps<'div'> {
+    appearance?: ToolbarControlAppearance;
+}
+declare function ToolbarControlGroup({ appearance, className, ...props }: ToolbarControlGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ToolbarControlSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+export interface ToolbarBackButtonProps extends Omit<ToolbarIconButtonProps, 'children' | 'label'> {
+    label?: string;
+}
+declare function ToolbarBackButton({ label, tooltip, ...props }: ToolbarBackButtonProps): import("react/jsx-runtime").JSX.Element;
+export interface ToolbarSidebarToggleProps extends Omit<ToolbarIconButtonProps, 'aria-pressed' | 'children' | 'label' | 'onClick'> {
+    expanded: boolean;
+    onExpandedChange: (expanded: boolean) => void;
+    showLabel?: string;
+    hideLabel?: string;
+}
+declare function ToolbarSidebarToggle({ expanded, hideLabel, onExpandedChange, showLabel, tooltip, ...props }: ToolbarSidebarToggleProps): import("react/jsx-runtime").JSX.Element;
+export interface ToolbarOverflowMenuProps extends Omit<ToolbarIconButtonProps, 'children' | 'label' | 'onClick'> {
+    items: MenuItems[];
+    label?: string;
+    onSelectItem?: (id: string) => void;
+}
+declare function ToolbarOverflowMenu({ items, label, onSelectItem, tooltip, ...props }: ToolbarOverflowMenuProps): import("react/jsx-runtime").JSX.Element;
+export interface ToolbarTitleFieldProps extends Omit<React.ComponentProps<'input'>, 'size'> {
+    label?: string;
+}
+declare function ToolbarTitleField({ 'aria-label': ariaLabel, className, label, type, ...props }: ToolbarTitleFieldProps): import("react/jsx-runtime").JSX.Element;
+export { ToolbarBackButton, ToolbarButton, ToolbarControlGroup, ToolbarControlSeparator, ToolbarIconButton, ToolbarOverflowMenu, ToolbarSidebarToggle, ToolbarTitleField, };
+//# sourceMappingURL=toolbar-controls.d.ts.map

package/dist/components/ui/toolbar-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-controls.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toolbar-controls.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/toolbar-controls.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeftIcon, EllipsisIcon, PanelLeftIcon } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+import { Button } from './button.js';
+import { DropdownMenu, DropdownMenuTrigger } from './dropdown-menu.js';
+import { IconButton, } from './icon-button.js';
+import { Separator } from './separator.js';
+const ToolbarControlGroupContext = React.createContext(null);
+function ToolbarButton({ appearance = 'chrome', className, size, variant, ...props }) {
+    const group = React.useContext(ToolbarControlGroupContext);
+    return (_jsx(Button, { "data-slot": "toolbar-button", size: size ?? (group ? 'sm' : 'lg'), variant: variant ?? (group || appearance === 'quiet' ? 'ghost' : 'toolbar'), className: cn(group && 'shadow-none', className), ...props }));
+}
+function ToolbarIconButton({ appearance = 'chrome', className, size, variant, ...props }) {
+    const group = React.useContext(ToolbarControlGroupContext);
+    return (_jsx(IconButton, { "data-slot": "toolbar-icon-button", size: size ?? (group ? 'sm' : 'lg'), variant: variant ?? (group || appearance === 'quiet' ? 'ghost' : 'toolbar'), className: cn(group && 'shadow-none', className), ...props }));
+}
+function ToolbarControlGroup({ appearance = 'chrome', className, ...props }) {
+    return (_jsx(ToolbarControlGroupContext.Provider, { value: { grouped: true }, children: _jsx("div", { role: "group", "data-slot": "toolbar-control-group", "data-appearance": appearance, className: cn('h-control-lg rounded-control flex shrink-0 items-center', appearance === 'chrome'
+                ? 'gap-0.5 border border-[var(--toolbar-control-border)] bg-[var(--toolbar-control-background)] p-1 shadow-[var(--toolbar-control-shadow)]'
+                : 'gap-1.5', className), ...props }) }));
+}
+function ToolbarControlSeparator({ className, ...props }) {
+    return (_jsx(Separator, { "data-slot": "toolbar-control-separator", orientation: "vertical", className: cn('mx-0.5 h-4 self-center bg-[var(--toolbar-control-border)]', className), ...props }));
+}
+function ToolbarBackButton({ label = 'Back', tooltip = true, ...props }) {
+    return (_jsx(ToolbarIconButton, { label: label, tooltip: tooltip, ...props, children: _jsx(ChevronLeftIcon, {}) }));
+}
+function ToolbarSidebarToggle({ expanded, hideLabel = 'Hide sidebar', onExpandedChange, showLabel = 'Show sidebar', tooltip = true, ...props }) {
+    const label = expanded ? hideLabel : showLabel;
+    return (_jsx(ToolbarIconButton, { "aria-pressed": expanded, "data-state": expanded ? 'on' : 'off', label: label, tooltip: tooltip, onClick: () => onExpandedChange(!expanded), ...props, children: _jsx(PanelLeftIcon, {}) }));
+}
+function ToolbarOverflowMenu({ items, label = 'More actions', onSelectItem, tooltip = true, ...props }) {
+    return (_jsx(DropdownMenu, { items: items, onSelectItem: onSelectItem, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ToolbarIconButton, { label: label, tooltip: tooltip, ...props, children: _jsx(EllipsisIcon, {}) }) }) }));
+}
+function ToolbarTitleField({ 'aria-label': ariaLabel, className, label = 'Document title', type = 'text', ...props }) {
+    return (_jsx("input", { "data-slot": "toolbar-title-field", "aria-label": ariaLabel ?? label, type: type, className: cn('text-foreground hover:bg-control-hover focus:bg-control-hover focus-visible:ring-ring h-control-sm rounded-control min-w-0 max-w-[min(24rem,32vw)] bg-transparent px-2 text-[15px] font-medium outline-none transition-colors focus-visible:ring-1', className), ...props }));
+}
+export { ToolbarBackButton, ToolbarButton, ToolbarControlGroup, ToolbarControlSeparator, ToolbarIconButton, ToolbarOverflowMenu, ToolbarSidebarToggle, ToolbarTitleField, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moldable-ai/ui",
-  "version": "0.2.26",
+  "version": "0.2.29",
   "description": "Shared UI components for Moldable applications",
   "author": "Desiderata LLC",
   "license": "SEE LICENSE IN LICENSE",

package/src/components/ui/toolbar-controls.md

@@ -0,0 +1,75 @@
+# Toolbar controls
+
+Precomposed controls for native-window-aware `Toolbar` chrome. They use
+Moldable semantic tokens, density, menus, and accessibility behavior while
+keeping app toolbars visually consistent.
+
+```tsx
+<Toolbar position="top">
+  <ToolbarSidebarToggle
+    expanded={sidebarOpen}
+    onExpandedChange={setSidebarOpen}
+  />
+  <ToolbarBackButton onClick={goBack} />
+  <ToolbarTitleField value={title} onChange={rename} />
+  <ToolbarActions>
+    <ToolbarControlGroup aria-label="History">
+      <ToolbarIconButton label="Undo" onClick={undo}>
+        <Undo2 />
+      </ToolbarIconButton>
+      <ToolbarControlSeparator />
+      <ToolbarIconButton label="Redo" onClick={redo}>
+        <Redo2 />
+      </ToolbarIconButton>
+    </ToolbarControlGroup>
+    <ToolbarOverflowMenu
+      items={[
+        { id: 'history', label: 'Version history' },
+        { id: 'export', label: 'Export' },
+      ]}
+      onSelectItem={handleMoreAction}
+    />
+    <ToolbarButton variant="default">Present</ToolbarButton>
+  </ToolbarActions>
+</Toolbar>
+```
+
+## Components
+
+- `ToolbarButton` — text or mixed-content action. Defaults to 36px native
+  chrome; use `variant="default"` for the one primary action.
+- `ToolbarIconButton` — required accessible label and optional tooltip.
+- `ToolbarBackButton` — single chevron Back affordance for root-to-detail
+  navigation.
+- `ToolbarSidebarToggle` — controlled sidebar visibility button with accurate
+  pressed state and dynamic label.
+- `ToolbarOverflowMenu` — an ellipsis button backed by Moldable's declarative
+  menu API, including the native host menu when available.
+- `ToolbarControlGroup` — a shared surface for closely related actions such as
+  Undo/Redo. Children automatically become compact quiet controls.
+- `ToolbarControlSeparator` — divider within a related action group.
+- `ToolbarTitleField` — an accessible, inline-editable contextual title.
+
+`ToolbarButton` and `ToolbarIconButton` accept `appearance="quiet"` when a
+standalone action should not have raised chrome. The default `chrome`
+appearance uses the `toolbar` Button variant and these semantic tokens:
+
+- `--toolbar-control-background`
+- `--toolbar-control-hover`
+- `--toolbar-control-pressed`
+- `--toolbar-control-border`
+- `--toolbar-control-shadow`
+
+The tokens adapt to light/dark appearance, increased contrast, and reduced
+transparency.
+
+## Composition rules
+
+- Keep the current document or view title leading and the primary action last.
+- Prefer icon-only secondary controls and a text-only primary action.
+- Put only genuinely related commands in `ToolbarControlGroup`.
+- Move low-frequency commands such as history, duplicate, export, and delete
+  into `ToolbarOverflowMenu`.
+- Keep roughly five or six visible actions. Tooltips do not replace accessible
+  labels.
+- Use the shared Back and Sidebar controls instead of hand-building arrows.

package/src/components/ui/toolbar.md

@@ -37,3 +37,9 @@ The default toolbar uses `material="regular"`. The `plain` and `panel` variants
 default to `material="none"`; pass a material explicitly only when the toolbar
 actually floats over content. Reserve `material="clear"` for compact controls
 over media or a richly colored canvas.
+
+Use the precomposed controls in
+[`toolbar-controls.md`](./toolbar-controls.md) for native-sized Back, Sidebar,
+Overflow, grouped-action, and editable-title behavior. Keep only closely
+related actions in a shared group; a single capsule containing every command
+does not communicate command hierarchy.

package/src/styles/index.css

@@ -268,6 +268,10 @@
   --color-control-disabled: var(--control-disabled);
   --color-control-focus: var(--control-focus);
   --color-control-invalid: var(--control-invalid);
+  --color-toolbar-control: var(--toolbar-control-background);
+  --color-toolbar-control-hover: var(--toolbar-control-hover);
+  --color-toolbar-control-pressed: var(--toolbar-control-pressed);
+  --color-toolbar-control-border: var(--toolbar-control-border);
   --color-window-chrome: var(--window-chrome-background);
   --color-window-chrome-foreground: var(--window-chrome-foreground);
   --color-window-chrome-muted: var(--window-chrome-muted-foreground);
@@ -851,6 +855,29 @@
   );
   --control-focus: var(--ring);
   --control-invalid: var(--destructive);
+  --toolbar-control-background: color-mix(
+    in oklch,
+    var(--background) 74%,
+    transparent
+  );
+  --toolbar-control-hover: color-mix(
+    in oklch,
+    var(--background) 84%,
+    var(--foreground) 8%
+  );
+  --toolbar-control-pressed: color-mix(
+    in oklch,
+    var(--background) 74%,
+    var(--foreground) 14%
+  );
+  --toolbar-control-border: color-mix(
+    in oklch,
+    var(--foreground) 11%,
+    transparent
+  );
+  --toolbar-control-shadow:
+    inset 0 1px 0 color-mix(in oklch, white 42%, transparent),
+    0 1px 2px oklch(0.15 0.005 285 / 8%);
 
   --material-blur-toolbar: 16px;
   --material-blur-overlay: 20px;
@@ -952,9 +979,7 @@
  * toolbars retain their density-specific compact sizing.
  */
 :root[data-moldable-display-mode='window'][data-moldable-window-titlebar='app']
-  [data-slot='toolbar'][data-position='top']:not(
-    [data-window-inset='none']
-  ) {
+  [data-slot='toolbar'][data-position='top']:not([data-window-inset='none']) {
   min-height: max(3.25rem, var(--window-titlebar-height, 0px));
   padding-inline-start: max(
     var(--density-control-padding-inline, 0.625rem),
@@ -1204,6 +1229,11 @@
     --control-disabled: transparent;
     --control-focus: Highlight;
     --control-invalid: Mark;
+    --toolbar-control-background: Canvas;
+    --toolbar-control-hover: Canvas;
+    --toolbar-control-pressed: Canvas;
+    --toolbar-control-border: ButtonBorder;
+    --toolbar-control-shadow: none;
     --material-regular-fill: Canvas;
     --material-regular-fallback: Canvas;
     --material-regular-border: ButtonBorder;
@@ -1229,6 +1259,10 @@
 :where([data-transparency='reduced']) {
   --surface-toolbar: var(--background);
   --surface-overlay: var(--popover);
+  --toolbar-control-background: var(--background);
+  --toolbar-control-hover: var(--accent);
+  --toolbar-control-pressed: var(--control-pressed);
+  --toolbar-control-shadow: inset 0 0 0 1px var(--separator);
   --material-regular-fill: var(--material-regular-fallback);
   --material-regular-blur: 0px;
   --material-regular-saturation: 1;
@@ -1244,6 +1278,10 @@
   :root {
     --surface-toolbar: var(--background);
     --surface-overlay: var(--popover);
+    --toolbar-control-background: var(--background);
+    --toolbar-control-hover: var(--accent);
+    --toolbar-control-pressed: var(--control-pressed);
+    --toolbar-control-shadow: inset 0 0 0 1px var(--separator);
     --material-regular-fill: var(--material-regular-fallback);
     --material-regular-blur: 0px;
     --material-regular-saturation: 1;