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

package/src/widget-tree/WidgetTreeWorkbench.tsx

@@ -1,155 +1,155 @@
-import { useMemo, useState, type KeyboardEvent, type ReactNode } from 'react';
-import type { WidgetAssetCatalogContract, WidgetRegistryContract } from '@workbench-kit/contracts';
-
-import { Panel, PanelBody, PanelHeader } from '../layout/panel';
-import { Button } from '../primitives/button';
-import { Toolbar } from '../primitives/toolbar';
-import { JsonConfigValidationBanner } from '../jdw/JsonCodeEditorPane.js';
-import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
-import { fileNameOfPath } from '../workbench/workspace/path';
-import { WorkspacePathLabel } from '../workbench/workspace/WorkspacePathLabel';
-import { WidgetTreeLab } from './WidgetTreeLab.js';
-import { resolveWidgetTreeModeShortcut, WidgetTreeModeControls } from './WidgetTreeModeControls.js';
-import { DEFAULT_WIDGET_TREE_VIEW_MODE, type WidgetTreeViewMode } from './widget-tree-mode.js';
-import { createWidgetTreeEditorState } from './widget-tree-editor-state.js';
-
-export interface WidgetTreeWorkbenchProps {
-  readonly path?: string | undefined;
-  readonly title?: ReactNode | undefined;
-  readonly value: string;
-  readonly onChange: (value: string) => void;
-  readonly baselineValue?: string | undefined;
-  readonly onApply?: (() => void) | undefined;
-  readonly onSave?: (() => void) | undefined;
-  readonly onDiscard?: (() => void) | undefined;
-  readonly dirty?: boolean | undefined;
-  readonly readOnly?: boolean | undefined;
-  readonly registry?: WidgetRegistryContract<unknown> | undefined;
-  readonly assetCatalog?: WidgetAssetCatalogContract | undefined;
-  readonly theme?: WorkspaceEditorTheme | undefined;
-  readonly defaultViewMode?: WidgetTreeViewMode | undefined;
-  readonly viewMode?: WidgetTreeViewMode | undefined;
-  readonly onViewModeChange?: ((mode: WidgetTreeViewMode) => void) | undefined;
-}
-
-export function WidgetTreeWorkbench({
-  path,
-  title,
-  value,
-  onChange,
-  baselineValue,
-  onApply,
-  onSave,
-  onDiscard,
-  dirty,
-  readOnly = false,
-  registry,
-  assetCatalog,
-  theme = 'dark',
-  defaultViewMode = DEFAULT_WIDGET_TREE_VIEW_MODE,
-  viewMode,
-  onViewModeChange,
-}: WidgetTreeWorkbenchProps) {
-  const [uncontrolledViewMode, setUncontrolledViewMode] =
-    useState<WidgetTreeViewMode>(defaultViewMode);
-  const resolvedViewMode = viewMode ?? uncontrolledViewMode;
-
-  const setViewMode = (nextMode: WidgetTreeViewMode) => {
-    if (viewMode === undefined) {
-      setUncontrolledViewMode(nextMode);
-    }
-    onViewModeChange?.(nextMode);
-  };
-
-  const resolvedTitle = title ?? (path ? fileNameOfPath(path) : 'Widget document');
-  const registeredTypes = useMemo(
-    () => registry?.definitions().map((definition) => definition.type),
-    [registry],
-  );
-  const editorState = useMemo(
-    () =>
-      createWidgetTreeEditorState({
-        baselineValue: baselineValue ?? value,
-        currentValue: value,
-        registeredTypes,
-      }),
-    [baselineValue, registeredTypes, value],
-  );
-  const resolvedDirty = dirty ?? (baselineValue !== undefined && editorState.textDirty);
-  const canApply = Boolean(resolvedDirty && editorState.validationOk);
-  const saveEnabled = Boolean(onSave && canApply && !readOnly);
-  const resolvedOnSave = saveEnabled ? onSave : undefined;
-  const showApply = Boolean(canApply && onApply && !readOnly);
-
-  const handleWorkbenchKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    const nextMode = resolveWidgetTreeModeShortcut(event);
-    if (nextMode === null) {
-      return;
-    }
-
-    event.preventDefault();
-    setViewMode(nextMode);
-  };
-
-  return (
-    <Panel
-      className="widget-tree-workbench"
-      data-mode={resolvedViewMode}
-      data-testid="widget-tree-workbench"
-      onKeyDown={handleWorkbenchKeyDown}
-    >
-      <PanelHeader
-        actions={
-          <Toolbar>
-            {showApply ? (
-              <Button data-testid="widget-tree-workbench-apply" variant="primary" onClick={onApply}>
-                Apply
-              </Button>
-            ) : null}
-            {resolvedDirty && !readOnly ? (
-              <>
-                {onDiscard ? <Button onClick={onDiscard}>Discard</Button> : null}
-                {onSave ? (
-                  <Button disabled={!saveEnabled} variant="primary" onClick={resolvedOnSave}>
-                    Save
-                  </Button>
-                ) : null}
-              </>
-            ) : null}
-            <WidgetTreeModeControls mode={resolvedViewMode} onModeChange={setViewMode} />
-          </Toolbar>
-        }
-      >
-        <span className="widget-tree-workbench__title">
-          {resolvedTitle}
-          {path ? <WorkspacePathLabel className="widget-tree-workbench__path" path={path} /> : null}
-          {resolvedDirty ? (
-            <span className="widget-tree-workbench__dirty-indicator" title="Unsaved changes">
-              ●
-            </span>
-          ) : null}
-        </span>
-      </PanelHeader>
-      <PanelBody className="widget-tree-workbench__body">
-        {!editorState.validationOk || canApply ? (
-          <JsonConfigValidationBanner
-            canApply={canApply}
-            firstError={editorState.firstError}
-            validationOk={editorState.validationOk}
-          />
-        ) : null}
-        <WidgetTreeLab
-          assetCatalog={assetCatalog}
-          path={path}
-          readOnly={readOnly}
-          registry={registry}
-          theme={theme}
-          value={value}
-          viewMode={resolvedViewMode}
-          onChange={onChange}
-          onSave={resolvedOnSave}
-        />
-      </PanelBody>
-    </Panel>
-  );
-}
+import { useMemo, useState, type KeyboardEvent, type ReactNode } from 'react';
+import type { WidgetAssetCatalogContract, WidgetRegistryContract } from '@workbench-kit/contracts';
+
+import { Panel, PanelBody, PanelHeader } from '../layout/panel';
+import { Button } from '../primitives/button';
+import { Toolbar } from '../primitives/toolbar';
+import { JsonConfigValidationBanner } from '../jdw/JsonCodeEditorPane.js';
+import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
+import { fileNameOfPath } from '../workbench/workspace/path';
+import { WorkspacePathLabel } from '../workbench/workspace/WorkspacePathLabel';
+import { WidgetTreeLab } from './WidgetTreeLab.js';
+import { resolveWidgetTreeModeShortcut, WidgetTreeModeControls } from './WidgetTreeModeControls.js';
+import { DEFAULT_WIDGET_TREE_VIEW_MODE, type WidgetTreeViewMode } from './widget-tree-mode.js';
+import { createWidgetTreeEditorState } from './widget-tree-editor-state.js';
+
+export interface WidgetTreeWorkbenchProps {
+  readonly path?: string | undefined;
+  readonly title?: ReactNode | undefined;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly baselineValue?: string | undefined;
+  readonly onApply?: (() => void) | undefined;
+  readonly onSave?: (() => void) | undefined;
+  readonly onDiscard?: (() => void) | undefined;
+  readonly dirty?: boolean | undefined;
+  readonly readOnly?: boolean | undefined;
+  readonly registry?: WidgetRegistryContract<unknown> | undefined;
+  readonly assetCatalog?: WidgetAssetCatalogContract | undefined;
+  readonly theme?: WorkspaceEditorTheme | undefined;
+  readonly defaultViewMode?: WidgetTreeViewMode | undefined;
+  readonly viewMode?: WidgetTreeViewMode | undefined;
+  readonly onViewModeChange?: ((mode: WidgetTreeViewMode) => void) | undefined;
+}
+
+export function WidgetTreeWorkbench({
+  path,
+  title,
+  value,
+  onChange,
+  baselineValue,
+  onApply,
+  onSave,
+  onDiscard,
+  dirty,
+  readOnly = false,
+  registry,
+  assetCatalog,
+  theme = 'dark',
+  defaultViewMode = DEFAULT_WIDGET_TREE_VIEW_MODE,
+  viewMode,
+  onViewModeChange,
+}: WidgetTreeWorkbenchProps) {
+  const [uncontrolledViewMode, setUncontrolledViewMode] =
+    useState<WidgetTreeViewMode>(defaultViewMode);
+  const resolvedViewMode = viewMode ?? uncontrolledViewMode;
+
+  const setViewMode = (nextMode: WidgetTreeViewMode) => {
+    if (viewMode === undefined) {
+      setUncontrolledViewMode(nextMode);
+    }
+    onViewModeChange?.(nextMode);
+  };
+
+  const resolvedTitle = title ?? (path ? fileNameOfPath(path) : 'Widget document');
+  const registeredTypes = useMemo(
+    () => registry?.definitions().map((definition) => definition.type),
+    [registry],
+  );
+  const editorState = useMemo(
+    () =>
+      createWidgetTreeEditorState({
+        baselineValue: baselineValue ?? value,
+        currentValue: value,
+        registeredTypes,
+      }),
+    [baselineValue, registeredTypes, value],
+  );
+  const resolvedDirty = dirty ?? (baselineValue !== undefined && editorState.textDirty);
+  const canApply = Boolean(resolvedDirty && editorState.validationOk);
+  const saveEnabled = Boolean(onSave && canApply && !readOnly);
+  const resolvedOnSave = saveEnabled ? onSave : undefined;
+  const showApply = Boolean(canApply && onApply && !readOnly);
+
+  const handleWorkbenchKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const nextMode = resolveWidgetTreeModeShortcut(event);
+    if (nextMode === null) {
+      return;
+    }
+
+    event.preventDefault();
+    setViewMode(nextMode);
+  };
+
+  return (
+    <Panel
+      className="widget-tree-workbench"
+      data-mode={resolvedViewMode}
+      data-testid="widget-tree-workbench"
+      onKeyDown={handleWorkbenchKeyDown}
+    >
+      <PanelHeader
+        actions={
+          <Toolbar>
+            {showApply ? (
+              <Button data-testid="widget-tree-workbench-apply" variant="primary" onClick={onApply}>
+                Apply
+              </Button>
+            ) : null}
+            {resolvedDirty && !readOnly ? (
+              <>
+                {onDiscard ? <Button onClick={onDiscard}>Discard</Button> : null}
+                {onSave ? (
+                  <Button disabled={!saveEnabled} variant="primary" onClick={resolvedOnSave}>
+                    Save
+                  </Button>
+                ) : null}
+              </>
+            ) : null}
+            <WidgetTreeModeControls mode={resolvedViewMode} onModeChange={setViewMode} />
+          </Toolbar>
+        }
+      >
+        <span className="widget-tree-workbench__title">
+          {resolvedTitle}
+          {path ? <WorkspacePathLabel className="widget-tree-workbench__path" path={path} /> : null}
+          {resolvedDirty ? (
+            <span className="widget-tree-workbench__dirty-indicator" title="Unsaved changes">
+              ●
+            </span>
+          ) : null}
+        </span>
+      </PanelHeader>
+      <PanelBody className="widget-tree-workbench__body">
+        {!editorState.validationOk || canApply ? (
+          <JsonConfigValidationBanner
+            canApply={canApply}
+            firstError={editorState.firstError}
+            validationOk={editorState.validationOk}
+          />
+        ) : null}
+        <WidgetTreeLab
+          assetCatalog={assetCatalog}
+          path={path}
+          readOnly={readOnly}
+          registry={registry}
+          theme={theme}
+          value={value}
+          viewMode={resolvedViewMode}
+          onChange={onChange}
+          onSave={resolvedOnSave}
+        />
+      </PanelBody>
+    </Panel>
+  );
+}

