@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.10

package/src/workbench/shell/WorkbenchCanvasShell.defaults.ts

@@ -0,0 +1,106 @@
+import type { WorkbenchDocument } from '../schema';
+
+export const DEFAULT_CANVAS_ACTIVITY_ID = 'design' as const;
+export const DEFAULT_CANVAS_THEME = 'dark' as const;
+
+export const WORKBENCH_CANVAS_PLACEHOLDER_IMAGE_SRC = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#0f172a"/><stop offset="100%" stop-color="#334155"/></linearGradient></defs><rect width="320" height="180" fill="url(%23g)"/><text x="50%" y="52%" fill="white" font-size="24" text-anchor="middle" font-family="Arial">Image Layer</text></svg>',
+)}`;
+
+export const DEFAULT_WORKBENCH_CANVAS_DOCUMENT: WorkbenchDocument = {
+  version: '1.0.0',
+  schemaVersion: 1,
+  pages: [
+    {
+      id: 'page-shell-canvas',
+      name: 'Design',
+      width: 1280,
+      height: 760,
+      background: '#1f2937',
+      nodes: [
+        {
+          id: 'shell-frame',
+          type: 'frame',
+          name: 'Window',
+          layout: { x: 80, y: 60, width: 980, height: 560 },
+          style: {
+            backgroundColor: '#0f172a',
+            borderColor: '#475569',
+            borderWidth: 1,
+            borderRadius: 12,
+            boxShadow: '0 12px 30px rgba(0, 0, 0, 0.45)',
+          },
+          children: ['tile-1', 'tile-2', 'tile-3'],
+        },
+        {
+          id: 'tile-1',
+          type: 'frame',
+          name: 'Tile: Header',
+          parentId: 'shell-frame',
+          layout: { x: 22, y: 18, width: 300, height: 180 },
+          style: {
+            backgroundColor: '#0ea5e9',
+            borderRadius: 10,
+            borderColor: '#0284c7',
+            borderWidth: 1,
+          },
+          children: ['tile-1-image', 'tile-1-text'],
+        },
+        {
+          id: 'tile-1-image',
+          type: 'image',
+          name: 'Image Layer',
+          parentId: 'tile-1',
+          layout: { x: 12, y: 12, width: 126, height: 90 },
+          src: WORKBENCH_CANVAS_PLACEHOLDER_IMAGE_SRC,
+          style: {
+            borderRadius: 8,
+            borderColor: '#0c4a6e',
+            borderWidth: 1,
+          },
+        },
+        {
+          id: 'tile-1-text',
+          type: 'text',
+          name: 'Text Layer',
+          parentId: 'tile-1',
+          layout: { x: 146, y: 36, width: 140, height: 80 },
+          content: 'Tile title',
+          style: {
+            color: '#f8fafc',
+            fontSize: 20,
+            fontFamily: 'Inter, "Segoe UI", sans-serif',
+            fontWeight: 700,
+          },
+        },
+        {
+          id: 'tile-2',
+          type: 'rectangle',
+          name: 'Action Tile',
+          parentId: 'shell-frame',
+          layout: { x: 336, y: 18, width: 280, height: 180 },
+          style: {
+            backgroundColor: '#7c3aed',
+            borderRadius: 10,
+            borderColor: '#6d28d9',
+            borderWidth: 1,
+            boxShadow: '0 8px 20px rgba(88, 28, 135, 0.45)',
+          },
+        },
+        {
+          id: 'tile-3',
+          type: 'rectangle',
+          name: 'Action Tile 2',
+          parentId: 'shell-frame',
+          layout: { x: 632, y: 18, width: 280, height: 180 },
+          style: {
+            backgroundColor: '#f59e0b',
+            borderRadius: 10,
+            borderColor: '#d97706',
+            borderWidth: 1,
+          },
+        },
+      ],
+    },
+  ],
+};

package/src/workbench/shell/WorkbenchCanvasShell.model.ts

@@ -0,0 +1,46 @@
+import type { WorkbenchDocumentNode, WorkbenchNodeLayout } from '../schema';
+
+export interface WorkbenchCanvasLayoutInput {
+  readonly height?: string;
+  readonly width?: string;
+  readonly x?: string;
+  readonly y?: string;
+}
+
+export function getWorkbenchCanvasNodeChildren(node: WorkbenchDocumentNode): readonly string[] {
+  return 'children' in node ? ((node as { children?: readonly string[] }).children ?? []) : [];
+}
+
+export function getWorkbenchCanvasRootNodeIds(nodes: readonly WorkbenchDocumentNode[]): string[] {
+  const childIdSet = new Set(nodes.flatMap((node) => getWorkbenchCanvasNodeChildren(node)));
+
+  return nodes.filter((node) => !node.parentId && !childIdSet.has(node.id)).map((node) => node.id);
+}
+
+export function parseWorkbenchCanvasLayoutNumber(value: string | undefined): number | undefined {
+  const trimmed = value?.trim() ?? '';
+  const numberValue = Number(trimmed);
+  if (trimmed === '' || !Number.isFinite(numberValue)) {
+    return undefined;
+  }
+
+  return numberValue;
+}
+
+export function createWorkbenchCanvasLayoutUpdate(
+  currentLayout: WorkbenchNodeLayout | undefined,
+  input: WorkbenchCanvasLayoutInput,
+): Record<string, unknown> {
+  const x = parseWorkbenchCanvasLayoutNumber(input.x);
+  const y = parseWorkbenchCanvasLayoutNumber(input.y);
+  const width = parseWorkbenchCanvasLayoutNumber(input.width);
+  const height = parseWorkbenchCanvasLayoutNumber(input.height);
+
+  return {
+    ...(currentLayout ?? {}),
+    ...(x !== undefined ? { x } : {}),
+    ...(y !== undefined ? { y } : {}),
+    ...(width !== undefined ? { width } : {}),
+    ...(height !== undefined ? { height } : {}),
+  };
+}

package/src/workbench/{WorkbenchCanvasShell.tsx → shell/WorkbenchCanvasShell.tsx}

@@ -1,10 +1,11 @@
 import { type CSSProperties, type ReactElement, useEffect, useMemo, useState } from 'react';
 import { createCommandRegistryFromContributions } from '@workbench-kit/platform';
 import { integratedShellWorkspaceFiles } from '@workbench-kit/adapters';
-import { Button } from '../primitives/Button';
-import { TextInput } from '../primitives/TextInput';
-import { SideBarViewFrame } from '../layout/SideBarViewFrame';
-import { createWorkbenchShellCommands } from './commands';
+import { Button } from '../../primitives/button';
+import { TextArea } from '../../primitives/text-area';
+import { TextInput } from '../../primitives/text-input';
+import { SideBarViewFrame } from '../../layout/sidebar';
+import { createWorkbenchShellCommands } from '../commands/commands';
 import { WorkbenchStandaloneShell } from './WorkbenchStandaloneShell';
 import type { WorkbenchActivityDescriptor, WorkbenchStandaloneBootstrap } from './standalone';
 import {
@@ -18,10 +19,18 @@ import {
   type WorkbenchDocumentPatchHistory,
   type WorkbenchDocumentPatchHistoryState,
   type WorkbenchDocumentPatchResult,
-} from './schema';
-
-const DEFAULT_CANVAS_ACTIVITY_ID = 'design';
-const DEFAULT_CANVAS_THEME = 'dark';
+} from '../schema';
+import {
+  DEFAULT_CANVAS_ACTIVITY_ID,
+  DEFAULT_CANVAS_THEME,
+  DEFAULT_WORKBENCH_CANVAS_DOCUMENT,
+  WORKBENCH_CANVAS_PLACEHOLDER_IMAGE_SRC,
+} from './WorkbenchCanvasShell.defaults';
+import {
+  createWorkbenchCanvasLayoutUpdate,
+  getWorkbenchCanvasNodeChildren,
+  getWorkbenchCanvasRootNodeIds,
+} from './WorkbenchCanvasShell.model';
 
 type StudioShellTab = 'source' | 'preview' | 'window' | 'layout' | 'tile' | 'layer';
 
@@ -32,108 +41,6 @@ type WorkbenchPatchApplyResult = {
   result: WorkbenchDocumentPatchResult;
 };
 
-const placeholderImageSrc = `data:image/svg+xml,${encodeURIComponent(
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#0f172a"/><stop offset="100%" stop-color="#334155"/></linearGradient></defs><rect width="320" height="180" fill="url(%23g)"/><text x="50%" y="52%" fill="white" font-size="24" text-anchor="middle" font-family="Arial">Image Layer</text></svg>',
-)}`;
-
-const defaultDocument: WorkbenchDocument = {
-  version: '1.0.0',
-  schemaVersion: 1,
-  pages: [
-    {
-      id: 'page-shell-canvas',
-      name: 'Design',
-      width: 1280,
-      height: 760,
-      background: '#1f2937',
-      nodes: [
-        {
-          id: 'shell-frame',
-          type: 'frame',
-          name: 'Window',
-          layout: { x: 80, y: 60, width: 980, height: 560 },
-          style: {
-            backgroundColor: '#0f172a',
-            borderColor: '#475569',
-            borderWidth: 1,
-            borderRadius: 12,
-            boxShadow: '0 12px 30px rgba(0, 0, 0, 0.45)',
-          },
-          children: ['tile-1', 'tile-2', 'tile-3'],
-        },
-        {
-          id: 'tile-1',
-          type: 'frame',
-          name: 'Tile: Header',
-          parentId: 'shell-frame',
-          layout: { x: 22, y: 18, width: 300, height: 180 },
-          style: {
-            backgroundColor: '#0ea5e9',
-            borderRadius: 10,
-            borderColor: '#0284c7',
-            borderWidth: 1,
-          },
-          children: ['tile-1-image', 'tile-1-text'],
-        },
-        {
-          id: 'tile-1-image',
-          type: 'image',
-          name: 'Image Layer',
-          parentId: 'tile-1',
-          layout: { x: 12, y: 12, width: 126, height: 90 },
-          src: placeholderImageSrc,
-          style: {
-            borderRadius: 8,
-            borderColor: '#0c4a6e',
-            borderWidth: 1,
-          },
-        },
-        {
-          id: 'tile-1-text',
-          type: 'text',
-          name: 'Text Layer',
-          parentId: 'tile-1',
-          layout: { x: 146, y: 36, width: 140, height: 80 },
-          content: 'Tile title',
-          style: {
-            color: '#f8fafc',
-            fontSize: 20,
-            fontFamily: 'Inter, "Segoe UI", sans-serif',
-            fontWeight: 700,
-          },
-        },
-        {
-          id: 'tile-2',
-          type: 'rectangle',
-          name: 'Action Tile',
-          parentId: 'shell-frame',
-          layout: { x: 336, y: 18, width: 280, height: 180 },
-          style: {
-            backgroundColor: '#7c3aed',
-            borderRadius: 10,
-            borderColor: '#6d28d9',
-            borderWidth: 1,
-            boxShadow: '0 8px 20px rgba(88, 28, 135, 0.45)',
-          },
-        },
-        {
-          id: 'tile-3',
-          type: 'rectangle',
-          name: 'Action Tile 2',
-          parentId: 'shell-frame',
-          layout: { x: 632, y: 18, width: 280, height: 180 },
-          style: {
-            backgroundColor: '#f59e0b',
-            borderRadius: 10,
-            borderColor: '#d97706',
-            borderWidth: 1,
-          },
-        },
-      ],
-    },
-  ],
-};
-
 export interface WorkbenchCanvasShellProps {
   initialDocument?: WorkbenchDocument;
   initialTheme?: 'light' | 'dark' | (string & {});
@@ -144,7 +51,7 @@ export interface WorkbenchCanvasShellProps {
 }
 
 export function WorkbenchCanvasShell({
-  initialDocument = defaultDocument,
+  initialDocument = DEFAULT_WORKBENCH_CANVAS_DOCUMENT,
   initialTheme = DEFAULT_CANVAS_THEME,
   rootClassName,
   rootStyle,
@@ -212,18 +119,7 @@ export function WorkbenchCanvasShell({
   }, [activePage?.nodes]);
 
   const rootNodeIds = useMemo(() => {
-    const childIdSet = new Set(
-      activePage?.nodes.flatMap((node: WorkbenchDocumentNode) => {
-        const nodeChildren =
-          'children' in node ? (node as { children?: readonly string[] }).children : undefined;
-        return nodeChildren ?? [];
-      }) ?? [],
-    );
-    return (
-      activePage?.nodes
-        .filter((node: WorkbenchDocumentNode) => !node.parentId && !childIdSet.has(node.id))
-        .map((node: WorkbenchDocumentNode) => node.id) ?? []
-    );
+    return getWorkbenchCanvasRootNodeIds(activePage?.nodes ?? []);
   }, [activePage?.nodes]);
 
   useEffect(() => {
@@ -359,7 +255,7 @@ export function WorkbenchCanvasShell({
             borderColor: '#94a3b8',
             borderWidth: 1,
           },
-          src: placeholderImageSrc,
+          src: WORKBENCH_CANVAS_PLACEHOLDER_IMAGE_SRC,
         },
       });
       return;
@@ -452,22 +348,12 @@ export function WorkbenchCanvasShell({
       setStatusText('select a node first');
       return;
     }
-    const parseNumber = (value: string) => {
-      const trimmed = value.trim();
-      const n = Number(trimmed);
-      if (trimmed === '' || !Number.isFinite(n)) {
-        return undefined;
-      }
-      return n;
-    };
-
-    const nextLayout = {
-      ...(selectedNode.layout ?? {}),
-      ...(parseNumber(layoutXInput) !== undefined ? { x: parseNumber(layoutXInput) } : {}),
-      ...(parseNumber(layoutYInput) !== undefined ? { y: parseNumber(layoutYInput) } : {}),
-      ...(parseNumber(layoutWInput) !== undefined ? { width: parseNumber(layoutWInput) } : {}),
-      ...(parseNumber(layoutHInput) !== undefined ? { height: parseNumber(layoutHInput) } : {}),
-    };
+    const nextLayout = createWorkbenchCanvasLayoutUpdate(selectedNode.layout, {
+      height: layoutHInput,
+      width: layoutWInput,
+      x: layoutXInput,
+      y: layoutYInput,
+    });
 
     applyAction({
       action: 'replace-layout',
@@ -555,13 +441,12 @@ export function WorkbenchCanvasShell({
       return [];
     }
 
-    const children =
-      'children' in node ? ((node as { children?: readonly string[] }).children ?? []) : [];
+    const children = getWorkbenchCanvasNodeChildren(node);
     const isSelected = node.id === selectedNodeId;
     const prefix = `${'\u00a0'.repeat(Math.max(depth - 1, 0) * 2)}${depth > 0 ? '↳ ' : ''}`;
 
     const row = (
-      <button
+      <Button
         key={node.id}
         onClick={() => selectNode(node.id)}
         style={{
@@ -592,7 +477,7 @@ export function WorkbenchCanvasShell({
           {prefix}
           {node.name}
         </span>
-      </button>
+      </Button>
     );
 
     return [row, ...children.flatMap((childId: string) => renderNodeRow(childId, depth + 1))];
@@ -656,8 +541,8 @@ export function WorkbenchCanvasShell({
     <WorkbenchStandaloneShell<StudioShellActivityId>
       bootstrap={bootstrap}
       compactStatus={compactStatus}
-      maxPrimarySidebarSizePercent={44}
-      minPrimarySidebarSizePercent={18}
+      maxPrimarySidebarSizePx={480}
+      minPrimarySidebarSizePx={200}
       getStatusSections={() => [
         {
           id: 'main',
@@ -774,13 +659,14 @@ export function WorkbenchCanvasShell({
                     </Button>
                     <span style={{ fontSize: 12, opacity: 0.8 }}>Editing document source</span>
                   </div>
-                  <textarea
+                  <TextArea
+                    controlWidth="full"
+                    resize="none"
                     value={sourceText}
                     onChange={(event) => setSourceText(event.currentTarget.value)}
                     style={{
                       width: '100%',
                       height: '100%',
-                      resize: 'none',
                       background: '#020617',
                       color: '#f8fafc',
                       border: '1px solid rgba(148, 163, 184, 0.3)',

package/src/workbench/shell/WorkbenchDesktopTitleBar.tsx

@@ -0,0 +1,126 @@
+import '../chrome/workbench-desktop-titlebar.css';
+import type { ReactNode } from 'react';
+import { cx } from '../../utils/cx';
+import { useWorkbenchHostPlatform } from '../chrome/WorkbenchPlatformContext';
+import {
+  shouldUseDarwinPlatformChrome,
+  WorkbenchWindowChromeControls,
+} from './WorkbenchWindowChromeControls';
+import {
+  resolveWorkbenchWindowChromeDataAttributes,
+  type WorkbenchWindowChromeMode,
+} from '../chrome/workbenchPlatformChrome';
+
+export interface WorkbenchDesktopWindowControlsProps {
+  /** Defaults to `platform` so standalone controls match `WorkbenchDesktopTitleBar`. */
+  chrome?: WorkbenchWindowChromeMode;
+  closeLabel?: string;
+  isMaximized: boolean;
+  maximizeLabel?: string;
+  minimizeLabel?: string;
+  onClose: () => void;
+  onMinimize: () => void;
+  onToggleMaximized: () => void;
+  restoreLabel?: string;
+}
+
+/**
+ * Minimize/maximize/close buttons for a frameless Electron (or similar) window.
+ * Pass host IPC callbacks only — kit owns platform chrome markup and placement.
+ * Marked `-webkit-app-region: no-drag` in CSS so clicks reach the buttons instead
+ * of starting a window drag from the surrounding titlebar.
+ */
+export function WorkbenchDesktopWindowControls({
+  chrome = 'platform',
+  closeLabel = 'Close window',
+  isMaximized,
+  maximizeLabel = 'Maximize window',
+  minimizeLabel = 'Minimize window',
+  onClose,
+  onMinimize,
+  onToggleMaximized,
+  restoreLabel = 'Restore window',
+}: WorkbenchDesktopWindowControlsProps) {
+  return (
+    <WorkbenchWindowChromeControls
+      chrome={chrome}
+      closeLabel={closeLabel}
+      isMaximized={isMaximized}
+      maximizeLabel={maximizeLabel}
+      minimizeLabel={minimizeLabel}
+      restoreLabel={restoreLabel}
+      surface="desktop-titlebar"
+      onClose={onClose}
+      onMinimize={onMinimize}
+      onToggleMaximized={onToggleMaximized}
+    />
+  );
+}
+
+export interface WorkbenchDesktopTitleBarProps {
+  /** Optional center area, e.g. a command-menu trigger. Omit to leave it empty. */
+  centerSlot?: ReactNode;
+  /**
+   * `platform` (default): darwin traffic lights / win32 caption buttons via host platform context.
+   * `generic`: maximize + close only (modal-like), no OS-specific placement.
+   */
+  chrome?: WorkbenchWindowChromeMode;
+  className?: string;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  /**
+   * Host-supplied window actions (Electron IPC callbacks). Omit on platforms that keep a native frame.
+   * Kit owns chrome markup; the host owns minimize / maximize / close side effects only.
+   */
+  windowControls?: WorkbenchDesktopWindowControlsProps;
+}
+
+/**
+ * Drop-in content for `WorkbenchShellProps.titleBar` when the host window has no native
+ * frame (`BrowserWindow({ frame: false })`). The whole bar is `-webkit-app-region: drag`
+ * by default; `leading`/`centerSlot`/`trailing` are `no-drag` so their own controls stay
+ * clickable.
+ */
+export function WorkbenchDesktopTitleBar({
+  centerSlot,
+  chrome = 'platform',
+  className,
+  leading,
+  trailing,
+  windowControls,
+}: WorkbenchDesktopTitleBarProps) {
+  const platform = useWorkbenchHostPlatform();
+  const useDarwinChrome = shouldUseDarwinPlatformChrome(chrome, platform);
+  const chromeAttributes = resolveWorkbenchWindowChromeDataAttributes(chrome);
+
+  const controls = windowControls ? (
+    <WorkbenchWindowChromeControls
+      chrome={chrome}
+      closeLabel={windowControls.closeLabel ?? 'Close window'}
+      isMaximized={windowControls.isMaximized}
+      maximizeLabel={windowControls.maximizeLabel ?? 'Maximize window'}
+      minimizeLabel={windowControls.minimizeLabel ?? 'Minimize window'}
+      restoreLabel={windowControls.restoreLabel ?? 'Restore window'}
+      surface="desktop-titlebar"
+      onClose={windowControls.onClose}
+      onMinimize={windowControls.onMinimize}
+      onToggleMaximized={windowControls.onToggleMaximized}
+    />
+  ) : null;
+
+  return (
+    <div className={cx('ui-workbench-desktop-titlebar', className)} {...(chromeAttributes ?? {})}>
+      <div className="ui-workbench-desktop-titlebar__leading">
+        {useDarwinChrome ? controls : null}
+        {leading}
+      </div>
+      {centerSlot ? (
+        <div className="ui-workbench-desktop-titlebar__center">{centerSlot}</div>
+      ) : null}
+      <div className="ui-workbench-desktop-titlebar__trailing">
+        {trailing}
+        {!useDarwinChrome ? controls : null}
+      </div>
+    </div>
+  );
+}