@pixel-point/toolcraft 0.0.7 → 0.0.8

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

@@ -248,6 +248,9 @@ function StateProbe() {
         {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="timeline-expanded">{String(state.timeline.expanded)}</span>
       <span data-testid="timeline-keyframes">
         {JSON.stringify(state.timeline.keyframeGroups)}
@@ -384,6 +387,46 @@ describe("ControlsPanel", () => {
     expect(inlineGroup?.textContent).toContain("Snap Y");
   });
 
+  it("keeps wrapped local action buttons left aligned below their label", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                masks: {
+                  actions: [
+                    { label: "Rect", value: "mask.add.rectangle" },
+                    { label: "Circle", value: "mask.add.circle" },
+                    { label: "Tri", value: "mask.add.triangle" },
+                    { label: "Delete", value: "mask.delete" },
+                  ],
+                  defaultValue: [],
+                  label: "Masks",
+                  target: "composition.masks",
+                  type: "actions",
+                },
+              },
+              title: "Composition",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+    const actionField = container.querySelector('[data-slot="actions-control"]');
+    const actionButtons = container.querySelector(
+      '[data-slot="actions-control-buttons"]',
+    );
+
+    expect(actionField?.className).toContain("justify-between");
+    expect(actionField?.className).toContain("flex-wrap");
+    expect(actionButtons?.className).toContain("justify-start");
+    expect(actionButtons?.className).not.toContain("ml-auto");
+  });
+
   it("renders the managed background toggle plus unlabeled color row as equal-width inline columns", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
@@ -448,35 +491,35 @@ describe("ControlsPanel", () => {
                   defaultValue: { hex: "#DFFF1A" },
                   description: "Sets the first bead color.",
                   label: "Color 1",
-                  target: "beads.color1",
+                  target: "palette.accent1",
                   type: "color",
                 },
                 color2: {
                   defaultValue: { hex: "#8CFF3A" },
                   description: "Sets the second bead color.",
                   label: "Color 2",
-                  target: "beads.color2",
+                  target: "palette.accent2",
                   type: "color",
                 },
                 color3: {
                   defaultValue: { hex: "#F4FF5A" },
                   description: "Sets the third bead color.",
                   label: "Color 3",
-                  target: "beads.color3",
+                  target: "palette.accent3",
                   type: "color",
                 },
                 color4: {
                   defaultValue: { hex: "#B8FF2E" },
                   description: "Sets the fourth bead color.",
                   label: "Color 4",
-                  target: "beads.color4",
+                  target: "palette.accent4",
                   type: "color",
                 },
                 color5: {
                   defaultValue: { hex: "#ECFF68" },
                   description: "Sets the fifth bead color.",
                   label: "Color 5",
-                  target: "beads.color5",
+                  target: "palette.accent5",
                   type: "color",
                 },
                 colorSpread: {
@@ -486,7 +529,7 @@ describe("ControlsPanel", () => {
                   label: "Spread",
                   max: 100,
                   min: 0,
-                  target: "beads.colorSpread",
+                  target: "palette.spread",
                   type: "slider",
                   unit: "%",
                 },
@@ -503,7 +546,7 @@ describe("ControlsPanel", () => {
                   layout: "inline",
                 },
               ],
-              title: "Bead Colors",
+              title: "Accent Shades",
             },
             {
               controls: {
@@ -1102,7 +1145,6 @@ describe("ControlsPanel", () => {
               controls: {
                 font: {
                   defaultValue: {
-                    color: "#FFFFFF",
                     fontId: "inter",
                     fontSize: 16,
                     fontWeight: "400",
@@ -2501,6 +2543,22 @@ describe("ControlsPanel", () => {
     );
     expect(screen.getByRole("img", { name: "one.svg" })).toBeTruthy();
     expect(screen.getByRole("img", { name: "two.svg" })).toBeTruthy();
+    expect(screen.getByTestId("media-ids").textContent).toBe("media-1,media-2");
+
+    const firstPreview = screen
+      .getByRole("img", { name: "one.svg" })
+      .closest<HTMLElement>('[data-slot="file-upload-preview-item"]');
+    const secondPreview = screen
+      .getByRole("img", { name: "two.svg" })
+      .closest<HTMLElement>('[data-slot="file-upload-preview-item"]');
+
+    if (!firstPreview || !secondPreview) {
+      throw new Error("Expected multi-image previews to render");
+    }
+
+    expect(firstPreview.getAttribute("role")).toBe("button");
+    expect(firstPreview.getAttribute("tabindex")).toBe("0");
+    expect(firstPreview.className).toContain("cursor-grab");
 
     fireEvent.click(screen.getByRole("button", { name: "Remove two.svg" }));
 
@@ -2508,6 +2566,118 @@ describe("ControlsPanel", () => {
     expect(screen.queryByRole("img", { name: "two.svg" })).toBeNull();
   });
 
+  it("renders arbitrary file uploads as a sortable file list", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  assetKind: "file",
+                  label: "Files",
+                  multiple: true,
+                  target: "input.files",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema, undefined, {
+      layers: [
+        { id: "layer-1", kind: "layer", name: "one", visible: true },
+        { id: "layer-2", kind: "layer", name: "two", visible: true },
+      ],
+      mediaAssets: [
+        {
+          assetKind: "file",
+          dataUrl: "data:text/plain;base64,b25l",
+          fileName: "one.txt",
+          id: "media-1",
+          layerId: "layer-1",
+          mimeType: "text/plain",
+          position: { x: 0, y: 0 },
+          sourceTarget: "input.files",
+        },
+        {
+          assetKind: "file",
+          dataUrl: "data:application/json;base64,e30=",
+          fileName: "two.json",
+          id: "media-2",
+          layerId: "layer-2",
+          mimeType: "application/json",
+          position: { x: 0, y: 0 },
+          sourceTarget: "input.files",
+        },
+      ],
+      selectedLayerId: "layer-2",
+    });
+
+    const fileList = container.querySelector('[data-slot="file-upload-file-list"]');
+    const fileRows = container.querySelectorAll('[data-slot="file-upload-file-item"]');
+    const fileDividers = container.querySelectorAll('[data-slot="file-upload-file-divider"]');
+
+    expect(fileList).toBeTruthy();
+    expect(fileRows).toHaveLength(2);
+    expect(fileDividers).toHaveLength(2);
+    expect(screen.getByText("one.txt")).toBeTruthy();
+    expect(screen.getByText("two.json")).toBeTruthy();
+    expect(screen.getByText("one.txt").className).toContain("text-xs");
+    expect(screen.getByText("one.txt").className).not.toContain("truncate");
+    expect(screen.getByText("one.txt").className).toContain("mask-image");
+    expect(screen.getByRole("button", { name: "Remove one.txt" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Add a new file" })).toBeTruthy();
+    expect(fileRows[0]?.className).not.toContain("border-b");
+    expect(fileRows[0]?.className).toContain("hover:bg");
+    expect(fileDividers[0]?.className).toContain("var(--border)_5%");
+    expect(fileRows[0]?.getAttribute("role")).toBe("button");
+    expect(fileRows[0]?.getAttribute("tabindex")).toBe("0");
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove two.json" }));
+
+    expect(screen.getByTestId("media-count").textContent).toBe("1");
+    expect(screen.queryByText("two.json")).toBeNull();
+  });
+
+  it("renders the arbitrary file uploader empty state", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  assetKind: "file",
+                  label: "Files",
+                  target: "input.files",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByText("Click to upload a file")).toBeTruthy();
+    expect(screen.getByText("or drag it onto the canvas")).toBeTruthy();
+    expect(screen.queryByText("Click to upload an image")).toBeNull();
+  });
+
   it("keeps file upload deletion in the layers panel for multi-layer apps", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true, upload: true },
@@ -2574,6 +2744,65 @@ describe("ControlsPanel", () => {
     expect(colorControlList?.children).toHaveLength(1);
   });
 
+  it("keeps an odd trailing plain color half-width in a color bank", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                accent1: {
+                  defaultValue: { hex: "#9CE6FF" },
+                  label: "Accent 1",
+                  target: "accent.shade1",
+                  type: "color",
+                },
+                accent2: {
+                  defaultValue: { hex: "#FF7A90" },
+                  label: "Accent 2",
+                  target: "accent.shade2",
+                  type: "color",
+                },
+                accent3: {
+                  defaultValue: { hex: "#FFD166" },
+                  label: "Accent 3",
+                  target: "accent.shade3",
+                  type: "color",
+                },
+                accent4: {
+                  defaultValue: { hex: "#8BF38B" },
+                  label: "Accent 4",
+                  target: "accent.shade4",
+                  type: "color",
+                },
+                accent5: {
+                  defaultValue: { hex: "#BDA8FF" },
+                  label: "Accent 5",
+                  target: "accent.shade5",
+                  type: "color",
+                },
+              },
+              title: "Accent Shades",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const pairedColorRows = container.querySelectorAll('[data-slot="color-control-grid"]');
+    const trailingColorButtonGroup = screen
+      .getByLabelText("Accent 5 hex")
+      .closest('[data-slot="button-group"]');
+    const trailingColorWidthContainer = trailingColorButtonGroup?.parentElement;
+
+    expect(pairedColorRows).toHaveLength(2);
+    expect(trailingColorWidthContainer?.className).toContain("w-1/2");
+    expect(trailingColorWidthContainer?.className).not.toContain("w-full");
+  });
+
   it("omits visible color field labels only inside color-only sections", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
@@ -3341,6 +3570,54 @@ describe("ControlsPanel", () => {
     expect(container.querySelector('[data-control-section-reset-button]')).toBeTruthy();
   });
 
+  it("clears file upload previews from the selected section reset action", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  defaultValue: null,
+                  label: "Image",
+                  target: "media.source",
+                  type: "fileDrop",
+                },
+              },
+              title: "Source Image",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema, {}, {
+      mediaAssets: [
+        {
+          dataUrl:
+            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'/%3E",
+          fileName: "source.svg",
+          id: "media-1",
+          layerId: "layer-1",
+          mimeType: "image/svg+xml",
+          position: { x: 0, y: 0 },
+          size: { height: 300, unit: "px", width: 400 },
+          sourceTarget: "media.source",
+        },
+      ],
+    });
+
+    expect(screen.getByRole("img", { name: "source.svg" })).toBeTruthy();
+    expect(screen.getByTestId("media-count").textContent).toBe("1");
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset Source Image section" }));
+
+    expect(screen.queryByRole("img", { name: "source.svg" })).toBeNull();
+    expect(screen.getByTestId("media-count").textContent).toBe("0");
+  });
+
   it("renders collection actions as add/remove controls for runtime item arrays", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
@@ -3449,6 +3726,101 @@ describe("ControlsPanel", () => {
     expect(screen.getByDisplayValue("New label")).toBeTruthy();
   });
 
+  it("keeps a collection font picker color popover open while editing its color surface", async () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                textStyles: {
+                  defaultValue: [
+                    {
+                      color: "#FFFFFF",
+                      fontId: "inter",
+                      fontSize: 16,
+                      fontWeight: "400",
+                      letterSpacing: "normal",
+                      lineHeight: "normal",
+                      opacity: 100,
+                      textCase: "original",
+                    },
+                  ],
+                  itemControl: {
+                    defaultValue: {
+                      color: "#FFFFFF",
+                      fontId: "inter",
+                      fontSize: 16,
+                      fontWeight: "400",
+                      letterSpacing: "normal",
+                      lineHeight: "normal",
+                      opacity: 100,
+                      textCase: "original",
+                    },
+                    label: "Font",
+                    type: "fontPicker",
+                  },
+                  label: "Text styles",
+                  minItems: 1,
+                  target: "text.styles",
+                  type: "collectionActions",
+                },
+              },
+              title: "Typography",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    fireEvent.click(screen.getByRole("button", { name: "Pick Color" }));
+
+    const surface = await waitFor(() => {
+      const nextSurface = container.ownerDocument.body.querySelector<HTMLElement>(
+        '[data-slot="style-guide-color-surface"]',
+      );
+      if (!nextSurface) {
+        throw new Error("Expected color surface to be open.");
+      }
+      return nextSurface;
+    });
+
+    const surfaceRect = {
+      bottom: 100,
+      height: 100,
+      left: 0,
+      right: 100,
+      toJSON: () => ({}),
+      top: 0,
+      width: 100,
+      x: 0,
+      y: 0,
+    } as DOMRect;
+    Object.defineProperty(surface, "getBoundingClientRect", {
+      configurable: true,
+      value: () => surfaceRect,
+    });
+
+    fireEvent.pointerDown(surface, {
+      buttons: 1,
+      clientX: 72,
+      clientY: 28,
+      pointerId: 1,
+    });
+
+    expect(
+      container.ownerDocument.body.querySelector('[data-slot="style-guide-color-surface"]'),
+    ).toBeTruthy();
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["text.styles"][0].color).not.toBe("#FFFFFF");
+  });
+
   it("commits canvas size controls to runtime state on blur or Enter", () => {
     const { container } = renderControlsPanel();
 
@@ -4017,6 +4389,30 @@ describe("ControlsPanel", () => {
     expect(container.querySelector('[data-slot="control-section-header"]')).toBeTruthy();
   });
 
+  it("suppresses child control transitions when a section re-expands", () => {
+    const schema = createSchema();
+    renderControlsPanelWithSchema(schema);
+    const basicTitle = screen.getByText("Basic");
+    const header = basicTitle.closest<HTMLElement>('[data-slot="control-section-header"]');
+    const section = basicTitle.closest("section");
+    const initialBody = section?.querySelector<HTMLElement>(
+      '[data-slot="panel-section-collapsible-body"]',
+    );
+
+    fireEvent.click(header!);
+    fireEvent.transitionEnd(initialBody!);
+    fireEvent.click(header!);
+
+    const expandedBody = section?.querySelector<HTMLElement>(
+      '[data-slot="panel-section-collapsible-body"]',
+    );
+    const innerControls = expandedBody?.firstElementChild as HTMLElement | null;
+
+    expect(expandedBody?.className).toContain("transition-[grid-template-rows,opacity]");
+    expect(expandedBody?.className).toContain("grid-rows-[1fr]");
+    expect(innerControls?.getAttribute("data-toolcraft-controls-mounting")).toBe("true");
+  });
+
   it("persists ordinary section collapse state as a UI preference across remounts", () => {
     const schema = createSchema();
     const { unmount } = renderControlsPanelWithSchema(schema);

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

@@ -70,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";
@@ -585,6 +589,8 @@ function getCollectionItemDefaultValue(control: ToolcraftControlSchema): unknown
       return { hex: "#C1FF00" };
     case "colorOpacity":
       return { hex: "#C1FF00", opacity: 100 };
+    case "fontPicker":
+      return asFontPickerValue(control.itemControl?.defaultValue);
     case "checkbox":
     case "switch":
       return false;
@@ -1790,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 {
@@ -2221,6 +2229,16 @@ export function ControlsPanel({
               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
@@ -2590,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;
@@ -2606,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",
@@ -2620,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={
@@ -2647,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
                         ? {