@moldable-ai/ui 0.2.26 → 0.2.31

package/dist/components/ui/sidebar.js

@@ -4,6 +4,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { PanelLeftIcon } from 'lucide-react';
 import * as React from 'react';
 import { MOLDABLE_MATERIAL_REGION_MESSAGE_TYPE } from '../../lib/frame-lifecycle.js';
+import { useOptionalTheme } from '../../lib/theme.js';
 import { cn } from '../../lib/utils.js';
 import { useIsMobile } from '../../hooks/use-mobile.js';
 import { useAppFrameRuntime } from './app-frame.js';
@@ -16,7 +17,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from './too
 import { cva } from 'class-variance-authority';
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH = 'var(--m-ui-sidebar-width, 16rem)';
 const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
@@ -41,6 +42,7 @@ function useSidebarMaterialRegion({ enabled, forwardedRef, }) {
     }, [forwardedRef]);
     const canDeclare = enabled &&
         appFrame?.mode === 'window' &&
+        appFrame.sidebarMaterialEnabled === true &&
         appFrame.sidebarMaterialAvailable === true;
     React.useEffect(() => {
         const element = elementRef.current;
@@ -158,32 +160,49 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
                     ...style,
                 }, className: cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className), ...props, children: children }) }) }));
 }
-function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ref, ...props }) {
+function Sidebar({ side = 'left', variant = 'sidebar', sidebarStyle, collapsible = 'offcanvas', className, children, ref, ...props }) {
+    const theme = useOptionalTheme();
+    const resolvedSidebarStyle = sidebarStyle ?? theme?.sidebarStyle ?? 'edge-to-edge';
+    const resolvedVariant = resolvedSidebarStyle === 'floating'
+        ? 'floating'
+        : resolvedSidebarStyle === 'edge-to-edge'
+            ? 'sidebar'
+            : variant;
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     const materialRegion = useSidebarMaterialRegion({
         enabled: !isMobile &&
             side === 'left' &&
-            variant === 'sidebar' &&
+            resolvedVariant === 'sidebar' &&
             !(state === 'collapsed' && collapsible === 'offcanvas'),
         forwardedRef: ref,
     });
     if (collapsible === 'none') {
-        return (_jsx("div", { ref: materialRegion.setElement, "data-slot": "sidebar", "data-material-region-id": materialRegion.regionId, "data-native-material": materialRegion.active ? 'sidebar' : undefined, className: cn(materialRegion.active ? 'bg-transparent' : 'bg-sidebar', 'text-sidebar-foreground w-(--sidebar-width) flex flex-col self-stretch', className), ...props, children: children }));
+        return (_jsx("div", { ref: materialRegion.setElement, "data-slot": "sidebar", "data-ui-sidebar-style": resolvedSidebarStyle, "data-material-region-id": materialRegion.regionId, "data-native-material": materialRegion.active ? 'sidebar' : undefined, className: cn(materialRegion.active ? 'bg-transparent' : 'bg-sidebar', 'text-sidebar-foreground w-(--sidebar-width) flex flex-col self-stretch', resolvedVariant === 'floating' &&
+                'border-[length:var(--m-ui-sidebar-border-width,0px)] [border-color:var(--m-ui-sidebar-border-color,var(--sidebar-border))]', className), ...props, children: children }));
     }
     if (isMobile) {
-        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", style: {
+        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-ui-sidebar-style": resolvedSidebarStyle, "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", style: {
                     '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
                 }, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
     }
-    return (_jsxs("div", { className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('w-(--sidebar-width) relative bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
+    return (_jsxs("div", { className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": resolvedVariant, "data-side": side, "data-slot": "sidebar", "data-ui-sidebar-style": resolvedSidebarStyle, children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('w-(--sidebar-width) relative bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', resolvedVariant === 'floating' || resolvedVariant === 'inset'
                     ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
                     : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)') }), _jsx("div", { ref: materialRegion.setElement, "data-slot": "sidebar-container", "data-material-region-id": materialRegion.regionId, "data-native-material": materialRegion.active ? 'sidebar' : undefined, className: cn('w-(--sidebar-width) fixed inset-y-0 z-10 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
                     ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
                     : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 
                 // Adjust the padding for floating and inset variants.
-                variant === 'floating' || variant === 'inset'
-                    ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: cn(materialRegion.active ? 'bg-transparent' : 'bg-sidebar', 'group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-container flex h-full w-full flex-col group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm'), children: children }) })] }));
+                resolvedVariant === 'floating' || resolvedVariant === 'inset'
+                    ? 'p-[var(--m-ui-sidebar-window-inset,0.5rem)] group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) [border-color:var(--m-ui-sidebar-divider-color,var(--sidebar-border))] group-data-[side=left]:border-r-[length:var(--m-ui-sidebar-divider-width,1px)] group-data-[side=right]:border-l-[length:var(--m-ui-sidebar-divider-width,1px)]', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: cn(materialRegion.active ? 'bg-transparent' : 'bg-sidebar', 'flex h-full w-full flex-col'), style: resolvedVariant === 'floating'
+                        ? {
+                            borderRadius: 'var(--m-ui-sidebar-shell-radius, var(--shape-container))',
+                            borderStyle: 'solid',
+                            borderWidth: 'var(--m-ui-sidebar-border-width, 0px)',
+                            borderColor: 'var(--m-ui-sidebar-border-color, var(--sidebar-border))',
+                            boxShadow: 'var(--m-ui-sidebar-shadow, var(--material-shadow-sidebar))',
+                            backdropFilter: 'blur(var(--m-ui-sidebar-glass-effect-radius, 0px))',
+                        }
+                        : undefined, children: children }) })] }));
 }
 function SidebarTrigger({ className, onClick, ...props }) {
     const { toggleSidebar } = useSidebar();
@@ -217,9 +236,14 @@ function SidebarContent({ className, ...props }) {
 function SidebarGroup({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className), ...props }));
 }
