@preset.nz/facets 0.1.3 → 0.3.0

package/src/field-renderers.tsx

@@ -3,9 +3,13 @@
  * components plus a single `registerBuiltinRenderers` entry point. Splitting
  * each renderer into its own file would be over-organisation for code that
  * never hot-reloads in isolation. */
-import { useMemo } from "react"
+import { useEffect, useId, useMemo, useRef } from "react"
+import { Checkbox } from "@/components/ui/checkbox"
+import { ColorField } from "@/components/ui/color-field"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { NumberField } from "@/components/ui/number-field"
+import { PathField } from "@/components/ui/path-field"
 import {
   Select,
   SelectContent,
@@ -13,26 +17,30 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { Checkbox } from "@/components/ui/checkbox"
 import { Separator } from "@/components/ui/separator"
+import { Slider } from "@/components/ui/slider"
+import { filtersOf, useFileHandlers, useMissing, useRecent } from "./file-handlers"
+import { COLUMN_ROW, NUMBER_WIDTH, NUMBER_WIDTH_INSIDE, useLabelLayout } from "./layout"
 import { registerFieldRenderer } from "./registry"
 import type {
   CheckboxFieldDef,
   ColorFieldDef,
   FieldRenderer,
   FieldRendererProps,
+  FileFieldDef,
+  LabelFieldDef,
   NumberFieldDef,
+  PanelView,
   SelectFieldDef,
+  SeparatorFieldDef,
   SliderFieldDef,
-  TextFieldDef,
   TextareaFieldDef,
-  FileFieldDef,
-  LabelFieldDef,
-  SeparatorFieldDef,
+  TextFieldDef,
   VectorFieldDef,
 } from "./types"
 
-function ReadOnlyText({ children }: { children: React.ReactNode }) {
+/** A read-only value at the height of an editable row, so read-only and editable panels line up. */
+export function ReadOnlyText({ children }: { children: React.ReactNode }) {
   return (
     <div className="min-h-8 px-0 py-1 text-xs text-foreground tabular-nums break-all">
       {children}
@@ -44,17 +52,68 @@ function Empty() {
   return <span className="text-muted-foreground">—</span>
 }
 
-function FieldShell({
+/**
+ * A field's label and control, placed as the panel's label layout and view say. Exported so a
+ * custom renderer sits on the same label column as the built-ins.
+ */
+export function FieldShell({
   label,
+  view,
+  top,
+  above,
+  htmlFor,
   children,
 }: {
   label?: string
+  view?: PanelView
+  /** The id of the control the label names, so clicking the label focuses it. */
+  htmlFor?: string
+  /** In a label column: align the label to the top of a tall control. */
+  top?: boolean
+  /** The label sits above the control even in a label column (a wide control, like a vector of four). */
+  above?: boolean
   children: React.ReactNode
 }) {
+  const layout = useLabelLayout()
+  // Collapsed: one compact row, label in a fixed column beside the control.
+  if (view === "collapsed") {
+    return (
+      <div className="grid grid-cols-[5.5rem_minmax(0,1fr)] items-center gap-2">
+        <Label
+          htmlFor={htmlFor}
+          className="truncate text-[11px] font-medium text-muted-foreground tracking-wide"
+        >
+          {label}
+        </Label>
+        <div className="min-w-0">{children}</div>
+      </div>
+    )
+  }
+  // Column: one label column shared by the panel, the control on a common edge.
+  if (layout === "column" && !above) {
+    return (
+      <div className={top ? COLUMN_ROW.replace("items-center", "items-start") : COLUMN_ROW}>
+        <Label
+          htmlFor={htmlFor}
+          title={label}
+          className={
+            "block truncate text-[11px] font-medium text-muted-foreground tracking-wide" +
+            (top ? " pt-2" : "")
+          }
+        >
+          {label}
+        </Label>
+        <div className="min-w-0">{children}</div>
+      </div>
+    )
+  }
   return (
     <div className="flex flex-col gap-1">
       {label && (
-        <Label className="text-[11px] font-medium text-muted-foreground tracking-wide">
+        <Label
+          htmlFor={htmlFor}
+          className="text-[11px] font-medium text-muted-foreground tracking-wide"
+        >
           {label}
         </Label>
       )}
@@ -63,6 +122,14 @@ function FieldShell({
   )
 }
 
+/** Decimal places a step implies: 0.05 gives 2, 5 gives 0. */
+function placesOf(step: number): number {
+  const s = String(step)
+  if (s.includes("e-")) return Number(s.split("e-")[1])
+  const dot = s.indexOf(".")
+  return dot === -1 ? 0 : s.length - dot - 1
+}
+
 function formatPrimitive(value: unknown): string {
   if (value == null || value === "") return ""
   if (typeof value === "boolean") return value ? "Yes" : "No"
@@ -71,15 +138,10 @@ function formatPrimitive(value: unknown): string {
   return String(value)
 }
 
-const TextRenderer: FieldRenderer<TextFieldDef> = ({
-  field,
-  value,
-  disabled,
-  onChange,
-}) => {
+const TextRenderer: FieldRenderer<TextFieldDef> = ({ field, value, disabled, onChange, view }) => {
   const display = formatPrimitive(value)
   return (
-    <FieldShell label={field.label ?? field.id}>
+    <FieldShell label={field.label ?? field.id} view={view}>
       {onChange ? (
         <Input
           aria-label={field.label ?? field.id}
@@ -104,15 +166,16 @@ const TextareaRenderer: FieldRenderer<TextareaFieldDef> = ({
   value,
   disabled,
   onChange,
+  view,
 }) => {
   const display = formatPrimitive(value)
   return (
-    <FieldShell label={field.label ?? field.id}>
+    <FieldShell label={field.label ?? field.id} view={view} top>
       {onChange ? (
         <textarea
           aria-label={field.label ?? field.id}
           value={display}
-          rows={field.rows ?? 3}
+          rows={view === "collapsed" ? 1 : (field.rows ?? 3)}
           disabled={disabled}
           placeholder={field.placeholder}
           onChange={(e) => onChange(e.target.value)}
@@ -136,37 +199,51 @@ const NumberRenderer: FieldRenderer<NumberFieldDef> = ({
   value,
   disabled,
   onChange,
+  onGestureBegin,
+  onGestureEnd,
+  onGestureCancel,
 }) => {
+  const layout = useLabelLayout()
   const num =
-    typeof value === "number"
-      ? value
-      : value != null && value !== ""
-      ? Number(value)
-      : null
-  const display =
-    num != null && Number.isFinite(num) ? num.toLocaleString() : ""
-  return (
-    <FieldShell label={field.label ?? field.id}>
-      {onChange ? (
-        <Input
-          type="number"
-          aria-label={field.label ?? field.id}
-          value={num != null && Number.isFinite(num) ? String(num) : ""}
-          min={field.min}
-          max={field.max}
-          step={field.step ?? 1}
-          disabled={disabled}
-          onChange={(e) => onChange(Number(e.target.value))}
-        />
-      ) : display ? (
-        <ReadOnlyText>{display}</ReadOnlyText>
-      ) : (
-        <ReadOnlyText>
-          <Empty />
-        </ReadOnlyText>
-      )}
-    </FieldShell>
+    typeof value === "number" ? value : value != null && value !== "" ? Number(value) : null
+  const finite = num != null && Number.isFinite(num)
+  const label = field.label ?? field.id
+  if (!onChange) {
+    return (
+      <FieldShell label={label}>
+        <ReadOnlyText>{finite ? num.toLocaleString() : <Empty />}</ReadOnlyText>
+      </FieldShell>
+    )
+  }
+  // The field's own label is the scrub handle, so the panel draws none beside it: in "column" and
+  // "stacked" it tells the field where to put it. Hosts that ignore labelPlacement keep it inside.
+  const placed =
+    layout === "auto"
+      ? {}
+      : {
+          labelPlacement: layout === "column" ? ("column" as const) : ("above" as const),
+          boxClassName: NUMBER_WIDTH,
+          suffix: field.suffix,
+        }
+  const input = (
+    <NumberField
+      label={label}
+      value={finite ? num : (field.min ?? 0)}
+      min={field.min}
+      max={field.max}
+      step={field.step ?? 1}
+      integer={field.integer}
+      className={layout === "auto" ? NUMBER_WIDTH_INSIDE : undefined}
+      {...placed}
+      disabled={disabled}
+      onValueChange={(next) => onChange(next)}
+      onScrubStart={onGestureBegin}
+      onScrubEnd={onGestureEnd}
+      onScrubCancel={onGestureCancel}
+    />
   )
+  // The field spans the label and control columns of a row of its own.
+  return layout === "column" ? <div className={COLUMN_ROW}>{input}</div> : input
 }
 
 const SliderRenderer: FieldRenderer<SliderFieldDef> = ({
@@ -174,26 +251,57 @@ const SliderRenderer: FieldRenderer<SliderFieldDef> = ({
   value,
   disabled,
   onChange,
+  view,
+  onGestureBegin,
+  onGestureEnd,
 }) => {
   const num = typeof value === "number" ? value : Number(value ?? 0)
+  // A drag is a pointer press that moves the value; arrow keys are plain edits.
+  const pressed = useRef(false)
+  const dragging = useRef(false)
+  const layout = useLabelLayout()
+  // With labels in a column or above, the value reads out to the right, on a shared edge.
+  const readout = layout !== "auto" && view !== "collapsed"
   return (
-    <FieldShell label={field.label ?? field.id}>
+    <FieldShell label={field.label ?? field.id} view={view}>
       {onChange ? (
-        <input
-          type="range"
-          aria-label={field.label ?? field.id}
-          value={Number.isFinite(num) ? num : (field.min ?? 0)}
-          min={field.min}
-          max={field.max}
-          step={field.step ?? 1}
-          disabled={disabled}
-          onChange={(e) => onChange(Number(e.target.value))}
-          className="w-full"
-        />
+        <div
+          className={readout ? "flex min-h-8 items-center gap-2" : "flex min-h-8 items-center"}
+          onPointerDownCapture={() => {
+            pressed.current = true
+          }}
+        >
+          <Slider
+            className="min-w-0 flex-1"
+            aria-label={field.label ?? field.id}
+            value={Number.isFinite(num) ? num : (field.min ?? 0)}
+            min={field.min}
+            max={field.max}
+            step={field.step ?? 1}
+            disabled={disabled}
+            onValueChange={(next) => {
+              if (pressed.current && !dragging.current) {
+                dragging.current = true
+                onGestureBegin?.()
+              }
+              onChange(Array.isArray(next) ? next[0] : next)
+            }}
+            onValueCommitted={() => {
+              pressed.current = false
+              if (dragging.current) {
+                dragging.current = false
+                onGestureEnd?.()
+              }
+            }}
+          />
+          {readout && (
+            <span className="w-12 shrink-0 text-right text-xs tabular-nums text-muted-foreground">
+              {Number.isFinite(num) ? num.toFixed(placesOf(field.step ?? 1)) : ""}
+            </span>
+          )}
+        </div>
       ) : (
-        <ReadOnlyText>
-          {Number.isFinite(num) ? num.toLocaleString() : <Empty />}
-        </ReadOnlyText>
+        <ReadOnlyText>{Number.isFinite(num) ? num.toLocaleString() : <Empty />}</ReadOnlyText>
       )}
     </FieldShell>
   )
@@ -205,6 +313,7 @@ const SelectRenderer: FieldRenderer<SelectFieldDef> = ({
   disabled,
   onChange,
   ctx,
+  view,
 }) => {
   const options = useMemo(
     () => (field.optionsProvider ? field.optionsProvider(ctx) : (field.options ?? [])),
@@ -214,21 +323,15 @@ const SelectRenderer: FieldRenderer<SelectFieldDef> = ({
   const matched = options.find((o) => o.value === current)
   if (!onChange) {
     return (
-      <FieldShell label={field.label ?? field.id}>
-        <ReadOnlyText>
-          {matched ? matched.label : current ? current : <Empty />}
-        </ReadOnlyText>
+      <FieldShell label={field.label ?? field.id} view={view}>
+        <ReadOnlyText>{matched ? matched.label : current ? current : <Empty />}</ReadOnlyText>
       </FieldShell>
     )
   }
   return (
-    <FieldShell label={field.label ?? field.id}>
-      <Select
-        value={current}
-        onValueChange={(v) => onChange(v)}
-        disabled={disabled}
-      >
-        <SelectTrigger>
+    <FieldShell label={field.label ?? field.id} view={view}>
+      <Select value={current} onValueChange={(v) => onChange(v)} disabled={disabled}>
+        <SelectTrigger className="w-full">
           {/* Children, not the primitive's own lookup: Base UI's Value shows
               the raw value unless it's told the label. */}
           <SelectValue>{matched ? matched.label : current}</SelectValue>
@@ -250,36 +353,32 @@ const ColorRenderer: FieldRenderer<ColorFieldDef> = ({
   value,
   disabled,
   onChange,
+  view,
+  onGestureBegin,
+  onGestureEnd,
 }) => {
   const hex = typeof value === "string" && value.length > 0 ? value : null
-  return (
-    <FieldShell label={field.label ?? field.id}>
-      <div className="flex items-center gap-2">
-        {hex ? (
-          <span
-            aria-hidden
-            className="inline-block size-4 shrink-0 border border-border"
-            style={{ backgroundColor: hex }}
-          />
-        ) : (
-          <span className="inline-block size-4 shrink-0 border border-dashed border-border" />
-        )}
-        {onChange ? (
-          <Input
-            type="text"
-            aria-label={field.label ?? field.id}
-            value={hex ?? ""}
-            disabled={disabled}
-            onChange={(e) => onChange(e.target.value)}
-            className="font-mono"
-          />
-        ) : (
-          <ReadOnlyText>
-            <span className="font-mono">{hex ?? <Empty />}</span>
-          </ReadOnlyText>
-        )}
-      </div>
+  const label = field.label ?? field.id
+  const layout = useLabelLayout()
+  // Collapsed rows and a label column keep the label in their column; otherwise the field draws it.
+  const inColumn = view === "collapsed" || layout === "column"
+  const picker = (
+    <ColorField
+      label={inColumn ? undefined : label}
+      value={hex}
+      presets={field.presets}
+      disabled={disabled}
+      onChange={onChange ? (next) => onChange(next ?? "") : undefined}
+      onPickStart={onGestureBegin}
+      onPickEnd={onGestureEnd}
+    />
+  )
+  return inColumn ? (
+    <FieldShell label={label} view={view}>
+      {picker}
     </FieldShell>
+  ) : (
+    picker
   )
 }
 
@@ -288,39 +387,132 @@ const CheckboxRenderer: FieldRenderer<CheckboxFieldDef> = ({
   value,
   disabled,
   onChange,
+  view,
 }) => {
   const checked = Boolean(value)
+  const layout = useLabelLayout()
   if (!onChange) {
     return (
-      <FieldShell label={field.label ?? field.id}>
+      <FieldShell label={field.label ?? field.id} view={view}>
         <ReadOnlyText>{checked ? "Yes" : "No"}</ReadOnlyText>
       </FieldShell>
     )
   }
+  // Collapsed rows and a label column keep the label in their column, like every other kind.
+  if (view === "collapsed" || layout === "column") {
+    return (
+      <FieldShell label={field.label ?? field.id} view={view}>
+        <Checkbox
+          checked={checked}
+          disabled={disabled}
+          onCheckedChange={(next) => onChange(Boolean(next))}
+        />
+      </FieldShell>
+    )
+  }
   return (
-    <div className="flex items-center gap-2">
+    // One line: the box, then its label, which toggles it.
+    <Label className="min-h-8 gap-2 text-xs text-foreground">
       <Checkbox
         checked={checked}
         disabled={disabled}
         onCheckedChange={(next) => onChange(Boolean(next))}
       />
-      {field.label && (
-        <Label className="text-xs text-foreground">{field.label}</Label>
-      )}
-    </div>
+      {field.label}
+    </Label>
   )
 }
 
 const FileRenderer: FieldRenderer<FileFieldDef> = ({
   field,
   value,
+  disabled,
+  onChange,
+  error,
+  view,
 }) => {
-  const asset = value as { name?: string } | null | undefined
+  const label = field.label ?? field.id
+  const inputId = useId()
+  const h = useFileHandlers()
+  const path = typeof value === "string" && value !== "" ? value : null
+  const missing = useMissing(path, h)
+  const [recent, reloadRecent] = useRecent(field.recentKey, h, path)
+
+  // What was last committed and not yet seen come back as the value. The host's `write` is the
+  // validator and may be asynchronous, so the field cannot tell "accepted" from the call: it
+  // sees it when the value prop becomes the committed path. Only then is the path remembered. A
+  // refusal (`error`) or any other change of value drops the pending commit.
+  const pending = useRef<string | null | undefined>(undefined)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: settles when the value changes; the rest is read fresh
+  useEffect(() => {
+    const committed = pending.current
+    pending.current = undefined
+    if (committed !== undefined && committed === path && path !== null && field.recentKey) {
+      Promise.resolve(h?.remember?.(field.recentKey, path)).then(reloadRecent, () => {})
+    }
+  }, [path])
+  useEffect(() => {
+    if (error) pending.current = undefined
+  }, [error])
+
+  // The context menu stays native, and the text menu keeps the field while its text is being
+  // edited: whether the input had focus is read before the click that opens the menu moves it.
+  const editing = useRef(false)
+
+  // The old read-only `{ name }` value.
+  if (value != null && typeof value === "object") {
+    const name = (value as { name?: string }).name
+    return (
+      <FieldShell label={label} view={view}>
+        <ReadOnlyText>{name ? name : <Empty />}</ReadOnlyText>
+      </FieldShell>
+    )
+  }
+
+  const editable = !!onChange
+  const commit = (next: string | null) => {
+    pending.current = next
+    onChange?.(next)
+  }
+  const pick = h?.pick
+  const menu = h?.contextMenu
+  const act = async () => {
+    const choice = await menu?.({ missing: missing || path === null, canClear: editable && !!path })
+    if (choice === "reveal" && path) {
+      try {
+        await h?.reveal?.(path, h.base?.())
+      } catch {
+        // The file went between the check and the click; the next focus check says Missing.
+      }
+    } else if (choice === "clear" && editable && path) commit(null)
+  }
+
   return (
-    <FieldShell label={field.label ?? field.id}>
-      <ReadOnlyText>
-        {asset?.name ? asset.name : <Empty />}
-      </ReadOnlyText>
+    <FieldShell label={label} view={view} htmlFor={inputId}>
+      <PathField
+        id={inputId}
+        value={path}
+        placeholder={field.placeholder}
+        disabled={disabled}
+        status={error ? "invalid" : missing ? "missing" : "ok"}
+        message={error}
+        onCommit={editable ? commit : undefined}
+        recent={editable && recent.length > 0 ? recent : undefined}
+        onBrowse={
+          editable && pick
+            ? () => pick({ filters: filtersOf(field), title: field.title })
+            : undefined
+        }
+        onMouseDownCapture={(e) => {
+          const input = e.currentTarget.querySelector("input")
+          editing.current = input !== null && input === document.activeElement
+        }}
+        onContextMenu={(e) => {
+          if (!menu || disabled || editing.current) return
+          e.preventDefault()
+          void act()
+        }}
+      />
     </FieldShell>
   )
 }
@@ -335,35 +527,42 @@ function toNumberArray(value: unknown, arity: number): Array<number | null> {
   })
 }
 
-function formatComponent(
-  n: number | null,
-  integer: boolean,
-  precision?: number,
-): string {
+function formatComponent(n: number | null, integer: boolean, precision?: number): string {
   if (n == null) return ""
   if (integer) return Math.trunc(n).toLocaleString()
   if (precision != null) return n.toFixed(precision)
   return n.toLocaleString()
 }
 
+const AXES = ["X", "Y", "Z", "W"]
+
 const VectorRenderer: FieldRenderer<VectorFieldDef> = ({
   field,
   value,
   disabled,
   onChange,
+  view,
+  onGestureBegin,
+  onGestureEnd,
+  onGestureCancel,
 }) => {
+  const layout = useLabelLayout()
   const arity = field.components.length
   const values = toNumberArray(value, arity)
   const isInt = Boolean(field.integer)
+  // Three or more components take too much room beside a label column: the label goes above and
+  // the components spread across the full width.
+  const wide = arity >= 3
 
   if (!onChange) {
     return (
-      <FieldShell label={field.label ?? field.id}>
+      <FieldShell label={field.label ?? field.id} view={view} above={wide}>
         <div
           className="grid gap-x-3 gap-y-1"
           style={{ gridTemplateColumns: `repeat(${arity}, minmax(0, 1fr))` }}
         >
           {field.components.map((c, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: components are a fixed positional tuple
             <div key={i} className="flex flex-col gap-0.5 min-w-0">
               {c.label && (
                 <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
@@ -376,9 +575,7 @@ const VectorRenderer: FieldRenderer<VectorFieldDef> = ({
                 ) : (
                   <>
                     {formatComponent(values[i], isInt, field.precision)}
-                    {c.suffix && (
-                      <span className="text-muted-foreground">{c.suffix}</span>
-                    )}
+                    {c.suffix && <span className="text-muted-foreground">{c.suffix}</span>}
                   </>
                 )}
               </div>
@@ -390,48 +587,41 @@ const VectorRenderer: FieldRenderer<VectorFieldDef> = ({
   }
 
   return (
-    <FieldShell label={field.label ?? field.id}>
+    <FieldShell label={field.label ?? field.id} view={view} above={wide}>
       <div
-        className="grid gap-x-2"
+        className="grid gap-x-1"
         style={{ gridTemplateColumns: `repeat(${arity}, minmax(0, 1fr))` }}
       >
         {field.components.map((c, i) => (
-          <div key={i} className="flex flex-col gap-0.5 min-w-0">
-            {c.label && (
-              <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
-                {c.label}
-              </span>
-            )}
-            <Input
-              type="number"
-              aria-label={c.label ?? `${field.id}[${i}]`}
-              value={values[i] != null ? String(values[i]) : ""}
-              min={c.min}
-              max={c.max}
-              step={c.step ?? (isInt ? 1 : 0.01)}
-              disabled={disabled}
-              onChange={(e) => {
-                const raw = e.target.value
-                const parsed = raw === "" ? null : Number(raw)
-                const next = values.slice()
-                next[i] =
-                  parsed != null && Number.isFinite(parsed)
-                    ? isInt
-                      ? Math.trunc(parsed)
-                      : parsed
-                    : null
-                onChange(next)
-              }}
-            />
-          </div>
+          <NumberField
+            // biome-ignore lint/suspicious/noArrayIndexKey: components are a fixed positional tuple
+            key={i}
+            label={c.label ?? AXES[i] ?? String(i + 1)}
+            value={values[i] ?? c.min ?? 0}
+            min={c.min}
+            max={c.max}
+            step={c.step ?? (isInt ? 1 : 0.01)}
+            integer={isInt}
+            precision={field.precision}
+            suffix={layout === "auto" ? undefined : c.suffix}
+            disabled={disabled}
+            onValueChange={(next) => {
+              const out = values.map((v) => v ?? 0)
+              out[i] = isInt ? Math.trunc(next) : next
+              onChange(out)
+            }}
+            onScrubStart={onGestureBegin}
+            onScrubEnd={onGestureEnd}
+            onScrubCancel={onGestureCancel}
+          />
         ))}
       </div>
     </FieldShell>
   )
 }
 
-const SeparatorRenderer: FieldRenderer<SeparatorFieldDef> = ({ field }) =>
-  field.label ? (
+const SeparatorRenderer: FieldRenderer<SeparatorFieldDef> = ({ field, view }) =>
+  view === "collapsed" ? null : field.label ? (
     <div className="my-1 flex items-center gap-2">
       <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
         {field.label}
@@ -445,63 +635,21 @@ const SeparatorRenderer: FieldRenderer<SeparatorFieldDef> = ({ field }) =>
 // The same in every mode: there is nothing to edit. Greys out under
 // disabledWhen so a hint can follow the field it describes.
 const LabelRenderer: FieldRenderer<LabelFieldDef> = ({ field, disabled }) => (
-  <p
-    className={
-      "text-xs text-muted-foreground" + (disabled ? " opacity-50" : "")
-    }
-  >
-    {field.label}
-  </p>
+  <p className={`text-xs text-muted-foreground${disabled ? " opacity-50" : ""}`}>{field.label}</p>
 )
 
 export function registerBuiltinRenderers(): void {
-  registerFieldRenderer(
-    "separator",
-    SeparatorRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "label",
-    LabelRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "text",
-    TextRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "textarea",
-    TextareaRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "number",
-    NumberRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "slider",
-    SliderRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "select",
-    SelectRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "color",
-    ColorRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "checkbox",
-    CheckboxRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "file",
-    FileRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
-  registerFieldRenderer(
-    "vector",
-    VectorRenderer as FieldRenderer<import("./types").FieldDef>,
-  )
+  registerFieldRenderer("separator", SeparatorRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("label", LabelRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("text", TextRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("textarea", TextareaRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("number", NumberRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("slider", SliderRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("select", SelectRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("color", ColorRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("checkbox", CheckboxRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("file", FileRenderer as FieldRenderer<import("./types").FieldDef>)
+  registerFieldRenderer("vector", VectorRenderer as FieldRenderer<import("./types").FieldDef>)
 }
 
-export type {
-  FieldRenderer,
-  FieldRendererProps,
-}
+export type { FieldRenderer, FieldRendererProps }