@freighttech/ui 0.13.18

package/src/backend/injection/InjectedField.tsx

@@ -0,0 +1,196 @@
+'use client'
+
+import * as React from 'react'
+import type { InjectionFieldDefinition, FieldContext } from '@open-mercato/shared/modules/widgets/injection'
+import { evaluateInjectedVisibility } from './visibility-utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Input } from '../../primitives/input'
+import { Checkbox } from '../../primitives/checkbox'
+import { Textarea } from '../../primitives/textarea'
+import { Label } from '../../primitives/label'
+import { Spinner } from '../../primitives/spinner'
+
+type InjectedFieldProps = {
+  field: InjectionFieldDefinition
+  value: unknown
+  onChange: (fieldId: string, value: unknown) => void
+  context: FieldContext
+  formData: Record<string, unknown>
+  readOnly?: boolean
+}
+
+type Option = { value: string; label: string; labelKey?: string }
+
+const MAX_CACHE_ENTRIES = 100
+const optionsCache = new Map<string, { expiresAt: number; options: Option[] }>()
+
+function evictExpiredCacheEntries() {
+  if (optionsCache.size <= MAX_CACHE_ENTRIES) return
+  const now = Date.now()
+  for (const [key, entry] of optionsCache) {
+    if (entry.expiresAt < now) optionsCache.delete(key)
+  }
+}
+
+function SelectField({
+  field,
+  value,
+  onChange,
+  disabled,
+  options,
+  optionsError,
+  label,
+}: {
+  field: InjectionFieldDefinition
+  value: unknown
+  onChange: (fieldId: string, value: unknown) => void
+  disabled?: boolean
+  options: Option[]
+  optionsError: boolean
+  label: string
+}) {
+  const t = useT()
+  return (
+    <div className="space-y-2" data-crud-field-id={field.id}>
+      <Label htmlFor={field.id}>{label}</Label>
+      <select
+        id={field.id}
+        className="flex h-9 w-full rounded-md border border-input bg-background pl-3 pr-8 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        value={typeof value === 'string' ? value : ''}
+        disabled={disabled || (options.length === 0 && !field.options?.length)}
+        onChange={(event) => onChange(field.id, event.target.value || undefined)}
+      >
+        <option value="">{t('ui.filters.select.placeholder', 'Select...')}</option>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.labelKey ? t(option.labelKey, option.label) : option.label}
+          </option>
+        ))}
+      </select>
+      {optionsError ? (
+        <div className="text-xs text-muted-foreground">{t('ui.forms.optionsUnavailable', 'Options unavailable')}</div>
+      ) : null}
+    </div>
+  )
+}
+
+
+export function InjectedField({ field, value, onChange, context, formData, readOnly = false }: InjectedFieldProps) {
+  const t = useT()
+  const [dynamicOptions, setDynamicOptions] = React.useState<Option[] | null>(null)
+  const [optionsError, setOptionsError] = React.useState(false)
+
+  React.useEffect(() => {
+    let cancelled = false
+    const loadOptions = async () => {
+      if (typeof field.optionsLoader !== 'function') return
+      const ttl = Math.max(1, field.optionsCacheTtl ?? 60)
+      const cacheKey = `${field.id}:${context.organizationId ?? ''}:${context.tenantId ?? ''}`
+      const cached = optionsCache.get(cacheKey)
+      if (cached && cached.expiresAt > Date.now()) {
+        setDynamicOptions(cached.options)
+        return
+      }
+      try {
+        const loaded = await field.optionsLoader(context)
+        if (cancelled) return
+        const normalized = Array.isArray(loaded) ? loaded : []
+        setDynamicOptions(normalized)
+        setOptionsError(false)
+        evictExpiredCacheEntries()
+        optionsCache.set(cacheKey, { options: normalized, expiresAt: Date.now() + ttl * 1000 })
+      } catch {
+        if (cancelled) return
+        setDynamicOptions(Array.isArray(field.options) ? field.options : null)
+        setOptionsError(true)
+      }
+    }
+    void loadOptions()
+    return () => {
+      cancelled = true
+    }
+  }, [context, field.id, field.options, field.optionsCacheTtl, field.optionsLoader])
+
+  if (!evaluateInjectedVisibility(field.visibleWhen, formData, context)) return null
+
+  const label = field.labelKey ? t(field.labelKey, field.label) : t(field.label, field.label)
+  const disabled = readOnly || field.readOnly
+  const options = dynamicOptions ?? field.options ?? []
+
+  if (field.type === 'custom' && field.customComponent) {
+    const CustomComponent = field.customComponent
+    return (
+      <React.Suspense fallback={<Spinner size="sm" />}>
+        <CustomComponent
+          value={value}
+          onChange={(next) => onChange(field.id, next)}
+          context={context}
+          disabled={disabled}
+        />
+      </React.Suspense>
+    )
+  }
+
+  if (field.type === 'textarea') {
+    return (
+      <div className="space-y-2" data-crud-field-id={field.id}>
+        <Label htmlFor={field.id}>{label}</Label>
+        <Textarea
+          id={field.id}
+          className="min-h-[96px]"
+          value={typeof value === 'string' ? value : ''}
+          disabled={disabled}
+          onChange={(event) => onChange(field.id, event.target.value)}
+        />
+      </div>
+    )
+  }
+
+  if (field.type === 'select') {
+    return (
+      <SelectField
+        field={field}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        options={options}
+        optionsError={optionsError}
+        label={label}
+      />
+    )
+  }
+
+  if (field.type === 'boolean') {
+    return (
+      <label className="flex items-center gap-2 text-sm" data-crud-field-id={field.id}>
+        <Checkbox
+          checked={value === true}
+          disabled={disabled}
+          onCheckedChange={(checked) => onChange(field.id, checked === true)}
+        />
+        <span>{label}</span>
+      </label>
+    )
+  }
+
+  return (
+    <div className="space-y-2" data-crud-field-id={field.id}>
+      <Label htmlFor={field.id}>{label}</Label>
+      <Input
+        id={field.id}
+        type={field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'}
+        value={typeof value === 'string' || typeof value === 'number' ? String(value) : ''}
+        disabled={disabled}
+        onChange={(event) => {
+          if (field.type === 'number') {
+            onChange(field.id, event.target.value === '' ? undefined : Number(event.target.value))
+            return
+          }
+          onChange(field.id, event.target.value)
+        }}
+      />
+    </div>
+  )
+}
+
+export default InjectedField

package/src/backend/injection/InjectionSpot.tsx

@@ -0,0 +1,457 @@
+"use client"
+import * as React from 'react'
+import type {
+  InjectionSpotId,
+  InjectionWidgetModule,
+  WidgetInjectionEventHandlers,
+  WidgetBeforeDeleteResult,
+  WidgetBeforeSaveResult,
+  FieldChangeResult,
+  NavigateGuardResult,
+} from '@open-mercato/shared/modules/widgets/injection'
+import {
+  getInjectionRegistryVersion,
+  loadInjectionWidgetsForSpot,
+  subscribeToInjectionRegistryChanges,
+  type LoadedInjectionWidget,
+} from '@open-mercato/shared/modules/widgets/injection-loader'
+import { getWidgetSharedState } from './WidgetSharedState'
+
+export type InjectionSpotProps<TContext = unknown, TData = unknown> = {
+  spotId: InjectionSpotId
+  context: TContext
+  data?: TData
+  onDataChange?: (data: TData) => void
+  disabled?: boolean
+  onEvent?: (
+    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>
+  moduleId: string
+  key: string
+  placement?: LoadedInjectionWidget['placement']
+}
+
+export type LoadedInjectionSpotWidget = LoadedWidget
+
+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?: {
+    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 [registryVersion, setRegistryVersion] = React.useState(() => getInjectionRegistryVersion())
+  const loadedRef = React.useRef(false)
+
+  React.useEffect(() => {
+    return subscribeToInjectionRegistryChanges(() => {
+      setRegistryVersion(getInjectionRegistryVersion())
+    })
+  }, [])
+
+  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 {
+                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)
+              }
+            }
+          }
+        }
+      } 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, registryVersion])
+
+  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={injectSharedStateIntoContext(context, widget.moduleId)}
+            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[]>([])
+  const [registryVersion, setRegistryVersion] = React.useState(() => getInjectionRegistryVersion())
+
+  React.useEffect(() => {
+    return subscribeToInjectionRegistryChanges(() => {
+      setRegistryVersion(getInjectionRegistryVersion())
+    })
+  }, [])
+
+  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, registryVersion])
+
+  const triggerEvent = React.useCallback(
+    async (
+      event: keyof WidgetInjectionEventHandlers<TContext, TData>,
+      data: TData,
+      context: TContext,
+      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
+      applyToForm?: boolean
+      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 } => {
+        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
+          const requestHeaders =
+            result.requestHeaders && typeof result.requestHeaders === 'object'
+              ? Object.fromEntries(
+                  Object.entries(result.requestHeaders).map(([key, value]) => [key, String(value)]),
+                )
+              : undefined
+          return { ok, message, fieldErrors, requestHeaders, details: result.details }
+        }
+        return { ok: true }
+      }
+
+      const normalizeBeforeDelete = (
+        result: WidgetBeforeDeleteResult,
+      ): { ok: boolean; message?: string; fieldErrors?: Record<string, string>; requestHeaders?: Record<string, string>; details?: unknown } => {
+        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
+          const requestHeaders =
+            result.requestHeaders && typeof result.requestHeaders === 'object'
+              ? Object.fromEntries(
+                  Object.entries(result.requestHeaders).map(([key, value]) => [key, String(value)]),
+                )
+              : undefined
+          return { ok, message, fieldErrors, requestHeaders, details: result.details }
+        }
+        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
+        let applyToForm = false
+        for (const widget of widgets) {
+          const handler = widget.module.eventHandlers?.[event]
+          if (!handler) continue
+          try {
+            const widgetContext = injectSharedStateIntoContext(context, widget.moduleId)
+            let handlerResult: unknown
+            if (event === 'transformValidation') {
+              handlerResult = await (handler as any)(pipelineData, meta?.originalData ?? data, widgetContext)
+            } else {
+              handlerResult = await (handler as any)(pipelineData, widgetContext)
+            }
+            if (
+              event === 'transformFormData' &&
+              handlerResult !== null &&
+              typeof handlerResult === 'object' &&
+              'applyToForm' in handlerResult &&
+              (handlerResult as { applyToForm: unknown }).applyToForm === true &&
+              'data' in handlerResult
+            ) {
+              pipelineData = (handlerResult as { data: TData }).data
+              applyToForm = true
+            } else {
+              pipelineData = handlerResult as TData
+            }
+          } catch (err) {
+            console.error(`[useInjectionSpotEvents] Error in ${event} for widget ${widget.widgetId}:`, err)
+          }
+        }
+        return { ok: true, data: pipelineData, applyToForm }
+      }
+
+      // --- 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
+        // Check operation filter — skip widget if current operation is filtered out
+        const operationFilter = eventHandlers?.filter?.operations
+        if (operationFilter) {
+          const currentOperation = (context as Record<string, unknown>)?.operation as string | undefined
+          if (currentOperation && !operationFilter.includes(currentOperation as 'create' | 'update' | 'delete')) {
+            continue
+          }
+        }
+        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, 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) {
+                console.log(`[useInjectionSpotEvents] Widget ${widget.widgetId} prevented ${event}`)
+                return normalized
+              }
+              if (normalized.requestHeaders && Object.keys(normalized.requestHeaders).length > 0) {
+                Object.assign(mergedRequestHeaders, normalized.requestHeaders)
+                hasRequestHeaders = true
+              }
+            }
+            if (event === 'onBeforeDelete') {
+              const normalized = normalizeBeforeDelete(result as WidgetBeforeDeleteResult)
+              if (!normalized.ok) {
+                console.log(`[useInjectionSpotEvents] Widget ${widget.widgetId} prevented ${event}`)
+                return normalized
+              }
+              if (normalized.requestHeaders && Object.keys(normalized.requestHeaders).length > 0) {
+                Object.assign(mergedRequestHeaders, normalized.requestHeaders)
+                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' || event === 'onBeforeNavigate') {
+              const message =
+                err instanceof Error
+                  ? err.message || 'Validation blocked'
+                  : typeof err === 'string'
+                    ? err
+                    : undefined
+              return { ok: false, message }
+            }
+          }
+        }
+      }
+      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]
+  )
+
+  return { triggerEvent, widgets }
+}