@moldable-ai/ui 0.2.21 → 0.2.24

package/src/lib/host-file-dialog.md

@@ -0,0 +1,76 @@
+# Host file dialog
+
+`useHostFileDialog()`, `openFileDialogWithHost()`, and
+`saveFileDialogWithHost()` opt a call site into the host-owned macOS open/save
+sheet when Moldable advertises `fileDialog`.
+
+The fallback is intentionally only a routing signal:
+
+```tsx
+const fileDialog = useHostFileDialog()
+
+async function chooseFiles() {
+  const result = await fileDialog.open({
+    title: 'Import notes',
+    filters: [{ name: 'Text', extensions: ['txt', 'md'] }],
+    defaultLocation: 'documents',
+    properties: { multiple: true },
+  })
+
+  if (result.status === 'fallback') {
+    portableFileInputRef.current?.click()
+    return
+  }
+  if (result.status === 'completed') {
+    await importSelectedPaths(result.paths)
+  }
+}
+
+return (
+  <>
+    <Button onClick={chooseFiles}>Import</Button>
+    <input ref={portableFileInputRef} type="file" multiple hidden />
+  </>
+)
+```
+
+This SDK does not build or trigger the portable `<input type="file">` flow.
+Callers own that cross-platform UI and route to it when the result is
+`{ status: "fallback" }`.
+
+## Result representation
+
+For v1, completed native results contain absolute path strings. This preserves
+parity with Moldable's legacy app-facing `moldable:select-folder` API; there is
+currently no external-file asset or opaque-handle scheme. A selected path is
+not additional filesystem authority: this service only selects a location and
+adds no read or write API.
+
+## Defined v1 behavior
+
+- `filters` accepts at most 32 named filters. Each filter has 1–64 extensions,
+  written without a leading dot. On macOS the validated names describe the
+  filter groups, while AppKit receives the deduplicated union of their
+  extensions as its allowed file types.
+- `defaultLocation` maps `documents`, `downloads`, and `desktop` to those
+  conventional folders under the user's home directory; `home` maps to the
+  home directory; `appData` maps to the requesting app's
+  `workspaces/{workspaceId}/apps/{appId}/data` directory.
+- Open `multiple` defaults to `false`.
+- Open `directories` defaults to `false`; when true the panel chooses
+  directories instead of files.
+- Open and save `createDirectories` default to `false`; when true AppKit shows
+  its New Folder control.
+- Open `showHidden` defaults to `false`; when true hidden entries are initially
+  visible. The user may still use AppKit's standard hidden-file shortcut.
+- Save `defaultName` initializes the filename field and must be a filename, not
+  a path.
+- `title` and `buttonLabel` set AppKit's panel title and confirmation prompt.
+  AppKit sheets may not visibly render a titlebar, but the value is still
+  applied to the panel.
+- Unknown and mode-inappropriate properties are rejected before presentation.
+
+The panel is presented as a sheet owned by the requesting embedded or dedicated
+host window. User cancellation resolves with `{ status: "cancelled" }`. An
+`AbortSignal` abort rejects with `AbortError` and asks the host to cancel the
+request-ID-keyed AppKit panel.

package/src/lib/host-native-menu.md

