@moldable-ai/ui 0.2.29 → 0.2.31

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

@@ -4,6 +4,7 @@ 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
@@ -19,8 +20,9 @@ export interface ToolbarIconButtonProps extends Omit<IconButtonProps, 'size'> {
 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, ...props }: ToolbarControlGroupProps): import("react/jsx-runtime").JSX.Element;
+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;

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

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

@@ -10,19 +10,26 @@ 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 }));
+    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);
-    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 }));
+    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, ...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)]'
+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 }) {
-    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 }));
+    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, {}) }));
@@ -35,6 +42,6 @@ function ToolbarOverflowMenu({ items, label = 'More actions', onSelectItem, tool
     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 }));
+    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":"AAEA,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,qBAAqB,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,MAAM,MAAM,+BAA+B,GAAG;IAC5C,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,eAAe,CAAC,CAAA;KAC/C,CAAA;IACD,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC,CAAA;KAC3C,CAAA;IACD,UAAU,CAAC,EAAE;QACX,QAAQ,EAAE,MAAM,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;KACjB,CAAA;IACD,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;KAC9B,CAAA;CACF,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC,CAAA;AAEvD,MAAM,WAAW,iCAAiC;IAChD,OAAO,EAAE,CAAC,CAAA;IACV,QAAQ,EAAE,+BAA+B,CAAA;CAC1C;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,uBAAuB,CAAA;IAC7B,OAAO,EAAE,CAAC,CAAA;IACV,WAAW,EAAE,UAAU,GAAG,QAAQ,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE;QACf,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,OAAO,CAAC,EAAE;YACR,OAAO,CAAC,EAAE,OAAO,CAAA;SAClB,CAAA;KACF,CAAA;IACD,UAAU,CAAC,EAAE;QACX,GAAG,CAAC,EAAE,OAAO,CAAA;QACb,WAAW,CAAC,EAAE,OAAO,CAAA;QACrB,SAAS,CAAC,EAAE,OAAO,CAAA;QACnB,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,cAAc,CAAC,EAAE,OAAO,CAAA;QACxB,uBAAuB,CAAC,EAAE,OAAO,CAAA;QACjC,qBAAqB,CAAC,EAAE,OAAO,CAAA;QAC/B,YAAY,CAAC,EAAE,OAAO,CAAA;KACvB,CAAA;IACD,IAAI,CAAC,EAAE;QACL,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAA;QAC7D,WAAW,CAAC,EAAE,OAAO,CAAA;KACtB,CAAA;IACD,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AASD,eAAO,MAAM,mCAAmC;;;;;;;EAStC,CAAA;AAoBV,eAAO,MAAM,qCAAqC,oCACf,CAAA;AACnC,eAAO,MAAM,qCAAqC,6BAA6B,CAAA;AAC/E,eAAO,MAAM,iCAAiC,iCAAiC,CAAA;AAC/E,eAAO,MAAM,sCAAsC,6CACP,CAAA;AAE5C,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,OAAO,iCAAiC,CAAA;IAC9C,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,SAAS,CAAA;IACf,IAAI,EAAE,SAAS,CAAA;IACf,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAgCD,wBAAgB,uBAAuB,IACnC,iCAAiC,GACjC,SAAS,CAEZ;AA2BD,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CA6DtE;AAED,wBAAgB,4BAA4B,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,CAa1E;AAsBD,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,0BAA0B,GAClC,IAAI,CAqDN;AA8DD,wBAAgB,uCAAuC,IAAI,MAAM,IAAI,CAuBpE;AAqCD,wBAAgB,6BAA6B,IAAI,IAAI,CAepD"}

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"}

package/dist/lib/theme.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
 import { TooltipProvider } from '../components/ui/tooltip.js';
+import { resolvePlatformPack } from '../tokens/contracts.js';
 const ThemeContext = createContext(null);
 const STORAGE_KEY = 'moldable-theme';
 function getSystemTheme() {
@@ -22,14 +23,16 @@ function getUrlTheme() {
     }
     return null;
 }
