@open-mercato/ui 0.4.2-canary-c02407ff85

package/src/backend/indexes/store.ts

@@ -0,0 +1,88 @@
+"use client"
+import * as React from 'react'
+
+export type PartialIndexNotice = {
+  entity: string
+  entityLabel: string
+  baseCount: number | null
+  indexedCount: number | null
+  scope: 'scoped' | 'global'
+  receivedAt: number
+}
+
+type PartialIndexInput = {
+  entity: string
+  entityLabel?: string
+  baseCount?: number | null
+  indexedCount?: number | null
+  scope?: 'scoped' | 'global'
+}
+
+const TTL_MS = 120_000
+
+let current: PartialIndexNotice | null = null
+const emitter = new EventTarget()
+
+function now(): number {
+  return typeof performance !== 'undefined' && performance.now
+    ? Math.round(performance.timeOrigin + performance.now())
+    : Date.now()
+}
+
+function subscribe(listener: () => void) {
+  const wrapped = () => listener()
+  emitter.addEventListener('change', wrapped)
+  return () => emitter.removeEventListener('change', wrapped)
+}
+
+function emit() {
+  emitter.dispatchEvent(new Event('change'))
+}
+
+function normalizeInput(input: PartialIndexInput): PartialIndexNotice {
+  const label = typeof input.entityLabel === 'string' && input.entityLabel.trim()
+    ? input.entityLabel.trim()
+    : input.entity
+  return {
+    entity: input.entity,
+    entityLabel: label,
+    baseCount: typeof input.baseCount === 'number' ? input.baseCount : null,
+    indexedCount: typeof input.indexedCount === 'number' ? input.indexedCount : null,
+    scope: input.scope === 'global' ? 'global' : 'scoped',
+    receivedAt: now(),
+  }
+}
+
+function prune(stale: PartialIndexNotice | null): PartialIndexNotice | null {
+  if (!stale) return null
+  const age = now() - stale.receivedAt
+  if (!Number.isFinite(age) || age > TTL_MS) return null
+  return stale
+}
+
+function getSnapshot(): PartialIndexNotice | null {
+  current = prune(current)
+  return current
+}
+
+export function usePartialIndexWarning(): PartialIndexNotice | null {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => getSnapshot(),
+    () => null,
+  )
+}
+
+export function pushPartialIndexWarning(input: PartialIndexInput) {
+  if (typeof window === 'undefined') return
+  if (!input.entity) return
+  const next = normalizeInput(input)
+  current = next
+  emit()
+}
+
+export function dismissPartialIndexWarning() {
+  if (typeof window === 'undefined') return
+  current = null
+  emit()
+}

package/src/backend/injection/InjectionSpot.tsx

