@open-mercato/ui 0.6.6-develop.6317.1.b3be10ab84 → 0.6.6-develop.6331.1.a33b8e99b7

package/dist/backend/notifications/NotificationPanel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/notifications/NotificationPanel.tsx"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { ArrowDown, ArrowUp, Bell, Loader2, RotateCcw, Settings2, X } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport { Sheet, SheetContent, SheetTitle } from '../../primitives/sheet'\nimport { NotificationItem } from './NotificationItem'\nimport type { NotificationDto, NotificationRendererProps } from '@open-mercato/shared/modules/notifications/types'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport type { ComponentType } from 'react'\n\n/**\n * Map of notification type to custom renderer component.\n * Used to provide custom rendering for specific notification types.\n *\n * @example\n * ```tsx\n * const customRenderers = {\n *   'sales.order.created': SalesOrderCreatedRenderer,\n *   'sales.quote.created': SalesQuoteCreatedRenderer,\n * }\n * ```\n */\nexport type NotificationRenderers = Record<string, ComponentType<NotificationRendererProps>>\n\nexport type NotificationPanelProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  notifications: NotificationDto[]\n  unreadCount: number\n  onMarkAsRead: (id: string) => Promise<void>\n  onExecuteAction: (id: string, actionId: string) => Promise<{ href?: string }>\n  onDismiss: (id: string) => Promise<void>\n  dismissUndo?: { notification: NotificationDto; previousStatus: 'read' | 'unread' } | null\n  onUndoDismiss?: () => Promise<void>\n  onMarkAllRead: () => Promise<void>\n  t: TranslateFn\n  /**\n   * Optional map of notification type to custom renderer component.\n   * When a notification's type matches a key in this map, the corresponding\n   * renderer will be used instead of the default NotificationItem rendering.\n   *\n   * @example\n   * ```tsx\n   * import { salesNotificationTypes } from '@open-mercato/core/modules/sales/notifications.client'\n   *\n   * // Build renderers map from notification types\n   * const renderers = Object.fromEntries(\n   *   salesNotificationTypes\n   *     .filter(t => t.Renderer)\n   *     .map(t => [t.type, t.Renderer!])\n   * )\n   *\n   * <NotificationPanel customRenderers={renderers} ... />\n   * ```\n   */\n  customRenderers?: NotificationRenderers\n}\n\nexport function NotificationPanel({\n  open,\n  onOpenChange,\n  notifications,\n  unreadCount,\n  onMarkAsRead,\n  onExecuteAction,\n  onDismiss,\n  dismissUndo,\n  onUndoDismiss,\n  onMarkAllRead,\n  t,\n  customRenderers,\n}: NotificationPanelProps) {\n  const [filter, setFilter] = React.useState<'all' | 'unread' | 'action'>('all')\n  const [markingAllRead, setMarkingAllRead] = React.useState(false)\n\n  const filteredNotifications = React.useMemo(() => {\n    switch (filter) {\n      case 'unread':\n        return notifications.filter((n) => n.status === 'unread')\n      case 'action':\n        return notifications.filter(\n          (n) => n.actions && n.actions.length > 0 && n.status !== 'actioned'\n        )\n      default:\n        return notifications\n    }\n  }, [notifications, filter])\n\n  const handleMarkAllRead = async () => {\n    setMarkingAllRead(true)\n    try {\n      await onMarkAllRead()\n    } finally {\n      setMarkingAllRead(false)\n    }\n  }\n\n  // Preserve the body scroll lock contract that consumers (and integration\n  // tests) rely on. Radix Dialog locks scroll via react-remove-scroll which\n  // does not set `document.body.style.overflow` \u2014 we set it ourselves so the\n  // contract is observable.\n  React.useEffect(() => {\n    if (!open || typeof document === 'undefined') return\n    const previous = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n    return () => {\n      document.body.style.overflow = previous\n    }\n  }, [open])\n\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent\n        side=\"right\"\n        className=\"gap-0 p-0\"\n        hideClose\n        aria-label={t('notifications.title', 'Notifications')}\n      >\n        <div className=\"flex items-center justify-between gap-3 border-b px-5 py-4\">\n          <SheetTitle className=\"text-base font-medium leading-6 tracking-tight text-foreground\">\n            {t('notifications.title', 'Notifications')}\n          </SheetTitle>\n          <div className=\"flex items-center gap-1\">\n            {unreadCount > 0 ? (\n              <button\n                type=\"button\"\n                onClick={handleMarkAllRead}\n                disabled={markingAllRead}\n                className=\"inline-flex items-center gap-1 rounded-md px-1 text-sm font-medium leading-5 text-accent-indigo transition-colors hover:text-accent-indigo/80 disabled:opacity-50\"\n              >\n                {markingAllRead ? <Loader2 className=\"size-3.5 animate-spin\" /> : null}\n                {t('notifications.markAllRead', 'Mark all read')}\n              </button>\n            ) : null}\n            <IconButton\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => onOpenChange(false)}\n              aria-label={t('notifications.close', 'Close notifications')}\n            >\n              <X className=\"size-4\" />\n            </IconButton>\n          </div>\n        </div>\n\n        <div role=\"tablist\" className=\"flex items-center gap-5 border-b px-5 py-3.5\">\n          {(['all', 'unread', 'action'] as const).map((value) => {\n            const isActive = filter === value\n            const label =\n              value === 'all'\n                ? t('notifications.filters.all', 'All')\n                : value === 'unread'\n                  ? t('notifications.filters.unread', 'Unread')\n                  : t('notifications.filters.actionRequired', 'Action Required')\n            return (\n              <button\n                key={value}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={isActive}\n                onClick={() => setFilter(value)}\n                className=\"relative inline-flex items-center gap-1.5 pb-2 text-sm font-medium leading-5 tracking-tight transition-colors focus:outline-none focus-visible:text-foreground data-[active=true]:text-foreground data-[active=false]:text-muted-foreground hover:text-foreground\"\n                data-active={isActive}\n              >\n                <span>{label}</span>\n                {value === 'unread' && unreadCount > 0 ? (\n                  <span className=\"inline-flex min-w-4 items-center justify-center rounded-full bg-accent-indigo px-1 text-overline font-medium text-accent-indigo-foreground\">\n                    {unreadCount > 99 ? '99+' : unreadCount}\n                  </span>\n                ) : null}\n                {isActive ? (\n                  <span\n                    className=\"absolute bottom-[-14px] left-0 right-0 h-0.5 bg-foreground\"\n                    aria-hidden=\"true\"\n                  />\n                ) : null}\n              </button>\n            )\n          })}\n        </div>\n\n        {dismissUndo && onUndoDismiss && (\n          <div className=\"border-b bg-muted/50 px-4 py-2 text-sm\">\n            <div className=\"flex items-center justify-between gap-3\">\n              <span>\n                {t('notifications.toast.dismissed', 'Notification dismissed')}\n              </span>\n              <Button variant=\"ghost\" size=\"sm\" onClick={() => onUndoDismiss()}>\n                <RotateCcw className=\"mr-1 h-3 w-3\" />\n                {t('notifications.actions.undo', 'Undo')}\n              </Button>\n            </div>\n          </div>\n        )}\n\n        <div className=\"flex-1 overflow-y-auto overflow-x-hidden overscroll-contain\">\n          {filteredNotifications.length === 0 ? (\n            <div className=\"flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground\">\n              <div className=\"flex size-12 items-center justify-center rounded-full bg-muted/50\">\n                <Bell className=\"size-5\" aria-hidden=\"true\" />\n              </div>\n              <p className=\"text-sm\">{t('notifications.empty', 'No notifications')}</p>\n            </div>\n          ) : (\n            <div className=\"flex flex-col gap-1 p-2\">\n              {filteredNotifications.map((notification, idx) => (\n                <React.Fragment key={notification.id}>\n                  {idx > 0 ? <div className=\"my-px h-px bg-border\" aria-hidden=\"true\" /> : null}\n                  <NotificationItem\n                    notification={notification}\n                    onMarkAsRead={() => onMarkAsRead(notification.id)}\n                    onExecuteAction={(actionId) => onExecuteAction(notification.id, actionId)}\n                    onDismiss={() => onDismiss(notification.id)}\n                    t={t}\n                    customRenderer={customRenderers?.[notification.type]}\n                  />\n                </React.Fragment>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 border-t px-5 py-3.5 text-xs leading-4 text-muted-foreground\">\n          <div className=\"flex items-center gap-2\">\n            <span>{t('notifications.footer.useHint', 'Use')}</span>\n            <span className=\"inline-flex items-center rounded border bg-muted/50 px-1 py-0.5\">\n              <ArrowUp className=\"size-3\" aria-hidden=\"true\" />\n            </span>\n            <span className=\"inline-flex items-center rounded border bg-muted/50 px-1 py-0.5\">\n              <ArrowDown className=\"size-3\" aria-hidden=\"true\" />\n            </span>\n            <span>{t('notifications.footer.toNavigate', 'to navigate')}</span>\n          </div>\n          <Link\n            href=\"/backend/config/notifications\"\n            onClick={() => onOpenChange(false)}\n            className=\"inline-flex items-center gap-1.5 font-medium text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            <Settings2 className=\"size-3.5\" aria-hidden=\"true\" />\n            {t('notifications.footer.manage', 'Manage notifications')}\n          </Link>\n        </div>\n      </SheetContent>\n    </Sheet>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { ArrowDown, ArrowUp, Bell, Loader2, RotateCcw, Settings2, X } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport { Sheet, SheetContent, SheetTitle } from '../../primitives/sheet'\nimport { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs'\nimport { NotificationItem } from './NotificationItem'\nimport type { NotificationDto, NotificationRendererProps } from '@open-mercato/shared/modules/notifications/types'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\nimport type { ComponentType } from 'react'\n\n/**\n * Map of notification type to custom renderer component.\n * Used to provide custom rendering for specific notification types.\n *\n * @example\n * ```tsx\n * const customRenderers = {\n *   'sales.order.created': SalesOrderCreatedRenderer,\n *   'sales.quote.created': SalesQuoteCreatedRenderer,\n * }\n * ```\n */\nexport type NotificationRenderers = Record<string, ComponentType<NotificationRendererProps>>\n\nexport type NotificationPanelProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  notifications: NotificationDto[]\n  unreadCount: number\n  onMarkAsRead: (id: string) => Promise<void>\n  onExecuteAction: (id: string, actionId: string) => Promise<{ href?: string }>\n  onDismiss: (id: string) => Promise<void>\n  dismissUndo?: { notification: NotificationDto; previousStatus: 'read' | 'unread' } | null\n  onUndoDismiss?: () => Promise<void>\n  onMarkAllRead: () => Promise<void>\n  t: TranslateFn\n  /**\n   * Optional map of notification type to custom renderer component.\n   * When a notification's type matches a key in this map, the corresponding\n   * renderer will be used instead of the default NotificationItem rendering.\n   *\n   * @example\n   * ```tsx\n   * import { salesNotificationTypes } from '@open-mercato/core/modules/sales/notifications.client'\n   *\n   * // Build renderers map from notification types\n   * const renderers = Object.fromEntries(\n   *   salesNotificationTypes\n   *     .filter(t => t.Renderer)\n   *     .map(t => [t.type, t.Renderer!])\n   * )\n   *\n   * <NotificationPanel customRenderers={renderers} ... />\n   * ```\n   */\n  customRenderers?: NotificationRenderers\n}\n\nexport function NotificationPanel({\n  open,\n  onOpenChange,\n  notifications,\n  unreadCount,\n  onMarkAsRead,\n  onExecuteAction,\n  onDismiss,\n  dismissUndo,\n  onUndoDismiss,\n  onMarkAllRead,\n  t,\n  customRenderers,\n}: NotificationPanelProps) {\n  const [filter, setFilter] = React.useState<'all' | 'unread' | 'action'>('all')\n  const [markingAllRead, setMarkingAllRead] = React.useState(false)\n\n  const filteredNotifications = React.useMemo(() => {\n    switch (filter) {\n      case 'unread':\n        return notifications.filter((n) => n.status === 'unread')\n      case 'action':\n        return notifications.filter(\n          (n) => n.actions && n.actions.length > 0 && n.status !== 'actioned'\n        )\n      default:\n        return notifications\n    }\n  }, [notifications, filter])\n\n  const handleMarkAllRead = async () => {\n    setMarkingAllRead(true)\n    try {\n      await onMarkAllRead()\n    } finally {\n      setMarkingAllRead(false)\n    }\n  }\n\n  const handleFilterChange = React.useCallback((next: string) => {\n    if (next === 'all' || next === 'unread' || next === 'action') {\n      setFilter(next)\n    }\n  }, [])\n\n  // Preserve the body scroll lock contract that consumers (and integration\n  // tests) rely on. Radix Dialog locks scroll via react-remove-scroll which\n  // does not set `document.body.style.overflow` \u2014 we set it ourselves so the\n  // contract is observable.\n  React.useEffect(() => {\n    if (!open || typeof document === 'undefined') return\n    const previous = document.body.style.overflow\n    document.body.style.overflow = 'hidden'\n    return () => {\n      document.body.style.overflow = previous\n    }\n  }, [open])\n\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent\n        side=\"right\"\n        className=\"gap-0 p-0\"\n        hideClose\n        aria-label={t('notifications.title', 'Notifications')}\n      >\n        <div className=\"flex items-center justify-between gap-3 border-b px-5 py-4\">\n          <SheetTitle className=\"text-base font-medium leading-6 tracking-tight text-foreground\">\n            {t('notifications.title', 'Notifications')}\n          </SheetTitle>\n          <div className=\"flex items-center gap-1\">\n            {unreadCount > 0 ? (\n              <Button\n                type=\"button\"\n                variant=\"link\"\n                size=\"sm\"\n                onClick={handleMarkAllRead}\n                disabled={markingAllRead}\n                className=\"gap-1 px-1 text-accent-indigo hover:text-accent-indigo/80 hover:no-underline\"\n              >\n                {markingAllRead ? <Loader2 className=\"size-3.5 animate-spin\" /> : null}\n                {t('notifications.markAllRead', 'Mark all read')}\n              </Button>\n            ) : null}\n            <IconButton\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => onOpenChange(false)}\n              aria-label={t('notifications.close', 'Close notifications')}\n            >\n              <X className=\"size-4\" />\n            </IconButton>\n          </div>\n        </div>\n\n        <Tabs value={filter} onValueChange={handleFilterChange} variant=\"underline\">\n          <TabsList className=\"flex w-full px-5\">\n            {(['all', 'unread', 'action'] as const).map((value) => {\n              const label =\n                value === 'all'\n                  ? t('notifications.filters.all', 'All')\n                  : value === 'unread'\n                    ? t('notifications.filters.unread', 'Unread')\n                    : t('notifications.filters.actionRequired', 'Action Required')\n              const count =\n                value === 'unread' && unreadCount > 0\n                  ? unreadCount > 99\n                    ? '99+'\n                    : unreadCount\n                  : undefined\n              return (\n                <TabsTrigger key={value} value={value} count={count}>\n                  {label}\n                </TabsTrigger>\n              )\n            })}\n          </TabsList>\n        </Tabs>\n\n        {dismissUndo && onUndoDismiss && (\n          <div className=\"border-b bg-muted/50 px-4 py-2 text-sm\">\n            <div className=\"flex items-center justify-between gap-3\">\n              <span>\n                {t('notifications.toast.dismissed', 'Notification dismissed')}\n              </span>\n              <Button variant=\"ghost\" size=\"sm\" onClick={() => onUndoDismiss()}>\n                <RotateCcw className=\"mr-1 h-3 w-3\" />\n                {t('notifications.actions.undo', 'Undo')}\n              </Button>\n            </div>\n          </div>\n        )}\n\n        <div className=\"flex-1 overflow-y-auto overflow-x-hidden overscroll-contain\">\n          {filteredNotifications.length === 0 ? (\n            <div className=\"flex flex-col items-center justify-center gap-2 py-16 text-muted-foreground\">\n              <div className=\"flex size-12 items-center justify-center rounded-full bg-muted/50\">\n                <Bell className=\"size-5\" aria-hidden=\"true\" />\n              </div>\n              <p className=\"text-sm\">{t('notifications.empty', 'No notifications')}</p>\n            </div>\n          ) : (\n            <div className=\"flex flex-col gap-1 p-2\">\n              {filteredNotifications.map((notification, idx) => (\n                <React.Fragment key={notification.id}>\n                  {idx > 0 ? <div className=\"my-px h-px bg-border\" aria-hidden=\"true\" /> : null}\n                  <NotificationItem\n                    notification={notification}\n                    onMarkAsRead={() => onMarkAsRead(notification.id)}\n                    onExecuteAction={(actionId) => onExecuteAction(notification.id, actionId)}\n                    onDismiss={() => onDismiss(notification.id)}\n                    t={t}\n                    customRenderer={customRenderers?.[notification.type]}\n                  />\n                </React.Fragment>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center justify-between gap-3 border-t px-5 py-3.5 text-xs leading-4 text-muted-foreground\">\n          <div className=\"flex items-center gap-2\">\n            <span>{t('notifications.footer.useHint', 'Use')}</span>\n            <span className=\"inline-flex items-center rounded border bg-muted/50 px-1 py-0.5\">\n              <ArrowUp className=\"size-3\" aria-hidden=\"true\" />\n            </span>\n            <span className=\"inline-flex items-center rounded border bg-muted/50 px-1 py-0.5\">\n              <ArrowDown className=\"size-3\" aria-hidden=\"true\" />\n            </span>\n            <span>{t('notifications.footer.toNavigate', 'to navigate')}</span>\n          </div>\n          <Link\n            href=\"/backend/config/notifications\"\n            onClick={() => onOpenChange(false)}\n            className=\"inline-flex items-center gap-1.5 font-medium text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            <Settings2 className=\"size-3.5\" aria-hidden=\"true\" />\n            {t('notifications.footer.manage', 'Manage notifications')}\n          </Link>\n        </div>\n      </SheetContent>\n    </Sheet>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/backend/utils/optimisticLock.js

