@pixel-point/toolcraft 0.0.14 → 0.0.15

package/templates/runtime/react/controls-panel/testing/controls-panel-test-utils.tsx

@@ -0,0 +1,300 @@
+import { act, cleanup, createEvent, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { FileDrop, Panel } from "@repo/ui";
+import {
+  DEFAULT_COLOR_FORMAT_MODE,
+  getColorSurfaceModel,
+  getColorSurfaceSliderConfig,
+  getColorSurfaceStyle,
+  getColorSurfaceThumbPosition,
+  getSurfaceHsvColor,
+  StyleGuideColorPicker,
+} from "@repo/ui/controls";
+import * as React from "react";
+import { afterEach, beforeAll, vi } from "vitest";
+
+import { defineToolcraft } from "../../../schema/define-toolcraft";
+import type { ResolvedToolcraftAppSchema } from "../../../schema/types";
+import type { ToolcraftInitialState } from "../../../state/types";
+import { CanvasShell } from "../../canvas/canvas-shell";
+import { ControlsPanel } from "../controls-panel";
+import { ToolcraftRoot } from "../../app-shell/toolcraft-root";
+import { useToolcraft } from "../../app-shell/use-toolcraft";
+
+export {
+  act,
+  CanvasShell,
+  cleanup,
+  ControlsPanel,
+  createEvent,
+  DEFAULT_COLOR_FORMAT_MODE,
+  defineToolcraft,
+  FileDrop,
+  fireEvent,
+  getColorSurfaceModel,
+  getColorSurfaceSliderConfig,
+  getColorSurfaceStyle,
+  getColorSurfaceThumbPosition,
+  getSurfaceHsvColor,
+  Panel,
+  React,
+  render,
+  screen,
+  StyleGuideColorPicker,
+  ToolcraftRoot,
+  vi,
+  waitFor,
+};
+
+beforeAll(() => {
+  Object.defineProperty(window, "matchMedia", {
+    value: (query: string) => ({
+      addEventListener: () => undefined,
+      addListener: () => undefined,
+      dispatchEvent: () => false,
+      matches: query === "(prefers-reduced-motion: reduce)",
+      media: query,
+      onchange: null,
+      removeEventListener: () => undefined,
+      removeListener: () => undefined,
+    }),
+    writable: true,
+  });
+
+  window.requestAnimationFrame ??= ((callback: FrameRequestCallback) =>
+    window.setTimeout(() => callback(performance.now()), 0)) as typeof window.requestAnimationFrame;
+  window.cancelAnimationFrame ??= ((handle: number) =>
+    window.clearTimeout(handle)) as typeof window.cancelAnimationFrame;
+});
+
+afterEach(() => {
+  cleanup();
+  window.localStorage.clear();
+});
+
+export function createSchema() {
+  return defineToolcraft({
+    canvas: { enabled: true, size: { height: 180, unit: "px", width: 320 } },
+    panels: {
+      controls: {
+        sections: [
+          {
+            controls: {
+              prompt: {
+                defaultValue: "Initial prompt",
+                description: "Describe the generated result.",
+                label: "Prompt",
+                target: "generation.prompt",
+                type: "text",
+              },
+              opacity: {
+                defaultValue: 75,
+                label: "Opacity",
+                max: 100,
+                min: 0,
+                target: "selectedLayer.opacity",
+                type: "slider",
+                unit: "%",
+              },
+              staticOpacity: {
+                defaultValue: 40,
+                keyframeable: false,
+                label: "Static opacity",
+                max: 100,
+                min: 0,
+                target: "style.staticOpacity",
+                type: "slider",
+                unit: "%",
+              },
+              blend: {
+                defaultValue: "normal",
+                label: "Blend",
+                options: [
+                  { label: "Normal", value: "normal" },
+                  { label: "Screen", value: "screen" },
+                ],
+                target: "style.blend",
+                type: "segmented",
+              },
+              enabled: {
+                defaultValue: true,
+                label: "Enabled",
+                target: "generation.enabled",
+                type: "switch",
+              },
+            },
+            title: "Basic",
+          },
+          {
+            controls: {
+              anchor: {
+                defaultValue: "center",
+                label: "Anchor",
+                target: "generation.anchor",
+                type: "anchorGrid",
+              },
+            },
+            layout: "standalone",
+          },
+          {
+            controls: {
+              image: {
+                defaultValue: "image-1",
+                items: [
+                  {
+                    alt: "Image 1",
+                    src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'/%3E",
+                    value: "image-1",
+                  },
+                  {
+                    alt: "Image 2",
+                    src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'/%3E",
+                    value: "image-2",
+                  },
+                ],
+                label: "Image",
+                target: "input.image",
+                type: "imagePicker",
+              },
+            },
+            layout: "standalone",
+          },
+          {
+            controls: {
+              outputMix: {
+                label: "Output Mix",
+                target: "style.outputMix",
+                type: "channelMixer",
+              },
+            },
+            layout: "standalone",
+            title: "Output Mix",
+          },
+          {
+            controls: {
+              curves: {
+                label: false,
+                target: "style.curves",
+                type: "curves",
+              },
+            },
+            layout: "standalone",
+          },
+          {
+            controls: {
+              fill: {
+                defaultValue: { hex: "#C1FF00" },
+                label: "Fill",
+                target: "style.fill",
+                type: "color",
+              },
+              stroke: {
+                defaultValue: { hex: "#FF6A00" },
+                label: "Stroke",
+                target: "style.stroke",
+                type: "color",
+              },
+            },
+            layout: "standalone",
+          },
+          {
+            actionGroup: "secondary",
+            controls: {
+              footer: {
+                actions: [
+                  {
+                    command: "controls.reset",
+                    label: "Reset",
+                    value: "reset",
+                    variant: "outline",
+                  },
+                  {
+                    command: "controls.apply",
+                    label: "Apply",
+                    value: "apply",
+                    variant: "default",
+                  },
+                ],
+                target: "panel.actions",
+                type: "panelActions",
+              },
+            },
+            layout: "standalone",
+          },
+        ],
+        title: "Generation Controls",
+      },
+      timeline: true,
+    },
+  });
+}
+
+export function StateProbe() {
+  const { dispatch, state } = useToolcraft();
+
+  return (
+    <>
+      <button
+        onClick={() => dispatch({ expanded: true, type: "timeline.setExpanded" })}
+        type="button"
+      >
+        Expand timeline
+      </button>
+      <span data-testid="prompt-value">{String(state.values["generation.prompt"])}</span>
+      <span data-testid="enabled-value">{String(state.values["generation.enabled"])}</span>
+      <span data-testid="image-value">{String(state.values["input.image"])}</span>
+      <span data-testid="font-value">
+        {JSON.stringify(state.values["typography.font"])}
+      </span>
+      <span data-testid="text-color-value">
+        {JSON.stringify(state.values["text.color"])}
+      </span>
+      <span data-testid="gradient-value">
+        {JSON.stringify(state.values["style.gradient"])}
+      </span>
+      <span data-testid="canvas-size">
+        {state.canvas.size.width},{state.canvas.size.height}
+      </span>
+      <span data-testid="media-count">{state.mediaAssets.length}</span>
+      <span data-testid="media-ids">
+        {state.mediaAssets.map((asset) => asset.id).join(",")}
+      </span>
+      <span data-testid="media-sizes">
+        {state.mediaAssets
+          .map((asset) =>
+            asset.size ? `${asset.size.width}x${asset.size.height}` : "none",
+          )
+          .join(",")}
+      </span>
+      <span data-testid="media-transforms">
+        {JSON.stringify(state.mediaAssets.map((asset) => asset.transform ?? null))}
+      </span>
+      <span data-testid="timeline-expanded">{String(state.timeline.expanded)}</span>
+      <span data-testid="timeline-panel-extended">{String(state.panels.timeline.extended)}</span>
+      <span data-testid="timeline-panel-hidden">{String(state.panels.timeline.hidden)}</span>
+      <span data-testid="timeline-keyframes">
+        {JSON.stringify(state.timeline.keyframeGroups)}
+      </span>
+      <span data-testid="values-json">{JSON.stringify(state.values)}</span>
+    </>
+  );
+}
+
+export function renderControlsPanel(
+  props: Partial<React.ComponentProps<typeof ControlsPanel>> = {},
+  initialState?: ToolcraftInitialState,
+) {
+  return renderControlsPanelWithSchema(createSchema(), props, initialState);
+}
+
+export function renderControlsPanelWithSchema(
+  schema: ResolvedToolcraftAppSchema,
+  props: Partial<React.ComponentProps<typeof ControlsPanel>> = {},
+  initialState?: ToolcraftInitialState,
+) {
+  return render(
+    <ToolcraftRoot initialState={initialState} schema={schema}>
+      <ControlsPanel framed={false} {...props} />
+      <StateProbe />
+    </ToolcraftRoot>,
+  );
+}

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

@@ -0,0 +1,94 @@
+import { getToolcraftCanvasAspectRatioPreset } from "../../../schema/canvas-aspect-ratio-presets";
+import {
+  asNumber,
+  isRecord,
+} from "./controls-panel-value-primitives";
+
+export type CanvasAspectRatioValue = {
+  height: number;
+  mode: "custom" | "preset";
+  value: string;
+  width: number;
+};
+
+export function parseCanvasAspectRatioOption(
+  value: string,
+): CanvasAspectRatioValue | null {
+  const preset = getToolcraftCanvasAspectRatioPreset(value);
+
+  if (preset) {
+    return {
+      height: preset.ratioHeight,
+      mode: "preset",
+      value: preset.value,
+      width: preset.ratioWidth,
+    };
+  }
+
+  const match = /^\s*(\d+(?:\.\d+)?)\s*:\s*(\d+(?:\.\d+)?)\s*$/u.exec(value);
+
+  if (!match) {
+    return null;
+  }
+
+  const width = Number.parseFloat(match[1] ?? "");
+  const height = Number.parseFloat(match[2] ?? "");
+
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+    return null;
+  }
+
+  return {
+    height: Math.round(height),
+    mode: "custom",
+    value: `${Math.round(width)}:${Math.round(height)}`,
+    width: Math.round(width),
+  };
+}
+
+export function asCanvasAspectRatioValue(
+  value: unknown,
+  fallback: unknown,
+): CanvasAspectRatioValue {
+  if (isRecord(value)) {
+    const width = asNumber(value.width, NaN);
+    const height = asNumber(value.height, NaN);
+    const mode = value.mode === "preset" ? "preset" : "custom";
+
+    if (Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0) {
+      return {
+        height: Math.round(height),
+        mode,
+        value:
+          typeof value.value === "string"
+            ? value.value
+            : `${Math.round(width)}:${Math.round(height)}`,
+        width: Math.round(width),
+      };
+    }
+  }
+
+  if (typeof value === "string") {
+    const parsed = parseCanvasAspectRatioOption(value);
+
+    if (parsed) {
+      return parsed;
+    }
+  }
+
+  if (fallback !== value) {
+    return asCanvasAspectRatioValue(fallback, {
+      height: 1,
+      mode: "preset",
+      value: "1:1",
+      width: 1,
+    });
+  }
+
+  return {
+    height: 1,
+    mode: "preset",
+    value: "1:1",
+    width: 1,
+  };
+}

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

