@pixel-point/toolcraft 0.0.8 → 0.0.11

package/templates/runtime/react/toolcraft-app.test.tsx

@@ -1,4 +1,5 @@
 import {
+  act,
   cleanup,
   fireEvent,
   render,
@@ -6,7 +7,7 @@ import {
   waitFor,
 } from "@testing-library/react";
 import * as React from "react";
-import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
 
 import { defineToolcraft } from "../schema/define-toolcraft";
 import type { ToolcraftCustomControlRendererProps } from "./control-renderers";
@@ -27,9 +28,17 @@ beforeAll(() => {
     }),
     writable: true,
   });
+  window.requestAnimationFrame ??= ((callback: FrameRequestCallback) =>
+    window.setTimeout(
+      () => callback(performance.now()),
+      16,
+    )) as typeof window.requestAnimationFrame;
+  window.cancelAnimationFrame ??= ((handle: number) =>
+    window.clearTimeout(handle)) as typeof window.cancelAnimationFrame;
 });
 
 afterEach(() => {
+  vi.useRealTimers();
   cleanup();
   document.documentElement.classList.remove("dark");
   document.documentElement.style.colorScheme = "";
@@ -113,6 +122,16 @@ function CustomValueProbe(): React.JSX.Element {
   );
 }
 
+function TimelineTimeProbe(): React.JSX.Element {
+  const { state } = useToolcraft();
+
+  return (
+    <span data-testid="timeline-time">
+      {state.timeline.currentTimeSeconds.toFixed(3)}
+    </span>
+  );
+}
+
 describe("ToolcraftApp", () => {
   it("renders enabled runtime surfaces from the app schema", () => {
     const { container } = render(<ToolcraftApp schema={createSchema()} />);
@@ -122,7 +141,11 @@ describe("ToolcraftApp", () => {
     ).toBeTruthy();
     expect(screen.getByText("Controls")).toBeTruthy();
     expect(screen.getByText("Layers")).toBeTruthy();
-    expect(screen.getByText("Dur:")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Pause playback" })).toBeTruthy();
+    expect(
+      container.querySelector('[data-toolcraft-timeline-panel-variant="compact"]'),
+    ).toBeTruthy();
+    expect(screen.queryByText("Dur:")).toBeNull();
     expect(screen.queryByText("Duration:")).toBeNull();
     expect(screen.getByRole("button", { name: "Undo" })).toBeTruthy();
     expect(screen.getByRole("button", { name: "Redo" })).toBeTruthy();
@@ -145,6 +168,92 @@ describe("ToolcraftApp", () => {
     expect(container.querySelector('[data-panel-type="toolbar"]')).toBeTruthy();
   });
 
+  it("switches the timeline panel between compact and extended through the runtime setup toggle", () => {
+    const { container } = render(<ToolcraftApp schema={createSchema()} />);
+
+    expect(container.querySelector('[data-panel-type="timeline"]')).toBeTruthy();
+    expect(
+      container.querySelector('[data-toolcraft-timeline-panel-variant="compact"]'),
+    ).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Pause playback" })).toBeTruthy();
+    expect(screen.queryByText("Dur:")).toBeNull();
+
+    const timelineField = screen.getByText("Timeline").closest('[role="group"]');
+    const timelineSwitch = timelineField?.querySelector<HTMLElement>('[role="switch"]');
+
+    expect(timelineSwitch?.getAttribute("aria-checked")).toBe("false");
+
+    fireEvent.click(timelineSwitch as HTMLElement);
+
+    expect(container.querySelector('[data-panel-type="timeline"]')).toBeTruthy();
+    expect(
+      container.querySelector('[data-toolcraft-timeline-panel-variant="extended"]'),
+    ).toBeTruthy();
+    expect(container.querySelector('[data-toolcraft-timeline-panel-hidden="true"]')).toBeNull();
+    expect(screen.getByText("Dur:")).toBeTruthy();
+    expect(screen.getByText(/\d+(?:\.\d+)? \/ 8s/)).toBeTruthy();
+    expect(timelineSwitch?.getAttribute("aria-checked")).toBe("true");
+  });
+
+  it("keeps timeline playback running while the panel is hidden", () => {
+    vi.useFakeTimers();
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 180, unit: "px", width: 320 },
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+        timeline: { mode: "playback" },
+      },
+      persistence: {
+        include: ["panels", "timeline"],
+        key: "toolcraft:timeline-hidden-test:state:v1",
+        storage: "localStorage",
+        version: 1,
+      },
+    });
+
+    window.localStorage.setItem(
+      "toolcraft:timeline-hidden-test:state:v1",
+      JSON.stringify({
+        state: {
+          panels: {
+            timeline: { hidden: true },
+          },
+          timeline: {
+            currentTimeSeconds: 0,
+            durationSeconds: 8,
+            expanded: false,
+            isLooping: true,
+            isPlaying: true,
+          },
+        },
+        version: 1,
+      }),
+    );
+
+    const { container } = render(
+      <ToolcraftApp canvasContent={<TimelineTimeProbe />} schema={schema} />,
+    );
+
+    expect(
+      container.querySelector('[data-toolcraft-timeline-panel-hidden="true"]'),
+    ).toBeTruthy();
+    expect(screen.getByTestId("timeline-time").textContent).toBe("0.000");
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(Number(screen.getByTestId("timeline-time").textContent)).toBeGreaterThan(0);
+
+    vi.useRealTimers();
+  });
+
   it("does not render disabled optional panels or toolbar features", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
@@ -272,7 +381,7 @@ describe("ToolcraftApp", () => {
                 footer: {
                   actions: [
                     {
-                      icon: "export",
+                      icon: "upload-simple",
                       label: "Export image",
                       value: "export",
                       variant: "default",

package/templates/runtime/react/toolcraft-app.tsx

@@ -13,6 +13,7 @@ import { ToolcraftRoot } from "./toolcraft-root";
 import { LayersPanel } from "./layers-panel";
 import { TimelinePanel } from "./timeline-panel";
 import { ToolbarPanel } from "./toolbar-panel";
+import { useToolcraft } from "./use-toolcraft";
 
 export type ToolcraftAppProps = {
   canvasContent?: React.ReactNode;
@@ -30,52 +31,70 @@ function cn(...classNames: Array<string | false | null | undefined>): string {
   return classNames.filter(Boolean).join(" ");
 }
 
-export function ToolcraftApp({
+function ToolcraftAppContent({
   canvasContent,
   className,
   controlRenderers,
   onPanelAction,
   renderDefaultCanvasMedia = true,
-  schema,
   style,
-}: ToolcraftAppProps): React.JSX.Element {
-  const surfaces = schema.assembly.surfaces;
+}: Omit<ToolcraftAppProps, "schema">): React.JSX.Element {
+  const { state } = useToolcraft();
+  const surfaces = state.schema.assembly.surfaces;
+  const timelinePanelHidden = state.panels.timeline.hidden === true;
+  const timelinePanelVariant =
+    state.panels.timeline.extended === true ? "extended" : "compact";
+
+  return (
+    <div
+      className={cn(
+        "relative min-h-[640px] w-full overflow-hidden bg-[color:var(--background)]",
+        className,
+      )}
+      data-slot="toolcraft-runtime-app"
+      style={{
+        ...style,
+        minWidth: toolcraftMinAppWidthPx,
+      }}
+    >
+      {surfaces.canvas.enabled ? (
+        <CanvasShell renderDefaultMedia={renderDefaultCanvasMedia}>
+          {canvasContent}
+        </CanvasShell>
+      ) : null}
+      {surfaces.panels.layers?.enabled ? (
+        <LayersPanel panelPlacement="floating" />
+      ) : null}
+      {surfaces.panels.controls?.enabled ? (
+        <ControlsPanel
+          controlRenderers={controlRenderers}
+          onPanelAction={onPanelAction}
+          panelPlacement="floating"
+        />
+      ) : null}
+      {surfaces.panels.timeline?.enabled ? (
+        <div
+          data-toolcraft-timeline-panel-hidden={timelinePanelHidden ? "true" : undefined}
+          data-toolcraft-timeline-panel-variant={timelinePanelVariant}
+          hidden={timelinePanelHidden}
+        >
+          <TimelinePanel panelPlacement="floating" variant={timelinePanelVariant} />
+        </div>
+      ) : null}
+      {surfaces.panels.toolbar.enabled ? (
+        <ToolbarPanel panelPlacement="floating" />
+      ) : null}
+    </div>
+  );
+}
 
+export function ToolcraftApp({
+  schema,
+  ...props
+}: ToolcraftAppProps): React.JSX.Element {
   return (
     <ToolcraftRoot schema={schema}>
-      <div
-        className={cn(
-          "relative min-h-[640px] w-full overflow-hidden bg-[color:var(--background)]",
-          className,
-        )}
-        data-slot="toolcraft-runtime-app"
-        style={{
-          ...style,
-          minWidth: toolcraftMinAppWidthPx,
-        }}
-      >
-        {surfaces.canvas.enabled ? (
-          <CanvasShell renderDefaultMedia={renderDefaultCanvasMedia}>
-            {canvasContent}
-          </CanvasShell>
-        ) : null}
-        {surfaces.panels.layers?.enabled ? (
-          <LayersPanel panelPlacement="floating" />
-        ) : null}
-        {surfaces.panels.controls?.enabled ? (
-          <ControlsPanel
-            controlRenderers={controlRenderers}
-            onPanelAction={onPanelAction}
-            panelPlacement="floating"
-          />
-        ) : null}
-        {surfaces.panels.timeline?.enabled ? (
-          <TimelinePanel panelPlacement="floating" />
-        ) : null}
-        {surfaces.panels.toolbar.enabled ? (
-          <ToolbarPanel panelPlacement="floating" />
-        ) : null}
-      </div>
+      <ToolcraftAppContent {...props} />
     </ToolcraftRoot>
   );
 }