@@ -27,8 +27,26 @@ function extractOptimisticLockConflict(err) {
     expectedUpdatedAt
   };
 }
+const RECORD_LOCK_CONFLICT_CODE = "record_lock_conflict";
+function extractRecordLockConflict(err) {
+  if (!err || typeof err !== "object") return null;
+  const candidate = err;
+  if (candidate.status !== 409) return null;
+  const body = candidate.body && typeof candidate.body === "object" ? candidate.body : candidate;
+  if (!body || typeof body !== "object") return null;
+  const bodyRecord = body;
+  if (bodyRecord.code !== RECORD_LOCK_CONFLICT_CODE) return null;
+  return {
+    code: RECORD_LOCK_CONFLICT_CODE,
+    error: typeof bodyRecord.error === "string" ? bodyRecord.error : void 0,
+    lock: bodyRecord.lock ?? null,
+    conflict: bodyRecord.conflict ?? null
+  };
+}
 export {
+  RECORD_LOCK_CONFLICT_CODE,
   buildOptimisticLockHeader,
-  extractOptimisticLockConflict
+  extractOptimisticLockConflict,
+  extractRecordLockConflict
 };
 //# sourceMappingURL=optimisticLock.js.map

package/dist/backend/utils/optimisticLock.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/utils/optimisticLock.ts"],
-  "sourcesContent": ["/**\n * Client-side helpers for the OSS opt-in optimistic-locking guard\n * (spec: .ai/specs/implemented/2026-05-25-oss-optimistic-locking.md).\n *\n * These are deliberately small and dependency-light so they can be wired\n * into any backend page without touching the shared CrudForm / useGuardedMutation\n * components. A future PR may pull them into CrudForm directly once the\n * reference rollout is broader.\n */\nimport {\n  OPTIMISTIC_LOCK_CONFLICT_CODE,\n  OPTIMISTIC_LOCK_HEADER_NAME,\n  type OptimisticLockConflictBody,\n} from '@open-mercato/shared/lib/crud/optimistic-lock-headers'\n\n/**\n * Build the extension-header bag for an `apiCall` request. Pass into\n * `withScopedApiRequestHeaders(buildOptimisticLockHeader(updatedAt), ...)`\n * when issuing a `PUT`/`PATCH`/`DELETE` for a record that exposes\n * `updatedAt`. Returns an empty object when the input is missing/empty so\n * the call site stays unconditional:\n *\n * ```ts\n * await withScopedApiRequestHeaders(\n *   buildOptimisticLockHeader(record.updatedAt),\n *   () => updateCrud('customers/companies', id, { ... }),\n * )\n * ```\n */\nexport function buildOptimisticLockHeader(\n  updatedAt: string | null | undefined,\n): Record<string, string> {\n  if (typeof updatedAt !== 'string') return {}\n  const trimmed = updatedAt.trim()\n  if (!trimmed) return {}\n  return { [OPTIMISTIC_LOCK_HEADER_NAME]: trimmed }\n}\n\n/**\n * Detect whether an error thrown by `raiseCrudError`/`apiCallOrThrow` is an\n * optimistic-lock conflict (HTTP 409 with `code: 'optimistic_lock_conflict'`).\n *\n * Returns the typed conflict body when matched so the caller can show a\n * UI that includes the server's `currentUpdatedAt`, or `null` otherwise.\n */\nexport function extractOptimisticLockConflict(\n  err: unknown,\n): OptimisticLockConflictBody | null {\n  if (!err || typeof err !== 'object') return null\n  const candidate = err as Record<string, unknown>\n  const status = candidate.status\n  if (status !== 409) return null\n  const body = candidate.body && typeof candidate.body === 'object'\n    ? candidate.body\n    : candidate\n  if (!body || typeof body !== 'object') return null\n  const bodyRecord = body as Record<string, unknown>\n  if (bodyRecord.code !== OPTIMISTIC_LOCK_CONFLICT_CODE) return null\n  const currentUpdatedAt = bodyRecord.currentUpdatedAt\n  const expectedUpdatedAt = bodyRecord.expectedUpdatedAt\n  if (typeof currentUpdatedAt !== 'string' || typeof expectedUpdatedAt !== 'string') return null\n  return {\n    error: typeof bodyRecord.error === 'string'\n      ? (bodyRecord.error as OptimisticLockConflictBody['error'])\n      : 'record_modified',\n    code: OPTIMISTIC_LOCK_CONFLICT_CODE,\n    currentUpdatedAt,\n    expectedUpdatedAt,\n  }\n}\n"],
-  "mappings": "AASA;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAgBA,SAAS,0BACd,WACwB;AACxB,MAAI,OAAO,cAAc,SAAU,QAAO,CAAC;AAC3C,QAAM,UAAU,UAAU,KAAK;AAC/B,MAAI,CAAC,QAAS,QAAO,CAAC;AACtB,SAAO,EAAE,CAAC,2BAA2B,GAAG,QAAQ;AAClD;AASO,SAAS,8BACd,KACmC;AACnC,MAAI,CAAC,OAAO,OAAO,QAAQ,SAAU,QAAO;AAC5C,QAAM,YAAY;AAClB,QAAM,SAAS,UAAU;AACzB,MAAI,WAAW,IAAK,QAAO;AAC3B,QAAM,OAAO,UAAU,QAAQ,OAAO,UAAU,SAAS,WACrD,UAAU,OACV;AACJ,MAAI,CAAC,QAAQ,OAAO,SAAS,SAAU,QAAO;AAC9C,QAAM,aAAa;AACnB,MAAI,WAAW,SAAS,8BAA+B,QAAO;AAC9D,QAAM,mBAAmB,WAAW;AACpC,QAAM,oBAAoB,WAAW;AACrC,MAAI,OAAO,qBAAqB,YAAY,OAAO,sBAAsB,SAAU,QAAO;AAC1F,SAAO;AAAA,IACL,OAAO,OAAO,WAAW,UAAU,WAC9B,WAAW,QACZ;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["/**\n * Client-side helpers for the OSS opt-in optimistic-locking guard\n * (spec: .ai/specs/implemented/2026-05-25-oss-optimistic-locking.md).\n *\n * These are deliberately small and dependency-light so they can be wired\n * into any backend page without touching the shared CrudForm / useGuardedMutation\n * components. A future PR may pull them into CrudForm directly once the\n * reference rollout is broader.\n */\nimport {\n  OPTIMISTIC_LOCK_CONFLICT_CODE,\n  OPTIMISTIC_LOCK_HEADER_NAME,\n  type OptimisticLockConflictBody,\n} from '@open-mercato/shared/lib/crud/optimistic-lock-headers'\n\n/**\n * Build the extension-header bag for an `apiCall` request. Pass into\n * `withScopedApiRequestHeaders(buildOptimisticLockHeader(updatedAt), ...)`\n * when issuing a `PUT`/`PATCH`/`DELETE` for a record that exposes\n * `updatedAt`. Returns an empty object when the input is missing/empty so\n * the call site stays unconditional:\n *\n * ```ts\n * await withScopedApiRequestHeaders(\n *   buildOptimisticLockHeader(record.updatedAt),\n *   () => updateCrud('customers/companies', id, { ... }),\n * )\n * ```\n */\nexport function buildOptimisticLockHeader(\n  updatedAt: string | null | undefined,\n): Record<string, string> {\n  if (typeof updatedAt !== 'string') return {}\n  const trimmed = updatedAt.trim()\n  if (!trimmed) return {}\n  return { [OPTIMISTIC_LOCK_HEADER_NAME]: trimmed }\n}\n\n/**\n * Detect whether an error thrown by `raiseCrudError`/`apiCallOrThrow` is an\n * optimistic-lock conflict (HTTP 409 with `code: 'optimistic_lock_conflict'`).\n *\n * Returns the typed conflict body when matched so the caller can show a\n * UI that includes the server's `currentUpdatedAt`, or `null` otherwise.\n */\nexport function extractOptimisticLockConflict(\n  err: unknown,\n): OptimisticLockConflictBody | null {\n  if (!err || typeof err !== 'object') return null\n  const candidate = err as Record<string, unknown>\n  const status = candidate.status\n  if (status !== 409) return null\n  const body = candidate.body && typeof candidate.body === 'object'\n    ? candidate.body\n    : candidate\n  if (!body || typeof body !== 'object') return null\n  const bodyRecord = body as Record<string, unknown>\n  if (bodyRecord.code !== OPTIMISTIC_LOCK_CONFLICT_CODE) return null\n  const currentUpdatedAt = bodyRecord.currentUpdatedAt\n  const expectedUpdatedAt = bodyRecord.expectedUpdatedAt\n  if (typeof currentUpdatedAt !== 'string' || typeof expectedUpdatedAt !== 'string') return null\n  return {\n    error: typeof bodyRecord.error === 'string'\n      ? (bodyRecord.error as OptimisticLockConflictBody['error'])\n      : 'record_modified',\n    code: OPTIMISTIC_LOCK_CONFLICT_CODE,\n    currentUpdatedAt,\n    expectedUpdatedAt,\n  }\n}\n\n/**\n * The enterprise `record_locks` 409 conflict code. Kept as a literal here so\n * core/UI stays enterprise-free (no import from `@open-mercato/enterprise`).\n */\nexport const RECORD_LOCK_CONFLICT_CODE = 'record_lock_conflict' as const\n\nexport type RecordLockConflictBody = {\n  code: typeof RECORD_LOCK_CONFLICT_CODE\n  error?: string\n  lock?: unknown\n  conflict?: unknown\n}\n\n/**\n * Detect whether an error is an enterprise `record_locks` conflict (HTTP 409\n * with `code: 'record_lock_conflict'`). Returns the conflict body when matched\n * so `surfaceRecordConflict` can defer to the merge-dialog widget, or `null`.\n */\nexport function extractRecordLockConflict(err: unknown): RecordLockConflictBody | null {\n  if (!err || typeof err !== 'object') return null\n  const candidate = err as Record<string, unknown>\n  if (candidate.status !== 409) return null\n  const body = candidate.body && typeof candidate.body === 'object'\n    ? candidate.body\n    : candidate\n  if (!body || typeof body !== 'object') return null\n  const bodyRecord = body as Record<string, unknown>\n  if (bodyRecord.code !== RECORD_LOCK_CONFLICT_CODE) return null\n  return {\n    code: RECORD_LOCK_CONFLICT_CODE,\n    error: typeof bodyRecord.error === 'string' ? bodyRecord.error : undefined,\n    lock: bodyRecord.lock ?? null,\n    conflict: bodyRecord.conflict ?? null,\n  }\n}\n"],
+  "mappings": "AASA;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAgBA,SAAS,0BACd,WACwB;AACxB,MAAI,OAAO,cAAc,SAAU,QAAO,CAAC;AAC3C,QAAM,UAAU,UAAU,KAAK;AAC/B,MAAI,CAAC,QAAS,QAAO,CAAC;AACtB,SAAO,EAAE,CAAC,2BAA2B,GAAG,QAAQ;AAClD;AASO,SAAS,8BACd,KACmC;AACnC,MAAI,CAAC,OAAO,OAAO,QAAQ,SAAU,QAAO;AAC5C,QAAM,YAAY;AAClB,QAAM,SAAS,UAAU;AACzB,MAAI,WAAW,IAAK,QAAO;AAC3B,QAAM,OAAO,UAAU,QAAQ,OAAO,UAAU,SAAS,WACrD,UAAU,OACV;AACJ,MAAI,CAAC,QAAQ,OAAO,SAAS,SAAU,QAAO;AAC9C,QAAM,aAAa;AACnB,MAAI,WAAW,SAAS,8BAA+B,QAAO;AAC9D,QAAM,mBAAmB,WAAW;AACpC,QAAM,oBAAoB,WAAW;AACrC,MAAI,OAAO,qBAAqB,YAAY,OAAO,sBAAsB,SAAU,QAAO;AAC1F,SAAO;AAAA,IACL,OAAO,OAAO,WAAW,UAAU,WAC9B,WAAW,QACZ;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF;AACF;AAMO,MAAM,4BAA4B;AAclC,SAAS,0BAA0B,KAA6C;AACrF,MAAI,CAAC,OAAO,OAAO,QAAQ,SAAU,QAAO;AAC5C,QAAM,YAAY;AAClB,MAAI,UAAU,WAAW,IAAK,QAAO;AACrC,QAAM,OAAO,UAAU,QAAQ,OAAO,UAAU,SAAS,WACrD,UAAU,OACV;AACJ,MAAI,CAAC,QAAQ,OAAO,SAAS,SAAU,QAAO;AAC9C,QAAM,aAAa;AACnB,MAAI,WAAW,SAAS,0BAA2B,QAAO;AAC1D,SAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO,OAAO,WAAW,UAAU,WAAW,WAAW,QAAQ;AAAA,IACjE,MAAM,WAAW,QAAQ;AAAA,IACzB,UAAU,WAAW,YAAY;AAAA,EACnC;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.6-develop.6317.1.b3be10ab84",
+  "version": "0.6.6-develop.6331.1.a33b8e99b7",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,13 +155,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.6-develop.6317.1.b3be10ab84",
+    "@open-mercato/shared": "0.6.6-develop.6331.1.a33b8e99b7",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.6-develop.6317.1.b3be10ab84",
+    "@open-mercato/shared": "0.6.6-develop.6331.1.a33b8e99b7",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/AppShell.tsx