-function SidebarGroupLabel({ className, asChild = false, ...props }) {
+function SidebarGroupLabel({ className, asChild = false, style, ...props }) {
     const Comp = asChild ? Slot : 'div';
-    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring outline-hidden rounded-control text-ui-caption flex h-8 shrink-0 items-center px-2 font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), ...props }));
+    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring outline-hidden text-ui-caption flex shrink-0 items-center font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), style: {
+            minHeight: 'var(--m-ui-sidebar-section-height-medium, 2rem)',
+            paddingInline: 'var(--m-ui-sidebar-row-inset-inline, 0.5rem)',
+            borderRadius: 'var(--m-ui-sidebar-item-radius, var(--shape-control))',
+            ...style,
+        }, ...props }));
 }
 function SidebarGroupAction({ className, asChild = false, ...props }) {
     const Comp = asChild ? Slot : 'button';
@@ -236,7 +260,7 @@ function SidebarMenu({ className, ...props }) {
 function SidebarMenuItem({ className, ...props }) {
     return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props }));
 }
-const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-control p-2 text-left text-ui-body outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-1 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-control p-2 text-left text-ui-body outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-1 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[active=true]:[&>svg]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
     variants: {
         variant: {
             default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
@@ -253,10 +277,24 @@ const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center
         size: 'default',
     },
 });