-function getStoredTheme() {
+function getStoredTheme(storageKey = STORAGE_KEY) {
     if (typeof window === 'undefined')
         return 'system';
     // URL parameter takes precedence (for iframe embedding)
     const urlTheme = getUrlTheme();
     if (urlTheme)
         return urlTheme;
-    const stored = localStorage.getItem(STORAGE_KEY);
+    if (!storageKey)
+        return 'system';
+    const stored = localStorage.getItem(storageKey);
     if (stored === 'light' || stored === 'dark' || stored === 'system') {
         return stored;
     }
@@ -41,36 +44,109 @@ function resolveTheme(theme) {
     }
     return theme;
 }
-export function ThemeProvider({ children }) {
-    const [theme, setThemeState] = useState(() => getStoredTheme());
-    const [resolvedTheme, setResolvedTheme] = useState(() => resolveTheme(theme));
-    const setTheme = useCallback((newTheme) => {
-        setThemeState(newTheme);
-        localStorage.setItem(STORAGE_KEY, newTheme);
+export function ThemeProvider({ children, platform = 'macos', platformVersion = '27', uiTheme: uiThemeProp = 'moldable', sidebarStyle: sidebarStyleProp, appearance: appearanceProp, controlSize: controlSizeProp = 'medium', materialContext: materialContextProp = 'content', preferences = {}, storageKey = STORAGE_KEY, }) {
+    const [platformSelection, setPlatformSelection] = useState(platform);
+    const [platformVersionSelection, setPlatformVersionSelection] = useState(platformVersion);
+    const platformPack = resolvePlatformPack(platformSelection, platformVersionSelection);
+    const [uiTheme, setUIThemeState] = useState(uiThemeProp);
+    const [sidebarStyle, setSidebarStyle] = useState(() => sidebarStyleProp ?? 'edge-to-edge');
+    const [appearance, setAppearanceState] = useState(() => appearanceProp ?? getStoredTheme(storageKey));
+    const [resolvedAppearance, setResolvedAppearance] = useState(() => resolveTheme(appearance));
+    const [controlSize, setControlSize] = useState(controlSizeProp);
+    const [materialContext, setMaterialContext] = useState(materialContextProp);
+    const setAppearance = useCallback((newAppearance) => {
+        setAppearanceState(newAppearance);
+        if (storageKey && typeof window !== 'undefined') {
+            localStorage.setItem(storageKey, newAppearance);
+        }
+    }, [storageKey]);
+    const setPlatformPack = useCallback((nextPlatform, nextVersion) => {
+        setPlatformSelection(nextPlatform);
+        setPlatformVersionSelection(nextVersion);
     }, []);
-    // Apply theme to document
+    const setUITheme = useCallback((nextTheme) => {
+        setUIThemeState(nextTheme);
+        if (sidebarStyleProp === undefined) {
+            setSidebarStyle('edge-to-edge');
+        }
+    }, [sidebarStyleProp]);
+    useEffect(() => setPlatformSelection(platform), [platform]);
+    useEffect(() => setPlatformVersionSelection(platformVersion), [platformVersion]);
+    useEffect(() => {
+        setUIThemeState(uiThemeProp);
+        setSidebarStyle(sidebarStyleProp ?? 'edge-to-edge');
+    }, [sidebarStyleProp, uiThemeProp]);
     useEffect(() => {
-        const resolved = resolveTheme(theme);
-        setResolvedTheme(resolved);
+        if (appearanceProp)
+            setAppearanceState(appearanceProp);
+    }, [appearanceProp]);
+    useEffect(() => setControlSize(controlSizeProp), [controlSizeProp]);
+    useEffect(() => setMaterialContext(materialContextProp), [materialContextProp]);
+    useEffect(() => {
+        const resolved = resolveTheme(appearance);
+        setResolvedAppearance(resolved);
         const root = document.documentElement;
         root.classList.remove('light', 'dark');
         root.classList.add(resolved);
-    }, [theme]);
-    // Listen for system theme changes
+        root.dataset.uiTheme = uiTheme;
+        root.dataset.uiPlatform = platformPack.platform;
+        root.dataset.uiPlatformVersion = platformPack.version;
+        root.dataset.uiPlatformPack = platformPack.id;
+        root.dataset.uiSidebarStyle = sidebarStyle;
+        root.dataset.uiAppearance = resolved;
+        root.dataset.controlSize = controlSize;
+        root.dataset.materialContext = materialContext;
+        root.dataset.contrast = preferences.contrast ?? 'system';
+        root.dataset.transparency = preferences.transparency ?? 'system';
+        root.dataset.motion = preferences.motion ?? 'system';
+    }, [
+        appearance,
+        controlSize,
+        materialContext,
+        preferences.contrast,
+        preferences.motion,
+        preferences.transparency,
+        platformPack.id,
+        platformPack.platform,
+        platformPack.version,
+        sidebarStyle,
+        uiTheme,
+    ]);
     useEffect(() => {
-        if (theme !== 'system')
+        if (appearance !== 'system')
             return;
         const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
         const handleChange = () => {
             const resolved = getSystemTheme();
-            setResolvedTheme(resolved);
+            setResolvedAppearance(resolved);
             document.documentElement.classList.remove('light', 'dark');
             document.documentElement.classList.add(resolved);
+            document.documentElement.dataset.uiAppearance = resolved;
         };
         mediaQuery.addEventListener('change', handleChange);
         return () => mediaQuery.removeEventListener('change', handleChange);
-    }, [theme]);
-    return (_jsx(ThemeContext.Provider, { value: { theme, resolvedTheme, setTheme }, children: _jsx(TooltipProvider, { children: children }) }));
+    }, [appearance]);
+    return (_jsx(ThemeContext.Provider, { value: {
+            uiTheme,
+            setUITheme,
+            platform: platformPack.platform,
+            platformVersion: platformPack.version,
+            platformPack,
+            setPlatformPack,
+            sidebarStyle,
+            setSidebarStyle,
+            appearance,
+            resolvedAppearance,
+            setAppearance,
+            controlSize,
+            setControlSize,
+            materialContext,
+            setMaterialContext,
+            preferences,
+            theme: appearance,
+            resolvedTheme: resolvedAppearance,
+            setTheme: setAppearance,
+        }, children: _jsx(TooltipProvider, { children: children }) }));
 }
 export function useTheme() {
     const context = useContext(ThemeContext);
@@ -79,6 +155,10 @@ export function useTheme() {
     }
     return context;
 }
