@workbench-kit/jdw-editor 0.0.2-prototype.0.2.2 → 0.0.2-prototype.0.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workbench-kit/jdw-editor",
-  "version": "0.0.2-prototype.0.2.2",
+  "version": "0.0.2-prototype.0.2.21",
   "private": false,
   "type": "module",
   "exports": {
@@ -14,13 +14,13 @@
     "!src/**/*.stories.tsx"
   ],
   "dependencies": {
-    "@workbench-kit/jdw": "0.0.2-prototype.0.2.2",
-    "@workbench-kit/react": "0.0.2-prototype.0.2.2"
+    "@workbench-kit/jdw": "0.0.2-prototype.0.2.21",
+    "@workbench-kit/react": "0.0.2-prototype.0.2.21"
   },
   "peerDependencies": {
     "react": "^19.0.0"
   },
-  "description": "JDW template-to-WidgetTreeLab sample flow with deprecated Screen Spec compatibility editors.",
+  "description": "Compile-once JDW template explorer for the canonical WidgetTreeLab authoring surface.",
   "publishConfig": {
     "access": "public",
     "tag": "prototype",

package/src/index.ts

@@ -1,27 +1,2 @@
-export { JdwSampleScreenExplorer } from './JdwSampleScreenExplorer.js';
-export type { JdwSampleScreenExplorerProps } from './JdwSampleScreenExplorer.js';
-export { ScreenNodeInspector } from './ScreenNodeInspector.js';
-export type { ScreenNodeInspectorProps } from './ScreenNodeInspector.js';
-export { ScreenSpecEditor } from './ScreenSpecEditor.js';
-export type {
-  ScreenSpecDetailTab,
-  ScreenSpecEditorPane,
-  ScreenSpecEditorProps,
-  ScreenSpecLeftRailView,
-} from './ScreenSpecEditor.js';
-export {
-  SCREEN_PALETTE_ITEMS,
-  SCREEN_PALETTE_MIME,
-  ScreenSpecPalette,
-  readScreenPaletteDragData,
-  writeScreenPaletteDragData,
-} from './ScreenSpecPalette.js';
-export type { ScreenPaletteItem, ScreenSpecPaletteProps } from './ScreenSpecPalette.js';
-export { filterScreenSpecOutline } from './filterScreenSpecOutline.js';
-export { ScreenSpecWorkbench } from './ScreenSpecWorkbench.js';
-export type { ScreenSpecWorkbenchProps } from './ScreenSpecWorkbench.js';
-export { useScreenSpecPipeline } from './useScreenSpecPipeline.js';
-export type {
-  ScreenSpecPipelineState,
-  UseScreenSpecPipelineResult,
-} from './useScreenSpecPipeline.js';
+export { JdwSampleScreenExplorer } from './screen-spec/JdwSampleScreenExplorer.js';
+export type { JdwSampleScreenExplorerProps } from './screen-spec/JdwSampleScreenExplorer.js';

package/src/ScreenNodeInspector.tsx

@@ -1,369 +0,0 @@
-import { useMemo, useState, type ReactNode } from 'react';
-import type { ScreenNode, ScreenTextStyle } from '@workbench-kit/jdw';
-import {
-  NumberInput,
-  TextInput,
-  WorkbenchPropertyHint,
-  WorkbenchPropertyNumberRow,
-  WorkbenchPropertyPanel,
-  WorkbenchPropertyRow,
-  WorkbenchPropertySearch,
-  WorkbenchPropertySection,
-  WorkbenchPropertyStack,
-  WorkbenchPropertyTextRow,
-  filterWorkbenchPropertyFields,
-  isWorkbenchPropertySearchActive,
-  type WorkbenchPropertyFieldManifestEntry,
-} from '@workbench-kit/react/primitives';
-
-export interface ScreenNodeInspectorProps {
-  readonly node: ScreenNode;
-  readonly parentKind?: ScreenNode['kind'] | undefined;
-  readonly onChange: (node: ScreenNode) => void;
-}
-
-function readStyle(node: Extract<ScreenNode, { kind: 'text' | 'panel' }>): ScreenTextStyle {
-  return node.style ?? {};
-}
-
-function patchStyle(
-  node: Extract<ScreenNode, { kind: 'text' | 'panel' }>,
-  patch: ScreenTextStyle,
-): ScreenNode {
-  return { ...node, style: { ...node.style, ...patch } };
-}
-
-function OptionalNumberRow({
-  label,
-  testId,
-  value,
-  onChange,
-}: {
-  readonly label: string;
-  readonly testId: string;
-  readonly value: number | undefined;
-  readonly onChange: (value: number | undefined) => void;
-}) {
-  return (
-    <WorkbenchPropertyRow label={label} htmlFor={testId}>
-      <NumberInput
-        id={testId}
-        data-testid={testId}
-        controlWidth="full"
-        nullable
-        value={value}
-        onEmptyValue={() => onChange(undefined)}
-        onValueChange={(next) => onChange(next)}
-      />
-    </WorkbenchPropertyRow>
-  );
-}
-
-function usePropertyVisibility(
-  fields: readonly WorkbenchPropertyFieldManifestEntry[],
-  query: string,
-) {
-  const filtered = useMemo(() => filterWorkbenchPropertyFields({ fields, query }), [fields, query]);
-  const visible = useMemo(() => new Set(filtered.fieldIds), [filtered.fieldIds]);
-  const sections = useMemo(() => new Set(filtered.sectionIds), [filtered.sectionIds]);
-  const searching = isWorkbenchPropertySearchActive(query);
-  return {
-    searching,
-    showField: (id: string) => !searching || visible.has(id),
-    showSection: (sectionId: string) => !searching || sections.has(sectionId),
-  };
-}
-
-function InspectorShell({
-  query,
-  onQueryChange,
-  children,
-}: {
-  readonly query: string;
-  readonly onQueryChange: (value: string) => void;
-  readonly children: ReactNode;
-}) {
-  return (
-    <WorkbenchPropertyPanel
-      className="jdw-screen-node-inspector"
-      data-testid="screen-spec-node-inspector"
-    >
-      <WorkbenchPropertySearch
-        data-testid="screen-spec-props-search"
-        value={query}
-        onValueChange={onQueryChange}
-      />
-      <WorkbenchPropertyStack>{children}</WorkbenchPropertyStack>
-    </WorkbenchPropertyPanel>
-  );
-}
-
-function ContentNodeInspector({
-  node,
-  parentKind,
-  onChange,
-}: {
-  readonly node: Extract<ScreenNode, { kind: 'text' | 'panel' }>;
-  readonly parentKind?: ScreenNode['kind'] | undefined;
-  readonly onChange: (node: ScreenNode) => void;
-}) {
-  const [query, setQuery] = useState('');
-  const style = readStyle(node);
-  const fields = useMemo((): WorkbenchPropertyFieldManifestEntry[] => {
-    const next: WorkbenchPropertyFieldManifestEntry[] = [
-      { id: 'content', label: 'Content', sectionId: 'content', keywords: ['text'] },
-    ];
-    if (node.kind === 'panel') {
-      next.push({
-        id: 'panel-background',
-        label: 'Panel background',
-        sectionId: 'content',
-        keywords: ['fill'],
-      });
-    }
-    next.push(
-      { id: 'color', label: 'Text color', sectionId: 'style', keywords: ['colour'] },
-      { id: 'font-size', label: 'Font size', sectionId: 'style', keywords: ['typography'] },
-      { id: 'background', label: 'Background', sectionId: 'style' },
-    );
-    if (parentKind === 'grid') {
-      next.push(
-        { id: 'col', label: 'Column', sectionId: 'placement', keywords: ['grid'] },
-        { id: 'row', label: 'Row', sectionId: 'placement', keywords: ['grid'] },
-        { id: 'col-span', label: 'Column span', sectionId: 'placement', keywords: ['grid'] },
-        { id: 'row-span', label: 'Row span', sectionId: 'placement', keywords: ['grid'] },
-      );
-    }
-    return next;
-  }, [node.kind, parentKind]);
-  const { showField, showSection, searching } = usePropertyVisibility(fields, query);
-
-  return (
-    <InspectorShell query={query} onQueryChange={setQuery}>
-      {showSection('content') ? (
-        <WorkbenchPropertySection collapsible title="Content">
-          {showField('content') ? (
-            <WorkbenchPropertyRow label="Content" htmlFor="screen-spec-field-content">
-              <TextInput
-                id="screen-spec-field-content"
-                data-testid="screen-spec-field-content"
-                controlWidth="full"
-                value={node.content}
-                onValueChange={(content) => onChange({ ...node, content })}
-              />
-            </WorkbenchPropertyRow>
-          ) : null}
-          {node.kind === 'panel' && showField('panel-background') ? (
-            <WorkbenchPropertyTextRow
-              htmlFor="screen-spec-field-panel-background"
-              label="Panel background"
-              value={node.background ?? ''}
-              onValueChange={(background) => onChange({ ...node, background })}
-            />
-          ) : null}
-        </WorkbenchPropertySection>
-      ) : null}
-
-      {showSection('style') ? (
-        <WorkbenchPropertySection collapsible title="Style">
-          {showField('color') ? (
-            <WorkbenchPropertyTextRow
-              htmlFor="screen-spec-field-color"
-              label="Text color"
-              value={style.color ?? ''}
-              onValueChange={(color) => onChange(patchStyle(node, { color }))}
-            />
-          ) : null}
-          {showField('font-size') ? (
-            <OptionalNumberRow
-              label="Font size"
-              testId="screen-spec-field-font-size"
-              value={style.fontSize}
-              onChange={(fontSize) => onChange(patchStyle(node, { fontSize }))}
-            />
-          ) : null}
-          {showField('background') ? (
-            <WorkbenchPropertyTextRow
-              htmlFor="screen-spec-field-background"
-              label="Background"
-              value={style.background ?? ''}
-              onValueChange={(background) => onChange(patchStyle(node, { background }))}
-            />
-          ) : null}
-        </WorkbenchPropertySection>
-      ) : null}
-
-      {parentKind === 'grid' && showSection('placement') ? (
-        <WorkbenchPropertySection collapsible title="Placement">
-          {showField('col') ? (
-            <OptionalNumberRow
-              label="Column"
-              testId="screen-spec-field-col"
-              value={node.col}
-              onChange={(col) => onChange({ ...node, col })}
-            />
-          ) : null}
-          {showField('row') ? (
-            <OptionalNumberRow
-              label="Row"
-              testId="screen-spec-field-row"
-              value={node.row}
-              onChange={(row) => onChange({ ...node, row })}
-            />
-          ) : null}
-          {showField('col-span') ? (
-            <OptionalNumberRow
-              label="Column span"
-              testId="screen-spec-field-col-span"
-              value={node.colSpan}
-              onChange={(colSpan) => onChange({ ...node, colSpan })}
-            />
-          ) : null}
-          {showField('row-span') ? (
-            <OptionalNumberRow
-              label="Row span"
-              testId="screen-spec-field-row-span"
-              value={node.rowSpan}
-              onChange={(rowSpan) => onChange({ ...node, rowSpan })}
-            />
-          ) : null}
-        </WorkbenchPropertySection>
-      ) : null}
-
-      {searching &&
-      !showSection('content') &&
-      !showSection('style') &&
-      !showSection('placement') ? (
-        <WorkbenchPropertyHint>No properties match.</WorkbenchPropertyHint>
-      ) : null}
-    </InspectorShell>
-  );
-}
-
-function ExpandedNodeInspector({
-  node,
-  onChange,
-}: {
-  readonly node: Extract<ScreenNode, { kind: 'expanded' }>;
-  readonly onChange: (node: ScreenNode) => void;
-}) {
-  const [query, setQuery] = useState('');
-  const fields = useMemo(
-    (): WorkbenchPropertyFieldManifestEntry[] => [
-      { id: 'flex', label: 'Flex', sectionId: 'layout', keywords: ['grow'] },
-    ],
-    [],
-  );
-  const { showField, showSection, searching } = usePropertyVisibility(fields, query);
-
-  return (
-    <InspectorShell query={query} onQueryChange={setQuery}>
-      {showSection('layout') ? (
-        <WorkbenchPropertySection collapsible title="Layout">
-          {showField('flex') ? (
-            <OptionalNumberRow
-              label="Flex"
-              testId="screen-spec-field-flex"
-              value={node.flex}
-              onChange={(flex) => onChange({ ...node, flex })}
-            />
-          ) : null}
-          <WorkbenchPropertyHint>Edit the wrapped child from the outline.</WorkbenchPropertyHint>
-        </WorkbenchPropertySection>
-      ) : null}
-      {searching && !showSection('layout') ? (
-        <WorkbenchPropertyHint>No properties match.</WorkbenchPropertyHint>
-      ) : null}
-    </InspectorShell>
-  );
-}
-
-function ContainerNodeInspector({
-  node,
-  onChange,
-}: {
-  readonly node: Extract<ScreenNode, { kind: 'row' | 'column' | 'grid' | 'stack' }>;
-  readonly onChange: (node: ScreenNode) => void;
-}) {
-  const [query, setQuery] = useState('');
-  const fields = useMemo((): WorkbenchPropertyFieldManifestEntry[] => {
-    const next: WorkbenchPropertyFieldManifestEntry[] = [];
-    if (node.kind === 'grid') {
-      next.push({ id: 'columns', label: 'Columns', sectionId: 'layout', keywords: ['grid'] });
-    }
-    next.push(
-      { id: 'gap', label: 'Gap', sectionId: 'layout', keywords: ['spacing'] },
-      { id: 'padding', label: 'Padding', sectionId: 'layout', keywords: ['spacing'] },
-      { id: 'background', label: 'Background', sectionId: 'style' },
-    );
-    return next;
-  }, [node.kind]);
-  const { showField, showSection, searching } = usePropertyVisibility(fields, query);
-
-  return (
-    <InspectorShell query={query} onQueryChange={setQuery}>
-      {showSection('layout') ? (
-        <WorkbenchPropertySection collapsible title="Layout">
-          {node.kind === 'grid' && showField('columns') ? (
-            <WorkbenchPropertyNumberRow
-              htmlFor="screen-spec-field-columns"
-              label="Columns"
-              min={1}
-              value={node.columns}
-              onValueChange={(columns) => onChange({ ...node, columns: Math.max(1, columns) })}
-            />
-          ) : null}
-          {showField('gap') ? (
-            <OptionalNumberRow
-              label="Gap"
-              testId="screen-spec-field-gap"
-              value={node.gap}
-              onChange={(gap) => onChange({ ...node, gap })}
-            />
-          ) : null}
-          {showField('padding') ? (
-            <OptionalNumberRow
-              label="Padding"
-              testId="screen-spec-field-padding"
-              value={node.padding}
-              onChange={(padding) => onChange({ ...node, padding })}
-            />
-          ) : null}
-        </WorkbenchPropertySection>
-      ) : null}
-      {showSection('style') ? (
-        <WorkbenchPropertySection collapsible title="Style">
-          {showField('background') ? (
-            <WorkbenchPropertyTextRow
-              htmlFor="screen-spec-field-container-background"
-              label="Background"
-              value={node.background ?? ''}
-              onValueChange={(background) => onChange({ ...node, background })}
-            />
-          ) : null}
-        </WorkbenchPropertySection>
-      ) : null}
-      {searching && !showSection('layout') && !showSection('style') ? (
-        <WorkbenchPropertyHint>No properties match.</WorkbenchPropertyHint>
-      ) : null}
-    </InspectorShell>
-  );
-}
-
-export function ScreenNodeInspector({ node, parentKind, onChange }: ScreenNodeInspectorProps) {
-  if (node.kind === 'text' || node.kind === 'panel') {
-    return <ContentNodeInspector node={node} parentKind={parentKind} onChange={onChange} />;
-  }
-  if (node.kind === 'expanded') {
-    return <ExpandedNodeInspector node={node} onChange={onChange} />;
-  }
-  if (
-    node.kind === 'row' ||
-    node.kind === 'column' ||
-    node.kind === 'grid' ||
-    node.kind === 'stack'
-  ) {
-    return <ContainerNodeInspector node={node} onChange={onChange} />;
-  }
-  return null;
-}

package/src/ScreenSpecEditor.tsx

@@ -1,431 +0,0 @@
-import { useMemo, useState, type DragEvent, type KeyboardEvent } from 'react';
-import {
-  createDefaultScreenNode,
-  getScreenNodeAt,
-  insertScreenNodeAt,
-  isScreenContainerNode,
-  listScreenSpecOutline,
-  removeScreenNodeAt,
-  resolveScreenInsertParentPath,
-  updateScreenNodeAt,
-  updateScreenSpecMetadata,
-  type JdwScreenSpec,
-  type ScreenNode,
-  type ScreenNodePath,
-  type ScreenPaletteKind,
-} from '@workbench-kit/jdw';
-import {
-  Badge,
-  ClearableTextInput,
-  SegmentedControl,
-  TextInput,
-  WorkbenchFill,
-  WorkbenchLabeledPane,
-  WorkbenchPropertyHint,
-  WorkbenchPropertyRow,
-  WorkbenchPropertyStack,
-} from '@workbench-kit/react/primitives';
-import { SplitView } from '@workbench-kit/react/workbench/shell';
-
-import { filterScreenSpecOutline } from './filterScreenSpecOutline.js';
-import { ScreenNodeInspector } from './ScreenNodeInspector.js';
-import {
-  readScreenPaletteDragData,
-  SCREEN_PALETTE_MIME,
-  ScreenSpecPalette,
-} from './ScreenSpecPalette.js';
-
-function cx(...parts: Array<string | false | null | undefined>) {
-  return parts.filter(Boolean).join(' ');
-}
-
-function pathKey(path: ScreenNodePath): string {
-  return path.length === 0 ? 'root' : path.join('.');
-}
-
-function screenKindLabel(kind: string): string {
-  return kind.length === 0 ? kind : `${kind[0]!.toUpperCase()}${kind.slice(1)}`;
-}
-
-export type ScreenSpecEditorPane = 'all' | 'outline' | 'inspector';
-/** Local left rail inside the Form — not the host Activity Bar. */
-export type ScreenSpecLeftRailView = 'outline' | 'screen';
-/** Right detail tabs — matches WidgetTreeLab Props | Assets. */
-export type ScreenSpecDetailTab = 'properties' | 'assets';
-
-const DETAIL_TABS = [
-  { label: 'Props', testId: 'screen-spec-detail-props', value: 'properties' as const },
-  { label: 'Assets', testId: 'screen-spec-detail-assets', value: 'assets' as const },
-];
-
-const LEFT_VIEW_TABS = [
-  { label: 'Outline', testId: 'screen-spec-rail-outline', value: 'outline' as const },
-  { label: 'Screen', testId: 'screen-spec-rail-screen', value: 'screen' as const },
-];
-
-/** @deprecated Compatibility editor; use `WidgetTreeLab` for JDW authoring. */
-export interface ScreenSpecEditorProps {
-  readonly value: JdwScreenSpec;
-  readonly onChange: (spec: JdwScreenSpec) => void;
-  readonly onCompileError?: ((message: string | null) => void) | undefined;
-  readonly className?: string | undefined;
-  readonly selectedPath?: ScreenNodePath | undefined;
-  readonly onSelectPath?: ((path: ScreenNodePath) => void) | undefined;
-  /**
-   * `outline` / `inspector` — single inner-sidebar pane for 3-column workbench.
-   * `all` — combined Outline|Inspector split (standalone hosts).
-   */
-  readonly pane?: ScreenSpecEditorPane | undefined;
-}
-
-function useScreenSpecEditorModel({
-  value,
-  onChange,
-  onCompileError,
-  selectedPath: selectedPathProp,
-  onSelectPath,
-}: Pick<
-  ScreenSpecEditorProps,
-  'value' | 'onChange' | 'onCompileError' | 'selectedPath' | 'onSelectPath'
->) {
-  const [uncontrolledPath, setUncontrolledPath] = useState<ScreenNodePath>([]);
-  const selectedPath = selectedPathProp ?? uncontrolledPath;
-  const setSelectedPath = onSelectPath ?? setUncontrolledPath;
-  const outline = useMemo(() => listScreenSpecOutline(value), [value]);
-  const selectedPathKey = pathKey(selectedPath);
-  const selectedEntry =
-    outline.find((entry) => pathKey(entry.path) === selectedPathKey) ?? outline[0];
-  const selectedEntryKey = selectedEntry ? pathKey(selectedEntry.path) : selectedPathKey;
-  const selectedNode = selectedEntry?.node ?? value.root;
-
-  const insertParentPath = useMemo(
-    () => resolveScreenInsertParentPath(value.root, selectedPath),
-    [selectedPath, value.root],
-  );
-  const insertParent = insertParentPath ? getScreenNodeAt(value.root, insertParentPath) : null;
-  const canClickPlace = Boolean(insertParent && isScreenContainerNode(insertParent));
-  const insertTargetLabel = insertParent
-    ? `${insertParent.kind}${insertParentPath?.length === 0 ? ' (root)' : ''}`
-    : undefined;
-
-  const commitSpec = (nextSpec: JdwScreenSpec) => {
-    onChange(nextSpec);
-    onCompileError?.(null);
-  };
-
-  const updateNode = (nextNode: ScreenNode) => {
-    commitSpec(updateScreenNodeAt(value, selectedEntry?.path ?? [], nextNode));
-  };
-
-  const placeKind = (kind: ScreenPaletteKind, parentPath: ScreenNodePath | null) => {
-    if (!parentPath) {
-      return false;
-    }
-    const result = insertScreenNodeAt(value, parentPath, createDefaultScreenNode(kind));
-    if (!result) {
-      return false;
-    }
-    commitSpec(result.spec);
-    setSelectedPath(result.insertedPath);
-    return true;
-  };
-
-  const removeSelected = () => {
-    const result = removeScreenNodeAt(value, selectedPath);
-    if (!result) {
-      return;
-    }
-    commitSpec(result.spec);
-    setSelectedPath(result.nextSelectedPath);
-  };
-
-  return {
-    canClickPlace,
-    commitSpec,
-    insertParentPath,
-    insertTargetLabel,
-    outline,
-    placeKind,
-    removeSelected,
-    selectedEntry,
-    selectedEntryKey,
-    selectedNode,
-    selectedPath,
-    setSelectedPath,
-    updateNode,
-    value,
-  };
-}
-
-type EditorModel = ReturnType<typeof useScreenSpecEditorModel>;
-
-function ScreenSpecOutlineBody({ model }: { readonly model: EditorModel }) {
-  const {
-    commitSpec,
-    outline,
-    placeKind,
-    removeSelected,
-    selectedEntryKey,
-    selectedPath,
-    setSelectedPath,
-    value,
-  } = model;
-  const [dropTargetKey, setDropTargetKey] = useState<string | null>(null);
-  const [leftView, setLeftView] = useState<ScreenSpecLeftRailView>('outline');
-  const [outlineQuery, setOutlineQuery] = useState('');
-  const visibleOutline = useMemo(
-    () => filterScreenSpecOutline(outline, outlineQuery),
-    [outline, outlineQuery],
-  );
-
-  const resolveDropParentPath = (entryPath: ScreenNodePath, entryNode: ScreenNode) => {
-    if (isScreenContainerNode(entryNode)) {
-      return entryPath;
-    }
-    return resolveScreenInsertParentPath(value.root, entryPath);
-  };
-
-  const handleDragOver = (event: DragEvent<HTMLLIElement>, key: string, canDrop: boolean) => {
-    const types = Array.from(event.dataTransfer.types);
-    if (!canDrop || (!types.includes(SCREEN_PALETTE_MIME) && !types.includes('text/plain'))) {
-      return;
-    }
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'copy';
-    setDropTargetKey(key);
-  };
-
-  const handleOutlineKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {
-    if (event.key !== 'Delete' && event.key !== 'Backspace') {
-      return;
-    }
-    if (selectedPath.length === 0) {
-      return;
-    }
-    event.preventDefault();
-    removeSelected();
-  };
-
-  return (
-    <WorkbenchLabeledPane
-      aria-label="Screen structure and metadata"
-      chrome="flat"
-      data-testid="screen-spec-sidebar"
-      header={
-        <SegmentedControl
-          ariaLabel="Screen editor panel"
-          options={LEFT_VIEW_TABS}
-          value={leftView}
-          onChange={setLeftView}
-        />
-      }
-    >
-      {leftView === 'screen' ? (
-        <WorkbenchPropertyStack gap="sm" data-testid="screen-spec-metadata">
-          <WorkbenchPropertyRow label="Title" htmlFor="screen-spec-field-title">
-            <TextInput
-              id="screen-spec-field-title"
-              data-testid="screen-spec-field-title"
-              controlWidth="full"
-              value={value.title}
-              onValueChange={(title) => commitSpec(updateScreenSpecMetadata(value, { title }))}
-            />
-          </WorkbenchPropertyRow>
-          <WorkbenchPropertyRow label="Description" htmlFor="screen-spec-field-description">
-            <TextInput
-              id="screen-spec-field-description"
-              data-testid="screen-spec-field-description"
-              controlWidth="full"
-              value={value.description}
-              onValueChange={(description) =>
-                commitSpec(updateScreenSpecMetadata(value, { description }))
-              }
-            />
-          </WorkbenchPropertyRow>
-        </WorkbenchPropertyStack>
-      ) : (
-        <div className="widget-tree-outline" data-testid="screen-spec-outline">
-          <div style={{ padding: '6px 8px 4px' }}>
-            <ClearableTextInput
-              aria-label="Search outline"
-              clearLabel="Clear"
-              controlWidth="full"
-              data-testid="screen-spec-outline-search"
-              placeholder="Search outline"
-              value={outlineQuery}
-              onValueChange={setOutlineQuery}
-            />
-          </div>
-          {visibleOutline.length === 0 ? (
-            <WorkbenchPropertyHint data-testid="screen-spec-outline-empty">
-              No outline matches.
-            </WorkbenchPropertyHint>
-          ) : (
-            <ul
-              aria-label="Screen node outline"
-              className="widget-tree-outline__list"
-              role="tree"
-              tabIndex={0}
-              onKeyDown={handleOutlineKeyDown}
-            >
-              {visibleOutline.map((entry) => {
-                const key = pathKey(entry.path);
-                const selected = selectedEntryKey === key;
-                const depth = entry.depth;
-                const dropParentPath = resolveDropParentPath(entry.path, entry.node);
-                const canDrop = dropParentPath !== null;
-
-                return (
-                  <li
-                    key={key}
-                    aria-level={depth + 1}
-                    aria-selected={selected}
-                    className={cx(
-                      'widget-tree-outline__item',
-                      selected && 'widget-tree-outline__item--selected',
-                      dropTargetKey === key && 'widget-tree-outline__item--drop-inside',
-                    )}
-                    role="treeitem"
-                    style={{ paddingLeft: `${depth * 14 + 6}px` }}
-                    onDragLeave={() => {
-                      setDropTargetKey((current) => (current === key ? null : current));
-                    }}
-                    onDragOver={(event) => handleDragOver(event, key, canDrop)}
-                    onDrop={(event) => {
-                      event.preventDefault();
-                      setDropTargetKey(null);
-                      const kind = readScreenPaletteDragData(event.dataTransfer);
-                      if (!kind || !dropParentPath) {
-                        return;
-                      }
-                      placeKind(kind, dropParentPath);
-                    }}
-                  >
-                    <button
-                      className="widget-tree-outline__button"
-                      data-testid={`screen-spec-outline-${key}`}
-                      type="button"
-                      onClick={() => setSelectedPath(entry.path)}
-                    >
-                      <span className="widget-tree-outline__type">{entry.label}</span>
-                    </button>
-                  </li>
-                );
-              })}
-            </ul>
-          )}
-        </div>
-      )}
-    </WorkbenchLabeledPane>
-  );
-}
-
-function ScreenSpecInspectorBody({ model }: { readonly model: EditorModel }) {
-  const {
-    canClickPlace,
-    insertParentPath,
-    insertTargetLabel,
-    placeKind,
-    selectedNode,
-    updateNode,
-    selectedEntry,
-  } = model;
-  const [detailTab, setDetailTab] = useState<ScreenSpecDetailTab>('properties');
-
-  const placeFromAssets = (kind: ScreenPaletteKind) => {
-    if (placeKind(kind, insertParentPath)) {
-      setDetailTab('properties');
-    }
-  };
-
-  return (
-    <WorkbenchLabeledPane
-      aria-label="Screen node details"
-      chrome="flat"
-      data-testid="screen-spec-inspector"
-      header={
-        <SegmentedControl
-          ariaLabel="Screen detail panel"
-          options={DETAIL_TABS}
-          value={detailTab}
-          onChange={setDetailTab}
-        />
-      }
-    >
-      {detailTab === 'assets' ? (
-        <div data-testid="screen-spec-assets">
-          <ScreenSpecPalette
-            canClickPlace={canClickPlace}
-            insertTargetLabel={insertTargetLabel}
-            onPlaceKind={placeFromAssets}
-          />
-        </div>
-      ) : (
-        <div data-testid="screen-spec-props">
-          <WorkbenchPropertyStack>
-            <div className="widget-tree-inspector__header">
-              <Badge data-testid="screen-spec-kind-pill">
-                {screenKindLabel(selectedNode.kind)}
-              </Badge>
-            </div>
-            <ScreenNodeInspector
-              node={selectedNode}
-              parentKind={selectedEntry?.parentKind}
-              onChange={updateNode}
-            />
-          </WorkbenchPropertyStack>
-        </div>
-      )}
-    </WorkbenchLabeledPane>
-  );
-}
-
-/**
- * @deprecated Compatibility editor for pre-compile Screen Spec templates.
- * Compile once and continue design/code editing in `WidgetTreeLab`.
- */
-export function ScreenSpecEditor({
-  value,
-  onChange,
-  onCompileError,
-  className,
-  selectedPath,
-  onSelectPath,
-  pane = 'all',
-}: ScreenSpecEditorProps) {
-  const model = useScreenSpecEditorModel({
-    value,
-    onChange,
-    onCompileError,
-    selectedPath,
-    onSelectPath,
-  });
-
-  if (pane === 'outline') {
-    return (
-      <WorkbenchFill className={className} data-testid="screen-spec-editor">
-        <ScreenSpecOutlineBody model={model} />
-      </WorkbenchFill>
-    );
-  }
-
-  if (pane === 'inspector') {
-    return (
-      <WorkbenchFill className={className}>
-        <ScreenSpecInspectorBody model={model} />
-      </WorkbenchFill>
-    );
-  }
-
-  return (
-    <WorkbenchFill className={className} data-testid="screen-spec-editor">
-      <SplitView
-        defaultPrimarySizePercent={38}
-        minPrimarySizePercent={24}
-        maxPrimarySizePercent={55}
-        primary={<ScreenSpecOutlineBody model={model} />}
-        secondary={<ScreenSpecInspectorBody model={model} />}
-      />
-    </WorkbenchFill>
-  );
-}

package/src/ScreenSpecEditorStoryHost.tsx

@@ -1,103 +0,0 @@
-import { type ReactNode, useState } from 'react';
-import {
-  screenColumn,
-  screenText,
-  type JdwScreenSpec,
-  type ScreenNodePath,
-} from '@workbench-kit/jdw';
-import { BUILTIN_JDW_REGISTRY } from '@workbench-kit/react/jdw';
-import { JdwPreview } from '@workbench-kit/react/jdw/preview';
-import {
-  WorkbenchFill,
-  WorkbenchLabeledPane,
-  WorkbenchParseError,
-} from '@workbench-kit/react/primitives';
-import { SplitView } from '@workbench-kit/react/workbench/shell';
-
-import { ScreenSpecEditor } from './ScreenSpecEditor.js';
-import { useScreenSpecPipeline } from './useScreenSpecPipeline.js';
-
-const DEMO_SCREEN_SPEC: JdwScreenSpec = {
-  id: 'demo-screen',
-  title: 'Demo Screen',
-  description: 'Screen-spec compile smoke sample',
-  frameWidth: 360,
-  layout: { maxWidth: 360, maxHeight: 240 },
-  root: screenColumn([screenText('Hello from ScreenSpec')], { gap: 8, padding: 12 }),
-};
-
-export interface ScreenSpecEditorStoryHostProps {
-  readonly initialSpec?: JdwScreenSpec | undefined;
-  readonly previewLabel?: ReactNode | undefined;
-}
-
-/**
- * Compatibility smoke shell: Outline | Preview | Inspector.
- *
- * @deprecated Active stories compile templates into JDW and open
- * `WidgetTreeLab`. Keep this host only for compatibility editor tests.
- */
-export function ScreenSpecEditorStoryHost({
-  initialSpec = DEMO_SCREEN_SPEC,
-  previewLabel = 'Compiled preview',
-}: ScreenSpecEditorStoryHostProps) {
-  const pipeline = useScreenSpecPipeline(initialSpec);
-  const [selectedPath, setSelectedPath] = useState<ScreenNodePath>([]);
-
-  const previewPane = (
-    <WorkbenchLabeledPane
-      aria-label="Compiled JDW preview"
-      chrome="flat"
-      data-testid="jdw-screen-spec-story-preview"
-      title={previewLabel}
-    >
-      {pipeline.compileError ? (
-        <WorkbenchParseError role="alert" data-testid="jdw-screen-spec-story-error">
-          {pipeline.compileError}
-        </WorkbenchParseError>
-      ) : (
-        <JdwPreview json={pipeline.json} registry={BUILTIN_JDW_REGISTRY} />
-      )}
-    </WorkbenchLabeledPane>
-  );
-
-  return (
-    <WorkbenchFill
-      className="jdw-screen-spec-story-host"
-      data-testid="jdw-screen-spec-story-host"
-      style={{ minHeight: 360, padding: 12 }}
-    >
-      <SplitView
-        defaultPrimarySizePercent={22}
-        minPrimarySizePercent={16}
-        maxPrimarySizePercent={36}
-        primary={
-          <ScreenSpecEditor
-            pane="outline"
-            selectedPath={selectedPath}
-            value={pipeline.spec}
-            onChange={pipeline.setSpec}
-            onSelectPath={setSelectedPath}
-          />
-        }
-        secondary={
-          <SplitView
-            defaultPrimarySizePercent={64}
-            minPrimarySizePercent={40}
-            maxPrimarySizePercent={78}
-            primary={previewPane}
-            secondary={
-              <ScreenSpecEditor
-                pane="inspector"
-                selectedPath={selectedPath}
-                value={pipeline.spec}
-                onChange={pipeline.setSpec}
-                onSelectPath={setSelectedPath}
-              />
-            }
-          />
-        }
-      />
-    </WorkbenchFill>
-  );
-}

package/src/ScreenSpecPalette.tsx

@@ -1,119 +0,0 @@
-import type { DragEvent } from 'react';
-import { SCREEN_SPEC_PALETTE_ASSETS, type ScreenPaletteKind } from '@workbench-kit/jdw';
-import { Codicon, WorkbenchPropertyHint } from '@workbench-kit/react/primitives';
-
-export const SCREEN_PALETTE_MIME = 'application/x-workbench-kit-screen-palette';
-
-export interface ScreenPaletteItem {
-  readonly kind: ScreenPaletteKind;
-  readonly label: string;
-  readonly category: 'content' | 'layout';
-  readonly icon: string;
-  readonly description: string;
-}
-
-export const SCREEN_PALETTE_ITEMS: readonly ScreenPaletteItem[] = SCREEN_SPEC_PALETTE_ASSETS.map(
-  (asset) => ({
-    kind: asset.screenKind,
-    label: asset.label,
-    category: asset.category === 'layout' ? 'layout' : 'content',
-    icon: asset.icon ?? 'symbol-misc',
-    description: asset.description ?? asset.label,
-  }),
-);
-
-const CATEGORY_LABELS = {
-  content: 'Content',
-  layout: 'Layout',
-} as const;
-
-function cx(...parts: Array<string | false | null | undefined>) {
-  return parts.filter(Boolean).join(' ');
-}
-
-export function writeScreenPaletteDragData(
-  dataTransfer: DataTransfer,
-  kind: ScreenPaletteKind,
-): void {
-  dataTransfer.setData(SCREEN_PALETTE_MIME, kind);
-  dataTransfer.setData('text/plain', kind);
-  dataTransfer.effectAllowed = 'copy';
-}
-
-export function readScreenPaletteDragData(dataTransfer: DataTransfer): ScreenPaletteKind | null {
-  const raw = dataTransfer.getData(SCREEN_PALETTE_MIME) || dataTransfer.getData('text/plain');
-  if (
-    raw === 'text' ||
-    raw === 'panel' ||
-    raw === 'row' ||
-    raw === 'column' ||
-    raw === 'grid' ||
-    raw === 'stack'
-  ) {
-    return raw;
-  }
-  return null;
-}
-
-export interface ScreenSpecPaletteProps {
-  readonly canClickPlace: boolean;
-  readonly insertTargetLabel?: string | undefined;
-  readonly onPlaceKind: (kind: ScreenPaletteKind) => void;
-}
-
-export function ScreenSpecPalette({
-  canClickPlace,
-  insertTargetLabel,
-  onPlaceKind,
-}: ScreenSpecPaletteProps) {
-  const categories = ['content', 'layout'] as const;
-
-  const handleDragStart = (event: DragEvent<HTMLButtonElement>, kind: ScreenPaletteKind): void => {
-    writeScreenPaletteDragData(event.dataTransfer, kind);
-  };
-
-  return (
-    <div className="widget-tree-asset-palette" data-testid="screen-spec-palette">
-      {canClickPlace ? (
-        <WorkbenchPropertyHint>
-          Click to add to <strong>{insertTargetLabel ?? 'container'}</strong>, or drag onto Outline.
-        </WorkbenchPropertyHint>
-      ) : (
-        <WorkbenchPropertyHint>
-          Select a row/column/grid/stack in Outline to click-add, or drag onto a container.
-        </WorkbenchPropertyHint>
-      )}
-
-      {categories.map((category) => (
-        <section key={category} className="widget-tree-asset-palette__section">
-          <h3 className="widget-tree-asset-palette__title">{CATEGORY_LABELS[category]}</h3>
-          <div className="widget-tree-asset-palette__grid">
-            {SCREEN_PALETTE_ITEMS.filter((item) => item.category === category).map((item) => (
-              <button
-                key={item.kind}
-                aria-disabled={!canClickPlace}
-                className={cx(
-                  'widget-tree-asset-palette__card',
-                  'widget-tree-asset-palette__card--draggable',
-                  !canClickPlace && 'widget-tree-asset-palette__card--drop-only',
-                )}
-                data-testid={`screen-spec-palette-${item.kind}`}
-                draggable
-                title={item.description}
-                type="button"
-                onClick={() => {
-                  if (!canClickPlace) return;
-                  onPlaceKind(item.kind);
-                }}
-                onDragStart={(event) => handleDragStart(event, item.kind)}
-              >
-                <Codicon icon={item.icon} />
-                <span className="widget-tree-asset-palette__label">{item.label}</span>
-              </button>
-            ))}
-          </div>
-        </section>
-      ))}
-    </div>
-  );
-}

package/src/ScreenSpecWorkbench.tsx

@@ -1,177 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  formatScreenSpecJson,
-  parseScreenSpecJson,
-  screenNodePathToWidgetPath,
-  widgetPathToScreenNodePath,
-  type JdwScreenSpec,
-  type ScreenNodePath,
-  type WidgetPath,
-} from '@workbench-kit/jdw';
-import { BUILTIN_JDW_REGISTRY } from '@workbench-kit/react/jdw';
-import { JdwPreviewViewport } from '@workbench-kit/react/jdw/preview-viewport';
-import {
-  WorkbenchAuthoringShell,
-  WorkbenchLabeledPane,
-  WorkbenchParseError,
-  WorkbenchSurfaceMeta,
-} from '@workbench-kit/react/primitives';
-import { SplitView } from '@workbench-kit/react/workbench/shell';
-
-import { ScreenSpecEditor } from './ScreenSpecEditor.js';
-import { useScreenSpecPipeline } from './useScreenSpecPipeline.js';
-
-/** @deprecated Compile Screen Spec templates once, then author the JDW result with `WidgetTreeLab`. */
-export interface ScreenSpecWorkbenchProps {
-  readonly value: string;
-  readonly onChange?: ((next: string) => void) | undefined;
-  readonly className?: string | undefined;
-}
-
-const INVALID_SCREEN_FALLBACK: JdwScreenSpec = {
-  id: 'invalid-screen',
-  title: 'Invalid screen spec',
-  description: '',
-  frameWidth: 360,
-  layout: { maxWidth: 360, maxHeight: 240 },
-  root: { kind: 'text', content: '' },
-};
-
-const PREVIEW_HELP = 'Click to select · Middle-drag to pan · Ctrl+Scroll to zoom';
-
-/**
- * Compatibility-only 3-pane Screen Spec authoring.
- *
- * @deprecated Compile Screen Spec templates once, then author the resulting JDW
- * document with `WidgetTreeLab`. ScreenNodePath↔WidgetPath synchronization stays
- * here only for compatibility and must not be used by active product entries.
- */
-export function ScreenSpecWorkbench({ value, onChange, className }: ScreenSpecWorkbenchProps) {
-  const parsed = useMemo(() => parseScreenSpecJson(value), [value]);
-  const pipeline = useScreenSpecPipeline(parsed.value ?? INVALID_SCREEN_FALLBACK);
-  const { resetSpec, setSpec, spec, json, compileError } = pipeline;
-  const [selectedPath, setSelectedPath] = useState<ScreenNodePath>([]);
-  /** Skips document→pipeline echo after local writes (avoids recompile + selection reset). */
-  const lastWrittenValueRef = useRef<string | null>(null);
-  /** Mount seed — avoids an immediate resetSpec/compile for the same document. */
-  const seededSpecRef = useRef(parsed.value);
-
-  useEffect(() => {
-    if (lastWrittenValueRef.current === value) {
-      return;
-    }
-    lastWrittenValueRef.current = null;
-    if (parsed.value) {
-      if (parsed.value !== seededSpecRef.current) {
-        resetSpec(parsed.value);
-        setSelectedPath([]);
-      }
-      seededSpecRef.current = parsed.value;
-    }
-  }, [parsed.value, resetSpec, value]);
-
-  const selectedWidgetPath = useMemo(() => {
-    if (!parsed.value) {
-      return null;
-    }
-    return screenNodePathToWidgetPath(spec.root, selectedPath);
-  }, [parsed.value, selectedPath, spec.root]);
-
-  const handleSpecChange = useCallback(
-    (nextSpec: JdwScreenSpec) => {
-      const nextValue = formatScreenSpecJson(nextSpec);
-      lastWrittenValueRef.current = nextValue;
-      setSpec(nextSpec);
-      onChange?.(nextValue);
-    },
-    [onChange, setSpec],
-  );
-
-  const handleSelectWidgetPath = useCallback(
-    (widgetPath: WidgetPath) => {
-      const nextPath = widgetPathToScreenNodePath(spec.root, widgetPath);
-      if (nextPath) {
-        setSelectedPath(nextPath);
-      }
-    },
-    [spec.root],
-  );
-
-  if (!parsed.value) {
-    return (
-      <WorkbenchAuthoringShell className={className} data-testid="screen-spec-workbench">
-        <WorkbenchParseError role="alert" data-testid="screen-spec-workbench-error">
-          {parsed.error ?? 'Invalid screen spec document.'}
-        </WorkbenchParseError>
-      </WorkbenchAuthoringShell>
-    );
-  }
-
-  return (
-    <WorkbenchAuthoringShell
-      className={className}
-      data-testid="screen-spec-workbench"
-      toolbar={
-        spec.title ? (
-          <WorkbenchSurfaceMeta>
-            {spec.title}
-            {spec.description ? ` — ${spec.description}` : ''}
-          </WorkbenchSurfaceMeta>
-        ) : null
-      }
-    >
-      {compileError ? (
-        <WorkbenchParseError role="alert" data-testid="screen-spec-workbench-error">
-          {compileError}
-        </WorkbenchParseError>
-      ) : null}
-      <SplitView
-        defaultPrimarySizePercent={22}
-        minPrimarySizePercent={16}
-        maxPrimarySizePercent={36}
-        primary={
-          <ScreenSpecEditor
-            pane="outline"
-            selectedPath={selectedPath}
-            value={spec}
-            onChange={handleSpecChange}
-            onSelectPath={setSelectedPath}
-          />
-        }
-        secondary={
-          <SplitView
-            defaultPrimarySizePercent={64}
-            minPrimarySizePercent={40}
-            maxPrimarySizePercent={78}
-            primary={
-              <WorkbenchLabeledPane
-                aria-label="Rendered preview"
-                chrome="flat"
-                data-testid="screen-spec-workbench-preview-pane"
-                title="Preview"
-              >
-                <JdwPreviewViewport
-                  enablePrimaryPointerPan={false}
-                  help={PREVIEW_HELP}
-                  json={json}
-                  registry={BUILTIN_JDW_REGISTRY}
-                  selectedPath={selectedWidgetPath}
-                  onSelectPath={handleSelectWidgetPath}
-                />
-              </WorkbenchLabeledPane>
-            }
-            secondary={
-              <ScreenSpecEditor
-                pane="inspector"
-                selectedPath={selectedPath}
-                value={spec}
-                onChange={handleSpecChange}
-                onSelectPath={setSelectedPath}
-              />
-            }
-          />
-        }
-      />
-    </WorkbenchAuthoringShell>
-  );
-}

