@pilotiq/pilotiq 0.23.1 → 0.24.2

package/src/react/fields/repeaterReconcile.test.ts

@@ -1,114 +0,0 @@
-import { describe, it, before, after, beforeEach } from 'node:test'
-import assert from 'node:assert/strict'
-
-import {
-  computeReconcilePlan,
-  markSubmitForReconcile,
-  consumeReconcileFlag,
-} from './repeaterReconcile.js'
-
-describe('computeReconcilePlan', () => {
-  it('returns empty plan when current and authoritative match', () => {
-    const plan = computeReconcilePlan({
-      current:       ['a', 'b', 'c'],
-      authoritative: ['a', 'b', 'c'],
-    })
-    assert.deepEqual(plan.toRemove, [])
-    assert.deepEqual(plan.toAdd,    [])
-  })
-
-  it('flags orphan CRDT rows as toRemove (PK-switch happy path)', () => {
-    // Submitting tab reloaded — server returned the new DB PK; CRDT
-    // still carries the renderer-minted UUID from the just-saved row.
-    const plan = computeReconcilePlan({
-      current:       ['uuid-foo', '42'],
-      authoritative: ['42'],
-    })
-    assert.deepEqual(plan.toRemove, ['uuid-foo'])
-    assert.deepEqual(plan.toAdd,    [])
-  })
-
-  it('flags missing CRDT rows as toAdd (raw-SQL-seeded record)', () => {
-    // First peer to open a record whose DB rows weren't seeded into the
-    // Y.Doc (no `seedRowArraysFromRecord` coverage for relationship-
-    // backed fields). Reconciler ensures CRDT mirrors initialRows.
-    const plan = computeReconcilePlan({
-      current:       [],
-      authoritative: ['42', '43'],
-    })
-    assert.deepEqual(plan.toRemove, [])
-    assert.deepEqual(plan.toAdd,    ['42', '43'])
-  })
-
-  it('handles both directions in a single pass', () => {
-    const plan = computeReconcilePlan({
-      current:       ['uuid-foo', 'uuid-bar', '42'],
-      authoritative: ['42', '43'],
-    })
-    assert.deepEqual(plan.toRemove, ['uuid-foo', 'uuid-bar'])
-    assert.deepEqual(plan.toAdd,    ['43'])
-  })
-
-  it('preserves order from inputs in toRemove / toAdd', () => {
-    const plan = computeReconcilePlan({
-      current:       ['z', 'a', 'm'],
-      authoritative: ['a', 'b', 'c'],
-    })
-    // toRemove walks current in order; toAdd walks authoritative in order.
-    // Order-stability matters because reconciler applies them sequentially
-    // and we want deterministic test snapshots.
-    assert.deepEqual(plan.toRemove, ['z', 'm'])
-    assert.deepEqual(plan.toAdd,    ['b', 'c'])
-  })
-})
-
-describe('markSubmitForReconcile / consumeReconcileFlag', () => {
-  // Minimal in-memory sessionStorage stub — Node lacks one, and we
-  // want to avoid bringing in jsdom for a flag-roundtrip test.
-  const realSessionStorage = (globalThis as { sessionStorage?: Storage }).sessionStorage
-  const store: Map<string, string> = new Map()
-
-  before(() => {
-    ;(globalThis as { sessionStorage?: Storage }).sessionStorage = {
-      get length() { return store.size },
-      key:        (i: number) => Array.from(store.keys())[i] ?? null,
-      getItem:    (k: string) => store.has(k) ? store.get(k)! : null,
-      setItem:    (k: string, v: string) => { store.set(k, v) },
-      removeItem: (k: string) => { store.delete(k) },
-      clear:      () => { store.clear() },
-    } as Storage
-  })
-
-  after(() => {
-    if (realSessionStorage === undefined) {
-      delete (globalThis as { sessionStorage?: Storage }).sessionStorage
-    } else {
-      (globalThis as { sessionStorage?: Storage }).sessionStorage = realSessionStorage
-    }
-  })
-
-  beforeEach(() => { store.clear() })
-
-  it('returns false when no flag has been set', () => {
-    assert.equal(consumeReconcileFlag('form-1'), false)
-  })
-
-  it('round-trips a flag and clears on first consume', () => {
-    markSubmitForReconcile('form-1')
-    assert.equal(consumeReconcileFlag('form-1'), true)
-    // Second read: flag was cleared on the first consume.
-    assert.equal(consumeReconcileFlag('form-1'), false)
-  })
-
-  it('scopes the flag per formId', () => {
-    markSubmitForReconcile('form-1')
-    assert.equal(consumeReconcileFlag('form-2'), false)
-    assert.equal(consumeReconcileFlag('form-1'), true)
-  })
-
-  it('no-ops on empty formId (mark and consume both)', () => {
-    markSubmitForReconcile('')
-    assert.equal(store.size, 0)
-    assert.equal(consumeReconcileFlag(''), false)
-  })
-})