@@ -0,0 +1,67 @@
+# Host native menu
+
+`useHostNativeMenu()` and `openNativeMenuWithHost()` opt a call site into a
+host-owned AppKit menu when the Moldable host advertises `nativeMenu`. The
+portable Radix `ContextMenu` remains the cross-platform implementation and is
+owned by the caller.
+
+The intended integration shape is to try the native menu from the same pointer
+handler that would open the portable menu, then leave or restore the portable
+path when the host is unavailable:
+
+```tsx
+const nativeMenu = useHostNativeMenu()
+const [portableOpen, setPortableOpen] = useState(false)
+
+async function handleContextMenu(event: React.MouseEvent) {
+  if (!nativeMenu.available) {
+    // Do not prevent the event. ContextMenuTrigger opens the portable menu.
+    return
+  }
+
+  event.preventDefault()
+  const result = await nativeMenu.open(menuItems, {
+    position: { x: event.clientX, y: event.clientY },
+  })
+
+  if (result.status === 'completed') {
+    runCommand(result.selectedId)
+  } else if (result.status === 'fallback') {
+    setPortableOpen(true)
+  }
+}
+
+return (
+  <ContextMenu open={portableOpen} onOpenChange={setPortableOpen}>
+    <ContextMenuTrigger asChild>
+      <div onContextMenu={handleContextMenu}>{children}</div>
+    </ContextMenuTrigger>
+    <ContextMenuContent>{/* existing portable items */}</ContextMenuContent>
+  </ContextMenu>
+)
+```
+
+The request requires exactly one app-viewport placement: an `anchor` element or
+rect, or a pointer `position`. Item depth is capped at 3 and the whole tree at
+200 items. Selectable item IDs are non-empty and unique across the tree.
+Checkboxes support `true`, `false`, and `"mixed"`; radio items reject
+`"mixed"`.
+
+`destructive` is reserved in v1. It is validated and carried through the
+service but is deliberately not rendered with native destructive styling. The
+portable menu may continue to render its destructive variant.
+
+Shortcuts use AppKit's
+[`NSMenuItem.keyEquivalent`](https://developer.apple.com/documentation/appkit/nsmenuitem/keyequivalent)
+and modifier mask so AppKit draws the conventional shortcut label. The menu is
+a transient popup attached to the requesting host window and is never installed
+as the application's main menu, so these values do not register global app
+shortcuts. AppKit may still match the equivalent while that popup is actively
+tracking; callers must treat the field as display metadata and keep command
+handling keyed by the returned `selectedId`.
+
+Click-away and Escape resolve with `{ status: "cancelled" }`. An explicit
+`AbortSignal` abort rejects with `AbortError` and asks the host to call
+`cancelTracking()` on the request-ID-keyed open menu. When native menus are not
+advertised, the helper resolves with `{ status: "fallback" }` without opening
+renderer UI.

package/src/lib/host-share.md

@@ -0,0 +1,36 @@
+# Host share
+
+`useHostShare()` and `shareWithHost()` provide one share API across Moldable
+hosts and ordinary browsers.
+
+```tsx
+const share = useHostShare()
+const buttonRef = useRef<HTMLButtonElement>(null)
+
+await share.share(
+  [
+    { kind: 'text', text: 'A useful note' },
+    { kind: 'url', url: 'https://example.com/note' },
+  ],
+  { anchor: buttonRef.current ?? undefined },
+)
+```
+
+The decision flow is:
+
+1. When the host advertises `share`, the SDK sends a host-service request. The
+   host translates the supplied element or rect from app-viewport coordinates
+   and presents the native picker.
+2. Without that advertisement, text and URL items use `navigator.share` when
+   Web Share is available.
+3. Otherwise the promise resolves with `status: "fallback"` and returns the
+   original items. The caller can then expose its own copy or download UI.
+   File references always take this path outside a native Moldable host because
+   a browser cannot dereference a workspace-local path.
+
+Native dismissal is represented by the envelope's terminal `cancelled` status;
+the SDK maps it to `{ status: "cancelled", method: "native" }`. Web Share
+dismissal resolves with the equivalent `web` result. An explicit `AbortSignal`
+abort rejects with `AbortError`; on the native path the envelope also asks the
+host to dismiss the open picker. `timeoutMs` can lower the host's default
+timeout.

package/src/lib/host-web-surface.md

@@ -0,0 +1,66 @@
+# Host web surface
+
+`useHostWebSurface()` controls a native child webview supplied by the Moldable
+desktop host. It is progressive enhancement: `available` is `true` only in a
+dedicated app window whose manifest declares:
+
+```json
+{
+  "nativeCapabilities": ["webSurface"]
+}
+```
+
+Embedded app views, older hosts, and apps without the declaration receive
+`available: false`. Keep an iframe or reader implementation for those cases.
+
+```tsx
+import { useEffect } from 'react'
+import { useHostWebSurface } from '@moldable-ai/ui'
+
+function LivePage({
+  url,
+  bounds,
+}: {
+  url: string
+  bounds: { x: number; y: number; width: number; height: number }
+}) {
+  const { available, create, destroy, onNavState, setBounds } =
+    useHostWebSurface()
+
+  useEffect(() => {
+    if (!available) return
+
+    void create('active-tab', url, bounds)
+    const unsubscribe = onNavState((state) => {
+      if (state.surfaceId === 'active-tab') {
+        console.log(state.url, state.canGoBack, state.canGoForward)
+      }
+    })
+
+    return () => {
+      unsubscribe()
+      void destroy('active-tab')
+    }
+  }, [available, create, destroy, onNavState, url])
+
+  useEffect(() => {
+    if (available) {
+      void setBounds('active-tab', bounds)
+    }
+  }, [available, bounds, setBounds])
+
+  return available ? null : <iframe title="Live page" src={url} />
+}
+```
+
+Bounds are logical pixels relative to the app content viewport. Re-send them
+when a `ResizeObserver` reports a layout change. The host also re-clamps the
+last requested bounds after native window resizes.
+
+Native child webviews paint above app DOM. Call `setVisible(surfaceId, false)`
+before showing a renderer-owned dialog or overlay, then restore visibility
+when it closes. Host-native menus already paint above the surface.
+
+All methods accept the standard host-service `{ signal, timeoutMs }` options.
+Invalid input throws a `TypeError`; cancellation, timeout, and host failures
+reject with the same errors as other host-service adapters.

package/src/styles/index.css

@@ -186,6 +186,11 @@
   --font-sans: var(--font-family-ui);
   --font-mono: var(--font-family-mono);
 
+  --text-11: 11px;
+  --text-13: 13px;
+  --text-16: 16px;
+  --text-18: 18px;
+  --text-24: 24px;
   --text-ui-display: var(--type-display-size);
   --text-ui-display--line-height: var(--type-display-line-height);
   --text-ui-display--font-weight: var(--type-display-weight);
@@ -210,8 +215,15 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
   --radius-control: var(--shape-control);
+  --radius-checkbox: var(--shape-checkbox);
   --radius-container: var(--shape-container);
   --radius-overlay: var(--shape-overlay);
+  --radius-popover: var(--shape-popover);
+  --radius-card: var(--shape-card);
+  --radius-group: var(--shape-group);
+  --radius-panel: var(--shape-panel);
+  --radius-dialog: var(--shape-dialog);
+  --radius-pill: var(--shape-pill);
   --radius-window: var(--window-corner-radius);
 
   --spacing-control-gap: var(--density-control-gap);
@@ -231,6 +243,7 @@
   --ease-spring: var(--motion-ease-spring);
   --shadow-panel: var(--material-shadow-panel);
   --shadow-overlay: var(--material-shadow-overlay);
+  --shadow-dialog: var(--material-shadow-dialog);
   --shadow-window: var(--material-shadow-window);
 
   --color-background: var(--background);
@@ -273,6 +286,12 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-neutral: var(--neutral);
+  --color-neutral-foreground: var(--neutral-foreground);
+  --color-pending: var(--pending);
+  --color-pending-foreground: var(--pending-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -699,39 +718,46 @@
     system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-family-mono: ui-monospace, Menlo, Consolas, monospace;
 
-  --type-display-size: 2rem;
-  --type-display-line-height: 2.25rem;
-  --type-display-weight: 650;
-  --type-display-tracking: -0.035em;
-  --type-heading-size: 1.5rem;
-  --type-heading-line-height: 1.75rem;
-  --type-heading-weight: 650;
-  --type-heading-tracking: -0.025em;
-  --type-title-size: 1.125rem;
-  --type-title-line-height: 1.5rem;
+  --type-display-size: var(--text-24);
+  --type-display-line-height: 28px;
+  --type-display-weight: 600;
+  --type-display-tracking: -0.02em;
+  --type-heading-size: var(--text-18);
+  --type-heading-line-height: 22px;
+  --type-heading-weight: 600;
+  --type-heading-tracking: -0.012em;
+  --type-title-size: var(--text-16);
+  --type-title-line-height: 20px;
   --type-title-weight: 600;
-  --type-title-tracking: -0.015em;
-  --type-body-size: 0.8125rem;
-  --type-body-line-height: 1.25rem;
-  --type-label-size: 0.75rem;
-  --type-label-line-height: 1rem;
-  --type-caption-size: 0.625rem;
-  --type-caption-line-height: 0.75rem;
+  --type-title-tracking: -0.006em;
+  --type-body-size: var(--text-13);
+  --type-body-line-height: 18px;
+  --type-label-size: var(--text-13);
+  --type-label-line-height: 16px;
+  --type-caption-size: var(--text-11);
+  --type-caption-line-height: 14px;
 
   --density-control-height-xs: 1.5rem;
-  --density-control-height-sm: 2rem;
-  --density-control-height-md: 2.25rem;
-  --density-control-height-lg: 2.5rem;
-  --density-control-gap: 0.375rem;
-  --density-control-padding-inline: 0.75rem;
-  --density-row-height: 2.25rem;
-  --density-toolbar-height: 2.5rem;
-  --density-pane-padding: 0.75rem;
-  --density-section-gap: 1rem;
-
-  --shape-control: 0.5rem;
-  --shape-container: 0.65rem;
-  --shape-overlay: 0.75rem;
+  --density-control-height-sm: 1.75rem;
+  --density-control-height-md: 2rem;
+  --density-control-height-lg: 2.25rem;
+  --density-control-gap: 0.3125rem;
+  --density-control-padding-inline: 0.625rem;
+  --density-row-height: 2rem;
+  --density-toolbar-height: 2.375rem;
+  --density-pane-padding: 0.625rem;
+  --density-section-gap: 0.875rem;
+
+  --shape-control: 10px;
+  --shape-checkbox: 4px;
+  --shape-popover: 12px;
+  --shape-card: 12px;
+  --shape-group: 12px;
+  --shape-panel: 16px;
+  --shape-dialog: 22px;
+  --shape-pill: 9999px;
+  --shape-container: var(--shape-card);
+  --shape-overlay: var(--shape-popover);
 
   --motion-duration-instant: 80ms;
   --motion-duration-fast: 120ms;
@@ -742,7 +768,7 @@
   --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
   --motion-ease-spring: cubic-bezier(0.22, 1.15, 0.36, 1);
 
-  --radius: 0.65rem;
+  --radius: var(--shape-card);
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -754,22 +780,22 @@
   --secondary: oklch(0.967 0.001 286.375);
   --secondary-foreground: oklch(0.21 0.006 285.885);
   --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
+  --muted-foreground: oklch(0.5 0.016 285.938);
   --accent: oklch(0.967 0.001 286.375);
   --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.5866 0.1994 31.76);
   --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.7145 0.185 45.03);
