@pixel-point/toolcraft 0.0.14 → 0.0.15

package/templates/runtime/react/controls-panel/values/controls-panel-value-labels.ts

@@ -0,0 +1,93 @@
+import type { ToolcraftControlSchema } from "../../../schema/types";
+import { asCanvasAspectRatioValue } from "./controls-panel-aspect-ratio-values";
+import { asCollectionItems } from "./controls-panel-collection-values";
+import {
+  asColorOpacityValue,
+  asColorValue,
+  asGradientValue,
+} from "./controls-panel-color-values";
+import { asFontPickerValue } from "./controls-panel-font-values";
+import { asRangeInputValue, asVectorValue } from "./controls-panel-spatial-values";
+import {
+  asBoolean,
+  asNumber,
+  asNumberArray,
+  asString,
+  isRecord,
+} from "./controls-panel-value-primitives";
+
+export function formatControlValueLabel(
+  control: ToolcraftControlSchema,
+  value: unknown,
+): string {
+  if (typeof control.valueLabel === "string") {
+    return control.valueLabel;
+  }
+
+  switch (control.type) {
+    case "aspectRatio":
+      return asCanvasAspectRatioValue(value, control.defaultValue).value;
+    case "checkbox":
+    case "switch":
+      return asBoolean(value) ? "On" : "Off";
+    case "color":
+      return asColorValue(value).hex;
+    case "colorOpacity": {
+      const colorOpacityValue = asColorOpacityValue(value);
+
+      return `${colorOpacityValue.hex} ${colorOpacityValue.opacity}%`;
+    }
+    case "collectionActions":
+      return `${asCollectionItems(value, control.defaultValue).length} items`;
+    case "fontPicker":
+      return asFontPickerValue(value).fontId;
+    case "gradient":
+      return `${asGradientValue(value).stops.length} stops`;
+    case "imagePicker":
+      return (
+        control.items?.find((item) => item.value === value)?.alt ??
+        asString(value)
+      );
+    case "palette": {
+      if (isRecord(value)) {
+        const family = asString(value.family);
+        const shade = asString(value.shade);
+
+        return [family, shade].filter(Boolean).join(" ") || "Palette";
+      }
+
+      return "Palette";
+    }
+    case "rangeInput": {
+      const rangeValue = asRangeInputValue(value);
+
+      return `${rangeValue.start} – ${rangeValue.end}`;
+    }
+    case "rangeSlider": {
+      const rangeValue = asNumberArray(value, []);
+
+      return rangeValue.length > 0
+        ? rangeValue.map((item) => `${item}${control.unit ?? ""}`).join(" – ")
+        : "Range";
+    }
+    case "select":
+    case "segmented":
+      return (
+        control.options?.find((option) => option.value === value)?.label ??
+        asString(value)
+      );
+    case "slider":
+      return `${asNumber(value, asNumber(control.defaultValue, control.min ?? 0))}${
+        control.unit ?? ""
+      }`;
+    case "vector": {
+      const vectorValue = asVectorValue(value);
+
+      return `${vectorValue.x}, ${vectorValue.y}`;
+    }
+    default:
+      return typeof value === "string" || typeof value === "number"
+        ? String(value)
+        : control.type;
+  }
+}

package/templates/runtime/react/controls-panel/values/controls-panel-value-primitives.ts

