cursedbelt 2.7.0 → 3.0.0

package/src/react/engine-studio/EngineInspector.tsx

@@ -1,77 +0,0 @@
-/**
- * The inspector (03 §3: "inspector forms driven by the per-engine
- * `FeaturesByEngine` schemas").
- *
- * Every control is reflected from the schema V0 validates against, and every
- * diagnostic the pipeline placed on a field is rendered UNDER that field via
- * `SchemaFields`' `messages` prop. That is the specified behavior in one line:
- * `engine-dependency-missing` on `privateMedia` appears on the privateMedia
- * switch, not only in a list at the bottom of the screen.
- */
-import type { FieldDescriptor } from '../schema-fields/types';
-import type { InspectorPanel } from '../../studio';
-import { SchemaFields, type SchemaFieldMessage } from '../schema-fields/SchemaFields';
-import { cn } from '../lib/cn';
-
-export interface EngineInspectorProps {
-  panel: InspectorPanel | null;
-  /** Receives the FULL next features object — the caller writes it onto the
-   *  instance, so one keystroke is one edit and one compile. */
-  onFeaturesChange: (features: Record<string, unknown>) => void;
-  className?: string;
-}
-
-export function EngineInspector({ panel, onFeaturesChange, className }: EngineInspectorProps) {
-  if (!panel) {
-    return (
-      <div className={cn('p-4 text-sm text-muted-foreground', className)} data-cc-inspector-empty=''>
-        Select a node to edit its features.
-      </div>
-    );
-  }
-
-  const fields: FieldDescriptor[] = panel.fields.map((field) => field.descriptor);
-  const value: Record<string, unknown> = Object.fromEntries(
-    panel.fields.filter((field) => field.overridden).map((field) => [field.descriptor.name, field.declared]),
-  );
-  const messages: Record<string, readonly SchemaFieldMessage[]> = {};
-  for (const field of panel.fields) {
-    if (field.diagnostics.length === 0) continue;
-    messages[field.descriptor.path] = field.diagnostics.map((diagnostic) => ({
-      severity: diagnostic.severity,
-      // The fix is the actionable half; showing only the message would make the
-      // control's error less useful than the same error in the terminal.
-      text: diagnostic.fix ? `${diagnostic.message} ${diagnostic.fix}` : diagnostic.message,
-    }));
-  }
-
-  return (
-    <div className={cn('flex flex-col gap-3 p-4', className)} data-cc-inspector={panel.instanceId}>
-      <header className='flex flex-col gap-0.5'>
-        <span className='text-xs font-medium uppercase tracking-wide text-muted-foreground'>{panel.engine}</span>
-        <span className='text-sm font-semibold'>{panel.title}</span>
-      </header>
-
-      {panel.diagnostics.length > 0 && (
-        <ul className='flex flex-col gap-1' data-cc-inspector-instance-diagnostics=''>
-          {panel.diagnostics.map((diagnostic) => (
-            <li
-              className={cn('text-xs', diagnostic.severity === 'error' ? 'text-destructive' : 'text-warning')}
-              key={`${diagnostic.code}:${diagnostic.message}`}
-            >
-              {diagnostic.message}
-            </li>
-          ))}
-        </ul>
-      )}
-
-      <SchemaFields
-        fields={fields}
-        idPrefix={`inspector-${panel.instanceId}`}
-        messages={messages}
-        onChange={onFeaturesChange}
-        value={value}
-      />
-    </div>
-  );
-}

package/src/react/engine-studio/EngineStudio.tsx

