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

package/src/widget-tree/WidgetAssetPalette.tsx

@@ -0,0 +1,77 @@
+import type { WidgetPlacementAsset } from '@workbench-kit/contracts';
+import type { GenericWidget } from '@workbench-kit/jdw';
+
+import { WorkbenchPropertyHint } from '../layout/WorkbenchPropertyPanel';
+import { cxCodicon } from '../utils/codicon';
+import { cx } from '../utils/cx';
+import { canAddChildren } from './widget-tree-layout.js';
+
+const CATEGORY_LABELS: Record<string, string> = {
+  content: 'Content',
+  layout: 'Layout',
+  template: 'Templates',
+};
+
+export interface WidgetAssetPaletteProps {
+  readonly assetsByCategory: Readonly<Record<string, readonly WidgetPlacementAsset[]>>;
+  readonly selectedContainer: GenericWidget | null;
+  readonly readOnly?: boolean | undefined;
+  readonly onPlaceAsset: (asset: WidgetPlacementAsset) => void;
+}
+
+export function WidgetAssetPalette({
+  assetsByCategory,
+  onPlaceAsset,
+  readOnly = false,
+  selectedContainer,
+}: WidgetAssetPaletteProps) {
+  const canPlace = canAddChildren(selectedContainer) && !readOnly;
+  const categories = Object.keys(assetsByCategory);
+
+  return (
+    <div className="widget-tree-asset-palette" data-testid="widget-tree-asset-palette">
+      {!canPlace ? (
+        <WorkbenchPropertyHint>
+          Select a container node in Outline to place an asset.
+        </WorkbenchPropertyHint>
+      ) : (
+        <WorkbenchPropertyHint>
+          Click an asset to add it to <strong>{selectedContainer?.type ?? 'container'}</strong>.
+        </WorkbenchPropertyHint>
+      )}
+
+      {categories.map((category) => (
+        <section key={category} className="widget-tree-asset-palette__section">
+          <h3 className="widget-tree-asset-palette__title">
+            {CATEGORY_LABELS[category] ?? category}
+          </h3>
+          <div className="widget-tree-asset-palette__grid">
+            {assetsByCategory[category]?.map((asset) => (
+              <button
+                key={asset.id}
+                className={cx(
+                  'widget-tree-asset-palette__card',
+                  !canPlace && 'widget-tree-asset-palette__card--disabled',
+                )}
+                data-testid={`widget-asset-${asset.id}`}
+                disabled={!canPlace}
+                title={asset.description ?? asset.label}
+                type="button"
+                onClick={() => onPlaceAsset(asset)}
+              >
+                {asset.icon ? (
+                  <i aria-hidden className={cxCodicon(asset.icon)} />
+                ) : (
+                  <span className="widget-tree-asset-palette__fallback-icon" aria-hidden>
+                    {asset.label.slice(0, 1).toUpperCase()}
+                  </span>
+                )}
+                <span className="widget-tree-asset-palette__label">{asset.label}</span>
+              </button>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}

package/src/widget-tree/WidgetInspectorPanel.tsx

@@ -0,0 +1,266 @@
+import type {
+  WidgetInspectorField,
+  WidgetInspectorSection,
+  WidgetRegistryContract,
+} from '@workbench-kit/contracts';
+import type { GenericWidget, WidgetPath } from '@workbench-kit/jdw';
+
+import { Badge } from '../primitives/Badge';
+import { Button } from '../primitives/Button';
+import {
+  WorkbenchPropertyCheckboxRow,
+  WorkbenchPropertyColorRow,
+  WorkbenchPropertyHint,
+  WorkbenchPropertyNumberRow,
+  WorkbenchPropertyPanel,
+  WorkbenchPropertySection,
+  WorkbenchPropertySelectRow,
+  WorkbenchPropertyStack,
+  WorkbenchPropertyTextRow,
+} from '../layout/WorkbenchPropertyPanel';
+
+export interface WidgetInspectorPanelProps {
+  readonly widget: GenericWidget | null;
+  readonly path: WidgetPath | null;
+  readonly parentWidget?: GenericWidget | null | undefined;
+  readonly widgetRegistry?: WidgetRegistryContract<unknown> | undefined;
+  readonly readOnly?: boolean | undefined;
+  readonly onPatch?: ((next: GenericWidget) => void) | undefined;
+  readonly onRemove?: (() => void) | undefined;
+}
+
+export function WidgetInspectorPanel({
+  widget,
+  path,
+  parentWidget = null,
+  widgetRegistry,
+  readOnly = false,
+  onPatch,
+  onRemove,
+}: WidgetInspectorPanelProps) {
+  const inspector = widget ? widgetRegistry?.definition(widget.type)?.inspector : undefined;
+  const parentType = parentWidget?.type;
+  const showPlacement =
+    widget &&
+    parentType &&
+    (parentType === 'grid' || parentType === 'row' || parentType === 'column');
+
+  const updateProp = (prop: string, value: unknown) => {
+    if (!widget || !path || !onPatch || readOnly) return;
+    onPatch({ ...widget, [prop]: value });
+  };
+
+  return (
+    <WorkbenchPropertyPanel
+      className="widget-tree-inspector"
+      data-testid="widget-tree-inspector-panel"
+    >
+      {!widget ? (
+        <WorkbenchPropertyHint>Select a node in the outline.</WorkbenchPropertyHint>
+      ) : (
+        <WorkbenchPropertyStack>
+          <div className="widget-tree-inspector__header">
+            <Badge>{widgetRegistry?.definition(widget.type)?.displayName ?? widget.type}</Badge>
+            {typeof widget.id === 'string' && widget.id.trim().length > 0 ? (
+              <WorkbenchPropertyHint title={widget.id}>{widget.id}</WorkbenchPropertyHint>
+            ) : null}
+          </div>
+
+          {showPlacement ? (
+            <PlacementSection
+              parentType={parentType}
+              readOnly={readOnly}
+              values={widget}
+              onValueChange={updateProp}
+            />
+          ) : null}
+
+          {inspector && inspector.length > 0 ? (
+            inspector.map((section) => (
+              <InspectorSection
+                key={section.title}
+                readOnly={readOnly}
+                section={section}
+                values={widget}
+                onValueChange={updateProp}
+              />
+            ))
+          ) : !showPlacement ? (
+            <WorkbenchPropertyHint>
+              No property fields registered for this widget type.
+            </WorkbenchPropertyHint>
+          ) : null}
+
+          {path && path.length > 0 && onRemove ? (
+            <div className="widget-tree-inspector__danger">
+              <Button disabled={readOnly} variant="danger" onClick={onRemove}>
+                Remove node
+              </Button>
+            </div>
+          ) : null}
+        </WorkbenchPropertyStack>
+      )}
+    </WorkbenchPropertyPanel>
+  );
+}
+
+function PlacementSection({
+  onValueChange,
+  parentType,
+  readOnly,
+  values,
+}: {
+  onValueChange: (prop: string, value: unknown) => void;
+  parentType: string;
+  readOnly: boolean;
+  values: GenericWidget;
+}) {
+  if (parentType === 'grid') {
+    return (
+      <WorkbenchPropertySection title="Grid placement">
+        <WorkbenchPropertyNumberRow
+          label="Column"
+          disabled={readOnly}
+          min={0}
+          value={typeof values.col === 'number' ? values.col : undefined}
+          onValueChange={(next) => onValueChange('col', next)}
+        />
+        <WorkbenchPropertyNumberRow
+          label="Row"
+          disabled={readOnly}
+          min={0}
+          value={typeof values.row === 'number' ? values.row : undefined}
+          onValueChange={(next) => onValueChange('row', next)}
+        />
+        <WorkbenchPropertyNumberRow
+          label="Column span"
+          disabled={readOnly}
+          min={1}
+          value={typeof values.colSpan === 'number' ? values.colSpan : undefined}
+          onValueChange={(next) => onValueChange('colSpan', next)}
+        />
+        <WorkbenchPropertyNumberRow
+          label="Row span"
+          disabled={readOnly}
+          min={1}
+          value={typeof values.rowSpan === 'number' ? values.rowSpan : undefined}
+          onValueChange={(next) => onValueChange('rowSpan', next)}
+        />
+      </WorkbenchPropertySection>
+    );
+  }
+
+  return (
+    <WorkbenchPropertySection title="Flex placement">
+      <WorkbenchPropertyNumberRow
+        label="Flex"
+        disabled={readOnly}
+        min={0}
+        step={0.1}
+        value={typeof values.flex === 'number' ? values.flex : undefined}
+        onValueChange={(next) => onValueChange('flex', next)}
+      />
+      <WorkbenchPropertySelectRow
+        label="Align"
+        disabled={readOnly}
+        options={[
+          { label: 'Auto', value: '' },
+          { label: 'Start', value: 'flex-start' },
+          { label: 'Center', value: 'center' },
+          { label: 'End', value: 'flex-end' },
+          { label: 'Stretch', value: 'stretch' },
+        ]}
+        value={typeof values.align === 'string' ? values.align : ''}
+        onValueChange={(next) => onValueChange('align', next.length > 0 ? next : undefined)}
+      />
+    </WorkbenchPropertySection>
+  );
+}
+
+function InspectorSection({
+  onValueChange,
+  readOnly,
+  section,
+  values,
+}: {
+  onValueChange: (prop: string, value: unknown) => void;
+  readOnly: boolean;
+  section: WidgetInspectorSection;
+  values: GenericWidget;
+}) {
+  return (
+    <WorkbenchPropertySection title={section.title}>
+      {section.fields.map((field) => (
+        <InspectorField
+          key={field.prop}
+          field={field}
+          readOnly={readOnly}
+          value={values[field.prop]}
+          onValueChange={(prop, next) => onValueChange(prop, next)}
+        />
+      ))}
+    </WorkbenchPropertySection>
+  );
+}
+
+function InspectorField({
+  field,
+  onValueChange,
+  readOnly,
+  value,
+}: {
+  field: WidgetInspectorField;
+  onValueChange: (prop: string, value: unknown) => void;
+  readOnly: boolean;
+  value: unknown;
+}) {
+  if (field.kind === 'text' || field.kind === 'color') {
+    const Row = field.kind === 'color' ? WorkbenchPropertyColorRow : WorkbenchPropertyTextRow;
+    return (
+      <Row
+        label={field.label}
+        readOnly={readOnly}
+        value={typeof value === 'string' ? value : ''}
+        {...(field.kind === 'text' && field.placeholder
+          ? { placeholder: field.placeholder }
+          : null)}
+        onValueChange={(next) => onValueChange(field.prop, next)}
+      />
+    );
+  }
+
+  if (field.kind === 'number') {
+    return (
+      <WorkbenchPropertyNumberRow
+        label={field.label}
+        disabled={readOnly}
+        max={field.max}
+        min={field.min}
+        step={field.step}
+        value={typeof value === 'number' ? value : undefined}
+        onValueChange={(next) => onValueChange(field.prop, next)}
+      />
+    );
+  }
+
+  if (field.kind === 'select') {
+    return (
+      <WorkbenchPropertySelectRow
+        label={field.label}
+        disabled={readOnly}
+        options={field.options}
+        value={typeof value === 'string' ? value : undefined}
+        onValueChange={(next) => onValueChange(field.prop, next)}
+      />
+    );
+  }
+
+  return (
+    <WorkbenchPropertyCheckboxRow
+      label={field.label}
+      disabled={readOnly}
+      checked={typeof value === 'boolean' ? value : false}
+      onCheckedChange={(next) => onValueChange(field.prop, next)}
+    />
+  );
+}

package/src/widget-tree/WidgetSourceEditor.tsx

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

package/src/widget-tree/WidgetTreeLab.tsx

@@ -0,0 +1,272 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { WidgetRegistryContract } from '@workbench-kit/contracts';
+import type { WidgetAssetCatalogContract, WidgetPlacementAsset } from '@workbench-kit/contracts';
+import {
+  applyWidgetDocumentPatch,
+  createJdwDocumentJsonSchema,
+  createWidgetDocument,
+  firstSelectedWidgetPath,
+  getWidgetAtPath,
+  getWidgetChildren,
+  materializeWidgetPlacementAsset,
+  normalizeWidgetForParent,
+  ROOT_WIDGET_PATH,
+  selectWidgetPath,
+  validateJsonWidgetData,
+  type GenericWidget,
+  type WidgetPath,
+  type WidgetSelectionState,
+} from '@workbench-kit/jdw';
+
+import { ResizablePanels } from '../primitives/WorkbenchEditor.js';
+import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
+import { JdwPreview } from '../jdw/JdwPreview.js';
+import { WidgetAssetPalette } from './WidgetAssetPalette.js';
+import { WidgetInspectorPanel } from './WidgetInspectorPanel.js';
+import { WidgetSourceEditor } from './WidgetSourceEditor.js';
+import { WidgetTreeSidePanel } from './WidgetTreeSidePanel.js';
+import { WidgetTreeView } from './WidgetTreeView.js';
+import { canAddChildren } from './widget-tree-layout.js';
+import {
+  DEFAULT_WIDGET_TREE_VIEW_MODE,
+  resolveWidgetTreeLabMode,
+  type WidgetTreeViewMode,
+} from './widget-tree-mode.js';
+
+export interface WidgetTreeLabProps {
+  readonly path?: string | undefined;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly onSave?: (() => void) | undefined;
+  readonly registry?: WidgetRegistryContract<unknown>;
+  readonly assetCatalog?: WidgetAssetCatalogContract | undefined;
+  readonly readOnly?: boolean;
+  readonly theme?: WorkspaceEditorTheme | undefined;
+  readonly viewMode?: WidgetTreeViewMode;
+}
+
+export function WidgetTreeLab({
+  path,
+  value,
+  onChange,
+  onSave,
+  registry,
+  assetCatalog,
+  readOnly = false,
+  theme = 'dark',
+  viewMode = DEFAULT_WIDGET_TREE_VIEW_MODE,
+}: WidgetTreeLabProps) {
+  const resolvedMode = resolveWidgetTreeLabMode(viewMode);
+  const document = useMemo(() => createWidgetDocument(value), [value]);
+  const jsonSchema = useMemo(() => createJdwDocumentJsonSchema(), []);
+  const registeredTypes = useMemo(
+    () => registry?.definitions().map((definition) => definition.type),
+    [registry],
+  );
+  const validation = useMemo(() => {
+    if (document.parseError !== null) {
+      return null;
+    }
+
+    return validateJsonWidgetData(value, {
+      registeredTypes,
+      strictKnownTypes: Boolean(registry),
+    });
+  }, [document.parseError, registry, registeredTypes, value]);
+  const sourceValidationError = useMemo(() => {
+    if (document.parseError !== null) {
+      return document.parseError;
+    }
+
+    if (!validation || validation.valid || validation.issues.length === 0) {
+      return null;
+    }
+
+    const [firstIssue] = validation.issues;
+    return firstIssue ? `${firstIssue.path}: ${firstIssue.message}` : null;
+  }, [document.parseError, validation]);
+
+  const [selection, setSelection] = useState<WidgetSelectionState>({ pathKeys: new Set() });
+
+  useEffect(() => {
+    if (document.parseError !== null || document.root === null) {
+      setSelection({ pathKeys: new Set() });
+      return;
+    }
+
+    setSelection((current) => {
+      const selectedPath = firstSelectedWidgetPath(current);
+      if (selectedPath !== null && getWidgetAtPath(document.root!, selectedPath)) {
+        return current;
+      }
+
+      return selectWidgetPath(current, ROOT_WIDGET_PATH);
+    });
+  }, [document.parseError, document.root, value]);
+
+  const selectedPath = firstSelectedWidgetPath(selection);
+  const selectedWidget = useMemo(() => {
+    if (!document.root || selectedPath === null) return null;
+    return getWidgetAtPath(document.root, selectedPath);
+  }, [document.root, selectedPath]);
+
+  const parentWidget = useMemo(() => {
+    if (!document.root || !selectedPath || selectedPath.length === 0) return null;
+    return getWidgetAtPath(document.root, selectedPath.slice(0, -1));
+  }, [document.root, selectedPath]);
+
+  const handleSelectPath = (nextPath: WidgetPath) => {
+    setSelection((current) => selectWidgetPath(current, nextPath));
+  };
+
+  const applyPatch = (patch: Parameters<typeof applyWidgetDocumentPatch>[1]) => {
+    const nextSource = applyWidgetDocumentPatch(value, patch);
+    if (nextSource !== null) {
+      onChange(nextSource);
+    }
+  };
+
+  const handleInspectorPatch = (nextWidget: GenericWidget) => {
+    if (!selectedPath) return;
+    const widget =
+      parentWidget !== null ? normalizeWidgetForParent(nextWidget, parentWidget) : nextWidget;
+    applyPatch({
+      type: 'replace-widget',
+      path: selectedPath,
+      widget,
+    });
+  };
+
+  const handleInsertChild = (child: GenericWidget) => {
+    if (!selectedPath || !selectedWidget) return;
+    const index = getWidgetChildren(selectedWidget).length;
+    applyPatch({
+      type: 'insert-child',
+      parentPath: selectedPath,
+      index,
+      child,
+    });
+  };
+
+  const handlePlaceAsset = (asset: WidgetPlacementAsset) => {
+    if (!selectedPath || !selectedWidget || !canAddChildren(selectedWidget)) return;
+    handleInsertChild(materializeWidgetPlacementAsset(asset, selectedWidget));
+  };
+
+  const handleRemove = () => {
+    if (!selectedPath || selectedPath.length === 0) return;
+    applyPatch({
+      type: 'remove-widget',
+      path: selectedPath,
+    });
+    setSelection((current) => selectWidgetPath(current, ROOT_WIDGET_PATH));
+  };
+
+  const sourcePane = (
+    <WidgetSourceEditor
+      jsonSchema={jsonSchema}
+      parseError={sourceValidationError}
+      path={path}
+      readOnly={readOnly}
+      showProblemsPanel
+      theme={theme}
+      value={value}
+      onChange={onChange}
+      onSave={onSave}
+    />
+  );
+
+  const sidePanel = (
+    <WidgetTreeSidePanel
+      assets={
+        assetCatalog ? (
+          <WidgetAssetPalette
+            assetsByCategory={assetCatalog.assetsByCategory()}
+            readOnly={readOnly}
+            selectedContainer={canAddChildren(selectedWidget) ? selectedWidget : null}
+            onPlaceAsset={handlePlaceAsset}
+          />
+        ) : (
+          <div className="widget-tree-asset-palette widget-tree-asset-palette--empty">
+            No asset catalog configured.
+          </div>
+        )
+      }
+      outline={
+        <WidgetTreeView
+          parseError={document.parseError}
+          root={document.root}
+          selection={selection}
+          onSelectPath={handleSelectPath}
+        />
+      }
+      properties={
+        <WidgetInspectorPanel
+          parentWidget={parentWidget}
+          path={selectedPath}
+          readOnly={readOnly}
+          widget={selectedWidget}
+          widgetRegistry={registry}
+          onPatch={handleInspectorPatch}
+          onRemove={handleRemove}
+        />
+      }
+    />
+  );
+
+  const previewPane = (
+    <section aria-label="Widget preview" className="widget-tree-lab__preview">
+      <header className="widget-tree-lab__preview-header">Preview</header>
+      <div className="widget-tree-lab__preview-body">
+        <JdwPreview json={value} registry={registry} />
+      </div>
+    </section>
+  );
+
+  if (resolvedMode === 'code') {
+    return (
+      <div
+        className="widget-tree-lab widget-tree-lab--code"
+        data-mode="code"
+        data-testid="widget-tree-lab"
+      >
+        {sourcePane}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="widget-tree-lab widget-tree-lab--design"
+      data-mode="design"
+      data-testid="widget-tree-lab"
+    >
+      <ResizablePanels
+        className="widget-tree-lab__design"
+        data-testid="widget-tree-workspace"
+        defaultFirstSize={560}
+        minFirstSize={360}
+        minSecondSize={280}
+        style={{ height: '100%', minHeight: 0 }}
+        first={
+          <ResizablePanels
+            className="widget-tree-lab__design-data"
+            data-testid="widget-tree-lab-data-pane"
+            defaultFirstSize={320}
+            direction="vertical"
+            minFirstSize={160}
+            minSecondSize={180}
+            style={{ height: '100%', minHeight: 0 }}
+            first={<div className="widget-tree-lab__design-source">{sourcePane}</div>}
+            second={<div className="widget-tree-lab__design-tools">{sidePanel}</div>}
+          />
+        }
+        second={
+          <div className="widget-tree-lab__design-render" data-testid="widget-tree-lab-render-pane">
+            {previewPane}
+          </div>
+        }
+      />
+    </div>
+  );
+}