@workbench-kit/react 0.0.2-prototype.0.2.5 → 0.0.2-prototype.0.2.8

package/README.md

@@ -0,0 +1,87 @@
+# `@workbench-kit/react`
+
+React primitives and workbench chrome for integrating hosts (browser, desktop
+shells, and other React hosts).
+
+Published on npm with the **`prototype`** dist tag.
+
+## Install
+
+```powershell
+pnpm add @workbench-kit/react@prototype @workbench-kit/tokens@prototype
+```
+
+Peer: React 19.
+
+## Styles
+
+Import once at app entry:
+
+```ts
+import '@workbench-kit/tokens/styles.css';
+import '@workbench-kit/react/styles.css';
+import '@workbench-kit/react/primitives.css';
+```
+
+## Quick start
+
+```tsx
+import { WorkbenchShell } from '@workbench-kit/react/workbench/shell';
+
+export function AppShell() {
+  return (
+    <div className="ui-workbench-host-root" style={{ height: '100vh' }}>
+      <WorkbenchShell
+        activityBar={{
+          items: [
+            { id: 'explorer', icon: <i className="codicon codicon-files" />, label: 'Explorer' },
+          ],
+        }}
+        rootClassName="ide-root"
+        secondaryArea={<main>Editor region</main>}
+        statusSections={[]}
+      />
+    </div>
+  );
+}
+```
+
+Full walkthrough: [Getting Started](../../docs/guides/getting-started.md).
+
+## Common subpaths
+
+| Subpath                                    | Purpose                                 |
+| ------------------------------------------ | --------------------------------------- |
+| `@workbench-kit/react/primitives`          | Buttons, editor chrome, library layouts |
+| `@workbench-kit/react/workbench/shell`     | Workbench shell / activity bar          |
+| `@workbench-kit/react/workbench/workspace` | Explorer, workspace editor panel        |
+| `@workbench-kit/react/workbench/chat`      | Chat panel and message surfaces         |
+| `@workbench-kit/react/overlay`             | Context menus, anchored overlays        |
+| `@workbench-kit/react/modal`               | Low-level modal frame                   |
+| `@workbench-kit/react/jdw`                 | JDW preview bridges                     |
+| `@workbench-kit/react/styles.css`          | Shell chrome CSS                        |
+
+Import **only** through `exports`. Do not deep-import `src/` paths.
+
+## Learn more
+
+| Doc                                                                    | Purpose                       |
+| ---------------------------------------------------------------------- | ----------------------------- |
+| [Getting Started](../../docs/guides/getting-started.md)                | Install + minimal shell       |
+| [Component Map](../../docs/guides/component-map.md)                    | Surface → Storybook / sample  |
+| [Sample Screens](../../docs/guides/sample-screens.md)                  | Example screen recipes        |
+| [Consumer Capabilities](../../docs/workbench/consumer-capabilities.md) | Props / when-to-use contracts |
+| [API Reference](../../docs/guides/api-reference.md)                    | Package export index          |
+
+## Local verification (this monorepo)
+
+```powershell
+pnpm install
+pnpm build:workbench-extensions
+pnpm dev
+pnpm dev:storybook
+```
+
+Storybook stays a curated set of interaction stories — not a full package gallery.
+Demo and story modules under this package are for development; published consumers
+rely on the `exports` map and CSS entry points above.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workbench-kit/react",
-  "version": "0.0.2-prototype.0.2.5",
+  "version": "0.0.2-prototype.0.2.8",
   "private": false,
   "type": "module",
   "exports": {
@@ -20,17 +20,17 @@
     "./workbench/management": "./src/workbench/management/index.ts",
     "./workbench/settings": "./src/workbench/settings/index.ts",
     "./workbench": "./src/workbench/index.ts",
-    "./workbench/activityBarOrder": "./src/workbench/activityBarOrder.ts",
-    "./workbench/markdown-preview": "./src/workbench/MarkdownPreview.tsx",
-    "./workbench/shell": "./src/workbench/shell.ts",
-    "./workbench/theme-provider": "./src/workbench/WorkbenchThemeProvider.tsx",
-    "./workbench/themePresets": "./src/workbench/themePresets.ts",
-    "./workbench/split-view": "./src/workbench/SplitView.tsx",
+    "./workbench/activityBarOrder": "./src/workbench/shell/activityBarOrder.ts",
+    "./workbench/markdown-preview": "./src/workbench/markdown/MarkdownPreview.tsx",
+    "./workbench/shell": "./src/workbench/shell/shell.ts",
+    "./workbench/theme-provider": "./src/workbench/theme/WorkbenchThemeProvider.tsx",
+    "./workbench/themePresets": "./src/workbench/theme/themePresets.ts",
+    "./workbench/split-view": "./src/workbench/shell/SplitView.tsx",
     "./workbench/workspace": "./src/workbench/workspace/index.ts",
     "./workbench/workspace/editor": "./src/workbench/workspace/WorkspaceEditor.tsx",
     "./workbench/workspace/explorer": "./src/workbench/workspace/WorkspaceExplorer.tsx",
     "./workbench/workspace/file-icon": "./src/icons/file-icon.ts",
-    "./workbench/commands": "./src/workbench/commands.ts",
+    "./workbench/commands": "./src/workbench/commands/commands.ts",
     "./jdw": "./src/jdw/index.ts",
     "./jdw/document": "./src/jdw/document.ts",
     "./jdw/parse": "./src/jdw/parse.ts",
@@ -57,15 +57,16 @@
     "@dnd-kit/core": "^6.3.1",
     "@vscode/codicons": "^0.0.45",
     "remark-gfm": "^4.0.1",
-    "@workbench-kit/platform": "0.0.2-prototype.0.2.5",
-    "@workbench-kit/adapters": "0.0.2-prototype.0.2.5",
-    "@workbench-kit/monaco": "0.0.2-prototype.0.2.5",
-    "@workbench-kit/runtime": "0.0.2-prototype.0.2.5",
-    "@workbench-kit/services": "0.0.2-prototype.0.2.5",
-    "@workbench-kit/jdw": "0.0.2-prototype.0.2.5",
-    "@workbench-kit/contracts": "0.0.2-prototype.0.2.5",
-    "@workbench-kit/tokens": "0.0.2-prototype.0.2.5",
-    "@workbench-kit/workspace": "0.0.2-prototype.0.2.5"
+    "rehype-sanitize": "^6.0.0",
+    "@workbench-kit/contracts": "0.0.2-prototype.0.2.8",
+    "@workbench-kit/adapters": "0.0.2-prototype.0.2.8",
+    "@workbench-kit/monaco": "0.0.2-prototype.0.2.8",
+    "@workbench-kit/runtime": "0.0.2-prototype.0.2.8",
+    "@workbench-kit/services": "0.0.2-prototype.0.2.8",
+    "@workbench-kit/tokens": "0.0.2-prototype.0.2.8",
+    "@workbench-kit/platform": "0.0.2-prototype.0.2.8",
+    "@workbench-kit/jdw": "0.0.2-prototype.0.2.8",
+    "@workbench-kit/workspace": "0.0.2-prototype.0.2.8"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -89,6 +90,7 @@
   },
   "scripts": {
     "test": "pnpm exec vitest run --config ../../vitest.config.ts src/widget-tree",
-    "typecheck": "tsc -p tsconfig.json --noEmit"
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "typecheck:exact-optional": "tsc -p typecheck-exact-optional/tsconfig.emit.json && tsc -p typecheck-exact-optional/tsconfig.json --noEmit"
   }
 }

