@pixel-point/toolcraft 0.0.6 → 0.0.8

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

@@ -1,13 +1,35 @@
 "use client";
 
 import * as React from "react";
-import { CloudArrowUpIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  type DragEndEvent,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  rectSortingStrategy,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { CloudArrowUpIcon, PaperclipIcon, XIcon } from "@phosphor-icons/react";
 
 import { cn } from "../../../lib/utils";
 import { Button, Field } from "../../primitives";
 
+export type FileDropAssetKind = "file" | "image";
+
 export type FileDropPreview = {
   alt?: string;
+  assetKind?: FileDropAssetKind;
+  fileName?: string;
   id?: string;
   size?: {
     height: number;
@@ -18,11 +40,13 @@ export type FileDropPreview = {
 
 export type FileDropControlProps = {
   accept: string;
+  assetKind?: FileDropAssetKind;
   multiple?: boolean;
   onClear?: () => void;
   onFileSelect?: (file: File) => void;
   onFilesSelect?: (files: File[]) => void;
   onPreviewRemove?: (preview: FileDropPreview, index: number) => void;
+  onPreviewReorder?: (orderedPreviews: FileDropPreview[]) => void;
   preview?: FileDropPreview;
   previews?: readonly FileDropPreview[];
 };
@@ -76,21 +100,218 @@ function getPreviewImageStyle(size: FileDropPreview["size"]): React.CSSPropertie
   };
 }
 
+function getPreviewKey(item: FileDropPreview, index: number): string {
+  return item.id ?? `${item.src}:${index}`;
+}
+
+function FileDropPlusGlyph({ className }: { className?: string }): React.JSX.Element {
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn("flex-none", className)}
+      fill="none"
+      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" />
+    </svg>
+  );
+}
+
+type SortablePreviewTileProps = {
+  index: number;
+  isSortable: boolean;
+  item: FileDropPreview;
+  itemKey: string;
+  onPreviewRemove?: (preview: FileDropPreview, index: number) => void;
+};
+
+function SortablePreviewTile({
+  index,
+  isSortable,
+  item,
+  itemKey,
+  onPreviewRemove,
+}: SortablePreviewTileProps): React.JSX.Element {
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      disabled: !isSortable,
+      id: itemKey,
+    });
+  const sortableTransform = transform
+    ? {
+        ...transform,
+        scaleX: isDragging ? 1.035 : transform.scaleX,
+        scaleY: isDragging ? 1.035 : transform.scaleY,
+      }
+    : null;
+  const style: React.CSSProperties = {
+    transform: sortableTransform ? CSS.Transform.toString(sortableTransform) : undefined,
+    transition,
+  };
+
+  return (
+    <div
+      className={cn(
+        "relative aspect-square min-w-0 overflow-hidden rounded-[calc(var(--radius-lg)-4px)] bg-[color:color-mix(in_oklab,var(--foreground)_6%,transparent)] transition-[transform,box-shadow,opacity,border-color] duration-180 ease-out motion-reduce:transition-none",
+        isSortable &&
+          "cursor-grab touch-none select-none will-change-transform hover:shadow-[0_8px_18px_color-mix(in_oklab,var(--background)_30%,transparent)]",
+        isDragging &&
+          "z-10 cursor-grabbing opacity-90 shadow-[0_12px_24px_color-mix(in_oklab,var(--background)_55%,transparent)]",
+      )}
+      data-file-upload-preview-key={itemKey}
+      data-preview-dragging={isDragging ? "true" : undefined}
+      data-slot="file-upload-preview-item"
+      onClick={(event) => {
+        event.stopPropagation();
+      }}
+      ref={setNodeRef}
+      style={style}
+      {...(isSortable ? attributes : {})}
+      {...(isSortable ? listeners : {})}
+    >
+      <img
+        alt={item.alt ?? ""}
+        className="size-full object-cover"
+        draggable={false}
+        height={item.size?.height}
+        src={item.src}
+        width={item.size?.width}
+      />
+      {onPreviewRemove ? (
+        <Button
+          aria-label={`Remove ${item.alt ?? "image"}`}
+          className="absolute top-0.5 right-0.5"
+          onClick={(event) => {
+            event.stopPropagation();
+            onPreviewRemove(item, index);
+          }}
+          onPointerDown={(event) => {
+            event.stopPropagation();
+          }}
+          size="icon-sm"
+          type="button"
+          variant="ghost"
+        >
+          <XIcon className="drop-shadow-[0_2px_1px_color-mix(in_oklab,var(--background)_80%,transparent)]" />
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+type SortableFileRowProps = {
+  index: number;
+  isSortable: boolean;
+  item: FileDropPreview;
+  itemKey: string;
+  onPreviewRemove?: (preview: FileDropPreview, index: number) => void;
+};
+
+function SortableFileRow({
+  index,
+  isSortable,
+  item,
+  itemKey,
+  onPreviewRemove,
+}: SortableFileRowProps): React.JSX.Element {
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      disabled: !isSortable,
+      id: itemKey,
+    });
+  const style: React.CSSProperties = {
+    transform: transform ? CSS.Transform.toString(transform) : undefined,
+    transition,
+  };
+  const fileName = item.fileName ?? item.alt ?? "Untitled file";
+
+  return (
+    <div
+      className={cn(
+        "mx-1 flex h-8 min-w-0 items-center gap-2 pr-1 pl-[7px] text-left text-sm text-[color:color-mix(in_oklab,var(--foreground)_86%,transparent)] transition-[background-color,opacity,transform] duration-150 ease-out hover:bg-[color:color-mix(in_oklab,var(--foreground)_3%,transparent)] motion-reduce:transition-none",
+        isSortable && "cursor-grab touch-none select-none",
+        isDragging &&
+          "z-10 cursor-grabbing bg-[color:color-mix(in_oklab,var(--foreground)_5%,transparent)] opacity-90",
+      )}
+      data-file-upload-preview-key={itemKey}
+      data-preview-dragging={isDragging ? "true" : undefined}
+      data-slot="file-upload-file-item"
+      onClick={(event) => {
+        event.stopPropagation();
+      }}
+      ref={setNodeRef}
+      style={style}
+      {...(isSortable ? attributes : {})}
+      {...(isSortable ? listeners : {})}
+    >
+      <PaperclipIcon
+        aria-hidden="true"
+        className="size-4 flex-none text-[color:color-mix(in_oklab,var(--foreground)_48%,transparent)]"
+        weight="regular"
+      />
+      <span
+        className="min-w-0 flex-1 overflow-hidden text-xs whitespace-nowrap [-webkit-mask-image:linear-gradient(to_right,black_calc(100%-20px),transparent)] [mask-image:linear-gradient(to_right,black_calc(100%-20px),transparent)]"
+        title={fileName}
+      >
+        {fileName}
+      </span>
+      {onPreviewRemove ? (
+        <Button
+          aria-label={`Remove ${fileName}`}
+          className="flex-none"
+          onClick={(event) => {
+            event.stopPropagation();
+            onPreviewRemove(item, index);
+          }}
+          onPointerDown={(event) => {
+            event.stopPropagation();
+          }}
+          size="icon-sm"
+          type="button"
+          variant="ghost"
+        >
+          <XIcon className="drop-shadow-[0_2px_1px_color-mix(in_oklab,var(--background)_80%,transparent)]" />
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
 export function FileDropControl({
   accept,
+  assetKind = "image",
   multiple = false,
   onClear,
   onFileSelect,
   onFilesSelect,
   onPreviewRemove,
+  onPreviewReorder,
   preview,
   previews,
 }: FileDropControlProps): React.JSX.Element {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [dragOver, setDragOver] = React.useState(false);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 6,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
   const previewItems = previews ?? (preview ? [preview] : []);
   const hasPreview = previewItems.some((item) => Boolean(item.src));
   const shouldRenderPreviewGrid = multiple && previewItems.length > 1;
+  const shouldRenderFileList = assetKind === "file" && hasPreview;
+  const previewEntries = previewItems.map((item, index) => ({
+    item,
+    key: getPreviewKey(item, index),
+  }));
+  const previewKeys = previewEntries.map((entry) => entry.key);
 
   function handleFiles(fileList: FileList | readonly File[] | undefined): void {
     const files = Array.from(fileList ?? []);
@@ -116,6 +337,11 @@ export function FileDropControl({
     inputRef.current?.click();
   }
 
+  function handleDropTargetClick(event: React.MouseEvent<HTMLDivElement>): void {
+    event.preventDefault();
+    openFileDialog();
+  }
+
   function handleDropTargetKeyDown(event: React.KeyboardEvent<HTMLDivElement>): void {
     if (event.key !== "Enter" && event.key !== " ") {
       return;
@@ -125,6 +351,26 @@ export function FileDropControl({
     openFileDialog();
   }
 
+  function handlePreviewDragEnd(event: DragEndEvent): void {
+    const activeKey = String(event.active.id);
+    const overKey = event.over ? String(event.over.id) : null;
+
+    if (!onPreviewReorder || !overKey || activeKey === overKey) {
+      return;
+    }
+
+    const activeIndex = previewKeys.indexOf(activeKey);
+    const overIndex = previewKeys.indexOf(overKey);
+
+    if (activeIndex < 0 || overIndex < 0 || activeIndex === overIndex) {
+      return;
+    }
+
+    onPreviewReorder(
+      arrayMove(previewEntries, activeIndex, overIndex).map((entry) => entry.item),
+    );
+  }
+
   return (
     <Field className="min-w-0 gap-2">
       <input
@@ -144,18 +390,32 @@ export function FileDropControl({
         aria-label={
           hasPreview
             ? multiple
-              ? "Drop image files"
-              : "Replace image file"
+              ? assetKind === "file"
+                ? "Drop files"
+                : "Drop image files"
+              : assetKind === "file"
+                ? "Replace file"
+                : "Replace image file"
             : multiple
-              ? "Browse image files"
-              : "Browse image file"
+              ? assetKind === "file"
+                ? "Browse files"
+                : "Browse image files"
+              : assetKind === "file"
+                ? "Browse file"
+                : "Browse image file"
         }
         className={cn(
-          "group/file-upload relative flex min-h-16 w-full cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed border-[color:color-mix(in_oklab,var(--border)_18%,transparent)] bg-[color:color-mix(in_oklab,var(--foreground)_3%,transparent)] text-center shadow-none transition-[background-color,border-color,box-shadow] duration-150 ease-out hover:border-[color:color-mix(in_oklab,var(--border)_35%,transparent)] hover:bg-[color:color-mix(in_oklab,var(--foreground)_6%,transparent)] data-[drag-over=true]:border-[color:color-mix(in_oklab,var(--link)_28%,transparent)] data-[drag-over=true]:bg-[color:color-mix(in_oklab,var(--link)_13%,transparent)] data-[drag-over=true]:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--background)]",
-          hasPreview ? "overflow-hidden p-2" : "px-3 py-3",
+          "group/file-upload relative flex min-h-16 w-full cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed border-[color:color-mix(in_oklab,var(--border)_18%,transparent)] bg-[color:color-mix(in_oklab,var(--foreground)_3%,transparent)] text-center shadow-none transition-[background-color,border-color,box-shadow] duration-150 ease-out data-[drag-over=true]:border-[color:color-mix(in_oklab,var(--link)_28%,transparent)] data-[drag-over=true]:bg-[color:color-mix(in_oklab,var(--link)_13%,transparent)] data-[drag-over=true]:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--background)]",
+          !shouldRenderFileList &&
+            "hover:border-[color:color-mix(in_oklab,var(--border)_35%,transparent)] hover:bg-[color:color-mix(in_oklab,var(--foreground)_6%,transparent)]",
+          hasPreview
+            ? shouldRenderFileList
+              ? "overflow-hidden p-1.5"
+              : "overflow-hidden p-2"
+            : "px-3 py-3",
         )}
         data-drag-over={dragOver}
-        onClick={openFileDialog}
+        onClick={handleDropTargetClick}
         onDragEnter={(event) => {
           event.preventDefault();
           setDragOver(true);
@@ -178,45 +438,72 @@ export function FileDropControl({
         role="button"
         tabIndex={0}
       >
-        {shouldRenderPreviewGrid ? (
+        {shouldRenderFileList ? (
+          <div className="w-full" data-slot="file-upload-file-list">
+            <DndContext
+              collisionDetection={closestCenter}
+              onDragEnd={handlePreviewDragEnd}
+              sensors={sensors}
+            >
+              <SortableContext items={previewKeys} strategy={verticalListSortingStrategy}>
+                {previewEntries.map(({ item, key }, index) => (
+                  <React.Fragment key={key}>
+                    <SortableFileRow
+                      index={index}
+                      isSortable={Boolean(onPreviewReorder) && previewEntries.length > 1}
+                      item={item}
+                      itemKey={key}
+                      onPreviewRemove={onPreviewRemove}
+                    />
+                    <div
+                      aria-hidden="true"
+                      className="mx-1 h-px bg-[color:color-mix(in_oklab,var(--border)_5%,transparent)]"
+                      data-slot="file-upload-file-divider"
+                    />
+                  </React.Fragment>
+                ))}
+              </SortableContext>
+            </DndContext>
+            <button
+              aria-label="Add a new file"
+              className="mx-1 box-border flex h-8 w-[calc(100%-0.5rem)] min-w-0 shrink-0 items-center justify-center gap-1.5 px-1 text-xs text-[color:color-mix(in_oklab,var(--foreground)_65%,transparent)] transition-[background-color,color] duration-150 ease-out hover:bg-[color:color-mix(in_oklab,var(--foreground)_3%,transparent)] hover:text-[color:var(--foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ring)]"
+              data-slot="file-upload-add-file"
+              onClick={(event) => {
+                event.stopPropagation();
+                openFileDialog();
+              }}
+              type="button"
+            >
+              <FileDropPlusGlyph className="size-3.5" />
+              <span className="font-medium">Add a new file</span>
+            </button>
+          </div>
+        ) : shouldRenderPreviewGrid ? (
           <div
             className="grid w-full grid-cols-4 gap-2"
             data-slot="file-upload-preview-grid"
           >
-            {previewItems.map((item, index) => (
-              <div
-                className="relative aspect-square min-w-0 overflow-hidden rounded-[calc(var(--radius-lg)-4px)] bg-[color:color-mix(in_oklab,var(--foreground)_6%,transparent)]"
-                data-slot="file-upload-preview-item"
-                key={item.id ?? `${item.src}-${index}`}
-              >
-                <img
-                  alt={item.alt ?? ""}
-                  className="size-full object-cover"
-                  draggable={false}
-                  height={item.size?.height}
-                  src={item.src}
-                  width={item.size?.width}
-                />
-                {onPreviewRemove ? (
-                  <Button
-                    aria-label={`Remove ${item.alt ?? "image"}`}
-                    className="absolute top-1 right-1"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      onPreviewRemove(item, index);
-                    }}
-                    size="icon-sm"
-                    type="button"
-                    variant="ghost"
-                  >
-                    <XIcon className="drop-shadow-[0_2px_1px_color-mix(in_oklab,var(--background)_80%,transparent)]" />
-                  </Button>
-                ) : null}
-              </div>
-            ))}
+            <DndContext
+              collisionDetection={closestCenter}
+              onDragEnd={handlePreviewDragEnd}
+              sensors={sensors}
+            >
+              <SortableContext items={previewKeys} strategy={rectSortingStrategy}>
+                {previewEntries.map(({ item, key }, index) => (
+                  <SortablePreviewTile
+                    index={index}
+                    isSortable={Boolean(onPreviewReorder)}
+                    item={item}
+                    itemKey={key}
+                    key={key}
+                    onPreviewRemove={onPreviewRemove}
+                  />
+                ))}
+              </SortableContext>
+            </DndContext>
             <button
               aria-label="Add image files"
-              className="flex aspect-square min-w-0 items-center justify-center rounded-[calc(var(--radius-lg)-4px)] border border-[color:color-mix(in_oklab,var(--border)_5%,transparent)] bg-[color:color-mix(in_oklab,var(--foreground)_4%,transparent)] text-[color:color-mix(in_oklab,var(--foreground)_65%,transparent)] transition-[background-color,border-color,color] duration-150 ease-out hover:border-[color:color-mix(in_oklab,var(--border)_35%,transparent)] hover:bg-[color:color-mix(in_oklab,var(--foreground)_7%,transparent)] hover:text-[color:var(--foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ring)]"
+              className="flex aspect-square min-w-0 items-center justify-center rounded-[calc(var(--radius-lg)-4px)] border border-[color:color-mix(in_oklab,var(--border)_5%,transparent)] bg-[color:color-mix(in_oklab,var(--foreground)_4%,transparent)] text-[color:color-mix(in_oklab,var(--foreground)_65%,transparent)] transition-[background-color,border-color,color] duration-150 ease-out hover:border-[color:color-mix(in_oklab,var(--border)_8%,transparent)] hover:bg-[color:color-mix(in_oklab,var(--foreground)_9%,transparent)] hover:text-[color:var(--foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ring)]"
               data-slot="file-upload-add-preview"
               onClick={(event) => {
                 event.stopPropagation();
@@ -224,7 +511,7 @@ export function FileDropControl({
               }}
               type="button"
             >
-              <PlusIcon className="size-4" weight="regular" />
+              <FileDropPlusGlyph className="size-3.5" />
             </button>
           </div>
         ) : hasPreview ? (
@@ -263,8 +550,17 @@ export function FileDropControl({
               weight="light"
             />
             <p className="m-0 flex max-w-full flex-col text-xs leading-tight text-[color:color-mix(in_oklab,var(--foreground)_60%,transparent)] transition-colors duration-150 ease-out group-hover/file-upload:text-[color:color-mix(in_oklab,var(--foreground)_85%,transparent)] group-data-[drag-over=true]/file-upload:text-[color:var(--link)]">
-              <span>Click to upload an image</span>
-              <span>or drag it onto the canvas</span>
+              {assetKind === "file" ? (
+                <>
+                  <span>Click to upload a file</span>
+                  <span>or drag it onto the canvas</span>
+                </>
+              ) : (
+                <>
+                  <span>Click to upload an image</span>
+                  <span>or drag it onto the canvas</span>
+                </>
+              )}
             </p>
           </>
         )}

package/templates/ui/components/controls/file-drop/index.ts

@@ -2,4 +2,4 @@
 
 export { FileDropControl } from "./file-drop-control";
 export type { FileDropControlProps } from "./file-drop-control";
-export type { FileDropPreview } from "./file-drop-control";
+export type { FileDropAssetKind, FileDropPreview } from "./file-drop-control";

package/templates/ui/components/controls/font-picker/font-picker-control.tsx

@@ -92,7 +92,6 @@ const defaultFontPickerFontSizePx = 16;
 const defaultFontPickerColor = "#FFFFFF";
 const defaultFontPickerOpacity = 100;
 const minFontPickerFontSizePx = 1;
-const maxFontPickerFontSizePx = 512;
 
 const menuItemInteractionClassName =
   "hover:bg-[color:color-mix(in_oklab,var(--muted-foreground)_10%,transparent)] hover:text-[color:var(--foreground)] focus:bg-[color:color-mix(in_oklab,var(--muted-foreground)_10%,transparent)] focus:text-[color:var(--foreground)]";
@@ -254,10 +253,7 @@ function normalizeFontPickerFontSize(value: unknown): number {
     return defaultFontPickerFontSizePx;
   }
 
-  return Math.min(
-    maxFontPickerFontSizePx,
-    Math.max(minFontPickerFontSizePx, Math.round(value)),
-  );
+  return Math.max(minFontPickerFontSizePx, Math.round(value));
 }
 
 function getFontFamilyStyle(font: FontPickerFontCatalogEntry | null): React.CSSProperties | undefined {
@@ -1131,7 +1127,6 @@ export function FontPickerControl({
             aria-label="Font size"
             className="[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
             disabled={disabled}
-            max={maxFontPickerFontSizePx}
             min={minFontPickerFontSizePx}
             onBlur={() => commitFontSizeDraft()}
             onChange={(event) => setFontSizeDraft(event.target.value)}

package/templates/ui/components/controls/index.ts

@@ -84,6 +84,14 @@ export type {
   ChannelMixerControlProps as ChannelMixerProps,
   ChannelMixerValues,
 } from "./channel-mixer";
+export {
+  CollectionActionsControl,
+  CollectionActionsControl as CollectionActions,
+} from "./collection-actions";
+export type {
+  CollectionActionsControlProps,
+  CollectionActionsControlProps as CollectionActionsProps,
+} from "./collection-actions";
 export { createControlHistoryGroupId } from "./control-types";
 export type {
   ControlChangeHistoryMode,
@@ -107,6 +115,7 @@ export type {
 } from "./curves";
 export { FileDropControl, FileDropControl as FileDrop } from "./file-drop";
 export type {
+  FileDropAssetKind,
   FileDropControlProps,
   FileDropControlProps as FileDropProps,
   FileDropPreview,

package/templates/ui/components/panel/panel-section.tsx

@@ -109,6 +109,10 @@ function PanelSectionCollapsibleBody({
 }): React.JSX.Element | null {
   const [shouldRender, setShouldRender] = React.useState(!collapsed);
   const [isVisuallyCollapsed, setIsVisuallyCollapsed] = React.useState(collapsed);
+  const suppressControlTransitions =
+    useInitialPanelSectionControlTransitionSuppression(
+      `${collapsed ? "collapsed" : "expanded"}:${shouldRender ? "mounted" : "unmounted"}`,
+    );
 
   React.useEffect(() => {
     if (collapsed) {
@@ -155,11 +159,59 @@ function PanelSectionCollapsibleBody({
       data-slot="panel-section-collapsible-body"
       onTransitionEnd={handleTransitionEnd}
     >
-      <div className="min-h-0 overflow-hidden">{children}</div>
+      <div
+        className="min-h-0 overflow-hidden"
+        data-toolcraft-controls-mounting={
+          suppressControlTransitions ? "true" : undefined
+        }
+      >
+        {children}
+      </div>
     </div>
   );
 }
 
+function useInitialPanelSectionControlTransitionSuppression(
+  dependency: unknown,
+): boolean {
+  const [suppressionState, setSuppressionState] = React.useState(() => ({
+    dependency,
+    isSuppressing: true,
+  }));
+
+  React.useEffect(() => {
+    setSuppressionState({ dependency, isSuppressing: true });
+
+    if (typeof window === "undefined") {
+      return undefined;
+    }
+
+    if (typeof window.requestAnimationFrame !== "function") {
+      const timeout = window.setTimeout(() => {
+        setSuppressionState({ dependency, isSuppressing: false });
+      }, 0);
+
+      return () => window.clearTimeout(timeout);
+    }
+
+    let secondFrame = 0;
+    const firstFrame = window.requestAnimationFrame(() => {
+      secondFrame = window.requestAnimationFrame(() => {
+        setSuppressionState({ dependency, isSuppressing: false });
+      });
+    });
+
+    return () => {
+      window.cancelAnimationFrame(firstFrame);
+      window.cancelAnimationFrame(secondFrame);
+    };
+  }, [dependency]);
+
+  return (
+    suppressionState.dependency !== dependency || suppressionState.isSuppressing
+  );
+}
+
 function getPanelSectionChildKey(
   child: React.ReactNode,
   index: number,

package/templates/ui/index.ts

@@ -12,6 +12,7 @@ export {
   ChannelMixer,
   Checkbox,
   CodeTextarea,
+  CollectionActions,
   Color,
   ColorOpacity,
   ColorValue,