+/** Internal-friendly optional access for components that also work standalone. */
+export function useOptionalTheme() {
+    return useContext(ThemeContext);
+}
 /**
  * Inline script to prevent theme flash on page load.
  * Add this to your <head> in layout.tsx:
@@ -100,5 +180,13 @@ export const themeScript = `
     theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
   document.documentElement.classList.add(theme);
+  document.documentElement.dataset.uiTheme = 'moldable';
+  document.documentElement.dataset.uiPlatform = 'macos';
+  document.documentElement.dataset.uiPlatformVersion = '27';
+  document.documentElement.dataset.uiPlatformPack = 'macos-27';
+  document.documentElement.dataset.uiSidebarStyle = 'edge-to-edge';
+  document.documentElement.dataset.uiAppearance = theme;
+  document.documentElement.dataset.controlSize = 'medium';
+  document.documentElement.dataset.materialContext = 'content';
 })();
 `;

package/dist/tokens/contracts.d.ts

@@ -0,0 +1,79 @@
+export type UITheme = 'platform' | 'moldable';
+export type UIPlatform = 'macos' | 'windows' | 'web';
+export type UIPlatformVersion = string;
+/**
+ * A component recipe can intentionally come from a different versioned
+ * platform source than the application's base platform pack.
+ *
+ * Public names describe the anatomy an app is choosing. The registry below
+ * records which immutable platform source defines each recipe.
+ */
+export type UISidebarStyle = 'platform' | 'floating' | 'edge-to-edge';
+export type PlatformPackId = `${UIPlatform}-${string}`;
+export interface UIPlatformPack {
+    id: PlatformPackId;
+    platform: UIPlatform;
+    version: UIPlatformVersion;
+    capabilities: {
+        nativeMaterials: boolean;
+        nativeWindowChrome: boolean;
+        overlayScrollbars: boolean;
+    };
+}
+export type UIAppearance = 'light' | 'dark' | 'system';
+export type ResolvedUIAppearance = Exclude<UIAppearance, 'system'>;
+export type ControlSize = 'mini' | 'small' | 'medium' | 'large' | 'xl';
+export type LayoutDensity = 'compact' | 'regular' | 'comfortable';
+export type MaterialThickness = 'ultra-thick' | 'thick' | 'medium' | 'thin' | 'ultra-thin';
+export type MaterialContext = 'content' | 'over-glass';
+export type ContrastPreference = 'system' | 'standard' | 'increased';
+export type TransparencyPreference = 'system' | 'standard' | 'reduced';
+export type MotionPreference = 'system' | 'standard' | 'reduced';
+export interface UIPreferences {
+    contrast?: ContrastPreference;
+    transparency?: TransparencyPreference;
+    motion?: MotionPreference;
+}
+export declare const CONTROL_SIZES: readonly ["mini", "small", "medium", "large", "xl"];
+export declare const MATERIAL_THICKNESSES: readonly ["ultra-thick", "thick", "medium", "thin", "ultra-thin"];
+export declare const SIDEBAR_STYLES: {
+    readonly platform: {
+        readonly id: "platform";
+        readonly sourcePlatform: null;
+        readonly sourceVersion: null;
+    };
+    readonly floating: {
+        readonly id: "floating";
+        readonly sourcePlatform: "macos";
+        readonly sourceVersion: "26";
+    };
+    readonly 'edge-to-edge': {
+        readonly id: "edge-to-edge";
+        readonly sourcePlatform: "macos";
+        readonly sourceVersion: "27";
+    };
+};
+export declare const PLATFORM_PACKS: {
+    readonly 'macos-27': {
+        readonly id: "macos-27";
+        readonly platform: "macos";
+        readonly version: "27";
+        readonly capabilities: {
+            readonly nativeMaterials: true;
+            readonly nativeWindowChrome: true;
+            readonly overlayScrollbars: true;
+        };
+    };
+    readonly 'web-default': {
+        readonly id: "web-default";
+        readonly platform: "web";
+        readonly version: "default";
+        readonly capabilities: {
+            readonly nativeMaterials: false;
+            readonly nativeWindowChrome: false;
+            readonly overlayScrollbars: false;
+        };
+    };
+};
+export declare function resolvePlatformPack(platform: UIPlatform, version: UIPlatformVersion): UIPlatformPack;
+//# sourceMappingURL=contracts.d.ts.map