@@ -0,0 +1,87 @@
+import type { ToolcraftControlSchema } from "../../../schema/types";
+import { asFontPickerValue } from "./controls-panel-font-values";
+import { asNumber } from "./controls-panel-value-primitives";
+
+export function asCollectionItems(value: unknown, fallback: unknown): unknown[] {
+  if (Array.isArray(value)) {
+    return [...value];
+  }
+
+  return Array.isArray(fallback) ? [...fallback] : [];
+}
+
+export function getCollectionMinItems(control: ToolcraftControlSchema): number {
+  return Math.max(0, Math.floor(asNumber(control.minItems, 0)));
+}
+
+export function getCollectionHardMaxItems(
+  control: ToolcraftControlSchema,
+): number | null {
+  if (typeof control.hardMaxItems !== "number" || !Number.isFinite(control.hardMaxItems)) {
+    return null;
+  }
+
+  return Math.max(0, Math.floor(control.hardMaxItems));
+}
+
+export function getCollectionItemType(control: ToolcraftControlSchema): string {
+  return control.itemControl?.type ?? "color";
+}
+
+export function getCollectionItemBaseLabel(control: ToolcraftControlSchema): string {
+  if (control.itemLabel) {
+    return control.itemLabel;
+  }
+
+  const label = control.itemControl?.label;
+
+  return typeof label === "string" ? label : "Item";
+}
+
+export function getCollectionItemName(
+  control: ToolcraftControlSchema,
+  index: number,
+): string {
+  const label = control.itemControl?.label;
+
+  if (label === false) {
+    return "";
+  }
+
+  return `${getCollectionItemBaseLabel(control)} ${index + 1}`;
+}
+
+export function getCollectionItemDefaultValue(
+  control: ToolcraftControlSchema,
+): unknown {
+  if ("itemDefaultValue" in control) {
+    return control.itemDefaultValue;
+  }
+
+  if (typeof control.itemControl?.defaultValue !== "undefined") {
+    return control.itemControl.defaultValue;
+  }
+
+  switch (getCollectionItemType(control)) {
+    case "color":
+      return { hex: "#C1FF00" };
+    case "colorOpacity":
+      return { hex: "#C1FF00", opacity: 100 };
+    case "fontPicker":
+      return asFontPickerValue(control.itemControl?.defaultValue);
+    case "checkbox":
+    case "switch":
+      return false;
+    case "rangeInput":
+      return { end: "100%", start: "0%" };
+    case "select":
+    case "segmented":
+      return control.itemControl?.options?.[0]?.value ?? "";
+    case "slider":
+      return control.itemControl?.min ?? 0;
+    case "text":
+      return "";
+    default:
+      return "";
+  }
+}

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

