@pixel-point/toolcraft 0.0.6 → 0.0.8

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

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { DiamondIcon } from "@phosphor-icons/react";
+import { ArrowCounterClockwiseIcon, DiamondIcon } from "@phosphor-icons/react";
 import {
   Actions,
   AnchorGrid,
@@ -9,6 +9,7 @@ import {
   ChannelMixer,
   Checkbox,
   CodeTextarea,
+  CollectionActions,
   Color,
   ColorOpacity,
   ControlInlineGroup,
@@ -69,7 +70,11 @@ import type {
   ToolcraftPanelState,
   ToolcraftState,
 } from "../state/types";
-import { readImportedImageFile } from "./media-file";
+import {
+  isToolcraftImageFile,
+  readImportedFile,
+  readImportedImageFile,
+} from "./media-file";
 import { PanelContainer } from "./panel-host";
 import type { PanelPlacement, PanelStateChange } from "./panel-host-types";
 import type { ToolcraftControlRendererMap } from "./control-renderers";
@@ -136,6 +141,7 @@ const canvasAspectRatioOptions = [
 
 const sectionedCompoundControlTypes = new Set([
   "channelMixer",
+  "collectionActions",
   "fontPicker",
   "gradient",
   "palette",
@@ -440,6 +446,8 @@ function formatControlValueLabel(
 
       return `${colorOpacityValue.hex} ${colorOpacityValue.opacity}%`;
     }
+    case "collectionActions":
+      return `${asCollectionItems(value, control.defaultValue).length} items`;
     case "fontPicker":
       return asFontPickerValue(value).fontId;
     case "gradient":
@@ -494,6 +502,10 @@ function formatControlValueLabel(
 }
 
 function asColorValue(value: unknown): { hex: string } {
+  if (typeof value === "string") {
+    return { hex: value };
+  }
+
   if (isRecord(value)) {
     return { hex: asString(value.hex, "#C1FF00") };
   }
@@ -502,6 +514,10 @@ function asColorValue(value: unknown): { hex: string } {
 }
 
 function asColorOpacityValue(value: unknown): ColorOpacityValue {
+  if (typeof value === "string") {
+    return { hex: value, opacity: 100 };
+  }
+
   if (isRecord(value)) {
     return {
       hex: asString(value.hex, "#C1FF00"),
@@ -512,6 +528,86 @@ function asColorOpacityValue(value: unknown): ColorOpacityValue {
   return { hex: "#C1FF00", opacity: 100 };
 }
 
+function asCollectionItems(value: unknown, fallback: unknown): unknown[] {
+  if (Array.isArray(value)) {
+    return [...value];
+  }
+
+  return Array.isArray(fallback) ? [...fallback] : [];
+}
+
+function getCollectionMinItems(control: ToolcraftControlSchema): number {
+  return Math.max(0, Math.floor(asNumber(control.minItems, 0)));
+}
+
+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));
+}
+
+function getCollectionItemType(control: ToolcraftControlSchema): string {
+  return control.itemControl?.type ?? "color";
+}
+
+function getCollectionItemBaseLabel(control: ToolcraftControlSchema): string {
+  if (control.itemLabel) {
+    return control.itemLabel;
+  }
+
+  const label = control.itemControl?.label;
+
+  return typeof label === "string" ? label : "Item";
+}
+
+function getCollectionItemName(
+  control: ToolcraftControlSchema,
+  index: number,
+): string {
+  const label = control.itemControl?.label;
+
+  if (label === false) {
+    return "";
+  }
+
+  return `${getCollectionItemBaseLabel(control)} ${index + 1}`;
+}
+
+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 "";
+  }
+}
+
 function asGradientType(value: unknown): GradientType {
   return value === "linear" ||
     value === "radial" ||
@@ -1700,7 +1796,9 @@ export function ControlsPanel({
   }
 
   function isColorSectionTitle(sectionTitle: string | undefined): boolean {
-    return /\b(colou?rs?|palette|palettes)\b/i.test(sectionTitle ?? "");
+    return /\b(colou?rs?|palette|palettes|shades?|accents?)\b/i.test(
+      sectionTitle ?? "",
+    );
   }
 
   function isSequentialColorLabel(label: string): boolean {
@@ -1844,6 +1942,42 @@ export function ControlsPanel({
     return getKeyframeLabelAction(control, name, getControlValue(control));
   }
 
+  function getSectionResetAction({
+    sectionTitle,
+    targets,
+  }: {
+    sectionTitle: string;
+    targets: readonly string[];
+  }): React.ReactNode {
+    const label = `Reset ${sectionTitle} section`;
+
+    return (
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              aria-label={label}
+              data-control-section-reset-button=""
+              onClick={() => {
+                dispatchCommand({
+                  label,
+                  targets: Array.from(new Set(targets)),
+                  type: "controls.resetTargets",
+                });
+              }}
+              size="icon-sm"
+              type="button"
+              variant="ghost"
+            />
+          }
+        >
+          <ArrowCounterClockwiseIcon />
+        </TooltipTrigger>
+        <TooltipContent side="top">{label}</TooltipContent>
+      </Tooltip>
+    );
+  }
+
   function renderColorGroup(
     entries: readonly ControlEntry[],
     headerKeyframeTarget: string | null,
@@ -1917,6 +2051,250 @@ export function ControlsPanel({
     );
   }
 
+  function renderCollectionActionsControl({
+    control,
+    name,
+    value,
+  }: {
+    control: ToolcraftControlSchema;
+    name: string;
+    value: unknown;
+  }): React.JSX.Element {
+    const items = asCollectionItems(value, control.defaultValue);
+    const minItems = getCollectionMinItems(control);
+    const hardMaxItems = getCollectionHardMaxItems(control);
+    const canAdd = hardMaxItems === null || items.length < hardMaxItems;
+    const canRemove = items.length > minItems;
+    const itemType = getCollectionItemType(control);
+
+    function setItems(nextItems: unknown[], label: string): void {
+      setControlValue(control.target, nextItems, label);
+    }
+
+    function addItem(): void {
+      if (!canAdd) {
+        return;
+      }
+
+      setItems([...items, getCollectionItemDefaultValue(control)], control.addLabel ?? "Add item");
+    }
+
+    function removeItem(): void {
+      if (!canRemove) {
+        return;
+      }
+
+      setItems(items.slice(0, -1), control.removeLabel ?? "Remove item");
+    }
+
+    function updateItem(index: number, nextValue: unknown, meta?: ControlChangeMeta): void {
+      const nextItems = items.map((item, itemIndex) =>
+        itemIndex === index ? nextValue : item,
+      );
+      const itemName = getCollectionItemName(control, index) || name;
+
+      setControlValue(control.target, nextItems, itemName, meta);
+    }
+
+    function renderColorItems(): React.ReactNode {
+      return (
+        <div
+          className="grid min-w-0 grid-cols-2 gap-x-2 gap-y-4"
+          data-slot="collection-actions-items-grid"
+        >
+          {items.map((item, index) => {
+            const itemName = getCollectionItemName(control, index);
+
+            return (
+              <Color
+                hex={asColorValue(item).hex}
+                key={itemName || index}
+                name={itemName}
+                onValueChange={(nextValue: { hex: string }, meta?: ControlChangeMeta) =>
+                  updateItem(index, nextValue, meta)
+                }
+                showLabel={false}
+              />
+            );
+          })}
+        </div>
+      );
+    }
+
+    function renderColorOpacityItems(): React.ReactNode {
+      return items.map((item, index) => {
+        const colorOpacityValue = asColorOpacityValue(item);
+        const itemName = getCollectionItemName(control, index);
+
+        return (
+          <ColorOpacity
+            hex={colorOpacityValue.hex}
+            key={itemName || index}
+            name={itemName}
+            onValueChange={(nextValue, meta) => updateItem(index, nextValue, meta)}
+            opacity={colorOpacityValue.opacity}
+            showLabel={false}
+          />
+        );
+      });
+    }
+
+    function renderStackedItemControl(item: unknown, index: number): React.ReactNode {
+      const itemControl = control.itemControl;
+      const itemName = getCollectionItemName(control, index);
+      const key = `${itemName || "item"}-${index}`;
+      const update = (nextValue: unknown, meta?: ControlChangeMeta) => {
+        updateItem(index, nextValue, meta);
+      };
+
+      switch (itemType) {
+        case "checkbox":
+          return (
+            <Checkbox
+              checked={asBoolean(item)}
+              key={key}
+              name={itemName}
+              onCheckedChange={update}
+              showLabel={itemControl?.label !== false}
+            />
+          );
+        case "rangeInput": {
+          const rangeValue = asRangeInputValue(item);
+
+          return (
+            <RangeInput
+              defaultValue={asRangeInputValue(itemControl?.defaultValue)}
+              end={rangeValue.end}
+              key={key}
+              name={itemName}
+              onValueChange={update}
+              start={rangeValue.start}
+            />
+          );
+        }
+        case "segmented":
+          return (
+            <Segmented
+              key={key}
+              name={itemName}
+              onValueChange={update}
+              options={itemControl?.options ?? []}
+              value={asString(item, itemControl?.options?.[0]?.value ?? "")}
+              variant={itemControl?.variant === "dots" ? "dots" : "default"}
+            />
+          );
+        case "select":
+          return (
+            <Select
+              key={key}
+              name={itemName}
+              onValueChange={update}
+              options={itemControl?.options ?? []}
+              value={asString(item, itemControl?.options?.[0]?.value ?? "")}
+            />
+          );
+        case "slider":
+          return (
+            <Slider
+              baseValue={asNumber(
+                itemControl?.defaultValue,
+                itemControl?.min ?? 0,
+              )}
+              key={key}
+              markerCount={
+                typeof itemControl?.markerCount === "number"
+                  ? itemControl.markerCount
+                  : undefined
+              }
+              max={itemControl?.max ?? 100}
+              min={itemControl?.min ?? 0}
+              name={itemName}
+              onValueChange={update}
+              step={itemControl?.step ?? 1}
+              unit={itemControl?.unit}
+              value={asNumber(
+                item,
+                asNumber(itemControl?.defaultValue, itemControl?.min ?? 0),
+              )}
+              variant={itemControl?.variant === "discrete" ? "discrete" : "continuous"}
+            />
+          );
+        case "switch":
+          return (
+            <Switch
+              checked={asBoolean(item)}
+              key={key}
+              name={itemName}
+              onCheckedChange={update}
+              showLabel={itemControl?.label !== false}
+            />
+          );
+        case "fontPicker":
+          return (
+            <FontPicker
+              defaultValue={asFontPickerValue(itemControl?.defaultValue)}
+              key={key}
+              name={itemName || "Font"}
+              onValueChange={update}
+              value={asFontPickerValue(item)}
+            />
+          );
+        case "text":
+          return (
+            <TextInput
+              commitOnBlur={itemControl?.commitMode === "setting"}
+              defaultValue={asString(itemControl?.defaultValue, asString(item))}
+              key={key}
+              name={itemName}
+              onValueChange={update}
+              value={asString(item)}
+            />
+          );
+        default:
+          return (
+            <TextInput
+              defaultValue={asString(itemControl?.defaultValue, asString(item))}
+              key={key}
+              name={itemName}
+              onValueChange={update}
+              value={asString(item)}
+            />
+          );
+      }
+    }
+
+    function renderCollectionItems(): React.ReactNode {
+      if (itemType === "color") {
+        return renderColorItems();
+      }
+
+      if (itemType === "colorOpacity") {
+        return renderColorOpacityItems();
+      }
+
+      return items.map(renderStackedItemControl);
+    }
+
+    return (
+      <div className="min-w-0 space-y-3" data-slot="collection-actions-control">
+        <CollectionActions
+          addLabel={control.addLabel ?? `Add ${getCollectionItemBaseLabel(control)}`}
+          canAdd={canAdd}
+          canRemove={canRemove}
+          name={name}
+          onAdd={addItem}
+          onRemove={removeItem}
+          removeLabel={
+            control.removeLabel ?? `Remove ${getCollectionItemBaseLabel(control)}`
+          }
+        />
+        <div className="min-w-0 space-y-4" data-slot="collection-actions-items">
+          {renderCollectionItems()}
+        </div>
+      </div>
+    );
+  }
+
   const visibleSections = resolvedControlsPanel.sections
     .map((section) => ({
       entries: getVisibleSectionEntries(section),
@@ -1963,6 +2341,23 @@ export function ControlsPanel({
           isSectionCollapsible && collapsedSectionByKey[sectionCollapseKey] === true;
         const headerKeyframeEntry = getSectionHeaderKeyframeEntry(entries, section.title);
         const headerKeyframeTarget = headerKeyframeEntry?.[1].target ?? null;
+        const headerKeyframeAction = headerKeyframeEntry
+          ? getSectionHeaderKeyframeAction(headerKeyframeEntry)
+          : null;
+        const sectionResetAction = isSectionCollapsible
+          ? getSectionResetAction({
+              sectionTitle:
+                typeof renderedSectionTitle === "string" ? renderedSectionTitle : "section",
+              targets: entries.map(([, control]) => control.target),
+            })
+          : null;
+        const sectionHeaderAction =
+          headerKeyframeAction || sectionResetAction ? (
+            <>
+              {headerKeyframeAction}
+              {sectionResetAction}
+            </>
+          ) : undefined;
         const inlineLayoutGroupByControlId = getInlineLayoutGroupByControlId({
           controlsById: visibleControls,
           layoutGroups: section.layoutGroups,
@@ -1970,11 +2365,7 @@ export function ControlsPanel({
 
         return (
           <PanelSection
-            action={
-              headerKeyframeEntry
-                ? getSectionHeaderKeyframeAction(headerKeyframeEntry)
-                : undefined
-            }
+            action={sectionHeaderAction}
             actionGroup={section.actionGroup}
             allowCompoundDividers={entries.length > 1}
             collapsed={isSectionCollapsed}
@@ -2190,6 +2581,9 @@ export function ControlsPanel({
                 });
               }
 
+              case "collectionActions":
+                return renderCollectionActionsControl({ control, name, value });
+
               case "curves": {
                 const curvesName = control.label === false ? "Curves" : name;
 
@@ -2214,15 +2608,51 @@ export function ControlsPanel({
               }
 
               case "fileDrop": {
-                const previewMediaAssets = state.schema.panels.layers ? [] : state.mediaAssets;
+                const assetKind = control.assetKind === "file" ? "file" : "image";
+                const previewMediaAssets = state.schema.panels.layers
+                  ? []
+                  : state.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,
                 }));
+                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, state.canvas.size).then((importedImage) => {
                     if (!importedImage) {
                       return;
@@ -2230,11 +2660,13 @@ export function ControlsPanel({
 
                     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",
@@ -2244,7 +2676,11 @@ export function ControlsPanel({
 
                 return (
                   <FileDrop
-                    accept={control.accept ?? "PNG, JPEG, GIF, SVG, WebP"}
+                    accept={
+                      control.accept ??
+                      (assetKind === "file" ? "" : "PNG, JPEG, GIF, SVG, WebP")
+                    }
+                    assetKind={assetKind}
                     multiple={control.multiple}
                     key={id}
                     onClear={
@@ -2271,6 +2707,32 @@ export function ControlsPanel({
                         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 = state.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",
+                      });
+                    }}
                     preview={
                       previewMediaAsset
                         ? {

package/templates/runtime/react/media-file.ts

@@ -5,6 +5,10 @@ export type ToolcraftImportedImageFile = {
   size: ToolcraftCanvasSize;
 };
 
+export type ToolcraftImportedFile = {
+  dataUrl: string;
+};
+
 function readFileDataUrl(file: File): Promise<string | null> {
   return new Promise((resolve) => {
     const reader = new FileReader();
@@ -65,6 +69,21 @@ function readImageDataUrlSize(dataUrl: string): Promise<ToolcraftCanvasSize | nu
   });
 }
 
+export function isToolcraftImageFile(file: File): boolean {
+  return (
+    file.type.startsWith("image/") ||
+    /\.(avif|gif|heic|heif|jpe?g|png|svg|tiff?|webp)$/i.test(file.name)
+  );
+}
+
+export async function readImportedFile(
+  file: File,
+): Promise<ToolcraftImportedFile | null> {
+  const dataUrl = await readFileDataUrl(file);
+
+  return dataUrl ? { dataUrl } : null;
+}
+
 export async function readImportedImageFile(
   file: File,
   fallbackSize: ToolcraftCanvasSize,

package/templates/runtime/schema/define-toolcraft.test.ts

@@ -535,9 +535,11 @@ describe("defineToolcraft", () => {
     expect(app.assembly.commands).toEqual(
       expect.arrayContaining([
         "controls.reset",
+        "controls.resetTargets",
         "history.undo",
         "media.delete",
         "media.import",
+        "media.reorder",
         "layers.reorder",
         "timeline.setCurrentTime",
         "canvas.center",

package/templates/runtime/schema/define-toolcraft.ts

@@ -60,6 +60,7 @@ const runtimeSetupSectionTitle = "Setup";
 const settingsTransferHeavyControlTypes = new Set([
   "channelMixer",
   "code",
+  "collectionActions",
   "colorOpacity",
   "curves",
   "fileDrop",
@@ -331,14 +332,19 @@ function createToolcraftAssembly({
 
     if (canvas.upload) {
       capabilities.push("canvas.upload");
-      commands.push("media.delete", "media.import");
+      commands.push("media.delete", "media.import", "media.reorder");
     }
   }
 
   const controlsPanel = panels.controls
     ? createPanelAssemblyContract({
         capabilities: ["controls.panel", "controls.defaults"],
-        commands: ["controls.apply", "controls.reset", "controls.setValue"],
+        commands: [
+          "controls.apply",
+          "controls.reset",
+          "controls.resetTargets",
+          "controls.setValue",
+        ],
         contract: TOOLCRAFT_COMPONENT_CONTRACTS.controlsPanel,
         enabled: true,
       })
@@ -472,7 +478,9 @@ function createToolcraftAssembly({
               ...(canvas.draggable
                 ? (["canvas.panBy", "canvas.setOffset", "canvas.setViewport"] as const)
                 : []),
-              ...(canvas.upload ? (["media.delete", "media.import"] as const) : []),
+              ...(canvas.upload
+                ? (["media.delete", "media.import", "media.reorder"] as const)
+                : []),
             ])
           : [],
         enabled: canvas.enabled,