package/dist/tokens/contracts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contracts.d.ts","sourceRoot":"","sources":["../../src/tokens/contracts.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,UAAU,GAAG,UAAU,CAAA;AAE7C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,CAAA;AAEpD,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAA;AAEtC;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,CAAA;AAErE,MAAM,MAAM,cAAc,GAAG,GAAG,UAAU,IAAI,MAAM,EAAE,CAAA;AAEtD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,cAAc,CAAA;IAClB,QAAQ,EAAE,UAAU,CAAA;IACpB,OAAO,EAAE,iBAAiB,CAAA;IAC1B,YAAY,EAAE;QACZ,eAAe,EAAE,OAAO,CAAA;QACxB,kBAAkB,EAAE,OAAO,CAAA;QAC3B,iBAAiB,EAAE,OAAO,CAAA;KAC3B,CAAA;CACF;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEtD,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAA;AAElE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAA;AAEtE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GACzB,aAAa,GACb,OAAO,GACP,QAAQ,GACR,MAAM,GACN,YAAY,CAAA;AAEhB,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,YAAY,CAAA;AAEtD,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAA;AAEpE,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;AAEtE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;AAEhE,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,YAAY,CAAC,EAAE,sBAAsB,CAAA;IACrC,MAAM,CAAC,EAAE,gBAAgB,CAAA;CAC1B;AAED,eAAO,MAAM,aAAa,qDAMiB,CAAA;AAE3C,eAAO,MAAM,oBAAoB,mEAMgB,CAAA;AAEjD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;CAuB1B,CAAA;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;CAqBwB,CAAA;AAEnD,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,iBAAiB,GACzB,cAAc,CAMhB"}