@pixel-point/toolcraft 0.0.16 → 0.0.18

package/templates/runtime/react/canvas/canvas-shell-test-utils.tsx

@@ -3,10 +3,12 @@ import type * as React from "react";
 import { vi } from "vitest";
 
 import { defineToolcraft } from "../../schema/define-toolcraft";
+import type { ToolcraftProductSceneBoundsProvider } from "../../scene";
 import type { ToolcraftInitialState } from "../../state/types";
 import { ToolcraftRoot } from "../app-shell/toolcraft-root";
 import { useToolcraft } from "../app-shell/use-toolcraft";
 import { CanvasShell } from "./canvas-shell";
+import { ToolcraftProductSceneBoundsBoundary } from "./product-scene-surface";
 
 export function createSchema() {
   return defineToolcraft({
@@ -121,7 +123,9 @@ type RenderCanvasShellOptions = {
   afterCanvas?: React.ReactNode;
   children?: React.ReactNode;
   frameProps?: React.HTMLAttributes<HTMLDivElement>;
+  infiniteCanvasContent?: React.ReactNode;
   initialState?: ToolcraftInitialState;
+  productSceneBoundsProvider?: ToolcraftProductSceneBoundsProvider;
   schema?: ReturnType<typeof defineToolcraft>;
 };
 
@@ -129,7 +133,9 @@ export function renderCanvasShell({
   afterCanvas,
   children,
   frameProps,
+  infiniteCanvasContent,
   initialState,
+  productSceneBoundsProvider,
   schema = createSchema(),
 }: RenderCanvasShellOptions = {}) {
   const { style, ...restFrameProps } = frameProps ?? {};
@@ -140,7 +146,13 @@ export function renderCanvasShell({
         {...restFrameProps}
         style={{ height: 640, position: "relative", width: 640, ...style }}
       >
-        <CanvasShell>{children}</CanvasShell>
+        <ToolcraftProductSceneBoundsBoundary
+          boundsProvider={productSceneBoundsProvider}
+        >
+          <CanvasShell infiniteCanvasContent={infiniteCanvasContent}>
+            {children}
+          </CanvasShell>
+        </ToolcraftProductSceneBoundsBoundary>
         {afterCanvas}
       </div>
     </ToolcraftRoot>,

package/templates/runtime/react/canvas/canvas-shell.tsx

@@ -17,6 +17,7 @@ import {
 } from "./use-canvas-drop-import";
 import { useCanvasViewportInteractions } from "./use-canvas-viewport-interactions";
 import { useToolcraftCanvasFrame } from "./use-toolcraft-canvas-frame";
+import { ToolcraftProductSceneSurface } from "./product-scene-surface";
 import { useToolcraftStore } from "../app-shell/toolcraft-store-context";
 import { useToolcraftSourceAssetCoordinator } from "../app-shell/toolcraft-source-asset-context";
 import { useToolcraftCommittedSelector } from "../app-shell/toolcraft-selectors";
@@ -32,6 +33,7 @@ const directCanvasModelOperationTargets = [DIRECT_CANVAS_OPERATION_TARGET] as co
 
 export type CanvasShellProps = {
   children?: React.ReactNode;
+  infiniteCanvasContent?: React.ReactNode;
   renderDefaultMedia?: boolean;
 };
 
@@ -58,6 +60,7 @@ const selectSelectedLayerId = (state: ToolcraftState) => state.selectedLayerId;
 
 export function CanvasShell({
   children,
+  infiniteCanvasContent,
   renderDefaultMedia = true,
 }: CanvasShellProps): React.JSX.Element {
   const dispatch = useToolcraftDispatch();
@@ -170,6 +173,14 @@ export function CanvasShell({
           : undefined
       }
     >
+      {canvasFrame.kind === "infinite" && infiniteCanvasContent ? (
+        <div
+          className="pointer-events-none absolute inset-0 overflow-hidden"
+          data-toolcraft-infinite-canvas-content=""
+        >
+          {infiniteCanvasContent}
+        </div>
+      ) : null}
       <CanvasViewportWorld>
         {renderEditableCanvas ? (
           <CanvasSceneSurface frame={canvasFrame}>
@@ -193,7 +204,11 @@ export function CanvasShell({
               : null}
             {children ? (
               <CanvasSceneSlot frame={canvasFrame}>
-                {children}
+                <ToolcraftProductSceneSurface
+                  frame={canvasFrame}
+                >
+                  {children}
+                </ToolcraftProductSceneSurface>
               </CanvasSceneSlot>
             ) : null}
           </CanvasSceneSurface>

package/templates/runtime/react/canvas/product-scene-surface.test.tsx

@@ -0,0 +1,195 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { defineToolcraft } from "../../schema/define-toolcraft";
+import type { ToolcraftCanvasFrame } from "../../state/canvas-frame";
+import { ToolcraftRoot } from "../app-shell/toolcraft-root";
+import { useToolcraftDispatch } from "../app-shell/use-toolcraft";
+import {
+  ToolcraftProductSceneBoundsBoundary,
+  ToolcraftProductSceneSurface,
+  useToolcraftProductSceneFrame,
+} from "./product-scene-surface";
+
+const schema = defineToolcraft({
+  canvas: {
+    enabled: true,
+    size: { height: 200, unit: "px", width: 300 },
+    sizing: { mode: "editable-output" },
+  },
+  panels: {},
+  persistence: { storage: "none" },
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+function FrameProbe(): React.JSX.Element {
+  const frame = useToolcraftProductSceneFrame();
+  return <output data-testid="frame">{JSON.stringify(frame)}</output>;
+}
+
+function renderSurface(
+  frame: ToolcraftCanvasFrame,
+  boundsProvider = vi.fn(() => [
+    { height: 50, width: 80, x: -40, y: -25 },
+    { height: 20, width: 30, x: 30, y: 15 },
+  ]),
+) {
+  return {
+    boundsProvider,
+    ...render(
+      <ToolcraftRoot
+        initialState={{
+          canvas: {
+            mode: frame.kind,
+            offset: { x: 0, y: 0 },
+            size: { height: 200, unit: "px", width: 300 },
+            zoom: 100,
+          },
+        }}
+        schema={schema}
+      >
+        <ToolcraftProductSceneBoundsBoundary boundsProvider={boundsProvider}>
+          <ToolcraftProductSceneSurface frame={frame}>
+            <FrameProbe />
+          </ToolcraftProductSceneSurface>
+        </ToolcraftProductSceneBoundsBoundary>
+      </ToolcraftRoot>,
+    ),
+  };
+}
+
+describe("ToolcraftProductSceneSurface", () => {
+  it("keeps the finite frame canonical without invoking product bounds", () => {
+    const { boundsProvider, container } = renderSurface({
+      kind: "finite",
+      size: { height: 200, unit: "px", width: 300 },
+    });
+
+    expect(boundsProvider).not.toHaveBeenCalled();
+    expect(screen.getByTestId("frame").textContent).toBe(
+      JSON.stringify({
+        kind: "finite",
+        rect: { height: 200, width: 300, x: 0, y: 0 },
+      }),
+    );
+    expect(
+      container.querySelector("[data-toolcraft-product-scene]"),
+    ).toBeNull();
+  });
+
+  it("positions one infinite product surface from the exact provider union", () => {
+    const { boundsProvider, container } = renderSurface({ kind: "infinite" });
+    const productScene = container.querySelector<HTMLElement>(
+      "[data-toolcraft-product-scene]",
+    );
+
+    expect(boundsProvider).toHaveBeenCalledTimes(1);
+    expect(productScene?.dataset.toolcraftProductSceneStatus).toBe("ready");
+    expect(productScene?.style.cssText).toContain("height: 60px");
+    expect(productScene?.style.cssText).toContain("left: -40px");
+    expect(productScene?.style.cssText).toContain("top: -25px");
+    expect(productScene?.style.cssText).toContain("width: 100px");
+    expect(screen.getByTestId("frame").textContent).toBe(
+      JSON.stringify({
+        kind: "infinite",
+        rect: { height: 60, width: 100, x: -40, y: -25 },
+      }),
+    );
+  });
+
+  it("keeps hook consumers stable when state changes without changing bounds", () => {
+    const renderProbe = vi.fn();
+
+    function StableFrameProbe(): React.JSX.Element {
+      renderProbe();
+      const dispatch = useToolcraftDispatch();
+      useToolcraftProductSceneFrame();
+      return (
+        <button
+          onClick={() =>
+            dispatch({ delta: { x: 12, y: -8 }, type: "canvas.panBy" })
+          }
+          type="button"
+        >
+          Pan
+        </button>
+      );
+    }
+
+    const boundsProvider = vi.fn(() => [
+      { height: 60, width: 100, x: -40, y: -25 },
+    ]);
+    render(
+      <ToolcraftRoot
+        initialState={{
+          canvas: {
+            mode: "infinite",
+            offset: { x: 0, y: 0 },
+            size: { height: 200, unit: "px", width: 300 },
+            zoom: 100,
+          },
+        }}
+        schema={schema}
+      >
+        <ToolcraftProductSceneBoundsBoundary boundsProvider={boundsProvider}>
+          <ToolcraftProductSceneSurface frame={{ kind: "infinite" }}>
+            <StableFrameProbe />
+          </ToolcraftProductSceneSurface>
+        </ToolcraftProductSceneBoundsBoundary>
+      </ToolcraftRoot>,
+    );
+
+    expect(renderProbe).toHaveBeenCalledTimes(1);
+    fireEvent.click(screen.getByRole("button", { name: "Pan" }));
+    expect(boundsProvider).toHaveBeenCalledTimes(2);
+    expect(renderProbe).toHaveBeenCalledTimes(1);
+  });
+
+  it.each([
+    {
+      expectedKind: "empty",
+      provider: () => [],
+    },
+    {
+      expectedKind: "unavailable",
+      provider: () => [
+        { height: 20, width: Number.NaN, x: 0, y: 0 },
+      ],
+    },
+    {
+      expectedKind: "unavailable",
+      provider: () => {
+        throw new Error("broken provider");
+      },
+    },
+  ])(
+    "reports $expectedKind without falling back to finite geometry",
+    ({ expectedKind, provider }) => {
+      const { container } = renderSurface(
+        { kind: "infinite" },
+        vi.fn(provider),
+      );
+      const productScene = container.querySelector<HTMLElement>(
+        "[data-toolcraft-product-scene]",
+      );
+
+      expect(productScene?.dataset.toolcraftProductSceneStatus).toBe(
+        expectedKind,
+      );
+      expect(productScene?.style.width).toBe("");
+      expect(productScene?.style.height).toBe("");
+      expect(screen.getByTestId("frame").textContent).toBe(
+        JSON.stringify({ kind: expectedKind, rect: null }),
+      );
+    },
+  );
+
+  it("fails directly when the frame hook escapes the product scene", () => {
+    expect(() => render(<FrameProbe />)).toThrow(
+      "useToolcraftProductSceneFrame must be used inside Toolcraft product scene content",
+    );
+  });
+});

package/templates/runtime/react/canvas/product-scene-surface.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  resolveToolcraftProductSceneBounds,
+  type ToolcraftProductSceneBoundsProvider,
+  type ToolcraftSceneRect,
+} from "../../scene";
+import type { ToolcraftCanvasFrame } from "../../state/canvas-frame";
+import type { ToolcraftState } from "../../state/types";
+import { useToolcraftCommittedSelector } from "../app-shell/toolcraft-selectors";
+
+export type ToolcraftProductSceneFrame =
+  | Readonly<{ kind: "finite" | "infinite"; rect: ToolcraftSceneRect }>
+  | Readonly<{ kind: "empty" | "unavailable"; rect: null }>;
+
+const ProductSceneFrameContext =
+  React.createContext<ToolcraftProductSceneFrame | null>(null);
+const ProductSceneBoundsContext =
+  React.createContext<ToolcraftProductSceneBoundsProvider | undefined>(
+    undefined,
+  );
+
+function resolveInfiniteProductFrame(
+  boundsProvider: ToolcraftProductSceneBoundsProvider | undefined,
+  state: ToolcraftState,
+): ToolcraftProductSceneFrame {
+  if (!boundsProvider) {
+    return { kind: "unavailable", rect: null };
+  }
+
+  try {
+    const result = resolveToolcraftProductSceneBounds(
+      boundsProvider({ state }),
+    );
+    return result.ok
+      ? { kind: "infinite", rect: result.bounds }
+      : {
+          kind:
+            result.code === "empty-scene" ? "empty" : "unavailable",
+          rect: null,
+        };
+  } catch {
+    return { kind: "unavailable", rect: null };
+  }
+}
+
+function productSceneFramesEqual(
+  previous: ToolcraftProductSceneFrame,
+  next: ToolcraftProductSceneFrame,
+): boolean {
+  if (previous.kind !== next.kind) return false;
+  if (previous.rect === null || next.rect === null) return true;
+
+  return (
+    Object.is(previous.rect.height, next.rect.height) &&
+    Object.is(previous.rect.width, next.rect.width) &&
+    Object.is(previous.rect.x, next.rect.x) &&
+    Object.is(previous.rect.y, next.rect.y)
+  );
+}
+
+export function useToolcraftProductSceneFrame(): ToolcraftProductSceneFrame {
+  const frame = React.useContext(ProductSceneFrameContext);
+  if (!frame) {
+    throw new Error(
+      "useToolcraftProductSceneFrame must be used inside Toolcraft product scene content.",
+    );
+  }
+  return frame;
+}
+
+export function ToolcraftProductSceneBoundsBoundary({
+  boundsProvider,
+  children,
+}: Readonly<{
+  boundsProvider?: ToolcraftProductSceneBoundsProvider;
+  children: React.ReactNode;
+}>): React.JSX.Element {
+  return (
+    <ProductSceneBoundsContext.Provider value={boundsProvider}>
+      {children}
+    </ProductSceneBoundsContext.Provider>
+  );
+}
+
+export function ToolcraftProductSceneSurface({
+  children,
+  frame,
+}: Readonly<{
+  children: React.ReactNode;
+  frame: ToolcraftCanvasFrame;
+}>): React.JSX.Element {
+  if (frame.kind === "finite") {
+    const productFrame: ToolcraftProductSceneFrame = {
+      kind: "finite",
+      rect: {
+        height: frame.size.height,
+        width: frame.size.width,
+        x: 0,
+        y: 0,
+      },
+    };
+
+    return (
+      <ProductSceneFrameContext.Provider value={productFrame}>
+        {children}
+      </ProductSceneFrameContext.Provider>
+    );
+  }
+
+  return <InfiniteProductSceneSurface>{children}</InfiniteProductSceneSurface>;
+}
+
+function InfiniteProductSceneSurface({
+  children,
+}: Readonly<{ children: React.ReactNode }>): React.JSX.Element {
+  const boundsProvider = React.useContext(ProductSceneBoundsContext);
+  const selectProductFrame = React.useCallback(
+    (state: ToolcraftState) =>
+      resolveInfiniteProductFrame(boundsProvider, state),
+    [boundsProvider],
+  );
+  const productFrame = useToolcraftCommittedSelector(
+    selectProductFrame,
+    productSceneFramesEqual,
+  );
+  const readyRect =
+    productFrame.kind === "infinite" ? productFrame.rect : null;
+
+  return (
+    <ProductSceneFrameContext.Provider value={productFrame}>
+      <div
+        className={readyRect ? "absolute" : "contents"}
+        data-toolcraft-product-scene=""
+        data-toolcraft-product-scene-status={
+          readyRect ? "ready" : productFrame.kind
+        }
+        style={
+          readyRect
+            ? {
+                height: readyRect.height,
+                left: readyRect.x,
+                top: readyRect.y,
+                width: readyRect.width,
+              }
+            : undefined
+        }
+      >
+        {children}
+      </div>
+    </ProductSceneFrameContext.Provider>
+  );
+}

package/templates/runtime/react/canvas/runtime-scene-export.ts

@@ -1,4 +1,4 @@
-import type { ToolcraftExportFrame } from "../../export";
+import type { ToolcraftExportFrame } from "../../export/export-frame";
 import type { ToolcraftRuntimeSceneVisibility } from "../../scene";
 import type { ToolcraftCanvasFrame } from "../../state/canvas-frame";
 import type { ToolcraftImageAsset, ToolcraftState } from "../../state/types";

package/templates/runtime/react/controls-panel/__tests__/control-conditions.test.ts

@@ -9,6 +9,67 @@ import {
 } from "../conditions/control-conditions";
 
 describe("Toolcraft control conditions", () => {
+  it("requires every applicability predicate to match", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                sides: {
+                  applicability: {
+                    all: [
+                      { equals: "create", target: "source.mode" },
+                      {
+                        oneOf: ["polygon", "star"],
+                        target: "shape.kind",
+                      },
+                    ],
+                    mode: "conditional",
+                  },
+                  target: "shape.sides",
+                  type: "slider",
+                },
+              },
+              title: "Shape",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const control = schema.panels.controls?.sections.find(
+      (section) => section.title === "Shape",
+    )?.controls.sides;
+
+    expect(control).toBeTruthy();
+    expect(
+      isToolcraftControlVisible(
+        createToolcraftState(schema, {
+          values: { "shape.kind": "star", "source.mode": "upload" },
+        }),
+        control!,
+      ),
+    ).toBe(false);
+    expect(
+      isToolcraftControlVisible(
+        createToolcraftState(schema, {
+          values: { "shape.kind": "heart", "source.mode": "create" },
+        }),
+        control!,
+      ),
+    ).toBe(false);
+    expect(
+      isToolcraftControlVisible(
+        createToolcraftState(schema, {
+          values: { "shape.kind": "star", "source.mode": "create" },
+        }),
+        control!,
+      ),
+    ).toBe(true);
+  });
+
   it("resolves timeline runtime targets through the canonical condition helpers", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true, renderScale: true, sizing: { mode: "editable-output" } },

package/templates/runtime/react/controls-panel/__tests__/controls-panel.collection-actions.test.tsx

@@ -54,6 +54,9 @@ describe("ControlsPanel collection actions", () => {
     expect(collectionHeader?.lastElementChild?.contains(addButton)).toBe(true);
     expect(colorGrid).toBeTruthy();
     expect(colorGrid?.children).toHaveLength(2);
+    expect(
+      container.querySelector('[data-slot="collection-item-groups"]'),
+    ).toBeNull();
     expect(screen.queryByText("Color 1")).toBeNull();
     expect(screen.queryByText("Color 2")).toBeNull();
 
@@ -77,6 +80,92 @@ describe("ControlsPanel collection actions", () => {
     expect((removeButton as HTMLButtonElement).disabled).toBe(true);
   });
 
+  it("adds, edits, separates, and removes complete logical item records", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                layers: {
+                  defaultValue: [
+                    {
+                      invert: true,
+                      rendererToken: "keep",
+                      strength: 0.4,
+                    },
+                  ],
+                  itemControls: {
+                    strength: {
+                      defaultValue: 0.5,
+                      label: "Strength",
+                      max: 1,
+                      min: 0,
+                      step: 0.1,
+                      type: "slider",
+                    },
+                    invert: {
+                      defaultValue: false,
+                      label: "Invert",
+                      type: "switch",
+                    },
+                  },
+                  itemLabel: "Layer",
+                  minItems: 1,
+                  target: "surface.layers",
+                  type: "collectionActions",
+                },
+              },
+              title: "Surface Layers",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(
+      container.querySelectorAll('[data-slot="collection-item-group"]'),
+    ).toHaveLength(1);
+    expect(screen.queryByText(/Item 1/u)).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "Add Layer" }));
+    let values = JSON.parse(
+      screen.getByTestId("values-json").textContent ?? "{}",
+    );
+    expect(values["surface.layers"]).toEqual([
+      { invert: true, rendererToken: "keep", strength: 0.4 },
+      { invert: false, strength: 0.5 },
+    ]);
+
+    const groups = container.querySelectorAll(
+      '[data-slot="collection-item-group"]',
+    );
+    expect(groups).toHaveLength(2);
+    expect(groups[0]?.className).not.toContain("border-t");
+    expect(groups[1]?.className).toContain("border-t");
+
+    fireEvent.click(
+      screen.getAllByRole("button", { name: "Edit Strength value" })[0]!,
+    );
+    const editor = screen.getByRole("textbox", { name: "Strength value" });
+    editor.textContent = "0.7";
+    fireEvent.keyDown(editor, { key: "Enter" });
+    values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+    expect(values["surface.layers"][0]).toEqual({
+      invert: true,
+      rendererToken: "keep",
+      strength: 0.7,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove Layer" }));
+    expect(
+      container.querySelectorAll('[data-slot="collection-item-group"]'),
+    ).toHaveLength(1);
+  });
+
   it("renders collection item controls beyond color lists", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },