@workbench-kit/shell-react 0.0.2-prototype.0.2.10

package/src/jdw/json-form-source-patch.ts

@@ -0,0 +1,323 @@
+export type JsonFormPath = readonly (string | number)[];
+
+export interface JsonTextRange {
+  readonly end: number;
+  readonly start: number;
+}
+
+export function replaceJsonValueAtPath(
+  source: string,
+  path: JsonFormPath,
+  nextValue: unknown,
+): string {
+  if (path.length === 0) {
+    return JSON.stringify(nextValue);
+  }
+
+  const range = findJsonValueRangeAtPath(source, path);
+  if (!range) {
+    return fallbackSerializeJsonPathEdit(source, path, nextValue);
+  }
+
+  return `${source.slice(0, range.start)}${JSON.stringify(nextValue)}${source.slice(range.end)}`;
+}
+
+function fallbackSerializeJsonPathEdit(
+  source: string,
+  path: JsonFormPath,
+  nextValue: unknown,
+): string {
+  const parsed: unknown = JSON.parse(source);
+  const nextRecord = updateJsonPathValue(parsed, path, nextValue);
+  return JSON.stringify(nextRecord, null, detectJsonIndent(source));
+}
+
+function detectJsonIndent(source: string): number {
+  return /\n[ \t]+"/.test(source) ? 2 : 0;
+}
+
+function updateJsonPathValue(value: unknown, path: JsonFormPath, nextValue: unknown): unknown {
+  if (path.length === 0) {
+    return nextValue;
+  }
+
+  const [head, ...tail] = path;
+
+  if (Array.isArray(value) && typeof head === 'number') {
+    const nextArray = [...value];
+    nextArray[head] = updateJsonPathValue(nextArray[head], tail, nextValue);
+    return nextArray;
+  }
+
+  if (isJsonRecord(value) && typeof head === 'string') {
+    return {
+      ...value,
+      [head]: updateJsonPathValue(value[head], tail, nextValue),
+    };
+  }
+
+  return value;
+}
+
+function isJsonRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+export function findJsonValueRangeAtPath(source: string, path: JsonFormPath): JsonTextRange | null {
+  const start = skipWhitespace(source, 0);
+  if (start >= source.length) {
+    return null;
+  }
+
+  return locateJsonValueRange(source, start, path, 0);
+}
+
+function locateJsonValueRange(
+  source: string,
+  index: number,
+  path: JsonFormPath,
+  pathIndex: number,
+): JsonTextRange | null {
+  index = skipWhitespace(source, index);
+
+  if (pathIndex >= path.length) {
+    const end = scanJsonValueEnd(source, index);
+    return end < 0 ? null : { start: index, end };
+  }
+
+  const segment = path[pathIndex];
+  if (typeof segment === 'number') {
+    if (source[index] !== '[') {
+      return null;
+    }
+
+    return locateJsonValueInArray(source, index + 1, path, pathIndex, segment);
+  }
+
+  if (typeof segment === 'string') {
+    if (source[index] !== '{') {
+      return null;
+    }
+
+    return locateJsonValueInObject(source, index + 1, path, pathIndex, segment);
+  }
+
+  return null;
+}
+
+function locateJsonValueInObject(
+  source: string,
+  index: number,
+  path: JsonFormPath,
+  pathIndex: number,
+  key: string,
+): JsonTextRange | null {
+  let cursor = skipWhitespace(source, index);
+
+  while (cursor < source.length && source[cursor] !== '}') {
+    const keyRange = scanJsonStringToken(source, cursor);
+    if (!keyRange) {
+      return null;
+    }
+
+    const parsedKey = JSON.parse(source.slice(keyRange.start, keyRange.end)) as string;
+    cursor = skipWhitespace(source, keyRange.end);
+
+    if (source[cursor] !== ':') {
+      return null;
+    }
+
+    cursor = skipWhitespace(source, cursor + 1);
+
+    if (parsedKey === key) {
+      return locateJsonValueRange(source, cursor, path, pathIndex + 1);
+    }
+
+    const valueEnd = scanJsonValueEnd(source, cursor);
+    if (valueEnd < 0) {
+      return null;
+    }
+
+    cursor = skipWhitespace(source, valueEnd);
+    if (source[cursor] === ',') {
+      cursor = skipWhitespace(source, cursor + 1);
+      continue;
+    }
+
+    if (source[cursor] === '}') {
+      return null;
+    }
+
+    return null;
+  }
+
+  return null;
+}
+
+function locateJsonValueInArray(
+  source: string,
+  index: number,
+  path: JsonFormPath,
+  pathIndex: number,
+  targetIndex: number,
+): JsonTextRange | null {
+  let cursor = skipWhitespace(source, index);
+  let currentIndex = 0;
+
+  while (cursor < source.length && source[cursor] !== ']') {
+    if (currentIndex === targetIndex) {
+      return locateJsonValueRange(source, cursor, path, pathIndex + 1);
+    }
+
+    const valueEnd = scanJsonValueEnd(source, cursor);
+    if (valueEnd < 0) {
+      return null;
+    }
+
+    currentIndex += 1;
+    cursor = skipWhitespace(source, valueEnd);
+
+    if (source[cursor] === ',') {
+      cursor = skipWhitespace(source, cursor + 1);
+      continue;
+    }
+
+    if (source[cursor] === ']') {
+      return null;
+    }
+
+    return null;
+  }
+
+  return null;
+}
+
+function scanJsonValueEnd(source: string, index: number): number {
+  index = skipWhitespace(source, index);
+  if (index >= source.length) {
+    return -1;
+  }
+
+  const char = source[index];
+
+  if (char === '"') {
+    const stringToken = scanJsonStringToken(source, index);
+    return stringToken?.end ?? -1;
+  }
+
+  if (char === '{') {
+    return scanJsonContainerEnd(source, index, '{', '}');
+  }
+
+  if (char === '[') {
+    return scanJsonContainerEnd(source, index, '[', ']');
+  }
+
+  if (source.startsWith('true', index)) {
+    return index + 4;
+  }
+
+  if (source.startsWith('false', index)) {
+    return index + 5;
+  }
+
+  if (source.startsWith('null', index)) {
+    return index + 4;
+  }
+
+  let cursor = index;
+  while (cursor < source.length && !',]} \t\r\n'.includes(source[cursor] ?? '')) {
+    cursor += 1;
+  }
+
+  return cursor > index ? cursor : -1;
+}
+
+function scanJsonContainerEnd(
+  source: string,
+  index: number,
+  openChar: '{' | '[',
+  closeChar: '}' | ']',
+): number {
+  let depth = 0;
+  let cursor = index;
+  let inString = false;
+  let escaped = false;
+
+  while (cursor < source.length) {
+    const char = source[cursor];
+
+    if (inString) {
+      if (escaped) {
+        escaped = false;
+      } else if (char === '\\') {
+        escaped = true;
+      } else if (char === '"') {
+        inString = false;
+      }
+
+      cursor += 1;
+      continue;
+    }
+
+    if (char === '"') {
+      inString = true;
+      cursor += 1;
+      continue;
+    }
+
+    if (char === openChar) {
+      depth += 1;
+    } else if (char === closeChar) {
+      depth -= 1;
+      if (depth === 0) {
+        return cursor + 1;
+      }
+    }
+
+    cursor += 1;
+  }
+
+  return -1;
+}
+
+function scanJsonStringToken(source: string, index: number): JsonTextRange | null {
+  if (source[index] !== '"') {
+    return null;
+  }
+
+  let cursor = index + 1;
+  let escaped = false;
+
+  while (cursor < source.length) {
+    const char = source[cursor];
+
+    if (escaped) {
+      escaped = false;
+      cursor += 1;
+      continue;
+    }
+
+    if (char === '\\') {
+      escaped = true;
+      cursor += 1;
+      continue;
+    }
+
+    if (char === '"') {
+      return { start: index, end: cursor + 1 };
+    }
+
+    cursor += 1;
+  }
+
+  return null;
+}
+
+function skipWhitespace(source: string, index: number): number {
+  while (index < source.length && /\s/.test(source[index] ?? '')) {
+    index += 1;
+  }
+
+  return index;
+}