package/src/index.ts

@@ -20,7 +20,7 @@ export type {
   WorkbenchIconRenderProps,
   WorkbenchIconResolver,
 } from './icons';
-export { commandMenuItemsToContextMenuItems } from './workbench/commands';
+export { commandMenuItemsToContextMenuItems } from './workbench/commands/commands';
 export {
   WorkbenchArtifactModeControls,
   WorkbenchArtifactPreview,
@@ -31,7 +31,7 @@ export {
   getWorkbenchPreviewRenderer,
   getWorkbenchPreviewRendererMatch,
   selectWorkbenchPreviewRenderer,
-} from './workbench/ArtifactShell';
+} from './workbench/shell/ArtifactShell';
 export type {
   WorkbenchArtifactDescriptor,
   WorkbenchArtifactMode,
@@ -44,7 +44,7 @@ export type {
   WorkbenchPreviewRendererContext,
   WorkbenchPreviewRendererMatch,
   WorkbenchPreviewRendererMatchReason,
-} from './workbench/ArtifactShell';
+} from './workbench/shell/ArtifactShell';
 export {
   WorkbenchCommandGroupShell,
   WorkbenchCommandList,
@@ -58,7 +58,7 @@ export {
   getWorkbenchCommandStatusLabel,
   groupWorkbenchCommands,
   isWorkbenchCommandRunnable,
-} from './workbench/CommandPalette';
+} from './workbench/commands/CommandPalette';
 export {
   WorkbenchShortcutCommandBridge,
   getWorkbenchShortcutCommandBindings,
@@ -66,7 +66,7 @@ export {
   matchesWorkbenchShortcut,
   runWorkbenchShortcutCommand,
   useWorkbenchShortcutCommands,
-} from './workbench/ShortcutCommandBridge';
+} from './workbench/commands/ShortcutCommandBridge';
 export type {
   WorkbenchCommandDescriptor,
   WorkbenchCommandDescriptorOverrides,
@@ -86,7 +86,7 @@ export type {
   WorkbenchCommandSideEffect,
   WorkbenchCommandStatus,
   WorkbenchCommandSuggestProps,
-} from './workbench/CommandPalette';
+} from './workbench/commands/CommandPalette';
 export type {
   UseWorkbenchShortcutCommandsOptions,
   WorkbenchShortcutCommandBinding,
@@ -98,7 +98,7 @@ export type {
   WorkbenchShortcutEventLike,
   WorkbenchShortcutMatchInput,
   WorkbenchShortcutPlatform,
-} from './workbench/ShortcutCommandBridge';
+} from './workbench/commands/ShortcutCommandBridge';
 export {
   WorkbenchConfirmationFlow,
   getWorkbenchConfirmationButtonVariant,
@@ -107,7 +107,7 @@ export {
   getWorkbenchConfirmationStatus,
   getWorkbenchConfirmationVariant,
   isWorkbenchConfirmationActionDisabled,
-} from './workbench/ConfirmationFlow';
+} from './workbench/commands/ConfirmationFlow';
 export type {
   WorkbenchConfirmationAction,
   WorkbenchConfirmationCancelContext,
@@ -118,7 +118,7 @@ export type {
   WorkbenchConfirmationReason,
   WorkbenchConfirmationSideEffect,
   WorkbenchConfirmationVariant,
-} from './workbench/ConfirmationFlow';
+} from './workbench/commands/ConfirmationFlow';
 export {
   WorkbenchAuthGate,
   WorkbenchLoginBrandMark,
@@ -161,7 +161,7 @@ export {
   getWorkbenchTimelineEventLabel,
   getWorkbenchTimelineEventStatus,
   getWorkbenchTimelineMetadataEntries,
-} from './workbench/Timeline';
+} from './workbench/shell/Timeline';
 export type {
   WorkbenchTimelineEvent,
   WorkbenchTimelineEventKind,
@@ -173,7 +173,7 @@ export type {
   WorkbenchTimelineRenderMetadata,
   WorkbenchTimelineRenderPayload,
   WorkbenchTimelineVariant,
-} from './workbench/Timeline';
+} from './workbench/shell/Timeline';
 export { ConfirmDialog } from './modal/ConfirmDialog';
 export type { ConfirmDialogProps } from './modal/ConfirmDialog';
 export { ContextMenu } from './overlay/ContextMenu';