+  --ring: oklch(0.2 0 0 / 48%);
   --model-effort-blue: #339cff;
   --model-effort-purple: #924ff7;
   --model-effort-sparkle: #fff;
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --chart-1: var(--info);
+  --chart-2: var(--success);
+  --chart-3: var(--pending);
+  --chart-4: var(--neutral);
+  --chart-5: var(--accent-foreground);
   --sidebar: oklch(0.967 0.001 286.375);
   --sidebar-foreground: oklch(0.141 0.005 285.823);
   --sidebar-primary: oklch(0.7145 0.185 45.03);
@@ -777,15 +803,21 @@
   --sidebar-accent: oklch(0.9212 0.0029 264.54);
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
   --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.7145 0.185 45.03);
-  --warning: oklch(0.75 0.15 75);
-  --warning-foreground: oklch(0.35 0.1 75);
-  --success: oklch(0.65 0.2 145);
-  --success-foreground: oklch(0.985 0 0);
-  --status-running: oklch(0.65 0.2 145);
-  --status-stopped: oklch(0.552 0.016 285.938);
-  --status-pending: oklch(0.75 0.15 75);
-  --status-error: oklch(0.5866 0.1994 31.76);
+  --sidebar-ring: var(--ring);
+  --info: oklch(0.6 0.16 250);
+  --info-foreground: oklch(0.42 0.14 250);
+  --neutral: oklch(0.64 0.012 286);
+  --neutral-foreground: oklch(0.43 0.012 286);
+  --pending: oklch(0.64 0.14 75);
+  --pending-foreground: oklch(0.42 0.12 75);
+  --warning: oklch(0.64 0.14 75);
+  --warning-foreground: oklch(0.4 0.12 75);
+  --success: oklch(0.53 0.17 145);
+  --success-foreground: oklch(0.4 0.13 145);
+  --status-running: var(--success);
+  --status-stopped: var(--neutral);
+  --status-pending: var(--pending);
+  --status-error: var(--destructive);
 
   --text-primary: var(--foreground);
   --text-secondary: var(--muted-foreground);