package/src/jdw/lab-view-data.ts

@@ -0,0 +1,25 @@
+export const SAMPLE_JDW_LAB_VIEW_RENDER_KIND = 'workbench-kit.samples.jdw.view' as const;
+
+export interface SampleJdwLabViewRenderData {
+  readonly kind: typeof SAMPLE_JDW_LAB_VIEW_RENDER_KIND;
+  readonly templateJdwPath: string;
+  readonly widgetTreePath: string;
+}
+
+export function isSampleJdwLabViewRenderData(value: unknown): value is SampleJdwLabViewRenderData {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+
+  const candidate = value as {
+    kind?: unknown;
+    templateJdwPath?: unknown;
+    widgetTreePath?: unknown;
+  };
+
+  return (
+    candidate.kind === SAMPLE_JDW_LAB_VIEW_RENDER_KIND &&
+    typeof candidate.templateJdwPath === 'string' &&
+    typeof candidate.widgetTreePath === 'string'
+  );
+}

package/src/jdw/lab-view.css

@@ -0,0 +1,21 @@
+.workbench-jdw-lab-view {
+  height: 100%;
+  min-height: 0;
+}
+
+.workbench-jdw-lab-view__list {
+  padding-block: 4px;
+}
+
+.workbench-jdw-lab-view .ui-workbench-action-list-item__description {
+  font-family: var(
+    --monaco-monospace-font,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Consolas,
+    monospace
+  );
+  font-size: 11px;
+  opacity: 0.85;
+}

