@workbench-kit/react 0.0.1-prototype.0 → 0.0.2-prototype.0.1.1

package/src/utils/codicon.ts

@@ -0,0 +1,17 @@
+import { cx } from './cx';
+
+export function getCodiconClassName(icon: string | undefined): string | undefined {
+  const token = icon?.trim();
+  if (!token) return undefined;
+
+  return token.startsWith('codicon-') ? token : `codicon-${token}`;
+}
+
+export function cxCodicon(
+  icon: string | undefined,
+  ...classNames: Array<false | null | string | undefined>
+) {
+  const iconClassName = getCodiconClassName(icon);
+
+  return iconClassName ? cx('codicon', iconClassName, ...classNames) : cx(...classNames);
+}

package/src/widget-asset/WidgetAssetEditor.tsx

@@ -0,0 +1,140 @@
+import { useMemo } from 'react';
+import type { WidgetPlacementAsset, WidgetRegistryContract } from '@workbench-kit/contracts';
+import {
+  createWidgetAssetDocument,
+  formatWidgetAssetContent,
+  formatWidgetAssetManifest,
+  formatWidgetDocumentJson,
+  isWidgetAssetContentPath,
+  isWidgetAssetManifestPath,
+  type GenericWidget,
+  type WorkspaceAssetFileRef,
+} from '@workbench-kit/jdw';
+
+import { JdwPreview } from '../jdw/JdwPreview.js';
+import { WidgetAssetSourceEditor } from './WidgetAssetSourceEditor.js';
+import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
+import { WorkbenchPropertyHint, WorkbenchPropertyPanel } from '../layout/WorkbenchPropertyPanel';
+import { WidgetInspectorPanel } from '../widget-tree/WidgetInspectorPanel.js';
+import { WidgetAssetMetadataForm } from './WidgetAssetMetadataForm.js';
+import type { WidgetAssetViewMode } from './widget-asset-mode.js';
+
+export interface WidgetAssetEditorProps {
+  readonly path?: string | undefined;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly onSave?: (() => void) | undefined;
+  readonly registry?: WidgetRegistryContract<unknown> | undefined;
+  readonly readOnly?: boolean | undefined;
+  readonly theme?: WorkspaceEditorTheme | undefined;
+  readonly viewMode?: WidgetAssetViewMode | undefined;
+  readonly workspaceFiles?: readonly WorkspaceAssetFileRef[] | undefined;
+}
+
+export function WidgetAssetEditor({
+  path,
+  value,
+  onChange,
+  onSave,
+  registry,
+  readOnly = false,
+  theme = 'dark',
+  viewMode = 'design',
+  workspaceFiles,
+}: WidgetAssetEditorProps) {
+  const document = useMemo(
+    () =>
+      createWidgetAssetDocument(value, {
+        ...(path ? { path } : {}),
+        ...(workspaceFiles ? { workspaceFiles } : {}),
+      }),
+    [path, value, workspaceFiles],
+  );
+
+  const sourceEditor = (
+    <WidgetAssetSourceEditor
+      parseError={document.parseError}
+      path={path}
+      readOnly={readOnly}
+      theme={theme}
+      value={value}
+      onChange={onChange}
+      onSave={onSave}
+    />
+  );
+
+  if (viewMode === 'code') {
+    return (
+      <div
+        className="widget-asset-editor widget-asset-editor--code"
+        data-testid="widget-asset-editor"
+      >
+        {sourceEditor}
+      </div>
+    );
+  }
+
+  if (document.parseError !== null || document.asset === null) {
+    const hint =
+      document.parseError ??
+      'Open manifest.json with a sibling content.json in the workspace to use design mode.';
+
+    return (
+      <div
+        className="widget-asset-editor widget-asset-editor--error"
+        data-testid="widget-asset-editor"
+      >
+        <WorkbenchPropertyPanel>
+          <WorkbenchPropertyHint>{hint}</WorkbenchPropertyHint>
+        </WorkbenchPropertyPanel>
+        {sourceEditor}
+      </div>
+    );
+  }
+
+  const asset = document.asset;
+  const editingManifest = Boolean(path && isWidgetAssetManifestPath(path));
+  const editingContent = Boolean(path && isWidgetAssetContentPath(path));
+  const previewJson =
+    editingContent && path ? value : formatWidgetDocumentJson(asset.content as GenericWidget);
+
+  const commitAssetMetadata = (nextAsset: WidgetPlacementAsset) => {
+    onChange(formatWidgetAssetManifest(nextAsset));
+  };
+
+  return (
+    <div
+      className="widget-asset-editor widget-asset-editor--design"
+      data-testid="widget-asset-editor"
+    >
+      <div className="widget-asset-editor__design">
+        {editingManifest ? (
+          <section className="widget-asset-editor__meta">
+            <WidgetAssetMetadataForm
+              asset={asset}
+              readOnly={readOnly}
+              onChange={commitAssetMetadata}
+            />
+          </section>
+        ) : null}
+        {editingContent ? (
+          <section className="widget-asset-editor__template">
+            <WidgetInspectorPanel
+              path={[]}
+              readOnly={readOnly}
+              widget={asset.content as GenericWidget}
+              widgetRegistry={registry}
+              onPatch={(nextWidget) => onChange(formatWidgetAssetContent(nextWidget))}
+            />
+          </section>
+        ) : null}
+        <section aria-label="Asset preview" className="widget-asset-editor__preview">
+          <header className="widget-asset-editor__preview-header">Placement preview</header>
+          <div className="widget-asset-editor__preview-body">
+            <JdwPreview json={previewJson} registry={registry} />
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

package/src/widget-asset/WidgetAssetMetadataForm.tsx

@@ -0,0 +1,82 @@
+import type { WidgetPlacementAsset, WidgetPlacementAssetKind } from '@workbench-kit/contracts';
+
+import {
+  WorkbenchPropertySelectRow,
+  WorkbenchPropertyStack,
+  WorkbenchPropertySection,
+  WorkbenchPropertyTextRow,
+} from '../layout/WorkbenchPropertyPanel';
+
+const CATEGORY_OPTIONS = [
+  { label: 'Content', value: 'content' },
+  { label: 'Layout', value: 'layout' },
+  { label: 'Template', value: 'template' },
+];
+
+const KIND_OPTIONS: { label: string; value: WidgetPlacementAssetKind }[] = [
+  { label: 'Leaf', value: 'leaf' },
+  { label: 'Container', value: 'container' },
+  { label: 'Template', value: 'template' },
+];
+
+export interface WidgetAssetMetadataFormProps {
+  readonly asset: WidgetPlacementAsset;
+  readonly readOnly?: boolean | undefined;
+  readonly onChange: (next: WidgetPlacementAsset) => void;
+}
+
+export function WidgetAssetMetadataForm({
+  asset,
+  onChange,
+  readOnly = false,
+}: WidgetAssetMetadataFormProps) {
+  const patch = (patchValue: Partial<WidgetPlacementAsset>) => {
+    onChange({ ...asset, ...patchValue });
+  };
+
+  return (
+    <WorkbenchPropertyStack>
+      <WorkbenchPropertySection title="Asset">
+        <WorkbenchPropertyTextRow
+          label="ID"
+          readOnly={readOnly}
+          value={asset.id}
+          onValueChange={(next) => patch({ id: next })}
+        />
+        <WorkbenchPropertyTextRow
+          label="Label"
+          readOnly={readOnly}
+          value={asset.label}
+          onValueChange={(next) => patch({ label: next })}
+        />
+        <WorkbenchPropertyTextRow
+          label="Description"
+          readOnly={readOnly}
+          value={asset.description ?? ''}
+          onValueChange={(next) => patch({ description: next.length > 0 ? next : undefined })}
+        />
+        <WorkbenchPropertySelectRow
+          label="Category"
+          disabled={readOnly}
+          options={CATEGORY_OPTIONS}
+          value={asset.category}
+          onValueChange={(next) => patch({ category: next })}
+        />
+        <WorkbenchPropertySelectRow
+          label="Kind"
+          disabled={readOnly}
+          options={KIND_OPTIONS}
+          value={asset.kind ?? 'leaf'}
+          onValueChange={(next) => patch({ kind: next })}
+        />
+        <WorkbenchPropertyTextRow
+          label="Icon"
+          placeholder="codicon-symbol-text"
+          readOnly={readOnly}
+          value={asset.icon ?? ''}
+          onValueChange={(next) => patch({ icon: next.length > 0 ? next : undefined })}
+        />
+      </WorkbenchPropertySection>
+    </WorkbenchPropertyStack>
+  );
+}

package/src/widget-asset/WidgetAssetModeControls.tsx

@@ -0,0 +1,42 @@
+import { IconButton } from '../primitives/IconButton';
+import { cx } from '../utils/cx';
+import type { WidgetAssetViewMode } from './widget-asset-mode.js';
+
+export interface WidgetAssetModeControlsProps {
+  readonly className?: string | undefined;
+  readonly mode: WidgetAssetViewMode;
+  readonly onModeChange: (mode: WidgetAssetViewMode) => void;
+}
+
+export function WidgetAssetModeControls({
+  className,
+  mode,
+  onModeChange,
+}: WidgetAssetModeControlsProps) {
+  return (
+    <div
+      className={cx('ui-workbench-artifact-shell__modes', 'widget-asset-mode-controls', className)}
+    >
+      <IconButton
+        aria-pressed={mode === 'design'}
+        className={cx(
+          'ui-workbench-artifact-shell__mode',
+          mode === 'design' && 'ui-workbench-artifact-shell__mode--active',
+        )}
+        icon="codicon-edit"
+        label="Design"
+        onClick={() => onModeChange('design')}
+      />
+      <IconButton
+        aria-pressed={mode === 'code'}
+        className={cx(
+          'ui-workbench-artifact-shell__mode',
+          mode === 'code' && 'ui-workbench-artifact-shell__mode--active',
+        )}
+        icon="codicon-code"
+        label="Code"
+        onClick={() => onModeChange('code')}
+      />
+    </div>
+  );
+}

package/src/widget-asset/WidgetAssetSourceEditor.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+
+import { JsonCodeEditorPane } from '../jdw/JsonCodeEditorPane.js';
+import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
+import type { WorkspaceFile } from '../workbench/workspace/types.js';
+import { resolveWidgetAssetMimeType } from './widget-asset-document.js';
+
+export interface WidgetAssetSourceEditorProps {
+  readonly path?: string | undefined;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly onSave?: (() => void) | undefined;
+  readonly parseError?: string | null | undefined;
+  readonly readOnly?: boolean | undefined;
+  readonly theme?: WorkspaceEditorTheme | undefined;
+}
+
+export function WidgetAssetSourceEditor({
+  path = 'assets/new-asset/manifest.json',
+  value,
+  onChange,
+  onSave,
+  parseError = null,
+  readOnly = false,
+  theme = 'dark',
+}: WidgetAssetSourceEditorProps) {
+  const file = useMemo<WorkspaceFile>(
+    () => ({
+      content: value,
+      mimeType: resolveWidgetAssetMimeType(path),
+      path,
+    }),
+    [path, value],
+  );
+
+  return (
+    <div className="widget-asset-source" data-testid="widget-asset-source">
+      <JsonCodeEditorPane
+        documentParseError={parseError}
+        file={file}
+        readOnly={readOnly}
+        showProblemsPanel={false}
+        theme={theme}
+        value={value}
+        onChange={onChange}
+        onSave={onSave}
+      />
+    </div>
+  );
+}

package/src/widget-asset/WidgetAssetWorkbench.tsx

@@ -0,0 +1,112 @@
+import { useState, type ReactNode } from 'react';
+import type { WidgetRegistryContract } from '@workbench-kit/contracts';
+
+import { Panel, PanelBody, PanelHeader } from '../layout/Panel';
+import { Button } from '../primitives/Button';
+import { Toolbar } from '../primitives/Toolbar';
+import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
+import { fileNameOfPath } from '../workbench/workspace/path';
+import type { WorkspaceFile } from '../workbench/workspace/types.js';
+import { WidgetAssetEditor } from './WidgetAssetEditor.js';
+import { WidgetAssetModeControls } from './WidgetAssetModeControls.js';
+import { DEFAULT_WIDGET_ASSET_VIEW_MODE, type WidgetAssetViewMode } from './widget-asset-mode.js';
+
+export interface WidgetAssetWorkbenchProps {
+  readonly path?: string | undefined;
+  readonly title?: ReactNode | undefined;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly onSave?: (() => void) | undefined;
+  readonly onDiscard?: (() => void) | undefined;
+  readonly dirty?: boolean | undefined;
+  readonly readOnly?: boolean | undefined;
+  readonly registry?: WidgetRegistryContract<unknown> | undefined;
+  readonly theme?: WorkspaceEditorTheme | undefined;
+  readonly defaultViewMode?: WidgetAssetViewMode | undefined;
+  readonly viewMode?: WidgetAssetViewMode | undefined;
+  readonly onViewModeChange?: ((mode: WidgetAssetViewMode) => void) | undefined;
+  readonly workspaceFiles?: readonly WorkspaceFile[] | undefined;
+}
+
+export function WidgetAssetWorkbench({
+  path,
+  title,
+  value,
+  onChange,
+  onSave,
+  onDiscard,
+  dirty = false,
+  readOnly = false,
+  registry,
+  theme = 'dark',
+  defaultViewMode = DEFAULT_WIDGET_ASSET_VIEW_MODE,
+  viewMode,
+  onViewModeChange,
+  workspaceFiles,
+}: WidgetAssetWorkbenchProps) {
+  const [uncontrolledViewMode, setUncontrolledViewMode] =
+    useState<WidgetAssetViewMode>(defaultViewMode);
+  const resolvedViewMode = viewMode ?? uncontrolledViewMode;
+
+  const setViewMode = (nextMode: WidgetAssetViewMode) => {
+    if (viewMode === undefined) {
+      setUncontrolledViewMode(nextMode);
+    }
+    onViewModeChange?.(nextMode);
+  };
+
+  const resolvedTitle = title ?? (path ? fileNameOfPath(path) : 'Widget asset');
+
+  return (
+    <Panel
+      className="widget-asset-workbench"
+      data-mode={resolvedViewMode}
+      data-testid="widget-asset-workbench"
+    >
+      <PanelHeader
+        actions={
+          <Toolbar>
+            {dirty && !readOnly ? (
+              <>
+                {onDiscard ? <Button onClick={onDiscard}>Discard</Button> : null}
+                {onSave ? (
+                  <Button variant="primary" onClick={onSave}>
+                    Save
+                  </Button>
+                ) : null}
+              </>
+            ) : null}
+            <WidgetAssetModeControls mode={resolvedViewMode} onModeChange={setViewMode} />
+          </Toolbar>
+        }
+      >
+        <span className="widget-asset-workbench__title">
+          {resolvedTitle}
+          {path ? (
+            <span className="widget-asset-workbench__path" title={path}>
+              {path}
+            </span>
+          ) : null}
+          {dirty ? (
+            <span className="widget-asset-workbench__dirty-indicator" title="Unsaved changes">
+              ●
+            </span>
+          ) : null}
+        </span>
+      </PanelHeader>
+      <PanelBody className="widget-asset-workbench__body">
+        <WidgetAssetEditor
+          path={path}
+          readOnly={readOnly}
+          registry={registry}
+          theme={theme}
+          value={value}
+          viewMode={resolvedViewMode}
+          workspaceFiles={workspaceFiles}
+          onChange={onChange}
+          onSave={onSave}
+        />
+      </PanelBody>
+    </Panel>
+  );
+}

package/src/widget-asset/index.ts

@@ -0,0 +1,17 @@
+export { WidgetAssetEditor } from './WidgetAssetEditor.js';
+export type { WidgetAssetEditorProps } from './WidgetAssetEditor.js';
+export { WidgetAssetWorkbench } from './WidgetAssetWorkbench.js';
+export type { WidgetAssetWorkbenchProps } from './WidgetAssetWorkbench.js';
+export { WidgetAssetMetadataForm } from './WidgetAssetMetadataForm.js';
+export type { WidgetAssetMetadataFormProps } from './WidgetAssetMetadataForm.js';
+export { WidgetAssetModeControls } from './WidgetAssetModeControls.js';
+export type { WidgetAssetModeControlsProps } from './WidgetAssetModeControls.js';
+export { DEFAULT_WIDGET_ASSET_VIEW_MODE, type WidgetAssetViewMode } from './widget-asset-mode.js';
+export {
+  WIDGET_ASSET_CONTENT_MIME,
+  WIDGET_ASSET_MANIFEST_MIME,
+  WIDGET_ASSET_SCHEMA_MIME,
+  isWidgetAssetDocument,
+  resolveWidgetAssetMimeType,
+} from './widget-asset-document.js';
+export type { WidgetAssetDocumentRef } from './widget-asset-document.js';

package/src/widget-asset/widget-asset-document.ts

@@ -0,0 +1,37 @@
+import {
+  isWidgetAssetContentPath,
+  isWidgetAssetPackageFilePath,
+  isWidgetAssetSchemaPath,
+} from '@workbench-kit/jdw';
+
+export const WIDGET_ASSET_MANIFEST_MIME =
+  'application/vnd.workbench-kit.widget-asset-manifest+json';
+export const WIDGET_ASSET_CONTENT_MIME = 'application/vnd.workbench-kit.widget-asset-content+json';
+export const WIDGET_ASSET_SCHEMA_MIME = 'application/vnd.workbench-kit.widget-asset-schema+json';
+
+export interface WidgetAssetDocumentRef {
+  readonly path: string;
+  readonly mimeType?: string | undefined;
+}
+
+export function resolveWidgetAssetMimeType(path: string): string {
+  if (isWidgetAssetContentPath(path)) {
+    return WIDGET_ASSET_CONTENT_MIME;
+  }
+  if (isWidgetAssetSchemaPath(path)) {
+    return WIDGET_ASSET_SCHEMA_MIME;
+  }
+  return WIDGET_ASSET_MANIFEST_MIME;
+}
+
+export function isWidgetAssetDocument(file: WidgetAssetDocumentRef): boolean {
+  if (
+    file.mimeType === WIDGET_ASSET_MANIFEST_MIME ||
+    file.mimeType === WIDGET_ASSET_CONTENT_MIME ||
+    file.mimeType === WIDGET_ASSET_SCHEMA_MIME
+  ) {
+    return true;
+  }
+
+  return isWidgetAssetPackageFilePath(file.path);
+}

package/src/widget-asset/widget-asset-mode.ts

@@ -0,0 +1,3 @@
+export type WidgetAssetViewMode = 'design' | 'code';
+
+export const DEFAULT_WIDGET_ASSET_VIEW_MODE: WidgetAssetViewMode = 'design';

package/src/widget-studio/builtin-widget-asset-catalog.ts

@@ -0,0 +1,12 @@
+import { widgetStudioBuiltinAssetFiles } from '@workbench-kit/adapters';
+import type { WidgetAssetCatalogContract } from '@workbench-kit/contracts';
+import { createWidgetAssetCatalogFromWorkspaceFiles } from '@workbench-kit/jdw';
+/** Built-in palette assets shipped with the workbench demo and widget studio. */
+export function createBuiltinWidgetAssetCatalog(): WidgetAssetCatalogContract {
+  return createWidgetAssetCatalogFromWorkspaceFiles(
+    widgetStudioBuiltinAssetFiles.map((file) => ({
+      path: file.path,
+      content: file.content,
+    })),
+  );
+}

package/src/widget-studio/create-widget-studio-workspace-editor.tsx

@@ -0,0 +1,79 @@
+import type { WidgetAssetCatalogContract, WidgetRegistryContract } from '@workbench-kit/contracts';
+
+import { WorkspaceEditor } from '../workbench/workspace/WorkspaceEditor.js';
+import type { WorkspaceEditorPanelRenderEditorContext } from '../workbench/workspace/WorkspaceEditorPanel.js';
+import type { WorkspaceFile } from '../workbench/workspace/types.js';
+import { WidgetAssetWorkbench } from '../widget-asset/WidgetAssetWorkbench.js';
+import { isWidgetAssetDocument } from '../widget-asset/widget-asset-document.js';
+import { WidgetTreeWorkbench } from '../widget-tree/WidgetTreeWorkbench.js';
+import { isWidgetTreeDocument } from '../widget-tree/widget-tree-document.js';
+import { resolveWidgetStudioAssetCatalog } from './resolve-widget-studio-asset-catalog.js';
+
+export interface WidgetStudioRenderContext extends WorkspaceEditorPanelRenderEditorContext {
+  readonly workspaceFiles?: readonly WorkspaceFile[] | undefined;
+}
+
+export interface CreateWidgetStudioWorkspaceEditorOptions {
+  readonly registry?: WidgetRegistryContract<unknown> | undefined;
+  readonly resolveAssetCatalog?:
+    | ((files: readonly WorkspaceFile[]) => WidgetAssetCatalogContract)
+    | undefined;
+}
+
+export function createWidgetStudioWorkspaceEditorRenderer(
+  options: CreateWidgetStudioWorkspaceEditorOptions = {},
+) {
+  const { registry, resolveAssetCatalog = resolveWidgetStudioAssetCatalog } = options;
+
+  return (context: WidgetStudioRenderContext) => {
+    const workspaceFiles = context.workspaceFiles ?? [];
+    const assetCatalog = resolveAssetCatalog(workspaceFiles);
+
+    if (isWidgetAssetDocument(context.file)) {
+      return (
+        <WidgetAssetWorkbench
+          dirty={context.isDirty}
+          path={context.file.path}
+          readOnly={false}
+          registry={registry}
+          theme={context.theme}
+          value={context.content}
+          workspaceFiles={workspaceFiles}
+          onChange={context.onChange}
+          onDiscard={context.onDiscard}
+          onSave={() => context.onSave(context.content)}
+        />
+      );
+    }
+
+    if (isWidgetTreeDocument(context.file)) {
+      return (
+        <WidgetTreeWorkbench
+          assetCatalog={assetCatalog}
+          dirty={context.isDirty}
+          path={context.file.path}
+          readOnly={false}
+          registry={registry}
+          theme={context.theme}
+          value={context.content}
+          onChange={context.onChange}
+          onDiscard={context.onDiscard}
+          onSave={() => context.onSave(context.content)}
+        />
+      );
+    }
+
+    return (
+      <WorkspaceEditor
+        key={context.file.path}
+        file={context.file}
+        readOnly={false}
+        showHeader={false}
+        theme={context.theme}
+        value={context.content}
+        onChange={context.onChange}
+        onSave={(content) => context.onSave(content)}
+      />
+    );
+  };
+}

package/src/widget-studio/index.ts

@@ -0,0 +1,7 @@
+export { createWidgetStudioWorkspaceEditorRenderer } from './create-widget-studio-workspace-editor.js';
+export type {
+  CreateWidgetStudioWorkspaceEditorOptions,
+  WidgetStudioRenderContext,
+} from './create-widget-studio-workspace-editor.js';
+export { createBuiltinWidgetAssetCatalog } from './builtin-widget-asset-catalog.js';
+export { resolveWidgetStudioAssetCatalog } from './resolve-widget-studio-asset-catalog.js';

package/src/widget-studio/resolve-widget-studio-asset-catalog.ts

@@ -0,0 +1,26 @@
+import type { WidgetAssetCatalogContract } from '@workbench-kit/contracts';
+import {
+  createWidgetAssetCatalogFromWorkspaceFiles,
+  mergeWidgetAssetCatalogs,
+} from '@workbench-kit/jdw';
+
+import type { WorkspaceFile } from '../workbench/workspace/types.js';
+import { createBuiltinWidgetAssetCatalog } from './builtin-widget-asset-catalog.js';
+
+/**
+ * Resolves the widget studio palette from built-in assets plus workspace asset packages
+ * (`<slug>/manifest.json` + `content.json`). Workspace assets override built-ins when they
+ * share the same `name`.
+ */
+export function resolveWidgetStudioAssetCatalog(
+  files: readonly WorkspaceFile[],
+): WidgetAssetCatalogContract {
+  const workspaceCatalog = createWidgetAssetCatalogFromWorkspaceFiles(
+    files.map((file) => ({
+      path: file.path,
+      content: file.content,
+    })),
+  );
+
+  return mergeWidgetAssetCatalogs(createBuiltinWidgetAssetCatalog(), workspaceCatalog);
+}