package/src/react/fields/repeaterReconcile.ts

@@ -1,104 +0,0 @@
-/**
- * Phase A of the `Repeater.relationship` PK-switch reconciliation
- * (see `pilotiq-pro/docs/plans/repeater-relationship-pk-switch.md`).
- *
- * When a parent form submit creates new relationship-backed rows, the
- * server assigns each child a DB primary key — but the row's `__id` in
- * the row CRDT is still the renderer-minted UUID from the local session.
- * After redirect, the submitting tab's pageData carries `__id = String(pk)`
- * while CRDT still has the UUID, so the renderer ends up showing the
- * same row twice (DB PK from initialRows + orphan UUID from CRDT).
- *
- * Phase A fix: the submitting tab marks itself for a one-shot CRDT
- * reconcile on the next mount via a per-formId sessionStorage flag.
- * `RepeaterInput` / `BuilderInput` read the flag on mount and, when set,
- * snapshot the row CRDT after a short settle (waiting for WS sync) and
- * reconcile against `initialRows` — removing orphan CRDT rows not in
- * the form's authoritative data, and adding missing CRDT rows (rare,
- * happens when the row was DB-seeded outside the collab session).
- *
- * The flag is scoped per-tab via sessionStorage, so other peers' tabs
- * never run the reconciler — preserving their in-flight edits.
- *
- * Phase B (server-side rename via the @rudderjs/sync Y.Doc seam) will
- * extend this to other peers without requiring them to reload.
- */
-
-const STORAGE_PREFIX = 'pilotiq.repeaterReconcile.'
-
-function storageKey(formId: string): string {
-  return STORAGE_PREFIX + formId
-}
-
-/**
- * Called by `FormRenderer` on submit success. Records that this tab
- * has just persisted the form, so the next mount of any Repeater /
- * Builder under the same form runs the PK-switch reconciler. No-op
- * when `formId` is empty or `sessionStorage` is unavailable (SSR).
- */
-export function markSubmitForReconcile(formId: string): void {
-  if (!formId) return
-  if (typeof sessionStorage === 'undefined') return
-  try {
-    sessionStorage.setItem(storageKey(formId), '1')
-  } catch {
-    // Quota exceeded / disabled — silently skip. Reconciliation is
-    // an optimization, not a correctness requirement.
-  }
-}
-
-/**
- * Called by `RepeaterInput` / `BuilderInput` on mount. Returns `true`
- * iff the form was just submitted in this tab AND clears the flag so
- * subsequent mounts no-op. Idempotent across multiple Repeater/Builder
- * fields on the same form — the FIRST reader clears the flag, so
- * siblings see `false`. To avoid that, both fields call this helper at
- * the same mount tick — for v1 we accept the limitation: only the first
- * Repeater on the form runs the reconciler; siblings don't.
- *
- * If a future need surfaces (multiple relationship-backed Repeaters on
- * the same form), switch to a per-field flag keyed by `formId.fieldName`
- * or have the FormRenderer dispatch a custom event instead.
- */
-export function consumeReconcileFlag(formId: string): boolean {
-  if (!formId) return false
-  if (typeof sessionStorage === 'undefined') return false
-  try {
-    const v = sessionStorage.getItem(storageKey(formId))
-    if (v !== '1') return false
-    sessionStorage.removeItem(storageKey(formId))
-    return true
-  } catch {
-    return false
-  }
-}
-
-export interface ReconcileInputs {
-  /** Current CRDT row id order (post-WS-sync). */
-  current:        readonly string[]
-  /** Authoritative row id list from server-rendered initialRows. */
-  authoritative:  readonly string[]
-}
-
-export interface ReconcilePlan {
-  /** Row ids present in CRDT but not in initialRows — orphan UUIDs. */
-  toRemove: string[]
-  /** Row ids present in initialRows but not in CRDT — DB rows not yet
-   *  in the room (rare; only happens when DB was seeded outside collab). */
-  toAdd:    string[]
-}
-
-/**
- * Pure helper: compute the symmetric difference. Exported separately so
- * unit tests don't need a DOM / sessionStorage shim to verify the
- * reconciliation arithmetic.
- */
-export function computeReconcilePlan({ current, authoritative }: ReconcileInputs): ReconcilePlan {
-  const currentSet = new Set(current)
-  const authSet    = new Set(authoritative)
-  const toRemove: string[] = []
-  const toAdd:    string[] = []
-  for (const id of current)       if (!authSet.has(id))    toRemove.push(id)
-  for (const id of authoritative) if (!currentSet.has(id)) toAdd.push(id)
-  return { toRemove, toAdd }
-}