@@ -216,12 +216,12 @@ export {
   isWorkbenchStatusDisabled,
   isWorkbenchStatusUnavailable,
   workbenchStatusFromLifecycleStatus,
-} from './workbench/status';
+} from './workbench/shell/status';
 export type {
   WorkbenchStatus,
   WorkbenchStatusDescriptor,
   WorkbenchStatusVariant,
-} from './workbench/status';
+} from './workbench/shell/status';
 export {
   FilterBar,
   FilterBarActiveChips,
@@ -567,7 +567,7 @@ export {
   StatusBar as WorkbenchStatusBar,
   StatusBarItem as WorkbenchStatusBarItem,
   StatusBarSection as WorkbenchStatusBarSection,
-} from './workbench/StatusBar';
+} from './workbench/shell/StatusBar';
 export type {
   StatusBarItemModel as WorkbenchStatusBarItemModel,
   StatusBarItemProps as WorkbenchStatusBarItemProps,
@@ -575,7 +575,7 @@ export type {
   StatusBarSectionAlign as WorkbenchStatusBarSectionAlign,
   StatusBarSectionModel as WorkbenchStatusBarSectionModel,
   StatusBarSectionProps as WorkbenchStatusBarSectionProps,
-} from './workbench/StatusBar';
+} from './workbench/shell/StatusBar';
 export { AbsoluteBox } from './primitives';
 export type { AbsoluteBoxProps, WorkbenchRect } from './primitives';
 export { Badge } from './primitives';