@@ -29,12 +29,17 @@ import { dismissRecordConflict } from './conflicts/store'
 import { ProgressTopBar } from './progress/ProgressTopBar'
 import { UpgradeActionBanner } from './upgrades/UpgradeActionBanner'
 import { PartialIndexBanner } from './indexes/PartialIndexBanner'
+import { OrganizationScopeBoundary } from './OrganizationScopeBoundary'
 import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
 import { slugifySidebarId } from '@open-mercato/shared/modules/navigation/sidebarPreferences'
 import { readVersionedPreference, writeVersionedPreference } from '@open-mercato/shared/lib/browser/versionedPreference'
 import { cloneSidebarGroups } from './sidebar/customization-helpers'
 import type { SectionNavGroup } from './section-page/types'
 import { InjectionSpot } from './injection/InjectionSpot'
+import {
+  BackendRecordInjectionContextProvider,
+  type RecordInjectionContext,
+} from './injection/recordContext'
 import type { InjectionMenuItem } from '@open-mercato/shared/modules/widgets/injection'
 import { LEGACY_GLOBAL_MUTATION_INJECTION_SPOT_ID } from './injection/mutationEvents'
 import { mergeMenuItems } from './injection/mergeMenuItems'
@@ -592,6 +597,21 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
     [pathname, searchParams],
   )
 