package/src/jdw/lab-view.tsx

@@ -0,0 +1,79 @@
+import { WorkbenchActionSidebar } from '@workbench-kit/react/layout';
+
+import './lab-view.css';
+
+import { useWorkbench } from '../shell/provider.js';
+import { useActiveEditorTab } from '../editor/use-editor.js';
+import { useActiveWorkspacePath } from '../explorer/use-active-workspace-path.js';
+import {
+  isSampleJdwLabViewRenderData,
+  SAMPLE_JDW_LAB_VIEW_RENDER_KIND,
+  type SampleJdwLabViewRenderData,
+} from './lab-view-data.js';
+
+export type { SampleJdwLabViewRenderData };
+export { isSampleJdwLabViewRenderData, SAMPLE_JDW_LAB_VIEW_RENDER_KIND };
+
+const WORKSPACE_OPEN_COMMAND_ID = 'workspace.open' as const;
+
+const DEFAULT_WIDGET_TREE_PATH = 'jdw/showcase/example.jdw.json';
+const DEFAULT_TEMPLATE_JDW_PATH = 'jdw/templates/analytics-dashboard.jdw.json';
+
+export interface SampleJdwLabViewProps {
+  readonly templateJdwPath?: string | undefined;
+  readonly widgetTreePath?: string | undefined;
+}
+
+function pathMatches(activePath: string | undefined, candidate: string): boolean {
+  if (!activePath) {
+    return false;
+  }
+
+  return activePath === candidate || activePath.endsWith(`/${candidate}`);
+}
+
+export function SampleJdwLabView({
+  templateJdwPath = DEFAULT_TEMPLATE_JDW_PATH,
+  widgetTreePath = DEFAULT_WIDGET_TREE_PATH,
+}: SampleJdwLabViewProps = {}) {
+  const { executeCommand } = useWorkbench();
+  const activeTab = useActiveEditorTab();
+  const activePath = useActiveWorkspacePath(activeTab?.resourceUri);
+
+  return (
+    <WorkbenchActionSidebar
+      className="workbench-jdw-lab-view"
+      data-testid="jdw-lab-view"
+      items={[
+        {
+          description: widgetTreePath,
+          icon: <i aria-hidden="true" className="codicon codicon-layout" />,
+          id: 'widget-tree',
+          label: 'Widget Tree',
+          selected: pathMatches(activePath, widgetTreePath),
+          testId: 'jdw-lab-open-widget-tree',
+          title: `Open ${widgetTreePath}`,
+        },
+        {
+          description: templateJdwPath,
+          icon: <i aria-hidden="true" className="codicon codicon-symbol-structure" />,
+          id: 'template-jdw',
+          label: 'Template JDW',
+          selected: pathMatches(activePath, templateJdwPath),
+          testId: 'jdw-lab-open-template-jdw',
+          title: `Open ${templateJdwPath}`,
+        },
+      ]}
+      listProps={{
+        'aria-label': 'JDW lab surfaces',
+        className: 'workbench-jdw-lab-view__list',
+      }}
+      onSelect={(item) => {
+        if (typeof item.description !== 'string' || item.description.length === 0) {
+          return;
+        }
+        void executeCommand(WORKSPACE_OPEN_COMMAND_ID, { path: item.description });
+      }}
+    />
+  );
+}

package/src/jdw/widget-form-view.tsx