package/src/widget-tree/WidgetTreeWorkspaceShell.tsx

@@ -1,172 +1,172 @@
-import { useMemo, useState } from 'react';
-import {
-  integratedShellWorkspaceFiles,
-  integratedShellWorkspaceFolders,
-} from '@workbench-kit/adapters';
-import { validateJsonWidgetData } from '@workbench-kit/jdw';
-
-import { SideBarViewFrame } from '../layout/sidebar';
-import { WorkbenchShell } from '../workbench/WorkbenchShell.js';
-import type { StatusBarSectionModel } from '../workbench/StatusBar.js';
-import {
-  useVirtualWorkspace,
-  WorkspaceDraftsProvider,
-  WorkspaceEditorPanel,
-  WorkspaceExplorer,
-  type WorkspaceEditorTheme,
-  type WorkspaceFile,
-} from '../workbench/workspace/index.js';
-import { createWidgetStudioWorkspaceEditorRenderer } from '../widget-studio/create-widget-studio-workspace-editor.js';
-import { WIDGET_TREE_DEMO_REGISTRY, WIDGET_TREE_WELCOME_DOCUMENT } from './demo-registry.js';
-import { isWidgetTreeDocument } from './widget-tree-document.js';
-
-const JDW_WORKSPACE_DEFAULT_WIDGET_PATH = 'src/widgets/home.jdw.json';
-
-function withJdwWelcomeDocument(files: readonly WorkspaceFile[]): WorkspaceFile[] {
-  return files.map((file) =>
-    file.path === JDW_WORKSPACE_DEFAULT_WIDGET_PATH
-      ? { ...file, content: WIDGET_TREE_WELCOME_DOCUMENT }
-      : file,
-  );
-}
-
-const statusSections: StatusBarSectionModel[] = [
-  {
-    id: 'main',
-    items: [{ id: 'label', label: 'JDW Workspace' }],
-  },
-];
-
-const registeredWidgetTypes = WIDGET_TREE_DEMO_REGISTRY.definitions().map(
-  (definition) => definition.type,
-);
-
-export function canSaveWidgetTreeWorkspaceFile(file: WorkspaceFile, content: string): boolean {
-  if (!isWidgetTreeDocument(file)) return true;
-
-  return validateJsonWidgetData(content, {
-    registeredTypes: registeredWidgetTypes,
-    strictKnownTypes: true,
-  }).valid;
-}
-
-export interface WidgetTreeWorkspaceShellProps {
-  readonly initialSelectedPath?: string | undefined;
-  readonly initialTheme?: WorkspaceEditorTheme | undefined;
-}
-
-export function WidgetTreeWorkspaceShell({
-  initialSelectedPath = JDW_WORKSPACE_DEFAULT_WIDGET_PATH,
-  initialTheme = 'dark',
-}: WidgetTreeWorkspaceShellProps = {}) {
-  const [sidebarVisible, setSidebarVisible] = useState(true);
-  const [sidebarSizePx, setSidebarSizePx] = useState(260);
-
-  const workspaceFiles = useMemo(() => withJdwWelcomeDocument(integratedShellWorkspaceFiles), []);
-
-  const workspace = useVirtualWorkspace({
-    expandedPaths: ['src', 'src/widgets', 'src/widgets/assets'],
-    files: workspaceFiles,
-    folders: [...integratedShellWorkspaceFolders],
-    openPaths: [initialSelectedPath],
-    selectedPath: initialSelectedPath,
-  });
-
-  const {
-    closeAll,
-    closeOthers,
-    closePath,
-    deleteFile,
-    expandedPaths,
-    files,
-    openFile,
-    openPaths,
-    saveFile,
-    selectedPath,
-    toggleFolder,
-    workspaceTree,
-  } = workspace;
-
-  const widgetStudioEditorRenderer = useMemo(
-    () =>
-      createWidgetStudioWorkspaceEditorRenderer({
-        registry: WIDGET_TREE_DEMO_REGISTRY,
-      }),
-    [],
-  );
-
-  return (
-    <div className="jdw-workspace-shell-host" data-testid="jdw-workspace-shell">
-      <WorkspaceDraftsProvider>
-        <WorkbenchShell
-          activityBar={{
-            items: [
-              {
-                active: sidebarVisible,
-                icon: <i className="codicon codicon-files" aria-hidden />,
-                id: 'explorer',
-                label: 'Explorer',
-              },
-            ],
-            onItemActivate: () => setSidebarVisible((visible) => !visible),
-          }}
-          compactStatus
-          primarySidebar={{
-            className: 'ui-workbench-story-shell-split',
-            isVisible: sidebarVisible,
-            maxPrimarySizePx: 480,
-            minPrimarySizePx: 200,
-            node: (
-              <aside aria-label="Explorer sidebar" className="workbench-primary-sidebar">
-                <SideBarViewFrame title="Explorer">
-                  <WorkspaceExplorer
-                    activePath={selectedPath}
-                    expandedPaths={expandedPaths}
-                    nodes={workspaceTree}
-                    onActivateFile={openFile}
-                    onToggleFolder={toggleFolder}
-                  />
-                </SideBarViewFrame>
-              </aside>
-            ),
-            onSizePxChange: setSidebarSizePx,
-            primarySizePx: sidebarSizePx,
-          }}
-          rootClassName="ide-root jdw-workspace-shell"
-          rootStyle={{ height: '100%', minHeight: 0 }}
-          secondaryArea={
-            <main className="workbench-editor-area jdw-workspace-shell__editor">
-              <WorkspaceEditorPanel
-                canSaveFile={(_path, content, file) =>
-                  canSaveWidgetTreeWorkspaceFile(file, content)
-                }
-                files={files}
-                openPaths={openPaths}
-                renderEditor={(context) =>
-                  widgetStudioEditorRenderer({ ...context, workspaceFiles: files })
-                }
-                selectedPath={selectedPath}
-                theme={initialTheme}
-                onCloseAll={closeAll}
-                onCloseOthers={closeOthers}
-                onClosePath={closePath}
-                onDeletePath={deleteFile}
-                onSaveFile={(path, content) => {
-                  saveFile(path, { content, source: 'user' });
-                  return {
-                    file: files.find((file) => file.path === path) ?? { content, path },
-                    kind: 'save:success' as const,
-                    outcome: 'unchanged' as const,
-                  };
-                }}
-                onSelectedPathChange={openFile}
-              />
-            </main>
-          }
-          statusSections={statusSections}
-          theme={initialTheme}
-        />
-      </WorkspaceDraftsProvider>
-    </div>
-  );
-}
+import { useMemo, useState } from 'react';
+import {
+  integratedShellWorkspaceFiles,
+  integratedShellWorkspaceFolders,
+} from '@workbench-kit/adapters';
+import { validateJsonWidgetData } from '@workbench-kit/jdw';
+
+import { SideBarViewFrame } from '../layout/sidebar';
+import { WorkbenchShell } from '../workbench/WorkbenchShell.js';
+import type { StatusBarSectionModel } from '../workbench/StatusBar.js';
+import {
+  useVirtualWorkspace,
+  WorkspaceDraftsProvider,
+  WorkspaceEditorPanel,
+  WorkspaceExplorer,
+  type WorkspaceEditorTheme,
+  type WorkspaceFile,
+} from '../workbench/workspace/index.js';
+import { createWidgetStudioWorkspaceEditorRenderer } from '../widget-studio/create-widget-studio-workspace-editor.js';
+import { WIDGET_TREE_DEMO_REGISTRY, WIDGET_TREE_WELCOME_DOCUMENT } from './demo-registry.js';
+import { isWidgetTreeDocument } from './widget-tree-document.js';
+
+const JDW_WORKSPACE_DEFAULT_WIDGET_PATH = 'src/widgets/home.jdw.json';
+
+function withJdwWelcomeDocument(files: readonly WorkspaceFile[]): WorkspaceFile[] {
+  return files.map((file) =>
+    file.path === JDW_WORKSPACE_DEFAULT_WIDGET_PATH
+      ? { ...file, content: WIDGET_TREE_WELCOME_DOCUMENT }
+      : file,
+  );
+}
+
+const statusSections: StatusBarSectionModel[] = [
+  {
+    id: 'main',
+    items: [{ id: 'label', label: 'JDW Workspace' }],
+  },
+];
+
+const registeredWidgetTypes = WIDGET_TREE_DEMO_REGISTRY.definitions().map(
+  (definition) => definition.type,
+);
+
+export function canSaveWidgetTreeWorkspaceFile(file: WorkspaceFile, content: string): boolean {
+  if (!isWidgetTreeDocument(file)) return true;
+
+  return validateJsonWidgetData(content, {
+    registeredTypes: registeredWidgetTypes,
+    strictKnownTypes: true,
+  }).valid;
+}
+
+export interface WidgetTreeWorkspaceShellProps {
+  readonly initialSelectedPath?: string | undefined;
+  readonly initialTheme?: WorkspaceEditorTheme | undefined;
+}
+
+export function WidgetTreeWorkspaceShell({
+  initialSelectedPath = JDW_WORKSPACE_DEFAULT_WIDGET_PATH,
+  initialTheme = 'dark',
+}: WidgetTreeWorkspaceShellProps = {}) {
+  const [sidebarVisible, setSidebarVisible] = useState(true);
+  const [sidebarSizePx, setSidebarSizePx] = useState(260);
+
+  const workspaceFiles = useMemo(() => withJdwWelcomeDocument(integratedShellWorkspaceFiles), []);
+
+  const workspace = useVirtualWorkspace({
+    expandedPaths: ['src', 'src/widgets', 'src/widgets/assets'],
+    files: workspaceFiles,
+    folders: [...integratedShellWorkspaceFolders],
+    openPaths: [initialSelectedPath],
+    selectedPath: initialSelectedPath,
+  });
+
+  const {
+    closeAll,
+    closeOthers,
+    closePath,
+    deleteFile,
+    expandedPaths,
+    files,
+    openFile,
+    openPaths,
+    saveFile,
+    selectedPath,
+    toggleFolder,
+    workspaceTree,
+  } = workspace;
+
+  const widgetStudioEditorRenderer = useMemo(
+    () =>
+      createWidgetStudioWorkspaceEditorRenderer({
+        registry: WIDGET_TREE_DEMO_REGISTRY,
+      }),
+    [],
+  );
+
+  return (
+    <div className="jdw-workspace-shell-host" data-testid="jdw-workspace-shell">
+      <WorkspaceDraftsProvider>
+        <WorkbenchShell
+          activityBar={{
+            items: [
+              {
+                active: sidebarVisible,
+                icon: <i className="codicon codicon-files" aria-hidden />,
+                id: 'explorer',
+                label: 'Explorer',
+              },
+            ],
+            onItemActivate: () => setSidebarVisible((visible) => !visible),
+          }}
+          compactStatus
+          primarySidebar={{
+            className: 'ui-workbench-story-shell-split',
+            isVisible: sidebarVisible,
+            maxPrimarySizePx: 480,
+            minPrimarySizePx: 200,
+            node: (
+              <aside aria-label="Explorer sidebar" className="workbench-primary-sidebar">
+                <SideBarViewFrame title="Explorer">
+                  <WorkspaceExplorer
+                    activePath={selectedPath}
+                    expandedPaths={expandedPaths}
+                    nodes={workspaceTree}
+                    onActivateFile={openFile}
+                    onToggleFolder={toggleFolder}
+                  />
+                </SideBarViewFrame>
+              </aside>
+            ),
+            onSizePxChange: setSidebarSizePx,
+            primarySizePx: sidebarSizePx,
+          }}
+          rootClassName="ide-root jdw-workspace-shell"
+          rootStyle={{ height: '100%', minHeight: 0 }}
+          secondaryArea={
+            <main className="workbench-editor-area jdw-workspace-shell__editor">
+              <WorkspaceEditorPanel
+                canSaveFile={(_path, content, file) =>
+                  canSaveWidgetTreeWorkspaceFile(file, content)
+                }
+                files={files}
+                openPaths={openPaths}
+                renderEditor={(context) =>
+                  widgetStudioEditorRenderer({ ...context, workspaceFiles: files })
+                }
+                selectedPath={selectedPath}
+                theme={initialTheme}
+                onCloseAll={closeAll}
+                onCloseOthers={closeOthers}
+                onClosePath={closePath}
+                onDeletePath={deleteFile}
+                onSaveFile={(path, content) => {
+                  saveFile(path, { content, source: 'user' });
+                  return {
+                    file: files.find((file) => file.path === path) ?? { content, path },
+                    kind: 'save:success' as const,
+                    outcome: 'unchanged' as const,
+                  };
+                }}
+                onSelectedPathChange={openFile}
+              />
+            </main>
+          }
+          statusSections={statusSections}
+          theme={initialTheme}
+        />
+      </WorkspaceDraftsProvider>
+    </div>
+  );
+}