package/src/react/fields/rowChromeButton.tsx

@@ -1,336 +0,0 @@
-import React from 'react'
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  ChevronsDownIcon,
-  ChevronsUpIcon,
-  CopyIcon,
-  GripVerticalIcon,
-  Trash2Icon,
-} from 'lucide-react'
-import { getIcon, type IconType } from '../../icons/registry.js'
-import type {
-  RowButtonColor,
-  RowButtonKind,
-  RowButtonMeta,
-  RowButtonsMeta,
-} from '../../fields/RowButton.js'
-
-/**
- * Foreground color slot → Tailwind class pair. Mirrors `Action.color()`
- * semantics with a softer hover transition since these are
- * icon-only buttons inside a dense row header.
- */
-const COLOR_CLASS: Record<RowButtonColor, string> = {
-  foreground:  'text-muted-foreground hover:text-foreground',
-  destructive: 'text-muted-foreground hover:text-destructive',
-  primary:     'text-primary hover:text-primary/80',
-  success:     'text-emerald-600 hover:text-emerald-700',
-  warning:     'text-amber-600 hover:text-amber-700',
-  info:        'text-blue-600 hover:text-blue-700',
-  muted:       'text-muted-foreground/60 hover:text-muted-foreground',
-}
-
-interface ButtonDefaults {
-  Icon:    IconType
-  label:   string
-  tooltip: string
-  /**
-   * Default tailwind color class when no `color` override is set. Most
-   * row buttons share `text-muted-foreground hover:text-foreground`;
-   * the trash slot defaults to `…hover:text-destructive`. Defaults always
-   * lose to an explicit `RowButton.color()` call.
-   */
-  colorClass: string
-}
-
-interface ResolvedChrome {
-  Icon:       IconType
-  label:      string
-  tooltip:    string
-  colorClass: string
-}
-
-/**
- * Merge a meta override on top of a slot's hardcoded defaults. The
- * override may set any subset of `{ icon, label, color, tooltip }`; missing
- * keys fall through. An overridden `icon` that doesn't resolve in the
- * runtime registry falls back to the default Lucide glyph (matches
- * `useIconFor`'s fail-soft posture).
- */
-export function resolveRowChrome(
-  defaults: ButtonDefaults,
-  override: RowButtonMeta | undefined,
-): ResolvedChrome {
-  if (override === undefined) return defaults
-  const overrideIcon = override.icon !== undefined ? getIcon(override.icon) : undefined
-  return {
-    Icon:       overrideIcon ?? defaults.Icon,
-    label:      override.label   ?? defaults.label,
-    tooltip:    override.tooltip ?? defaults.tooltip,
-    colorClass: override.color !== undefined ? COLOR_CLASS[override.color] : defaults.colorClass,
-  }
-}
-
-/**
- * Default chrome for each of the seven slots. Centralized here so both
- * Repeater and Builder renderers stay in sync — when a new slot lands,
- * the defaults live in one place. The Icon imports happen at the call
- * site (renderers already import from lucide-react); we accept them as
- * inputs to keep this file React-tree-shake friendly.
- */
-export type SlotDefaults = Record<RowButtonKind, ButtonDefaults>
-
-/** Convenience for renderers — pass a slot kind + the merged buttons meta. */
-export function resolveRowChromeFor(
-  kind:      RowButtonKind,
-  defaults:  ButtonDefaults,
-  buttons:   RowButtonsMeta | undefined,
-): ResolvedChrome {
-  return resolveRowChrome(defaults, buttons?.[kind])
-}
-
-/**
- * Standard icon-button shell used by every row chrome slot except the
- * grip (which is a draggable `<span>`) and the Add button (which uses
- * the shadcn `<Button>` for outline styling). Centralizes the
- * `disabled` opacity, focus ring, and icon sizing so customizer overrides
- * land consistently across Repeater + Builder.
- */
-export function RowChromeIconButton({
-  defaults,
-  override,
-  disabled,
-  onClick,
-  extraClassName = '',
-  ariaExpanded,
-}: {
-  defaults:        ButtonDefaults
-  override:        RowButtonMeta | undefined
-  disabled:        boolean
-  onClick:         () => void
-  extraClassName?: string
-  ariaExpanded?:   boolean
-}): React.ReactElement {
-  const { Icon, label, tooltip, colorClass } = resolveRowChrome(defaults, override)
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      aria-label={label}
-      title={tooltip}
-      {...(ariaExpanded !== undefined ? { 'aria-expanded': ariaExpanded } : {})}
-      className={`${colorClass} disabled:opacity-30 ${extraClassName}`.trim()}
-    >
-      <Icon className="size-4" />
-    </button>
-  )
-}
-
-/**
- * Drag grip — a `<span>` not a `<button>`. Honors the `reorderAction`
- * customizer for icon / label / tooltip / color so users can swap the
- * glyph or copy without owning the drag wiring.
- *
- * When `dragHandleProps` is passed, the grip carries `draggable=true` +
- * `onDragStart` and becomes the HTML5 drag source — required for row
- * layouts whose body hosts a contenteditable (Tiptap-backed fields).
- * If `draggable=true` lives on the row container instead, a dragstart
- * that initiates over the contenteditable is absorbed by the text-
- * selection handler and the row drag never fires. Moving the source to
- * the grip sidesteps that. Drop-target handlers (`onDragOver/onDrop/
- * onDragEnd`) stay on the row container — `dragend` bubbles so source-
- * side cleanup still reaches it.
- */
-export function ReorderGrip({
-  disabled,
-  buttons,
-  dragHandleProps,
-}: {
-  disabled: boolean
-  buttons:  RowButtonsMeta | undefined
-  dragHandleProps?: {
-    draggable:   true
-    onDragStart: (e: React.DragEvent<HTMLElement>) => void
-  } | undefined
-}): React.ReactElement {
-  const { Icon, label, tooltip, colorClass } = resolveRowChromeFor('reorder', DEFAULT_REORDER, buttons)
-  return (
-    <span
-      aria-label={label}
-      title={tooltip}
-      className={`${colorClass} ${disabled ? 'opacity-30' : 'cursor-grab active:cursor-grabbing'}`}
-      {...dragHandleProps}
-    >
-      <Icon className="size-4" />
-    </span>
-  )
-}
-
-/**
- * Collapse chevron — picks the open/closed glyph from state, then lets
- * customizer overrides take over. When the row is currently collapsed,
- * `expand` (from `expandAction(...)`) wins, falling back to `collapse`
- * (from `collapseAction(...)`) for back-compat with single-override
- * setups. When the row is open, `collapse` is used directly. Authors
- * who want different chrome per state set both `collapseAction` and
- * `expandAction`; authors who want a single uniform override keep
- * setting just `collapseAction`.
- */
-export function CollapseChevron({
-  isCollapsed,
-  disabled,
-  buttons,
-  onToggle,
-}: {
-  isCollapsed: boolean
-  disabled:    boolean
-  buttons:     RowButtonsMeta | undefined
-  onToggle:    () => void
-}): React.ReactElement {
-  const defaults = {
-    Icon:       isCollapsed ? ChevronRightIcon : ChevronDownIcon,
-    label:      isCollapsed ? 'Expand' : 'Collapse',
-    tooltip:    isCollapsed ? 'Expand' : 'Collapse',
-    colorClass: 'text-muted-foreground hover:text-foreground',
-  }
-  const override = isCollapsed
-    ? (buttons?.expand ?? buttons?.collapse)
-    : buttons?.collapse
-  return (
-    <RowChromeIconButton
-      defaults={defaults}
-      override={override}
-      disabled={disabled}
-      onClick={onToggle}
-      ariaExpanded={!isCollapsed}
-    />
-  )
-}
-
-// ─── Per-slot defaults ─────────────────────────────────────
-// Centralized so Repeater + Builder stay in lockstep. When a new slot
-// lands, defaults live in one place. `colorClass` defaults match the
-// historic hardcoded classes — preserves chrome for non-customized fields.
-
-export const DEFAULT_MOVE_UP: ButtonDefaults = {
-  Icon:       ArrowUpIcon,
-  label:      'Move up',
-  tooltip:    'Move up',
-  colorClass: 'text-muted-foreground hover:text-foreground',
-}
-export const DEFAULT_MOVE_DOWN: ButtonDefaults = {
-  Icon:       ArrowDownIcon,
-  label:      'Move down',
-  tooltip:    'Move down',
-  colorClass: 'text-muted-foreground hover:text-foreground',
-}
-export const DEFAULT_CLONE: ButtonDefaults = {
-  Icon:       CopyIcon,
-  label:      'Duplicate row',
-  tooltip:    'Duplicate row',
-  colorClass: 'text-muted-foreground hover:text-foreground',
-}
-export const DEFAULT_DELETE: ButtonDefaults = {
-  Icon:       Trash2Icon,
-  label:      'Remove row',
-  tooltip:    'Remove row',
-  colorClass: 'text-muted-foreground hover:text-destructive',
-}
-export const DEFAULT_REORDER: ButtonDefaults = {
-  Icon:       GripVerticalIcon,
-  label:      'Drag to reorder',
-  tooltip:    'Drag to reorder',
-  colorClass: 'text-muted-foreground',
-}
-export const DEFAULT_EXPAND_ALL: ButtonDefaults = {
-  Icon:       ChevronsDownIcon,
-  label:      'Expand all',
-  tooltip:    'Expand all',
-  colorClass: 'text-muted-foreground hover:text-foreground',
-}
-export const DEFAULT_COLLAPSE_ALL: ButtonDefaults = {
-  Icon:       ChevronsUpIcon,
-  label:      'Collapse all',
-  tooltip:    'Collapse all',
-  colorClass: 'text-muted-foreground hover:text-foreground',
-}
-
-/**
- * Field-header strip with bulk Expand-all / Collapse-all chips. Renders
- * only the buttons whose customizer slot is set on `buttons` — the
- * presence of `buttons.expandAll` / `buttons.collapseAll` is what flips
- * the matching button into existence (different from per-row chrome,
- * which always renders when collapsible). Returns `null` when neither
- * slot is configured so callers can mount the strip unconditionally.
- */
-export function BulkCollapseHeader({
-  buttons,
-  disabled,
-  onExpandAll,
-  onCollapseAll,
-}: {
-  buttons:        RowButtonsMeta | undefined
-  disabled:       boolean
-  onExpandAll:    () => void
-  onCollapseAll:  () => void
-}): React.ReactElement | null {
-  const expandAllOverride   = buttons?.expandAll
-  const collapseAllOverride = buttons?.collapseAll
-  if (!expandAllOverride && !collapseAllOverride) return null
-  return (
-    <div className="flex items-center justify-end gap-1">
-      {expandAllOverride && (
-        <BulkChromeButton
-          defaults={DEFAULT_EXPAND_ALL}
-          override={expandAllOverride}
-          disabled={disabled}
-          onClick={onExpandAll}
-        />
-      )}
-      {collapseAllOverride && (
-        <BulkChromeButton
-          defaults={DEFAULT_COLLAPSE_ALL}
-          override={collapseAllOverride}
-          disabled={disabled}
-          onClick={onCollapseAll}
-        />
-      )}
-    </div>
-  )
-}
-
-/**
- * Compact button used by `BulkCollapseHeader` — icon + label, sized to
- * read as a header chip (smaller than a full Action button, larger than
- * the icon-only per-row chrome). Picks up the same `RowButton`
- * override surface as every other slot.
- */
-function BulkChromeButton({
-  defaults,
-  override,
-  disabled,
-  onClick,
-}: {
-  defaults: ButtonDefaults
-  override: RowButtonMeta | undefined
-  disabled: boolean
-  onClick:  () => void
-}): React.ReactElement {
-  const { Icon, label, tooltip, colorClass } = resolveRowChrome(defaults, override)
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      title={tooltip}
-      className={`inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs ${colorClass} disabled:opacity-30`}
-    >
-      <Icon className="size-3.5" />
-      {label}
-    </button>
-  )
-}