@@ -0,0 +1,68 @@
+import { useCallback, useMemo } from 'react';
+import { resolveWidgetStudioAssetCatalog } from '@workbench-kit/react/widget-studio';
+import { WidgetTreeLab } from '@workbench-kit/react/widget-tree';
+import { BUILTIN_JDW_REGISTRY } from '@workbench-kit/react/jdw';
+
+import { useWorkbench } from '../shell/provider.js';
+import {
+  isWorkspaceResourceService,
+  useWorkspaceResourceState,
+} from '../workbench/workspace-view-state.js';
+
+export interface JdwWidgetFormViewProps {
+  readonly path: string;
+  readonly content: string;
+  readonly onContentChange: (content: string) => void;
+}
+
+const EMPTY_WORKSPACE_FILES: readonly { readonly path: string; readonly content: string }[] = [];
+
+/**
+ * Form authoring surface for JDW widgets. Builds the Assets palette from built-in
+ * assets, workspace asset packages, and other workspace `*.jdw.json` documents.
+ * Preview expands `type: "ref"` via workspace documents without rewriting the
+ * authored JSON outline.
+ */
+export function JdwWidgetFormView({ path, content, onContentChange }: JdwWidgetFormViewProps) {
+  const { workspaceHostPort } = useWorkbench();
+  const workspaceService = isWorkspaceResourceService(workspaceHostPort?.service)
+    ? workspaceHostPort.service
+    : undefined;
+  const workspaceState = useWorkspaceResourceState(workspaceService);
+  const files =
+    workspaceState?.files ?? workspaceService?.getState().files ?? EMPTY_WORKSPACE_FILES;
+
+  const filesByPath = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const file of files) {
+      map.set(file.path.replace(/\\/g, '/'), file.content);
+    }
+    return map;
+  }, [files]);
+
+  const loadDocument = useCallback(
+    (documentPath: string) => filesByPath.get(documentPath.replace(/\\/g, '/')) ?? null,
+    [filesByPath],
+  );
+
+  const assetCatalog = useMemo(
+    () =>
+      resolveWidgetStudioAssetCatalog(files, {
+        excludeDocumentPaths: [path],
+      }),
+    [files, path],
+  );
+
+  return (
+    <WidgetTreeLab
+      assetCatalog={assetCatalog}
+      loadDocument={loadDocument}
+      path={path}
+      registry={BUILTIN_JDW_REGISTRY}
+      showDesignSource={false}
+      value={content}
+      viewMode="design"
+      onChange={onContentChange}
+    />
+  );
+}

package/src/jdw/widget-preview-view.tsx

@@ -0,0 +1,54 @@
+import { useCallback, useMemo } from 'react';
+import { JdwPreviewViewport } from '@workbench-kit/react/jdw/preview-viewport';
+import { BUILTIN_JDW_REGISTRY } from '@workbench-kit/react/jdw';
+
+import { useWorkbench } from '../shell/provider.js';
+import {
+  isWorkspaceResourceService,
+  useWorkspaceResourceState,
+} from '../workbench/workspace-view-state.js';
+
+export interface JdwWidgetPreviewViewProps {
+  readonly path: string;
+  readonly content: string;
+  readonly className?: string | undefined;
+}
+
+const EMPTY_WORKSPACE_FILES: readonly { readonly path: string; readonly content: string }[] = [];
+
+/**
+ * Preview viewport for JDW documents. Expands workspace `type: "ref"` imports
+ * before layout/draw without rewriting the source buffer.
+ */
+export function JdwWidgetPreviewView({ path, content, className }: JdwWidgetPreviewViewProps) {
+  const { workspaceHostPort } = useWorkbench();
+  const workspaceService = isWorkspaceResourceService(workspaceHostPort?.service)
+    ? workspaceHostPort.service
+    : undefined;
+  const workspaceState = useWorkspaceResourceState(workspaceService);
+  const files =
+    workspaceState?.files ?? workspaceService?.getState().files ?? EMPTY_WORKSPACE_FILES;
+
+  const filesByPath = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const file of files) {
+      map.set(file.path.replace(/\\/g, '/'), file.content);
+    }
+    return map;
+  }, [files]);
+
+  const loadDocument = useCallback(
+    (documentPath: string) => filesByPath.get(documentPath.replace(/\\/g, '/')) ?? null,
+    [filesByPath],
+  );
+
+  return (
+    <JdwPreviewViewport
+      className={className}
+      documentPath={path}
+      json={content}
+      loadDocument={loadDocument}
+      registry={BUILTIN_JDW_REGISTRY}
+    />
+  );
+}

