@pilotiq/pilotiq 0.7.2 → 0.8.1

package/src/react/fields/rowState.ts

@@ -0,0 +1,106 @@
+/**
+ * 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 }
+}

package/src/react/fields/useRowReorderDnd.ts

@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+
+/**
+ * Shared HTML5 drag-and-drop wiring for any list of rows that the user
+ * can reorder. Consumed by `TableRendererBody` (POSTs the new order
+ * to the server with rollback), `RepeaterInput`, and `BuilderInput`
+ * (both mutate local row state in place).
+ *
+ * Generic on `HTMLElement` so the same handlers wire onto a `<div>`
+ * row (card / grid layouts) AND a `<tr>` row (table layout) — the
+ * consumer cast happens at the JSX boundary.
+ */
+
+export interface RowReorderDnd {
+  dragId: string | null
+  /** The boundary slot the cursor is over (0..rows.length); null when no drag is active. */
+  dropAt: number | null
+  onDragStart: (id:  string) => (e: React.DragEvent<HTMLElement>) => void
+  onDragOver:  (idx: number) => (e: React.DragEvent<HTMLElement>) => void
+  onDrop:      (e: React.DragEvent<HTMLElement>) => void
+  onDragEnd:   () => void
+}
+
+export interface UseRowReorderDndOptions {
+  /** When false, every handler short-circuits without firing `onDrop`. */
+  enabled: boolean
+  /** Fires once per successful drop, after the hook has cleared its drag state. */
+  onDrop:  (fromId: string, dropAt: number) => void | Promise<void>
+}
+
+export function useRowReorderDnd({
+  enabled,
+  onDrop,
+}: UseRowReorderDndOptions): RowReorderDnd {
+  const [dragId, setDragId] = useState<string | null>(null)
+  const [dropAt, setDropAt] = useState<number | null>(null)
+
+  const handleDragStart = (id: string) => (e: React.DragEvent<HTMLElement>): void => {
+    if (!enabled) return
+    setDragId(id)
+    // dataTransfer needs *something* to register the drag in Firefox.
+    e.dataTransfer.effectAllowed = 'move'
+    try { e.dataTransfer.setData('text/plain', id) } catch { /* IE quirk; ignore */ }
+  }
+
+  const handleDragOver = (idx: number) => (e: React.DragEvent<HTMLElement>): void => {
+    if (!enabled || dragId === null) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    // Drop above this row when cursor is in its top half, below when in its bottom half.
+    const rect      = e.currentTarget.getBoundingClientRect()
+    const aboveHalf = e.clientY < rect.top + rect.height / 2
+    setDropAt(aboveHalf ? idx : idx + 1)
+  }
+
+  const handleDrop = (e: React.DragEvent<HTMLElement>): void => {
+    if (!enabled || dragId === null || dropAt === null) {
+      setDragId(null); setDropAt(null); return
+    }
+    e.preventDefault()
+    const fromId = dragId
+    const at     = dropAt
+    setDragId(null); setDropAt(null)
+    void onDrop(fromId, at)
+  }
+
+  const handleDragEnd = (): void => {
+    setDragId(null); setDropAt(null)
+  }
+
+  return {
+    dragId, dropAt,
+    onDragStart: handleDragStart,
+    onDragOver:  handleDragOver,
+    onDrop:      handleDrop,
+    onDragEnd:   handleDragEnd,
+  }
+}

package/src/react/index.ts

@@ -32,6 +32,34 @@ export {
   getPendingSuggestionApplier,
   type PendingSuggestionApplier,
 } from './PendingSuggestionApplierRegistry.js'
