@pixel-point/toolcraft 0.0.17 → 0.0.19

package/templates/starter/e2e/browser-proof-types.ts

@@ -0,0 +1,15 @@
+declare const toolcraftBrowserActionBrand: unique symbol;
+declare const toolcraftBrowserObservationBrand: unique symbol;
+
+export type ToolcraftBrowserAction<
+  Kind extends string = "interaction",
+  Result = void,
+> = {
+  readonly [toolcraftBrowserActionBrand]: true;
+  readonly kind?: Kind;
+  readonly result?: Result;
+};
+
+export type ToolcraftBrowserObservation<T> = {
+  readonly [toolcraftBrowserObservationBrand]: T;
+};

package/templates/starter/e2e/browser-runtime-applicability-requirements.ts

@@ -0,0 +1,84 @@
+import type { ResolvedToolcraftAppSchema } from "@repo/toolcraft-runtime";
+
+import type { ToolcraftBrowserRuntimeRequirement } from "../src/app/test-evidence/browser-runtime-contract";
+import {
+  getToolcraftApplicabilityRequirementId,
+  getToolcraftControlApplicabilityCases,
+  type ToolcraftComponentAcceptance,
+  type ToolcraftControlSectionInventoryEntry,
+} from "../src/app/starter-acceptance";
+
+type ApplicabilityAcceptanceSource = Pick<
+  ToolcraftComponentAcceptance,
+  "browserTestName" | "id" | "kind" | "target"
+>;
+
+const layoutOnlyEvidenceTypes = new Set<
+  ToolcraftBrowserRuntimeRequirement["evidenceType"]
+>(["discrete-slider-layout", "segmented-control-layout"]);
+
+export function expandToolcraftControlApplicabilityRequirements({
+  entry,
+  schema,
+  sectionInventory,
+  templates,
+}: Readonly<{
+  entry: ApplicabilityAcceptanceSource;
+  schema?: Pick<ResolvedToolcraftAppSchema, "panels">;
+  sectionInventory: readonly ToolcraftControlSectionInventoryEntry[];
+  templates: readonly ToolcraftBrowserRuntimeRequirement[];
+}>): ToolcraftBrowserRuntimeRequirement[] {
+  if (!schema || entry.kind !== "control" || !entry.target) {
+    return [...templates];
+  }
+
+  const cases = getToolcraftControlApplicabilityCases({
+    schema,
+    sectionInventory,
+    target: entry.target,
+  });
+
+  if (cases.length === 0) {
+    return [...templates];
+  }
+
+  const hasOutcomeRequirement = templates.some(
+    (requirement) => !layoutOnlyEvidenceTypes.has(requirement.evidenceType),
+  );
+
+  return cases.flatMap((applicabilityCase) => {
+    const visibilityRequirement = {
+      evidenceType:
+        applicabilityCase.expectation === "hidden"
+          ? ("control-applicability-hidden" as const)
+          : ("control-applicability-visible" as const),
+      requirementId: getToolcraftApplicabilityRequirementId(
+        entry.id,
+        applicabilityCase,
+      ),
+      target: entry.target,
+      testName: entry.browserTestName,
+    };
+
+    if (applicabilityCase.expectation === "hidden") {
+      return [visibilityRequirement];
+    }
+
+    if (!hasOutcomeRequirement) {
+      throw new Error(
+        `Visible applicability case for ${entry.id} has no product outcome requirement.`,
+      );
+    }
+
+    return [
+      visibilityRequirement,
+      ...templates.map((requirement) => ({
+        ...requirement,
+        requirementId: getToolcraftApplicabilityRequirementId(
+          requirement.requirementId,
+          applicabilityCase,
+        ),
+      })),
+    ];
+  });
+}

package/templates/starter/e2e/browser-runtime-evidence-reporter.ts

@@ -19,7 +19,10 @@ import {
   type ToolcraftBrowserRuntimeRequirement,
   type ToolcraftBrowserRuntimeTest,
 } from "../src/app/test-evidence/browser-runtime-contract";