@@ -0,0 +1,82 @@
+import type {
+  ChannelMixerValues,
+  ColorOpacityValue,
+  GradientStop,
+  GradientType,
+} from "@repo/ui";
+
+import {
+  asNumber,
+  asString,
+  isRecord,
+} from "./controls-panel-value-primitives";
+
+const defaultGradientStops = [
+  { color: "#FFFFFF", position: "0%" },
+  { color: "#7CFF3A", position: "46%" },
+  { color: "#111111", position: "100%" },
+] as const satisfies readonly GradientStop[];
+
+export const defaultChannelMixerValues = {
+  B: { B: 100, G: 0, R: 0 },
+  G: { B: 0, G: 100, R: 0 },
+  R: { B: 0, G: 0, R: 100 },
+} satisfies ChannelMixerValues;
+
+export function asColorValue(value: unknown): { hex: string } {
+  if (typeof value === "string") {
+    return { hex: value };
+  }
+
+  if (isRecord(value)) {
+    return { hex: asString(value.hex, "#C1FF00") };
+  }
+
+  return { hex: "#C1FF00" };
+}
+
+export function asColorOpacityValue(value: unknown): ColorOpacityValue {
+  if (typeof value === "string") {
+    return { hex: value, opacity: 100 };
+  }
+
+  if (isRecord(value)) {
+    return {
+      hex: asString(value.hex, "#C1FF00"),
+      opacity: Math.min(100, Math.max(0, Math.round(asNumber(value.opacity, 100)))),
+    };
+  }
+
+  return { hex: "#C1FF00", opacity: 100 };
+}
+
+function asGradientType(value: unknown): GradientType {
+  return value === "linear" ||
+    value === "radial" ||
+    value === "angular" ||
+    value === "diamond"
+    ? value
+    : "linear";
+}
+
+export function asGradientValue(value: unknown): {
+  angle: number;
+  gradientType: GradientType;
+  stops: readonly GradientStop[];
+} {
+  if (isRecord(value)) {
+    return {
+      angle: asNumber(value.angle, 90),
+      gradientType: asGradientType(value.gradientType),
+      stops: Array.isArray(value.stops)
+        ? (value.stops as readonly GradientStop[])
+        : defaultGradientStops,
+    };
+  }
+
+  return {
+    angle: 90,
+    gradientType: "linear",
+    stops: defaultGradientStops,
+  };
+}

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

