@pixel-point/toolcraft 0.0.13 → 0.0.15

package/templates/runtime/react/controls-panel/renderers/controls-panel-compound-renderers.tsx

@@ -0,0 +1,366 @@
+"use client";
+
+import * as React from "react";
+import {
+  ChannelMixer,
+  Color,
+  ColorOpacity,
+  Curves,
+  FontPicker,
+  Gradient,
+  ImagePicker,
+  Palette,
+  type ChannelMixerValues,
+  type ColorControlInput,
+  type ColorControlInputPair,
+  type ControlChangeMeta,
+  type ImagePickerItem,
+} from "@repo/ui";
+
+import type { ToolcraftControlSchema } from "../../../schema/types";
+import {
+  asColorOpacityValue,
+  asColorValue,
+  asCurveInterpolation,
+  asFontPickerValue,
+  asGradientValue,
+  asString,
+  defaultChannelMixerValues,
+  isRecord,
+} from "../values/controls-panel-values";
+
+export type CompoundControlCommit = (
+  nextValue: unknown,
+  meta?: ControlChangeMeta,
+) => void;
+
+export type CompoundControlCommitWithLabel = (
+  label: string,
+) => CompoundControlCommit;
+
+export type CompoundControlKeyframeWrap = (args: {
+  children: React.ReactNode;
+  control: ToolcraftControlSchema;
+  disableAction: boolean;
+  labelActionName?: string;
+  name: string;
+  providerKey: string;
+  value: unknown;
+}) => React.ReactNode;
+
+export type CompoundShouldShowColorFieldLabel = (args: {
+  control: ToolcraftControlSchema;
+  sectionHasOnlyColorFields: boolean;
+}) => boolean;
+
+export type CompoundControlRenderArgs = {
+  commit: CompoundControlCommit;
+  commitWithLabel: CompoundControlCommitWithLabel;
+  control: ToolcraftControlSchema;
+  id: string;
+  name: string;
+  sectionHasOnlyColorFields: boolean;
+  shouldShowColorFieldLabel: CompoundShouldShowColorFieldLabel;
+  usesHeaderKeyframeAction: boolean;
+  value: unknown;
+  withKeyframeLabelAction: CompoundControlKeyframeWrap;
+};
+
+export type CompoundColorGroupRenderArgs = {
+  entries: readonly [id: string, control: ToolcraftControlSchema][];
+  getControlName: (
+    id: string,
+    label: ToolcraftControlSchema["label"],
+  ) => string;
+  getControlValue: (control: ToolcraftControlSchema) => unknown;
+  headerKeyframeTarget: string | null;
+  maybeUpsertControlKeyframe: (
+    control: ToolcraftControlSchema,
+    label: string,
+    value: unknown,
+  ) => void;
+  sectionHasOnlyColorFields: boolean;
+  setControlValue: (
+    target: string,
+    value: unknown,
+    label?: string,
+    meta?: ControlChangeMeta,
+  ) => void;
+  shouldShowColorFieldLabel: CompoundShouldShowColorFieldLabel;
+  withKeyframeLabelAction: CompoundControlKeyframeWrap;
+};
+
+export function renderCompoundColorGroup({
+  entries,
+  getControlName,
+  getControlValue,
+  headerKeyframeTarget,
+  maybeUpsertControlKeyframe,
+  sectionHasOnlyColorFields,
+  setControlValue,
+  shouldShowColorFieldLabel,
+  withKeyframeLabelAction,
+}: CompoundColorGroupRenderArgs): React.JSX.Element | null {
+  const colorInputs = entries.map(([id, control]) => {
+    const name = getControlName(id, control.label);
+    const value = getControlValue(control);
+    const colorValue = asColorValue(value);
+
+    return {
+      hex: colorValue.hex,
+      name,
+      onValueChange: (nextValue, meta) => {
+        setControlValue(control.target, nextValue, name, meta);
+        maybeUpsertControlKeyframe(control, name, nextValue);
+      },
+      showLabel: shouldShowColorFieldLabel({
+        control,
+        sectionHasOnlyColorFields,
+      }),
+    } satisfies ColorControlInput;
+  });
+  const [firstInput, secondInput] = colorInputs;
+
+  if (!firstInput) {
+    return null;
+  }
+
+  if (!secondInput) {
+    const firstEntry = entries[0];
+    const firstControl = firstEntry?.[1];
+    const firstValue = firstControl ? getControlValue(firstControl) : undefined;
+
+    return firstControl ? (
+      withKeyframeLabelAction({
+        children: (
+          <Color
+            hex={firstInput.hex}
+            key={firstInput.name}
+            name={firstInput.name}
+            onValueChange={firstInput.onValueChange}
+            showLabel={shouldShowColorFieldLabel({
+              control: firstControl,
+              sectionHasOnlyColorFields,
+            })}
+          />
+        ),
+        control: firstControl,
+        disableAction: firstControl.target === headerKeyframeTarget,
+        name: firstInput.name,
+        providerKey: firstInput.name,
+        value: firstValue,
+      }) as React.JSX.Element
+    ) : (
+      <Color
+        hex={firstInput.hex}
+        key={firstInput.name}
+        name={firstInput.name}
+        onValueChange={firstInput.onValueChange}
+        showLabel={firstInput.showLabel}
+      />
+    );
+  }
+
+  return (
+    <Color
+      inputs={[firstInput, secondInput] as ColorControlInputPair}
+      key={`${firstInput.name}-${secondInput.name}`}
+    />
+  );
+}
+
+export function renderCompoundControl({
+  commit,
+  commitWithLabel,
+  control,
+  id,
+  name,
+  sectionHasOnlyColorFields,
+  shouldShowColorFieldLabel,
+  usesHeaderKeyframeAction,
+  value,
+  withKeyframeLabelAction,
+}: CompoundControlRenderArgs): React.ReactNode | null {
+  switch (control.type) {
+    case "channelMixer": {
+      const channelMixerName = name;
+
+      return withKeyframeLabelAction({
+        children: (
+          <ChannelMixer
+            key={id}
+            name={channelMixerName}
+            onValueChange={(nextValue) =>
+              commitWithLabel(channelMixerName)(nextValue.values)
+            }
+            values={
+              isRecord(value) ? (value as ChannelMixerValues) : defaultChannelMixerValues
+            }
+          />
+        ),
+        control,
+        disableAction: false,
+        labelActionName: channelMixerName,
+        name,
+        providerKey: id,
+        value,
+      });
+    }
+
+    case "color": {
+      const colorValue = asColorValue(value);
+
+      return withKeyframeLabelAction({
+        children: (
+          <Color
+            hex={colorValue.hex}
+            key={id}
+            name={name}
+            onValueChange={commit}
+            showLabel={shouldShowColorFieldLabel({
+              control,
+              sectionHasOnlyColorFields,
+            })}
+          />
+        ),
+        control,
+        disableAction: usesHeaderKeyframeAction,
+        name,
+        providerKey: id,
+        value,
+      });
+    }
+
+    case "colorOpacity": {
+      const colorOpacityValue = asColorOpacityValue(value);
+
+      return withKeyframeLabelAction({
+        children: (
+          <ColorOpacity
+            hex={colorOpacityValue.hex}
+            key={id}
+            name={name}
+            onValueChange={commit}
+            opacity={colorOpacityValue.opacity}
+            showLabel={shouldShowColorFieldLabel({
+              control,
+              sectionHasOnlyColorFields,
+            })}
+          />
+        ),
+        control,
+        disableAction: usesHeaderKeyframeAction,
+        name,
+        providerKey: id,
+        value: colorOpacityValue,
+      });
+    }
+
+    case "curves": {
+      const curvesName = control.label === false ? "Curves" : name;
+
+      return withKeyframeLabelAction({
+        children: (
+          <Curves
+            interpolation={asCurveInterpolation(control.interpolation)}
+            key={id}
+            name={curvesName}
+            onValueChange={commitWithLabel(curvesName)}
+            variant={control.variant === "single" ? "single" : "rgb"}
+            {...(isRecord(value) ? value : {})}
+          />
+        ),
+        control,
+        disableAction: false,
+        labelActionName: curvesName,
+        name: curvesName,
+        providerKey: id,
+        value,
+      });
+    }
+
+    case "gradient": {
+      const gradientValue = asGradientValue(value);
+
+      return withKeyframeLabelAction({
+        children: (
+          <Gradient
+            angle={gradientValue.angle}
+            gradientType={gradientValue.gradientType}
+            key={id}
+            onValueChange={commit}
+            stops={gradientValue.stops}
+          />
+        ),
+        control,
+        disableAction: usesHeaderKeyframeAction,
+        name,
+        providerKey: id,
+        value,
+      });
+    }
+
+    case "fontPicker": {
+      const fontPickerValue = asFontPickerValue(value);
+
+      return withKeyframeLabelAction({
+        children: (
+          <FontPicker
+            defaultValue={asFontPickerValue(control.defaultValue)}
+            disabled={control.disabled}
+            key={id}
+            name={name}
+            onValueChange={commit}
+            value={fontPickerValue}
+          />
+        ),
+        control,
+        disableAction: usesHeaderKeyframeAction,
+        name,
+        providerKey: id,
+        value: fontPickerValue,
+      });
+    }
+
+    case "imagePicker":
+      return (
+        <ImagePicker
+          items={control.items as readonly ImagePickerItem[] | undefined}
+          key={id}
+          name={name}
+          onValueChange={commit}
+          value={asString(value, control.items?.[0]?.value ?? "")}
+        />
+      );
+
+    case "palette":
+      return withKeyframeLabelAction({
+        children: (
+          <Palette
+            defaultValue={
+              isRecord(control.defaultValue)
+                ? (control.defaultValue as React.ComponentProps<
+                    typeof Palette
+                  >["defaultValue"])
+                : undefined
+            }
+            key={id}
+            onValueChange={commit}
+            value={
+              isRecord(value)
+                ? (value as React.ComponentProps<typeof Palette>["value"])
+                : undefined
+            }
+          />
+        ),
+        control,
+        disableAction: usesHeaderKeyframeAction,
+        name,
+        providerKey: id,
+        value,
+      });
+
+    default:
+      return null;
+  }
+}

