@pilotiq/pilotiq 0.1.0

package/src/react/fields/KeyValueInput.tsx

@@ -0,0 +1,200 @@
+import React, { useMemo, useState } from 'react'
+import { Trash2Icon, PlusIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react'
+import { useFieldState } from '../FormStateContext.js'
+import { Input } from '../ui/input.js'
+import { Button } from '../ui/button.js'
+
+type Row = { id: number; key: string; value: string }
+
+let _rowSeq = 0
+const newId = (): number => ++_rowSeq
+
+/**
+ * Edit a flat key-value map. Internally tracks an array of rows so the
+ * user can re-arrange / blank out keys without losing the in-progress
+ * row. On every change, serializes the rows to a JSON string in the
+ * hidden input — the server's `coerceFormValues` keyValue branch parses
+ * it back into a `Record<string, string>` and drops empty placeholders.
+ */
+export function KeyValueInput({
+  name, defaultValue, disabled, keyLabel, valueLabel, addLabel, reorderable,
+}: {
+  name:        string
+  defaultValue: unknown
+  disabled:    boolean
+  keyLabel:    string
+  valueLabel:  string
+  addLabel:    string
+  reorderable: boolean
+}): React.ReactElement {
+  const fs = useFieldState(name)
+
+  const initialRows = useMemo<Row[]>(() => {
+    const obj = parseToObject(defaultValue)
+    const entries = Object.entries(obj)
+    return entries.length > 0
+      ? entries.map(([k, v]) => ({ id: newId(), key: k, value: v }))
+      : [{ id: newId(), key: '', value: '' }]
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const [localRows, setLocalRows] = useState<Row[]>(initialRows)
+  const rows = fs.controlled
+    ? deriveRowsFromContext(fs.value, localRows)
+    : localRows
+
+  const setRows = (next: Row[]): void => {
+    const obj: Record<string, string> = {}
+    for (const r of next) {
+      if (r.key === '' && r.value === '') continue
+      obj[r.key] = r.value
+    }
+    if (fs.controlled) {
+      fs.setValue(obj)
+      // Mirror locally so the row identity survives a re-resolve that
+      // doesn't ship row IDs.
+      setLocalRows(next)
+    } else {
+      setLocalRows(next)
+    }
+    fs.triggerLive(obj)
+  }
+
+  const updateRow = (id: number, patch: Partial<Row>): void => {
+    setRows(rows.map(r => r.id === id ? { ...r, ...patch } : r))
+  }
+  const removeRow = (id: number): void => {
+    const next = rows.filter(r => r.id !== id)
+    setRows(next.length > 0 ? next : [{ id: newId(), key: '', value: '' }])
+  }
+  const addRow = (): void => {
+    setRows([...rows, { id: newId(), key: '', value: '' }])
+  }
+  const moveRow = (id: number, dir: -1 | 1): void => {
+    const idx = rows.findIndex(r => r.id === id)
+    if (idx < 0) return
+    const target = idx + dir
+    if (target < 0 || target >= rows.length) return
+    const next = rows.slice()
+    const tmp = next[idx]!
+    next[idx] = next[target]!
+    next[target] = tmp
+    setRows(next)
+  }
+
+  // Serialize for native form submit (only used outside controlled mode).
+  const hiddenValue = useMemo(() => {
+    const obj: Record<string, string> = {}
+    for (const r of rows) {
+      if (r.key === '' && r.value === '') continue
+      obj[r.key] = r.value
+    }
+    return JSON.stringify(obj)
+  }, [rows])
+
+  return (
+    <div className="flex flex-col gap-2">
+      <input type="hidden" name={name} value={hiddenValue} readOnly />
+      <div className="grid gap-2" style={{ gridTemplateColumns: reorderable ? 'auto 1fr 1fr auto' : '1fr 1fr auto' }}>
+        <div className="text-xs text-muted-foreground" style={{ gridColumn: reorderable ? '2' : '1' }}>{keyLabel}</div>
+        <div className="text-xs text-muted-foreground">{valueLabel}</div>
+        <div />
+        {rows.map((row, idx) => (
+          <React.Fragment key={row.id}>
+            {reorderable && (
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  className="text-muted-foreground hover:text-foreground disabled:opacity-30"
+                  onClick={() => moveRow(row.id, -1)}
+                  disabled={disabled || idx === 0}
+                  aria-label="Move up"
+                >
+                  <ArrowUpIcon className="size-3.5" />
+                </button>
+                <button
+                  type="button"
+                  className="text-muted-foreground hover:text-foreground disabled:opacity-30"
+                  onClick={() => moveRow(row.id, 1)}
+                  disabled={disabled || idx === rows.length - 1}
+                  aria-label="Move down"
+                >
+                  <ArrowDownIcon className="size-3.5" />
+                </button>
+              </div>
+            )}
+            <Input
+              value={row.key}
+              onChange={(e) => updateRow(row.id, { key: e.target.value })}
+              disabled={disabled}
+              placeholder={keyLabel}
+            />
+            <Input
+              value={row.value}
+              onChange={(e) => updateRow(row.id, { value: e.target.value })}
+              disabled={disabled}
+              placeholder={valueLabel}
+            />
+            <button
+              type="button"
+              className="text-muted-foreground hover:text-destructive"
+              onClick={() => removeRow(row.id)}
+              disabled={disabled}
+              aria-label="Remove row"
+            >
+              <Trash2Icon className="size-4" />
+            </button>
+          </React.Fragment>
+        ))}
+      </div>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={addRow}
+        disabled={disabled}
+        className="self-start"
+      >
+        <PlusIcon className="size-4" />
+        {addLabel}
+      </Button>
+    </div>
+  )
+}
+
+function parseToObject(v: unknown): Record<string, string> {
+  if (v === undefined || v === null || v === '') return {}
+  if (typeof v === 'string') {
+    try {
+      const o = JSON.parse(v)
+      if (o && typeof o === 'object' && !Array.isArray(o)) {
+        const out: Record<string, string> = {}
+        for (const [k, val] of Object.entries(o)) out[String(k)] = val == null ? '' : String(val)
+        return out
+      }
+    } catch { /* fall through */ }
+    return {}
+  }
+  if (typeof v === 'object' && !Array.isArray(v)) {
+    const out: Record<string, string> = {}
+    for (const [k, val] of Object.entries(v as Record<string, unknown>)) {
+      out[String(k)] = val == null ? '' : String(val)
+    }
+    return out
+  }
+  return {}
+}
+
+function deriveRowsFromContext(ctxValue: unknown, fallback: Row[]): Row[] {
+  // Convert the live-form-state object back into our row array. Rows from
+  // `fallback` are the source of truth for IDs (so React can preserve
+  // input focus); we rebuild the kv pairs from the context value but
+  // re-key by index.
+  const obj = parseToObject(ctxValue)
+  const keys = Object.keys(obj)
+  if (keys.length === 0) return fallback
+  return keys.map((k, i) => {
+    const fb = fallback[i]
+    return { id: fb ? fb.id : newId(), key: k, value: obj[k]! }
+  })
+}

package/src/react/fields/MarkdownInput.tsx

@@ -0,0 +1,333 @@
+import React, { useMemo, useRef, useState } from 'react'
+import { marked } from 'marked'
+import {
+  BoldIcon, ItalicIcon, StrikethroughIcon, LinkIcon,
+  HeadingIcon, ListIcon, ListOrderedIcon, QuoteIcon,
+  CodeIcon, PaperclipIcon, Loader2Icon,
+} from 'lucide-react'
+import { useFieldState } from '../FormStateContext.js'
+import { useToast } from '../Toaster.js'
+import { Button } from '../ui/button.js'
+
+type ToolbarButton =
+  | 'bold' | 'italic' | 'strike' | 'link'
+  | 'heading' | 'bulletList' | 'orderedList' | 'blockquote'
+  | 'codeBlock' | 'attachFiles'
+
+/**
+ * Plain-markdown editor. Stores the raw string under `name`. Renders a
+ * tab switcher (Write / Preview), a configurable formatting toolbar, and
+ * a `<textarea>`. The Preview tab parses the current value via `marked`
+ * and mounts the result in a `prose`-styled container.
+ *
+ * `attachFiles` is special-cased — when present in the toolbar AND
+ * `uploadUrl` is set, the toolbar button + paste-image handler upload
+ * the file and splice an `![alt](returnedUrl)` reference at the cursor.
+ * The server's `MarkdownField.toMeta()` strips the button from the
+ * toolbar list when no `UploadAdapter` is registered, so we never see
+ * an `attachFiles` entry without a working upload route.
+ */
+export function MarkdownInput({
+  name, defaultValue, disabled, placeholder,
+  toolbarButtons, minHeight, maxHeight,
+  fileAttachmentsDirectory, fileAttachmentsVisibility,
+  uploadUrl,
+}: {
+  name:                       string
+  defaultValue:               unknown
+  disabled:                   boolean
+  placeholder:                string | undefined
+  toolbarButtons:             ToolbarButton[]
+  minHeight:                  string | undefined
+  maxHeight:                  string | undefined
+  fileAttachmentsDirectory:   string | undefined
+  fileAttachmentsVisibility:  string | undefined
+  uploadUrl:                  string | undefined
+}): React.ReactElement {
+  const fs = useFieldState(name)
+  const { notify } = useToast()
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+
+  const initial = useMemo(() => stringValue(defaultValue), [])
+  const [localValue, setLocalValue] = useState<string>(initial)
+  const [tab, setTab] = useState<'write' | 'preview'>('write')
+  const [busy, setBusy] = useState(false)
+
+  const value = fs.controlled ? stringValue(fs.value) : localValue
+  const setValue = (next: string): void => {
+    if (fs.controlled) { fs.setValue(next); fs.triggerLive(next) }
+    else                { setLocalValue(next); fs.triggerLive(next) }
+  }
+
+  const previewHtml = useMemo(
+    () => tab === 'preview' ? marked.parse(value, { gfm: true, breaks: false, async: false }) as string : '',
+    [tab, value],
+  )
+
+  /** Splice text around the current selection in the textarea. */
+  const transform = (fn: (sel: string, before: string, after: string) => {
+    next: string
+    cursor: { start: number; end: number }
+  }): void => {
+    const ta = textareaRef.current
+    if (!ta) return
+    const start = ta.selectionStart
+    const end   = ta.selectionEnd
+    const sel   = ta.value.slice(start, end)
+    const before = ta.value.slice(0, start)
+    const after  = ta.value.slice(end)
+    const { next, cursor } = fn(sel, before, after)
+    setValue(next)
+    // Defer cursor restore until React has flushed the new value.
+    requestAnimationFrame(() => {
+      ta.focus()
+      ta.setSelectionRange(cursor.start, cursor.end)
+    })
+  }
+
+  const wrapSelection = (open: string, close: string = open, placeholderText = ''): void => {
+    transform((sel, before, after) => {
+      const text = sel || placeholderText
+      const next = `${before}${open}${text}${close}${after}`
+      const start = before.length + open.length
+      const end   = start + text.length
+      return { next, cursor: { start, end } }
+    })
+  }
+
+  const prefixLine = (prefix: string): void => {
+    transform((sel, before, after) => {
+      // Find the start of the line containing selection start.
+      const lineStart = before.lastIndexOf('\n') + 1
+      const head = before.slice(0, lineStart)
+      const lineHead = before.slice(lineStart)
+      const next = `${head}${prefix}${lineHead}${sel}${after}`
+      const newPos = before.length + prefix.length
+      return { next, cursor: { start: newPos, end: newPos + sel.length } }
+    })
+  }
+
+  const insertOrderedList = (): void => {
+    transform((sel, before, after) => {
+      const lines = (sel || 'List item').split('\n')
+      const numbered = lines.map((l, i) => `${i + 1}. ${l}`).join('\n')
+      const next = `${before}${numbered}${after}`
+      return { next, cursor: { start: before.length, end: before.length + numbered.length } }
+    })
+  }
+
+  const insertLink = (): void => {
+    const url = window.prompt('URL') ?? ''
+    if (!url) return
+    transform((sel, before, after) => {
+      const text = sel || 'link text'
+      const md = `[${text}](${url})`
+      return { next: `${before}${md}${after}`, cursor: { start: before.length + 1, end: before.length + 1 + text.length } }
+    })
+  }
+
+  const insertCodeBlock = (): void => {
+    transform((sel, before, after) => {
+      const fence = '```'
+      const body  = sel || 'code'
+      const md    = `${fence}\n${body}\n${fence}`
+      const start = before.length + fence.length + 1
+      const end   = start + body.length
+      return { next: `${before}${md}${after}`, cursor: { start, end } }
+    })
+  }
+
+  const uploadAndInsert = async (file: File): Promise<void> => {
+    if (!uploadUrl) {
+      notify({ type: 'error', title: 'Upload URL missing', body: 'Pilotiq panel has no upload route configured.' })
+      return
+    }
+    setBusy(true)
+    try {
+      const fd = new FormData()
+      fd.append('file', file)
+      if (fileAttachmentsDirectory)  fd.append('directory',  fileAttachmentsDirectory)
+      if (fileAttachmentsVisibility) fd.append('visibility', fileAttachmentsVisibility)
+      fd.append('fieldName', name)
+      const res = await fetch(uploadUrl, { method: 'POST', body: fd, headers: { Accept: 'application/json' } })
+      const data = await res.json().catch(() => ({} as { ok?: boolean; url?: string; error?: string }))
+      if (!res.ok || !data.ok || !data.url) {
+        notify({ type: 'error', title: 'Upload failed', body: data.error ?? `Status ${res.status}` })
+        return
+      }
+      const isImage = file.type.startsWith('image/')
+      transform((sel, before, after) => {
+        const alt = sel || file.name
+        const md = isImage ? `![${alt}](${data.url})` : `[${alt}](${data.url})`
+        return { next: `${before}${md}${after}`, cursor: { start: before.length + md.length, end: before.length + md.length } }
+      })
+    } catch (err) {
+      notify({ type: 'error', title: 'Upload failed', body: err instanceof Error ? err.message : String(err) })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const onAttachClick = (): void => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.onchange = () => {
+      const file = input.files?.[0]
+      if (file) void uploadAndInsert(file)
+    }
+    input.click()
+  }
+
+  const onPaste = (e: React.ClipboardEvent<HTMLTextAreaElement>): void => {
+    if (!toolbarButtons.includes('attachFiles') || !uploadUrl) return
+    const items = Array.from(e.clipboardData?.items ?? [])
+    const fileItem = items.find(it => it.kind === 'file' && it.type.startsWith('image/'))
+    if (!fileItem) return
+    const file = fileItem.getAsFile()
+    if (!file) return
+    e.preventDefault()
+    void uploadAndInsert(file)
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
+    const meta = e.metaKey || e.ctrlKey
+    if (!meta) return
+    const key = e.key.toLowerCase()
+    if (key === 'b') { e.preventDefault(); wrapSelection('**', '**', 'bold text') }
+    else if (key === 'i') { e.preventDefault(); wrapSelection('*', '*', 'italic text') }
+    else if (key === 'k') { e.preventDefault(); insertLink() }
+  }
+
+  const buttonHandler: Record<ToolbarButton, () => void> = {
+    bold:        () => wrapSelection('**', '**', 'bold text'),
+    italic:      () => wrapSelection('*', '*', 'italic text'),
+    strike:      () => wrapSelection('~~', '~~', 'strikethrough'),
+    link:        insertLink,
+    heading:     () => prefixLine('## '),
+    bulletList:  () => prefixLine('- '),
+    orderedList: insertOrderedList,
+    blockquote:  () => prefixLine('> '),
+    codeBlock:   insertCodeBlock,
+    attachFiles: onAttachClick,
+  }
+
+  const buttonIcon: Record<ToolbarButton, React.ComponentType<{ className?: string }>> = {
+    bold:        BoldIcon,
+    italic:      ItalicIcon,
+    strike:      StrikethroughIcon,
+    link:        LinkIcon,
+    heading:     HeadingIcon,
+    bulletList:  ListIcon,
+    orderedList: ListOrderedIcon,
+    blockquote:  QuoteIcon,
+    codeBlock:   CodeIcon,
+    attachFiles: PaperclipIcon,
+  }
+
+  const buttonLabel: Record<ToolbarButton, string> = {
+    bold:        'Bold (⌘B)',
+    italic:      'Italic (⌘I)',
+    strike:      'Strikethrough',
+    link:        'Link (⌘K)',
+    heading:     'Heading',
+    bulletList:  'Bulleted list',
+    orderedList: 'Numbered list',
+    blockquote:  'Quote',
+    codeBlock:   'Code block',
+    attachFiles: 'Attach file',
+  }
+
+  const taStyle: React.CSSProperties = {}
+  if (minHeight) taStyle.minHeight = minHeight
+  if (maxHeight) taStyle.maxHeight = maxHeight
+
+  return (
+    <div className="flex flex-col rounded-md border bg-background">
+      <div className="flex items-center justify-between border-b px-2 py-1 gap-2">
+        <div className="flex items-center gap-0.5">
+          <TabButton active={tab === 'write'} onClick={() => setTab('write')}>Write</TabButton>
+          <TabButton active={tab === 'preview'} onClick={() => setTab('preview')}>Preview</TabButton>
+        </div>
+        {tab === 'write' && toolbarButtons.length > 0 && (
+          <div className="flex items-center gap-0.5">
+            {toolbarButtons.map((b) => {
+              const Icon = buttonIcon[b]
+              const isAttach = b === 'attachFiles'
+              return (
+                <Button
+                  key={b}
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="size-7 p-0"
+                  onClick={buttonHandler[b]}
+                  disabled={disabled || (isAttach && busy)}
+                  title={buttonLabel[b]}
+                  aria-label={buttonLabel[b]}
+                >
+                  {isAttach && busy
+                    ? <Loader2Icon className="size-4 animate-spin" />
+                    : <Icon className="size-4" />}
+                </Button>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {tab === 'write' ? (
+        <textarea
+          ref={textareaRef}
+          name={name}
+          id={name}
+          className="w-full resize-y bg-transparent px-3 py-2 text-sm font-mono leading-relaxed outline-none disabled:opacity-50"
+          style={taStyle}
+          placeholder={placeholder}
+          disabled={disabled}
+          {...(fs.controlled
+            ? { value, onChange: (e) => setValue(e.target.value) }
+            : { defaultValue: initial, onChange: (e) => setLocalValue(e.target.value) })}
+          onPaste={onPaste}
+          onKeyDown={onKeyDown}
+        />
+      ) : (
+        <>
+          <input type="hidden" name={name} value={value} readOnly />
+          <div
+            className="prose prose-sm dark:prose-invert max-w-none px-3 py-2"
+            style={taStyle}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: previewHtml || '<p class="text-muted-foreground italic">Nothing to preview</p>' }}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+
+function TabButton({ active, onClick, children }: {
+  active: boolean
+  onClick: () => void
+  children: React.ReactNode
+}): React.ReactElement {
+  return (
+    <button
+      type="button"
+      className={[
+        'px-3 py-1 text-xs font-medium rounded transition-colors',
+        active
+          ? 'bg-accent text-accent-foreground'
+          : 'text-muted-foreground hover:text-foreground',
+      ].join(' ')}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
+}
+
+function stringValue(v: unknown): string {
+  if (v === undefined || v === null) return ''
+  if (typeof v === 'string') return v
+  return String(v)
+}

package/src/react/fields/RadioInput.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import { useFieldState } from '../FormStateContext.js'
+
+/**
+ * Single-choice field rendered as a vertical (or `inline:true` horizontal)
+ * stack of `<input type="radio">` rows. Controlled when inside a
+ * `FormStateProvider`, uncontrolled otherwise.
+ */
+export function RadioInput({
+  name, defaultValue, disabled, options, inline,
+}: {
+  name:         string
+  defaultValue: string | undefined
+  disabled:     boolean
+  options:      Array<{ value: string; label: string; disabled?: boolean }>
+  inline:       boolean
+}): React.ReactElement {
+  const fs = useFieldState(name)
+  const [localValue, setLocalValue] = useState<string>(defaultValue ?? '')
+  const value = fs.controlled
+    ? (fs.value !== undefined && fs.value !== null ? String(fs.value) : '')
+    : localValue
+  const onChange = (next: string): void => {
+    if (fs.controlled) { fs.setValue(next); fs.triggerLive(next) }
+    else { setLocalValue(next); fs.triggerLive(next) }
+  }
+  const layout = inline ? 'flex flex-row flex-wrap gap-4' : 'flex flex-col gap-2'
+  return (
+    <div role="radiogroup" className={layout}>
+      <input type="hidden" name={name} value={value} />
+      {options.map((o) => {
+        const id = `${name}-${o.value}`
+        const checked = value === o.value
+        const optDisabled = disabled || Boolean(o.disabled)
+        return (
+          <label
+            key={o.value}
+            htmlFor={id}
+            className={
+              'flex items-center gap-2 text-sm ' +
+              (optDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer')
+            }
+          >
+            <input
+              type="radio"
+              id={id}
+              name={`${name}__radio`}
+              value={o.value}
+              checked={checked}
+              onChange={() => onChange(o.value)}
+              disabled={optDisabled}
+              className="size-4 accent-primary"
+            />
+            <span>{o.label}</span>
+          </label>
+        )
+      })}
+    </div>
+  )
+}