@@ -0,0 +1,69 @@
+import type { FontPickerValue } from "@repo/ui";
+
+import {
+  asNumber,
+  asString,
+  isRecord,
+} from "./controls-panel-value-primitives";
+
+export function asFontPickerValue(value: unknown): FontPickerValue {
+  if (typeof value === "string") {
+    return {
+      color: "#FFFFFF",
+      fontId: value,
+      fontSize: 16,
+      fontWeight: "400",
+      letterSpacing: "normal",
+      lineHeight: "normal",
+      opacity: 100,
+      textCase: "original",
+    };
+  }
+
+  if (isRecord(value)) {
+    return {
+      color: asString(value.color, "#FFFFFF"),
+      fontId: asString(value.fontId, "inter"),
+      fontSize: asNumber(value.fontSize, 16),
+      fontWeight: asString(value.fontWeight, "400"),
+      letterSpacing:
+        value.letterSpacing === "tighter" ||
+        value.letterSpacing === "tight" ||
+        value.letterSpacing === "normal" ||
+        value.letterSpacing === "wide" ||
+        value.letterSpacing === "wider" ||
+        value.letterSpacing === "widest"
+          ? value.letterSpacing
+          : "normal",
+      lineHeight:
+        value.lineHeight === "none" ||
+        value.lineHeight === "tight" ||
+        value.lineHeight === "snug" ||
+        value.lineHeight === "normal" ||
+        value.lineHeight === "relaxed" ||
+        value.lineHeight === "loose"
+          ? value.lineHeight
+          : "normal",
+      opacity: Math.min(100, Math.max(0, Math.round(asNumber(value.opacity, 100)))),
+      textCase:
+        value.textCase === "original" ||
+        value.textCase === "uppercase" ||
+        value.textCase === "lowercase" ||
+        value.textCase === "capitalize" ||
+        value.textCase === "titleCase"
+          ? value.textCase
+          : "original",
+    };
+  }
+
+  return {
+    color: "#FFFFFF",
+    fontId: "inter",
+    fontSize: 16,
+    fontWeight: "400",
+    letterSpacing: "normal",
+    lineHeight: "normal",
+    opacity: 100,
+    textCase: "original",
+  };
+}

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

