@pixel-point/toolcraft 0.0.17 → 0.0.19

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";