@@ -1,317 +0,0 @@
-/**
- * The engine studio (03 §3) — palette, canvas, inspector, diagnostics, save.
- *
- * The composition is thin on purpose. Every decision this surface makes lives in
- * `cursedbelt/studio`: what an edit does to the document, what compiles, what a
- * diagnostic is about, and whether a save is allowed. This file wires those to
- * pixels. That split is what lets the §3 gates be proven without rendering
- * anything, and it is why the studio APP can host this component without
- * re-implementing a single rule.
- *
- * The save button is the visible half of the gate: it is disabled whenever
- * `disposition.allowed` is false, and the reason is the first blocking error's
- * own message — the same string the server-side gate returns when it refuses the
- * request, because both read `saveDisposition`.
- */
-import { type ReactNode, useCallback, useEffect, useState } from 'react';
-import type { EngineId } from '../../config/appConfig';
-import type { StudioDesign, StudioSessionOptions, StudioTarget } from '../../studio';
-import { edit, enginePalette, inspectorPanel, nextInstanceId } from '../../studio';
-import { Button } from '../components/Button';
-import { ScrollArea } from '../components/ScrollArea';
-import { cn } from '../lib/cn';
-import { isTextEntryTarget } from '../lib/textEntryTarget';
-import { DiagnosticsPanel } from './DiagnosticsPanel';
-import { EngineCanvas } from './EngineCanvas';
-import { EngineInspector } from './EngineInspector';
-import { type UseStudioSession, useStudioSession } from './useStudioSession';
-
-export interface EngineStudioViewProps {
-  /**
-   * The live session. The VIEW does not own it, which is what lets a host
-   * replace the whole document — loading another design, accepting an AI
-   * proposal — through the same `reset` the kernel already exposes, instead of
-   * mirroring the document into a second piece of state that can disagree.
-   */
-  session: UseStudioSession;
-  /**
-   * Persist the design. Called only when the gate allows it — the button is
-   * disabled otherwise, and this is never invoked as a "try and see".
-   */
-  onSave?: (design: StudioDesign) => void | Promise<void>;
-  /**
-   * Extra controls for the header's right-hand group (generate, run, …). Given
-   * the session so a host can act on the CURRENT document without a copy of it.
-   */
-  actions?: (session: UseStudioSession) => ReactNode;
-  className?: string;
-}
-
-export interface EngineStudioProps extends StudioSessionOptions {
-  onSave?: (design: StudioDesign) => void | Promise<void>;
-  actions?: (session: UseStudioSession) => ReactNode;
-  className?: string;
-}
-
-/**
- * The self-contained studio: creates its own session from `design`. This is the
- * shape the §3 gates and any embedder that only needs to edit ONE document use.
- * A host that needs to swap documents drives {@link EngineStudioView} instead.
- */
-export function EngineStudio({ onSave, actions, className, ...sessionOptions }: EngineStudioProps) {
-  const session = useStudioSession(sessionOptions);
-  return <EngineStudioView actions={actions} className={className} onSave={onSave} session={session} />;
-}
-
-export function EngineStudioView({ session, onSave, actions, className }: EngineStudioViewProps) {
-  const { state, design, apply, undo, redo, disposition } = session;
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
-  // Build (default) is additive — a palette click drops another node. View is
-  // one-at-a-time tinkering — a palette click REPLACES the node under focus with
-  // the picked engine (see `handlePaletteClick`). Which mode is live must never
-  // be a surprise, so it tints the whole surface, not just a toggle.
-  const [mode, setMode] = useState<'build' | 'view'>('build');
-
-  // cmd/ctrl-Z undoes, shift-cmd/ctrl-Z (or ctrl-Y) redoes — but ONLY when focus
-  // is not inside a text field, whose own native undo we must never hijack (the
-  // rule in `isTextEntryTarget`). We only `preventDefault` once we've decided to
-  // handle it, so an untouched shortcut in a field falls through to the browser.
-  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (!(event.metaKey || event.ctrlKey)) return;
-      const key = event.key.toLowerCase();
-      const isUndo = key === 'z' && !event.shiftKey;
-      const isRedo = (key === 'z' && event.shiftKey) || key === 'y';
-      if (!isUndo && !isRedo) return;
-      if (isTextEntryTarget(event.target)) return;
-      event.preventDefault();
-      if (isRedo) redo();
-      else undo();
-    };
-    document.addEventListener('keydown', onKeyDown);
-    return () => document.removeEventListener('keydown', onKeyDown);
-  }, [undo, redo]);
-
-  const selected = (design.config.instances ?? []).some((instance) => instance.id === selectedId)
-    ? selectedId
-    : null;
-  const panel = selected ? inspectorPanel(design, selected, state.verification) : null;
-
-  const focus = useCallback((target: StudioTarget) => {
-    if (target.kind === 'feature' || target.kind === 'instance' || target.kind === 'port')
-      setSelectedId(target.instanceId);
-  }, []);
-
-  // A palette click. In Build mode it adds (today's behavior). In View mode it
-  // replaces the node under focus with the picked engine as ONE undoable step —
-  // and with nothing to replace (empty canvas, or no single obvious target) it
-  // falls back to adding, so the mode is never a dead end.
-  const handlePaletteClick = (engine: EngineId) => {
-    if (mode === 'view') {
-      const instances = design.config.instances ?? [];
-      const target = selected ?? (instances.length === 1 ? instances[0]!.id : null);
-      if (target) {
-        // Predict the id `replaceInstance` will mint (it returns only the design)
-        // so the inspector keeps following the node through the swap. Same
-        // deterministic derivation the op runs internally.
-        const nextId = nextInstanceId(edit.removeInstance(design, target).config, engine);
-        apply((d) => edit.replaceInstance(d, target, engine));
-        setSelectedId(nextId);
-        return;
-      }
-    }
-    apply((d) => edit.addInstance(d, engine));
-  };
-
-  const save = async () => {
-    if (!disposition.allowed || !onSave) return;
-    setSaving(true);
-    try {
-      await onSave(design);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  return (
-    <div
-      className={cn(
-        'flex h-full flex-col',
-        // The whole surface tints in View mode — an inset ring so the author can
-        // never be surprised which way a palette click will behave.
-        mode === 'view' && 'ring-2 ring-inset ring-primary/50',
-        className,
-      )}
-      data-cc-engine-studio=''
-      data-cc-studio-mode={mode}
-    >
-      <header
-        className={cn(
-          'flex items-center gap-2 border-b border-border px-3 py-2',
-          mode === 'view' && 'bg-primary/5',
-        )}
-      >
-        <span className='text-sm font-semibold'>{design.config.app.title ?? design.config.app.id}</span>
-        <span className='text-xs text-muted-foreground'>{design.config.profile ?? 'local'}</span>
-
-        <div
-          aria-label='Studio mode'
-          className='ml-4 flex items-center rounded-md border border-border p-0.5'
-          data-cc-mode-toggle=''
-          role='radiogroup'
-        >
-          {(['build', 'view'] as const).map((m) => (
-            <Button
-              aria-checked={mode === m}
-              data-cc-mode={m}
-              data-cc-mode-active={mode === m ? '' : undefined}
-              key={m}
-              onClick={() => setMode(m)}
-              role='radio'
-              size='sm'
-              tooltip={
-                m === 'build'
-                  ? 'Build — a palette click adds another node'
-                  : 'View / tinker — a palette click replaces the current node'
-              }
-              tooltipMobile='off'
-              variant={mode === m ? 'primary' : 'tertiary'}
-            >
-              {m === 'build' ? 'Build' : 'View'}
-            </Button>
-          ))}
-        </div>
-
-        <nav aria-label='Engines' className='ml-4 flex items-center gap-1'>
-          {enginePalette(design).map(({ engine, active, instances }) => (
-            <Button
-              data-cc-palette-engine={engine}
-              key={engine}
-              onClick={() => handlePaletteClick(engine as EngineId)}
-              size='sm'
-              tooltip={mode === 'view' ? `Replace the current node with ${engine}` : `Add a ${engine} instance`}
-              tooltipMobile='off'
-              variant={active ? 'secondary' : 'tertiary'}
-            >
-              {engine}
-              {instances > 0 && <span className='text-xs text-muted-foreground'>{instances}</span>}
-            </Button>
-          ))}
-        </nav>
-
-        <div className='ml-auto flex items-center gap-2'>
-          <div className='flex items-center gap-1'>
-            <Button
-              data-cc-undo=''
-              disabled={!state.canUndo}
-              onClick={undo}
-              size='sm'
-              tooltip='Undo (⌘Z)'
-              variant='tertiary'
-            >
-              Undo
-            </Button>
-            <Button
-              data-cc-redo=''
-              disabled={!state.canRedo}
-              onClick={redo}
-              size='sm'
-              tooltip='Redo (⇧⌘Z)'
-              variant='tertiary'
-            >
-              Redo
-            </Button>
-          </div>
-          {actions?.(session)}
-          {!disposition.allowed && disposition.reason && (
-            <span className='max-w-md truncate text-xs text-destructive' data-cc-save-blocked=''>
-              {disposition.reason}
-            </span>
-          )}
-          {selected && (
-            <Button
-              onClick={() => {
-                apply((d) => edit.removeInstance(d, selected));
-                setSelectedId(null);
-              }}
-              size='sm'
-              tooltip={`Delete ${selected} and its wires`}
-              variant='destructive'
-            >
-              Delete node
-            </Button>
-          )}
-          <Button
-            data-cc-save=''
-            disabled={!disposition.allowed || !onSave}
-            loading={saving}
-            onClick={save}
-            size='sm'
-            tooltip={disposition.allowed ? 'Save this design' : (disposition.reason ?? 'Not saveable yet')}
-            variant='primary'
-          >
-            Save
-          </Button>
-        </div>
-      </header>
-
-      <div className='flex min-h-0 flex-1'>
-        <EngineCanvas
-          className='flex-1'
-          design={design}
-          manifest={state.verification?.manifest ?? state.lastGoodManifest}
-          onConnect={(from, to) => apply((d) => edit.addConnection(d, from, to))}
-          onDisconnect={(index) => apply((d) => edit.removeConnection(d, index))}
-          // A drag fires many moves; the same `move:<id>` tag coalesces the whole
-          // gesture into ONE undo step instead of one-undo-per-pixel.
-          onMove={(id, position) => apply((d) => edit.moveNode(d, id, position), `move:${id}`)}
-          // A resize gesture fires many size updates; the `resize:<id>` tag
-          // coalesces the whole drag into ONE undo step. A west/north edge also
-          // moves the origin — folded into the SAME apply so the pair is one step.
-          onResize={(id, size, position) =>
-            apply((d) => {
-              const resized = edit.resizeNode(d, id, size);
-              return position ? edit.moveNode(resized, id, position) : resized;
-            }, `resize:${id}`)
-          }
-          onSelect={setSelectedId}
-          selectedId={selected}
-          verification={state.verification}
-        />
-        <aside className='flex w-80 shrink-0 flex-col border-l border-border'>
-          <ScrollArea className='min-h-0 flex-1' safeArea={false} space='compact'>
-            <EngineInspector
-              onFeaturesChange={(features) =>
-                apply((d) => {
-                  if (!selected) return d;
-                  // no-op guard below; the `features:<id>` tag collapses a burst
-                  // of control tweaks on one node into a single undo step.
-                  // One commit from the form is ONE edit: replacing the whole
-                  // features block keeps `SchemaFields`' contract (it hands back
-                  // the full next object) without N applies and N compiles.
-                  return {
-                    ...d,
-                    config: {
-                      ...d.config,
-                      instances: (d.config.instances ?? []).map((instance) =>
-                        instance.id === selected ? { ...instance, features } : instance,
-                      ),
-                    },
-                  };
-                }, `features:${selected}`)
-              }
-              panel={panel}
-            />
-          </ScrollArea>
-          <DiagnosticsPanel
-            className='h-64 shrink-0 border-t border-border'
-            onSelectTarget={focus}
-            verification={state.verification}
-            verifying={state.verifying}
-          />
-        </aside>
-      </div>
-    </div>
-  );
-}