@@ -860,10 +892,15 @@
   --material-clear-blur: 12px;
   --material-clear-saturation: 1.24;
   --material-shadow-panel:
-    0 1px 2px oklch(0.15 0.005 285 / 6%), 0 4px 12px oklch(0.15 0.005 285 / 4%);
+    inset 0 0 0 1px var(--separator), 0 1px 2px oklch(0.15 0.005 285 / 5%),
+    0 5px 14px oklch(0.15 0.005 285 / 5%);
   --material-shadow-overlay:
-    0 8px 24px oklch(0.15 0.005 285 / 12%), 0 2px 6px oklch(0.15 0.005 285 / 8%);
-  --material-shadow-window: 0 24px 80px oklch(0.1 0.005 285 / 22%);
+    inset 0 0 0 1px var(--separator), 0 4px 12px oklch(0.12 0.004 285 / 9%),
+    0 16px 38px oklch(0.12 0.004 285 / 13%);
+  --material-shadow-dialog:
+    inset 0 0 0 1px var(--separator), 0 12px 32px oklch(0.1 0.004 285 / 12%),
+    0 32px 88px oklch(0.1 0.004 285 / 18%);
+  --material-shadow-window: 0 28px 96px oklch(0.1 0.005 285 / 24%);
 
   /*
    * Renderer boundary for embedded and standalone windows. The host may set
@@ -947,22 +984,22 @@
   --secondary: oklch(0.3375 0.0035 286.21);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.3375 0.0035 286.21);
-  --muted-foreground: oklch(0.705 0.015 286.067);
+  --muted-foreground: oklch(0.74 0.012 286);
   --accent: oklch(0.3375 0.0035 286.21);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.7145 0.185 45.03);
+  --ring: oklch(0.92 0 0 / 40%);
   --model-effort-blue: #339cff;
   --model-effort-purple: #ad7bf9;
   --model-effort-sparkle: #fff;
-  --chart-1: oklch(0.7145 0.185 45.03);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
+  --chart-1: var(--info);
+  --chart-2: var(--success);
+  --chart-3: var(--pending);
+  --chart-4: var(--neutral);
+  --chart-5: var(--accent-foreground);
   --sidebar: oklch(0.235 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.7145 0.185 45.03);
@@ -970,15 +1007,21 @@
   --sidebar-accent: oklch(0.3375 0.0035 286.21);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.7145 0.185 45.03);
-  --warning: oklch(0.8 0.12 75);
-  --warning-foreground: oklch(0.25 0.08 75);
+  --sidebar-ring: var(--ring);
+  --info: oklch(0.72 0.15 250);
+  --info-foreground: oklch(0.78 0.11 250);
+  --neutral: oklch(0.7 0.012 286);
+  --neutral-foreground: oklch(0.76 0.012 286);
+  --pending: oklch(0.79 0.12 80);
+  --pending-foreground: oklch(0.84 0.1 80);
+  --warning: oklch(0.79 0.12 80);
+  --warning-foreground: oklch(0.84 0.1 80);
   --success: oklch(0.7 0.18 145);
-  --success-foreground: oklch(0.235 0 0);
-  --status-running: oklch(0.7 0.18 145);
-  --status-stopped: oklch(0.705 0.015 286.067);
-  --status-pending: oklch(0.8 0.12 75);
-  --status-error: oklch(0.704 0.191 22.216);
+  --success-foreground: oklch(0.8 0.12 145);
+  --status-running: var(--success);
+  --status-stopped: var(--neutral);
+  --status-pending: var(--pending);
+  --status-error: var(--destructive);
   --material-regular-fill: color-mix(
     in oklch,
     var(--background) 68%,
@@ -1004,10 +1047,15 @@
   --material-clear-border: oklch(1 0 0 / 18%);
   --material-clear-highlight: oklch(1 0 0 / 10%);
   --material-shadow-panel:
-    0 1px 2px oklch(0 0 0 / 24%), 0 6px 16px oklch(0 0 0 / 16%);
+    inset 0 0 0 1px var(--separator), 0 2px 5px oklch(0 0 0 / 28%),
+    0 8px 22px oklch(0 0 0 / 22%);
   --material-shadow-overlay:
-    0 12px 32px oklch(0 0 0 / 34%), 0 2px 8px oklch(0 0 0 / 24%);
-  --material-shadow-window: 0 28px 96px oklch(0 0 0 / 48%);
+    inset 0 0 0 1px var(--separator), 0 8px 22px oklch(0 0 0 / 36%),
+    0 24px 56px oklch(0 0 0 / 46%);
+  --material-shadow-dialog:
+    inset 0 0 0 1px var(--separator), 0 16px 44px oklch(0 0 0 / 42%),
+    0 40px 112px oklch(0 0 0 / 58%);
+  --material-shadow-window: 0 32px 112px oklch(0 0 0 / 56%);
   /* Terminal - same dark look in dark mode */
   --terminal: oklch(0.16 0 0);
   --terminal-header: oklch(0.22 0 0);
