@volter/editor-game 0.5.65 → 0.5.66

package/src/react/pasteboard-materialize.ts

@@ -1,154 +0,0 @@
-/**
- * "MATERIALIZE PASTEBOARD" (queue item 4): turn the UI board's DERIVED,
- * ephemeral auto-grid into an AUTHORED pasteboard `.tsx` — the one action the
- * ratified design names ("ephemeral auto-grid when no file; one action
- * materializes it"). The generated file is ordinary project source: it
- * imports each board story's OWNER COMPONENT and places it under `<At x y>`
- * at the position the auto-grid gave its frame, so the derived layout becomes
- * literals a drag can then rewrite. Nothing regenerates the file afterwards —
- * it is the project's, exactly like every `vgai add` copy.
- *
- * Refusals are loud and name their remedy: no open project, no storage, no
- * pasteboard helpers (`vgai add pasteboard`), a file already at the target
- * path, or a board with nothing on it. A story whose owner component cannot
- * be resolved to an importable export is SKIPPED BY NAME in the returned
- * sentence rather than emitting an import that does not compile.
- *
- * ## Why it is this package's
- *
- * Its subject is THE UI BOARD — the design-time surface `@volter/editor-game` registers
- * a mount for (`design-time-react-mount.ts`, unit 12) — and it reads that
- * board's own frame placements. It stayed a host file only because its one
- * caller was a host `action-registry.ts` row; the action POINT
- * (`@volter/editor-sdk/chrome`, `workspace.action`) is what that row becomes,
- * and `contributions/pasteboard.action.ts` is the row now. Unit 12's header
- * called this file "NOT the dom lane's" on the strength of that caller; the
- * caller is what moved (WORK.md §The open-source launch item 17, the edge map
- * in `scripts/validate-editor-closure.mjs`).
- */
-
-import { commandLine } from '@volter/editor-core/product-command';
-import { listProjectComponents } from '@volter/editor-core/api/assets';
-import type { ProjectComponentEntry } from '@volter/editor-core/asset-workflow/project-content';
-import { reactStoryBoardFramePlacements } from '@volter/editor-core/authoring/react-story-board';
-import { getProjectPreviewStories } from '@volter/editor-core/stories/story-registry';
-import { domStoryBoardMembers } from '@volter/editor-core/stories/three-story-model';
-import { createProjectSourceFile } from '@volter/editor-core/ui-source/source-write-backend';
-
-export const PASTEBOARD_HELPERS_PATH = 'src/lib/pasteboard/pasteboard.tsx';
-export const MATERIALIZED_PASTEBOARD_PATH = 'src/design/pasteboard.tsx';
-
-/** The story's owner-module convention: `Hud.stories.tsx` → `Hud.tsx`. */
-function storyOwnerModulePath(storyModulePath: string): string {
-  return storyModulePath.replace(/\.stories(?=\.[^.]+$)/, '');
-}
-
-/** Relative import specifier from `src/design/` to a project-relative path. */
-function importSpecifierFromDesign(componentPath: string): string {
-  const withoutExtension = componentPath.replace(/\.[cm]?[jt]sx?$/, '');
-  return `../${withoutExtension.replace(/^src\//, '')}`;
-}
-
-function componentForOwnerModule(
-  components: readonly ProjectComponentEntry[],
-  ownerModulePath: string,
-): ProjectComponentEntry | null {
-  const inModule = components.filter(
-    (entry) => entry.path === ownerModulePath && (entry.exported || entry.defaultExport),
-  );
-  return (
-    inModule.find((entry) => entry.defaultExport) ?? (inModule.length === 1 ? inModule[0]! : null)
-  );
-}
-
-export async function materializePasteboard(): Promise<string> {
-  const helpers = await fetch('/__ui-source/read', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ file: PASTEBOARD_HELPERS_PATH }),
-  });
-  if (!helpers.ok) {
-    throw new Error(
-      `Materialize pasteboard needs the pasteboard helpers at ${PASTEBOARD_HELPERS_PATH} — ` +
-        `run ${commandLine('add pasteboard')} first.`,
-    );
-  }
-  const layer = document.querySelector<HTMLElement>('[data-vgai-react-story-board="true"]');
-  const placements = reactStoryBoardFramePlacements(layer);
-  if (!placements || placements.length === 0) {
-    throw new Error(
-      'Materialize pasteboard reads the live UI board and it has no frames — open the UI ' +
-        'document (a project with dom stories) first.',
-    );
-  }
-  const stories = domStoryBoardMembers(getProjectPreviewStories());
-  const listing = await listProjectComponents();
-  const components = listing.ok ? listing.entries : [];
-  const placed: Array<{ importLine: string; name: string; x: number; y: number }> = [];
-  const skipped: string[] = [];
-  const importsBySpecifier = new Map<string, string>();
-  for (const placement of placements) {
-    const story = stories.find((candidate) => candidate.id === placement.storyId);
-    if (!story) continue;
-    const owner = storyOwnerModulePath(story.modulePath);
-    const component = componentForOwnerModule(components, owner);
-    if (!component) {
-      skipped.push(story.label ?? story.id);
-      continue;
-    }
-    const specifier = importSpecifierFromDesign(component.path);
-    const importLine = component.defaultExport
-      ? `import ${component.name} from '${specifier}';`
-      : `import { ${component.name} } from '${specifier}';`;
-    importsBySpecifier.set(specifier, importLine);
-    placed.push({ importLine, name: component.name, x: placement.x, y: placement.y });
-  }
-  if (placed.length === 0) {
-    throw new Error(
-      'Materialize pasteboard resolved no importable owner component for any board frame ' +
-        `(skipped: ${skipped.join(', ') || 'none'}). A story's owner module must export the ` +
-        'component its frames render.',
-    );
-  }
-  const width = Math.max(...placed.map((entry) => entry.x)) + 960;
-  const height = Math.max(...placed.map((entry) => entry.y)) + 720;
-  const body = placed
-    .map(
-      (entry) => `      <At x={${entry.x}} y={${entry.y}}>\n        <${entry.name} />\n      </At>`,
-    )
-    .join('\n');
-  const code = `${[...importsBySpecifier.values()].sort().join('\n')}
-import { At, Pasteboard } from '../lib/pasteboard/pasteboard';
-
-/**
- * Materialized from the UI board's derived auto-grid — this file is now the
- * AUTHORED canvas: edit freely, and a drag in the editor writes each At's
- * x/y literals right here.
- */
-export default function DesignPasteboard() {
-  return (
-    <Pasteboard width={${width}} height={${height}}>
-${body}
-    </Pasteboard>
-  );
-}
-`;
-  const created = await createProjectSourceFile(MATERIALIZED_PASTEBOARD_PATH, code);
-  if (!created.created) {
-    throw new Error(
-      created.error ??
-        `${MATERIALIZED_PASTEBOARD_PATH} already exists — the pasteboard is already authored; ` +
-          'edit it directly (there is deliberately no regeneration).',
-    );
-  }
-  // The AssetBrowser owns asset-open routing; the event is its documented door.
-  window.dispatchEvent(
-    new CustomEvent('editor:open-project-asset', {
-      detail: { path: MATERIALIZED_PASTEBOARD_PATH, kind: 'source' },
-    }),
-  );
-  return (
-    `Materialized ${placed.length} frame(s) into ${MATERIALIZED_PASTEBOARD_PATH}` +
-    (skipped.length > 0 ? ` (skipped, no importable owner component: ${skipped.join(', ')})` : '')
-  );
-}

