@pixel-point/toolcraft 0.0.9 → 0.0.11

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

@@ -19,13 +19,33 @@ import {
   useSortable,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { CloudArrowUpIcon, PaperclipIcon, XIcon } from "@phosphor-icons/react";
+import {
+  CloudArrowUpIcon,
+  PaperclipIcon,
+  XIcon,
+} from "@phosphor-icons/react";
 
 import { cn } from "../../../lib/utils";
+import {
+  ActionsControl,
+  type ActionControlOption,
+} from "../actions/actions-control";
 import { Button, Field } from "../../primitives";
 
 export type FileDropAssetKind = "file" | "image";
 
+export type FileDropImageTransform = {
+  flipHorizontal?: boolean;
+  flipVertical?: boolean;
+  rotationDeg?: number;
+};
+
+export type FileDropImageTransformOperation =
+  | "flip-horizontal"
+  | "flip-vertical"
+  | "rotate-left"
+  | "rotate-right";
+
 export type FileDropPreview = {
   alt?: string;
   assetKind?: FileDropAssetKind;
@@ -36,6 +56,7 @@ export type FileDropPreview = {
     width: number;
   };
   src: string;
+  transform?: FileDropImageTransform;
 };
 
 export type FileDropControlProps = {
@@ -47,10 +68,16 @@ export type FileDropControlProps = {
   onFilesSelect?: (files: File[]) => void;
   onPreviewRemove?: (preview: FileDropPreview, index: number) => void;
   onPreviewReorder?: (orderedPreviews: FileDropPreview[]) => void;
+  onPreviewTransform?: (
+    preview: FileDropPreview,
+    operation: FileDropImageTransformOperation,
+  ) => void;
   preview?: FileDropPreview;
   previews?: readonly FileDropPreview[];
 };
 
+const singleImagePreviewMaxHeight = 196;
+
 function isDragLeavingCurrentTarget(event: React.DragEvent<HTMLElement>): boolean {
   const nextTarget = event.relatedTarget;
 
@@ -88,15 +115,76 @@ function getFileInputAccept(accept: string): string {
     .join(",");
 }
 
-function getPreviewImageStyle(size: FileDropPreview["size"]): React.CSSProperties {
+function normalizeImageRotation(rotationDeg: number | undefined): 0 | 90 | 180 | 270 {
+  const normalized = ((Math.round((rotationDeg ?? 0) / 90) * 90) % 360 + 360) % 360;
+
+  return normalized === 90 || normalized === 180 || normalized === 270 ? normalized : 0;
+}
+
+function getImageTransformStyle(
+  transform: FileDropImageTransform | undefined,
+  options: { center?: boolean; includeRotation?: boolean } = {},
+): React.CSSProperties {
+  const rotationDeg = normalizeImageRotation(transform?.rotationDeg);
+  const scaleX = transform?.flipHorizontal ? -1 : 1;
+  const scaleY = transform?.flipVertical ? -1 : 1;
+  const transformSteps: string[] = [];
+
+  if (options.center) {
+    transformSteps.push("translate(-50%, -50%)");
+  }
+
+  if (options.includeRotation !== false && rotationDeg !== 0) {
+    transformSteps.push(`rotate(${rotationDeg}deg)`);
+  }
+
+  if (scaleX !== 1 || scaleY !== 1) {
+    transformSteps.push(`scale(${scaleX}, ${scaleY})`);
+  }
+
+  if (transformSteps.length === 0) {
+    return {};
+  }
+
+  return {
+    transform: transformSteps.join(" "),
+  };
+}
+
+function getPreviewFrameStyle(
+  size: FileDropPreview["size"],
+): React.CSSProperties {
   if (!size || size.height <= 0 || size.width <= 0) {
     return { width: "100%" };
   }
 
-  const maxWidth = Math.max(1, (196 * size.width) / size.height);
+  return {
+    aspectRatio: `${size.width} / ${size.height}`,
+    maxHeight: `${singleImagePreviewMaxHeight}px`,
+    width: "100%",
+  };
+}
+
+function isPreviewQuarterTurn(transform?: FileDropImageTransform): boolean {
+  const rotationDeg = normalizeImageRotation(transform?.rotationDeg);
+
+  return rotationDeg === 90 || rotationDeg === 270;
+}
+
+function getPreviewImageStyle(
+  size: FileDropPreview["size"],
+  transform?: FileDropImageTransform,
+): React.CSSProperties {
+  const rotationDeg = normalizeImageRotation(transform?.rotationDeg);
+  const rotatedQuarterTurn = rotationDeg === 90 || rotationDeg === 270;
+  const rotatedWidth =
+    size && size.height > 0 && size.width > 0 && rotatedQuarterTurn
+      ? `${(Math.min(size.width / size.height, size.height / size.width) * 100).toFixed(4)}%`
+      : "100%";
 
   return {
-    width: `min(100%, ${maxWidth.toFixed(2)}px)`,
+    ...getImageTransformStyle(transform, { center: true }),
+    ...(rotatedQuarterTurn ? { width: rotatedWidth } : {}),
   };
 }
 
@@ -119,12 +207,30 @@ function FileDropPlusGlyph({ className }: { className?: string }): React.JSX.Ele
   );
 }
 
+const imageTransformActions = [
+  { ariaLabel: "90° Right", icon: "rotate-cw", label: "90°", value: "rotate-right" },
+  {
+    ariaLabel: "Flip horizontal",
+    icon: "flip-horizontal",
+    label: "Flip H",
+    value: "flip-horizontal",
+  },
+  {
+    ariaLabel: "Flip vertical",
+    icon: "flip-vertical",
+    label: "Flip V",
+    value: "flip-vertical",
+  },
+] satisfies readonly ActionControlOption[];
+
 type SortablePreviewTileProps = {
   index: number;
   isSortable: boolean;
   item: FileDropPreview;
   itemKey: string;
   onPreviewRemove?: (preview: FileDropPreview, index: number) => void;
+  onPreviewSelect?: (preview: FileDropPreview) => void;
+  selected?: boolean;
 };
 
 function SortablePreviewTile({
@@ -133,6 +239,8 @@ function SortablePreviewTile({
   item,
   itemKey,
   onPreviewRemove,
+  onPreviewSelect,
+  selected = false,
 }: SortablePreviewTileProps): React.JSX.Element {
   const { attributes, isDragging, listeners, setNodeRef, transform, transition } =
     useSortable({
@@ -157,14 +265,18 @@ function SortablePreviewTile({
         "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)]",
+        selected &&
+          "ring-2 ring-[color:color-mix(in_oklab,var(--link)_72%,transparent)] ring-offset-2 ring-offset-[color:var(--background)]",
         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-selected={selected ? "true" : undefined}
       data-slot="file-upload-preview-item"
       onClick={(event) => {
         event.stopPropagation();
+        onPreviewSelect?.(item);
       }}
       ref={setNodeRef}
       style={style}
@@ -177,6 +289,7 @@ function SortablePreviewTile({
         draggable={false}
         height={item.size?.height}
         src={item.src}
+        style={getImageTransformStyle(item.transform)}
         width={item.size?.width}
       />
       {onPreviewRemove ? (
@@ -288,11 +401,13 @@ export function FileDropControl({
   onFilesSelect,
   onPreviewRemove,
   onPreviewReorder,
+  onPreviewTransform,
   preview,
   previews,
 }: FileDropControlProps): React.JSX.Element {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [dragOver, setDragOver] = React.useState(false);
+  const [selectedPreviewKey, setSelectedPreviewKey] = React.useState<string | null>(null);
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -312,6 +427,26 @@ export function FileDropControl({
     key: getPreviewKey(item, index),
   }));
   const previewKeys = previewEntries.map((entry) => entry.key);
+  const requiresImageSelection = assetKind === "image" && multiple && previewEntries.length > 1;
+  const selectedPreviewEntry = requiresImageSelection
+    ? previewEntries.find((entry) => entry.key === selectedPreviewKey)
+    : previewEntries[0];
+  const shouldRenderImageActions =
+    assetKind === "image" &&
+    hasPreview &&
+    Boolean(onPreviewTransform) &&
+    Boolean(selectedPreviewEntry) &&
+    (!requiresImageSelection || selectedPreviewKey !== null);
+
+  React.useEffect(() => {
+    if (!selectedPreviewKey) {
+      return;
+    }
+
+    if (!requiresImageSelection || !previewKeys.includes(selectedPreviewKey)) {
+      setSelectedPreviewKey(null);
+    }
+  }, [previewKeys, requiresImageSelection, selectedPreviewKey]);
 
   function handleFiles(fileList: FileList | readonly File[] | undefined): void {
     const files = Array.from(fileList ?? []);
@@ -371,8 +506,16 @@ export function FileDropControl({
     );
   }
 
+  function runImageTransform(operation: FileDropImageTransformOperation): void {
+    if (!selectedPreviewEntry) {
+      return;
+    }
+
+    onPreviewTransform?.(selectedPreviewEntry.item, operation);
+  }
+
   return (
-    <Field className="min-w-0 gap-2">
+    <Field className="min-w-0" style={{ gap: "6px" }}>
       <input
         accept={getFileInputAccept(accept)}
         aria-hidden="true"
@@ -497,6 +640,13 @@ export function FileDropControl({
                     itemKey={key}
                     key={key}
                     onPreviewRemove={onPreviewRemove}
+                    onPreviewSelect={(preview) => {
+                      const nextKey = getPreviewKey(preview, index);
+                      setSelectedPreviewKey((currentKey) =>
+                        currentKey === nextKey ? null : nextKey,
+                      );
+                    }}
+                    selected={selectedPreviewKey === key}
                   />
                 ))}
               </SortableContext>
@@ -517,15 +667,26 @@ export function FileDropControl({
         ) : hasPreview ? (
           <>
             {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}
-              />
+              <div
+                className="relative w-full max-w-full overflow-hidden rounded-[calc(var(--radius-lg)-4px)]"
+                data-slot="file-upload-preview-frame"
+                style={getPreviewFrameStyle(previewItems[0].size)}
+              >
+                <img
+                  alt={previewItems[0].alt ?? ""}
+                  className={cn(
+                    "absolute top-1/2 left-1/2 block h-auto object-contain",
+                    isPreviewQuarterTurn(previewItems[0].transform)
+                      ? "max-w-none"
+                      : "max-h-full max-w-full",
+                  )}
+                  draggable={false}
+                  height={previewItems[0].size?.height}
+                  src={previewItems[0].src}
+                  style={getPreviewImageStyle(previewItems[0].size, previewItems[0].transform)}
+                  width={previewItems[0].size?.width}
+                />
+              </div>
             ) : null}
             {onClear ? (
               <Button
@@ -565,6 +726,17 @@ export function FileDropControl({
           </>
         )}
       </div>
+      {shouldRenderImageActions ? (
+        <ActionsControl
+          actions={imageTransformActions}
+          buttonColumns={3}
+          name="Image transforms"
+          onAction={(operation) =>
+            runImageTransform(operation as FileDropImageTransformOperation)
+          }
+          showLabel={false}
+        />
+      ) : null}
     </Field>
   );
 }

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

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

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

@@ -119,6 +119,8 @@ export type {
   FileDropAssetKind,
   FileDropControlProps,
   FileDropControlProps as FileDropProps,
+  FileDropImageTransform,
+  FileDropImageTransformOperation,
   FileDropPreview,
 } from "./file-drop";
 export {

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

@@ -1,5 +1,7 @@
 import { applySliderValueLabelUnit } from "../slider/slider-value";
 
+const rangeSeparatorPattern = /(\d)\s*[-‐‑‒–—−]\s*(?=\d)/g;
+
 export function formatRangeSliderValue(
   value: readonly number[],
   unit?: string,
@@ -44,7 +46,7 @@ export function parseRangeSliderDraft(
     step: number;
   },
 ): [number, number] | null {
-  const normalizedDraftValue = draftValue.replace(/(\d)\s*-\s*(?=\d)/g, "$1 ");
+  const normalizedDraftValue = draftValue.replace(rangeSeparatorPattern, "$1 ");
   const values = Array.from(
     normalizedDraftValue.matchAll(/-?\d+(?:[.,]\d+)?/g),
     ([match]) => Number(match.replace(",", ".")),

package/templates/ui/components/controls/select/select-control.tsx

@@ -26,12 +26,10 @@ export type SelectControlInput = {
 };
 
 type StaticSelectSize = "sm" | "default" | "lg" | "xl";
-type SelectControlFieldLayout = "auto" | "stacked";
 
 type SelectControlSingleProps = SelectControlInput & {
   inputs?: never;
   inputsPerRow?: never;
-  layout?: SelectControlFieldLayout;
 };
 
 type SelectControlGroupProps = {
@@ -44,7 +42,6 @@ export type SelectControlProps =
   | SelectControlSingleProps
   | SelectControlGroupProps;
 
-const compactHorizontalFieldClassName = "h-fit min-w-0 items-center justify-between gap-3";
 const WIDE_SELECT_OPTION_LABEL_LENGTH = 32;
 
 function hasWideSelectContent(options: readonly ControlOption[]): boolean {
@@ -142,22 +139,15 @@ export function StaticSelect({
 }
 
 function SelectControlField({
-  layout = "auto",
   name,
   onValueChange,
   options,
   showLabel = true,
   value,
-}: SelectControlInput & {
-  layout?: SelectControlFieldLayout;
-}): React.JSX.Element {
+}: SelectControlInput): React.JSX.Element {
   const fieldRef = React.useRef<HTMLDivElement>(null);
   const popupMaxWidth = useMeasuredElementWidth(fieldRef);
   const [currentValue, setCurrentValue] = React.useState(value);
-  const selected = options.find((option) => option.value === currentValue) ?? options[0];
-  const hasLongSelectedValue =
-    (selected?.label.length ?? 0) >= WIDE_SELECT_OPTION_LABEL_LENGTH;
-  const isStacked = layout === "stacked" || hasLongSelectedValue;
 
   React.useEffect(() => {
     setCurrentValue(value);
@@ -170,23 +160,12 @@ function SelectControlField({
 
   return (
     <Field
-      className={cn(
-        !showLabel
-          ? "h-fit min-w-0"
-          : isStacked
-          ? "h-fit min-w-0 gap-2"
-          : compactHorizontalFieldClassName,
-      )}
-      orientation={!showLabel || isStacked ? "vertical" : "horizontal"}
+      className={cn("h-fit min-w-0", showLabel && "gap-2")}
+      orientation="vertical"
       ref={fieldRef}
     >
       {showLabel ? <ControlFieldLabel>{name}</ControlFieldLabel> : null}
-      <div
-        className={cn(
-          "min-w-0",
-          !showLabel || isStacked ? "w-full" : "w-1/2 shrink-0",
-        )}
-      >
+      <div className="min-w-0 w-full">
         <StaticSelect
           ariaLabel={showLabel ? undefined : name}
           onValueChange={updateValue}
@@ -216,7 +195,6 @@ export function SelectControl(
         {props.inputs.map((input, index) => (
           <SelectControlField
             key={`${input.name}-${index}`}
-            layout="stacked"
             {...input}
           />
         ))}

package/templates/ui/components/controls/vector/vector-control.tsx

@@ -123,13 +123,25 @@ function getVectorPoint(
 }
 
 function getVectorValueLabel(x: string, y: string): string {
-  return `${x}, ${y}`;
+  return `${formatVectorPadCoordinate(x)}, ${formatVectorPadCoordinate(y)}`;
 }
 
 function normalizeVectorCoordinate(value: string | undefined): string {
   return typeof value === "string" && value.trim() ? value : "0.00";
 }
 
+function formatVectorPadCoordinate(value: string | undefined): string {
+  const parsedValue = Number.parseFloat(normalizeVectorCoordinate(value));
+
+  if (!Number.isFinite(parsedValue)) {
+    return "0.00";
+  }
+
+  const roundedValue = Math.abs(parsedValue) < 0.005 ? 0 : clamp(parsedValue, -1, 1);
+
+  return roundedValue.toFixed(2);
+}
+
 function parseVectorValueDraft(value: string): VectorControlValue | null {
   const matches = value.match(/[+-]?(?:\d+(?:[.,]\d+)?|[.,]\d+)/g);
 
@@ -307,6 +319,7 @@ function VectorPadHandle({ isDragging }: { isDragging: boolean }): React.JSX.Ele
 }
 
 function VectorPadField({
+  defaultValue,
   name,
   onValueChange,
   padCoordinateMode,
@@ -316,8 +329,8 @@ function VectorPadField({
   y,
 }: VectorControlProps): React.JSX.Element {
   const [isPointerDragging, setIsPointerDragging] = React.useState(false);
-  const normalizedX = normalizeVectorCoordinate(x);
-  const normalizedY = normalizeVectorCoordinate(y);
+  const normalizedX = formatVectorPadCoordinate(x);
+  const normalizedY = formatVectorPadCoordinate(y);
   const coordinateMode =
     padCoordinateMode ?? getDefaultPadCoordinateMode(padVariant);
   const point = getVectorPoint(normalizedX, normalizedY, coordinateMode);
@@ -326,6 +339,8 @@ function VectorPadField({
   const axisLockRef = React.useRef<VectorPadAxisLock | null>(null);
   const dragStartRef = React.useRef<VectorPadDragStart | null>(null);
   const liveHistoryGroupRef = React.useRef<string | null>(null);
+  const resetX = formatVectorPadCoordinate(defaultValue?.x);
+  const resetY = formatVectorPadCoordinate(defaultValue?.y);
   const updateVector = (
     nextX: string,
     nextY: string,
@@ -418,15 +433,21 @@ function VectorPadField({
       <button
         aria-label={`${name} X/Y pad`}
         className={cn(
-          "relative w-full cursor-default! touch-none overflow-hidden rounded-[calc(var(--radius)+2px)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--foreground)_4%,transparent),color-mix(in_oklab,var(--foreground)_1%,transparent))] focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--foreground)_12%,transparent)] focus-visible:outline-none",
+          "relative w-full cursor-default! touch-none overflow-hidden rounded-[calc(var(--radius)+2px)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--foreground)_4%,transparent),color-mix(in_oklab,var(--foreground)_1%,transparent))] select-none focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--foreground)_12%,transparent)] focus-visible:outline-none",
           padShape === "square" ? "aspect-square" : "h-[142px]",
         )}
         data-vector-pad-coordinate-mode={coordinateMode}
         data-vector-pad-shape={padShape}
         data-vector-pad-variant={padVariant}
+        onDoubleClick={(event) => {
+          event.preventDefault();
+          stopPointerDrag();
+          updateVector(resetX, resetY);
+        }}
         onLostPointerCapture={stopPointerDrag}
         onPointerCancel={stopPointerDrag}
         onPointerDown={(event) => {
+          event.preventDefault();
           setIsPointerDragging(true);
           axisLockRef.current = null;
           dragStartRef.current = {

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

@@ -85,7 +85,7 @@ function getPanelActionIcon(action: PanelActionOption): ReactNode {
 
   const Icon = panelActionIconComponents[action.icon];
 
-  return <Icon data-icon="inline-start" />;
+  return <Icon data-icon="inline-start" data-icon-name={action.icon} />;
 }
 
 function getPanelActionAriaLabel(