@@ -0,0 +1,30 @@
+export type AnyRecord = Record<string, unknown>;
+
+export function isRecord(value: unknown): value is AnyRecord {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export function asNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+export function asString(value: unknown, fallback = ""): string {
+  if (typeof value === "string") {
+    return value;
+  }
+
+  return typeof value === "number" && Number.isFinite(value) ? String(value) : fallback;
+}
+
+export function asBoolean(value: unknown, fallback = false): boolean {
+  return typeof value === "boolean" ? value : fallback;
+}
+
+export function asNumberArray(
+  value: unknown,
+  fallback: readonly number[],
+): readonly number[] {
+  return Array.isArray(value) && value.every((item) => typeof item === "number")
+    ? value
+    : fallback;
+}

package/templates/runtime/react/controls-panel/values/controls-panel-values.ts

@@ -0,0 +1,7 @@
+export * from "./controls-panel-aspect-ratio-values";
+export * from "./controls-panel-collection-values";
+export * from "./controls-panel-color-values";
+export * from "./controls-panel-font-values";
+export * from "./controls-panel-spatial-values";
+export * from "./controls-panel-value-labels";
+export * from "./controls-panel-value-primitives";

package/templates/runtime/react/index.ts

@@ -1,15 +1,15 @@
 "use client";
 
-export * from "./toolcraft-root";
-export * from "./toolcraft-app";
-export * from "./canvas-shell";
-export * from "./control-renderers";
-export * from "./controls-panel";
-export * from "./layers-panel";
-export * from "./panel-host";
-export * from "./panel-host-types";
-export * from "./settings-transfer";
-export * from "./timeline-panel";
-export * from "./theme-runtime";
-export * from "./toolbar-panel";
-export * from "./use-toolcraft";
+export * from "./app-shell/toolcraft-root";
+export * from "./app-shell/toolcraft-app";
+export * from "./canvas/canvas-shell";
+export * from "./controls-panel/control-renderers";
+export * from "./controls-panel/controls-panel";
+export * from "./layers/layers-panel";
+export * from "./panel-host/panel-host";
+export * from "./panel-host/panel-host-types";
+export * from "./app-shell/settings-transfer";
+export * from "./timeline/timeline-panel";
+export * from "./app-shell/theme-runtime";
+export * from "./app-shell/toolbar-panel";
+export * from "./app-shell/use-toolcraft";

package/templates/runtime/react/{layer-tree.ts → layers/layer-tree.ts}

@@ -1,4 +1,4 @@
-import type { ToolcraftLayer } from "../state/types";
+import type { ToolcraftLayer } from "../../state/types";
 
 export function getToolcraftLayerById(
   layers: readonly ToolcraftLayer[],

package/templates/runtime/react/layers/layers-panel-drag-drop.test.tsx

@@ -0,0 +1,190 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+
+import type { ToolcraftLayer } from "../../state/types";
+import {
+  cleanupLayersPanelTestEnv,
+  installLayersPanelMatchMedia,
+  mockLayerRowRect,
+  renderLayersPanel,
+  seededLayers,
+} from "./layers-panel-test-utils";
+
+beforeAll(() => {
+  installLayersPanelMatchMedia();
+});
+
+afterEach(() => {
+  cleanupLayersPanelTestEnv();
+});
+
+describe("LayersPanel drag and drop", () => {
+  it("drags layers into groups and keeps the moved layer under the group", () => {
+    const { container } = renderLayersPanel();
+    const groupRow = container.querySelector<HTMLElement>('[data-layer-id="group-1"]');
+    const layerRow = container.querySelector<HTMLElement>('[data-layer-id="layer-2"]');
+
+    expect(groupRow).toBeTruthy();
+    expect(layerRow).toBeTruthy();
+
+    mockLayerRowRect(groupRow as HTMLElement);
+    Object.defineProperty(document, "elementFromPoint", {
+      configurable: true,
+      value: vi.fn(() => groupRow),
+    });
+
+    fireEvent.pointerDown(layerRow as HTMLElement, {
+      button: 0,
+      clientX: 0,
+      clientY: 0,
+      pointerId: 1,
+    });
+    fireEvent.pointerMove(layerRow as HTMLElement, {
+      clientX: 12,
+      clientY: 16,
+      pointerId: 1,
+    });
+    fireEvent.pointerUp(layerRow as HTMLElement, { pointerId: 1 });
+
+    expect(screen.getByTestId("layer-tree").textContent).toBe(
+      "group-1:root|layer-2:group-1|layer-1:group-1",
+    );
+  });
+
+  it("opens closed groups after dropping a layer into them", () => {
+    const collapsedLayers = [
+      { ...seededLayers[0]!, collapsed: true },
+      seededLayers[1]!,
+      seededLayers[2]!,
+    ];
+    const { container } = renderLayersPanel({}, collapsedLayers);
+    const groupRow = container.querySelector<HTMLElement>('[data-layer-id="group-1"]');
+    const layerRow = container.querySelector<HTMLElement>('[data-layer-id="layer-2"]');
+
+    expect(groupRow).toBeTruthy();
+    expect(layerRow).toBeTruthy();
+    expect(screen.queryByText("Layer 1")).toBeNull();
+
+    mockLayerRowRect(groupRow as HTMLElement);
+    Object.defineProperty(document, "elementFromPoint", {
+      configurable: true,
+      value: vi.fn(() => groupRow),
+    });
+
+    fireEvent.pointerDown(layerRow as HTMLElement, {
+      button: 0,
+      clientX: 0,
+      clientY: 0,
+      pointerId: 1,
+    });
+    fireEvent.pointerMove(layerRow as HTMLElement, {
+      clientX: 12,
+      clientY: 16,
+      pointerId: 1,
+    });
+    fireEvent.pointerUp(layerRow as HTMLElement, { pointerId: 1 });
+
+    expect(screen.getByTestId("group-collapsed").textContent).toBe("false");
+    expect(screen.getByTestId("layer-tree").textContent).toBe(
+      "group-1:root|layer-2:group-1|layer-1:group-1",
+    );
+    expect(screen.getByText("Layer 1")).toBeTruthy();
+  });
+
+  it("highlights group targets and suppresses ordinary row hover during drag", () => {
+    const layers: ToolcraftLayer[] = [
+      ...seededLayers,
+      {
+        displayName: "Layer 3",
+        id: "layer-3",
+        kind: "layer",
+        name: "layer-3",
+        visible: true,
+      },
+    ];
+    const { container } = renderLayersPanel({}, layers);
+    const groupRow = container.querySelector<HTMLElement>('[data-layer-id="group-1"]');
+    const dragRow = container.querySelector<HTMLElement>('[data-layer-id="layer-2"]');
+    const idleRow = container.querySelector<HTMLElement>('[data-layer-id="layer-3"]');
+
+    expect(groupRow).toBeTruthy();
+    expect(dragRow).toBeTruthy();
+    expect(idleRow).toBeTruthy();
+
+    mockLayerRowRect(groupRow as HTMLElement);
+    Object.defineProperty(document, "elementFromPoint", {
+      configurable: true,
+      value: vi.fn(() => groupRow),
+    });
+
+    fireEvent.pointerDown(dragRow as HTMLElement, {
+      button: 0,
+      clientX: 0,
+      clientY: 0,
+      pointerId: 1,
+    });
+    fireEvent.pointerMove(dragRow as HTMLElement, {
+      clientX: 12,
+      clientY: 16,
+      pointerId: 1,
+    });
+
+    const groupSurface = groupRow?.querySelector<HTMLElement>('[data-layer-row-surface]');
+    const idleSurface = idleRow?.querySelector<HTMLElement>('[data-layer-row-surface]');
+    const idleActions = idleRow?.querySelector<HTMLElement>("[data-layer-actions]");
+
+    expect(groupSurface?.className).toContain("border-[color:var(--accent)]");
+    expect(groupRow?.dataset.dropTarget).toBe("true");
+    expect(groupRow?.dataset.reorderDragging).toBe("true");
+    expect(idleRow?.dataset.reorderDragging).toBe("true");
+    expect(groupSurface?.className).toContain(
+      "bg-[color:color-mix(in_oklab,var(--accent)_15%,transparent)]",
+    );
+    expect(idleSurface?.className).not.toContain("hover:bg");
+    expect(idleActions?.className).not.toContain("group-hover/layer");
+  });
+
+  it("uses pointer depth to drag layers out of nested groups", () => {
+    const nestedLayers = [
+      seededLayers[0],
+      seededLayers[1],
+      { ...seededLayers[2], parentGroupId: "group-1" },
+      {
+        displayName: "Layer 3",
+        id: "layer-3",
+        kind: "layer" as const,
+        name: "layer-3",
+        visible: true,
+      },
+    ];
+    const { container } = renderLayersPanel({}, nestedLayers);
+    const sourceRow = container.querySelector<HTMLElement>('[data-layer-id="layer-1"]');
+    const targetRow = container.querySelector<HTMLElement>('[data-layer-id="layer-2"]');
+
+    expect(sourceRow).toBeTruthy();
+    expect(targetRow).toBeTruthy();
+
+    mockLayerRowRect(targetRow as HTMLElement, 32);
+    Object.defineProperty(document, "elementFromPoint", {
+      configurable: true,
+      value: vi.fn(() => targetRow),
+    });
+
+    fireEvent.pointerDown(sourceRow as HTMLElement, {
+      button: 0,
+      clientX: 40,
+      clientY: 16,
+      pointerId: 1,
+    });
+    fireEvent.pointerMove(sourceRow as HTMLElement, {
+      clientX: 0,
+      clientY: 60,
+      pointerId: 1,
+    });
+    fireEvent.pointerUp(sourceRow as HTMLElement, { pointerId: 1 });
+
+    expect(screen.getByTestId("layer-tree").textContent).toBe(
+      "group-1:root|layer-2:group-1|layer-1:root|layer-3:root",
+    );
+  });
+});

package/templates/runtime/react/layers/layers-panel-editing.test.tsx

@@ -0,0 +1,41 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+
+import {
+  cleanupLayersPanelTestEnv,
+  installLayersPanelMatchMedia,
+  renderLayersPanel,
+} from "./layers-panel-test-utils";
+
+beforeAll(() => {
+  installLayersPanelMatchMedia();
+});
+
+afterEach(() => {
+  cleanupLayersPanelTestEnv();
+});
+
+describe("LayersPanel editing", () => {
+  it("renames layers on double click", () => {
+    renderLayersPanel();
+
+    fireEvent.doubleClick(screen.getByRole("option", { name: "Layer 1" }));
+    const input = screen.getByLabelText("Layer name for Layer 1");
+
+    fireEvent.change(input, { target: { value: "Updated Layer" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    expect(screen.getByText("Updated Layer")).toBeTruthy();
+  });
+
+  it("adds and deletes layers", () => {
+    renderLayersPanel({ groupCreation: false });
+
+    fireEvent.click(screen.getByRole("button", { name: "Add layer" }));
+    expect(screen.getByTestId("layer-count").textContent).toBe("4");
+    expect(screen.getByText("Layer 3")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Delete Layer 3" }));
+    expect(screen.getByTestId("layer-count").textContent).toBe("3");
+  });
+});

package/templates/runtime/react/layers/layers-panel-insert-targets.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from "vitest";
+
+import type { ToolcraftLayer } from "../../state/types";
+import {
+  getLayerInsertIndicatorTarget,
+  getNearestLayerInsertTarget,
+} from "./layers-panel-insert-targets";
+
+const nestedLayers: ToolcraftLayer[] = [
+  {
+    collapsed: false,
+    displayName: "Group",
+    id: "group-1",
+    kind: "group",
+    name: "group-1",
+    visible: true,
+  },
+  {
+    displayName: "Layer 1",
+    id: "layer-1",
+    kind: "layer",
+    name: "layer-1",
+    parentGroupId: "group-1",
+    visible: true,
+  },
+  {
+    displayName: "Layer 2",
+    id: "layer-2",
+    kind: "layer",
+    name: "layer-2",
+    parentGroupId: "group-1",
+    visible: true,
+  },
+  {
+    displayName: "Layer 3",
+    id: "layer-3",
+    kind: "layer",
+    name: "layer-3",
+    visible: true,
+  },
+];
+
+describe("layers-panel insert targets", () => {
+  it("moves a nested layer outside its parent group when pointer depth is shallower", () => {
+    const target = getNearestLayerInsertTarget({
+      clientX: 0,
+      dropRatio: 0.75,
+      layer: nestedLayers[2]!,
+      layers: nestedLayers,
+      listLeft: 0,
+      visibleLayers: nestedLayers,
+    });
+
+    expect(target).toEqual({
+      layerId: "layer-3",
+      placement: "before",
+    });
+  });
+
+  it("keeps a nested after-target inside its parent group when pointer depth is nested", () => {
+    const target = getNearestLayerInsertTarget({
+      clientX: 40,
+      dropRatio: 0.75,
+      layer: nestedLayers[2]!,
+      layers: nestedLayers,
+      listLeft: 0,
+      visibleLayers: nestedLayers,
+    });
+
+    expect(target).toEqual({
+      layerId: "layer-2",
+      placement: "after",
+    });
+  });
+
+  it("draws before-child insert indicators after the parent group row", () => {
+    const target = getLayerInsertIndicatorTarget({
+      target: { layerId: "layer-1", placement: "before" },
+      visibleLayers: nestedLayers,
+    });
+
+    expect(target).toEqual({
+      layerId: "group-1",
+      placement: "after",
+    });
+  });
+});