package/src/management/keybinding-overrides-storage.ts

@@ -0,0 +1,49 @@
+import {
+  parseWorkbenchKeybindingsConfig,
+  type WorkbenchKeybindingDefinition,
+} from '@workbench-kit/workbench-config';
+import {
+  createBrowserWorkbenchStorage,
+  type WorkbenchStorageReader,
+  type WorkbenchStorageWriter,
+} from '@workbench-kit/workbench-core';
+
+export const DEFAULT_WORKBENCH_KEYBINDING_STORAGE_KEY = 'workbench-kit/.workbench/keybindings';
+
+export function isWorkbenchKeybindingPersistenceAvailable(): boolean {
+  return createBrowserWorkbenchStorage({ kind: 'local' }) !== undefined;
+}
+
+export function readPersistedKeybindingOverrides(
+  storageKey = DEFAULT_WORKBENCH_KEYBINDING_STORAGE_KEY,
+  storage?: WorkbenchStorageReader,
+): readonly WorkbenchKeybindingDefinition[] {
+  const resolvedStorage = storage ?? createBrowserWorkbenchStorage({ kind: 'local' });
+  if (!resolvedStorage) {
+    return [];
+  }
+
+  try {
+    const raw = resolvedStorage.getItem(storageKey);
+    if (!raw) {
+      return [];
+    }
+
+    return parseWorkbenchKeybindingsConfig(JSON.parse(raw) as unknown);
+  } catch {
+    return [];
+  }
+}
+
+export function writePersistedKeybindingOverrides(
+  overrides: readonly WorkbenchKeybindingDefinition[],
+  storageKey = DEFAULT_WORKBENCH_KEYBINDING_STORAGE_KEY,
+  storage?: WorkbenchStorageWriter,
+): void {
+  const resolvedStorage = storage ?? createBrowserWorkbenchStorage({ kind: 'local' });
+  if (!resolvedStorage) {
+    return;
+  }
+
+  resolvedStorage.setItem(storageKey, JSON.stringify(overrides, null, 2));
+}

package/src/management/keybinding-settings.tsx

@@ -0,0 +1,16 @@
+import { KeybindingManagementPanel } from '@workbench-kit/react/workbench/management';
+
+import { useKeybindingManagementModel } from './use-keybinding-management.js';
+
+export function WorkbenchKeybindingManagementSettings() {
+  const { entries, overrideCount, resetKeybinding, setKeybinding } = useKeybindingManagementModel();
+
+  return (
+    <KeybindingManagementPanel
+      entries={entries}
+      summaryLabel={`${entries.length} command${entries.length === 1 ? '' : 's'} · ${overrideCount} user override${overrideCount === 1 ? '' : 's'}`}
+      onResetKeybinding={resetKeybinding}
+      onSetKeybinding={setKeybinding}
+    />
+  );
+}

package/src/management/palette-commands.ts

@@ -0,0 +1,38 @@
+import type { WorkbenchCommandDescriptor } from '@workbench-kit/react/workbench';
+
+import {
+  MANAGE_ACCOUNTS_COMMAND_ID,
+  MANAGE_COMMANDS_COMMAND_ID,
+  MANAGE_EXTENSIONS_COMMAND_ID,
+  MANAGE_KEYBINDINGS_COMMAND_ID,
+} from './settings-ids.js';
+
+/** Pure helper — kept out of React component modules for Fast Refresh. */
+export function createWorkbenchManagementPaletteCommands(): readonly WorkbenchCommandDescriptor[] {
+  return [
+    {
+      category: 'Workbench',
+      icon: 'codicon-terminal',
+      id: MANAGE_COMMANDS_COMMAND_ID,
+      label: 'Manage Commands',
+    },
+    {
+      category: 'Workbench',
+      icon: 'codicon-keyboard',
+      id: MANAGE_KEYBINDINGS_COMMAND_ID,
+      label: 'Keyboard Shortcuts',
+    },
+    {
+      category: 'Workbench',
+      icon: 'codicon-extensions',
+      id: MANAGE_EXTENSIONS_COMMAND_ID,
+      label: 'Extensions',
+    },
+    {
+      category: 'Accounts',
+      icon: 'codicon-account',
+      id: MANAGE_ACCOUNTS_COMMAND_ID,
+      label: 'Manage Linked Accounts',
+    },
+  ];
+}