@pixel-point/toolcraft 0.0.7 → 0.0.9

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/index.ts

@@ -52,6 +52,7 @@ export {
   getSurfaceHsvColor,
   PaletteControl,
   PaletteControl as Palette,
+  StyleGuideColorPicker,
 } from "./color";
 export type {
   ColorFormatMode,
@@ -115,6 +116,7 @@ export type {
 } from "./curves";
 export { FileDropControl, FileDropControl as FileDrop } from "./file-drop";
 export type {
+  FileDropAssetKind,
   FileDropControlProps,
   FileDropControlProps as FileDropProps,
   FileDropPreview,
@@ -196,5 +198,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/select/select-control.tsx

@@ -21,6 +21,7 @@ export type SelectControlInput = {
   name: string;
   onValueChange?: (value: string) => void;
   options: readonly ControlOption[];
+  showLabel?: boolean;
   value: string;
 };
 
@@ -145,6 +146,7 @@ function SelectControlField({
   name,
   onValueChange,
   options,
+  showLabel = true,
   value,
 }: SelectControlInput & {
   layout?: SelectControlFieldLayout;
@@ -169,21 +171,24 @@ function SelectControlField({
   return (
     <Field
       className={cn(
-        isStacked
+        !showLabel
+          ? "h-fit min-w-0"
+          : isStacked
           ? "h-fit min-w-0 gap-2"
           : compactHorizontalFieldClassName,
       )}
-      orientation={isStacked ? "vertical" : "horizontal"}
+      orientation={!showLabel || isStacked ? "vertical" : "horizontal"}
       ref={fieldRef}
     >
-      <ControlFieldLabel>{name}</ControlFieldLabel>
+      {showLabel ? <ControlFieldLabel>{name}</ControlFieldLabel> : null}
       <div
         className={cn(
           "min-w-0",
-          isStacked ? "w-full" : "w-1/2 shrink-0",
+          !showLabel || isStacked ? "w-full" : "w-1/2 shrink-0",
         )}
       >
         <StaticSelect
+          ariaLabel={showLabel ? undefined : name}
           onValueChange={updateValue}
           options={options}
           popupMaxWidth={popupMaxWidth}

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";