+  // AppShell-owned transport for the current detail record (Phase 0 / S2).
+  // Detail pages publish here; the merged context feeds the global
+  // `backend:record:current` mount so the record_locks widget can resolve the
+  // resource without a hardcoded path allowlist. Stale context (published for a
+  // different path) is ignored so it never leaks across route transitions.
+  const [currentRecordInjectionContext, setCurrentRecordInjectionContext] =
+    React.useState<RecordInjectionContext | null>(null)
+
+  const recordInjectionContext = React.useMemo(() => {
+    if (!currentRecordInjectionContext) return injectionContext
+    const publishedPath = currentRecordInjectionContext.path
+    if (publishedPath && pathname && publishedPath !== pathname) return injectionContext
+    return { ...injectionContext, ...currentRecordInjectionContext }
+  }, [injectionContext, currentRecordInjectionContext, pathname])
+
   const isOnSettingsPath = React.useMemo(() => {
     if (!pathname) return false
     if (pathname === '/backend/settings') return true
@@ -1393,13 +1413,17 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
           {canManageUpgradeActions ? <UpgradeActionBanner /> : null}
           <LastOperationBanner />
           <RecordConflictBanner />
-          <InjectionSpot spotId={BACKEND_RECORD_CURRENT_INJECTION_SPOT_ID} context={injectionContext} />
+          <InjectionSpot spotId={BACKEND_RECORD_CURRENT_INJECTION_SPOT_ID} context={recordInjectionContext} />
           <InjectionSpot
             spotId={LEGACY_GLOBAL_MUTATION_INJECTION_SPOT_ID}
             context={injectionContext}
           />
           <div id="om-top-banners" className="mb-3 space-y-2" />
-          {children}
+          <OrganizationScopeBoundary active={isOnSettingsPath}>
+            <BackendRecordInjectionContextProvider setCurrentRecordInjectionContext={setCurrentRecordInjectionContext}>
+              {children}
+            </BackendRecordInjectionContextProvider>
+          </OrganizationScopeBoundary>
           <InjectionSpot spotId={BACKEND_LAYOUT_FOOTER_INJECTION_SPOT_ID} context={injectionContext} />
         </main>
         <footer className="border-t bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/80 px-4 py-3 flex flex-wrap items-center justify-end gap-4">

package/src/backend/CrudForm.tsx

@@ -73,6 +73,7 @@ import {
 } from 'lucide-react'
 import { loadGeneratedFieldRegistrations } from './fields/registry'
 import type { CustomFieldDefDto, CustomFieldDefinitionsPayload, CustomFieldsetDto } from './utils/customFieldDefs'
+import { isDefVisible } from './utils/customFieldDefs'
 import { buildFormFieldsFromCustomFields, buildFormFieldFromCustomFieldDef } from './utils/customFieldForms'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { TagsInput } from './inputs/TagsInput'
@@ -1553,7 +1554,9 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           fieldsetGroupMap.set(group.code, { code: group.code, title: group.title, hint: group.hint })
         })
       }