@@ -685,8 +685,8 @@ export type {
   WorkspaceDraftsContextValue,
   WorkspaceDraftsProviderProps,
 } from './workbench/workspace/WorkspaceDraftsContext';
-export { StructuredArtifactEditor } from './workbench/StructuredArtifactEditor';
-export type { StructuredArtifactEditorProps } from './workbench/StructuredArtifactEditor';
+export { StructuredArtifactEditor } from './workbench/shell/StructuredArtifactEditor';
+export type { StructuredArtifactEditorProps } from './workbench/shell/StructuredArtifactEditor';
 export { createStringDragMime, createTypedDragMime } from './utils/dragMime';
 export type { TypedDragMime, TypedDragMimeOptions } from './utils/dragMime';
 export {
@@ -698,29 +698,29 @@ export {
   readEditorTabDragPayload,
   resolveEditorTabDropTarget,
   resolveEditorTabStripDropTarget,
-} from './workbench/editor-tabs-dnd';
-export type { EditorTabDragPayload, EditorTabDropTarget } from './workbench/editor-tabs-dnd';
-export { useEditorTabsStripDnd } from './workbench/useEditorTabsStripDnd';
+} from './workbench/editor/editor-tabs-dnd';
+export type { EditorTabDragPayload, EditorTabDropTarget } from './workbench/editor/editor-tabs-dnd';
+export { useEditorTabsStripDnd } from './workbench/editor/useEditorTabsStripDnd';
 export type {
   UseEditorTabsStripDndOptions,
   UseEditorTabsStripDndResult,
-} from './workbench/useEditorTabsStripDnd';
-export { WorkbenchEditorTabs } from './workbench/WorkbenchEditorTabs';
-export type { WorkbenchEditorTabsProps } from './workbench/WorkbenchEditorTabs';
+} from './workbench/editor/useEditorTabsStripDnd';
+export { WorkbenchEditorTabs } from './workbench/editor/WorkbenchEditorTabs';
+export type { WorkbenchEditorTabsProps } from './workbench/editor/WorkbenchEditorTabs';
 export {
   createWorkbenchStandaloneEditorTabCommandContext,
   createWorkbenchStandaloneEditorTabContextMenuItems,
   isWorkbenchEditorTabClosable,
-} from './workbench/editorTabContextMenu';
+} from './workbench/editor/editorTabContextMenu';
 export type {
   CreateWorkbenchStandaloneEditorTabCommandContextInput,
   WorkbenchStandaloneEditorTabLike,
-} from './workbench/editorTabContextMenu';
-export { useWorkbenchEditorTabContextMenu } from './workbench/useWorkbenchEditorTabContextMenu';
+} from './workbench/editor/editorTabContextMenu';
+export { useWorkbenchEditorTabContextMenu } from './workbench/editor/useWorkbenchEditorTabContextMenu';
 export type {
   UseWorkbenchEditorTabContextMenuOptions,
   UseWorkbenchEditorTabContextMenuResult,
-} from './workbench/useWorkbenchEditorTabContextMenu';
+} from './workbench/editor/useWorkbenchEditorTabContextMenu';
 export {
   clampPreviewViewportZoom,
   computePreviewViewportFitScale,

package/src/jdw/JsonCodeEditorPane.tsx

@@ -20,7 +20,7 @@ import {
   StatusBar as WorkbenchStatusBar,
   StatusBarItem as WorkbenchStatusBarItem,
   StatusBarSection as WorkbenchStatusBarSection,
-} from '../workbench/StatusBar';
+} from '../workbench/shell/StatusBar';
 import { WorkspaceEditor, type WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor';
 import type { WorkspaceFile } from '../workbench/workspace/types';
 
@@ -245,11 +245,12 @@ export function JsonCodeEditorPane({
   const configureJsonSchema = (monaco: WorkbenchMonaco, path: string) => {
     if (!jsonSchema) return;
 
-    const jsonDefaults = (
-      monaco.languages.json as unknown as {
-        jsonDefaults?: { setDiagnosticsOptions: (options: unknown) => void };
-      }
-    ).jsonDefaults;
+    const jsonLanguage = monaco.languages.json as unknown as
+      | {
+          jsonDefaults?: { setDiagnosticsOptions: (options: unknown) => void };
+        }
+      | undefined;
+    const jsonDefaults = jsonLanguage?.jsonDefaults;
     if (!jsonDefaults) return;
 
     jsonDefaults.setDiagnosticsOptions({

package/src/json-config/JsonConfigWorkbench.tsx

@@ -9,7 +9,7 @@ import { IconButton } from '../primitives/icon-button';
 import { Toolbar } from '../primitives/toolbar';
 import { JsonCodeEditorPane, JsonConfigValidationBanner } from '../jdw/JsonCodeEditorPane.js';
 import { JdwPreview } from '../jdw/JdwPreview.js';
-import { SplitView } from '../workbench/SplitView';
+import { SplitView } from '../workbench/shell/SplitView';
 import { WorkbenchStructuredDataSchemaPanel } from '../workbench/settings/StructuredDataSchemaPanel';
 import { type WorkbenchStructuredDataSchemaDocument } from '../workbench/settings/StructuredDataForm';
 import { type WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor';

package/src/layout/sidebar/SidebarActionIconBar.tsx

@@ -12,14 +12,14 @@ import { IconButton } from '../../primitives/icon-button';
 
 import { cx } from '../../utils/cx';
 
-import { type ActivityBarOrientation } from '../../workbench/activityBarOrder';
+import { type ActivityBarOrientation } from '../../workbench/shell/activityBarOrder';
 
 import {
   mergeWorkbenchSidebarViewPlacementDropZoneProps,
   useWorkbenchSidebarViewPlacementDropZone,
-} from '../../workbench/useWorkbenchSidebarViewPlacementDropZone';
+} from '../../workbench/shell/useWorkbenchSidebarViewPlacementDropZone';
 
-import { useWorkbenchSidebarActionBarDnd } from '../../workbench/useWorkbenchSidebarActionBarDnd';
+import { useWorkbenchSidebarActionBarDnd } from '../../workbench/shell/useWorkbenchSidebarActionBarDnd';
 
 import { SidebarToolbar } from './SidebarToolbar';
 

package/src/layout/sidebar/WorkbenchSidebarActions.tsx

@@ -8,7 +8,7 @@ import {
   isWorkbenchStatusBusy,
   isWorkbenchStatusDisabled,
   type WorkbenchStatus,
-} from '../../workbench/status';
+} from '../../workbench/shell/status';
 import {
   SideBarList,
   SideBarListItem,

package/src/modal/Modal.tsx

@@ -1,18 +1,22 @@
 import {
+  useCallback,
   useId,
+  useRef,
   type CSSProperties,
   type FormEventHandler,
   type MouseEvent,
   type ReactNode,
+  type RefObject,
 } from 'react';
 import { cx } from '../utils/cx';
 import { ModalResizeHandles } from './ModalResizeHandles';
 import { ModalTitlebar } from './ModalTitlebar';
+import { useModalFocusTrap } from './useModalFocusTrap';
 import { useModalWindowFrame } from './useModalWindowFrame';
 import {
   resolveWorkbenchWindowChromeDataAttributes,
   type WorkbenchWindowChromeMode,
-} from '../workbench/workbenchPlatformChrome';
+} from '../workbench/chrome/workbenchPlatformChrome';
 
 export type { ModalBounds, ModalPosition, ModalSize } from './modalTypes';
 
@@ -20,44 +24,50 @@ export type ModalBodyLayout = 'block' | 'stack';
 export type ModalBodyPadding = 'none' | 'md' | 'lg';
 
 export interface ModalProps {
-  chrome?: WorkbenchWindowChromeMode | undefined;
+  chrome?: WorkbenchWindowChromeMode;
   title: ReactNode;
-  titleSuffix?: ReactNode | undefined;
+  titleSuffix?: ReactNode;
   children: ReactNode;
-  footer?: ReactNode | undefined;
-  className?: string | undefined;
-  bodyClassName?: string | undefined;
-  bodyLayout?: ModalBodyLayout | undefined;
-  bodyPadding?: ModalBodyPadding | undefined;
-  bodyScroll?: 'auto' | 'hidden' | undefined;
-  closeLabel?: string | undefined;
-  defaultHeight?: number | undefined;
-  defaultMaximized?: boolean | undefined;
-  defaultWidth?: number | undefined;
-  labelledBy?: string | undefined;
-  maximizeLabel?: string | undefined;
-  minHeight?: number | undefined;
-  minWidth?: number | undefined;
+  footer?: ReactNode;
+  className?: string;
+  bodyClassName?: string;
+  bodyLayout?: ModalBodyLayout;
+  bodyPadding?: ModalBodyPadding;
+  bodyScroll?: 'auto' | 'hidden';
+  /** When true (default), Escape calls `onClose`. */
+  closeOnEscape?: boolean;
+  closeLabel?: string;
+  defaultHeight?: number;
+  defaultMaximized?: boolean;
+  defaultWidth?: number;
+  /** Optional element to focus when the modal mounts (must be inside the dialog). */
+  initialFocusRef?: RefObject<HTMLElement | null>;
+  labelledBy?: string;
+  maximizeLabel?: string;
+  minHeight?: number;
+  minWidth?: number;
   onClose: () => void;
-  onSubmit?: FormEventHandler<HTMLFormElement> | undefined;
-  restoreLabel?: string | undefined;
+  onSubmit?: FormEventHandler<HTMLFormElement>;
+  /** When true (default), restore focus to the previously focused element on unmount. */
+  restoreFocusOnClose?: boolean;
+  restoreLabel?: string;
 }
 
 interface ModalFrameProps {
-  bodyClassName?: string | undefined;
+  bodyClassName?: string;
   bodyLayout: ModalBodyLayout;
   bodyPadding: ModalBodyPadding;
   bodyScroll: 'auto' | 'hidden';
   children: ReactNode;
   dataAttrs: Record<string, string | undefined>;
-  footer?: ReactNode | undefined;
+  footer?: ReactNode;
   frameRef: (node: HTMLDivElement | HTMLFormElement | null) => void;
   modalClassName: string;
   resolvedLabelledBy: string;
-  resizeHandles?: ReactNode | undefined;
-  style?: CSSProperties | undefined;
+  resizeHandles?: ReactNode;
+  style?: CSSProperties;
   titlebar: ReactNode;
-  onSubmit?: FormEventHandler<HTMLFormElement> | undefined;
+  onSubmit?: FormEventHandler<HTMLFormElement>;
 }
 
 function ModalFrame({
@@ -133,22 +143,26 @@ export function Modal({
   bodyLayout = 'block',
   bodyPadding = 'none',
   bodyScroll = 'hidden',
+  closeOnEscape = true,
   closeLabel,
   defaultHeight,
   defaultMaximized = false,
   defaultWidth,
+  initialFocusRef,
   labelledBy,
   maximizeLabel,
   minHeight = 200,
   minWidth = 320,
   onClose,
   onSubmit,
+  restoreFocusOnClose = true,
   restoreLabel,
 }: ModalProps) {
   const modalClassName = cx('ui-modal', className);
   const chromeAttributes = resolveWorkbenchWindowChromeDataAttributes(chrome);
   const generatedLabelId = useId();
   const resolvedLabelledBy = labelledBy ?? generatedLabelId;
+  const dialogRef = useRef<HTMLElement | null>(null);
 
   const {
     assignFrameRef,
@@ -167,6 +181,22 @@ export function Modal({
     minWidth,
   });
 
+  const setFrameRef = useCallback(
+    (node: HTMLDivElement | HTMLFormElement | null) => {
+      dialogRef.current = node;
+      assignFrameRef(node);
+    },
+    [assignFrameRef],
+  );
+
+  useModalFocusTrap({
+    closeOnEscape,
+    containerRef: dialogRef,
+    initialFocusRef,
+    onClose,
+    restoreFocusOnClose,
+  });
+
   const isPositioned = bounds !== null || maximized;
 
   return (
@@ -183,7 +213,7 @@ export function Modal({
           ...(chromeAttributes ?? {}),
         }}
         footer={footer}
-        frameRef={assignFrameRef}
+        frameRef={setFrameRef}
         modalClassName={modalClassName}
         resolvedLabelledBy={resolvedLabelledBy}
         resizeHandles={maximized ? null : <ModalResizeHandles onResizeStart={handleResizeStart} />}

package/src/modal/ModalTitlebar.tsx

@@ -1,28 +1,28 @@
 import type { PointerEvent as ReactPointerEvent, ReactNode } from 'react';
 
-import { useWorkbenchHostPlatform } from '../workbench/WorkbenchPlatformContext';
+import { useWorkbenchHostPlatform } from '../workbench/chrome/WorkbenchPlatformContext';
 import {
   shouldUseDarwinPlatformChrome,
   WorkbenchWindowChromeControls,
-} from '../workbench/WorkbenchWindowChromeControls';
+} from '../workbench/shell/WorkbenchWindowChromeControls';
 import {
   resolveWorkbenchWindowChromeDataAttributes,
   type WorkbenchWindowChromeMode,
-} from '../workbench/workbenchPlatformChrome';
+} from '../workbench/chrome/workbenchPlatformChrome';
 
 export interface ModalTitlebarProps {
-  chrome?: WorkbenchWindowChromeMode | undefined;
-  closeLabel?: string | undefined;
+  chrome?: WorkbenchWindowChromeMode;
+  closeLabel?: string;
   labelledBy: string;
   maximized: boolean;
-  maximizeLabel?: string | undefined;
+  maximizeLabel?: string;
   onClose: () => void;
   onDoubleClick: () => void;
   onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
   onToggleMaximized: () => void;
-  restoreLabel?: string | undefined;
+  restoreLabel?: string;
   title: ReactNode;
-  titleSuffix?: ReactNode | undefined;
+  titleSuffix?: ReactNode;
 }
 
 export function ModalTitlebar({