-function SidebarMenuButton({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, ...props }) {
+function SidebarMenuButton({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, style, ...props }) {
     const Comp = asChild ? Slot : 'button';
     const { isMobile, state } = useSidebar();
-    const button = (_jsx(Comp, { "data-slot": "sidebar-menu-button", "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), ...props }));
+    const heightToken = size === 'sm'
+        ? '--m-ui-sidebar-row-height-small'
+        : size === 'lg'
+            ? '--m-ui-sidebar-row-height-large'
+            : '--m-ui-sidebar-row-height-medium';
+    const button = (_jsx(Comp, { "data-slot": "sidebar-menu-button", "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), style: {
+            height: `var(${heightToken})`,
+            minHeight: `var(${heightToken})`,
+            paddingBlock: 0,
+            paddingInline: 'var(--m-ui-sidebar-row-inset-inline, 0.5rem)',
+            borderRadius: isActive
+                ? 'var(--m-ui-sidebar-selection-radius, var(--shape-control))'
+                : 'var(--m-ui-sidebar-item-radius, var(--shape-control))',
+            ...style,
+        }, ...props }));
     if (!tooltip) {
         return button;
     }
@@ -294,6 +332,6 @@ function SidebarMenuSubItem({ className, ...props }) {
 }
 function SidebarMenuSubButton({ asChild = false, size = 'md', isActive = false, className, ...props }) {
     const Comp = asChild ? Slot : 'a';
-    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground outline-hidden rounded-control flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden px-2 focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-ui-caption', size === 'md' && 'text-ui-body', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground outline-hidden rounded-control data-[active=true]:[&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden px-2 focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-ui-caption', size === 'md' && 'text-ui-body', 'group-data-[collapsible=icon]:hidden', className), ...props }));
 }
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const statusVariants: (props?: ({
-    variant?: "error" | "neutral" | "info" | "success" | "warning" | "running" | "pending" | null | undefined;
+    variant?: "neutral" | "info" | "success" | "warning" | "error" | "running" | "pending" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface StatusProps extends React.ComponentProps<'span'>, VariantProps<typeof statusVariants> {
     asChild?: boolean;

package/dist/components/ui/status.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
-const statusVariants = cva('text-ui-caption inline-flex min-w-0 items-center gap-1.5 font-medium', {
+const statusVariants = cva('inline-flex min-w-0 items-center gap-1.5 [font-size:var(--type-caption-size,10px)] font-medium [line-height:var(--type-caption-line-height,13px)]', {
     variants: {
         variant: {
             info: 'text-info-foreground [&_[data-slot=status-indicator]]:bg-info',

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

@@ -1,7 +1,9 @@
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as React from 'react';
-declare function Switch({ className, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+import type { ControlSize } from '../../tokens/contracts.js';
+declare function Switch({ className, controlSize, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
     size?: 'sm' | 'default';
+    controlSize?: ControlSize;
 }): import("react/jsx-runtime").JSX.Element;
 export { Switch };
 //# sourceMappingURL=switch.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,2CAmBA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEzD,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,WAAW,EACX,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,2CAuBA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/ui/switch.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import { cn } from '../../lib/utils.js';
-function Switch({ className, size = 'default', ...props }) {
-    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn('focus-visible:border-ring focus-visible:ring-ring group/switch rounded-pill h-control-xs before:rounded-pill before:shadow-xs data-[state=checked]:before:bg-primary data-[state=unchecked]:before:bg-input dark:data-[state=unchecked]:before:bg-input/80 peer relative inline-flex shrink-0 cursor-pointer items-center border border-transparent bg-transparent outline-none transition-all before:pointer-events-none before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:border before:border-transparent focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:w-8 data-[size=sm]:w-6 data-[size=default]:before:h-[1.15rem] data-[size=sm]:before:h-3.5 data-[size=default]:before:w-8 data-[size=sm]:before:w-6', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn('bg-background border-separator-strong shadow-xs dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground rounded-pill pointer-events-none relative z-10 block border ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3') }) }));
+function Switch({ className, controlSize, size = 'default', ...props }) {
+    const resolvedControlSize = controlSize ?? (size === 'sm' ? 'small' : 'medium');
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, "data-control-size": resolvedControlSize, className: cn('focus-visible:border-ring focus-visible:ring-ring group/switch rounded-pill bg-[var(--m-ui-color-text-primary)]/10 active:bg-[var(--m-ui-color-text-primary)]/20 peer relative inline-flex h-[var(--m-ui-switch-track-height)] w-[var(--m-ui-switch-track-width)] shrink-0 cursor-pointer items-center border border-transparent p-0.5 outline-none transition-[background-color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-[0.06] data-[state=checked]:bg-[var(--m-ui-color-accent)]', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn('border-separator-strong shadow-xs rounded-pill pointer-events-none relative z-10 block h-[var(--m-ui-switch-knob-height)] w-[var(--m-ui-switch-knob-width)] border bg-white ring-0 transition-[width,transform] data-[state=checked]:translate-x-[calc(var(--m-ui-switch-track-width)-var(--m-ui-switch-knob-width)-4px)] data-[state=unchecked]:translate-x-0') }) }));
 }
 export { Switch };

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

@@ -0,0 +1,49 @@
+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';
+type ToolbarControlSize = 'medium' | 'xl';
+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;
+    size?: ToolbarControlSize;
+}
+declare function ToolbarControlGroup({ appearance, className, size, ...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,47 @@
+'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);
+    const groupedSize = group?.size === 'xl' ? 'lg' : 'sm';
+    const emphasis = variant === 'prominent' ? 'primary' : 'standard';
+    const resolvedVariant = variant === 'prominent'
+        ? 'toolbar'
+        : (variant ?? (group || appearance === 'quiet' ? 'ghost' : 'toolbar'));
+    return (_jsx(Button, { "data-slot": "toolbar-button", "data-emphasis": emphasis, size: size ?? (group ? groupedSize : 'xl'), variant: resolvedVariant, className: cn('rounded-pill gap-[var(--m-ui-toolbar-action-gap,var(--density-control-gap))] px-[var(--m-ui-toolbar-action-padding-inline,var(--density-control-padding-inline))] [&_svg:not([class*="size-"])]:size-[var(--m-ui-toolbar-action-icon-size,13px)]', emphasis === 'primary' && 'font-semibold', group && 'shadow-none', className), ...props }));
+}
+function ToolbarIconButton({ appearance = 'chrome', className, size, variant, ...props }) {
+    const group = React.useContext(ToolbarControlGroupContext);
+    const groupedSize = group?.size === 'xl' ? 'lg' : 'sm';
+    return (_jsx(IconButton, { "data-slot": "toolbar-icon-button", size: size ?? (group ? groupedSize : 'xl'), variant: variant ?? (group || appearance === 'quiet' ? 'ghost' : 'toolbar'), shape: "circle", className: cn(group && 'shadow-none', className), ...props }));
+}
+function ToolbarControlGroup({ appearance = 'chrome', className, size = 'xl', ...props }) {
+    return (_jsx(ToolbarControlGroupContext.Provider, { value: { grouped: true, size }, children: _jsx("div", { role: "group", "data-slot": "toolbar-control-group", "data-appearance": appearance, "data-size": size, className: cn('rounded-pill flex shrink-0 items-center', size === 'medium' ? 'h-control-md' : 'h-control-xl', appearance === 'chrome'
+                ? cn('border border-[var(--toolbar-control-border)] bg-[var(--toolbar-control-background)] shadow-[var(--toolbar-control-shadow)]', size === 'medium' ? 'gap-1 p-0.5' : 'gap-1 p-1')
+                : 'gap-1.5', className), ...props }) }));
+}
+function ToolbarControlSeparator({ className, ...props }) {
+    const group = React.useContext(ToolbarControlGroupContext);
+    return (_jsx(Separator, { "data-slot": "toolbar-control-separator", orientation: "vertical", className: cn('mx-0.5 self-center bg-[var(--toolbar-control-border)]', group?.size === 'xl' ? 'h-5' : 'h-4', 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-md rounded-control min-w-0 max-w-[min(24rem,32vw)] bg-transparent px-2 text-[13px] font-bold outline-none transition-colors focus-visible:ring-1', className), ...props }));
+}
+export { ToolbarBackButton, ToolbarButton, ToolbarControlGroup, ToolbarControlSeparator, ToolbarIconButton, ToolbarOverflowMenu, ToolbarSidebarToggle, ToolbarTitleField, };

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

@@ -4,18 +4,19 @@ import { Separator } from './separator.js';
 import { Text } from './text.js';
 import { type VariantProps } from 'class-variance-authority';
 export type ToolbarInset = 'auto' | 'none' | 'windowControls' | 'windowControlsAndButton';
+type ToolbarMaterialVariant = Extract<MaterialVariant, 'regular' | 'clear'>;
 declare const toolbarVariants: (props?: ({
-    variant?: "panel" | "default" | "plain" | null | undefined;
-    material?: "regular" | "clear" | "none" | null | undefined;
+    variant?: "default" | "panel" | "plain" | null | undefined;
+    material?: "regular" | "none" | "clear" | null | undefined;
     density?: "compact" | "default" | "comfortable" | null | undefined;
-    position?: "static" | "top" | "bottom" | null | undefined;
+    position?: "top" | "bottom" | "static" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ToolbarProps extends React.ComponentProps<'header'>, VariantProps<typeof toolbarVariants> {
     /**
      * Defaults to regular material for the default toolbar and no material for
      * plain or panel variants.
      */
-    material?: MaterialVariant | 'none';
+    material?: ToolbarMaterialVariant | 'none';
     /**
      * Clearance for native window controls. `auto` applies the host-advertised
      * inset only when this is a top toolbar in an app-owned window.

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAMjE,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,yBAAyB,CAAA;AAE7B,QAAA,MAAM,eAAe;;;;;8EAsCpB,CAAA;AAED,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EACpC,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;IACnC;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,iBAAS,OAAO,CAAC,EACf,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAc,EACd,SAAS,EACT,SAAS,EACT,aAAa,EACb,WAAW,EACX,GAAG,KAAK,EACT,EAAE,YAAY,2CAqCd;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ3E;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAWnC;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAYnC;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ3E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CASxC;AAED,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,eAAe,GAChB,CAAA"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAK7B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,yBAAyB,CAAA;AAC7B,KAAK,sBAAsB,GAAG,OAAO,CAAC,eAAe,EAAE,SAAS,GAAG,OAAO,CAAC,CAAA;AAE3E,QAAA,MAAM,eAAe;;;;;8EAsCpB,CAAA;AAED,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EACpC,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,GAAG,MAAM,CAAA;IAC1C;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,iBAAS,OAAO,CAAC,EACf,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAc,EACd,SAAS,EACT,SAAS,EACT,aAAa,EACb,WAAW,EACX,GAAG,KAAK,EACT,EAAE,YAAY,2CAqCd;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ3E;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAWnC;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAYnC;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ3E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CASxC;AAED,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,eAAe,GAChB,CAAA"}

package/dist/components/ui/toolbar.js

@@ -3,8 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../lib/utils.js';
 import { Separator } from './separator.js';
 import { Text } from './text.js';
-import { cva } from 'class-variance-authority';
 import { handleWindowTitlebarDoubleClick, handleWindowTitlebarMouseDown, } from './window-titlebar.js';
+import { cva } from 'class-variance-authority';
 const toolbarVariants = cva('z-20 flex min-h-toolbar w-full shrink-0 items-center gap-control-gap px-control-inline', {
     variants: {
         variant: {
@@ -18,7 +18,7 @@ const toolbarVariants = cva('z-20 flex min-h-toolbar w-full shrink-0 items-cente
             none: '',
         },
         density: {
-            compact: 'py-1',
+            compact: 'py-2',
             default: 'py-1.5',
             comfortable: 'py-2',
         },
@@ -68,7 +68,7 @@ function ToolbarContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "toolbar-content", className: cn('flex min-w-0 flex-1 flex-col', className), ...props }));
 }
 function ToolbarTitle({ className, ...props }) {
-    return (_jsx(Text, { as: "h2", variant: "strong", truncate: true, "data-slot": "toolbar-title", className: cn('text-[15px] font-medium', className), ...props }));
+    return (_jsx(Text, { as: "h2", variant: "strong", truncate: true, "data-slot": "toolbar-title", className: cn('text-[13px] font-bold leading-[15px]', className), ...props }));
 }
 function ToolbarDescription({ className, ...props }) {
     return (_jsx(Text, { as: "p", variant: "small", color: "secondary", truncate: true, "data-slot": "toolbar-description", className: className, ...props }));

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { cn } from './lib/utils.js';
-export { ThemeProvider, useTheme, themeScript, type Theme } from './lib/theme.js';
+export { ThemeProvider, useTheme, themeScript, type Theme, type ThemeProviderProps, } from './lib/theme.js';
+export * from './tokens/index.js';
 export { WorkspaceProvider, useWorkspace, WORKSPACE_HEADER, } from './lib/workspace.js';
 export { useMoldableCommands, useMoldableCommand, useMoldableAppCommands, useMoldableWindowShortcuts, useMoldableNavigationPop, useMoldableNavigationState, isInMoldable, sendToMoldable, pushMoldableNavigation, popMoldableNavigation, resetMoldableNavigation, downloadFile, publishMoldableArtifact, setMoldableWindowFullscreen, type AppCommand, type CommandAction, type CommandsResponse, type CommandMessage, type MoldableNavigationEntry, type MoldableNavigationPopMessage, type MoldableNavigationStateMessage, type MoldableWindowShortcut, type MoldableWindowShortcutDefaults, type DownloadFileOptions, type MoldableArtifactFile, type MoldableArtifactPublishOptions, type MoldableArtifactPublishResult, type MoldableWindowFullscreenMode, type MoldableWindowFullscreenOptions, type MoldableWindowFullscreenResult, type MoldableWindowFullscreenMessage, type MoldableWindowFullscreenResultMessage, } from './lib/commands.js';
 export * from './lib/native-capabilities/index.js';

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -1,7 +1,9 @@
 // Export utilities
 export { cn } from './lib/utils.js';
 // Export theme
-export { ThemeProvider, useTheme, themeScript } from './lib/theme.js';
+export { ThemeProvider, useTheme, themeScript, } from './lib/theme.js';
+// Export design-system contracts
+export * from './tokens/index.js';
 // Export workspace
 export { WorkspaceProvider, useWorkspace, WORKSPACE_HEADER, } from './lib/workspace.js';
 // Export commands

package/dist/lib/frame-lifecycle.d.ts

@@ -31,6 +31,7 @@ export interface MoldableHostContextMessage {
     platform?: 'macos' | 'windows' | 'linux' | 'unknown';
     windowId?: string;
     nativeMaterial?: {
+        background?: unknown;
         regions?: {
             sidebar?: unknown;
         };

package/dist/lib/frame-lifecycle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frame-lifecycle.d.ts","sourceRoot":"","sources":["../../src/lib/frame-lifecycle.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"frame-lifecycle.d.ts","sourceRoot":"","sources":["../../src/lib/frame-lifecycle.ts"],"names":[],"mappings":"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"}

package/dist/lib/frame-lifecycle.js

@@ -156,6 +156,13 @@ export function applyMoldableHostContext(message) {
         delete root.dataset.moldableNativeMaterialSidebar;
         clearSidebarMaterialRegion();
     }
+    if (message.displayMode === 'window' &&
+        message.nativeMaterial?.background === true) {
+        root.dataset.moldableNativeMaterialBackground = 'available';
+    }
+    else {
+        delete root.dataset.moldableNativeMaterialBackground;
+    }
     const insets = message.safeInsets;
     if (insets) {
         applyBoundedLength('--window-safe-area-top', insets.top);

package/dist/lib/theme.d.ts

@@ -1,15 +1,49 @@
 import { type ReactNode } from 'react';
-export type Theme = 'light' | 'dark' | 'system';
-type ResolvedTheme = 'light' | 'dark';
+import type { ControlSize, MaterialContext, ResolvedUIAppearance, UIAppearance, UIPlatform, UIPlatformPack, UIPlatformVersion, UIPreferences, UISidebarStyle, UITheme } from '../tokens/contracts.js';
+/** @deprecated Use UIAppearance. */
+export type Theme = UIAppearance;
+/** @deprecated Use ResolvedUIAppearance. */
+type ResolvedTheme = ResolvedUIAppearance;
 interface ThemeContextValue {
+    uiTheme: UITheme;
+    setUITheme: (theme: UITheme) => void;
+    platform: UIPlatform;
+    platformVersion: UIPlatformVersion;
+    platformPack: UIPlatformPack;
+    setPlatformPack: (platform: UIPlatform, version: UIPlatformVersion) => void;
+    sidebarStyle: UISidebarStyle;
+    setSidebarStyle: (style: UISidebarStyle) => void;
+    appearance: UIAppearance;
+    resolvedAppearance: ResolvedUIAppearance;
+    setAppearance: (appearance: UIAppearance) => void;
+    controlSize: ControlSize;
+    setControlSize: (controlSize: ControlSize) => void;
+    materialContext: MaterialContext;
+    setMaterialContext: (materialContext: MaterialContext) => void;
+    preferences: UIPreferences;
+    /** @deprecated Use appearance. */
     theme: Theme;
+    /** @deprecated Use resolvedAppearance. */
     resolvedTheme: ResolvedTheme;
+    /** @deprecated Use setAppearance. */
     setTheme: (theme: Theme) => void;
 }
-export declare function ThemeProvider({ children }: {
+export interface ThemeProviderProps {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+    platform?: UIPlatform;
+    platformVersion?: UIPlatformVersion;
+    uiTheme?: UITheme;
+    sidebarStyle?: UISidebarStyle;
+    appearance?: UIAppearance;
+    controlSize?: ControlSize;
+    materialContext?: MaterialContext;
+    preferences?: UIPreferences;
+    storageKey?: string | false;
+}
+export declare function ThemeProvider({ children, platform, platformVersion, uiTheme: uiThemeProp, sidebarStyle: sidebarStyleProp, appearance: appearanceProp, controlSize: controlSizeProp, materialContext: materialContextProp, preferences, storageKey, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTheme(): ThemeContextValue;
+/** Internal-friendly optional access for components that also work standalone. */
+export declare function useOptionalTheme(): ThemeContextValue | null;
 /**
  * Inline script to prevent theme flash on page load.
  * Add this to your <head> in layout.tsx:
@@ -20,6 +54,6 @@ export declare function useTheme(): ThemeContextValue;
  * </head>
  * ```
  */
-export declare const themeScript = "\n(function() {\n  var params = new URLSearchParams(window.location.search);\n  var theme = params.get('theme');\n  if (!theme) {\n    theme = localStorage.getItem('moldable-theme');\n  }\n  if (theme === 'system' || !theme) {\n    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n  }\n  document.documentElement.classList.add(theme);\n})();\n";
+export declare const themeScript = "\n(function() {\n  var params = new URLSearchParams(window.location.search);\n  var theme = params.get('theme');\n  if (!theme) {\n    theme = localStorage.getItem('moldable-theme');\n  }\n  if (theme === 'system' || !theme) {\n    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n  }\n  document.documentElement.classList.add(theme);\n  document.documentElement.dataset.uiTheme = 'moldable';\n  document.documentElement.dataset.uiPlatform = 'macos';\n  document.documentElement.dataset.uiPlatformVersion = '27';\n  document.documentElement.dataset.uiPlatformPack = 'macos-27';\n  document.documentElement.dataset.uiSidebarStyle = 'edge-to-edge';\n  document.documentElement.dataset.uiAppearance = theme;\n  document.documentElement.dataset.controlSize = 'medium';\n  document.documentElement.dataset.materialContext = 'content';\n})();\n";
 export {};
 //# sourceMappingURL=theme.d.ts.map

package/dist/lib/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/theme.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAGd,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC/C,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AAErC,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAA;IACZ,aAAa,EAAE,aAAa,CAAA;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC;AA6CD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CA0ClE;AAED,wBAAgB,QAAQ,sBAMvB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,kYAYvB,CAAA"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/theme.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EACV,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,YAAY,EACZ,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,OAAO,EACR,MAAM,qBAAqB,CAAA;AAG5B,oCAAoC;AACpC,MAAM,MAAM,KAAK,GAAG,YAAY,CAAA;AAChC,4CAA4C;AAC5C,KAAK,aAAa,GAAG,oBAAoB,CAAA;AAEzC,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,UAAU,CAAA;IACpB,eAAe,EAAE,iBAAiB,CAAA;IAClC,YAAY,EAAE,cAAc,CAAA;IAC5B,eAAe,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC3E,YAAY,EAAE,cAAc,CAAA;IAC5B,eAAe,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAA;IAChD,UAAU,EAAE,YAAY,CAAA;IACxB,kBAAkB,EAAE,oBAAoB,CAAA;IACxC,aAAa,EAAE,CAAC,UAAU,EAAE,YAAY,KAAK,IAAI,CAAA;IACjD,WAAW,EAAE,WAAW,CAAA;IACxB,cAAc,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAA;IAClD,eAAe,EAAE,eAAe,CAAA;IAChC,kBAAkB,EAAE,CAAC,eAAe,EAAE,eAAe,KAAK,IAAI,CAAA;IAC9D,WAAW,EAAE,aAAa,CAAA;IAC1B,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAA;IACZ,0CAA0C;IAC1C,aAAa,EAAE,aAAa,CAAA;IAC5B,qCAAqC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC;AAMD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,UAAU,CAAA;IACrB,eAAe,CAAC,EAAE,iBAAiB,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,cAAc,CAAA;IAC7B,UAAU,CAAC,EAAE,YAAY,CAAA;IACzB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,WAAW,CAAC,EAAE,aAAa,CAAA;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;CAC5B;AA2CD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAkB,EAClB,eAAsB,EACtB,OAAO,EAAE,WAAwB,EACjC,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,cAAc,EAC1B,WAAW,EAAE,eAA0B,EACvC,eAAe,EAAE,mBAA+B,EAChD,WAAgB,EAChB,UAAwB,GACzB,EAAE,kBAAkB,2CA+IpB;AAED,wBAAgB,QAAQ,sBAMvB;AAED,kFAAkF;AAClF,wBAAgB,gBAAgB,6BAE/B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,i3BAoBvB,CAAA"}