@pixel-point/toolcraft 0.0.4 → 0.0.7

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

@@ -1,13 +1,14 @@
 "use client";
 
 import * as React from "react";
-import { CloudArrowUpIcon, XIcon } from "@phosphor-icons/react";
+import { CloudArrowUpIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 
 import { cn } from "../../../lib/utils";
 import { Button, Field } from "../../primitives";
 
 export type FileDropPreview = {
   alt?: string;
+  id?: string;
   size?: {
     height: number;
     width: number;
@@ -17,9 +18,13 @@ export type FileDropPreview = {
 
 export type FileDropControlProps = {
   accept: string;
+  multiple?: boolean;
   onClear?: () => void;
   onFileSelect?: (file: File) => void;
+  onFilesSelect?: (files: File[]) => void;
+  onPreviewRemove?: (preview: FileDropPreview, index: number) => void;
   preview?: FileDropPreview;
+  previews?: readonly FileDropPreview[];
 };
 
 function isDragLeavingCurrentTarget(event: React.DragEvent<HTMLElement>): boolean {
@@ -73,20 +78,38 @@ function getPreviewImageStyle(size: FileDropPreview["size"]): React.CSSPropertie
 
 export function FileDropControl({
   accept,
+  multiple = false,
   onClear,
   onFileSelect,
+  onFilesSelect,
+  onPreviewRemove,
   preview,
+  previews,
 }: FileDropControlProps): React.JSX.Element {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [dragOver, setDragOver] = React.useState(false);
-  const hasPreview = Boolean(preview?.src);
+  const previewItems = previews ?? (preview ? [preview] : []);
+  const hasPreview = previewItems.some((item) => Boolean(item.src));
+  const shouldRenderPreviewGrid = multiple && previewItems.length > 1;
 
-  function handleFile(file: File | undefined): void {
-    if (!file) {
+  function handleFiles(fileList: FileList | readonly File[] | undefined): void {
+    const files = Array.from(fileList ?? []);
+
+    if (files.length === 0) {
       return;
     }
 
-    onFileSelect?.(file);
+    if (multiple) {
+      if (onFilesSelect) {
+        onFilesSelect(files);
+        return;
+      }
+
+      files.forEach((file) => onFileSelect?.(file));
+      return;
+    }
+
+    onFileSelect?.(files[0]);
   }
 
   function openFileDialog(): void {
@@ -109,15 +132,24 @@ export function FileDropControl({
         aria-hidden="true"
         className="hidden"
         onChange={(event) => {
-          handleFile(event.currentTarget.files?.[0]);
+          handleFiles(event.currentTarget.files ?? undefined);
           event.currentTarget.value = "";
         }}
+        multiple={multiple}
         ref={inputRef}
         tabIndex={-1}
         type="file"
       />
       <div
-        aria-label={hasPreview ? "Replace image file" : "Browse image file"}
+        aria-label={
+          hasPreview
+            ? multiple
+              ? "Drop image files"
+              : "Replace image file"
+            : multiple
+              ? "Browse image files"
+              : "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",
@@ -140,23 +172,74 @@ export function FileDropControl({
         onDrop={(event) => {
           event.preventDefault();
           setDragOver(false);
-          handleFile(event.dataTransfer?.files?.[0]);
+          handleFiles(event.dataTransfer?.files ?? undefined);
         }}
         onKeyDown={handleDropTargetKeyDown}
         role="button"
         tabIndex={0}
       >
-        {hasPreview ? (
+        {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>
+            ))}
+            <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)]"
+              data-slot="file-upload-add-preview"
+              onClick={(event) => {
+                event.stopPropagation();
+                openFileDialog();
+              }}
+              type="button"
+            >
+              <PlusIcon className="size-4" weight="regular" />
+            </button>
+          </div>
+        ) : hasPreview ? (
           <>
-            <img
-              alt={preview?.alt ?? ""}
-              className="block h-auto max-h-[196px] max-w-full rounded-[calc(var(--radius-lg)-4px)] object-contain"
-              draggable={false}
-              height={preview?.size?.height}
-              src={preview?.src}
-              style={getPreviewImageStyle(preview?.size)}
-              width={preview?.size?.width}
-            />
+            {previewItems[0] ? (
+              <img
+                alt={previewItems[0].alt ?? ""}
+                className="block h-auto max-h-[196px] max-w-full rounded-[calc(var(--radius-lg)-4px)] object-contain"
+                draggable={false}
+                height={previewItems[0].size?.height}
+                src={previewItems[0].src}
+                style={getPreviewImageStyle(previewItems[0].size)}
+                width={previewItems[0].size?.width}
+              />
+            ) : null}
             {onClear ? (
               <Button
                 aria-label="Remove image"

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,

package/templates/ui/components/controls/range-slider/range-slider-value.ts

@@ -1,8 +1,11 @@
+import { applySliderValueLabelUnit } from "../slider/slider-value";
+
 export function formatRangeSliderValue(
   value: readonly number[],
   unit?: string,
 ): string {
-  const formatValue = (item: number): string => `${Math.round(item)}${unit ?? ""}`;
+  const formatValue = (item: number): string =>
+    applySliderValueLabelUnit(String(Math.round(item)), unit);
 
   if (value.length >= 2 && value[0] === value[1]) {
     return formatValue(value[0] ?? 0);

package/templates/ui/components/controls/slider/slider-value.ts

@@ -17,19 +17,62 @@ export function formatSliderValue(value: number, step: number): string {
   return String(rounded);
 }
 
+const compactSliderValueUnits = new Set([
+  "%",
+  "°",
+  "px",
+  "em",
+  "rem",
+  "vw",
+  "vh",
+  "vmin",
+  "vmax",
+  "x",
+  "s",
+  "ms",
+]);
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export function getSliderValueUnitSeparator(unit: string): "" | " " {
+  const normalizedUnit = unit.trim();
+
+  if (
+    normalizedUnit === "" ||
+    compactSliderValueUnits.has(normalizedUnit) ||
+    /^[^\p{Letter}\p{Number}]+$/u.test(normalizedUnit)
+  ) {
+    return "";
+  }
+
+  return " ";
+}
+
 export function applySliderValueLabelUnit(
   valueLabel: string,
   unit?: string,
 ): string {
-  if (!unit || typeof parseSliderValueLabel(valueLabel) !== "number") {
+  const normalizedUnit = unit?.trim();
+
+  if (
+    !normalizedUnit ||
+    typeof parseSliderValueLabel(valueLabel) !== "number"
+  ) {
     return valueLabel;
   }
 
-  return valueLabel.replaceAll(/-?\d+(?:\.\d+)?/g, (match, offset) => {
-    const textAfterMatch = valueLabel.slice(offset + match.length).trimStart();
+  const separator = getSliderValueUnitSeparator(normalizedUnit);
+  const unitPattern = new RegExp(
+    `(-?\\d+(?:\\.\\d+)?)(?:\\s*${escapeRegExp(normalizedUnit)})?`,
+    "g",
+  );
 
-    return textAfterMatch.startsWith(unit) ? match : `${match}${unit}`;
-  });
+  return valueLabel.replaceAll(
+    unitPattern,
+    (_match, value: string) => `${value}${separator}${normalizedUnit}`,
+  );
 }
 
 export function formatSliderValueWithUnit(

package/templates/ui/components/primitives/editable-slider-value-label.tsx

@@ -40,6 +40,7 @@ export function EditableSliderValueLabel({
   const [editing, setEditing] = useState(false);
   const editorRef = useRef<HTMLSpanElement>(null);
   const valueLabelRef = useRef(valueLabel);
+  const isEditableValueLabel = hasEditableNumericValueLabel(valueLabel);
   const valueTextClassName = getEditableValueTextClassName({ layout, textAlign });
   const widestValueLabel = getWidestValueLabel(valueLabel, maxValueLabel);
 
@@ -61,7 +62,7 @@ export function EditableSliderValueLabel({
     }
   }, [editing]);
 
-  if (disabled || !onCommit) {
+  if (disabled || !onCommit || !isEditableValueLabel) {
     const valueTextToneClassName = disabled
       ? "text-[color:color-mix(in_oklab,var(--foreground)_60%,transparent)] opacity-60"
       : "text-[color:var(--muted-foreground)]";
@@ -323,6 +324,10 @@ function getWidestValueLabel(valueLabel: string, maxValueLabel?: string): string
   return maxValueLabel;
 }
 
+function hasEditableNumericValueLabel(valueLabel: string): boolean {
+  return /-?\d+(?:\.\d+)?/.test(valueLabel);
+}
+
 function selectEditableText(node: HTMLElement): void {
   const selection = window.getSelection();
 

package/templates/ui/index.ts

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