+export {
+  CollabRoomContext,
+  useCollabRoom,
+  type CollabRoom,
+} from './CollabRoomContext.js'
+export {
+  registerCollabExtensions,
+  getCollabExtensions,
+  type CollabExtensionFactory,
+  type CollabExtensionFactoryArgs,
+} from './CollabExtensionFactoryRegistry.js'
+export {
+  registerFormCollabBinding,
+  getFormCollabBinding,
+  type FormCollabBinding,
+  type FormCollabBindingFactory,
+  type FormCollabBindingFactoryArgs,
+} from './FormCollabBindingRegistry.js'
+export {
+  registerRecordWrapper,
+  getRecordWrapper,
+  type RecordWrapperProps,
+} from './RecordWrapperRegistry.js'
+export {
+  RecordWrapperGate,
+  type RecordWrapperGateProps,
+} from './RecordWrapperGate.js'
+export { parseRecordEditUrl, type RecordEditIdentity } from './parseRecordEditUrl.js'
 export {
   registerWidgetRenderer,
   getWidgetRenderer,
@@ -81,6 +109,7 @@ export {
   type RightSidebarProps,
 } from './RightSidebar.js'
 export { RightSidebarTrigger } from './RightSidebarTrigger.js'
+export { SearchTrigger }       from './SearchTrigger.js'
 export {
   useResizableWidth,
   clampPanelWidth,
@@ -96,6 +125,15 @@ export { NotificationBell } from './NotificationBell.js'
 export { RenderHookSlot } from './RenderHookSlot.js'
 export { HeadHooks }      from './HeadHooks.js'
 
+export {
+  isNavItemActive,
+  type NavComponentProps,
+  type HeaderComponentProps,
+  type FooterComponentProps,
+  type ComponentSlotRegistry,
+} from './component-slots.js'
+export type { NavItem } from '../pageData.js'
+
 // Re-export pure theme functions for client-safe usage (avoids importing main barrel which has server-only code)
 export { generateThemeCSS } from '../theme/generate-css.js'
 export { resolveTheme } from '../theme/resolve.js'

package/src/react/layouts/SidebarLayout.tsx

@@ -140,13 +140,17 @@ function NavTree({
   )
 }
 
-export function SidebarLayout({ panel, basePath, currentPath, children }: AppShellProps) {
+export function SidebarLayout({ panel, basePath, currentPath, children, componentSlotRegistry }: AppShellProps) {
   const title = panel.branding?.title ?? panel.name
   const groups = groupItems(panel.navigation ?? [])
   const hooks = panel.renderHooks
   const dn = panel.databaseNotifications
   const bellInTopbar  = dn && dn.position === 'topbar'
   const bellInSidebar = dn && dn.position === 'sidebar'
+  const NavSlot    = componentSlotRegistry?.nav
+  const HeaderSlot = componentSlotRegistry?.header
+  const FooterSlot = componentSlotRegistry?.footer
+  const slotProps = currentPath !== undefined ? { currentPath } : {}
 
   return (
     <SidebarProvider>
@@ -172,14 +176,17 @@ export function SidebarLayout({ panel, basePath, currentPath, children }: AppShe
 
         <SidebarContent>
           <RenderHookSlot name="panels::sidebar.nav.start" hooks={hooks} />
-          {groups.map((g, idx) => (
-            <SidebarGroup key={g.group ?? `__top__${idx}`}>
-              {g.group !== undefined && <SidebarGroupLabel>{g.group}</SidebarGroupLabel>}
-              <SidebarGroupContent>
-                <NavTree items={g.items} pathname={currentPath} basePath={basePath} />
-              </SidebarGroupContent>
-            </SidebarGroup>
-          ))}
+          {NavSlot
+            ? <NavSlot navigation={panel.navigation ?? []} basePath={basePath} {...slotProps} />
+            : groups.map((g, idx) => (
+                <SidebarGroup key={g.group ?? `__top__${idx}`}>
+                  {g.group !== undefined && <SidebarGroupLabel>{g.group}</SidebarGroupLabel>}
+                  <SidebarGroupContent>
+                    <NavTree items={g.items} pathname={currentPath} basePath={basePath} />
+                  </SidebarGroupContent>
+                </SidebarGroup>
+              ))
+          }
           <RenderHookSlot name="panels::sidebar.nav.end" hooks={hooks} />
         </SidebarContent>
 
@@ -210,29 +217,33 @@ export function SidebarLayout({ panel, basePath, currentPath, children }: AppShe
       </Sidebar>
 
       <SidebarInset>
-        <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2">
-          <div className="flex flex-1 items-center gap-2 px-3">
-            <SidebarTrigger />
-            <Separator orientation="vertical" className="me-2 data-[orientation=vertical]:h-4" />
-            <RenderHookSlot name="panels::topbar.start" hooks={hooks} />
-            <SearchTrigger />
-          </div>
-          <div className="flex items-center gap-1 px-3">
-            <ThemeToggle />
-            {bellInTopbar && <NotificationBell meta={dn} />}
-            <RightSidebarTrigger />
-            <UserMenu
-              userMenu={panel.userMenu}
-              before={<RenderHookSlot name="panels::user-menu.before" hooks={hooks} />}
-              after={<RenderHookSlot name="panels::user-menu.after"  hooks={hooks} />}
-            />
-            <RenderHookSlot name="panels::topbar.end" hooks={hooks} />
-          </div>
-        </header>
+        {HeaderSlot
+          ? <HeaderSlot navigation={panel.navigation ?? []} basePath={basePath} {...slotProps} />
+          : <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2">
+              <div className="flex flex-1 items-center gap-2 px-3">
+                <SidebarTrigger />
+                <Separator orientation="vertical" className="me-2 data-[orientation=vertical]:h-4" />
+                <RenderHookSlot name="panels::topbar.start" hooks={hooks} />
+                <SearchTrigger />
+              </div>
+              <div className="flex items-center gap-1 px-3">
+                <ThemeToggle />
+                {bellInTopbar && <NotificationBell meta={dn} />}
+                <RightSidebarTrigger />
+                <UserMenu
+                  userMenu={panel.userMenu}
+                  before={<RenderHookSlot name="panels::user-menu.before" hooks={hooks} />}
+                  after={<RenderHookSlot name="panels::user-menu.after"  hooks={hooks} />}
+                />
+                <RenderHookSlot name="panels::topbar.end" hooks={hooks} />
+              </div>
+            </header>
+        }
         <div className="flex flex-1 flex-col px-4 pb-4">
           {children}
           <RenderHookSlot name="panels::footer" hooks={hooks} />
         </div>
+        {FooterSlot && <FooterSlot basePath={basePath} {...slotProps} />}
       </SidebarInset>
     </SidebarProvider>
   )

package/src/react/layouts/TopbarLayout.tsx

@@ -166,7 +166,7 @@ function groupItems(items: NavItem[]): Array<{ group: string | undefined; items:
   return order.map(g => ({ group: g, items: buckets.get(g)! }))
 }
 
-export function TopbarLayout({ panel, basePath, currentPath, children }: AppShellProps) {
+export function TopbarLayout({ panel, basePath, currentPath, children, componentSlotRegistry }: AppShellProps) {
   const title = panel.branding?.title ?? panel.name
   const groups = groupItems(panel.navigation ?? [])
   const hooks = panel.renderHooks
@@ -174,72 +174,85 @@ export function TopbarLayout({ panel, basePath, currentPath, children }: AppShel
   // no sidebar exists in this layout, so the bell rides in the topbar
   // chrome regardless of the configured position.
   const dn = panel.databaseNotifications
+  const NavSlot    = componentSlotRegistry?.nav
+  const HeaderSlot = componentSlotRegistry?.header
+  const FooterSlot = componentSlotRegistry?.footer
+  const slotProps = currentPath !== undefined ? { currentPath } : {}
 
   return (
     <div className="flex flex-col h-screen bg-background text-foreground overflow-hidden">
-      <header className="h-14 shrink-0 border-b bg-card flex items-center gap-4 px-6">
-        <div className="flex items-center gap-2 me-2">
-          {panel.branding?.logo
-            ? <>
-                <img src={panel.branding.logo} alt={title} className="h-6 w-6" />
-                <span className="text-sm font-semibold">{title}</span>
-              </>
-            : <span className="text-sm font-semibold">{title}</span>
-          }
-        </div>
-        <Separator orientation="vertical" className="h-4" />
-        <RenderHookSlot name="panels::topbar.start" hooks={hooks} />
-        <nav className="flex items-center gap-1 flex-1 overflow-x-auto">
-          <a
-            href={basePath}
-            className={cn(linkBase, currentPath === basePath ? linkActive : linkIdle)}
-          >
-            Dashboard
-          </a>
-          {groups.map((g, idx) => {
-            if (g.group === undefined) {
-              return g.items.map(it => (
-                it.children && it.children.length > 0
-                  ? <ParentDropdown key={it.name} item={it} pathname={currentPath} basePath={basePath} />
-                  : <FlatLink     key={it.name} item={it} pathname={currentPath} basePath={basePath} />
-              ))
+      {HeaderSlot
+        ? <HeaderSlot navigation={panel.navigation ?? []} basePath={basePath} {...slotProps} />
+        : <header className="h-14 shrink-0 border-b bg-card flex items-center gap-4 px-6">
+            <div className="flex items-center gap-2 me-2">
+              {panel.branding?.logo
+                ? <>
+                    <img src={panel.branding.logo} alt={title} className="h-6 w-6" />
+                    <span className="text-sm font-semibold">{title}</span>
+                  </>
+                : <span className="text-sm font-semibold">{title}</span>
+              }
+            </div>
+            <Separator orientation="vertical" className="h-4" />
+            <RenderHookSlot name="panels::topbar.start" hooks={hooks} />
+            {NavSlot
+              ? <div className="flex items-center gap-1 flex-1 overflow-x-auto">
+                  <NavSlot navigation={panel.navigation ?? []} basePath={basePath} {...slotProps} />
+                </div>
+              : <nav className="flex items-center gap-1 flex-1 overflow-x-auto">
+                  <a
+                    href={basePath}
+                    className={cn(linkBase, currentPath === basePath ? linkActive : linkIdle)}
+                  >
+                    Dashboard
+                  </a>
+                  {groups.map((g, idx) => {
+                    if (g.group === undefined) {
+                      return g.items.map(it => (
+                        it.children && it.children.length > 0
+                          ? <ParentDropdown key={it.name} item={it} pathname={currentPath} basePath={basePath} />
+                          : <FlatLink     key={it.name} item={it} pathname={currentPath} basePath={basePath} />
+                      ))
+                    }
+                    return (
+                      <GroupDropdown
+                        key={`${g.group}__${idx}`}
+                        label={g.group}
+                        items={g.items}
+                        pathname={currentPath}
+                        basePath={basePath}
+                      />
+                    )
+                  })}
+                  {panel.themeEditor && (
+                    <a
+                      href={`${basePath}/theme`}
+                      className={cn(linkBase, currentPath === `${basePath}/theme` ? linkActive : linkIdle)}
+                    >
+                      Theme
+                    </a>
+                  )}
+                </nav>
             }
-            return (
-              <GroupDropdown
-                key={`${g.group}__${idx}`}
-                label={g.group}
-                items={g.items}
-                pathname={currentPath}
-                basePath={basePath}
-              />
-            )
-          })}
-          {panel.themeEditor && (
-            <a
-              href={`${basePath}/theme`}
-              className={cn(linkBase, currentPath === `${basePath}/theme` ? linkActive : linkIdle)}
-            >
-              Theme
-            </a>
-          )}
-        </nav>
-        <SearchTrigger />
-        <ThemeToggle />
-        {dn && <NotificationBell meta={dn} />}
-        <RightSidebarTrigger />
-        <UserMenu
-          userMenu={panel.userMenu}
-          before={<RenderHookSlot name="panels::user-menu.before" hooks={hooks} />}
-          after={<RenderHookSlot name="panels::user-menu.after"  hooks={hooks} />}
-        />
-        <RenderHookSlot name="panels::topbar.end" hooks={hooks} />
-      </header>
+            <SearchTrigger />
+            <ThemeToggle />
+            {dn && <NotificationBell meta={dn} />}
+            <RightSidebarTrigger />
+            <UserMenu
+              userMenu={panel.userMenu}
+              before={<RenderHookSlot name="panels::user-menu.before" hooks={hooks} />}
+              after={<RenderHookSlot name="panels::user-menu.after"  hooks={hooks} />}
+            />
+            <RenderHookSlot name="panels::topbar.end" hooks={hooks} />
+          </header>
+      }
       <div className="flex flex-1 overflow-hidden">
         <main className="flex-1 overflow-y-auto p-6">
           {children}
           <RenderHookSlot name="panels::footer" hooks={hooks} />
         </main>
       </div>
+      {FooterSlot && <FooterSlot basePath={basePath} {...slotProps} />}
     </div>
   )
 }

package/src/react/parseRecordEditUrl.test.ts

@@ -0,0 +1,75 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { parseRecordEditUrl } from './parseRecordEditUrl.js'
+
+test('parseRecordEditUrl: bare resource edit', () => {
+  assert.deepEqual(
+    parseRecordEditUrl('/admin/articles/123/edit', '/admin'),
+    { resourceSlug: 'articles', recordId: '123' },
+  )
+})
+
+test('parseRecordEditUrl: cluster-prefixed resource edit', () => {
+  assert.deepEqual(
+    parseRecordEditUrl('/admin/blog/articles/123/edit', '/admin'),
+    { resourceSlug: 'blog/articles', recordId: '123' },
+  )
+})
+
+test('parseRecordEditUrl: nested-relation edit picks child id', () => {
+  assert.deepEqual(
+    parseRecordEditUrl('/admin/articles/123/comments/456/edit', '/admin'),
+    { resourceSlug: 'articles/123/comments', recordId: '456' },
+  )
+})
+
+test('parseRecordEditUrl: list page returns null', () => {
+  assert.equal(parseRecordEditUrl('/admin/articles', '/admin'), null)
+  assert.equal(parseRecordEditUrl('/admin/articles/123', '/admin'), null)
+})
+
+test('parseRecordEditUrl: create page returns null', () => {
+  assert.equal(parseRecordEditUrl('/admin/articles/create', '/admin'), null)
+  assert.equal(parseRecordEditUrl('/admin/articles/123/comments/create', '/admin'), null)
+})
+
+test('parseRecordEditUrl: basePath mismatch returns null', () => {
+  assert.equal(parseRecordEditUrl('/site/articles/123/edit', '/admin'), null)
+})
+
+test('parseRecordEditUrl: trailing slashes tolerated on URL', () => {
+  assert.deepEqual(
+    parseRecordEditUrl('/admin/articles/123/edit/', '/admin'),
+    { resourceSlug: 'articles', recordId: '123' },
+  )
+})
+
+test('parseRecordEditUrl: trailing slashes tolerated on basePath', () => {
+  assert.deepEqual(
+    parseRecordEditUrl('/admin/articles/123/edit', '/admin/'),
+    { resourceSlug: 'articles', recordId: '123' },
+  )
+})
+
+test('parseRecordEditUrl: root basePath', () => {
+  assert.deepEqual(
+    parseRecordEditUrl('/articles/123/edit', ''),
+    { resourceSlug: 'articles', recordId: '123' },
+  )
+})
+
+test('parseRecordEditUrl: empty path returns null', () => {
+  assert.equal(parseRecordEditUrl('', '/admin'), null)
+})
+
+test('parseRecordEditUrl: too-short path returns null', () => {
+  assert.equal(parseRecordEditUrl('/admin/edit', '/admin'), null)
+  // 'edit' alone after basePath isn't enough — needs slug + id + 'edit'.
+})
+
+test('parseRecordEditUrl: slug-only edit (no record id) returns null', () => {
+  // '/admin/123/edit' would technically match parts.length===3 with
+  // 'edit' last and '123' as recordId — but with empty slug after the
+  // slice. Defensive: reject when slugParts is empty.
+  assert.equal(parseRecordEditUrl('/admin/edit', '/admin'), null)
+})

package/src/react/parseRecordEditUrl.ts

@@ -0,0 +1,55 @@
+/**
+ * Parses a pilotiq URL into a record-edit identity, or returns `null`
+ * for any URL that isn't a record-bound edit page.
+ *
+ * A URL matches when:
+ *   1. it starts with the panel's `basePath`
+ *   2. after stripping the prefix it ends with `/edit`
+ *   3. there are at least three remaining segments (resource slug,
+ *      record id, `edit`)
+ *
+ * The `resourceSlug` is the slash-joined chain of every segment up to
+ * the record id — this gives clustered resources (`${base}/blog/articles/123/edit`)
+ * and nested-relation edits (`${base}/articles/123/comments/456/edit`)
+ * distinct slugs so two URLs that target different records always
+ * produce different room names downstream.
+ *
+ *   `/admin/articles/123/edit`                      → { resourceSlug: 'articles',                 recordId: '123' }
+ *   `/admin/blog/articles/123/edit`                 → { resourceSlug: 'blog/articles',            recordId: '123' }
+ *   `/admin/articles/123/comments/456/edit`         → { resourceSlug: 'articles/123/comments',    recordId: '456' }
+ *   `/admin/articles/123/comments`                  → null  (no trailing /edit)
+ *   `/admin/articles/123/comments/create`           → null  (no record id)
+ *   `/site/articles/123/edit`                       → null  (basePath mismatch when basePath='/admin')
+ */
+export interface RecordEditIdentity {
+  resourceSlug: string
+  recordId:     string
+}
+
+export function parseRecordEditUrl(
+  currentPath: string,
+  basePath:    string,
+): RecordEditIdentity | null {
+  if (!currentPath) return null
+  // Normalise — trailing slashes on the URL or trailing slashes on
+  // basePath would otherwise reject perfectly valid matches.
+  const trimmedPath = currentPath.replace(/\/+$/, '')
+  const trimmedBase = basePath.replace(/\/+$/, '')
+
+  if (trimmedBase !== '' && !trimmedPath.startsWith(trimmedBase)) return null
+
+  const tail = trimmedPath.slice(trimmedBase.length).replace(/^\/+/, '')
+  const parts = tail.split('/').filter(Boolean)
+
+  if (parts.length < 3) return null
+  if (parts[parts.length - 1] !== 'edit') return null
+
+  const recordId    = parts[parts.length - 2]!
+  const slugParts   = parts.slice(0, parts.length - 2)
+  if (slugParts.length === 0) return null
+
+  return {
+    resourceSlug: slugParts.join('/'),
+    recordId,
+  }
+}

package/src/react/persistedState.ts

@@ -0,0 +1,40 @@
+/**
+ * Thin localStorage wrappers shared by every persistable surface
+ * (collapsible sections, dismissible alerts, wizard step, hidden table
+ * columns, group fold state, filter strip toggle, Repeater / Builder
+ * row collapse + accordion).
+ *
+ * Every helper silently no-ops on SSR / private mode / quota — callers
+ * already treat all three the same way.
+ */
+
+export function readStoredString(key: string): string | null {
+  if (typeof window === 'undefined') return null
+  try { return window.localStorage.getItem(key) }
+  catch { return null }
+}
+
+export function writeStoredString(key: string, value: string): void {
+  if (typeof window === 'undefined') return
+  try { window.localStorage.setItem(key, value) } catch { /* quota / blocked */ }
+}
+
+export function removeStoredString(key: string): void {
+  if (typeof window === 'undefined') return
+  try { window.localStorage.removeItem(key) } catch { /* */ }
+}
+
+/**
+ * Boolean flag using `'1'` / `'0'` encoding. Returns `defaultValue`
+ * when the key is unset, SSR, or storage is blocked.
+ */
+export function readStoredFlag(key: string, defaultValue: boolean): boolean {
+  const raw = readStoredString(key)
+  if (raw === '1') return true
+  if (raw === '0') return false
+  return defaultValue
+}
+
+export function writeStoredFlag(key: string, value: boolean): void {
+  writeStoredString(key, value ? '1' : '0')
+}