@pixel-point/toolcraft 0.0.17 → 0.0.18

package/templates/ui/components/controls/file-drop/file-drop-control.test.tsx

@@ -94,3 +94,192 @@ describe("FileDropControl folder selection", () => {
     expect(screen.queryByLabelText("Upload file folder")).toBeNull();
   });
 });
+
+describe("FileDropControl collection actions", () => {
+  const filePresentation = {
+    accept: "image/*",
+    allowsFileBatch: true,
+    allowsFolderSelection: false,
+    emptyDescription: "or drop bump maps",
+    emptyTitle: "Upload bump maps",
+    items: [],
+    presenter: "file-list",
+    secondaryActions: [],
+  } satisfies FileDropPresentation<"file">;
+
+  it("adds an empty upload slot before selecting another file", () => {
+    const onFilesSelect = vi.fn();
+
+    render(
+      <FileDropControl
+        collectionActions={{
+          addLabel: "Add bump map",
+          itemLabel: "bump map",
+          name: "Bump maps",
+          removeLabel: "Remove bump map",
+        }}
+        onFilesSelect={onFilesSelect}
+        presentation={{
+          ...filePresentation,
+          items: [{
+            assetKind: "file",
+            fileName: "broad.png",
+            id: "bump-broad",
+          }],
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Add bump map" }));
+    expect(onFilesSelect).not.toHaveBeenCalled();
+    expect(
+      (screen.getByRole("button", { name: "Add bump map" }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+
+    const input = screen.getByLabelText("Upload bump map 2") as HTMLInputElement;
+    const file = new File([new Uint8Array([1])], "grain.png", {
+      type: "image/png",
+    });
+    fireEvent.change(input, { target: { files: [file] } });
+
+    expect(onFilesSelect).toHaveBeenCalledWith([file]);
+  });
+
+  it("removes the final item and suppresses duplicate list cardinality actions", () => {
+    const onItemRemove = vi.fn();
+    const finalItem = {
+      assetKind: "file" as const,
+      fileName: "fine.png",
+      id: "bump-fine",
+    };
+
+    render(
+      <FileDropControl
+        collectionActions={{
+          addLabel: "Add bump map",
+          itemLabel: "bump map",
+          name: "Bump maps",
+          removeLabel: "Remove bump map",
+        }}
+        onFilesSelect={vi.fn()}
+        onItemRemove={onItemRemove}
+        presentation={{
+          ...filePresentation,
+          items: [
+            {
+              assetKind: "file",
+              fileName: "broad.png",
+              id: "bump-broad",
+            },
+            finalItem,
+          ],
+        }}
+      />,
+    );
+
+    expect(screen.queryByRole("button", { name: "Add a new file" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Remove broad.png" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Remove fine.png" })).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove bump map" }));
+    expect(onItemRemove).toHaveBeenCalledWith(finalItem, 1);
+  });
+
+  it("removes a pending final slot before deleting an attached file", () => {
+    const onItemRemove = vi.fn();
+
+    render(
+      <FileDropControl
+        collectionActions={{
+          addLabel: "Add bump map",
+          itemLabel: "bump map",
+          name: "Bump maps",
+          removeLabel: "Remove bump map",
+        }}
+        onFilesSelect={vi.fn()}
+        onItemRemove={onItemRemove}
+        presentation={{
+          ...filePresentation,
+          items: [{
+            assetKind: "file",
+            fileName: "broad.png",
+            id: "bump-broad",
+          }],
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Add bump map" }));
+    expect(screen.getByLabelText("Upload bump map 2")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove bump map" }));
+    expect(screen.queryByLabelText("Upload bump map 2")).toBeNull();
+    expect(onItemRemove).not.toHaveBeenCalled();
+  });
+
+  it("renders item-owned settings only under an attached upload", () => {
+    const renderItemContent = vi.fn((item: { id: string }) => (
+      <div>Settings for {item.id}</div>
+    ));
+
+    render(
+      <FileDropControl
+        collectionActions={{
+          addLabel: "Add bump map",
+          itemLabel: "bump map",
+          name: "Bump maps",
+          renderItemContent,
+        }}
+        onFilesSelect={vi.fn()}
+        presentation={{
+          ...filePresentation,
+          items: [
+            {
+              assetKind: "file",
+              fileName: "broad.png",
+              id: "bump-broad",
+            },
+          ],
+        }}
+      />,
+    );
+
+    expect(screen.getByText("Settings for bump-broad")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Add bump map" }));
+    expect(screen.getByLabelText("Upload bump map 2")).toBeTruthy();
+    expect(renderItemContent).toHaveBeenCalled();
+    expect(
+      renderItemContent.mock.calls.every(([item]) => item.id === "bump-broad"),
+    ).toBe(true);
+  });
+
+  it("separates attached logical file groups with one between-group line", () => {
+    const { container } = render(
+      <FileDropControl
+        collectionActions={{
+          itemLabel: "bump map",
+          name: "Bump maps",
+          renderItemContent: (item) => <div>Settings for {item.id}</div>,
+        }}
+        onFilesSelect={vi.fn()}
+        onItemRemove={vi.fn()}
+        presentation={{
+          ...filePresentation,
+          items: [
+            { assetKind: "file", fileName: "broad.png", id: "broad" },
+            { assetKind: "file", fileName: "fine.png", id: "fine" },
+          ],
+        }}
+      />,
+    );
+    const groups = container.querySelectorAll(
+      '[data-slot="collection-item-group"]',
+    );
+
+    expect(groups).toHaveLength(2);
+    expect(groups[0]?.className).not.toContain("border-t");
+    expect(groups[1]?.className).toContain("border-t");
+    expect(container.textContent).not.toMatch(/Item 1|Item 2/u);
+  });
+});

package/templates/ui/components/controls/file-drop/file-drop-control.tsx

@@ -11,12 +11,9 @@ import {
 import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
 
 import { cn } from "../../../lib/utils";
-import {
-  ActionsControl,
-  type ActionControlObjectOption,
-  type ActionsControlItemState,
-} from "../actions/actions-control";
+import { ActionsControl } from "../actions/actions-control";
 import { Field } from "../../primitives";
+import { FileDropCollectionControl } from "./file-drop-collection-control";
 import { FileDropEmptyState } from "./file-drop-empty-state";
 import { FileDropFileList } from "./file-drop-file-list";
 import { FileDropFolderInput } from "./file-drop-folder-input";
@@ -24,11 +21,13 @@ import { FileDropImageGrid } from "./file-drop-image-grid";
 import { FileDropPresentationMessages } from "./file-drop-presentation-messages";
 import {
   createLegacyFileDropPresentation,
+  createFileDropActionModel,
+  createFileDropItemView,
+  createFileDropTargetHandlers,
   getFileInputAccept,
   getPresentationItemKey,
   getPreviewKey,
   imageTransformActions,
-  isDragLeavingCurrentTarget,
   reorderFileDropPresentationItems,
 } from "./file-drop-presentation";
 import { FileDropSinglePreview } from "./file-drop-single-preview";
@@ -37,19 +36,19 @@ import type {
   FileDropControlProps,
   FileDropImageTransformOperation,
   FileDropPresentation,
-  FileDropPresentationAction,
-  FileDropPresentationEntry,
   FileDropPresentationItem,
   FileDropPreview,
 } from "./file-drop-types";
 
-export function FileDropControl<
+function FileDropControlBase<
   AssetKind extends string = FileDropAssetKind,
   Feedback = unknown,
   Status = unknown,
 >({
   accept,
   assetKind = "image",
+  collectionActions,
+  collectionSlot = false,
   multiple = false,
   onAction,
   onClear,
@@ -65,11 +64,15 @@ export function FileDropControl<
   presentation: providedPresentation,
   preview,
   previews,
-}: FileDropControlProps<AssetKind, Feedback, Status>): React.JSX.Element {
+}: FileDropControlProps<AssetKind, Feedback, Status> & {
+  collectionSlot?: boolean;
+}): React.JSX.Element {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const folderInputRef = React.useRef<HTMLInputElement>(null);
   const [dragOver, setDragOver] = React.useState(false);
-  const [selectedItemKey, setSelectedItemKey] = React.useState<string | null>(null);
+  const [selectedItemKey, setSelectedItemKey] = React.useState<string | null>(
+    null,
+  );
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -88,32 +91,21 @@ export function FileDropControl<
     previews,
   });
   const usesLegacyPresentation = providedPresentation === undefined;
-  const presentation = (providedPresentation ?? legacy.presentation) as FileDropPresentation<
-    string,
-    unknown,
-    unknown
-  >;
+  const presentation = (providedPresentation ??
+    legacy.presentation) as FileDropPresentation<string, unknown, unknown>;
   const isImagePresenter =
     presentation.presenter === "image-grid" ||
     presentation.presenter === "single-image";
   const requiresPreviewSource = usesLegacyPresentation || isImagePresenter;
-  const itemEntries: readonly FileDropPresentationEntry[] =
-    presentation.items.flatMap((item, sourceIndex) =>
-      requiresPreviewSource && !item.previewSrc
-        ? []
-        : [
-            {
-              item,
-              key: getPresentationItemKey(item, sourceIndex),
-              sourceIndex,
-            },
-          ],
-    );
-  const renderableItems = itemEntries.map((entry) => entry.item);
-  const hasContent = itemEntries.length > 0;
-  const isListPresenter =
-    presentation.presenter === "file-list" || presentation.presenter === "model-item";
-  const itemKeys = itemEntries.map((entry) => entry.key);
+  const {
+    entries: itemEntries,
+    hasContent,
+    isListPresenter,
+    itemKeys,
+    items: renderableItems,
+  } = createFileDropItemView(presentation, requiresPreviewSource);
+  const isAttachedCollectionSlot = collectionSlot && hasContent;
+  const showsListCardinalityActions = !collectionSlot;
   const legacyPreviewByKey = new Map<string, FileDropPreview>(
     legacy.previews.map((item, index) => [getPreviewKey(item, index), item]),
   );
@@ -135,22 +127,12 @@ export function FileDropControl<
     Boolean(onPreviewTransform) &&
     Boolean(selectedItemEntry) &&
     (!requiresItemSelection || selectedItemKey !== null);
-  const secondaryActions: readonly FileDropPresentationAction[] =
-    shouldRenderLegacyImageActions
-      ? imageTransformActions
-      : presentation.secondaryActions;
-  const actionOptions: readonly ActionControlObjectOption[] = secondaryActions.map(
-    ({ state: _state, ...action }) => action,
-  );
-  const actionStates = secondaryActions.reduce<Record<string, ActionsControlItemState>>(
-    (states, action) => {
-      if (action.state) {
-        states[action.value] = action.state;
-      }
-
-      return states;
-    },
-    {},
+  const secondaryActions = shouldRenderLegacyImageActions
+    ? imageTransformActions
+    : presentation.secondaryActions;
+  const actionModel = createFileDropActionModel(
+    secondaryActions,
+    Boolean(shouldRenderLegacyImageActions || onAction),
   );
   const hasReorderHandler = usesLegacyPresentation
     ? Boolean(onPreviewReorder)
@@ -158,6 +140,11 @@ export function FileDropControl<
   const canRemoveCollectionItem = usesLegacyPresentation
     ? Boolean(onPreviewRemove)
     : Boolean(onItemRemove || (onClear && renderableItems.length === 1));
+  const dropTargetHandlers = createFileDropTargetHandlers({
+    enabled: !isAttachedCollectionSlot,
+    onDragOverChange: setDragOver,
+    onFiles: handleFiles,
+  });
 
   if (
     !usesLegacyPresentation &&
@@ -233,12 +220,14 @@ export function FileDropControl<
     }
 
     if (usesLegacyPresentation) {
-      const orderedPreviews = orderedPresentationItems.flatMap((item, index) => {
-        const key = getPresentationItemKey(item, index);
-        const legacyPreview = legacyPreviewByKey.get(key);
+      const orderedPreviews = orderedPresentationItems.flatMap(
+        (item, index) => {
+          const key = getPresentationItemKey(item, index);
+          const legacyPreview = legacyPreviewByKey.get(key);
 
-        return legacyPreview ? [legacyPreview] : [];
-      });
+          return legacyPreview ? [legacyPreview] : [];
+        },
+      );
 
       if (orderedPreviews.length === legacy.previews.length) {
         onPreviewReorder?.(orderedPreviews);
@@ -256,7 +245,9 @@ export function FileDropControl<
     index: number,
   ): void {
     if (usesLegacyPresentation) {
-      const legacyPreview = legacyPreviewByKey.get(getPresentationItemKey(item, index));
+      const legacyPreview = legacyPreviewByKey.get(
+        getPresentationItemKey(item, index),
+      );
 
       if (legacyPreview) {
         onPreviewRemove?.(legacyPreview, index);
@@ -293,7 +284,9 @@ export function FileDropControl<
     onClear?.();
   }
 
-  function runLegacyImageTransform(operation: FileDropImageTransformOperation): void {
+  function runLegacyImageTransform(
+    operation: FileDropImageTransformOperation,
+  ): void {
     if (!selectedItemEntry) {
       return;
     }
@@ -314,6 +307,20 @@ export function FileDropControl<
     onAction?.(value);
   }
 
+  if (collectionActions) {
+    return (
+      <FileDropCollectionControl
+        actions={collectionActions}
+        canRemoveAttachedItem={canRemoveCollectionItem}
+        entries={itemEntries}
+        onFilesSelect={onFilesSelect}
+        onRemoveAttachedItem={handleCollectionItemRemove}
+        presentation={presentation}
+        SlotControl={FileDropControlBase}
+      />
+    );
+  }
+
   return (
     <Field className="min-w-0" style={{ gap: "6px" }}>
       <input
@@ -353,25 +360,8 @@ export function FileDropControl<
             : "p-0",
         )}
         data-drag-over={dragOver}
-        onDragEnter={(event) => {
-          event.preventDefault();
-          setDragOver(true);
-        }}
-        onDragLeave={(event) => {
-          if (isDragLeavingCurrentTarget(event)) {
-            setDragOver(false);
-          }
-        }}
-        onDragOver={(event) => {
-          event.preventDefault();
-          setDragOver(true);
-        }}
-        onDrop={(event) => {
-          event.preventDefault();
-          setDragOver(false);
-          handleFiles(event.dataTransfer?.files ?? undefined);
-        }}
         role="group"
+        {...dropTargetHandlers}
       >
         {!hasContent ? (
           <FileDropEmptyState
@@ -385,10 +375,12 @@ export function FileDropControl<
         ) : presentation.presenter === "file-list" ? (
           <FileDropFileList
             isSortable={hasReorderHandler && itemEntries.length > 1}
-            onAddFile={openFileDialog}
+            onAddFile={showsListCardinalityActions ? openFileDialog : undefined}
             onDragEnd={handleItemDragEnd}
             onItemRemove={
-              canRemoveCollectionItem ? handleCollectionItemRemove : undefined
+              showsListCardinalityActions && canRemoveCollectionItem
+                ? handleCollectionItemRemove
+                : undefined
             }
             previewEntries={itemEntries}
             previewKeys={itemKeys}
@@ -405,7 +397,9 @@ export function FileDropControl<
             onPreviewSelect={
               canSelectImageItem
                 ? (key) => {
-                    const entry = itemEntries.find((candidate) => candidate.key === key);
+                    const entry = itemEntries.find(
+                      (candidate) => candidate.key === key,
+                    );
 
                     if (!entry) {
                       return;
@@ -465,17 +459,8 @@ export function FileDropControl<
       />
       {secondaryActions.length > 0 ? (
         <ActionsControl
-          actionStates={
-            shouldRenderLegacyImageActions || onAction
-              ? actionStates
-              : Object.fromEntries(
-                  secondaryActions.map((action) => [
-                    action.value,
-                    { ...action.state, disabled: true },
-                  ]),
-                )
-          }
-          actions={actionOptions}
+          actionStates={actionModel.states}
+          actions={actionModel.options}
           buttonColumns={isImagePresenter ? 3 : undefined}
           name={isImagePresenter ? "Image transforms" : "File actions"}
           onAction={handleSecondaryAction}
@@ -485,3 +470,11 @@ export function FileDropControl<
     </Field>
   );
 }
+
+export function FileDropControl<
+  AssetKind extends string = FileDropAssetKind,
+  Feedback = unknown,
+  Status = unknown,
+>(props: FileDropControlProps<AssetKind, Feedback, Status>): React.JSX.Element {
+  return <FileDropControlBase {...props} />;
+}

package/templates/ui/components/controls/file-drop/file-drop-presentation.tsx

@@ -3,13 +3,18 @@
 import * as React from "react";
 
 import { cn } from "../../../lib/utils";
-import type { ActionControlOption } from "../actions/actions-control";
+import type {
+  ActionControlObjectOption,
+  ActionControlOption,
+  ActionsControlItemState,
+} from "../actions/actions-control";
 import type {
   FileDropAssetKind,
   FileDropImageSize,
   FileDropImageTransform,
   FileDropImageTransformOperation,
   FileDropPresentation,
+  FileDropPresentationAction,
   FileDropPresentationEntry,
   FileDropPresentationItem,
   FileDropPreview,
@@ -22,7 +27,44 @@ export function isDragLeavingCurrentTarget(
 ): boolean {
   const nextTarget = event.relatedTarget;
 
-  return !(nextTarget instanceof Node && event.currentTarget.contains(nextTarget));
+  return !(
+    nextTarget instanceof Node && event.currentTarget.contains(nextTarget)
+  );
+}
+
+export function createFileDropTargetHandlers({
+  enabled,
+  onDragOverChange,
+  onFiles,
+}: Readonly<{
+  enabled: boolean;
+  onDragOverChange: (active: boolean) => void;
+  onFiles: (files: FileList | readonly File[] | undefined) => void;
+}>): React.HTMLAttributes<HTMLDivElement> {
+  if (!enabled) {
+    return {};
+  }
+
+  return {
+    onDragEnter: (event) => {
+      event.preventDefault();
+      onDragOverChange(true);
+    },
+    onDragLeave: (event) => {
+      if (isDragLeavingCurrentTarget(event)) {
+        onDragOverChange(false);
+      }
+    },
+    onDragOver: (event) => {
+      event.preventDefault();
+      onDragOverChange(true);
+    },
+    onDrop: (event) => {
+      event.preventDefault();
+      onDragOverChange(false);
+      onFiles(event.dataTransfer?.files);
+    },
+  };
 }
 
 export function getFileInputAccept(accept: string): string {
@@ -59,9 +101,12 @@ export function getFileInputAccept(accept: string): string {
 export function normalizeImageRotation(
   rotationDeg: number | undefined,
 ): 0 | 90 | 180 | 270 {
-  const normalized = ((Math.round((rotationDeg ?? 0) / 90) * 90) % 360 + 360) % 360;
+  const normalized =
+    (((Math.round((rotationDeg ?? 0) / 90) * 90) % 360) + 360) % 360;
 
-  return normalized === 90 || normalized === 180 || normalized === 270 ? normalized : 0;
+  return normalized === 90 || normalized === 180 || normalized === 270
+    ? normalized
+    : 0;
 }
 
 export function getImageTransformStyle(
@@ -144,13 +189,73 @@ export function getPresentationItemKey(
   return item.id;
 }
 
+export function createFileDropItemView(
+  presentation: FileDropPresentation<string, unknown, unknown>,
+  requiresPreviewSource: boolean,
+): Readonly<{
+  entries: readonly FileDropPresentationEntry[];
+  hasContent: boolean;
+  isListPresenter: boolean;
+  itemKeys: string[];
+  items: readonly FileDropPresentationItem[];
+}> {
+  const entries: readonly FileDropPresentationEntry[] =
+    presentation.items.flatMap((item, sourceIndex) =>
+      requiresPreviewSource && !item.previewSrc
+        ? []
+        : [
+            {
+              item,
+              key: getPresentationItemKey(item, sourceIndex),
+              sourceIndex,
+            },
+          ],
+    );
+
+  return {
+    entries,
+    hasContent: entries.length > 0,
+    isListPresenter:
+      presentation.presenter === "file-list" ||
+      presentation.presenter === "model-item",
+    itemKeys: entries.map((entry) => entry.key),
+    items: entries.map((entry) => entry.item),
+  };
+}
+
+export function createFileDropActionModel(
+  actions: readonly FileDropPresentationAction[],
+  enabled: boolean,
+): Readonly<{
+  options: readonly ActionControlObjectOption[];
+  states: Readonly<Record<string, ActionsControlItemState>>;
+}> {
+  return {
+    options: actions.map(({ state: _state, ...action }) => action),
+    states: actions.reduce<Record<string, ActionsControlItemState>>(
+      (states, action) => {
+        if (!enabled) {
+          states[action.value] = { ...action.state, disabled: true };
+        } else if (action.state) {
+          states[action.value] = action.state;
+        }
+
+        return states;
+      },
+      {},
+    ),
+  };
+}
+
 export function reorderFileDropPresentationItems<AssetKind extends string>(
   items: readonly FileDropPresentationItem<AssetKind>[],
   visibleEntries: readonly FileDropPresentationEntry<AssetKind>[],
   activeKey: string,
   overKey: string,
 ): FileDropPresentationItem<AssetKind>[] | null {
-  const activeIndex = visibleEntries.findIndex((entry) => entry.key === activeKey);
+  const activeIndex = visibleEntries.findIndex(
+    (entry) => entry.key === activeKey,
+  );
   const overIndex = visibleEntries.findIndex((entry) => entry.key === overKey);
 
   if (activeIndex < 0 || overIndex < 0 || activeIndex === overIndex) {
@@ -225,7 +330,9 @@ export function createLegacyFileDropPresentation({
         ? "image-grid"
         : "single-image";
   const emptyTitle =
-    assetKind === "file" ? "Click to upload a file" : "Click to upload an image";
+    assetKind === "file"
+      ? "Click to upload a file"
+      : "Click to upload an image";
   const dropTargetLabel = hasContent
     ? multiple
       ? assetKind === "file"
@@ -271,14 +378,29 @@ export function FileDropPlusGlyph({
       viewBox="0 0 14 14"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M7 2.5V11.5" stroke="currentColor" strokeLinecap="round" strokeWidth="1" />
-      <path d="M2.5 7H11.5" stroke="currentColor" strokeLinecap="round" strokeWidth="1" />
+      <path
+        d="M7 2.5V11.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1"
+      />
+      <path
+        d="M2.5 7H11.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1"
+      />
     </svg>
   );
 }
 
 export const imageTransformActions = [
-  { ariaLabel: "90° Right", icon: "rotate-cw", label: "90°", value: "rotate-right" },
+  {
+    ariaLabel: "90° Right",
+    icon: "rotate-cw",
+    label: "90°",
+    value: "rotate-right",
+  },
   {
     ariaLabel: "Flip horizontal",
     icon: "flip-horizontal",