@pixel-point/toolcraft 0.0.8 → 0.0.11

package/templates/ui/components/controls/color/palette-control.tsx

@@ -3,6 +3,10 @@
 import * as React from "react";
 
 import { cn } from "../../../lib/utils";
+import {
+  createControlHistoryGroupId,
+  type ControlChangeMeta,
+} from "../control-types";
 import {
   PALETTE_SHADE_STEPS,
   STYLE_GUIDE_PRIMARY_FAMILY_OPTIONS,
@@ -21,7 +25,7 @@ export {
 };
 export type { PaletteColorFamily, PaletteControlValue, PaletteShadeStep };
 
-export type PaletteControlChangeMeta = {
+export type PaletteControlChangeMeta = ControlChangeMeta & {
   stage: "live" | "commit";
   hex: string;
 };
@@ -91,6 +95,7 @@ export function PaletteControl({
   const pendingPersistRef = React.useRef<PaletteControlValue | null>(null);
   const clickCommitTimeoutRef = React.useRef<number | null>(null);
   const persistTimeoutRef = React.useRef<number | null>(null);
+  const liveHistoryGroupRef = React.useRef<string | null>(null);
   const isInteractingRef = React.useRef(false);
   const shadeTrackRef = React.useRef<HTMLDivElement | null>(null);
   const onValueChangeRef = React.useRef(onValueChange);
@@ -148,12 +153,34 @@ export function PaletteControl({
     persistTimeoutRef.current = null;
   }, []);
 
+  const getLiveHistoryMeta = React.useCallback((): ControlChangeMeta => {
+    liveHistoryGroupRef.current ??= createControlHistoryGroupId("palette");
+
+    return {
+      history: "merge",
+      historyGroup: liveHistoryGroupRef.current,
+    };
+  }, []);
+
+  const finishLiveHistoryGroup = React.useCallback(() => {
+    liveHistoryGroupRef.current = null;
+  }, []);
+
   const emitChange = React.useCallback(
     (nextValue: PaletteControlValue, stage: PaletteControlChangeMeta["stage"]) => {
       const hex = getPaletteHex(nextValue);
-      onValueChangeRef.current?.(nextValue, { stage, hex });
+      const historyMeta =
+        stage === "live" || liveHistoryGroupRef.current
+          ? getLiveHistoryMeta()
+          : undefined;
+
+      onValueChangeRef.current?.(nextValue, {
+        ...historyMeta,
+        stage,
+        hex,
+      });
     },
-    [],
+    [getLiveHistoryMeta],
   );
 
   const syncOptimisticValue = React.useCallback((nextValue: PaletteControlValue) => {
@@ -174,6 +201,7 @@ export function PaletteControl({
       if (options?.immediate) {
         pendingPersistRef.current = null;
         onCommitRef.current?.(pendingPersist, getPaletteHex(pendingPersist));
+        finishLiveHistoryGroup();
         setInteractionState(false);
         return true;
       }
@@ -184,17 +212,19 @@ export function PaletteControl({
         pendingPersistRef.current = null;
 
         if (!nextPersist) {
+          finishLiveHistoryGroup();
           setInteractionState(false);
           return;
         }
 
         onCommitRef.current?.(nextPersist, getPaletteHex(nextPersist));
+        finishLiveHistoryGroup();
         setInteractionState(false);
       }, PERSIST_SETTLE_MS);
 
       return true;
     },
-    [clearPersistTimeout, setInteractionState],
+    [clearPersistTimeout, finishLiveHistoryGroup, setInteractionState],
   );
 
   const flushPendingCommit = React.useCallback((options?: { persistImmediately?: boolean }) => {

package/templates/ui/components/controls/color/style-guide-color-picker-logic.ts

@@ -459,9 +459,14 @@ export function useHueHandlers({
 
   const handleHuePreviewChange = useCallback(
     (nextHue: number) => {
-      applyOptimisticColor({ h: nextHue, s: latestHsvRef.current.s, v: latestHsvRef.current.v });
+      const nextHex = applyOptimisticColor({
+        h: nextHue,
+        s: latestHsvRef.current.s,
+        v: latestHsvRef.current.v,
+      });
+      emitChange(nextHex);
     },
-    [applyOptimisticColor, latestHsvRef],
+    [applyOptimisticColor, emitChange, latestHsvRef],
   );
 
   const handleHueCommit = useCallback(

package/templates/ui/components/controls/color/style-guide-color-picker.tsx

@@ -170,9 +170,9 @@ function useRgbBlueHandlers({
 
   const handleSliderPreviewChange = useCallback(
     (nextValue: number) => {
-      applyBlueChannel(nextValue);
+      emitChange(applyBlueChannel(nextValue));
     },
-    [applyBlueChannel],
+    [applyBlueChannel, emitChange],
   );
 
   const handleSliderCommit = useCallback(

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

@@ -52,6 +52,7 @@ export {
   getSurfaceHsvColor,
   PaletteControl,
   PaletteControl as Palette,
+  StyleGuideColorPicker,
 } from "./color";
 export type {
   ColorFormatMode,
@@ -118,6 +119,8 @@ export type {
   FileDropAssetKind,
   FileDropControlProps,
   FileDropControlProps as FileDropProps,
+  FileDropImageTransform,
+  FileDropImageTransformOperation,
   FileDropPreview,
 } from "./file-drop";
 export {
@@ -197,5 +200,6 @@ export type {
   VectorControlProps as VectorProps,
   VectorControlValue,
   VectorControlValue as VectorValue,
+  VectorPadCoordinateMode,
   VectorPadVariant,
 } from "./vector";

package/templates/ui/components/controls/range-input/range-input-control.tsx

@@ -12,6 +12,7 @@ export type RangeInputControlProps = {
   end: string;
   name: string;
   onValueChange?: ControlValueChangeHandler<{ start: string; end: string }>;
+  showLabel?: boolean;
   start: string;
 };
 
@@ -88,6 +89,7 @@ export function RangeInputControl({
   end,
   name,
   onValueChange,
+  showLabel = true,
   start,
 }: RangeInputControlProps): React.JSX.Element {
   const [currentValue, setCurrentValue] = React.useState({ end, start });
@@ -142,7 +144,7 @@ export function RangeInputControl({
   if (shouldUseFullWidthRangeInputs(start, end)) {
     return (
       <Field className="h-fit min-w-0 gap-2">
-        <ControlFieldLabel>{name}</ControlFieldLabel>
+        {showLabel ? <ControlFieldLabel>{name}</ControlFieldLabel> : null}
         <RangeInputs
           className="w-full"
           end={currentValue.end}
@@ -157,10 +159,16 @@ export function RangeInputControl({
   }
 
   return (
-    <Field className="h-fit min-w-0 items-center justify-between gap-3" orientation="horizontal">
-      <ControlFieldLabel>{name}</ControlFieldLabel>
+    <Field
+      className={cn(
+        "h-fit min-w-0",
+        showLabel ? "items-center justify-between gap-3" : undefined,
+      )}
+      orientation={showLabel ? "horizontal" : "vertical"}
+    >
+      {showLabel ? <ControlFieldLabel>{name}</ControlFieldLabel> : null}
       <RangeInputs
-        className="w-1/2 shrink-0"
+        className={showLabel ? "w-1/2 shrink-0" : "w-full"}
         end={currentValue.end}
         name={name}
         onCancel={cancelDraft}

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

@@ -21,16 +21,15 @@ export type SelectControlInput = {
   name: string;
   onValueChange?: (value: string) => void;
   options: readonly ControlOption[];
+  showLabel?: boolean;
   value: string;
 };
 
 type StaticSelectSize = "sm" | "default" | "lg" | "xl";
-type SelectControlFieldLayout = "auto" | "stacked";
 
 type SelectControlSingleProps = SelectControlInput & {
   inputs?: never;
   inputsPerRow?: never;
-  layout?: SelectControlFieldLayout;
 };
 
 type SelectControlGroupProps = {
@@ -43,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 {
@@ -141,21 +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);
@@ -168,22 +160,14 @@ function SelectControlField({
 
   return (
     <Field
-      className={cn(
-        isStacked
-          ? "h-fit min-w-0 gap-2"
-          : compactHorizontalFieldClassName,
-      )}
-      orientation={isStacked ? "vertical" : "horizontal"}
+      className={cn("h-fit min-w-0", showLabel && "gap-2")}
+      orientation="vertical"
       ref={fieldRef}
     >
-      <ControlFieldLabel>{name}</ControlFieldLabel>
-      <div
-        className={cn(
-          "min-w-0",
-          isStacked ? "w-full" : "w-1/2 shrink-0",
-        )}
-      >
+      {showLabel ? <ControlFieldLabel>{name}</ControlFieldLabel> : null}
+      <div className="min-w-0 w-full">
         <StaticSelect
+          ariaLabel={showLabel ? undefined : name}
           onValueChange={updateValue}
           options={options}
           popupMaxWidth={popupMaxWidth}
@@ -211,7 +195,6 @@ export function SelectControl(
         {props.inputs.map((input, index) => (
           <SelectControlField
             key={`${input.name}-${index}`}
-            layout="stacked"
             {...input}
           />
         ))}

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

@@ -27,7 +27,6 @@ const compactSliderValueUnits = new Set([
   "vh",
   "vmin",
   "vmax",
-  "x",
   "s",
   "ms",
 ]);

package/templates/ui/components/controls/text-input/text-input-control.tsx

@@ -15,6 +15,7 @@ export type TextInputControlInput = {
   defaultValue?: string;
   name: string;
   onValueChange?: ControlValueChangeHandler<string>;
+  showLabel?: boolean;
   value: string;
 };
 
@@ -51,6 +52,7 @@ function TextInputControlField({
   defaultValue,
   name,
   onValueChange,
+  showLabel = true,
   value,
 }: TextInputControlInput): React.JSX.Element {
   const [currentValue, setCurrentValue] = React.useState(value);
@@ -101,8 +103,9 @@ function TextInputControlField({
 
   return (
     <Field className="min-w-0 gap-2">
-      <ControlFieldLabel>{name}</ControlFieldLabel>
+      {showLabel ? <ControlFieldLabel>{name}</ControlFieldLabel> : null}
       <Input
+        aria-label={showLabel ? undefined : name}
         className="font-mono"
         onBlur={commitOnBlur ? () => commitValue() : finishLiveHistoryGroup}
         onChange={(event) => updateValue(event.target.value)}

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

@@ -4,5 +4,6 @@ export { VectorControl } from "./vector-control";
 export type {
   VectorControlProps,
   VectorControlValue,
+  VectorPadCoordinateMode,
   VectorPadVariant,
 } from "./vector-control";