package/src/filterScreenSpecOutline.ts

@@ -1,40 +0,0 @@
-import type { ScreenNodePath, ScreenSpecOutlineEntry } from '@workbench-kit/jdw';
-
-function pathKey(path: ScreenNodePath): string {
-  return path.length === 0 ? 'root' : path.join('.');
-}
-
-function normalizedTokens(query: string): string[] {
-  return query.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
-}
-
-function entryMatches(entry: ScreenSpecOutlineEntry, tokens: readonly string[]): boolean {
-  const haystack = `${entry.label} ${entry.node.kind}`.toLocaleLowerCase();
-  return tokens.every((token) => haystack.includes(token));
-}
-
-/**
- * Unreal Outliner-style search: keep matches and their ancestors so tree context remains.
- * Multi-term queries use AND (every token must match).
- */
-export function filterScreenSpecOutline(
-  outline: readonly ScreenSpecOutlineEntry[],
-  query: string,
-): readonly ScreenSpecOutlineEntry[] {
-  const tokens = normalizedTokens(query);
-  if (tokens.length === 0) {
-    return outline;
-  }
-
-  const keep = new Set<string>();
-  for (const entry of outline) {
-    if (!entryMatches(entry, tokens)) {
-      continue;
-    }
-    for (let depth = 0; depth <= entry.path.length; depth += 1) {
-      keep.add(pathKey(entry.path.slice(0, depth)));
-    }
-  }
-
-  return outline.filter((entry) => keep.has(pathKey(entry.path)));
-}