-import { starterAcceptance } from "../src/app/starter-acceptance";
+import {
+  starterAcceptance,
+  starterControlSectionInventory,
+} from "../src/app/starter-acceptance";
 import { starterPerformance } from "../src/app/starter-performance";
 import { starterSchema } from "../src/app/starter-schema";
 import {
@@ -166,7 +169,11 @@ export default class ToolcraftBrowserRuntimeEvidenceReporter implements Reporter
     this.performanceSchema = this.performanceSchemaOverride ?? starterSchema;
     this.acceptanceRequirements =
       this.acceptanceRequirementsOverride ??
-      deriveToolcraftBrowserRuntimeRequirements(starterAcceptance, starterSchema);
+      deriveToolcraftBrowserRuntimeRequirements(
+        starterAcceptance,
+        starterSchema,
+        starterControlSectionInventory,
+      );
     this.canonicalPaths = deriveToolcraftPerformancePaths(
       this.performanceSchema,
       this.performanceConfig,

package/templates/starter/e2e/browser-runtime-evidence-requirements.ts

@@ -12,13 +12,15 @@ import {
   getRequiredToolcraftControlPartCoverage,
   type ToolcraftBackgroundOutputCoverage,
   type ToolcraftComponentAcceptance,
-  type ToolcraftConditionalVisibilityCoverage,
+  type ToolcraftControlSectionInventoryEntry,
   type ToolcraftInfinityCanvasCoverage,
+  type ToolcraftExportArtifactCoverage,
   type ToolcraftModelImportCoverage,
   type ToolcraftOrientationGizmoCoverage,
   type ToolcraftTimelinePlaybackCoverage,
   TOOLCRAFT_REQUIRED_MODEL_IMPORT_COVERAGE,
 } from "../src/app/starter-acceptance";
+import { expandToolcraftControlApplicabilityRequirements } from "./browser-runtime-applicability-requirements";
 import { getToolcraftPerformancePathTestName } from "./performance-path-helpers";
 
 type BrowserAcceptanceRequirementSource = Pick<
@@ -34,17 +36,23 @@ type BrowserAcceptanceRequirementSource = Pick<
   | "infinityCanvasCoverage"
   | "layerCoverage"
   | "modelImportCoverage"
+  | "motionReferenceCoverage"
   | "orientationGizmoCoverage"
   | "referenceCoverage"
   | "referenceTimelineCoverage"
   | "renderScaleCoverage"
+  | "selectionScopeCoverage"
   | "target"
   | "timelineCoverage"
   | "timelinePlaybackCoverage"
-  | "visibilityCoverage"
->;
+> & {
+  kind?: ToolcraftComponentAcceptance["kind"];
+};
 
-type BrowserSchemaRequirementSource = Pick<ResolvedToolcraftAppSchema, "panels">;
+type BrowserSchemaRequirementSource = Pick<
+  ResolvedToolcraftAppSchema,
+  "canvas" | "panels"
+>;
 
 function getAcceptanceEvidenceType(
   evidence: ToolcraftComponentAcceptance["evidence"],
@@ -93,18 +101,6 @@ const timelinePlaybackCoverage = Object.keys(
   timelineEvidenceTypeByCoverage,
 ) as Array<keyof typeof timelineEvidenceTypeByCoverage>;
 
-const conditionalVisibilityEvidenceTypeByCoverage = {
-  hidden: "conditional-control-hidden",
-  visible: "conditional-control-visible",
-} as const satisfies Record<
-  ToolcraftConditionalVisibilityCoverage,
-  ToolcraftBrowserRuntimeRequirement["evidenceType"]
->;
-
-const conditionalVisibilityCoverage = Object.keys(
-  conditionalVisibilityEvidenceTypeByCoverage,
-) as ToolcraftConditionalVisibilityCoverage[];
-
 const backgroundOutputEvidenceTypeByCoverage = {
   "image-transparent-when-excluded": "background-image-transparency",
   "infinity-viewport-color-and-dependency": "background-infinity-viewport",
@@ -119,6 +115,15 @@ const backgroundOutputCoverage = Object.keys(
   backgroundOutputEvidenceTypeByCoverage,
 ) as ToolcraftBackgroundOutputCoverage[];
 
+const exportArtifactEvidenceTypeByCoverage = {
+  "all-required-image-export-behavior": "image-export-artifact",
+  "all-required-svg-export-behavior": "svg-export-artifact",
+  "all-required-video-export-behavior": "video-export-artifact",
+} as const satisfies Record<
+  ToolcraftExportArtifactCoverage,
+  ToolcraftBrowserRuntimeRequirement["evidenceType"]
+>;
+
 const orientationEvidenceTypeByCoverage = {
   "axis-drag": "orientation-axis-drag",
   "axis-snap": "orientation-axis-snap",
@@ -139,6 +144,7 @@ const orientationGizmoCoverage = Object.keys(
 const infinityCanvasEvidenceTypeByCoverage = {
   "mode-and-restoration": "infinity-mode-restoration",
   "scene-bounds-image-export": "infinity-scene-bounds-image-export",
+  "scene-bounds-svg-export": "infinity-scene-bounds-svg-export",
   "scene-bounds-video-export": "infinity-scene-bounds-video-export",
 } as const satisfies Record<
   ToolcraftInfinityCanvasCoverage,
@@ -170,7 +176,7 @@ const modelImportEvidenceTypeByCoverage = {
   ToolcraftBrowserRuntimeRequirement["evidenceType"]
 >;
 
-export function deriveToolcraftBrowserRuntimeRequirements(
+function deriveUnqualifiedToolcraftBrowserRuntimeRequirements(
   acceptance: readonly BrowserAcceptanceRequirementSource[],
   schema?: BrowserSchemaRequirementSource,
 ): ToolcraftBrowserRuntimeRequirement[] {
@@ -204,11 +210,7 @@ export function deriveToolcraftBrowserRuntimeRequirements(
       evidenceTypes.push(baseEvidenceType);
     }
     for (const coverage of exportArtifactCoverage) {
-      evidenceTypes.push(
-        coverage === "all-required-image-export-behavior"
-          ? "image-export-artifact"
-          : "video-export-artifact",
-      );
+      evidenceTypes.push(exportArtifactEvidenceTypeByCoverage[coverage]);
     }
 
     if (entry.canvasHandle && !hasOrientationCoverage) {
@@ -229,23 +231,21 @@ export function deriveToolcraftBrowserRuntimeRequirements(
     if (entry.layerCoverage) {
       evidenceTypes.push(layerEvidenceTypeByCoverage[entry.layerCoverage]);
     }
+    if (entry.selectionScopeCoverage === "two-entity-isolation") {
+      evidenceTypes.push("selection-scoped-control");
+    }
     if (entry.infinityCanvasCoverage) {
       evidenceTypes.push(
         infinityCanvasEvidenceTypeByCoverage[entry.infinityCanvasCoverage],
       );
     }
-    if (entry.referenceCoverage || entry.referenceTimelineCoverage) {
+    if (
+      entry.referenceCoverage ||
+      entry.referenceTimelineCoverage ||
+      (entry.motionReferenceCoverage?.length ?? 0) > 0
+    ) {
       evidenceTypes.push("reference-parity");
     }
-    const visibilityCoverage =
-      entry.visibilityCoverage === "all-conditional-visibility"
-        ? conditionalVisibilityCoverage
-        : entry.visibilityCoverage ?? [];
-    evidenceTypes.push(
-      ...visibilityCoverage.map(
-        (item) => conditionalVisibilityEvidenceTypeByCoverage[item],
-      ),
-    );
     const backgroundCoverage =
       entry.backgroundOutputCoverage === "all-required-background-output"
         ? backgroundOutputCoverage.filter(
@@ -342,6 +342,25 @@ export function deriveToolcraftBrowserRuntimeRequirements(
   });
 }
 
+export function deriveToolcraftBrowserRuntimeRequirements(
+  acceptance: readonly BrowserAcceptanceRequirementSource[],
+  schema?: BrowserSchemaRequirementSource,
+  sectionInventory: readonly ToolcraftControlSectionInventoryEntry[] = [],
+): ToolcraftBrowserRuntimeRequirement[] {
+  return acceptance.flatMap((entry) => {
+    const templates = deriveUnqualifiedToolcraftBrowserRuntimeRequirements(
+      [entry],
+      schema,
+    );
+    return expandToolcraftControlApplicabilityRequirements({
+      entry,
+      schema,
+      sectionInventory,
+      templates,
+    });
+  });
+}
+
 const pathProductOutcomeInteractions = new Set<
   ToolcraftPerformancePath["interaction"]
 >([

package/templates/starter/e2e/browser-selection-scope-evidence.ts

@@ -0,0 +1,269 @@
+import { expect } from "@playwright/test";
+
+import { attachToolcraftBrowserRuntimeEvidence } from "./browser-runtime-evidence";
+import {
+  resolveToolcraftProductRasterProbe,
+  type ToolcraftProductRasterProbe,
+  type ToolcraftResolvedProductRasterProbe,
+} from "./browser-product-raster-snapshot";
+import {
+  assertToolcraftBrowserActionForSession,
+  assertToolcraftBrowserProofSession,
+  getToolcraftBrowserActionSurface,
+  getToolcraftBrowserActionTarget,
+  getToolcraftBrowserProofPage,
+  readToolcraftBrowserObservation,
+  runToolcraftBrowserAction,
+  type ToolcraftBrowserAction,
+  type ToolcraftBrowserActionSurface,
+  type ToolcraftBrowserObservation,
+  type ToolcraftBrowserProofSession,
+} from "./browser-proof-session";
+import {
+  expectToolcraftPersistentOutcomeChange,
+  expectToolcraftStableOutcomeBaseline,
+} from "./stable-outcome-helpers";
+
+export type ToolcraftSelectionEntityProbe =
+  ToolcraftProductRasterProbe & Readonly<{ entityId: string }>;
+
+export type ToolcraftSelectionScopedControlOptions = Readonly<{
+  editEntityA: ToolcraftBrowserAction;
+  editEntityB: ToolcraftBrowserAction;
+  entityA: ToolcraftSelectionEntityProbe;
+  entityB: ToolcraftSelectionEntityProbe;
+  observePropertyValue: ToolcraftBrowserObservation<unknown>;
+  observeSelectedEntityId: ToolcraftBrowserObservation<string>;
+  propertySurface: ToolcraftBrowserActionSurface;
+  propertyTarget: string;
+  proofSession: ToolcraftBrowserProofSession;
+  requirementId: string;
+  selectionSurface: ToolcraftBrowserActionSurface;
+  selectionTarget: string;
+  selectEntityA: ToolcraftBrowserAction;
+  selectEntityB: ToolcraftBrowserAction;
+  stabilityIntervalMs?: number;
+  stabilitySamples?: number;
+  timeoutMs?: number;
+}>;
+
+type SelectionSnapshot = Readonly<{
+  controlValue: unknown;
+  entityA: string;
+  entityB: string;
+  selectedEntityId: string;
+}>;
+
+function regionsOverlap(
+  first: ToolcraftResolvedProductRasterProbe["bounds"],
+  second: ToolcraftResolvedProductRasterProbe["bounds"],
+): boolean {
+  return (
+    first.x < second.x + second.width &&
+    first.x + first.width > second.x &&
+    first.y < second.y + second.height &&
+    first.y + first.height > second.y
+  );
+}
+
+function requireActionTarget(
+  action: ToolcraftBrowserAction,
+  expectedTarget: string,
+  label: string,
+): void {
+  expect(
+    getToolcraftBrowserActionTarget(action),
+    `${label} must use the exact protected semantic target.`,
+  ).toBe(expectedTarget);
+}
+
+async function requireProductSceneProbe(
+  probe: ToolcraftResolvedProductRasterProbe,
+  entityId: string,
+): Promise<void> {
+  const provenance = await probe.locator.evaluate((element) => ({
+    insideProductScene: Boolean(
+      element.closest(
+        "[data-toolcraft-product-scene], [data-toolcraft-canvas-content], [data-toolcraft-product-output]",
+      ),
+    ),
+    isEditorHandle: Boolean(element.closest("[data-toolcraft-canvas-handle]")),
+  }));
+  expect(
+    provenance.insideProductScene,
+    `Selection entity "${entityId}" must probe product-scene pixels, not selection chrome.`,
+  ).toBe(true);
+  expect(
+    provenance.isEditorHandle,
+    `Selection entity "${entityId}" must not probe a canvas handle or gizmo.`,
+  ).toBe(false);
+}
+
+async function waitForSelectedEntity(
+  observation: ToolcraftBrowserObservation<string>,
+  entityId: string,
+  timeoutMs: number,
+): Promise<void> {
+  await expect
+    .poll(() => readToolcraftBrowserObservation(observation), {
+      message: `Selection must rebind the property control to "${entityId}".`,
+      timeout: timeoutMs,
+    })
+    .toBe(entityId);
+}
+
+export async function expectToolcraftSelectionScopedControl(
+  options: ToolcraftSelectionScopedControlOptions,
+): Promise<void> {
+  const {
+    editEntityA,
+    editEntityB,
+    entityA,
+    entityB,
+    observePropertyValue,
+    observeSelectedEntityId,
+    proofSession,
+    selectEntityA,
+    selectEntityB,
+  } = options;
+  const timeoutMs = options.timeoutMs ?? 5_000;
+  const stability = {
+    message: `Selection-scoped control "${options.requirementId}" must remain deterministic.`,
+    stabilityIntervalMs: options.stabilityIntervalMs ?? 50,
+    stabilitySamples: options.stabilitySamples ?? 3,
+    timeoutMs,
+  };
+
+  expect(entityA.entityId.trim()).not.toBe("");
+  expect(entityB.entityId.trim()).not.toBe("");
+  expect(entityA.entityId).not.toBe(entityB.entityId);
+  expect(options.propertyTarget.trim()).not.toBe("");
+  expect(options.selectionTarget.trim()).not.toBe("");
+
+  assertToolcraftBrowserProofSession(
+    observeSelectedEntityId,
+    selectEntityA,
+    selectEntityB,
+    editEntityA,
+    editEntityB,
+  );
+  assertToolcraftBrowserProofSession(
+    observePropertyValue,
+    selectEntityA,
+    selectEntityB,
+    editEntityA,
+    editEntityB,
+  );
+  for (const action of [
+    selectEntityA,
+    selectEntityB,
+    editEntityA,
+    editEntityB,
+  ]) {
+    assertToolcraftBrowserActionForSession(proofSession, action);
+  }
+
+  requireActionTarget(
+    selectEntityA,
+    options.selectionTarget,
+    "Entity A selection",
+  );
+  requireActionTarget(
+    selectEntityB,
+    options.selectionTarget,
+    "Entity B selection",
+  );
+  requireActionTarget(editEntityA, options.propertyTarget, "Entity A edit");
+  requireActionTarget(editEntityB, options.propertyTarget, "Entity B edit");
+  expect(getToolcraftBrowserActionSurface(selectEntityA)).toBe(
+    options.selectionSurface,
+  );
+  expect(getToolcraftBrowserActionSurface(selectEntityB)).toBe(
+    options.selectionSurface,
+  );
+  expect(getToolcraftBrowserActionSurface(editEntityA)).toBe(
+    options.propertySurface,
+  );
+  expect(getToolcraftBrowserActionSurface(editEntityB)).toBe(
+    options.propertySurface,
+  );
+
+  const page = await getToolcraftBrowserProofPage(proofSession);
+  const [probeA, probeB] = await Promise.all([
+    resolveToolcraftProductRasterProbe(page, entityA, timeoutMs),
+    resolveToolcraftProductRasterProbe(page, entityB, timeoutMs),
+  ]);
+  await Promise.all([
+    requireProductSceneProbe(probeA, entityA.entityId),
+    requireProductSceneProbe(probeB, entityB.entityId),
+  ]);
+  expect(
+    regionsOverlap(probeA.bounds, probeB.bounds),
+    "Selection entity probes must have disjoint positive-area bounds.",
+  ).toBe(false);
+
+  const capture = async (): Promise<SelectionSnapshot> => ({
+    controlValue: await readToolcraftBrowserObservation(observePropertyValue),
+    entityA: await probeA.capture(),
+    entityB: await probeB.capture(),
+    selectedEntityId: await readToolcraftBrowserObservation(
+      observeSelectedEntityId,
+    ),
+  });
+  const captureStable = async (): Promise<SelectionSnapshot> => {
+    const snapshot = await capture();
+    return expectToolcraftStableOutcomeBaseline(capture, snapshot, stability);
+  };
+
+  await runToolcraftBrowserAction(selectEntityB);
+  await waitForSelectedEntity(observeSelectedEntityId, entityB.entityId, timeoutMs);
+  const baselineB = await captureStable();
+
+  await runToolcraftBrowserAction(selectEntityA);
+  await waitForSelectedEntity(observeSelectedEntityId, entityA.entityId, timeoutMs);
+  const beforeA = await captureStable();
+  expect(beforeA.controlValue).not.toEqual(baselineB.controlValue);
+  expect(beforeA.entityA).toEqual(baselineB.entityA);
+  expect(beforeA.entityB).toEqual(baselineB.entityB);
+
+  await runToolcraftBrowserAction(editEntityA);
+  const afterA = await expectToolcraftPersistentOutcomeChange(
+    capture,
+    beforeA,
+    stability,
+  );
+  expect(afterA.selectedEntityId).toBe(entityA.entityId);
+  expect(afterA.controlValue).not.toEqual(beforeA.controlValue);
+  expect(afterA.entityA).not.toEqual(beforeA.entityA);
+  expect(afterA.entityB).toEqual(beforeA.entityB);
+
+  const beforeSelectB = await captureStable();
+  await runToolcraftBrowserAction(selectEntityB);
+  await waitForSelectedEntity(observeSelectedEntityId, entityB.entityId, timeoutMs);
+  const beforeB = await captureStable();
+  expect(beforeB.entityA).toEqual(beforeSelectB.entityA);
+  expect(beforeB.entityB).toEqual(beforeSelectB.entityB);
+  expect(beforeB.controlValue).toEqual(baselineB.controlValue);
+
+  await runToolcraftBrowserAction(editEntityB);
+  const afterB = await expectToolcraftPersistentOutcomeChange(
+    capture,
+    beforeB,
+    stability,
+  );
+  expect(afterB.selectedEntityId).toBe(entityB.entityId);
+  expect(afterB.controlValue).not.toEqual(beforeB.controlValue);
+  expect(afterB.entityB).not.toEqual(beforeB.entityB);
+  expect(afterB.entityA).toEqual(beforeB.entityA);
+
+  await attachToolcraftBrowserRuntimeEvidence({
+    evidenceType: "product-observable-change",
+    requirementId: options.requirementId,
+    target: options.propertyTarget,
+  });
+  await attachToolcraftBrowserRuntimeEvidence({
+    evidenceType: "selection-scoped-control",
+    requirementId: options.requirementId,
+    target: options.propertyTarget,
+  });
+}

package/templates/starter/e2e/browser-semantic-evidence-test-helpers.ts

@@ -4,6 +4,12 @@ import { parseToolcraftBrowserRuntimeEvidence } from "../src/app/test-evidence/b
 
 const rootSelector = '[data-slot="toolcraft-runtime-app"]';
 
+export type SyntheticSelectionSceneState = Readonly<{
+  controlValue: string;
+  fills: Readonly<Record<string, string>>;
+  selectedEntityId: string;
+}>;
+
 export function attachedEvidenceTypes(
   testInfo: TestInfo,
   startIndex: number,
@@ -55,3 +61,119 @@ export async function setSyntheticControlOwner(
     { target, visible },
   );
 }
+
+export async function setSyntheticSwitchControlOwner(
+  page: Page,
+  target: string,
+  checked: boolean,
+): Promise<void> {
+  await setSyntheticControlOwner(page, target, true);
+  await page.locator("[data-synthetic-target]").evaluateAll(
+    (owners, entry) => {
+      const owner = owners.find(
+        (candidate) =>
+          candidate.getAttribute("data-synthetic-target") === entry.target,
+      );
+      const button = owner?.querySelector("button");
+
+      if (!button) {
+        throw new Error(`Missing synthetic switch owner ${entry.target}.`);
+      }
+
+      button.setAttribute("aria-checked", String(entry.checked));
+      button.setAttribute("role", "switch");
+    },
+    { checked, target },
+  );
+}
+
+export async function mountSyntheticSelectionScene(
+  page: Page,
+  initialState: SyntheticSelectionSceneState,
+): Promise<void> {
+  await setSyntheticControlOwner(page, "selectedShape.fill", true);
+  await page.locator(rootSelector).evaluate((root, state) => {
+    const canvas = root.querySelector<HTMLElement>(
+      '[data-slot="toolcraft-runtime-canvas"]',
+    );
+    if (!canvas) {
+      throw new Error("Missing runtime canvas content for selection fixture.");
+    }
+
+    root.setAttribute("data-proof-selection-scope", JSON.stringify(state));
+    root.querySelector('[data-proof-selection-scene]')?.remove();
+    const scene = document.createElement("div");
+    scene.dataset.proofSelectionScene = "true";
+    scene.dataset.toolcraftProductOutput = "true";
+    Object.assign(scene.style, {
+      display: "flex",
+      gap: "32px",
+      padding: "16px",
+      pointerEvents: "auto",
+      position: "absolute",
+      inset: "16px auto auto 16px",
+      zIndex: "50",
+    });
+
+    for (const [entityId, fill] of Object.entries(state.fills)) {
+      const entity = document.createElement("button");
+      entity.dataset.proofEntity = entityId;
+      entity.type = "button";
+      entity.setAttribute("aria-label", `Select ${entityId}`);
+      Object.assign(entity.style, {
+        background: fill,
+        border: "0",
+        display: "block",
+        height: "48px",
+        padding: "0",
+        width: "48px",
+      });
+      entity.addEventListener("click", () => {
+        const current = JSON.parse(
+          root.getAttribute("data-proof-selection-scope") ?? "null",
+        ) as SyntheticSelectionSceneState;
+        root.setAttribute(
+          "data-proof-selection-scope",
+          JSON.stringify({
+            ...current,
+            controlValue: current.fills[entityId],
+            selectedEntityId: entityId,
+          }),
+        );
+      });
+      entity.addEventListener("pointerdown", (event) => {
+        event.stopPropagation();
+      });
+      scene.append(entity);
+    }
+
+    canvas.append(scene);
+  }, initialState);
+}
+
+export async function editSyntheticSelectedEntity(
+  page: Page,
+  fill: string,
+): Promise<void> {
+  await page.locator(rootSelector).evaluate((root, nextFill) => {
+    const current = JSON.parse(
+      root.getAttribute("data-proof-selection-scope") ?? "null",
+    ) as SyntheticSelectionSceneState;
+    const entity = root.querySelector<HTMLElement>(
+      `[data-proof-entity="${CSS.escape(current.selectedEntityId)}"]`,
+    );
+    if (!entity) {
+      throw new Error(`Missing selected entity ${current.selectedEntityId}.`);
+    }
+    const nextState = {
+      ...current,
+      controlValue: nextFill,
+      fills: { ...current.fills, [current.selectedEntityId]: nextFill },
+    };
+    entity.style.background = nextFill;
+    root.setAttribute(
+      "data-proof-selection-scope",
+      JSON.stringify(nextState),
+    );
+  }, fill);
+}