@open-mercato/ui 0.4.5-develop-6bdcebbece → 0.4.5-develop-986cfd8c37

package/src/backend/ProfileDropdown.tsx

@@ -7,6 +7,11 @@ import { locales, type Locale } from '@open-mercato/shared/lib/i18n/config'
 import { useTheme } from '@open-mercato/ui/theme'
 import { Button } from '../primitives/button'
 import { IconButton } from '../primitives/icon-button'
+import { useInjectedMenuItems } from './injection/useInjectedMenuItems'
+import { mergeMenuItems, type MergedMenuItem } from './injection/mergeMenuItems'
+import { resolveInjectedIcon } from './injection/resolveInjectedIcon'
+import { InjectionSpot } from './injection/InjectionSpot'
+import { BACKEND_TOPBAR_PROFILE_MENU_INJECTION_SPOT_ID } from './injection/spotIds'
 
 export type ProfileDropdownProps = {
   email?: string
@@ -36,6 +41,7 @@ export function ProfileDropdown({
   const [mounted, setMounted] = React.useState(false)
   const buttonRef = React.useRef<HTMLButtonElement>(null)
   const menuRef = React.useRef<HTMLDivElement>(null)
+  const { items: injectedItems } = useInjectedMenuItems('menu:topbar:profile-dropdown')
 
   React.useEffect(() => {
     setMounted(true)
@@ -96,47 +102,86 @@ export function ProfileDropdown({
   const menuItemClass =
     'w-full text-left text-sm cursor-pointer px-3 py-2 rounded hover:bg-accent inline-flex items-center gap-2.5 outline-none focus-visible:ring-1 focus-visible:ring-ring'
 
-  return (
-    <div className="relative">
-      <IconButton
-        ref={buttonRef}
-        variant="ghost"
-        size="sm"
-        onClick={() => setOpen(!open)}
-        aria-expanded={open}
-        aria-haspopup="menu"
-        title={email || t('ui.userMenu.userFallback', 'User')}
-      >
-        <User className="size-4" />
-      </IconButton>
+  const resolveMenuLabel = React.useCallback(
+    (item: Pick<MergedMenuItem, 'id' | 'label' | 'labelKey'>): string => {
+      if (item.labelKey && item.label) return t(item.labelKey, item.label)
+      if (item.labelKey) return t(item.labelKey, item.id)
+      if (item.label && item.label.includes('.')) return t(item.label, item.id)
+      return item.label ?? item.id
+    },
+    [t],
+  )
 
-      {open && (
-        <div
-          ref={menuRef}
-          className="absolute right-0 top-full mt-1 w-56 rounded-md border bg-background p-1 shadow-lg z-50"
-          role="menu"
+  const builtInMenuItems = React.useMemo(
+    () => {
+      const items: Array<{ id: string; separator?: boolean }> = [{ id: 'change-password' }]
+      if (notificationsHref) items.push({ id: 'notifications' })
+      items.push({ id: 'theme-toggle', separator: true }, { id: 'language' }, { id: 'sign-out', separator: true })
+      return items
+    },
+    [notificationsHref],
+  )
+
+  const mergedMenuItems = React.useMemo(
+    () => mergeMenuItems(builtInMenuItems, injectedItems),
+    [builtInMenuItems, injectedItems],
+  )
+  const injectionContext = React.useMemo(
+    () => ({
+      email,
+      displayName,
+      locale: currentLocale,
+    }),
+    [currentLocale, displayName, email],
+  )
+
+  const renderInjectedItem = React.useCallback(
+    (item: MergedMenuItem) => {
+      const label = resolveMenuLabel(item)
+      const icon = resolveInjectedIcon(item.icon)
+      if (item.href) {
+        return (
+          <Link
+            key={item.id}
+            href={item.href}
+            className={menuItemClass}
+            role="menuitem"
+            data-menu-item-id={item.id}
+            onClick={() => setOpen(false)}
+          >
+            {icon}
+            <span>{label}</span>
+          </Link>
+        )
+      }
+      return (
+        <Button
+          key={item.id}
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="w-full justify-start"
+          role="menuitem"
+          data-menu-item-id={item.id}
+          onClick={() => {
+            item.onClick?.()
+            setOpen(false)
+          }}
         >
-          {/* User info header */}
-          {(displayName || email) && (
-            <div className="px-3 py-2.5 border-b mb-1">
-              {displayName && (
-                <div className="font-medium text-sm flex items-center gap-2">
-                  <User className="size-4" />
-                  {displayName}
-                </div>
-              )}
-              {displayName && email && (
-                <div className="text-xs text-muted-foreground mt-0.5 ml-6">{email}</div>
-              )}
-              {!displayName && email && (
-                <div className="text-xs text-muted-foreground">
-                  {t('ui.userMenu.loggedInAs', 'Logged in as:')} {email}
-                </div>
-              )}
-            </div>
-          )}
+          {icon}
+          <span>{label}</span>
+        </Button>
+      )
+    },
+    [menuItemClass, resolveMenuLabel],
+  )
 
+  const renderBuiltInItem = React.useCallback(
+    (id: string) => {
+      if (id === 'change-password') {
+        return (
           <Link
+            key={id}
             href={changePasswordHref}
             className={menuItemClass}
             role="menuitem"
@@ -145,44 +190,49 @@ export function ProfileDropdown({
             <Key className="size-4" />
             <span>{t('ui.profileMenu.changePassword', 'Change Password')}</span>
           </Link>
+        )
+      }
 
-          {/* Notification Preferences */}
-          {notificationsHref && (
-            <Link
-              href={notificationsHref}
-              className={menuItemClass}
-              role="menuitem"
-              onClick={() => setOpen(false)}
-            >
-              <Bell className="size-4" />
-              <span>{t('ui.profileMenu.notifications', 'Notification Preferences')}</span>
-            </Link>
-          )}
-
-          <div className="my-1 border-t" />
+      if (id === 'notifications' && notificationsHref) {
+        return (
+          <Link
+            key={id}
+            href={notificationsHref}
+            className={menuItemClass}
+            role="menuitem"
+            onClick={() => setOpen(false)}
+          >
+            <Bell className="size-4" />
+            <span>{t('ui.profileMenu.notifications', 'Notification Preferences')}</span>
+          </Link>
+        )
+      }
 
-          {/* Theme Toggle */}
-          {mounted && (
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="w-full justify-between"
-              role="menuitem"
-              onClick={handleThemeToggle}
-            >
-              <span className="inline-flex items-center gap-2.5">
-                {isDark ? <Moon className="size-4" /> : <Sun className="size-4" />}
-                <span>{t('ui.profileMenu.theme', 'Dark Mode')}</span>
-              </span>
-              <div className={`w-8 h-4 rounded-full transition-colors ${isDark ? 'bg-primary' : 'bg-muted'} relative`}>
-                <div className={`absolute top-0.5 w-3 h-3 rounded-full bg-background shadow transition-transform ${isDark ? 'translate-x-4' : 'translate-x-0.5'}`} />
-              </div>
-            </Button>
-          )}
+      if (id === 'theme-toggle') {
+        return mounted ? (
+          <Button
+            key={id}
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="w-full justify-between"
+            role="menuitem"
+            onClick={handleThemeToggle}
+          >
+            <span className="inline-flex items-center gap-2.5">
+              {isDark ? <Moon className="size-4" /> : <Sun className="size-4" />}
+              <span>{t('ui.profileMenu.theme', 'Dark Mode')}</span>
+            </span>
+            <div className={`w-8 h-4 rounded-full transition-colors ${isDark ? 'bg-primary' : 'bg-muted'} relative`}>
+              <div className={`absolute top-0.5 w-3 h-3 rounded-full bg-background shadow transition-transform ${isDark ? 'translate-x-4' : 'translate-x-0.5'}`} />
+            </div>
+          </Button>
+        ) : null
+      }
 
-          {/* Language Selector */}
-          <div className="relative">
+      if (id === 'language') {
+        return (
+          <div key={id} className="relative">
             <Button
               type="button"
               variant="ghost"
@@ -200,8 +250,6 @@ export function ProfileDropdown({
                 {localeLabels[currentLocale]}
               </span>
             </Button>
-
-            {/* Language submenu - inline below */}
             {languageOpen && (
               <div className="mt-1 ml-6 space-y-0.5 border-l pl-2">
                 {locales.map((locale) => (
@@ -220,11 +268,12 @@ export function ProfileDropdown({
               </div>
             )}
           </div>
+        )
+      }
 
-          <div className="my-1 border-t" />
-
-          {/* Sign Out */}
-          <form action="/api/auth/logout" method="POST">
+      if (id === 'sign-out') {
+        return (
+          <form key={id} action="/api/auth/logout" method="POST">
             <Button
               variant="ghost"
               size="sm"
@@ -236,6 +285,78 @@ export function ProfileDropdown({
               <span>{t('ui.userMenu.logout', 'Sign Out')}</span>
             </Button>
           </form>
+        )
+      }
+
+      return null
+    },
+    [
+      changePasswordHref,
+      currentLocale,
+      handleThemeToggle,
+      isDark,
+      languageOpen,
+      menuItemClass,
+      mounted,
+      notificationsHref,
+      t,
+    ],
+  )
+
+  return (
+    <div className="relative">
+      <IconButton
+        ref={buttonRef}
+        variant="ghost"
+        size="sm"
+        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        data-testid="profile-dropdown-trigger"
+        title={email || t('ui.userMenu.userFallback', 'User')}
+      >
+        <User className="size-4" />
+      </IconButton>
+
+      {open && (
+        <div
+          ref={menuRef}
+          className="absolute right-0 top-full mt-1 w-56 rounded-md border bg-background p-1 shadow-lg z-50"
+          role="menu"
+          data-testid="profile-dropdown"
+        >
+          {/* User info header */}
+          {(displayName || email) && (
+            <div className="px-3 py-2.5 border-b mb-1">
+              {displayName && (
+                <div className="font-medium text-sm flex items-center gap-2">
+                  <User className="size-4" />
+                  {displayName}
+                </div>
+              )}
+              {displayName && email && (
+                <div className="text-xs text-muted-foreground mt-0.5 ml-6">{email}</div>
+              )}
+              {!displayName && email && (
+                <div className="text-xs text-muted-foreground">
+                  {t('ui.userMenu.loggedInAs', 'Logged in as:')} {email}
+                </div>
+              )}
+            </div>
+          )}
+
+          {mergedMenuItems.map((item) => (
+            <React.Fragment key={item.id}>
+              {item.separator ? <div className="my-1 border-t" /> : null}
+              {item.source === 'injected'
+                ? (item.href || item.onClick || item.label || item.labelKey ? renderInjectedItem(item) : null)
+                : renderBuiltInItem(item.id)}
+            </React.Fragment>
+          ))}
+          <InjectionSpot
+            spotId={BACKEND_TOPBAR_PROFILE_MENU_INJECTION_SPOT_ID}
+            context={injectionContext}
+          />
         </div>
       )}
     </div>

package/src/backend/injection/InjectionSpot.tsx

@@ -6,8 +6,11 @@ import type {
   WidgetInjectionEventHandlers,
   WidgetBeforeDeleteResult,
   WidgetBeforeSaveResult,
+  FieldChangeResult,
+  NavigateGuardResult,
 } from '@open-mercato/shared/modules/widgets/injection'
 import { loadInjectionWidgetsForSpot, type LoadedInjectionWidget } from '@open-mercato/shared/modules/widgets/injection-loader'
+import { getWidgetSharedState } from './WidgetSharedState'
 
 export type InjectionSpotProps<TContext = unknown, TData = unknown> = {
   spotId: InjectionSpotId
@@ -16,20 +19,21 @@ export type InjectionSpotProps<TContext = unknown, TData = unknown> = {
   onDataChange?: (data: TData) => void
   disabled?: boolean
   onEvent?: (
-    event:
-    | 'onLoad'
-    | 'onBeforeSave'
-    | 'onSave'
-    | 'onAfterSave'
-    | 'onBeforeDelete'
-    | 'onDelete'
-    | 'onAfterDelete'
-    | 'onDeleteError',
+    event: keyof WidgetInjectionEventHandlers<TContext, TData>,
     widgetId: string,
   ) => void
   widgetsOverride?: LoadedWidget[]
 }
 
+/**
+ * Transformer events use pipeline dispatch: output of widget N becomes input of widget N+1.
+ */
+const TRANSFORMER_EVENTS = new Set<string>([
+  'transformFormData',
+  'transformDisplayData',
+  'transformValidation',
+])
+
 type LoadedWidget = {
   widgetId: string
   module: InjectionWidgetModule<any, any>
@@ -38,6 +42,20 @@ type LoadedWidget = {
   placement?: LoadedInjectionWidget['placement']
 }
 
+function injectSharedStateIntoContext<TContext>(context: TContext, moduleId: string): TContext {
+  const sharedState = getWidgetSharedState(moduleId)
+  if (typeof context === 'object' && context !== null && !Array.isArray(context)) {
+    return {
+      ...(context as Record<string, unknown>),
+      sharedState,
+    } as TContext
+  }
+  return {
+    value: context,
+    sharedState,
+  } as TContext
+}
+
 export function useInjectionWidgets<TContext = unknown>(
   spotId: InjectionSpotId | null | undefined,
   options?: {
@@ -80,7 +98,8 @@ export function useInjectionWidgets<TContext = unknown>(
           for (const widget of widgetList) {
             if (widget.module.eventHandlers?.onLoad) {
               try {
-                await widget.module.eventHandlers.onLoad(options.context as TContext)
+                const widgetContext = injectSharedStateIntoContext(options.context as TContext, widget.moduleId)
+                await widget.module.eventHandlers.onLoad(widgetContext)
                 options.onEvent?.('onLoad', widget.widgetId)
               } catch (err) {
                 console.error(`[InjectionSpot] Error in onLoad for widget ${widget.widgetId}:`, err)
@@ -144,7 +163,7 @@ export function InjectionSpot<TContext = unknown, TData = unknown>({
         return (
           <Widget
             key={widget.widgetId}
-            context={context}
+            context={injectSharedStateIntoContext(context, widget.moduleId)}
             data={data}
             onDataChange={onDataChange}
             disabled={disabled}
@@ -195,8 +214,28 @@ export function useInjectionSpotEvents<TContext = unknown, TData = unknown>(spot
       event: keyof WidgetInjectionEventHandlers<TContext, TData>,
       data: TData,
       context: TContext,
-      meta?: { error?: unknown }
-    ): Promise<{ ok: boolean; message?: string; fieldErrors?: Record<string, string>; requestHeaders?: Record<string, string>; details?: unknown }> => {
+      meta?: {
+        error?: unknown
+        fieldId?: string
+        fieldValue?: unknown
+        originalData?: TData
+        target?: unknown
+        visible?: boolean
+        appEvent?: unknown
+      }
+    ): Promise<{
+      ok: boolean
+      message?: string
+      fieldErrors?: Record<string, string>
+      requestHeaders?: Record<string, string>
+      details?: unknown
+      data?: TData
+      fieldChange?: {
+        value?: unknown
+        sideEffects?: Record<string, unknown>
+        messages?: Array<{ text: string; severity: 'info' | 'warning' | 'error' }>
+      }
+    }> => {
       const normalizeBeforeSave = (
         result: WidgetBeforeSaveResult,
       ): { ok: boolean; message?: string; fieldErrors?: Record<string, string>; requestHeaders?: Record<string, string>; details?: unknown } => {
@@ -247,21 +286,56 @@ export function useInjectionSpotEvents<TContext = unknown, TData = unknown>(spot
         return { ok: true }
       }
 
+      // --- Transformer events: pipeline dispatch ---
+      // Output of widget N becomes input of widget N+1
+      if (TRANSFORMER_EVENTS.has(event)) {
+        let pipelineData = data
+        for (const widget of widgets) {
+          const handler = widget.module.eventHandlers?.[event]
+          if (!handler) continue
+          try {
+            const widgetContext = injectSharedStateIntoContext(context, widget.moduleId)
+            if (event === 'transformValidation') {
+              pipelineData = await (handler as any)(pipelineData, meta?.originalData ?? data, widgetContext)
+            } else {
+              pipelineData = await (handler as any)(pipelineData, widgetContext)
+            }
+          } catch (err) {
+            console.error(`[useInjectionSpotEvents] Error in ${event} for widget ${widget.widgetId}:`, err)
+          }
+        }
+        return { ok: true, data: pipelineData }
+      }
+
+      // --- Action events: sequential dispatch ---
       const mergedRequestHeaders: Record<string, string> = {}
       let hasRequestHeaders = false
+      let fieldValue = meta?.fieldValue
+      let fieldSideEffects: Record<string, unknown> | undefined
+      let fieldMessages: Array<{ text: string; severity: 'info' | 'warning' | 'error' }> | undefined
 
       for (const widget of widgets) {
         const eventHandlers = widget.module.eventHandlers
         let handler = eventHandlers?.[event]
+        // Delete-to-save fallback chain
         if (!handler && event === 'onBeforeDelete') handler = eventHandlers?.onBeforeSave as typeof handler
         if (!handler && event === 'onDelete') handler = eventHandlers?.onSave as typeof handler
         if (!handler && event === 'onAfterDelete') handler = eventHandlers?.onAfterSave as typeof handler
         if (handler) {
           try {
+            const widgetContext = injectSharedStateIntoContext(context, widget.moduleId)
             const result =
               event === 'onDeleteError'
-                ? await (handler as any)(data, context, meta?.error)
-                : await (handler as any)(data, context)
+                ? await (handler as any)(data, widgetContext, meta?.error)
+                : event === 'onFieldChange'
+                  ? await (handler as any)(meta?.fieldId, fieldValue, data, widgetContext)
+                  : event === 'onBeforeNavigate'
+                    ? await (handler as any)(meta?.target, widgetContext)
+                    : event === 'onVisibilityChange'
+                      ? await (handler as any)(meta?.visible, widgetContext)
+                      : event === 'onAppEvent'
+                        ? await (handler as any)(meta?.appEvent, widgetContext)
+                        : await (handler as any)(data, widgetContext)
             if (event === 'onBeforeSave') {
               const normalized = normalizeBeforeSave(result as WidgetBeforeSaveResult)
               if (!normalized.ok) {
@@ -284,9 +358,27 @@ export function useInjectionSpotEvents<TContext = unknown, TData = unknown>(spot
                 hasRequestHeaders = true
               }
             }
+            if (event === 'onBeforeNavigate') {
+              const navResult = result as NavigateGuardResult | undefined
+              if (navResult && navResult.ok === false) {
+                return { ok: false, message: navResult.message }
+              }
+            }
+            if (event === 'onFieldChange') {
+              const changeResult = result as FieldChangeResult | void
+              if (changeResult?.value !== undefined) {
+                fieldValue = changeResult.value
+              }
+              if (changeResult?.sideEffects && typeof changeResult.sideEffects === 'object') {
+                fieldSideEffects = { ...(fieldSideEffects ?? {}), ...changeResult.sideEffects }
+              }
+              if (changeResult?.message?.text) {
+                fieldMessages = [...(fieldMessages ?? []), changeResult.message]
+              }
+            }
           } catch (err) {
             console.error(`[useInjectionSpotEvents] Error in ${event} for widget ${widget.widgetId}:`, err)
-            if (event === 'onBeforeSave' || event === 'onBeforeDelete') {
+            if (event === 'onBeforeSave' || event === 'onBeforeDelete' || event === 'onBeforeNavigate') {
               const message =
                 err instanceof Error
                   ? err.message || 'Validation blocked'
@@ -301,6 +393,16 @@ export function useInjectionSpotEvents<TContext = unknown, TData = unknown>(spot
       if ((event === 'onBeforeSave' || event === 'onBeforeDelete') && hasRequestHeaders) {
         return { ok: true, requestHeaders: mergedRequestHeaders }
       }
+      if (event === 'onFieldChange') {
+        return {
+          ok: true,
+          fieldChange: {
+            value: fieldValue,
+            sideEffects: fieldSideEffects,
+            messages: fieldMessages,
+          },
+        }
+      }
       return { ok: true }
     },
     [widgets]

package/src/backend/injection/SseEventIndicator.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { useAppEvent } from './useAppEvent'
+import { flash } from '../FlashMessages'
+
+/**
+ * Global SSE Event Indicator
+ *
+ * Mount once in AppShell to provide visible feedback when server events
+ * arrive via the DOM Event Bridge. Shows a flash message for every
+ * broadcast event received.
+ *
+ * This component renders nothing — it only listens and triggers flash messages.
+ */
+export function SseEventIndicator(): null {
+  useAppEvent('*', (event) => {
+    const parts = event.id.split('.')
+    const module = parts[0] ?? ''
+    const action = parts[parts.length - 1] ?? 'event'
+    flash(`[SSE] ${module}: ${action} (${event.id})`, 'info')
+  })
+
+  return null
+}

package/src/backend/injection/WidgetSharedState.ts

@@ -0,0 +1,58 @@
+type Subscriber = (value: unknown) => void
+
+export interface WidgetSharedState {
+  get<T>(key: string): T | undefined
+  set<T>(key: string, value: T): void
+  subscribe(key: string, handler: Subscriber): () => void
+}
+
+class NamespacedWidgetSharedState implements WidgetSharedState {
+  private readonly values = new Map<string, unknown>()
+  private readonly subscribers = new Map<string, Set<Subscriber>>()
+
+  constructor(private readonly namespace: string) {}
+
+  get<T>(key: string): T | undefined {
+    return this.values.get(this.toScopedKey(key)) as T | undefined
+  }
+
+  set<T>(key: string, value: T): void {
+    const scopedKey = this.toScopedKey(key)
+    this.values.set(scopedKey, value)
+    const handlers = this.subscribers.get(scopedKey)
+    if (!handlers || handlers.size === 0) return
+    for (const handler of handlers) {
+      handler(value)
+    }
+  }
+
+  subscribe(key: string, handler: Subscriber): () => void {
+    const scopedKey = this.toScopedKey(key)
+    const handlers = this.subscribers.get(scopedKey) ?? new Set<Subscriber>()
+    handlers.add(handler)
+    this.subscribers.set(scopedKey, handlers)
+    return () => {
+      const current = this.subscribers.get(scopedKey)
+      if (!current) return
+      current.delete(handler)
+      if (current.size === 0) {
+        this.subscribers.delete(scopedKey)
+      }
+    }
+  }
+
+  private toScopedKey(key: string): string {
+    return `${this.namespace}:${key}`
+  }
+}
+
+const storeByNamespace = new Map<string, WidgetSharedState>()
+
+export function getWidgetSharedState(namespace: string): WidgetSharedState {
+  const normalized = namespace.trim().length > 0 ? namespace.trim() : 'global'
+  const existing = storeByNamespace.get(normalized)
+  if (existing) return existing
+  const created = new NamespacedWidgetSharedState(normalized)
+  storeByNamespace.set(normalized, created)
+  return created
+}