-      const sortedDefs = [...defList].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0))
+      const sortedDefs = [...defList]
+        .filter((definition) => isDefVisible(definition, 'form'))
+        .sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0))
       const ensureBucket = (code: string | null, def: CustomFieldDefDto): CustomFieldGroupLayout => {
         const key = code ?? '__default__'
         let bucket = groupsMap.get(key)

package/src/backend/OrganizationScopeBoundary.tsx

@@ -0,0 +1,54 @@
+'use client'
+import * as React from 'react'
+import {
+  subscribeOrganizationScopeChanged,
+  type OrganizationScopeChangedDetail,
+} from '@open-mercato/shared/lib/frontend/organizationEvents'
+
+export type OrganizationScopeBoundaryProps = {
+  active: boolean
+  children: React.ReactNode
+}
+
+/**
+ * Remounts its children whenever the active organization/tenant scope changes.
+ *
+ * The org/tenant switcher already calls `router.refresh()` on a scope change,
+ * which re-runs server components but does NOT remount client components — so
+ * settings pages that fetch their data once in a mount `useEffect` keep showing
+ * the previous scope's values until a manual reload. Wrapping those pages here
+ * forces a fresh mount (and therefore a refetch) on a real scope change.
+ *
+ * Gated by `active` so only the settings surface remounts; list/CRUD pages keep
+ * relying on the smoother `router.refresh()` path that preserves table state.
+ */
+export function OrganizationScopeBoundary({ active, children }: OrganizationScopeBoundaryProps) {
+  const [scopeKey, setScopeKey] = React.useState(0)
+  const lastScopeRef = React.useRef<OrganizationScopeChangedDetail | null>(null)
+  const hasInitializedScopeRef = React.useRef(false)
+
+  React.useEffect(() => {
+    return subscribeOrganizationScopeChanged((detail) => {
+      const prev = lastScopeRef.current
+      lastScopeRef.current = detail
+      if (!hasInitializedScopeRef.current) {
+        hasInitializedScopeRef.current = true
+        return
+      }
+      if (
+        prev &&
+        prev.organizationId === detail.organizationId &&
+        prev.tenantId === detail.tenantId
+      ) {
+        return
+      }
+      setScopeKey((current) => current + 1)
+    })
+  }, [])
+
+  if (!active) {
+    return <>{children}</>
+  }
+
+  return <React.Fragment key={scopeKey}>{children}</React.Fragment>
+}

package/src/backend/__tests__/CrudForm.custom-fields.test.tsx

@@ -275,6 +275,65 @@ describe('CrudForm custom field loading', () => {
     expect(container.querySelector('[data-crud-field-id="cf_renewal_quarter"]')?.textContent).toContain('Q3')
   })
 
+  it('omits custom fields with formEditable:false from the generated custom-fields section', async () => {
+    buildFormFieldFromCustomFieldDefMock.mockImplementation((definition: any) => ({
+      id: `cf_${definition.key}`,
+      label: definition.label ?? definition.key,
+      type: 'text',
+    }))
+    fetchCustomFieldFormStructureMock.mockResolvedValue({
+      fields: [],
+      definitions: [
+        {
+          entityId: 'customers:customer_company_profile',
+          key: 'editable_note',
+          label: 'Editable note',
+          kind: 'text',
+          formEditable: true,
+        },
+        {
+          entityId: 'customers:customer_company_profile',
+          key: 'readonly_note',
+          label: 'Readonly note',
+          kind: 'text',
+          formEditable: false,
+        },
+      ],
+      metadata: {
+        items: [],
+        fieldsetsByEntity: {},
+        entitySettings: {},
+      },
+    })
+
+    const { container } = renderWithProviders(
+      <CrudForm
+        embedded
+        title="Form"
+        entityId="customers:customer_company_profile"
+        fields={fields}
+        groups={groups}
+        initialValues={{ name: 'Acme', editable_note: 'x', readonly_note: 'y' }}
+        onSubmit={() => {}}
+      />,
+      {
+        dict: {
+          'ui.forms.actions.save': 'Save',
+          'entities.customFields.manageFieldset': 'Manage fields',
+        },
+      },
+    )
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-crud-field-id="cf_editable_note"]')).not.toBeNull()
+    })
+    expect(container.querySelector('[data-crud-field-id="cf_readonly_note"]')).toBeNull()
+    expect(buildFormFieldFromCustomFieldDefMock).not.toHaveBeenCalledWith(
+      expect.objectContaining({ key: 'readonly_note' }),
+      expect.anything(),
+    )
+  })
+
   it('submits custom entity values without loaded record metadata', async () => {
     const handleSubmit = jest.fn().mockResolvedValue(undefined)
 

package/src/backend/__tests__/NotesSection.test.tsx

@@ -4,9 +4,12 @@ import * as React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
 import { NotesSection, type NotesDataAdapter } from '../detail/NotesSection'
+import { dismissRecordConflict, getRecordConflictForTest } from '../conflicts'
+import { OPTIMISTIC_LOCK_CONFLICT_CODE } from '@open-mercato/shared/lib/crud/optimistic-lock-headers'
 
 describe('NotesSection', () => {
   beforeEach(() => {
+    dismissRecordConflict()
     Object.defineProperty(Element.prototype, 'scrollIntoView', {
       configurable: true,
       writable: true,
@@ -22,6 +25,10 @@ describe('NotesSection', () => {
     })
   })
 
+  afterEach(() => {
+    dismissRecordConflict()
+  })
+
   it('keeps an add-note action visible after notes already exist', async () => {
     const dataAdapter: NotesDataAdapter = {
       list: jest.fn(async () => [
@@ -60,4 +67,68 @@ describe('NotesSection', () => {
       expect(container.querySelector('textarea')).not.toBeNull()
     })
   })
+
+  it('surfaces the unified conflict bar when a write fails with a 409', async () => {
+    const conflict = {
+      status: 409,
+      body: {
+        error: 'optimistic_lock_conflict',
+        code: OPTIMISTIC_LOCK_CONFLICT_CODE,
+        currentUpdatedAt: '2026-06-02T00:00:00.000Z',
+        expectedUpdatedAt: '2026-06-01T00:00:00.000Z',
+      },
+    }
+    const dataAdapter: NotesDataAdapter = {
+      list: jest.fn(async () => [
+        {
+          id: 'note-1',
+          body: 'Existing note',
+          createdAt: '2026-04-10T08:00:00.000Z',
+          authorName: 'Ada Lovelace',
+        },
+      ]),
+      create: jest.fn(async () => {
+        throw conflict
+      }),
+      update: jest.fn(async () => undefined),
+      delete: jest.fn(async () => undefined),
+    }
+
+    const { container } = renderWithProviders(
+      <NotesSection
+        entityId="person-1"
+        emptyLabel="—"
+        viewerUserId="user-1"
+        viewerName="Ada Lovelace"
+        addActionLabel="Add note"
+        emptyState={{
+          title: 'No notes yet',
+          actionLabel: 'Add note',
+        }}
+        dataAdapter={dataAdapter}
+        disableMarkdown
+      />,
+    )
+
+    await screen.findByText('Existing note')
+    fireEvent.click(screen.getByRole('button', { name: 'Add note' }))
+
+    const textarea = await waitFor(() => {
+      const el = container.querySelector('textarea')
+      if (!el) throw new Error('composer not open')
+      return el as HTMLTextAreaElement
+    })
+    fireEvent.change(textarea, { target: { value: 'Conflicting note' } })
+
+    const form = container.querySelector('form')
+    expect(form).not.toBeNull()
+    fireEvent.submit(form as HTMLFormElement)
+
+    await waitFor(() => {
+      expect(dataAdapter.create).toHaveBeenCalledTimes(1)
+      const entry = getRecordConflictForTest()
+      expect(entry).not.toBeNull()
+      expect(entry?.currentUpdatedAt).toBe('2026-06-02T00:00:00.000Z')
+    })
+  })
 })

package/src/backend/__tests__/OrganizationScopeBoundary.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { act, render } from '@testing-library/react'
+import { emitOrganizationScopeChanged } from '@open-mercato/shared/lib/frontend/organizationEvents'
+import { OrganizationScopeBoundary } from '../OrganizationScopeBoundary'
+
+let mountCount = 0
+
+function MountCounter() {
+  React.useEffect(() => {
+    mountCount += 1
+  }, [])
+  return <span data-testid="child">child</span>
+}
+
+describe('<OrganizationScopeBoundary>', () => {
+  beforeEach(() => {
+    mountCount = 0
+  })
+
+  it('remounts children on a real scope change when active', () => {
+    render(
+      <OrganizationScopeBoundary active>
+        <MountCounter />
+      </OrganizationScopeBoundary>,
+    )
+    expect(mountCount).toBe(1)
+
+    // First scope event after mount only establishes the baseline.
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-a', tenantId: 'tenant-a' })
+    })
+    expect(mountCount).toBe(1)
+
+    // A genuine change remounts the subtree, re-running mount effects.
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-b', tenantId: 'tenant-a' })
+    })
+    expect(mountCount).toBe(2)
+  })
+
+  it('does not remount children when the scope is unchanged', () => {
+    render(
+      <OrganizationScopeBoundary active>
+        <MountCounter />
+      </OrganizationScopeBoundary>,
+    )
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-c', tenantId: 'tenant-c' })
+    })
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-c', tenantId: 'tenant-c' })
+    })
+    expect(mountCount).toBe(1)
+  })
+
+  it('does not remount children on a scope change when inactive', () => {
+    render(
+      <OrganizationScopeBoundary active={false}>
+        <MountCounter />
+      </OrganizationScopeBoundary>,
+    )
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-d', tenantId: 'tenant-d' })
+    })
+    act(() => {
+      emitOrganizationScopeChanged({ organizationId: 'org-e', tenantId: 'tenant-e' })
+    })
+    expect(mountCount).toBe(1)
+  })
+})

