@pilotiq/pilotiq 0.1.0

package/src/react/fields/CheckboxInput.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import { useFieldState } from '../FormStateContext.js'
+import { Checkbox } from '../ui/checkbox.js'
+
+export function CheckboxInput({
+  name, defaultChecked, disabled, label,
+}: {
+  name:           string
+  defaultChecked: boolean
+  disabled:       boolean
+  /** Inline label rendered next to the box. Distinct from the field-shell label. */
+  label?:         string
+}): React.ReactElement {
+  const fs = useFieldState(name)
+  const [localChecked, setLocalChecked] = useState(defaultChecked)
+  const checked = fs.controlled
+    ? (fs.value === true || fs.value === 'true' || fs.value === 1 || fs.value === '1')
+    : localChecked
+  const onChange = (next: boolean): void => {
+    if (fs.controlled) { fs.setValue(next); fs.triggerLive(next) }
+    else { setLocalChecked(next); fs.triggerLive(next) }
+  }
+  return (
+    <div className="flex items-center gap-2">
+      <input type="hidden" name={name} value={checked ? 'true' : 'false'} />
+      <Checkbox
+        id={name}
+        checked={checked}
+        onCheckedChange={onChange}
+        disabled={disabled}
+      />
+      {label && (
+        <label htmlFor={name} className="text-sm leading-none cursor-pointer">
+          {label}
+        </label>
+      )}
+    </div>
+  )
+}

