@open-mercato/ui 0.6.5-develop.4384.1.ce2ec6eaaa → 0.6.5-develop.4397.1.9a65481757

package/dist/backend/notifications/useNotificationsSse.js

@@ -5,6 +5,7 @@ import {
   subscribeNotificationNew,
   emitNotificationCountChanged
 } from "@open-mercato/shared/lib/frontend/notificationEvents";
+import { useOptionalT } from "@open-mercato/shared/lib/i18n/context";
 import { useAppEvent } from "../injection/useAppEvent.js";
 import {
   dispatchNotificationHandlers,
@@ -18,6 +19,11 @@ function useNotificationsSse() {
   const [isLoading, setIsLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
   const grantedFeaturesRef = React.useRef([]);
+  const translate = useOptionalT();
+  const translateRef = React.useRef(translate);
+  React.useEffect(() => {
+    translateRef.current = translate;
+  }, [translate]);
   const lastIdRef = React.useRef(null);
   const prevUnreadRef = React.useRef(0);
   const {
@@ -43,6 +49,7 @@ function useNotificationsSse() {
           lastIdRef.current = fetched[0].id;
           dispatchNotificationHandlers(fetched, {
             features: grantedFeaturesRef.current,
+            t: translateRef.current,
             currentPath: typeof window === "undefined" ? "/" : `${window.location.pathname}${window.location.search}`,
             refreshNotifications: () => {
             },
@@ -120,6 +127,7 @@ function useNotificationsSse() {
       window.setTimeout(() => setHasNew(false), 3e3);
       dispatchNotificationHandlers([notification], {
         features: grantedFeaturesRef.current,
+        t: translateRef.current,
         currentPath: typeof window === "undefined" ? "/" : `${window.location.pathname}${window.location.search}`,
         refreshNotifications: () => {
         },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/notifications/useNotificationsSse.ts"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { apiCall } from '../utils/apiCall'\nimport {\n  subscribeNotificationNew,\n  emitNotificationCountChanged,\n} from '@open-mercato/shared/lib/frontend/notificationEvents'\nimport type { AppEventPayload } from '@open-mercato/shared/modules/widgets/injection'\nimport type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'\nimport { useAppEvent } from '../injection/useAppEvent'\nimport {\n  dispatchNotificationHandlers,\n  getRequiredNotificationHandlerFeatures,\n} from './NotificationDispatcher'\nimport { useNotificationActions } from './useNotificationActions'\n\ntype NotificationCreatedPayload = {\n  recipientUserId?: string\n  notification?: NotificationDto\n}\n\ntype NotificationBatchCreatedPayload = {\n  recipientUserIds?: string[]\n  count?: number\n}\n\nexport type UseNotificationsSseResult = {\n  notifications: NotificationDto[]\n  unreadCount: number\n  hasNew: boolean\n  isLoading: boolean\n  error: string | null\n  refresh: () => void\n  markAsRead: (id: string) => Promise<void>\n  executeAction: (id: string, actionId: string) => Promise<{ href?: string }>\n  dismiss: (id: string) => Promise<void>\n  dismissUndo: { notification: NotificationDto; previousStatus: 'read' | 'unread' } | null\n  undoDismiss: () => Promise<void>\n  markAllRead: () => Promise<void>\n}\n\nexport function useNotificationsSse(): UseNotificationsSseResult {\n  const [notifications, setNotifications] = React.useState<NotificationDto[]>([])\n  const [unreadCount, setUnreadCount] = React.useState(0)\n  const [hasNew, setHasNew] = React.useState(false)\n  const [isLoading, setIsLoading] = React.useState(true)\n  const [error, setError] = React.useState<string | null>(null)\n  const grantedFeaturesRef = React.useRef<string[]>([])\n  const lastIdRef = React.useRef<string | null>(null)\n  const prevUnreadRef = React.useRef(0)\n  const {\n    markAsRead,\n    executeAction,\n    dismiss,\n    dismissUndo,\n    undoDismiss,\n    markAllRead,\n    markAsReadRef,\n    dismissRef,\n  } = useNotificationActions(notifications, setNotifications, setUnreadCount)\n\n  const fetchNotifications = React.useCallback(async () => {\n    try {\n      const [notifResult, countResult] = await Promise.all([\n        apiCall<{ items: NotificationDto[] }>('/api/notifications?pageSize=50'),\n        apiCall<{ unreadCount: number }>('/api/notifications/unread-count'),\n      ])\n\n      if (notifResult.ok && notifResult.result) {\n        const fetched = notifResult.result.items\n        setNotifications(fetched)\n        if (fetched.length > 0) {\n          lastIdRef.current = fetched[0].id\n          dispatchNotificationHandlers(fetched, {\n            features: grantedFeaturesRef.current,\n            currentPath:\n              typeof window === 'undefined'\n                ? '/'\n                : `${window.location.pathname}${window.location.search}`,\n            refreshNotifications: () => {\n              // No-op: data was just fetched \u2014 avoid redundant refetch loop.\n            },\n            navigate: (href) => {\n              if (typeof window === 'undefined' || !href.startsWith('/')) return\n              window.location.assign(href)\n            },\n            markAsRead: async (notificationId) => markAsReadRef.current(notificationId),\n            dismiss: async (notificationId) => dismissRef.current(notificationId),\n          })\n        }\n      }\n\n      if (countResult.ok && countResult.result) {\n        setUnreadCount(countResult.result.unreadCount)\n      }\n\n      setError(null)\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to fetch notifications')\n    } finally {\n      setIsLoading(false)\n    }\n  }, [])\n\n  const refresh = React.useCallback(() => {\n    void fetchNotifications()\n  }, [fetchNotifications])\n\n  React.useEffect(() => {\n    let mounted = true\n    const run = async () => {\n      const requiredFeatures = getRequiredNotificationHandlerFeatures()\n      if (requiredFeatures.length === 0) {\n        grantedFeaturesRef.current = []\n        return\n      }\n      const response = await apiCall<{ granted?: string[] }>('/api/auth/feature-check', {\n        method: 'POST',\n        headers: { 'content-type': 'application/json' },\n        body: JSON.stringify({ features: requiredFeatures }),\n      })\n      if (!mounted) return\n      grantedFeaturesRef.current = response.ok ? (response.result?.granted ?? []) : []\n    }\n    void run()\n    return () => {\n      mounted = false\n    }\n  }, [])\n\n  React.useEffect(() => {\n    void fetchNotifications()\n  }, [fetchNotifications])\n\n  React.useEffect(() => {\n    const unsub = subscribeNotificationNew(() => refresh())\n    return unsub\n  }, [refresh])\n\n  React.useEffect(() => {\n    if (unreadCount === prevUnreadRef.current) return\n    prevUnreadRef.current = unreadCount\n    emitNotificationCountChanged(unreadCount)\n  }, [unreadCount])\n\n  useAppEvent(\n    'notifications.notification.created',\n    (event: AppEventPayload) => {\n      const payload = event.payload as NotificationCreatedPayload\n      const notification = payload?.notification\n      if (!notification || !notification.id) {\n        void fetchNotifications()\n        return\n      }\n      if (notification.id === lastIdRef.current) return\n      lastIdRef.current = notification.id\n      setNotifications((prev) => [notification, ...prev.filter((item) => item.id !== notification.id)].slice(0, 50))\n      if (notification.status === 'unread') {\n        setUnreadCount((prev) => prev + 1)\n      }\n      setHasNew(true)\n      window.setTimeout(() => setHasNew(false), 3000)\n      dispatchNotificationHandlers([notification], {\n        features: grantedFeaturesRef.current,\n        currentPath:\n          typeof window === 'undefined'\n            ? '/'\n            : `${window.location.pathname}${window.location.search}`,\n        refreshNotifications: () => {\n          // No-op: notification was already applied optimistically from the SSE payload.\n          // Full refetch is only needed for batch_created, reconnect, or missing payload.\n        },\n        navigate: (href) => {\n          if (typeof window === 'undefined' || !href.startsWith('/')) return\n          window.location.assign(href)\n        },\n        markAsRead: async (notificationId) => markAsReadRef.current(notificationId),\n        dismiss: async (notificationId) => dismissRef.current(notificationId),\n      })\n    },\n    [fetchNotifications],\n  )\n\n  useAppEvent(\n    'notifications.notification.batch_created',\n    (event: AppEventPayload) => {\n      const payload = event.payload as NotificationBatchCreatedPayload\n      if (!payload || typeof payload !== 'object') return\n      void fetchNotifications()\n    },\n    [fetchNotifications],\n  )\n\n  useAppEvent('om:bridge:reconnected', () => {\n    void fetchNotifications()\n  }, [fetchNotifications])\n\n  React.useEffect(() => {\n    const onFocus = () => {\n      void fetchNotifications()\n    }\n    window.addEventListener('focus', onFocus)\n    return () => window.removeEventListener('focus', onFocus)\n  }, [fetchNotifications])\n\n  return {\n    notifications,\n    unreadCount,\n    hasNew,\n    isLoading,\n    error,\n    refresh,\n    markAsRead,\n    executeAction,\n    dismiss,\n    dismissUndo,\n    undoDismiss,\n    markAllRead,\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { apiCall } from '../utils/apiCall'\nimport {\n  subscribeNotificationNew,\n  emitNotificationCountChanged,\n} from '@open-mercato/shared/lib/frontend/notificationEvents'\nimport type { AppEventPayload } from '@open-mercato/shared/modules/widgets/injection'\nimport type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'\nimport { useOptionalT } from '@open-mercato/shared/lib/i18n/context'\nimport { useAppEvent } from '../injection/useAppEvent'\nimport {\n  dispatchNotificationHandlers,\n  getRequiredNotificationHandlerFeatures,\n} from './NotificationDispatcher'\nimport { useNotificationActions } from './useNotificationActions'\n\ntype NotificationCreatedPayload = {\n  recipientUserId?: string\n  notification?: NotificationDto\n}\n\ntype NotificationBatchCreatedPayload = {\n  recipientUserIds?: string[]\n  count?: number\n}\n\nexport type UseNotificationsSseResult = {\n  notifications: NotificationDto[]\n  unreadCount: number\n  hasNew: boolean\n  isLoading: boolean\n  error: string | null\n  refresh: () => void\n  markAsRead: (id: string) => Promise<void>\n  executeAction: (id: string, actionId: string) => Promise<{ href?: string }>\n  dismiss: (id: string) => Promise<void>\n  dismissUndo: { notification: NotificationDto; previousStatus: 'read' | 'unread' } | null\n  undoDismiss: () => Promise<void>\n  markAllRead: () => Promise<void>\n}\n\nexport function useNotificationsSse(): UseNotificationsSseResult {\n  const [notifications, setNotifications] = React.useState<NotificationDto[]>([])\n  const [unreadCount, setUnreadCount] = React.useState(0)\n  const [hasNew, setHasNew] = React.useState(false)\n  const [isLoading, setIsLoading] = React.useState(true)\n  const [error, setError] = React.useState<string | null>(null)\n  const grantedFeaturesRef = React.useRef<string[]>([])\n  const translate = useOptionalT()\n  const translateRef = React.useRef(translate)\n  React.useEffect(() => { translateRef.current = translate }, [translate])\n  const lastIdRef = React.useRef<string | null>(null)\n  const prevUnreadRef = React.useRef(0)\n  const {\n    markAsRead,\n    executeAction,\n    dismiss,\n    dismissUndo,\n    undoDismiss,\n    markAllRead,\n    markAsReadRef,\n    dismissRef,\n  } = useNotificationActions(notifications, setNotifications, setUnreadCount)\n\n  const fetchNotifications = React.useCallback(async () => {\n    try {\n      const [notifResult, countResult] = await Promise.all([\n        apiCall<{ items: NotificationDto[] }>('/api/notifications?pageSize=50'),\n        apiCall<{ unreadCount: number }>('/api/notifications/unread-count'),\n      ])\n\n      if (notifResult.ok && notifResult.result) {\n        const fetched = notifResult.result.items\n        setNotifications(fetched)\n        if (fetched.length > 0) {\n          lastIdRef.current = fetched[0].id\n          dispatchNotificationHandlers(fetched, {\n            features: grantedFeaturesRef.current,\n            t: translateRef.current,\n            currentPath:\n              typeof window === 'undefined'\n                ? '/'\n                : `${window.location.pathname}${window.location.search}`,\n            refreshNotifications: () => {\n              // No-op: data was just fetched \u2014 avoid redundant refetch loop.\n            },\n            navigate: (href) => {\n              if (typeof window === 'undefined' || !href.startsWith('/')) return\n              window.location.assign(href)\n            },\n            markAsRead: async (notificationId) => markAsReadRef.current(notificationId),\n            dismiss: async (notificationId) => dismissRef.current(notificationId),\n          })\n        }\n      }\n\n      if (countResult.ok && countResult.result) {\n        setUnreadCount(countResult.result.unreadCount)\n      }\n\n      setError(null)\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to fetch notifications')\n    } finally {\n      setIsLoading(false)\n    }\n  }, [])\n\n  const refresh = React.useCallback(() => {\n    void fetchNotifications()\n  }, [fetchNotifications])\n\n  React.useEffect(() => {\n    let mounted = true\n    const run = async () => {\n      const requiredFeatures = getRequiredNotificationHandlerFeatures()\n      if (requiredFeatures.length === 0) {\n        grantedFeaturesRef.current = []\n        return\n      }\n      const response = await apiCall<{ granted?: string[] }>('/api/auth/feature-check', {\n        method: 'POST',\n        headers: { 'content-type': 'application/json' },\n        body: JSON.stringify({ features: requiredFeatures }),\n      })\n      if (!mounted) return\n      grantedFeaturesRef.current = response.ok ? (response.result?.granted ?? []) : []\n    }\n    void run()\n    return () => {\n      mounted = false\n    }\n  }, [])\n\n  React.useEffect(() => {\n    void fetchNotifications()\n  }, [fetchNotifications])\n\n  React.useEffect(() => {\n    const unsub = subscribeNotificationNew(() => refresh())\n    return unsub\n  }, [refresh])\n\n  React.useEffect(() => {\n    if (unreadCount === prevUnreadRef.current) return\n    prevUnreadRef.current = unreadCount\n    emitNotificationCountChanged(unreadCount)\n  }, [unreadCount])\n\n  useAppEvent(\n    'notifications.notification.created',\n    (event: AppEventPayload) => {\n      const payload = event.payload as NotificationCreatedPayload\n      const notification = payload?.notification\n      if (!notification || !notification.id) {\n        void fetchNotifications()\n        return\n      }\n      if (notification.id === lastIdRef.current) return\n      lastIdRef.current = notification.id\n      setNotifications((prev) => [notification, ...prev.filter((item) => item.id !== notification.id)].slice(0, 50))\n      if (notification.status === 'unread') {\n        setUnreadCount((prev) => prev + 1)\n      }\n      setHasNew(true)\n      window.setTimeout(() => setHasNew(false), 3000)\n      dispatchNotificationHandlers([notification], {\n        features: grantedFeaturesRef.current,\n        t: translateRef.current,\n        currentPath:\n          typeof window === 'undefined'\n            ? '/'\n            : `${window.location.pathname}${window.location.search}`,\n        refreshNotifications: () => {\n          // No-op: notification was already applied optimistically from the SSE payload.\n          // Full refetch is only needed for batch_created, reconnect, or missing payload.\n        },\n        navigate: (href) => {\n          if (typeof window === 'undefined' || !href.startsWith('/')) return\n          window.location.assign(href)\n        },\n        markAsRead: async (notificationId) => markAsReadRef.current(notificationId),\n        dismiss: async (notificationId) => dismissRef.current(notificationId),\n      })\n    },\n    [fetchNotifications],\n  )\n\n  useAppEvent(\n    'notifications.notification.batch_created',\n    (event: AppEventPayload) => {\n      const payload = event.payload as NotificationBatchCreatedPayload\n      if (!payload || typeof payload !== 'object') return\n      void fetchNotifications()\n    },\n    [fetchNotifications],\n  )\n\n  useAppEvent('om:bridge:reconnected', () => {\n    void fetchNotifications()\n  }, [fetchNotifications])\n\n  React.useEffect(() => {\n    const onFocus = () => {\n      void fetchNotifications()\n    }\n    window.addEventListener('focus', onFocus)\n    return () => window.removeEventListener('focus', onFocus)\n  }, [fetchNotifications])\n\n  return {\n    notifications,\n    unreadCount,\n    hasNew,\n    isLoading,\n    error,\n    refresh,\n    markAsRead,\n    executeAction,\n    dismiss,\n    dismissUndo,\n    undoDismiss,\n    markAllRead,\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.5-develop.4384.1.ce2ec6eaaa",
+  "version": "0.6.5-develop.4397.1.9a65481757",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -145,13 +145,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.5-develop.4384.1.ce2ec6eaaa",
+    "@open-mercato/shared": "0.6.5-develop.4397.1.9a65481757",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.5-develop.4384.1.ce2ec6eaaa",
+    "@open-mercato/shared": "0.6.5-develop.4397.1.9a65481757",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/CrudForm.tsx

@@ -451,6 +451,32 @@ function serializeIssuePath(path: ReadonlyArray<string | number | symbol>): stri
   return segments.length > 0 ? segments.join('.') : null
 }
 
+function normalizeDirtySnapshotValue(value: unknown): unknown {
+  if (value === undefined || value === null || value === '') return undefined
+  if (Array.isArray(value)) {
+    const normalized = value
+      .map((entry) => normalizeDirtySnapshotValue(entry))
+      .filter((entry) => entry !== undefined)
+    return normalized.length ? normalized : undefined
+  }
+  if (typeof value !== 'object') return value
+
+  const prototype = Object.getPrototypeOf(value)
+  if (prototype !== Object.prototype && prototype !== null) return value
+
+  const normalized: Record<string, unknown> = {}
+  const record = value as Record<string, unknown>
+  for (const key of Object.keys(record).sort()) {
+    const nextValue = normalizeDirtySnapshotValue(record[key])
+    if (nextValue !== undefined) normalized[key] = nextValue
+  }
+  return Object.keys(normalized).length ? normalized : undefined
+}
+
+function createDirtySnapshot(source: Record<string, unknown>): string {
+  return JSON.stringify(normalizeDirtySnapshotValue(source) ?? {})
+}
+
 const FIELDSET_ICON_COMPONENTS: Record<string, React.ComponentType<{ className?: string }>> = {
   layers: Layers,
   tag: Tag,
@@ -750,7 +776,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       setHasUnsavedChanges(false)
       return
     }
-    const currentSnapshot = JSON.stringify(values)
+    const currentSnapshot = createDirtySnapshot(values as Record<string, unknown>)
     const dirty = currentSnapshot !== snapshot
     isDirtyRef.current = dirty
     setHasUnsavedChanges(dirty)
@@ -797,7 +823,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
 
   const clearDirtyState = React.useCallback((snapshotSource?: Record<string, unknown>) => {
     const source = snapshotSource ?? (valuesRef.current as Record<string, unknown>)
-    dirtyBaselineSnapshotRef.current = JSON.stringify(source)
+    dirtyBaselineSnapshotRef.current = createDirtySnapshot(source)
     isDirtyRef.current = false
     setHasUnsavedChanges(false)
   }, [])
@@ -842,7 +868,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       if (!target) return
       if (shouldBypassUnsavedChangesGuardRef.current?.(target)) return
       const baselineSnapshot = dirtyBaselineSnapshotRef.current
-      if (baselineSnapshot && JSON.stringify(valuesRef.current) === baselineSnapshot) {
+      if (baselineSnapshot && createDirtySnapshot(valuesRef.current as Record<string, unknown>) === baselineSnapshot) {
         isDirtyRef.current = false
         setHasUnsavedChanges(false)
         return
@@ -874,7 +900,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           return original(data, unused, url)
         }
         const baselineSnapshot = dirtyBaselineSnapshotRef.current
-        if (baselineSnapshot && JSON.stringify(valuesRef.current) === baselineSnapshot) {
+        if (baselineSnapshot && createDirtySnapshot(valuesRef.current as Record<string, unknown>) === baselineSnapshot) {
           isDirtyRef.current = false
           setHasUnsavedChanges(false)
           return original(data, unused, url)
@@ -2177,7 +2203,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       return mergedValues
     })
     if (mergedValues) {
-      dirtyBaselineSnapshotRef.current = JSON.stringify(mergedValues)
+      dirtyBaselineSnapshotRef.current = createDirtySnapshot(mergedValues as Record<string, unknown>)
     }
     if (!extendedInjectionEventsEnabled || !mergedValues) return
     let cancelled = false
@@ -2190,7 +2216,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         )
         const transformed = result.data
         if (cancelled || !transformed) return
-        dirtyBaselineSnapshotRef.current = JSON.stringify(transformed as Record<string, unknown>)
+        dirtyBaselineSnapshotRef.current = createDirtySnapshot(transformed as Record<string, unknown>)
         setValues(transformed as CrudFormValues<TValues>)
       } catch (err) {
         console.error('[CrudForm] Error in transformDisplayData:', err)
@@ -2259,7 +2285,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
 
     // Update the dirty baseline so the form doesn't appear dirty from defaults
     if (mergedValues) {
-      dirtyBaselineSnapshotRef.current = JSON.stringify(mergedValues)
+      dirtyBaselineSnapshotRef.current = createDirtySnapshot(mergedValues as Record<string, unknown>)
     }
   }, [isLoading, initialValuesHasId, cfDefinitions, customEntity])
 

package/src/backend/DataTable.tsx

@@ -250,6 +250,15 @@ export type DataTableProps<T> = {
   injectionSpotId?: string
   injectionContext?: Record<string, unknown>
   replacementHandle?: string
+  /**
+   * Stable id used to derive the `data-table:<id>:*` widget injection spots
+   * (`:columns`, `:row-actions`, `:bulk-actions`, `:filters`, `:toolbar`,
+   * `:search-trailing`, `:header`, `:footer`) when the host does not need a
+   * full perspective config. Cheaper than wiring a perspective just to enable
+   * widget injection. Falls back to `perspective?.tableId` and `injectionSpotId`
+   * if not provided.
+   */
+  extensionTableId?: string
   stickyFirstColumn?: boolean
   stickyActionsColumn?: boolean
   virtualized?: boolean
@@ -985,6 +994,7 @@ export function DataTable<T>({
   injectionSpotId,
   injectionContext,
   replacementHandle,
+  extensionTableId: extensionTableIdProp,
   stickyFirstColumn = false,
   stickyActionsColumn = false,
   virtualized = false,
@@ -1181,14 +1191,34 @@ export function DataTable<T>({
 
   const extensionTableId = React.useMemo(() => {
     if (perspective?.tableId) return perspective.tableId
+    if (extensionTableIdProp) return extensionTableIdProp
     if (injectionSpotId?.startsWith('data-table:')) return injectionSpotId.slice('data-table:'.length)
     return null
-  }, [injectionSpotId, perspective?.tableId])
-  const resolvedInjectionSpotId = injectionSpotId ?? (perspective?.tableId ? `data-table:${perspective.tableId}` : null)
+  }, [injectionSpotId, perspective?.tableId, extensionTableIdProp])
+  const resolvedInjectionSpotId =
+    injectionSpotId
+    ?? (perspective?.tableId ? `data-table:${perspective.tableId}` : null)
+    ?? (extensionTableIdProp ? `data-table:${extensionTableIdProp}` : null)
   const resolvedReplacementHandle = replacementHandle ?? ComponentReplacementHandles.dataTable(extensionTableId ?? 'unknown')
   const baseInjectionContext = React.useMemo(
-    () => injectionContext ?? { tableId: perspective?.tableId ?? null, title: typeof title === 'string' ? title : undefined },
-    [injectionContext, perspective?.tableId, title]
+    () => {
+      // R2-M2 / F9 (2026-05-26): the default injection context now derives
+      // `tableId` from `extensionTableId ?? perspective?.tableId` (was
+      // `perspective?.tableId` only). Note `extensionTableId` itself now falls
+      // back to the `data-table:` suffix of `injectionSpotId` (see the memo
+      // above), so a caller passing only `injectionSpotId="data-table:foo"`
+      // (no `injectionContext`/`perspective`) now receives
+      // `context.tableId = "foo"` instead of the previous `null`. This only
+      // populates a field that was null before, so toolbar/header/footer/
+      // search-trailing widgets that read `tableId` get a value while widgets
+      // that ignore it are unaffected. Explicit `injectionContext` from the
+      // caller still wins as-is — preserves the existing public contract.
+      if (injectionContext) return injectionContext
+      const resolvedTableId = extensionTableId ?? perspective?.tableId ?? null
+      const baseTitle = typeof title === 'string' ? title : undefined
+      return { tableId: resolvedTableId, title: baseTitle }
+    },
+    [injectionContext, perspective?.tableId, extensionTableId, title]
   )
   const headerInjectionSpotId = React.useMemo(
     () => (resolvedInjectionSpotId ? `${resolvedInjectionSpotId}:header` : null),

package/src/backend/__tests__/CrudForm.unsavedNavigation.test.tsx

@@ -3,6 +3,9 @@ jest.setTimeout(15000)
 
 const pushMock = jest.fn()
 const confirmDialogMock = jest.fn()
+const triggerEventMock = jest.fn()
+let mockInjectionSpotDataChange: (() => unknown) | null = null
+let mockInjectionSpotDataChangeCalled = false
 
 jest.mock('next/navigation', () => ({
   useRouter: () => ({ push: pushMock }),
@@ -19,9 +22,17 @@ jest.mock('../confirm-dialog', () => ({
 }))
 jest.mock('../injection/InjectionSpot', () => ({
   __esModule: true,
-  InjectionSpot: () => null,
+  InjectionSpot: ({ onDataChange }: { onDataChange?: (next: unknown) => void }) => {
+    const React = require('react') as typeof import('react')
+    React.useEffect(() => {
+      if (!mockInjectionSpotDataChange || mockInjectionSpotDataChangeCalled) return
+      mockInjectionSpotDataChangeCalled = true
+      onDataChange?.(mockInjectionSpotDataChange())
+    }, [onDataChange])
+    return null
+  },
   useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
-  useInjectionSpotEvents: () => ({ triggerEvent: jest.fn() }),
+  useInjectionSpotEvents: () => ({ triggerEvent: triggerEventMock }),
 }))
 jest.mock('../injection/useInjectionDataWidgets', () => ({
   __esModule: true,
@@ -40,6 +51,10 @@ describe('CrudForm unsaved navigation guard', () => {
     pushMock.mockReset()
     confirmDialogMock.mockReset()
     confirmDialogMock.mockResolvedValue(true)
+    triggerEventMock.mockReset()
+    triggerEventMock.mockImplementation(async (_event: string, data: Record<string, unknown>) => ({ ok: true, data }))
+    mockInjectionSpotDataChange = null
+    mockInjectionSpotDataChangeCalled = false
     window.history.replaceState({}, '', '/current')
   })
 
@@ -265,4 +280,38 @@ describe('CrudForm unsaved navigation guard', () => {
 
     anchor.remove()
   })
+
+  it('does not prompt when initialization normalizes empty values without user edits', async () => {
+    mockInjectionSpotDataChange = () => ({ name: undefined, tags: [], meta: { note: null } })
+
+    renderWithProviders(
+      <CrudForm
+        title="Form"
+        fields={fields}
+        initialValues={{ name: '', tags: [], meta: { note: '' } }}
+        injectionSpotId="customers.person"
+        onSubmit={() => {}}
+      />,
+      {
+        dict: {
+          'ui.forms.actions.save': 'Save',
+          'ui.forms.confirmUnsavedChanges': 'You have unsaved changes. Are you sure you want to leave?',
+        },
+      },
+    )
+
+    await act(async () => {
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+
+    await act(async () => {
+      window.history.pushState({}, '', '/backend/customers/people')
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+
+    expect(confirmDialogMock).not.toHaveBeenCalled()
+    expect(window.location.pathname).toBe('/backend/customers/people')
+  })
 })

package/src/backend/icons/lucideRegistry.generated.tsx

@@ -83,6 +83,7 @@ import {
   Mail,
   MailOpen,
   MapPin,
+  MessageCircle,
   MinusCircle,
   Notebook,
   Package,
@@ -98,6 +99,7 @@ import {
   Receipt,
   ReceiptText,
   RefreshCcw,
+  RefreshCw,
   Reply,
   RotateCcw,
   Ruler,
@@ -223,6 +225,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'mail': Mail,
   'mail-open': MailOpen,
   'map-pin': MapPin,
+  'message-circle': MessageCircle,
   'minus-circle': MinusCircle,
   'notebook': Notebook,
   'package': Package,
@@ -238,6 +241,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'receipt': Receipt,
   'receipt-text': ReceiptText,
   'refresh-ccw': RefreshCcw,
+  'refresh-cw': RefreshCw,
   'reply': Reply,
   'rotate-ccw': RotateCcw,
   'ruler': Ruler,