package/src/xstate/XStateBehaviorSection.tsx

@@ -1,130 +0,0 @@
-/**
- * The compact **Behavior** Inspector section (§4.3): the selected entity's
- * live machine — its id, where the actor IS, the machine's FULL state chart
- * with the active path marked, and the way into the Behavior document.
- *
- * It renders ONLY when `xstate-behavior.inspector.tsx`'s `match` found a real
- * live behavior mark on the selected node, so a template entity (no machine)
- * never sees it.
- */
-
-import { Button, themeVars } from '@volter/editor-sdk/widgets';
-import {
-  subscribeXStateBehaviorInspections,
-  xstateBehaviorInspectionsVersion,
-} from '@volter/threejs-runtime/behavior/xstate-inspection';
-import { useSyncExternalStore } from 'react';
-import type { AnyStateMachine, AnyStateNode } from 'xstate';
-import { liveBehaviorFor, openBehaviorDocument } from './live-behaviors';
-import { useLiveActorState } from './use-live-actor-state';
-
-/** Every descendant state node of the machine (depth-first, root excluded),
- *  for the full-state-list readout below — the same direct `.states` walk
- *  `xstate-graph.ts` documents as the sanctioned traversal. */
-function allMachineStates(machine: AnyStateMachine): AnyStateNode[] {
-  const out: AnyStateNode[] = [];
-  const visit = (node: AnyStateNode): void => {
-    for (const child of Object.values(node.states)) {
-      out.push(child);
-      visit(child);
-    }
-  };
-  visit(machine.root);
-  return out;
-}
-
-export function XStateMachineSection({ nodeId }: { nodeId: string | null }) {
-  useSyncExternalStore(
-    subscribeXStateBehaviorInspections,
-    xstateBehaviorInspectionsVersion,
-    xstateBehaviorInspectionsVersion,
-  );
-  const behavior = nodeId ? liveBehaviorFor(nodeId) : undefined;
-  const machine = behavior?.machine;
-  // Follow live transitions (re-render per snapshot) — the state list and
-  // layer readout below re-derive from each.
-  const activeIds = useLiveActorState(machine as AnyStateMachine, behavior?.actor);
-  if (!behavior || !machine || !nodeId) return null;
-  const activeIdSet = new Set(activeIds ?? []);
-  const states = allMachineStates(machine);
-  return (
-    <div
-      data-testid="inspector-xstate-section"
-      style={{
-        pointerEvents: 'auto',
-        padding: 8,
-        borderBottom: `1px solid ${themeVars.boundary.default}`,
-      }}
-    >
-      <div
-        style={{
-          fontSize: 11,
-          color: themeVars.content.dim,
-          textTransform: 'uppercase',
-          marginBottom: 4,
-        }}
-      >
-        Behavior
-      </div>
-      <div
-        style={{ fontSize: 11, color: themeVars.content.primary, fontWeight: 600, marginBottom: 2 }}
-      >
-        {machine.id}
-      </div>
-      <div style={{ fontSize: 10, color: themeVars.content.muted, marginBottom: 4 }}>
-        <span style={{ color: themeVars.semantic.success, fontWeight: 700 }}>●</span> Live —{' '}
-        {activeIds?.map((stateId, index) => (
-          <span key={stateId}>
-            {index > 0 && ' · '}
-            <span
-              style={{ fontFamily: themeVars.typography.mono, color: themeVars.accent.default }}
-            >
-              {stateId.startsWith(`${machine.id}.`)
-                ? stateId.slice(machine.id.length + 1)
-                : stateId}
-            </span>
-          </span>
-        ))}
-      </div>
-      {/* The FULL state chart, active path highlighted — the section must
-          show what the machine can do, not only where it is (owner
-          feedback, 2026-08-06). */}
-      <div data-testid="xstate-section-states" style={{ marginBottom: 6 }}>
-        {states.map((state) => {
-          const relative = state.id.startsWith(`${machine.root.id}.`)
-            ? state.id.slice(machine.root.id.length + 1)
-            : state.id;
-          const depth = relative.split('.').length - 1;
-          const active = activeIdSet.has(state.id);
-          return (
-            <div
-              key={state.id}
-              data-testid={`xstate-section-state-${relative}`}
-              style={{
-                paddingLeft: 4 + depth * 12,
-                fontSize: 10,
-                lineHeight: 1.7,
-                fontFamily: themeVars.typography.mono,
-                color: active ? themeVars.accent.default : themeVars.content.muted,
-                fontWeight: active ? 700 : 400,
-              }}
-            >
-              {active ? '● ' : '○ '}
-              {state.key}
-            </div>
-          );
-        })}
-      </div>
-      <div style={{ fontSize: 10, color: themeVars.content.dim, marginBottom: 6 }}>
-        Source: hand-authored XState TypeScript — inspect-only.
-      </div>
-      <Button
-        size="compact"
-        data-testid="xstate-open-graph"
-        onClick={() => void openBehaviorDocument(nodeId)}
-      >
-        Inspect Behavior
-      </Button>
-    </div>
-  );
-}