package/src/react/fields/CheckboxListInput.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+import { useFieldState } from '../FormStateContext.js'
+import { Checkbox } from '../ui/checkbox.js'
+
+/**
+ * Multi-choice. Value is `string[]`. Renders as either a vertical
+ * stack (columns=1, default) or a CSS grid (columns=2/3/…). On submit,
+ * each checked option contributes a `name=value` body entry which the
+ * server normalizes to a string[] in `coerceFormValues`.
+ */
+export function CheckboxListInput({
+  name, defaultValue, disabled, options, columns,
+}: {
+  name:         string
+  defaultValue: unknown
+  disabled:     boolean
+  options:      Array<{ value: string; label: string; disabled?: boolean }>
+  columns:      number
+}): React.ReactElement {
+  const fs = useFieldState(name)
+
+  // Normalize the initial value: string[] passes through; null/undefined → [];
+  // single string → [string]. Defensive against record shapes that store
+  // checkbox lists as JSON strings.
+  const toArray = (v: unknown): string[] => {
+    if (v === undefined || v === null) return []
+    if (Array.isArray(v)) return v.map(String)
+    return [String(v)]
+  }
+
+  const [localValue, setLocalValue] = useState<string[]>(toArray(defaultValue))
+  const value = fs.controlled ? toArray(fs.value) : localValue
+
+  const onToggle = (optValue: string, checked: boolean): void => {
+    const next = checked
+      ? Array.from(new Set([...value, optValue]))
+      : value.filter(v => v !== optValue)
+    if (fs.controlled) { fs.setValue(next); fs.triggerLive(next) }
+    else { setLocalValue(next); fs.triggerLive(next) }
+  }
+
+  const layout = columns > 1
+    ? `grid grid-cols-${columns} gap-2`
+    : 'flex flex-col gap-2'
+
+  return (
+    <div className={layout}>
+      {/* Mirror the array as repeated hidden inputs for native form submit. */}
+      {value.map((v, i) => (
+        <input key={`hidden-${i}`} type="hidden" name={name} value={v} />
+      ))}
+      {options.map((o) => {
+        const id = `${name}-${o.value}`
+        const checked = value.includes(o.value)
+        // Per-option disabled (from `disableOptionsWhenSelectedInSiblingRepeaterItems`)
+        // greys out unchecked taken values but keeps already-checked ones
+        // editable so the user can uncheck their own pick — otherwise a row
+        // would be stuck holding a value it can't release.
+        const optDisabled = disabled || (Boolean(o.disabled) && !checked)
+        return (
+          <label
+            key={o.value}
+            htmlFor={id}
+            className={
+              'flex items-center gap-2 text-sm ' +
+              (optDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer')
+            }
+          >
+            <Checkbox
+              id={id}
+              checked={checked}
+              onCheckedChange={(c: boolean) => onToggle(o.value, c)}
+              disabled={optDisabled}
+            />
+            <span>{o.label}</span>
+          </label>
+        )
+      })}
+    </div>
+  )
+}

package/src/react/fields/ColorInput.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import { useFieldState } from '../FormStateContext.js'
+import { Input } from '../ui/input.js'
+
+/**
+ * Hex color input. Renders the native `<input type="color">` next to
+ * a text mirror so users can paste literal hex codes. Both inputs
+ * stay in sync via the shared value state.
+ */
+export function ColorInput({
+  name, defaultValue, disabled,
+}: {
+  name:         string
+  defaultValue: unknown
+  disabled:     boolean
+}): React.ReactElement {
+  const fs = useFieldState(name)
+  const initial = typeof defaultValue === 'string' && defaultValue ? defaultValue : '#000000'
+  const [localValue, setLocalValue] = useState<string>(initial)
+
+  const value = fs.controlled
+    ? (typeof fs.value === 'string' && fs.value ? fs.value : '#000000')
+    : localValue
+
+  const setValue = (v: string): void => {
+    if (fs.controlled) { fs.setValue(v); fs.triggerLive(v) }
+    else { setLocalValue(v); fs.triggerLive(v) }
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <input type="hidden" name={name} value={value} />
+      <input
+        type="color"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        disabled={disabled}
+        className="h-9 w-12 cursor-pointer rounded-md border border-input bg-transparent"
+      />
+      <Input
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        disabled={disabled}
+        placeholder="#rrggbb"
+        className="font-mono"
+        maxLength={7}
+      />
+    </div>
+  )
+}

package/src/react/fields/DateFieldInput.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import { CalendarIcon } from 'lucide-react'
+import { useFieldState } from '../FormStateContext.js'
+import { Calendar } from '../ui/calendar.js'
+import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover.js'
+
+export function DateFieldInput({
+  name, defaultValue, disabled, placeholder,
+}: {
+  name:         string
+  defaultValue: string | undefined
+  disabled:     boolean
+  placeholder:  string | undefined
+}): React.ReactElement {
+  const fs = useFieldState(name)
+  const initial = defaultValue ? new Date(defaultValue) : undefined
+  const [localDate, setLocalDate] = useState<Date | undefined>(
+    initial && !isNaN(initial.getTime()) ? initial : undefined,
+  )
+  let date: Date | undefined
+  if (fs.controlled) {
+    const ctxStr = fs.value !== undefined && fs.value !== null && fs.value !== '' ? String(fs.value) : ''
+    if (ctxStr) {
+      const parsed = new Date(ctxStr)
+      date = isNaN(parsed.getTime()) ? undefined : parsed
+    }
+  } else {
+    date = localDate
+  }
+  const onSelect = (next: Date | undefined): void => {
+    const iso = next ? next.toISOString().slice(0, 10) : ''
+    if (fs.controlled) {
+      fs.setValue(iso)
+      fs.triggerLive(iso)
+    } else {
+      setLocalDate(next)
+      fs.triggerLive(iso)
+    }
+  }
+  const formatted = date ? date.toISOString().slice(0, 10) : ''
+  const display   = date
+    ? date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+    : (placeholder ?? 'Pick a date')
+
+  return (
+    <>
+      <input type="hidden" name={name} value={formatted} />
+      <Popover>
+        <PopoverTrigger
+          render={
+            <button
+              type="button"
+              id={name}
+              disabled={disabled}
+              className={`flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 ${
+                date ? 'text-foreground' : 'text-muted-foreground'
+              }`}
+            >
+              <span>{display}</span>
+              <CalendarIcon className="size-4 opacity-60" />
+            </button>
+          }
+        />
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar mode="single" selected={date} onSelect={onSelect} initialFocus />
+        </PopoverContent>
+      </Popover>
+    </>
+  )
+}

package/src/react/fields/DateTimeInput.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { useFieldState } from '../FormStateContext.js'
+import { Input } from '../ui/input.js'
+
+/**
+ * Native `<input type="datetime-local">` — adequate for v1. Same dual
+ * controlled/uncontrolled handling as the other field inputs. Coercion
+ * downstream parses the `YYYY-MM-DDTHH:mm` shape into a `Date`.
+ */
+export function DateTimeInput({
+  name, defaultValue, disabled, placeholder,
+}: {
+  name:         string
+  defaultValue: string | undefined
+  disabled:     boolean
+  placeholder:  string | undefined
+}): React.ReactElement {
+  const fs = useFieldState(name)
+
+  const initial = defaultValue ?? ''
+  const [localValue, setLocalValue] = useState<string>(initial)
+  const value = fs.controlled
+    ? (fs.value !== undefined && fs.value !== null && fs.value !== '' ? String(fs.value) : '')
+    : localValue
+
+  const setValue = (v: string): void => {
+    if (fs.controlled) { fs.setValue(v); fs.triggerLive(v) }
+    else { setLocalValue(v); fs.triggerLive(v) }
+  }
+
+  return (
+    <Input
+      type="datetime-local"
+      id={name}
+      name={name}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      disabled={disabled}
+      placeholder={placeholder}
+    />
+  )
+}

package/src/react/fields/FieldShell.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import type { ElementMeta } from '../../schema/Element.js'
+import { getIcon } from '../../icons/registry.js'
+
+/**
+ * Shared chrome around every field input — label + required asterisk +
+ * helper text + prefix/suffix decoration. The actual input component
+ * is passed as `children`. Keeps `renderField` in `SchemaRenderer.tsx`
+ * lean: dispatcher above, layout here.
+ *
+ * Decoration: `prefix` / `suffix` may be a plain string or an icon
+ * descriptor (`{ icon: 'name' }` / `{ icon: { class } }`). Strings
+ * render inside a muted-foreground span; icons resolve via the
+ * registry. When neither prefix nor suffix is present the input
+ * renders without any extra wrapper to preserve the legacy DOM.
+ */
+export interface FieldShellProps {
+  el:        ElementMeta
+  name:      string
+  label:     string
+  required:  boolean
+  children:  React.ReactNode
+}
+
+export function FieldShell({ el, name, label, required, children }: FieldShellProps): React.ReactElement {
+  const prefix     = el['prefix']     as string | { icon: string } | undefined
+  const suffix     = el['suffix']     as string | { icon: string } | undefined
+  const helperText = el['helperText'] as string | undefined
+  const inline     = el['inlineLabel'] === true
+  const hiddenLabel = el['hiddenLabel'] === true
+  const wrapperAttrs = pickWrapperAttrs(el)
+
+  const labelClass = hiddenLabel
+    ? 'sr-only'
+    : 'text-sm font-medium leading-none'
+  const labelEl = label !== '' ? (
+    <label htmlFor={name} className={labelClass}>
+      {label}{required && <span className="text-destructive ml-0.5">*</span>}
+    </label>
+  ) : null
+
+  const input = (prefix || suffix)
+    ? (
+      <div className="flex items-center gap-2">
+        {prefix && <Decoration content={prefix} side="prefix" />}
+        <div className="flex-1 min-w-0">{children}</div>
+        {suffix && <Decoration content={suffix} side="suffix" />}
+      </div>
+    )
+    : children
+
+  if (inline) {
+    return (
+      <div className="flex items-baseline gap-3" {...wrapperAttrs}>
+        {labelEl && <div className="min-w-32 pt-2">{labelEl}</div>}
+        <div className="min-w-0 flex-1">
+          {input}
+          {helperText && (
+            <p className="mt-1 text-xs text-muted-foreground">{helperText}</p>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5" {...wrapperAttrs}>
+      {labelEl}
+      {input}
+      {helperText && (
+        <p className="text-xs text-muted-foreground">{helperText}</p>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Merge `extraAttributes` (Filament-parity short name) and
+ * `extraFieldWrapperAttributes` (verbose alias) into one record. Latter
+ * wins on key collisions so callers who set both can override.
+ */
+function pickWrapperAttrs(el: ElementMeta): Record<string, string | number | boolean> {
+  const a = el['extraAttributes']             as Record<string, string | number | boolean> | undefined
+  const b = el['extraFieldWrapperAttributes'] as Record<string, string | number | boolean> | undefined
+  if (!a && !b) return {}
+  return { ...(a ?? {}), ...(b ?? {}) }
+}
+
+function Decoration({ content, side }: {
+  content: string | { icon: string }
+  side:    'prefix' | 'suffix'
+}): React.ReactElement {
+  if (typeof content === 'string') {
+    return (
+      <span className="text-sm text-muted-foreground shrink-0" data-side={side}>
+        {content}
+      </span>
+    )
+  }
+  return <DecorationIcon name={content.icon} />
+}
+
+function DecorationIcon({ name }: { name: string }): React.ReactElement | null {
+  const Icon = getIcon(name) as React.ComponentType<{ className?: string; 'aria-hidden'?: boolean | 'true' | 'false' }> | undefined
+  if (!Icon) return null
+  return <Icon className="size-4 text-muted-foreground shrink-0" aria-hidden="true" />
+}

package/src/react/fields/FileUploadInput.tsx

@@ -0,0 +1,189 @@
+import React, { useRef, useState } from 'react'
+import { UploadIcon, XIcon, FileIcon, Loader2Icon } from 'lucide-react'
+import { useFieldState } from '../FormStateContext.js'
+import { useToast } from '../Toaster.js'
+import { Button } from '../ui/button.js'
+
+/**
+ * File upload UI. On file pick → POST multipart to `uploadUrl` →
+ * stash returned URL in form state. Single-file shows the URL +
+ * preview thumb (when image). Multi-file accumulates a list.
+ *
+ * No DnD upload, no chunked uploads, no client-side image processing
+ * — v1 is "pick a file, send it, store the URL." Adapters do the work.
+ */
+export function FileUploadInput({
+  name, defaultValue, disabled, accept, maxSize, multiple, preview, directory, uploadUrl,
+}: {
+  name:         string
+  defaultValue: unknown
+  disabled:     boolean
+  accept:       string[] | undefined
+  maxSize:      number | undefined
+  multiple:     boolean
+  preview:      boolean
+  directory:    string | undefined
+  uploadUrl:    string | undefined
+}): React.ReactElement {
+  const fs   = useFieldState(name)
+  const { notify } = useToast()
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  const toUrls = (v: unknown): string[] => {
+    if (v === undefined || v === null || v === '') return []
+    if (Array.isArray(v)) return v.map(String)
+    if (typeof v === 'string') {
+      // JSON-array string from a previous round-trip
+      if (v.startsWith('[')) {
+        try {
+          const arr = JSON.parse(v)
+          if (Array.isArray(arr)) return arr.map(String)
+        } catch { /* fall through */ }
+      }
+      return [v]
+    }
+    return []
+  }
+
+  const [localUrls, setLocalUrls] = useState<string[]>(toUrls(defaultValue))
+  const urls = fs.controlled ? toUrls(fs.value) : localUrls
+  const [busy, setBusy] = useState(false)
+
+  const setUrls = (next: string[]): void => {
+    const stored = multiple ? next : (next[0] ?? null)
+    if (fs.controlled) {
+      fs.setValue(stored)
+      fs.triggerLive(stored)
+    } else {
+      setLocalUrls(next)
+      fs.triggerLive(stored)
+    }
+  }
+
+  const onPick = async (files: FileList | null): Promise<void> => {
+    if (!files || files.length === 0) return
+    if (!uploadUrl) {
+      notify({ type: 'error', title: 'Upload URL missing', body: 'Pilotiq panel has no upload route configured.' })
+      return
+    }
+    setBusy(true)
+    const next = multiple ? [...urls] : []
+    try {
+      for (const file of Array.from(files)) {
+        const fd = new FormData()
+        fd.append('file', file)
+        if (directory) fd.append('directory', directory)
+        if (accept)    fd.append('accept', accept.join(','))
+        if (maxSize !== undefined) fd.append('maxSize', String(maxSize))
+        fd.append('fieldName', name)
+        const res = await fetch(uploadUrl, {
+          method:  'POST',
+          body:    fd,
+          headers: { Accept: 'application/json' },
+        })
+        const json = await res.json().catch(() => ({})) as { ok?: boolean; url?: string; error?: string }
+        if (!res.ok || !json.ok || !json.url) {
+          notify({ type: 'error', title: 'Upload failed', body: json.error ?? `HTTP ${res.status}` })
+          continue
+        }
+        next.push(json.url)
+        if (!multiple) break
+      }
+      setUrls(next)
+    } finally {
+      setBusy(false)
+      // Reset the input so the user can re-pick the same file (browsers
+      // suppress onChange when the value hasn't changed).
+      if (inputRef.current) inputRef.current.value = ''
+    }
+  }
+
+  const removeAt = (i: number): void => {
+    const next = urls.filter((_, idx) => idx !== i)
+    setUrls(next)
+  }
+
+  // Hidden input for form-post fallback. Multi-file mode encodes as JSON
+  // so the server's coerceFormValues fileUpload branch can decode.
+  const hiddenValue = multiple ? JSON.stringify(urls) : (urls[0] ?? '')
+
+  return (
+    <div className="flex flex-col gap-2">
+      <input type="hidden" name={name} value={hiddenValue} readOnly />
+
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => inputRef.current?.click()}
+          disabled={disabled || busy}
+        >
+          {busy ? (
+            <Loader2Icon className="size-4 animate-spin" />
+          ) : (
+            <UploadIcon className="size-4" />
+          )}
+          {multiple ? 'Choose files' : 'Choose file'}
+        </Button>
+        <input
+          ref={inputRef}
+          type="file"
+          className="hidden"
+          accept={accept ? accept.join(',') : undefined}
+          multiple={multiple}
+          onChange={(e) => { void onPick(e.target.files) }}
+        />
+        {maxSize !== undefined && (
+          <span className="text-xs text-muted-foreground">
+            Max {Math.round(maxSize / 1024)} KB
+          </span>
+        )}
+      </div>
+
+      {urls.length > 0 && (
+        <ul className="flex flex-col gap-1.5">
+          {urls.map((url, i) => (
+            <li key={i} className="flex items-center gap-2 rounded-md border border-input bg-background px-2 py-1.5 text-sm">
+              {preview && isImage(url)
+                ? <img src={url} alt="" className="size-8 rounded object-cover" />
+                : <FileIcon className="size-4 text-muted-foreground" />
+              }
+              <a
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex-1 truncate hover:underline"
+              >
+                {fileNameFrom(url)}
+              </a>
+              <button
+                type="button"
+                className="text-muted-foreground hover:text-destructive"
+                onClick={() => removeAt(i)}
+                disabled={disabled}
+                aria-label="Remove file"
+              >
+                <XIcon className="size-4" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+function isImage(url: string): boolean {
+  return /\.(png|jpe?g|gif|webp|avif|svg)(\?|$)/i.test(url)
+}
+
+function fileNameFrom(url: string): string {
+  try {
+    const u = new URL(url, 'http://_')
+    const p = u.pathname.split('/').filter(Boolean).pop()
+    return p ?? url
+  } catch {
+    return url.split('/').filter(Boolean).pop() ?? url
+  }
+}

package/src/react/fields/HiddenInput.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { useFieldState } from '../FormStateContext.js'
+
+/**
+ * Pure passthrough — renders a single hidden input. The value is
+ * either bound to the form-state context (controlled mode, when the
+ * form has live fields) or the meta's defaultValue (uncontrolled).
+ */
+export function HiddenInput({
+  name, defaultValue,
+}: { name: string; defaultValue: unknown }): React.ReactElement {
+  const fs = useFieldState(name)
+  const stringify = (v: unknown): string =>
+    v === undefined || v === null ? '' : String(v)
+  const value = fs.controlled ? stringify(fs.value) : stringify(defaultValue)
+  return <input type="hidden" name={name} value={value} readOnly />
+}