package/src/useScreenSpecPipeline.ts

@@ -1,82 +0,0 @@
-import { useCallback, useState } from 'react';
-import {
-  compileScreenSpecToJson,
-  type JdwScreenSpec,
-  type LayoutConstraints,
-} from '@workbench-kit/jdw';
-
-export interface ScreenSpecPipelineState {
-  readonly spec: JdwScreenSpec;
-  readonly json: string;
-  readonly compileError: string | null;
-  readonly layoutConstraints: LayoutConstraints;
-}
-
-export interface UseScreenSpecPipelineResult extends ScreenSpecPipelineState {
-  readonly setSpec: (spec: JdwScreenSpec) => void;
-  readonly setJson: (json: string) => void;
-  readonly resetSpec: (spec: JdwScreenSpec) => void;
-}
-
-function layoutConstraintsFromSpec(spec: JdwScreenSpec): LayoutConstraints {
-  return {
-    minWidth: 0,
-    maxWidth: spec.layout.maxWidth,
-    minHeight: 0,
-    maxHeight: spec.layout.maxHeight,
-  };
-}
-
-function compileSpec(spec: JdwScreenSpec): { json: string; error: string | null } {
-  try {
-    return { json: compileScreenSpecToJson(spec), error: null };
-  } catch (error) {
-    return {
-      json: '',
-      error: error instanceof Error ? error.message : String(error),
-    };
-  }
-}
-
-function createPipelineState(spec: JdwScreenSpec): ScreenSpecPipelineState {
-  const compiled = compileSpec(spec);
-  return {
-    spec,
-    json: compiled.json,
-    compileError: compiled.error,
-    layoutConstraints: layoutConstraintsFromSpec(spec),
-  };
-}
-
-/**
- * Owns Screen Spec → compiled JDW JSON. Compiles once per `setSpec`/`resetSpec`.
- * `initialSpec` is mount-only; external document reloads must call `resetSpec`.
- */
-export function useScreenSpecPipeline(initialSpec: JdwScreenSpec): UseScreenSpecPipelineResult {
-  const [state, setState] = useState(() => createPipelineState(initialSpec));
-
-  const setSpec = useCallback((nextSpec: JdwScreenSpec) => {
-    const compiled = compileSpec(nextSpec);
-    setState((prev) => ({
-      spec: nextSpec,
-      layoutConstraints: layoutConstraintsFromSpec(nextSpec),
-      compileError: compiled.error,
-      json: compiled.error === null ? compiled.json : prev.json,
-    }));
-  }, []);
-
-  const setJson = useCallback((nextJson: string) => {
-    setState((prev) => ({
-      ...prev,
-      json: nextJson,
-      compileError: null,
-    }));
-  }, []);
-
-  return {
-    ...state,
-    setSpec,
-    setJson,
-    resetSpec: setSpec,
-  };
-}