@pilotiq/pilotiq 0.12.0 → 0.13.1

package/src/react/fields/MarkdownInput.tsx

@@ -8,9 +8,10 @@ import {
 import { useFieldState } from '../FormStateContext.js'
 import { useCollabRoom } from '../CollabRoomContext.js'
 import { getCollabTextRenderer, type CollabTextRenderer } from '../CollabTextRendererRegistry.js'
+import { useRowCoords } from '../RowCoordsContext.js'
+import { parseRowFieldPath } from '../formStateHelpers.js'
 import { useToast } from '../Toaster.js'
 import { Button } from '../ui/button.js'
-import { computeDelta, preserveCursor } from './textDelta.js'
 
 type ToolbarButton =
   | 'bold' | 'italic' | 'strike' | 'link'
@@ -50,24 +51,37 @@ export function MarkdownInput({
   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.
+  const rowCoords = useRowCoords()
+
+  // 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 against a
+  // `Y.XmlFragment` replaces whole-string LWW. Row leaves get the
+  // composite-key transform via `useRowCoords()` + `parseRowFieldPath`
+  // (same shape as TextLikeInput) so the fragment survives row reorders.
   //
-  // 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
+  // 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. 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) {
+  // working since `MarkdownCollabInput` maintains a local mirror.
+  const fragmentKey: string | null = (() => {
+    if (!name.includes('.')) return name
+    if (!rowCoords) return null
+    const parsed = parseRowFieldPath(name)
+    if (!parsed) return null
+    if (parsed.arrayName !== rowCoords.arrayName) return null
+    if (parsed.index     !== rowCoords.rowIndex)  return null
+    return `${rowCoords.arrayName}.${rowCoords.rowId}.${parsed.fieldName}`
+  })()
+  if (room && collabRenderer && fragmentKey !== null) {
     return (
       <MarkdownCollabInput
         Renderer={collabRenderer}
-        name={name}
+        fragmentKey={fragmentKey}
+        hiddenInputName={name}
         defaultValue={defaultValue}
         disabled={disabled}
         {...(placeholder !== undefined ? { placeholder } : {})}
@@ -79,100 +93,15 @@ export function MarkdownInput({
 
   const { notify } = useToast()
   const textareaRef = useRef<HTMLTextAreaElement | null>(null)
-  // Phase F.6 — IME composition gate. Set between `compositionstart` /
-  // `compositionend`; the textarea's onChange skips `applyDelta` while
-  // composing so intermediate chars don't emit ops. Lives at the
-  // component scope so the onChange and composition handlers share it.
-  const isComposingRef = useRef<boolean>(false)
 
   const initial = useMemo(() => stringValue(defaultValue), [])
   const [localValue, setLocalValue] = useState<string>(initial)
   const [tab, setTab] = useState<'write' | 'preview'>('write')
   const [busy, setBusy] = useState(false)
 
-  // Phase F.6 — when a `<RecordCollabRoom>` is mounted and the field has
-  // a `TextBinding`, the textarea is bound to a `Y.Text` and edits emit
-  // `TextDelta`s. Mirrors the architecture in `TextLikeInput.tsx` but
-  // wired in-line because MarkdownInput has its own toolbar + Preview
-  // tab that also need to flow through the binding.
-  const binding = fs.textBinding
-  const [boundValue, setBoundValue] = useState<string>(() => binding?.read() ?? initial)
-  const boundValueRef = useRef<string>(boundValue)
-  useEffect(() => { boundValueRef.current = boundValue }, [boundValue])
-
-  // On binding swap: read current Y.Text state. If non-empty, lift it
-  // into local + form-map state. If empty (no peer has typed yet), leave
-  // the SSR-default-derived `boundValue` showing — first edit will
-  // emit a replace-from-empty delta that atomically populates Y.Text.
-  // No client-side seed: Y.Text isn't safe to seed under concurrent
-  // first-mounters (see @pilotiq-pro/collab `formCollabBinding.ts`).
-  useEffect(() => {
-    if (!binding) return
-    const next = binding.read()
-    if (next.length > 0) {
-      setBoundValue(next)
-      boundValueRef.current = next
-      fs.setValue(next)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [binding])
-
-  // Subscribe to remote changes. Local-echoes are filtered by the
-  // `next === prev` guard. Cursor preserved via the same heuristic
-  // used in `TextLikeInput.BoundTextInput`.
-  useEffect(() => {
-    if (!binding) return
-    return binding.observe((next) => {
-      const prev = boundValueRef.current
-      if (next === prev) return
-      const ta = textareaRef.current
-      const cursor = ta?.selectionStart ?? next.length
-      const restored = preserveCursor(prev, next, cursor)
-      setBoundValue(next)
-      boundValueRef.current = next
-      fs.setValue(next)
-      requestAnimationFrame(() => {
-        if (!ta) return
-        if (document.activeElement !== ta) return
-        try { ta.setSelectionRange(restored, restored) } catch { /* defensive */ }
-      })
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [binding])
-
-  const value = binding
-    ? boundValue
-    : (fs.controlled ? stringValue(fs.value) : localValue)
+  const value = fs.controlled ? stringValue(fs.value) : localValue
 
   const setValue = (next: string): void => {
-    if (binding) {
-      // Compute against current Y.Text contents (not the local ref) so:
-      //  - first edit against empty Y.Text → `insert@0 <whole>` atomic
-      //    populate (no separate seed op needed);
-      //  - after a remote-applied update or server-resolve replace, the
-      //    delta reflects the actual current shared state, not stale
-      //    local bookkeeping.
-      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)
-      }
-      fs.setValue(next)
-      fs.triggerLive(next)
-      return
-    }
     if (fs.controlled) { fs.setValue(next); fs.triggerLive(next) }
     else                { setLocalValue(next); fs.triggerLive(next) }
   }
@@ -405,24 +334,7 @@ export function MarkdownInput({
           {...(fs.controlled
             ? {
                 value,
-                onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-                  // Phase F.6 — when the binding is active and the user
-                  // is mid-IME, paint locally and hold the delta until
-                  // compositionend so we never emit ops for the
-                  // intermediate composing chars.
-                  if (binding && isComposingRef.current) {
-                    setBoundValue(e.target.value)
-                    return
-                  }
-                  setValue(e.target.value)
-                },
-                ...(binding ? {
-                  onCompositionStart: () => { isComposingRef.current = true },
-                  onCompositionEnd:   (e: React.CompositionEvent<HTMLTextAreaElement>) => {
-                    isComposingRef.current = false
-                    setValue(e.currentTarget.value)
-                  },
-                } : {}),
+                onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value),
               }
             : { defaultValue: initial, onChange: (e) => setLocalValue(e.target.value) })}
           onPaste={onPaste}
@@ -472,17 +384,18 @@ function TabButton({ active, onClick, children }: {
  * load-bearing change; markdown-syntax authors keep typing as before.
  */
 function MarkdownCollabInput({
-  Renderer, name, defaultValue, disabled, placeholder, minHeight, maxHeight,
+  Renderer, fragmentKey, hiddenInputName, defaultValue, disabled, placeholder, minHeight, maxHeight,
 }: {
-  Renderer:     CollabTextRenderer
-  name:         string
-  defaultValue: unknown
-  disabled:     boolean
-  placeholder?: string
-  minHeight?:   string
-  maxHeight?:   string
+  Renderer:        CollabTextRenderer
+  fragmentKey:     string
+  hiddenInputName: string
+  defaultValue:    unknown
+  disabled:        boolean
+  placeholder?:    string
+  minHeight?:      string
+  maxHeight?:      string
 }): React.ReactElement {
-  const fs = useFieldState(name)
+  const fs = useFieldState(hiddenInputName)
   const initial = useMemo(() => stringValue(defaultValue), [])
   const [text, setText] = useState<string>(initial)
   const [tab, setTab] = useState<'write' | 'preview'>('write')
@@ -513,9 +426,9 @@ function MarkdownCollabInput({
       </div>
       {tab === 'write' ? (
         <div style={wrapperStyle} className="overflow-auto">
-          <input type="hidden" name={name} value={text} />
+          <input type="hidden" name={hiddenInputName} value={text} />
           <Renderer
-            name={name}
+            name={fragmentKey}
             multiline={true}
             defaultValue={initial}
             {...(placeholder !== undefined ? { placeholder } : {})}
@@ -527,7 +440,7 @@ function MarkdownCollabInput({
         </div>
       ) : (
         <>
-          <input type="hidden" name={name} value={text} readOnly />
+          <input type="hidden" name={hiddenInputName} value={text} readOnly />
           <div
             className="prose prose-sm dark:prose-invert max-w-none px-3 py-2"
             style={wrapperStyle}

package/src/react/fields/RepeaterInput.tsx

@@ -5,6 +5,7 @@ import { Button } from '../ui/button.js'
 import { SchemaRenderer, dispatchHandlerAction } from '../SchemaRenderer.js'
 import { FormIdContext, useFormState, useRowBinding } from '../FormStateContext.js'
 import { findFieldMeta } from '../formStateHelpers.js'
+import { RowCoordsContext } from '../RowCoordsContext.js'
 import { useNavigate } from '../navigate.js'
 import { useToast } from '../Toaster.js'
 import type { RowButtonsMeta } from '../../fields/RowButton.js'
@@ -20,6 +21,7 @@ import {
   DEFAULT_DELETE,
 } from './rowChromeButton.js'
 import { syncRowGates } from './syncRowGates.js'
+import { consumeReconcileFlag, computeReconcilePlan } from './repeaterReconcile.js'
 import {
   generateRowId, makeAccordionStorage, makeCollapsedStorage,
 } from './rowState.js'
@@ -243,16 +245,14 @@ export function RepeaterInput({
   // 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.
+  // Mirror row identities into the form's values map so dotted row-leaf
+  // consumers can resolve the row's `__id` via `rowIdAtIndex(ctx.values,
+  // name, i)`. Setting a `__id` key routes through `routeBindingWrite` →
+  // `parseRowFieldPath` which filters `__id` → no-op on the binding side,
+  // so the only effect is a row entry landing 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(() => {
@@ -305,6 +305,37 @@ export function RepeaterInput({
       })
     })
   }, [rowBinding, meta.template])
+
+  // Phase A reconciliation for `Repeater.relationship` PK-switch — when
+  // the surrounding form just submitted in this tab AND we're inside a
+  // collab room with a row binding, snapshot the CRDT order after a
+  // short settle (long enough for WS sync to deliver any persisted
+  // state) and reconcile against `initialRows`. Drops orphan UUIDs
+  // whose rows just persisted under a fresh DB PK; idempotent + no-op
+  // for non-relationship Repeaters where `__id` stays UUID across
+  // save+reload. Plan:
+  // `pilotiq-pro/docs/plans/repeater-relationship-pk-switch.md`.
+  useEffect(() => {
+    if (!rowBinding) return
+    if (!consumeReconcileFlag(formId)) return
+    // Give WS sync time to deliver any persisted rows before reading
+    // current(). 1500ms is conservative; typical sync settles in <300ms.
+    // The reconciler is one-shot per submit, so we accept the brief
+    // visual flicker over a tighter timer that might fire pre-sync.
+    const timer = setTimeout(() => {
+      const plan = computeReconcilePlan({
+        current:       rowBinding.current(),
+        authoritative: initialRows.map(r => r.id),
+      })
+      for (const id of plan.toRemove) rowBinding.remove(id)
+      for (const id of plan.toAdd)    rowBinding.add(id, {})
+    }, 1500)
+    return () => clearTimeout(timer)
+    // initialRows is a stable useMemo([]) ref so it's safe to omit. We
+    // intentionally key only on rowBinding + formId — the reconciler is
+    // tied to the submit lifecycle, not to row-state changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowBinding, formId])
   const [collapsed, setCollapsed] = useState<Record<string, boolean>>(() =>
     accordion ? {} : initSeedCollapsed(initialRows, formId, name, defaultCollapsed, collapsible),
   )
@@ -395,29 +426,26 @@ export function RepeaterInput({
   }
 
   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
-        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)
-      }
-      if (next !== prev) newOrder = next.map(r => r.id)
-      return next
-    })
-    if (newOrder !== null) rowBinding?.reorder(newOrder)
+    const idx = rows.findIndex(r => r.id === id)
+    if (idx < 0) return
+    // 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 && rows[target]?.hidden) target--
+      if (target < 0) return
+      next = reorderRows(rows, idx, target)
+    } else {
+      let target = idx + 1
+      while (target < rows.length && rows[target]?.hidden) target++
+      if (target >= rows.length) return
+      next = reorderRows(rows, idx, target + 1)
+    }
+    if (next === rows) return
+    setRows(next)
+    rowBinding?.reorder(next.map(r => r.id))
   }
 
   // ── DnD state ───────────────────────────────────────────
@@ -430,15 +458,20 @@ 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
-        const next = reorderRows(prev, fromIdx, at)
-        if (next !== prev) newOrder = next.map(r => r.id)
-        return next
-      })
-      if (newOrder !== null) rowBinding?.reorder(newOrder)
+      // Compute next from the current `rows` directly. The previous
+      // setRows(updater) + closure-mutation pattern relied on React
+      // running the updater synchronously inside setState — which only
+      // happens when no other update is queued. `useRowReorderDnd`'s
+      // handleDrop sets dragId/dropAt to null right before calling
+      // this callback, so the updater runs in commit phase and the
+      // outer `newOrder` stayed null past the `if` check, silently
+      // skipping the rowBinding.reorder broadcast.
+      const fromIdx = rows.findIndex(r => r.id === fromId)
+      if (fromIdx < 0) return
+      const next = reorderRows(rows, fromIdx, at)
+      if (next === rows) return
+      setRows(next)
+      rowBinding?.reorder(next.map(r => r.id))
     },
   })
 
@@ -749,16 +782,25 @@ function RepeaterRow({
     [row.children, prefix],
   )
   const headerLabel = row.itemLabel ?? `Item ${index + 1}`
+  // Row coords for dotted-path text leaves — composes fragment-key
+  // `${arrayName}.${rowId}.${fieldName}` for the Tiptap-backed collab
+  // renderer (see collab-row-text-tiptap-backed.md Phase 1).
+  const rowCoords = useMemo(
+    () => ({ arrayName: name, rowIndex: index, rowId: row.id }),
+    [name, index, row.id],
+  )
 
   // Hidden rows: render only the inputs (and __id) inside a display:none
   // wrapper so their values round-trip through FormData on submit. No
   // chrome, no drag wiring, no labels — `itemHidden` is purely UX.
   if (row.hidden) {
     return (
-      <div style={{ display: 'none' }} data-pilotiq-repeater-row="hidden">
-        <input type="hidden" name={`${prefix}.__id`} value={row.id} readOnly />
-        <SchemaRenderer elements={namespaced} />
-      </div>
+      <RowCoordsContext.Provider value={rowCoords}>
+        <div style={{ display: 'none' }} data-pilotiq-repeater-row="hidden">
+          <input type="hidden" name={`${prefix}.__id`} value={row.id} readOnly />
+          <SchemaRenderer elements={namespaced} />
+        </div>
+      </RowCoordsContext.Provider>
     )
   }
 
@@ -795,6 +837,7 @@ function RepeaterRow({
   // wrapping in a class that hides the FieldShell's label slot.
   if (simple) {
     return (
+      <RowCoordsContext.Provider value={rowCoords}>
       <div
         className={`flex items-center gap-2 transition-opacity ${isDragging ? 'opacity-50' : ''}`}
         data-pilotiq-repeater-row="simple"
@@ -830,10 +873,12 @@ function RepeaterRow({
           />
         )}
       </div>
+      </RowCoordsContext.Provider>
     )
   }
 
   return (
+    <RowCoordsContext.Provider value={rowCoords}>
     <div
       className={`rounded-md border bg-card transition-opacity ${isDragging ? 'opacity-50' : ''}`}
       data-pilotiq-repeater-row=""
@@ -910,6 +955,7 @@ function RepeaterRow({
           : <SchemaRenderer elements={namespaced} />}
       </div>
     </div>
+    </RowCoordsContext.Provider>
   )
 }
 
@@ -1168,6 +1214,10 @@ function RepeaterTableRow({
     () => row.children.map(c => prefixFieldNames(c, prefix)),
     [row.children, prefix],
   )
+  const rowCoords = useMemo(
+    () => ({ arrayName: name, rowIndex: index, rowId: row.id }),
+    [name, index, row.id],
+  )
 
   if (row.hidden) {
     // Render the hidden envelope as a single full-span cell so column
@@ -1175,11 +1225,18 @@ function RepeaterTableRow({
     // still in the form's submit. Using `<tr style="display:none">`
     // would warn under React strict-mode in Firefox; the wrapping cell
     // keeps the markup HTML-valid.
+    //
+    // The provider wraps the cell rather than the `<tr>` because React's
+    // table-row whitelisting only accepts `<th>/<td>` children, not a
+    // context provider; the provider is a no-DOM wrapper so it sits
+    // inside the cell fine.
     return (
       <tr style={{ display: 'none' }} data-pilotiq-repeater-row="hidden">
         <td colSpan={columns.length + 1}>
-          <input type="hidden" name={`${prefix}.__id`} value={row.id} readOnly />
-          <SchemaRenderer elements={namespaced} />
+          <RowCoordsContext.Provider value={rowCoords}>
+            <input type="hidden" name={`${prefix}.__id`} value={row.id} readOnly />
+            <SchemaRenderer elements={namespaced} />
+          </RowCoordsContext.Provider>
         </td>
       </tr>
     )
@@ -1209,6 +1266,7 @@ function RepeaterTableRow({
     : {}
 
   return (
+    <RowCoordsContext.Provider value={rowCoords}>
     <tr
       className={`border-t align-top ${isDragging ? 'opacity-50' : ''}`}
       data-pilotiq-repeater-row=""
@@ -1265,6 +1323,7 @@ function RepeaterTableRow({
         </div>
       </td>
     </tr>
+    </RowCoordsContext.Provider>
   )
 }