@@ -0,0 +1,236 @@
+"use client"
+import * as React from 'react'
+import type {
+  InjectionSpotId,
+  InjectionWidgetModule,
+  WidgetInjectionEventHandlers,
+  WidgetBeforeSaveResult,
+} from '@open-mercato/shared/modules/widgets/injection'
+import { loadInjectionWidgetsForSpot, type LoadedInjectionWidget } from '@open-mercato/shared/modules/widgets/injection-loader'
+
+export type InjectionSpotProps<TContext = unknown, TData = unknown> = {
+  spotId: InjectionSpotId
+  context: TContext
+  data?: TData
+  onDataChange?: (data: TData) => void
+  disabled?: boolean
+  onEvent?: (event: 'onLoad' | 'onBeforeSave' | 'onSave' | 'onAfterSave', widgetId: string) => void
+  widgetsOverride?: LoadedWidget[]
+}
+
+type LoadedWidget = {
+  widgetId: string
+  module: InjectionWidgetModule<any, any>
+  moduleId: string
+  key: string
+  placement?: LoadedInjectionWidget['placement']
+}
+
+export function useInjectionWidgets<TContext = unknown>(
+  spotId: InjectionSpotId | null | undefined,
+  options?: {
+    context?: TContext
+    triggerOnLoad?: boolean
+    onEvent?: (event: 'onLoad', widgetId: string) => void
+  }
+) {
+  const [widgets, setWidgets] = React.useState<LoadedWidget[]>([])
+  const [loading, setLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+  const loadedRef = React.useRef(false)
+
+  React.useEffect(() => {
+    if (!spotId) {
+      setWidgets([])
+      setLoading(false)
+      setError(null)
+      return
+    }
+    let mounted = true
+    const load = async () => {
+      try {
+        setLoading(true)
+        setError(null)
+        const loaded = await loadInjectionWidgetsForSpot(spotId)
+        if (!mounted) return
+        const widgetList: LoadedWidget[] = loaded.map((w) => ({
+          widgetId: w.metadata.id,
+          module: w,
+          moduleId: w.moduleId,
+          key: w.key,
+          placement: w.placement,
+        }))
+        setWidgets(widgetList)
+        
+        // Trigger onLoad for all widgets
+        if (!loadedRef.current && options?.triggerOnLoad) {
+          loadedRef.current = true
+          for (const widget of widgetList) {
+            if (widget.module.eventHandlers?.onLoad) {
+              try {
+                await widget.module.eventHandlers.onLoad(options.context as TContext)
+                options.onEvent?.('onLoad', widget.widgetId)
+              } catch (err) {
+                console.error(`[InjectionSpot] Error in onLoad for widget ${widget.widgetId}:`, err)
+              }
+            }
+          }
+        }
+      } catch (err) {
+        if (!mounted) return
+        console.error(`[InjectionSpot] Failed to load widgets for spot ${spotId}:`, err)
+        setError(err instanceof Error ? err.message : String(err))
+      } finally {
+        if (mounted) setLoading(false)
+      }
+    }
+    load()
+    return () => {
+      mounted = false
+    }
+  }, [spotId, options?.context, options?.triggerOnLoad, options?.onEvent])
+
+  return { widgets, loading, error }
+}
+
+export function InjectionSpot<TContext = unknown, TData = unknown>({
+  spotId,
+  context,
+  data,
+  onDataChange,
+  disabled,
+  onEvent,
+  widgetsOverride,
+}: InjectionSpotProps<TContext, TData>) {
+  const useSpotId = widgetsOverride ? null : spotId
+  const { widgets, loading, error } = useInjectionWidgets<TContext>(useSpotId, {
+    context,
+    triggerOnLoad: !widgetsOverride,
+    onEvent: onEvent ? (event, id) => onEvent(event, id) : undefined,
+  })
+  const effectiveWidgets = widgetsOverride ?? widgets
+  const effectiveLoading = widgetsOverride ? false : loading
+  const effectiveError = widgetsOverride ? null : error
+
+  if (effectiveLoading) {
+    return null
+  }
+
+  if (effectiveError) {
+    console.error(`[InjectionSpot] Error loading widgets for spot ${spotId}:`, effectiveError)
+    return null
+  }
+
+  if (effectiveWidgets.length === 0) {
+    return null
+  }
+
+  return (
+    <>
+      {effectiveWidgets.map((widget) => {
+        const { Widget } = widget.module
+        return (
+          <Widget
+            key={widget.widgetId}
+            context={context}
+            data={data}
+            onDataChange={onDataChange}
+            disabled={disabled}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+/**
+ * Hook to trigger injection widget events imperatively
+ */
+export function useInjectionSpotEvents<TContext = unknown, TData = unknown>(spotId: InjectionSpotId, prefetchedWidgets?: LoadedWidget[]) {
+  const [widgets, setWidgets] = React.useState<LoadedWidget[]>([])
+
+  React.useEffect(() => {
+    if (prefetchedWidgets && prefetchedWidgets.length) {
+      setWidgets(prefetchedWidgets)
+      return
+    }
+    let mounted = true
+    const load = async () => {
+      try {
+        const loaded = await loadInjectionWidgetsForSpot(spotId)
+        if (!mounted) return
+        setWidgets(
+          loaded.map((w) => ({
+            widgetId: w.metadata.id,
+            module: w,
+            moduleId: w.moduleId,
+            key: w.key,
+            placement: w.placement,
+          }))
+        )
+      } catch (err) {
+        console.error(`[useInjectionSpotEvents] Failed to load widgets for spot ${spotId}:`, err)
+      }
+    }
+    load()
+    return () => {
+      mounted = false
+    }
+  }, [spotId, prefetchedWidgets])
+
+  const triggerEvent = React.useCallback(
+    async (
+      event: keyof WidgetInjectionEventHandlers<TContext, TData>,
+      data: TData,
+      context: TContext
+    ): Promise<{ ok: boolean; message?: string; fieldErrors?: Record<string, string> }> => {
+      const normalizeBeforeSave = (result: WidgetBeforeSaveResult): { ok: boolean; message?: string; fieldErrors?: Record<string, string> } => {
+        if (result === false) return { ok: false }
+        if (result === true || typeof result === 'undefined') return { ok: true }
+        if (result && typeof result === 'object') {
+          const ok = typeof result.ok === 'boolean' ? result.ok : true
+          const message = typeof result.message === 'string' ? result.message : undefined
+          const fieldErrors =
+            result.fieldErrors && typeof result.fieldErrors === 'object'
+              ? Object.fromEntries(
+                  Object.entries(result.fieldErrors).map(([key, value]) => [key, String(value)]),
+                )
+              : undefined
+          return { ok, message, fieldErrors }
+        }
+        return { ok: true }
+      }
+
+      for (const widget of widgets) {
+        const handler = widget.module.eventHandlers?.[event]
+        if (handler) {
+          try {
+            const result = await (handler as any)(data, context)
+            if (event === 'onBeforeSave') {
+              const normalized = normalizeBeforeSave(result as WidgetBeforeSaveResult)
+              if (!normalized.ok) {
+                console.log(`[useInjectionSpotEvents] Widget ${widget.widgetId} prevented ${event}`)
+                return normalized
+              }
+            }
+          } catch (err) {
+            console.error(`[useInjectionSpotEvents] Error in ${event} for widget ${widget.widgetId}:`, err)
+            if (event === 'onBeforeSave') {
+              const message =
+                err instanceof Error
+                  ? err.message || 'Validation blocked'
+                  : typeof err === 'string'
+                    ? err
+                    : undefined
+              return { ok: false, message }
+            }
+          }
+        }
+      }
+      return { ok: true }
+    },
+    [widgets]
+  )
+
+  return { triggerEvent, widgets }
+}

package/src/backend/injection/PageInjectionBoundary.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+import { InjectionSpot } from './InjectionSpot'
+
+function normalizePath(path: string): string {
+  const trimmed = path.replace(/\?.*$/, '').replace(/\/+$/, '')
+  const withoutLeading = trimmed.startsWith('/') ? trimmed.slice(1) : trimmed
+  const safe = withoutLeading.length ? withoutLeading : 'root'
+  return safe.replace(/[^a-zA-Z0-9]+/g, ':')
+}
+
+export function PageInjectionBoundary({
+  path,
+  context,
+  children,
+}: {
+  path: string
+  context?: Record<string, unknown>
+  children: ReactNode
+}) {
+  const handle = normalizePath(path || '/')
+  const beforeSpotId = `admin.page:${handle}:before`
+  const afterSpotId = `admin.page:${handle}:after`
+
+  return (
+    <>
+      <InjectionSpot spotId={beforeSpotId} context={context ?? { path }} />
+      {children}
+      <InjectionSpot spotId={afterSpotId} context={context ?? { path }} />
+    </>
+  )
+}

package/src/backend/injection/helpers.ts

@@ -0,0 +1,35 @@
+import type { InjectionSpotId } from '@open-mercato/shared/modules/widgets/injection'
+
+/**
+ * Generate a standard injection spot ID for CRUD forms
+ * @param formName The name/identifier of the form (e.g., 'catalog.product', 'catalog.variant')
+ * @returns A standardized injection spot ID
+ */
+export function generateCrudFormInjectionSpotId(formName: string): InjectionSpotId {
+  return `crud-form:${formName}`
+}
+
+/**
+ * Generate injection spot IDs for common CRUD form locations
+ */
+export const CrudFormInjectionSpots = {
+  /**
+   * Generate injection spot ID for before the form fields
+   */
+  beforeFields: (formName: string): InjectionSpotId => `${generateCrudFormInjectionSpotId(formName)}:before-fields`,
+  
+  /**
+   * Generate injection spot ID for after the form fields
+   */
+  afterFields: (formName: string): InjectionSpotId => `${generateCrudFormInjectionSpotId(formName)}:after-fields`,
+  
+  /**
+   * Generate injection spot ID for the header area
+   */
+  header: (formName: string): InjectionSpotId => `${generateCrudFormInjectionSpotId(formName)}:header`,
+  
+  /**
+   * Generate injection spot ID for the footer/actions area
+   */
+  footer: (formName: string): InjectionSpotId => `${generateCrudFormInjectionSpotId(formName)}:footer`,
+}

package/src/backend/injection/widgetRegistry.ts

@@ -0,0 +1,68 @@
+import type { ModuleInjectionWidgetEntry } from '@open-mercato/shared/modules/registry'
+import type { InjectionWidgetModule } from '@open-mercato/shared/modules/widgets/injection'
+
+type Entry = ModuleInjectionWidgetEntry
+
+// Registration pattern for publishable packages
+let _injectionWidgetEntries: Entry[] | null = null
+
+export function registerInjectionWidgets(entries: Entry[]) {
+  if (_injectionWidgetEntries !== null && process.env.NODE_ENV === 'development') {
+    console.debug('[Bootstrap] Injection widgets re-registered (this may occur during HMR)')
+  }
+  _injectionWidgetEntries = entries
+}
+
+export function getInjectionWidgets(): Entry[] {
+  if (!_injectionWidgetEntries) {
+    // On client-side, bootstrap doesn't run - return empty array gracefully
+    if (typeof window !== 'undefined') {
+      return []
+    }
+    throw new Error('[Bootstrap] Injection widgets not registered. Call registerInjectionWidgets() at bootstrap.')
+  }
+  return _injectionWidgetEntries
+}
+
+let entriesPromise: Promise<Entry[]> | null = null
+
+async function getEntries(): Promise<Entry[]> {
+  if (!entriesPromise) {
+    const promise = Promise.resolve().then(() => getInjectionWidgets())
+    entriesPromise = promise.catch((err) => {
+      // Clear cache on error so next call can retry after registration
+      if (entriesPromise === promise) {
+        entriesPromise = null
+      }
+      throw err
+    })
+  }
+  return entriesPromise
+}
+
+type LoadedWidgetModule = InjectionWidgetModule<any, any>
+
+const cache = new Map<string, Promise<LoadedWidgetModule>>()
+
+async function findEntry(loaderKey: string): Promise<Entry | undefined> {
+  const entries = await getEntries()
+  return entries.find((entry) => entry.key === loaderKey)
+}
+
+export async function loadInjectionWidgetModule(loaderKey: string): Promise<LoadedWidgetModule | null> {
+  const entry = await findEntry(loaderKey)
+  if (!entry) return null
+  if (!cache.has(loaderKey)) {
+    cache.set(
+      loaderKey,
+      entry
+        .loader()
+        .then((mod) => {
+          const candidate = mod as LoadedWidgetModule
+          const maybeDefault = (mod as { default?: LoadedWidgetModule }).default
+          return maybeDefault ?? candidate
+        })
+    )
+  }
+  return cache.get(loaderKey) ?? null
+}