@@ -0,0 +1,64 @@
+import type {
+  CurveInterpolation,
+  VectorPadCoordinateMode,
+  VectorPadVariant,
+} from "@repo/ui";
+
+import {
+  asString,
+  isRecord,
+} from "./controls-panel-value-primitives";
+
+export function asRangeInputValue(value: unknown): { end: string; start: string } {
+  if (isRecord(value)) {
+    return {
+      end: asString(value.end, "100%"),
+      start: asString(value.start, "0%"),
+    };
+  }
+
+  return { end: "100%", start: "0%" };
+}
+
+export function asVectorValue(value: unknown): { x: string; y: string } {
+  if (isRecord(value)) {
+    return {
+      x: asString(value.x, "0.00"),
+      y: asString(value.y, "0.00"),
+    };
+  }
+
+  return { x: "0.00", y: "0.00" };
+}
+
+export function asVectorPadVariant(
+  value: string | undefined,
+): VectorPadVariant {
+  if (
+    value === "whiteBalance" ||
+    value === "colorBalance" ||
+    value === "chromaOffset" ||
+    value === "toneBias"
+  ) {
+    return value;
+  }
+
+  return "default";
+}
+
+export function asVectorPadCoordinateMode(
+  value: string | undefined,
+  padVariant: VectorPadVariant,
+): VectorPadCoordinateMode {
+  if (value === "cartesian" || value === "screen") {
+    return value;
+  }
+
+  return padVariant === "default" ? "screen" : "cartesian";
+}
+
+export function asCurveInterpolation(
+  value: string | undefined,
+): CurveInterpolation | undefined {
+  return value === "monotone" || value === "smooth" ? value : undefined;
+}