package/templates/runtime/react/controls-panel/renderers/controls-panel-media-renderer.tsx

@@ -0,0 +1,173 @@
+import * as React from "react";
+import { FileDrop, type FileDropPreview } from "@repo/ui";
+
+import type { ToolcraftCanvasSize, ToolcraftControlSchema } from "../../../schema/types";
+import type { ToolcraftCommand, ToolcraftMediaAsset } from "../../../state/types";
+import {
+  isToolcraftImageFile,
+  readImportedFile,
+  readImportedImageFile,
+} from "../../canvas/media-file";
+
+export type FileDropControlRenderArgs = {
+  canvasSize: ToolcraftCanvasSize;
+  control: ToolcraftControlSchema;
+  dispatchCommand: (command: ToolcraftCommand) => void;
+  id: string;
+  mediaAssets: readonly ToolcraftMediaAsset[];
+};
+
+export function renderFileDropControl({
+  canvasSize,
+  control,
+  dispatchCommand,
+  id,
+  mediaAssets,
+}: FileDropControlRenderArgs): React.ReactNode {
+  const assetKind = control.assetKind === "file" ? "file" : "image";
+  const previewMediaAssets = mediaAssets.filter(
+    (asset) =>
+      asset.sourceTarget === undefined || asset.sourceTarget === control.target,
+  );
+  const previewMediaAsset = previewMediaAssets[0];
+  const previews = previewMediaAssets.map((asset): FileDropPreview => ({
+    alt: asset.fileName,
+    assetKind: asset.assetKind ?? "image",
+    fileName: asset.fileName,
+    id: asset.id,
+    size: asset.size,
+    src: asset.dataUrl,
+    transform: asset.transform,
+  }));
+  const previewMediaIds = previewMediaAssets.map((asset) => asset.id);
+
+  const importFile = (file: File, replaceExisting: boolean): void => {
+    if (assetKind === "file") {
+      void readImportedFile(file).then((importedFile) => {
+        if (!importedFile) {
+          return;
+        }
+
+        dispatchCommand({
+          asset: {
+            assetKind: "file",
+            dataUrl: importedFile.dataUrl,
+            fileName: file.name,
+            mimeType: file.type || "application/octet-stream",
+            position: { x: 0, y: 0 },
+            sourceTarget: control.target,
+          },
+          replaceExisting,
+          type: "media.import",
+        });
+      });
+      return;
+    }
+
+    if (!isToolcraftImageFile(file)) {
+      return;
+    }
+
+    void readImportedImageFile(file, canvasSize).then((importedImage) => {
+      if (!importedImage) {
+        return;
+      }
+
+      dispatchCommand({
+        asset: {
+          assetKind: "image",
+          dataUrl: importedImage.dataUrl,
+          fileName: file.name,
+          mimeType: file.type || "image/*",
+          position: { x: 0, y: 0 },
+          size: importedImage.size,
+          sourceTarget: control.target,
+        },
+        replaceExisting,
+        type: "media.import",
+      });
+    });
+  };
+
+  return (
+    <FileDrop
+      accept={control.accept ?? (assetKind === "file" ? "" : "PNG, JPEG, GIF, SVG, WebP")}
+      assetKind={assetKind}
+      key={id}
+      multiple={control.multiple}
+      onClear={
+        previewMediaAsset
+          ? () => {
+              dispatchCommand({
+                mediaId: previewMediaAsset.id,
+                type: "media.delete",
+              });
+            }
+          : undefined
+      }
+      onFilesSelect={(files) => {
+        files.forEach((file) => importFile(file, false));
+      }}
+      onFileSelect={(file) => importFile(file, true)}
+      onPreviewRemove={(item) => {
+        if (!item.id) {
+          return;
+        }
+
+        dispatchCommand({
+          mediaId: item.id,
+          type: "media.delete",
+        });
+      }}
+      onPreviewReorder={(orderedPreviews) => {
+        const orderedPreviewIds = orderedPreviews.flatMap((item) =>
+          item.id ? [item.id] : [],
+        );
+
+        if (orderedPreviewIds.length !== previewMediaIds.length) {
+          return;
+        }
+
+        const previewIdSet = new Set(previewMediaIds);
+        let orderedPreviewIndex = 0;
+        const mediaIds = mediaAssets.map((asset) => {
+          if (!previewIdSet.has(asset.id)) {
+            return asset.id;
+          }
+
+          const nextId = orderedPreviewIds[orderedPreviewIndex];
+          orderedPreviewIndex += 1;
+          return nextId ?? asset.id;
+        });
+
+        dispatchCommand({
+          mediaIds,
+          type: "media.reorder",
+        });
+      }}
+      onPreviewTransform={(item, operation) => {
+        if (!item.id) {
+          return;
+        }
+
+        dispatchCommand({
+          mediaId: item.id,
+          operation,
+          type: "media.transform",
+        });
+      }}
+      preview={
+        previewMediaAsset
+          ? {
+              alt: previewMediaAsset.fileName,
+              id: previewMediaAsset.id,
+              size: previewMediaAsset.size,
+              src: previewMediaAsset.dataUrl,
+              transform: previewMediaAsset.transform,
+            }
+          : undefined
+      }
+      previews={previews}
+    />
+  );
+}

