@pilotiq/pilotiq 0.1.0

package/src/react/fields/SelectFieldInput.tsx

@@ -0,0 +1,257 @@
+import React, { useState } from 'react'
+import { PlusIcon } from 'lucide-react'
+import type { ElementMeta } from '../../schema/Element.js'
+import { useFieldState } from '../FormStateContext.js'
+import { useToast } from '../Toaster.js'
+import { renderFormChild } from '../SchemaRenderer.js'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog.js'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select.js'
+
+interface CreateOptionMeta {
+  formId: string
+  schema: ElementMeta[]
+  url?:   string
+}
+
+interface NewOption { value: string; label: string }
+
+export function SelectFieldInput({
+  name, defaultValue, disabled, required, placeholder, options,
+  fieldLabel, createOption,
+}: {
+  name:         string
+  defaultValue: string | undefined
+  disabled:     boolean
+  required:     boolean
+  placeholder:  string | undefined
+  options:      Array<{ value: string; label: string; disabled?: boolean }>
+  fieldLabel?:  string
+  createOption?: CreateOptionMeta
+}): React.ReactElement {
+  const fs = useFieldState(name)
+  // Always-controlled. Initialize to '' (not undefined) so Base UI's Select
+  // doesn't see the value flip from undefined → string when the user picks
+  // an option (warns: "changing the uncontrolled value state to controlled").
+  const [localValue, setLocalValue] = useState<string>(defaultValue ?? '')
+  const value = fs.controlled
+    ? (fs.value !== undefined && fs.value !== null ? String(fs.value) : '')
+    : localValue
+  // Locally-appended options from inline create. Survives until the next
+  // server-canonical re-resolve (live() roundtrip or full submit) — when
+  // that lands, the canonical `options(fn)` resolver wins. Until then, the
+  // newly-created option is part of the visible option list and round-trips
+  // through submit via the hidden input below.
+  const [extraOptions, setExtraOptions] = useState<NewOption[]>([])
+  const allOptions = extraOptions.length > 0
+    ? [...options, ...extraOptions]
+    : options
+  // Base UI Select's onValueChange is a callback (no native bubbling
+  // change event). Inner-Repeater rows need the explicit triggerLive
+  // in both paths to fire `live()` re-resolve. Pass the new value as
+  // `valueOverride` so dotted-path inner fields hit the right slot.
+  const onValueChange = (v: string | null): void => {
+    const next = v ?? ''
+    if (fs.controlled) { fs.setValue(next); fs.triggerLive(next) }
+    else { setLocalValue(next); fs.triggerLive(next) }
+  }
+
+  const onCreated = (option: NewOption): void => {
+    setExtraOptions(prev => [...prev, option])
+    if (fs.controlled) { fs.setValue(option.value); fs.triggerLive(option.value) }
+    else { setLocalValue(option.value); fs.triggerLive(option.value) }
+  }
+
+  const showCreateTrigger = createOption !== undefined
+    && typeof createOption.url === 'string'
+    && createOption.url.length > 0
+
+  const select = (
+    <Select
+      value={value}
+      onValueChange={(v) => onValueChange(v as string)}
+      disabled={disabled}
+      required={required}
+    >
+      <SelectTrigger className="w-full" id={name}>
+        <SelectValue placeholder={placeholder ?? 'Select…'} />
+      </SelectTrigger>
+      <SelectContent>
+        {allOptions.map((o) => (
+          <SelectItem key={o.value} value={o.value} disabled={(o as { disabled?: boolean }).disabled}>
+            {o.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+
+  return (
+    <>
+      <input type="hidden" name={name} value={value} />
+      {showCreateTrigger ? (
+        <div className="flex items-center gap-2">
+          <div className="flex-1 min-w-0">{select}</div>
+          <CreateOptionTrigger
+            url={createOption!.url!}
+            schema={createOption!.schema}
+            fieldLabel={fieldLabel ?? name}
+            onCreated={onCreated}
+          />
+        </div>
+      ) : select}
+    </>
+  )
+}
+
+/**
+ * "+" icon-button next to the Select trigger that opens a Dialog hosting
+ * the resolved `createOption.schema` as a controlled mini-form. Submit
+ * POSTs `{ values }` JSON to the stamped url; on success appends + selects
+ * the returned option.
+ */
+function CreateOptionTrigger({
+  url, schema, fieldLabel, onCreated,
+}: {
+  url:        string
+  schema:     ElementMeta[]
+  fieldLabel: string
+  onCreated:  (option: NewOption) => void
+}): React.ReactElement {
+  const [open, setOpen] = useState(false)
+  const [errors, setErrors] = useState<Record<string, string[]>>({})
+  const [serverError, setServerError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+  const { notify } = useToast()
+
+  const reset = (): void => {
+    setErrors({})
+    setServerError(null)
+    setSubmitting(false)
+  }
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault()
+    setSubmitting(true)
+    setServerError(null)
+    setErrors({})
+
+    const fd = new FormData(e.currentTarget)
+    const values = formDataToValues(fd)
+
+    try {
+      const res = await fetch(url, {
+        method:  'POST',
+        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+        body:    JSON.stringify({ values }),
+      })
+      const data = await res.json().catch(() => ({})) as {
+        ok?:     boolean
+        option?: NewOption
+        errors?: Record<string, string[]>
+        error?:  string
+      }
+      if (res.status === 422) {
+        setErrors(data.errors ?? {})
+        setSubmitting(false)
+        return
+      }
+      if (!res.ok || !data.ok || !data.option) {
+        setServerError(String(data.error ?? `Request failed (${res.status})`))
+        setSubmitting(false)
+        return
+      }
+      onCreated(data.option)
+      setOpen(false)
+      reset()
+      notify({ type: 'success', title: `${fieldLabel} created` })
+    } catch (err) {
+      setServerError(err instanceof Error ? err.message : 'Submit failed')
+      setSubmitting(false)
+    }
+  }
+
+  const triggerClass = 'inline-flex items-center justify-center rounded-md border border-input bg-background h-9 w-9 shrink-0 hover:bg-accent hover:text-accent-foreground disabled:opacity-50'
+  const cancelClass  = 'inline-flex items-center justify-center rounded-md border border-input bg-background px-3 h-9 text-sm font-medium hover:bg-accent hover:text-accent-foreground'
+  const submitClass  = 'inline-flex items-center justify-center rounded-md bg-primary px-3 h-9 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50'
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label={`Create ${fieldLabel}`}
+        onClick={() => { reset(); setOpen(true) }}
+        className={triggerClass}
+      >
+        <PlusIcon className="size-4" />
+      </button>
+      <Dialog open={open} onOpenChange={(o) => { if (!o) reset(); setOpen(o) }}>
+        <DialogContent className="sm:max-w-lg">
+          <form onSubmit={onSubmit}>
+            <DialogHeader>
+              <DialogTitle>{`Create ${fieldLabel}`}</DialogTitle>
+              <DialogDescription className="sr-only">
+                {`Create a new ${fieldLabel} option to select.`}
+              </DialogDescription>
+            </DialogHeader>
+            {schema.length > 0 && (
+              <div className="flex flex-col gap-3 py-2">
+                {schema.map((child, i) => renderFormChild(child, i, {}, errors))}
+              </div>
+            )}
+            {serverError && (
+              <p className="py-2 text-sm text-destructive">{serverError}</p>
+            )}
+            <DialogFooter>
+              <button type="button" onClick={() => setOpen(false)} className={cancelClass}>
+                Cancel
+              </button>
+              <button type="submit" disabled={submitting} className={submitClass}>
+                {submitting ? 'Working…' : 'Create'}
+              </button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+/**
+ * Convert a FormData snapshot into the `{ name: value }` shape the
+ * `formCreateOptionData` builder expects for `coerceFormValues`.
+ *
+ * - Skips `_formId` / `_method` framework keys (a FormStateProvider above
+ *   us could conceivably emit them, though our modal renders bare).
+ * - Repeated keys (multi-select / checkbox-list) accumulate into arrays.
+ * - File entries collapse to '' — createOption forms that accept files
+ *   already pre-resolve uploads to URL strings via FileUploadField's
+ *   hidden input, so the File slot is ignored.
+ */
+function formDataToValues(fd: FormData): Record<string, unknown> {
+  const out: Record<string, unknown> = {}
+  for (const [k, raw] of fd.entries()) {
+    if (k === '_formId' || k === '_method') continue
+    const v = typeof raw === 'string' ? raw : ''
+    if (k in out) {
+      const prev = out[k]
+      if (Array.isArray(prev)) prev.push(v)
+      else out[k] = [prev, v]
+    } else {
+      out[k] = v
+    }
+  }
+  return out
+}

package/src/react/fields/SliderInput.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { useFieldState } from '../FormStateContext.js'
+import { Slider } from '../ui/slider.js'
+
+/**
+ * Numeric slider. Value persisted as a number (coerced via the
+ * shared 'number' branch in `coerceFormValues`). When `showValue`
+ * is true, renders the current value to the right of the track.
+ */
+export function SliderInput({
+  name, defaultValue, disabled, min, max, step, showValue,
+}: {
+  name:         string
+  defaultValue: unknown
+  disabled:     boolean
+  min:          number
+  max:          number
+  step:         number
+  showValue:    boolean
+}): React.ReactElement {
+  const fs = useFieldState(name)
+
+  const toNumber = (v: unknown): number => {
+    const n = Number(v)
+    return Number.isFinite(n) ? n : min
+  }
+
+  const [localValue, setLocalValue] = useState<number>(toNumber(defaultValue))
+  const value = fs.controlled ? toNumber(fs.value) : localValue
+
+  // Base UI Slider's onValueChange callback does NOT dispatch a native
+  // bubbling change event, so RepeaterInput's container-level delegate
+  // can't pick up inner-row live() triggers. Call triggerLive explicitly
+  // in BOTH paths (no-op outside FormStateProvider / when field has no
+  // `live` config). Value passed as `valueOverride` so dotted-path
+  // inner-Repeater fields pass through correctly.
+  const onChange = (next: number | readonly number[]): void => {
+    const v = Array.isArray(next) ? Number(next[0]) : Number(next)
+    if (fs.controlled) { fs.setValue(v); fs.triggerLive(v) }
+    else { setLocalValue(v); fs.triggerLive(v) }
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      <input type="hidden" name={name} value={String(value)} />
+      <div className="flex-1">
+        <Slider
+          value={value}
+          onValueChange={onChange}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+        />
+      </div>
+      {showValue && (
+        <span className="text-sm tabular-nums text-muted-foreground w-10 text-right">
+          {value}
+        </span>
+      )}
+    </div>
+  )
+}

package/src/react/fields/TagsInput.tsx

@@ -0,0 +1,265 @@
+import React, { useMemo, useRef, useState } from 'react'
+import { GripVerticalIcon, XIcon } from 'lucide-react'
+import { useFieldState } from '../FormStateContext.js'
+import { reorderRows } from './RepeaterInput.js'
+
+/**
+ * Free-text tag chips. Value is `string[]`. Renders pill-shaped chips
+ * for each committed tag plus an inline text input. Pressing Enter (or
+ * any key in `splitKeys`) commits the trimmed draft to the chip set.
+ * Pasting a string containing `separator` splits into multiple chips.
+ * Backspace on an empty draft removes the last chip.
+ *
+ * The chip set serializes to a single hidden input as JSON; the server's
+ * `coerceFormValues` `tagsInput` branch parses it back into `string[]`.
+ *
+ * When `reorderable` is set, each chip becomes draggable via native HTML5
+ * drag-and-drop. A 2px vertical drop indicator hints where the dragged chip
+ * will land. Reuses `reorderRows` from RepeaterInput so behavior matches.
+ */
+export function TagsInput({
+  name, defaultValue, disabled, placeholder, suggestions, separator, splitKeys, maxTags, reorderable,
+}: {
+  name:         string
+  defaultValue: unknown
+  disabled:     boolean
+  placeholder:  string | undefined
+  suggestions:  string[]
+  separator:    string | null
+  splitKeys:    string[]
+  maxTags:      number | null
+  reorderable:  boolean
+}): React.ReactElement {
+  const fs = useFieldState(name)
+
+  const initial = useMemo<string[]>(() => toArray(defaultValue), [])
+  const [localTags, setLocalTags] = useState<string[]>(initial)
+  const [draft, setDraft] = useState<string>('')
+  const [focused, setFocused] = useState<boolean>(false)
+  const [dragFromIdx, setDragFromIdx] = useState<number | null>(null)
+  const [dropAt, setDropAt] = useState<number | null>(null)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const canReorder = reorderable && !disabled
+
+  const tags = fs.controlled ? toArray(fs.value) : localTags
+
+  const setTags = (next: string[]): void => {
+    if (fs.controlled) { fs.setValue(next); fs.triggerLive(next) }
+    else                { setLocalTags(next); fs.triggerLive(next) }
+  }
+
+  const canAddMore = maxTags == null || tags.length < maxTags
+
+  const addTag = (raw: string): void => {
+    const t = raw.trim()
+    if (!t) return
+    if (tags.includes(t)) return
+    if (!canAddMore) return
+    setTags([...tags, t])
+  }
+
+  const addMany = (raws: string[]): void => {
+    if (raws.length === 0) return
+    const next = tags.slice()
+    const seen = new Set(next)
+    for (const r of raws) {
+      const t = r.trim()
+      if (!t || seen.has(t)) continue
+      if (maxTags != null && next.length >= maxTags) break
+      next.push(t)
+      seen.add(t)
+    }
+    if (next.length !== tags.length) setTags(next)
+  }
+
+  const removeTag = (idx: number): void => {
+    setTags(tags.filter((_, i) => i !== idx))
+  }
+
+  const onChipDragStart = (idx: number) => (e: React.DragEvent<HTMLSpanElement>): void => {
+    if (!canReorder) return
+    setDragFromIdx(idx)
+    e.dataTransfer.effectAllowed = 'move'
+    // Firefox refuses to start a drag without setData on the dataTransfer.
+    e.dataTransfer.setData('text/plain', String(idx))
+  }
+
+  const onChipDragOver = (idx: number) => (e: React.DragEvent<HTMLSpanElement>): void => {
+    if (dragFromIdx == null) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+    const before = e.clientX < rect.left + rect.width / 2
+    setDropAt(before ? idx : idx + 1)
+  }
+
+  const onChipDrop = (e: React.DragEvent<HTMLSpanElement>): void => {
+    if (dragFromIdx == null || dropAt == null) {
+      setDragFromIdx(null); setDropAt(null)
+      return
+    }
+    e.preventDefault()
+    const next = reorderRows(tags, dragFromIdx, dropAt)
+    if (next !== tags) setTags(next)
+    setDragFromIdx(null)
+    setDropAt(null)
+  }
+
+  const onChipDragEnd = (): void => {
+    setDragFromIdx(null)
+    setDropAt(null)
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    // Backspace on an empty draft pops the most recent chip.
+    if (e.key === 'Backspace' && draft === '' && tags.length > 0) {
+      e.preventDefault()
+      removeTag(tags.length - 1)
+      return
+    }
+    // Commit on splitKeys OR on the configured separator char.
+    const isSplit = splitKeys.includes(e.key) || (separator !== null && e.key === separator)
+    if (isSplit && draft.trim() !== '') {
+      e.preventDefault()
+      addTag(draft)
+      setDraft('')
+    }
+  }
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const v = e.target.value
+    // Paste-friendly: split on separator inline as the user types.
+    if (separator !== null && v.includes(separator)) {
+      const parts = v.split(separator)
+      const tail  = parts.pop() ?? ''
+      addMany(parts)
+      setDraft(tail)
+      return
+    }
+    setDraft(v)
+  }
+
+  const onBlur = (): void => {
+    setFocused(false)
+    if (draft.trim() !== '') {
+      addTag(draft)
+      setDraft('')
+    }
+  }
+
+  const filteredSuggestions = useMemo(() => {
+    if (!focused || suggestions.length === 0) return []
+    const needle = draft.trim().toLowerCase()
+    const taken  = new Set(tags)
+    return suggestions
+      .filter(s => !taken.has(s))
+      .filter(s => needle === '' || s.toLowerCase().includes(needle))
+      .slice(0, 8)
+  }, [focused, draft, suggestions, tags])
+
+  const hiddenValue = useMemo(() => JSON.stringify(tags), [tags])
+
+  return (
+    <div className="relative">
+      <input type="hidden" name={name} value={hiddenValue} readOnly />
+      <div
+        className={[
+          'flex flex-wrap items-center gap-1 min-h-9 px-2 py-1 rounded-md border bg-transparent text-sm',
+          'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
+          disabled ? 'opacity-50 pointer-events-none' : 'cursor-text',
+        ].join(' ')}
+        onClick={() => inputRef.current?.focus()}
+      >
+        {tags.map((t, i) => (
+          <React.Fragment key={`${t}-${i}`}>
+            {canReorder && dropAt === i && dragFromIdx !== null && dragFromIdx !== i && dragFromIdx + 1 !== i && (
+              <span aria-hidden className="inline-block w-0.5 h-5 bg-primary rounded self-center" />
+            )}
+            <span
+              className={[
+                'inline-flex items-center gap-1 rounded bg-secondary text-secondary-foreground text-xs px-2 py-0.5',
+                canReorder ? 'cursor-grab active:cursor-grabbing' : '',
+                dragFromIdx === i ? 'opacity-50' : '',
+              ].join(' ')}
+              draggable={canReorder}
+              onDragStart={canReorder ? onChipDragStart(i) : undefined}
+              onDragOver={canReorder ? onChipDragOver(i) : undefined}
+              onDrop={canReorder ? onChipDrop : undefined}
+              onDragEnd={canReorder ? onChipDragEnd : undefined}
+            >
+              {canReorder && (
+                <GripVerticalIcon
+                  className="size-3 text-muted-foreground -ml-0.5"
+                  aria-hidden
+                />
+              )}
+              <span>{t}</span>
+              <button
+                type="button"
+                className="text-muted-foreground hover:text-foreground"
+                onClick={(e) => { e.stopPropagation(); removeTag(i) }}
+                disabled={disabled}
+                aria-label={`Remove ${t}`}
+              >
+                <XIcon className="size-3" />
+              </button>
+            </span>
+          </React.Fragment>
+        ))}
+        {canReorder && dropAt === tags.length && dragFromIdx !== null && dragFromIdx !== tags.length - 1 && (
+          <span aria-hidden className="inline-block w-0.5 h-5 bg-primary rounded self-center" />
+        )}
+        <input
+          ref={inputRef}
+          type="text"
+          className="flex-1 min-w-[6ch] bg-transparent outline-none border-none text-sm py-0.5"
+          value={draft}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+          onFocus={() => setFocused(true)}
+          onBlur={onBlur}
+          disabled={disabled || !canAddMore}
+          placeholder={tags.length === 0 ? placeholder : undefined}
+        />
+      </div>
+      {filteredSuggestions.length > 0 && (
+        <div className="absolute z-50 mt-1 w-full max-h-56 overflow-auto rounded-md border bg-popover text-popover-foreground shadow-md">
+          {filteredSuggestions.map((s) => (
+            <button
+              key={s}
+              type="button"
+              className="block w-full text-left text-sm px-2 py-1 hover:bg-accent"
+              // mousedown beats the input's blur — otherwise the click
+              // never lands because blur clears `focused` first and the
+              // dropdown unmounts before onClick fires.
+              onMouseDown={(e) => {
+                e.preventDefault()
+                addTag(s)
+                setDraft('')
+                inputRef.current?.focus()
+              }}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function toArray(v: unknown): string[] {
+  if (v === undefined || v === null || v === '') return []
+  if (Array.isArray(v)) return v.map(String).filter(s => s !== '')
+  if (typeof v === 'string') {
+    // Tolerate JSON-encoded arrays for record-load default-values.
+    if (v.startsWith('[')) {
+      try {
+        const parsed = JSON.parse(v)
+        if (Array.isArray(parsed)) return parsed.map(String).filter(s => s !== '')
+      } catch { /* fall through */ }
+    }
+    return [v]
+  }
+  return []
+}

package/src/react/fields/TextLikeInput.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import type { ElementMeta } from '../../schema/Element.js'
+import { useFieldState } from '../FormStateContext.js'
+import { Input } from '../ui/input.js'
+import { Textarea } from '../ui/textarea.js'
+
+/**
+ * Bridge between controlled (FormStateProvider) and uncontrolled
+ * (defaultValue) modes for text-style inputs. When inside a form with
+ * `live()` fields, the input is bound to the context's values map and
+ * fires the live trigger on change/blur according to the field's `live`
+ * config. Outside a controlled form, falls back to plain `defaultValue`.
+ */
+export function TextLikeInput({
+  el, name, common, type, extraProps, multiline,
+}: {
+  el:         ElementMeta
+  name:       string
+  common:     Record<string, unknown>
+  type:       string
+  extraProps: Record<string, unknown>
+  multiline:  boolean
+}): React.ReactElement {
+  const fs = useFieldState(name)
+  const liveCfg = el['live']
+  const liveOpts = (typeof liveCfg === 'object' && liveCfg !== null
+    ? liveCfg as { onBlur?: boolean; debounce?: number }
+    : {})
+  const onBlurMode = liveOpts.onBlur === true
+
+  if (fs.controlled) {
+    const ctxValue = fs.value !== undefined && fs.value !== null ? String(fs.value) : ''
+    const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
+      fs.setValue(e.target.value)
+      if (!onBlurMode) fs.triggerLive()
+    }
+    const onBlur = (): void => {
+      if (onBlurMode) fs.triggerLive()
+    }
+    const props = {
+      ...common,
+      ...extraProps,
+      defaultValue: undefined,
+      value:        ctxValue,
+      onChange,
+      onBlur,
+    }
+    if (multiline) return <Textarea {...(props as React.ComponentProps<typeof Textarea>)} />
+    return <Input {...(props as React.ComponentProps<typeof Input>)} type={type} />
+  }
+
+  if (multiline) return <Textarea {...(common as React.ComponentProps<typeof Textarea>)} {...extraProps} />
+  return <Input {...(common as React.ComponentProps<typeof Input>)} type={type} {...extraProps} />
+}