@@ -1036,6 +1084,14 @@
     --separator-strong: color-mix(in oklch, var(--foreground) 54%, transparent);
     --control-hover: color-mix(in oklch, var(--foreground) 12%, transparent);
     --control-pressed: color-mix(in oklch, var(--foreground) 18%, transparent);
+    --shape-control: 6px;
+    --shape-checkbox: 3px;
+    --shape-popover: 6px;
+    --shape-card: 6px;
+    --shape-group: 6px;
+    --shape-panel: 6px;
+    --shape-dialog: 6px;
+    --shape-pill: 6px;
     --material-regular-fill: color-mix(
       in oklch,
       var(--material-regular-fallback) 92%,
@@ -1048,6 +1104,10 @@
       transparent
     );
     --material-clear-border: var(--separator-strong);
+    --material-shadow-panel: inset 0 0 0 1px var(--separator-strong);
+    --material-shadow-overlay: inset 0 0 0 1px var(--separator-strong);
+    --material-shadow-dialog: inset 0 0 0 1px var(--separator-strong);
+    --material-shadow-window: inset 0 0 0 1px var(--separator-strong);
     --window-border: var(--separator-strong);
   }
 }
@@ -1067,6 +1127,14 @@
   --separator-strong: color-mix(in oklch, var(--foreground) 54%, transparent);
   --control-hover: color-mix(in oklch, var(--foreground) 12%, transparent);
   --control-pressed: color-mix(in oklch, var(--foreground) 18%, transparent);
+  --shape-control: 6px;
+  --shape-checkbox: 3px;
+  --shape-popover: 6px;
+  --shape-card: 6px;
+  --shape-group: 6px;
+  --shape-panel: 6px;
+  --shape-dialog: 6px;
+  --shape-pill: 6px;
   --material-regular-fill: color-mix(
     in oklch,
     var(--material-regular-fallback) 92%,
@@ -1079,6 +1147,10 @@
     transparent
   );
   --material-clear-border: var(--separator-strong);
+  --material-shadow-panel: inset 0 0 0 1px var(--separator-strong);
+  --material-shadow-overlay: inset 0 0 0 1px var(--separator-strong);
+  --material-shadow-dialog: inset 0 0 0 1px var(--separator-strong);
+  --material-shadow-window: inset 0 0 0 1px var(--separator-strong);
   --window-border: var(--separator-strong);
 }
 
@@ -1121,6 +1193,7 @@
     --material-saturation: 1;
     --material-shadow-panel: none;
     --material-shadow-overlay: none;
+    --material-shadow-dialog: none;
     --material-shadow-window: none;
   }
 }