package/src/backend/conflicts/__tests__/recordLockDeferral.test.ts

@@ -0,0 +1,99 @@
+/** @jest-environment jsdom */
+import { CrudHttpError } from '@open-mercato/shared/lib/crud/errors'
+import { OPTIMISTIC_LOCK_CONFLICT_CODE } from '@open-mercato/shared/lib/crud/optimistic-lock-headers'
+import {
+  dismissRecordConflict,
+  getRecordConflictForTest,
+  registerRecordLockConflictHandler,
+  resetRecordLockConflictHandlerForTest,
+  surfaceRecordConflict,
+} from '..'
+
+const t = (key: string, fallback?: string) => fallback ?? key
+
+function recordLockConflict() {
+  return new CrudHttpError(409, {
+    error: 'Record conflict detected',
+    code: 'record_lock_conflict',
+    lock: null,
+    conflict: { id: 'c1' },
+  })
+}
+
+function ossConflict() {
+  return new CrudHttpError(409, {
+    error: 'record_modified',
+    code: OPTIMISTIC_LOCK_CONFLICT_CODE,
+    currentUpdatedAt: '2026-06-01T00:00:01.000Z',
+    expectedUpdatedAt: '2026-06-01T00:00:00.000Z',
+  })
+}
+
+describe('surfaceRecordConflict — single surface (S3)', () => {
+  beforeEach(() => {
+    dismissRecordConflict()
+    resetRecordLockConflictHandlerForTest()
+  })
+  afterEach(() => {
+    dismissRecordConflict()
+    resetRecordLockConflictHandlerForTest()
+  })
+
+  it('defers a record_lock_conflict to the registered merge-dialog handler that owns the record (returns true → no OSS bar)', () => {
+    const handler = jest.fn(() => true)
+    registerRecordLockConflictHandler(handler)
+
+    const handled = surfaceRecordConflict(recordLockConflict(), t)
+
+    expect(handled).toBe(true)
+    expect(handler).toHaveBeenCalledTimes(1)
+    expect(handler.mock.calls[0][0]).toMatchObject({ code: 'record_lock_conflict' })
+    // The OSS conflict bar must NOT render when the dialog handles it.
+    expect(getRecordConflictForTest()).toBeNull()
+  })
+
+  it('SAFETY: handler registered but DECLINES the record (returns false) → OSS bar still renders (never swallowed)', () => {
+    const handler = jest.fn(() => false)
+    registerRecordLockConflictHandler(handler)
+
+    const handled = surfaceRecordConflict(recordLockConflict(), t)
+
+    expect(handled).toBe(true)
+    expect(handler).toHaveBeenCalledTimes(1)
+    expect(getRecordConflictForTest()).not.toBeNull()
+  })
+
+  it('SAFETY: with NO handler registered, a record_lock_conflict still renders the OSS bar (never swallowed)', () => {
+    const handled = surfaceRecordConflict(recordLockConflict(), t)
+    expect(handled).toBe(true)
+    expect(getRecordConflictForTest()).not.toBeNull()
+  })
+
+  it('renders the OSS conflict bar for an optimistic_lock_conflict regardless of handler registration', () => {
+    const handler = jest.fn(() => true)
+    registerRecordLockConflictHandler(handler)
+    const handled = surfaceRecordConflict(ossConflict(), t)
+    expect(handled).toBe(true)
+    // The record-lock handler must NOT be consulted for an OSS optimistic-lock conflict.
+    expect(handler).not.toHaveBeenCalled()
+    const entry = getRecordConflictForTest()
+    expect(entry).not.toBeNull()
+    expect(entry?.currentUpdatedAt).toBe('2026-06-01T00:00:01.000Z')
+  })
+
+  it('unregister restores the no-handler behavior', () => {
+    const handler = jest.fn(() => true)
+    const unregister = registerRecordLockConflictHandler(handler)
+    unregister()
+
+    surfaceRecordConflict(recordLockConflict(), t)
+    expect(handler).not.toHaveBeenCalled()
+    expect(getRecordConflictForTest()).not.toBeNull()
+  })
+
+  it('returns false for a non-conflict error', () => {
+    expect(surfaceRecordConflict(new CrudHttpError(422, { error: 'validation_failed' }), t)).toBe(false)
+    expect(surfaceRecordConflict(new Error('boom'), t)).toBe(false)
+    expect(getRecordConflictForTest()).toBeNull()
+  })
+})