package/templates/runtime/react/controls-panel/renderers/controls-panel-renderer-registry.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+
+import { TOOLCRAFT_BUILT_IN_CONTROL_TYPES } from "../../../contracts/component-contracts";
+import {
+  getToolcraftControlRendererKind,
+  TOOLCRAFT_CONTROL_RENDERER_REGISTRY,
+} from "./controls-panel-renderer-registry";
+
+describe("Toolcraft controls-panel renderer registry", () => {
+  it("covers every built-in control exactly once", () => {
+    expect(Object.keys(TOOLCRAFT_CONTROL_RENDERER_REGISTRY).sort()).toEqual(
+      [...TOOLCRAFT_BUILT_IN_CONTROL_TYPES].sort(),
+    );
+
+    for (const controlType of TOOLCRAFT_BUILT_IN_CONTROL_TYPES) {
+      expect(getToolcraftControlRendererKind(controlType)).not.toBeNull();
+    }
+  });
+
+  it("leaves product-specific control ids to custom renderers", () => {
+    expect(getToolcraftControlRendererKind("productMaskEditor")).toBeNull();
+  });
+});

package/templates/runtime/react/controls-panel/renderers/controls-panel-renderer-registry.ts

@@ -0,0 +1,55 @@
+import {
+  TOOLCRAFT_BUILT_IN_CONTROL_TYPES,
+  type ToolcraftBuiltInControlType,
+} from "../../../contracts/component-contracts";
+
+export type ToolcraftControlRendererKind =
+  | "action"
+  | "basic"
+  | "collection"
+  | "compound"
+  | "media"
+  | "settings";
+
+export const TOOLCRAFT_CONTROL_RENDERER_REGISTRY = {
+  actions: "action",
+  anchorGrid: "basic",
+  aspectRatio: "basic",
+  channelMixer: "compound",
+  checkbox: "basic",
+  code: "basic",
+  collectionActions: "collection",
+  color: "compound",
+  colorOpacity: "compound",
+  curves: "compound",
+  fileDrop: "media",
+  fontPicker: "compound",
+  gradient: "compound",
+  imagePicker: "compound",
+  palette: "compound",
+  panelActions: "action",
+  rangeInput: "basic",
+  rangeSlider: "basic",
+  segmented: "basic",
+  select: "basic",
+  settingsTransfer: "settings",
+  slider: "basic",
+  switch: "basic",
+  text: "basic",
+  vector: "basic",
+} as const satisfies Record<
+  ToolcraftBuiltInControlType,
+  ToolcraftControlRendererKind
+>;
+
+export function getToolcraftControlRendererKind(
+  controlType: string,
+): ToolcraftControlRendererKind | null {
+  return TOOLCRAFT_BUILT_IN_CONTROL_TYPES.includes(
+    controlType as ToolcraftBuiltInControlType,
+  )
+    ? TOOLCRAFT_CONTROL_RENDERER_REGISTRY[
+        controlType as ToolcraftBuiltInControlType
+      ]
+    : null;
+}

package/templates/runtime/react/controls-panel/renderers/controls-panel-settings-transfer-renderer.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import * as React from "react";
+import { PanelActions } from "@repo/ui";
+
+import type { ToolcraftCommand, ToolcraftState } from "../../../state/types";
+import {
+  downloadToolcraftSettings,
+  importToolcraftSettings,
+} from "../../app-shell/settings-transfer";
+
+export type SettingsTransferControlRenderArgs = {
+  dispatch: React.Dispatch<ToolcraftCommand>;
+  id: string;
+  state: ToolcraftState;
+};
+
+export function renderSettingsTransferControl({
+  dispatch,
+  id,
+  state,
+}: SettingsTransferControlRenderArgs): React.ReactNode {
+  return (
+    <PanelActions
+      actions={[
+        {
+          icon: "upload-simple",
+          name: "Export Settings",
+          onClick: () => downloadToolcraftSettings(state),
+          variant: "outline",
+        },
+        {
+          icon: "download-simple",
+          name: "Import Settings",
+          onClick: () => {
+            void importToolcraftSettings({ dispatch, state });
+          },
+          variant: "outline",
+        },
+      ]}
+      key={id}
+      columns={2}
+    />
+  );
+}