@pilotiq/pilotiq 0.10.0 → 0.12.0

package/src/react/fields/MarkdownInput.tsx

@@ -6,6 +6,8 @@ import {
   CodeIcon, PaperclipIcon, Loader2Icon,
 } from 'lucide-react'
 import { useFieldState } from '../FormStateContext.js'
+import { useCollabRoom } from '../CollabRoomContext.js'
+import { getCollabTextRenderer, type CollabTextRenderer } from '../CollabTextRendererRegistry.js'
 import { useToast } from '../Toaster.js'
 import { Button } from '../ui/button.js'
 import { computeDelta, preserveCursor } from './textDelta.js'
@@ -46,6 +48,35 @@ export function MarkdownInput({
   uploadUrl:                  string | undefined
 }): React.ReactElement {
   const fs = useFieldState(name)
+  const room = useCollabRoom()
+  const collabRenderer = getCollabTextRenderer()
+
+  // Phase B follow-up — Tiptap-backed plain-text editor for markdown source
+  // when collab is on. Same architectural fix as `TextLikeInput`'s
+  // CollabTextField: y-prosemirror's `RelativePosition` cursor anchoring
+  // replaces the broken `Y.Text` + `computeDelta` + `preserveCursor` heuristic.
+  //
+  // Tradeoff: the markdown toolbar + Cmd-shortcuts + paste-image upload all
+  // operate on a `<textarea>`'s DOM selection — they don't have a way to
+  // reach into the Tiptap editor's selection without exposing the editor
+  // instance, which would widen the renderer seam. For now those features
+  // are write-mode-only on the native path; collab users type markdown
+  // syntax directly (`**bold**`, `## heading`). The preview tab keeps
+  // working since it reads `value` from local state.
+  if (room && collabRenderer) {
+    return (
+      <MarkdownCollabInput
+        Renderer={collabRenderer}
+        name={name}
+        defaultValue={defaultValue}
+        disabled={disabled}
+        {...(placeholder !== undefined ? { placeholder } : {})}
+        {...(minHeight !== undefined ? { minHeight } : {})}
+        {...(maxHeight !== undefined ? { maxHeight } : {})}
+      />
+    )
+  }
+
   const { notify } = useToast()
   const textareaRef = useRef<HTMLTextAreaElement | null>(null)
   // Phase F.6 — IME composition gate. Set between `compositionstart` /
@@ -124,9 +155,19 @@ export function MarkdownInput({
       const before = binding.read()
       if (next !== before) {
         const delta = computeDelta(before, next)
+        // Pre-stamp `boundValueRef.current = next` BEFORE `applyDelta`.
+        // Y.Text's `observe` fires synchronously inside `applyDelta` for
+        // our own write; without this the observer would see
+        // `prev=before, next=after` and run `preserveCursor` — designed
+        // for *remote* edits — which clobbers the user's caret on local
+        // typing (scrambled output on mid-string inserts). With
+        // `boundValueRef` already at `next`, the observer's
+        // `next === prev` short-circuit fires and the cursor is left
+        // alone for local echoes. Mirror of the same fix in
+        // `BoundTextInput.commitDelta`.
+        boundValueRef.current = next
         if (delta) binding.applyDelta(delta)
         setBoundValue(next)
-        boundValueRef.current = next
       }
       fs.setValue(next)
       fs.triggerLive(next)
@@ -422,6 +463,82 @@ function TabButton({ active, onClick, children }: {
   )
 }
 
+/**
+ * Phase B follow-up — collab-aware markdown editor. Mounts the registered
+ * Tiptap-backed plain-text renderer for the Write pane and reuses the
+ * existing `marked` pipeline for Preview. No toolbar, no Cmd-shortcuts, no
+ * paste-image upload — those features depend on textarea-DOM splicing that
+ * doesn't translate to Tiptap's selection model. The cursor-bug fix is the
+ * load-bearing change; markdown-syntax authors keep typing as before.
+ */
+function MarkdownCollabInput({
+  Renderer, name, defaultValue, disabled, placeholder, minHeight, maxHeight,
+}: {
+  Renderer:     CollabTextRenderer
+  name:         string
+  defaultValue: unknown
+  disabled:     boolean
+  placeholder?: string
+  minHeight?:   string
+  maxHeight?:   string
+}): React.ReactElement {
+  const fs = useFieldState(name)
+  const initial = useMemo(() => stringValue(defaultValue), [])
+  const [text, setText] = useState<string>(initial)
+  const [tab, setTab] = useState<'write' | 'preview'>('write')
+  const textRef = useRef(text)
+  useEffect(() => { textRef.current = text }, [text])
+
+  const handleChange = (next: string): void => {
+    setText(next)
+    if (fs.controlled) fs.setValue(next)
+    fs.triggerLive(next)
+  }
+  const handleBlur = (): void => { /* fire-and-forget — live trigger already ran on change */ }
+
+  const previewHtml = useMemo(
+    () => tab === 'preview' ? marked.parse(text, { gfm: true, breaks: false, async: false }) as string : '',
+    [tab, text],
+  )
+
+  const wrapperStyle: React.CSSProperties = {}
+  if (minHeight) wrapperStyle.minHeight = minHeight
+  if (maxHeight) wrapperStyle.maxHeight = maxHeight
+
+  return (
+    <div className="flex flex-col rounded-md border bg-background">
+      <div className="flex items-center border-b px-2 py-1">
+        <TabButton active={tab === 'write'}   onClick={() => setTab('write')}>Write</TabButton>
+        <TabButton active={tab === 'preview'} onClick={() => setTab('preview')}>Preview</TabButton>
+      </div>
+      {tab === 'write' ? (
+        <div style={wrapperStyle} className="overflow-auto">
+          <input type="hidden" name={name} value={text} />
+          <Renderer
+            name={name}
+            multiline={true}
+            defaultValue={initial}
+            {...(placeholder !== undefined ? { placeholder } : {})}
+            disabled={disabled}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            className="w-full bg-transparent px-3 py-2 text-sm font-mono leading-relaxed outline-none disabled:opacity-50 whitespace-pre-wrap break-words"
+          />
+        </div>
+      ) : (
+        <>
+          <input type="hidden" name={name} value={text} readOnly />
+          <div
+            className="prose prose-sm dark:prose-invert max-w-none px-3 py-2"
+            style={wrapperStyle}
+            dangerouslySetInnerHTML={{ __html: previewHtml || '<p class="text-muted-foreground italic">Nothing to preview</p>' }}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+
 function stringValue(v: unknown): string {
   if (v === undefined || v === null) return ''
   if (typeof v === 'string') return v

package/src/react/fields/RepeaterInput.tsx

@@ -3,7 +3,7 @@ import { PlusIcon } from 'lucide-react'
 import type { ElementMeta } from '../../schema/Element.js'
 import { Button } from '../ui/button.js'
 import { SchemaRenderer, dispatchHandlerAction } from '../SchemaRenderer.js'
-import { FormIdContext, useFormState } from '../FormStateContext.js'
+import { FormIdContext, useFormState, useRowBinding } from '../FormStateContext.js'
 import { findFieldMeta } from '../formStateHelpers.js'
 import { useNavigate } from '../navigate.js'
 import { useToast } from '../Toaster.js'
@@ -236,6 +236,75 @@ export function RepeaterInput({
     if (!metaRows) return
     setRows(prev => syncRowGates(prev, metaRows))
   }, [metaRows])
+  // Phase F.5 — row-array CRDT binding. `null` outside a collab room
+  // OR when the active binding doesn't implement F.5 row methods OR when
+  // this Repeater opted out via `.collab(false)`. The four row mutations
+  // (`addRow / cloneRow / removeRow / moveRow + DnD drop`) below call into
+  // it when present so peers see the same lifecycle events; absent =
+  // today's local-only behaviour, unchanged.
+  const rowBinding = useRowBinding(name)
+  // Phase F.5c — mirror row identities into the form's values map so dotted
+  // row-leaf consumers (`useFieldState('${name}.${i}.heading').textBinding`)
+  // can resolve the row's `__id` via `rowIdAtIndex(ctx.values, name, i)`.
+  // The renderer is the only source of truth for `(index → rowId)`; without
+  // this stamp the F.5c per-row Y.Text path stays null and row text fields
+  // never sync. Setting a `__id` key routes through `routeBindingWrite` →
+  // `parseRowFieldPath` which filters `__id` → no-op on the binding side
+  // (no Y.Text writes), so the only effect is a row in `valuesState`.
+  // `formStateForIds` mirrors `formState` below; we read via `useFormState()`
+  // here too instead of forward-referencing the later binding.
+  const formStateForIds = useFormState()
+  const ctxSetValue = formStateForIds?.setValue
+  useEffect(() => {
+    if (!ctxSetValue) return
+    for (let i = 0; i < rows.length; i++) {
+      const row = rows[i]
+      if (!row) continue
+      ctxSetValue(`${name}.${i}.__id`, row.id)
+    }
+  }, [rows, name, ctxSetValue])
+  // Phase F.5 — reconcile remote row events into the local `rows` state
+  // by `__id`. Local mutations also surface here (Yjs observers fire on
+  // local transactions); we dedupe by checking whether the rowId is
+  // already present in the current state. `template` seeds new rows so
+  // remote-added rows render with the same inner schema as locally-added
+  // ones.
+  useEffect(() => {
+    if (!rowBinding) return
+    const tpl = meta.template ?? []
+    return rowBinding.subscribe((event) => {
+      if (event.kind === 'add') {
+        setRows((prev) => {
+          if (prev.some(r => r.id === event.rowId)) return prev
+          const incoming: RowState = { id: event.rowId, children: tpl }
+          const next = prev.slice()
+          const at = Math.max(0, Math.min(event.index, next.length))
+          next.splice(at, 0, incoming)
+          return next
+        })
+        return
+      }
+      if (event.kind === 'remove') {
+        setRows((prev) => {
+          if (!prev.some(r => r.id === event.rowId)) return prev
+          return prev.filter(r => r.id !== event.rowId)
+        })
+        return
+      }
+      // move — recompute the local row order by lifting the row at `from`
+      // and re-inserting at `to`. No-op when local already matches.
+      setRows((prev) => {
+        const fromIdx = prev.findIndex(r => r.id === event.rowId)
+        if (fromIdx < 0) return prev
+        if (fromIdx === event.to) return prev
+        const next  = prev.slice()
+        const [moved] = next.splice(fromIdx, 1)
+        if (!moved) return prev
+        next.splice(event.to, 0, moved)
+        return next
+      })
+    })
+  }, [rowBinding, meta.template])
   const [collapsed, setCollapsed] = useState<Record<string, boolean>>(() =>
     accordion ? {} : initSeedCollapsed(initialRows, formId, name, defaultCollapsed, collapsible),
   )
@@ -269,6 +338,7 @@ export function RepeaterInput({
       children: meta.template ?? [],
     }
     setRows(prev => [...prev, newRow])
+    rowBinding?.add(newRow.id, {})
     if (accordion) {
       // New row should be the only one open — the user just asked for it.
       setAccordionOpenId(newRow.id)
@@ -284,6 +354,7 @@ export function RepeaterInput({
   const removeRow = (id: string): void => {
     if (atMin) return
     setRows(prev => prev.filter(r => r.id !== id))
+    rowBinding?.remove(id)
     if (accordion) {
       if (accordionOpenId === id) {
         setAccordionOpenId(null)
@@ -300,12 +371,14 @@ export function RepeaterInput({
 
   const cloneRow = (id: string): void => {
     if (atMax) return
+    let cloneId: string | null = null
     setRows(prev => {
       const idx = prev.findIndex(r => r.id === id)
       if (idx < 0) return prev
       const source = prev[idx]!
+      cloneId = generateRowId()
       const clone: RowState = {
-        id:       generateRowId(),
+        id:       cloneId,
         children: source.children,
         ...(source.itemLabel !== undefined ? { itemLabel: source.itemLabel } : {}),
       }
@@ -313,26 +386,38 @@ export function RepeaterInput({
       next.splice(idx + 1, 0, clone)
       return next
     })
+    // F.5 — register the clone's stable id on the binding. Per-field
+    // clone-of-source values flow through `setRow` on the user's next
+    // edit; v1 doesn't lift the source row's values onto the clone (the
+    // binding's empty seed combined with the DOM's defaultValue-copied
+    // inputs gives the local user the right visual state).
+    if (cloneId !== null) rowBinding?.add(cloneId, {})
   }
 
   const moveRow = (id: string, dir: -1 | 1): void => {
+    let newOrder: string[] | null = null
     setRows(prev => {
       const idx = prev.findIndex(r => r.id === id)
       if (idx < 0) return prev
       // Skip past hidden neighbours so reorder operates between visible
       // rows. Hidden rows hold their absolute slot — the visible row hops
       // over them.
+      let next: RowState[]
       if (dir === -1) {
         let target = idx - 1
         while (target >= 0 && prev[target]?.hidden) target--
         if (target < 0) return prev
-        return reorderRows(prev, idx, target)
+        next = reorderRows(prev, idx, target)
+      } else {
+        let target = idx + 1
+        while (target < prev.length && prev[target]?.hidden) target++
+        if (target >= prev.length) return prev
+        next = reorderRows(prev, idx, target + 1)
       }
-      let target = idx + 1
-      while (target < prev.length && prev[target]?.hidden) target++
-      if (target >= prev.length) return prev
-      return reorderRows(prev, idx, target + 1)
+      if (next !== prev) newOrder = next.map(r => r.id)
+      return next
     })
+    if (newOrder !== null) rowBinding?.reorder(newOrder)
   }
 
   // ── DnD state ───────────────────────────────────────────
@@ -345,11 +430,15 @@ export function RepeaterInput({
   } = useRowReorderDnd({
     enabled: reorderable && !disabled,
     onDrop: (fromId, at) => {
+      let newOrder: string[] | null = null
       setRows(prev => {
         const fromIdx = prev.findIndex(r => r.id === fromId)
         if (fromIdx < 0) return prev
-        return reorderRows(prev, fromIdx, at)
+        const next = reorderRows(prev, fromIdx, at)
+        if (next !== prev) newOrder = next.map(r => r.id)
+        return next
       })
+      if (newOrder !== null) rowBinding?.reorder(newOrder)
     },
   })
 

package/src/react/fields/TextLikeInput.tsx

@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { ElementMeta } from '../../schema/Element.js'
 import type { TextBinding } from '../FormCollabBindingRegistry.js'
 import { useFieldState } from '../FormStateContext.js'
+import { useCollabRoom } from '../CollabRoomContext.js'
+import { getCollabTextRenderer, type CollabTextRenderer } from '../CollabTextRendererRegistry.js'
 import { Input } from '../ui/input.js'
 import { Textarea } from '../ui/textarea.js'
 import { computeDelta, preserveCursor } from './textDelta.js'
@@ -38,6 +40,8 @@ export function TextLikeInput({
   applyMask?: (value: string) => string
 }): React.ReactElement {
   const fs = useFieldState(name)
+  const room = useCollabRoom()
+  const collabRenderer = getCollabTextRenderer()
   const liveCfg = el['live']
   const liveOpts = (typeof liveCfg === 'object' && liveCfg !== null
     ? liveCfg as { onBlur?: boolean; debounce?: number }
@@ -52,6 +56,40 @@ export function TextLikeInput({
   // `useCallback`-wrapped fn that's *always* defined (identity when no
   // mask), so its truthiness can't gate the branch.
   const hasMask = typeof el['mask'] === 'string'
+
+  // Phase B — Tiptap-backed plain-text editor for collab text fields.
+  // When a `<RecordCollabRoom>` is mounted up-tree AND `@pilotiq/tiptap`'s
+  // `registerTiptap()` registered a collab text renderer, take the new path:
+  // the editor anchors selections to Yjs `RelativePosition` (via y-prosemirror)
+  // instead of integer string offsets, fixing the cursor-jump + two-peer
+  // concurrent-insert races that the legacy `Y.Text` + `computeDelta` path
+  // can't resolve. Dotted-path row leaves (Repeater / Builder) stay on the
+  // legacy `fs.textBinding` path — per-row collab editor support is a
+  // separate follow-up.
+  const fieldCollab = el['collab'] as boolean | undefined
+  if (
+    room &&
+    collabRenderer &&
+    fieldCollab !== false &&
+    !hasMask &&
+    !name.includes('.')
+  ) {
+    return (
+      <CollabTextField
+        Renderer={collabRenderer}
+        name={name}
+        multiline={multiline}
+        defaultValue={stringValue(common['defaultValue'])}
+        {...(common['placeholder'] !== undefined ? { placeholder: String(common['placeholder']) } : {})}
+        disabled={Boolean(common['disabled'])}
+        triggerLive={fs.triggerLive}
+        setValue={fs.setValue}
+        controlled={fs.controlled}
+        onBlurMode={onBlurMode}
+      />
+    )
+  }
+
   if (fs.textBinding && !hasMask) {
     return (
       <BoundTextInput
@@ -217,13 +255,18 @@ function BoundTextInput({
     if (after === before) return
     const delta = computeDelta(before, after)
     if (!delta) return
+    // Pre-stamp `valueRef.current = after` BEFORE `applyDelta`. Y.Text's
+    // observe fires synchronously inside `applyDelta` for our own write,
+    // so without this the observer would see `prev=before, next=after`
+    // and run `preserveCursor` — which is designed for *remote* edits
+    // and clobbers the user's caret on local typing (typed '1' at pos 0
+    // would jump cursor forward by delta-length and the next keystroke
+    // would insert at the wrong index, producing scrambled output).
+    // With `valueRef` already at `after`, the observer's `next === prev`
+    // short-circuit fires and the cursor is left alone for local echoes.
+    valueRef.current = after
     binding.applyDelta(delta)
-    // Eager local + form-map update so the controlled input doesn't
-    // wait on the observer echo to render the new keystroke. Observer
-    // will fire with the same string and short-circuit via the equality
-    // check above.
     setValueLocal(after)
-    valueRef.current = after
     mirrorRef.current(after)
     if (!onBlurMode) triggerLive(after)
   }, [binding, onBlurMode, triggerLive])
@@ -267,6 +310,87 @@ function BoundTextInput({
   return <Input {...(props as React.ComponentProps<typeof Input>)} type={type} />
 }
 
+/**
+ * Phase B — wrapper around the registered Tiptap-backed collab editor.
+ * Owns the local text mirror so the hidden `<input>` always carries the
+ * editor's current value for FormData submission. When `FormStateProvider`
+ * is mounted up-tree, also mirrors every update into the values map via
+ * `fs.setValue` so `$get/$set` computations and any Y.Map LWW path (kept
+ * for non-text consumers) stay in sync.
+ *
+ * No IME / cursor-preservation gymnastics in here — the underlying Tiptap
+ * editor handles composition natively and y-prosemirror anchors selections
+ * to `Yjs.RelativePosition`, so the cursor survives concurrent + mid-word
+ * remote edits without any client-side bookkeeping.
+ */
+function CollabTextField({
+  Renderer, name, multiline, defaultValue, placeholder, disabled,
+  triggerLive, setValue, controlled, onBlurMode,
+}: {
+  Renderer:     CollabTextRenderer
+  name:         string
+  multiline:    boolean
+  defaultValue: string
+  placeholder?: string
+  disabled:     boolean
+  triggerLive:  (valueOverride?: unknown) => void
+  setValue:     (v: unknown) => void
+  controlled:   boolean
+  onBlurMode:   boolean
+}): React.ReactElement {
+  const [text, setText] = useState<string>(defaultValue)
+  const textRef = useRef(text)
+  useEffect(() => { textRef.current = text }, [text])
+
+  const handleChange = useCallback((next: string): void => {
+    setText(next)
+    if (controlled) setValue(next)
+    if (!onBlurMode) triggerLive(next)
+  }, [controlled, onBlurMode, setValue, triggerLive])
+
+  const handleBlur = useCallback((): void => {
+    if (onBlurMode) triggerLive(textRef.current)
+  }, [onBlurMode, triggerLive])
+
+  // Match the visual chrome of `<Input>` / `<Textarea>` so the editor reads
+  // as a drop-in replacement. The adapter forwards this class to its
+  // contenteditable wrapper; `whitespace-nowrap` on the single-line variant
+  // keeps the editor from wrapping into a second line if a stray paragraph
+  // split somehow makes it through.
+  //
+  // `overflow-x-clip` (not `auto`) on the single-line variant matters for
+  // `CollaborationCaret` presence labels: per the CSS overflow spec, setting
+  // either axis to a non-visible / non-clip value (`auto` / `scroll` /
+  // `hidden`) forces the other axis to compute as `auto` too — so
+  // `overflow-x-auto` would clip the caret's user-name label, which renders
+  // `-1.4em` above the line. `clip` is the one non-visible value that does
+  // NOT force the other axis, so `overflow-y` stays `visible` and the label
+  // escapes the chrome upward as designed. Trade-off: long text gets clipped
+  // on the right rather than horizontally scrollable (native `<input>`
+  // semantics) — acceptable for plain-text fields, where typing past the
+  // visible width is rare and the caret presence label is the higher-value
+  // affordance.
+  const className = multiline
+    ? 'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm whitespace-pre-wrap break-words'
+    : 'flex h-9 w-full items-center rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm whitespace-nowrap overflow-x-clip'
+
+  return (
+    <>
+      <input type="hidden" name={name} value={text} />
+      <Renderer
+        name={name}
+        multiline={multiline}
+        defaultValue={defaultValue}
+        {...(placeholder !== undefined ? { placeholder } : {})}
+        disabled={disabled}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        className={className}
+      />
+    </>
+  )
+}
+
 function identity(v: string): string { return v }
 
 function stringValue(v: unknown): string {