package/src/react/fields/rowState.ts

@@ -1,106 +0,0 @@
-/**
- * Shared row-state helpers consumed by both `RepeaterInput` and
- * `BuilderInput`. The two fields keep parallel storage namespaces
- * (`pilotiq.repeater.…` vs `pilotiq.builder.…`) so users with both on
- * the same page can collapse them independently — the namespace is the
- * only thing that varies between the two callers.
- */
-
-import {
-  readStoredString, removeStoredString, writeStoredString,
-} from '../persistedState.js'
-
-let _rowSeqFallback = 0
-
-export function generateRowId(): string {
-  type CryptoLike = { randomUUID?: () => string }
-  const c = (globalThis as { crypto?: CryptoLike }).crypto
-  if (c?.randomUUID) return c.randomUUID()
-  return `row-${Date.now()}-${++_rowSeqFallback}`
-}
-
-export type RowStateNamespace = 'repeater' | 'builder'
-
-export interface CollapsedStorage {
-  key:    (formId: string, name: string, rowId: string) => string
-  read:   (formId: string, name: string, rowId: string, defaultValue: boolean) => boolean
-  write:  (formId: string, name: string, rowId: string, value: boolean) => void
-  remove: (formId: string, name: string, rowId: string) => void
-  seed:   (
-    rows:         { id: string }[],
-    formId:       string,
-    name:         string,
-    defaultValue: boolean,
-    collapsible:  boolean,
-  ) => Record<string, boolean>
-}
-
-/**
- * Build a namespaced per-row collapse-state store. Uses `'true'` /
- * `'false'` encoding (predates the `'1'` / `'0'` flag helper — kept for
- * back-compat with already-persisted state).
- */
-export function makeCollapsedStorage(namespace: RowStateNamespace): CollapsedStorage {
-  const key = (formId: string, name: string, rowId: string): string =>
-    `pilotiq.${namespace}.${formId}.${name}.${rowId}`
-
-  const read = (formId: string, name: string, rowId: string, defaultValue: boolean): boolean => {
-    const raw = readStoredString(key(formId, name, rowId))
-    if (raw === null) return defaultValue
-    return raw === 'true'
-  }
-
-  const write = (formId: string, name: string, rowId: string, value: boolean): void => {
-    writeStoredString(key(formId, name, rowId), String(value))
-  }
-
-  const remove = (formId: string, name: string, rowId: string): void => {
-    removeStoredString(key(formId, name, rowId))
-  }
-
-  const seed = (
-    rows:         { id: string }[],
-    formId:       string,
-    name:         string,
-    defaultValue: boolean,
-    collapsible:  boolean,
-  ): Record<string, boolean> => {
-    if (!collapsible) return {}
-    const out: Record<string, boolean> = {}
-    for (const row of rows) out[row.id] = read(formId, name, row.id, defaultValue)
-    return out
-  }
-
-  return { key, read, write, remove, seed }
-}
-
-export interface AccordionStorage {
-  key:   (formId: string, name: string) => string
-  /**
-   * `undefined` = no value stored (caller falls back to default-open
-   * heuristic). Empty string = user explicitly closed every row (caller
-   * maps to `null` openId). Any other string = the open row id.
-   */
-  read:  (formId: string, name: string) => string | undefined
-  write: (formId: string, name: string, openId: string | null) => void
-}
-
-/**
- * Build a namespaced accordion-open-row store. Always one slot per
- * (formId, name) pair regardless of row count.
- */
-export function makeAccordionStorage(namespace: RowStateNamespace): AccordionStorage {
-  const key = (formId: string, name: string): string =>
-    `pilotiq.${namespace}.${formId}.${name}.accordion`
-
-  const read = (formId: string, name: string): string | undefined => {
-    const raw = readStoredString(key(formId, name))
-    return raw === null ? undefined : raw
-  }
-
-  const write = (formId: string, name: string, openId: string | null): void => {
-    writeStoredString(key(formId, name), openId ?? '')
-  }
-
-  return { key, read, write }
-}