@freighttech/ui 0.13.18

package/src/backend/forms/FormHeader.tsx

@@ -0,0 +1,204 @@
+"use client"
+
+import * as React from 'react'
+import Link from 'next/link'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { Trash2, Loader2 } from 'lucide-react'
+import { Button } from '../../primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { FormActionButtons, type FormActionButtonsProps } from './FormActionButtons'
+import { ActionsDropdown, type ActionItem } from './ActionsDropdown'
+import { InjectionSpot } from '../injection/InjectionSpot'
+
+/** Base props shared by both modes */
+type FormHeaderBaseProps = {
+  /** Back link URL */
+  backHref?: string
+  /** Back link label */
+  backLabel?: string
+}
+
+/** Edit mode: compact header for CrudForm pages */
+export type FormHeaderEditProps = FormHeaderBaseProps & {
+  mode?: 'edit'
+  /** Small title next to the back link */
+  title?: string
+  /** Structured action buttons (Delete/Cancel/Save) */
+  actions?: FormActionButtonsProps
+  /** Custom right-side content (overrides `actions`) */
+  actionsContent?: React.ReactNode
+}
+
+/** Detail mode: large header for view/detail pages */
+export type FormHeaderDetailProps = FormHeaderBaseProps & {
+  mode: 'detail'
+  /** Large title -- string renders as h1; ReactNode for InlineTextEditor */
+  title?: React.ReactNode
+  /** Small uppercase entity type label above the title */
+  entityTypeLabel?: string
+  /** Subtitle text below the title */
+  subtitle?: string
+  /** Status badge or similar element below the title */
+  statusBadge?: React.ReactNode
+  /** Context actions grouped into an "Actions" dropdown (preferred) */
+  menuActions?: ActionItem[]
+  /** Optional label for actions dropdown trigger */
+  menuLabel?: string
+  /** Trigger style for actions dropdown */
+  menuTriggerMode?: 'label' | 'icon'
+  /** Accessible label used when trigger is icon-only */
+  menuAriaLabel?: string
+  /** Optional utility actions (icon-only) displayed before menu actions */
+  utilityActions?: React.ReactNode
+  /** Delete action -- rendered as a standalone destructive button next to the dropdown */
+  onDelete?: () => void
+  /** Delete button label */
+  deleteLabel?: string
+  /** Whether delete is in progress */
+  isDeleting?: boolean
+  /** Fallback: fully custom right-side content (overrides menuActions + onDelete) */
+  actionsContent?: React.ReactNode
+}
+
+export type FormHeaderProps = FormHeaderEditProps | FormHeaderDetailProps
+
+export function FormHeader(props: FormHeaderProps) {
+  const t = useT()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const resolvedBackLabel = props.backLabel ?? t('ui.navigation.back')
+  const injectionContext = React.useMemo(
+    () => ({
+      path: pathname ?? '',
+      query: searchParams?.toString() ?? '',
+    }),
+    [pathname, searchParams],
+  )
+
+  if (props.mode === 'detail') {
+    return (
+      <>
+        <DetailHeader {...props} resolvedBackLabel={resolvedBackLabel} />
+        <InjectionSpot spotId="form-header:detail" context={injectionContext} />
+      </>
+    )
+  }
+
+  return (
+    <>
+      <EditHeader {...props} resolvedBackLabel={resolvedBackLabel} />
+      <InjectionSpot spotId="form-header:edit" context={injectionContext} />
+    </>
+  )
+}
+
+function EditHeader({
+  backHref,
+  resolvedBackLabel,
+  title,
+  actions,
+  actionsContent,
+}: FormHeaderEditProps & { resolvedBackLabel: string }) {
+  return (
+    <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
+      <div className="flex items-center gap-3">
+        {backHref ? (
+          <Link href={backHref} className="text-sm text-muted-foreground hover:text-foreground">
+            &larr; {resolvedBackLabel}
+          </Link>
+        ) : null}
+        {title ? <div className="text-base font-medium">{title}</div> : null}
+      </div>
+      {actionsContent ?? (actions ? <FormActionButtons {...actions} /> : null)}
+    </div>
+  )
+}
+
+function DetailHeader({
+  backHref,
+  resolvedBackLabel,
+  title,
+  entityTypeLabel,
+  subtitle,
+  statusBadge,
+  menuActions,
+  menuLabel,
+  menuTriggerMode,
+  menuAriaLabel,
+  utilityActions,
+  onDelete,
+  deleteLabel,
+  isDeleting,
+  actionsContent,
+}: FormHeaderDetailProps & { resolvedBackLabel: string }) {
+  const t = useT()
+  const resolvedDeleteLabel = deleteLabel ?? t('ui.forms.actions.delete')
+
+  const hasActions = actionsContent || utilityActions || menuActions?.length || onDelete
+
+  return (
+    <div className="flex flex-col gap-2 md:gap-3 md:flex-row md:items-center md:justify-between">
+      <div className="flex flex-wrap items-center gap-2 md:gap-3 min-w-0">
+        {backHref ? (
+          <Link
+            href={backHref}
+            className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground shrink-0"
+          >
+            <span aria-hidden className="mr-1 text-base">&larr;</span>
+            <span className="sr-only">{resolvedBackLabel}</span>
+          </Link>
+        ) : null}
+        <div className="space-y-0.5 md:space-y-1 min-w-0">
+          {entityTypeLabel ? (
+            <p className="text-xs uppercase text-muted-foreground">{entityTypeLabel}</p>
+          ) : null}
+          {title ? (
+            typeof title === 'string' ? (
+              <h1 className="text-lg md:text-2xl font-semibold leading-tight truncate">{title}</h1>
+            ) : (
+              <div className="text-lg md:text-2xl font-semibold leading-tight">{title}</div>
+            )
+          ) : null}
+          {statusBadge}
+          {subtitle ? (
+            <p className="text-xs md:text-sm text-muted-foreground">{subtitle}</p>
+          ) : null}
+        </div>
+      </div>
+      {hasActions ? (
+        <div className="flex flex-wrap items-center gap-2">
+          {actionsContent ? actionsContent : (
+            <>
+              {utilityActions}
+              {menuActions?.length ? (
+                <ActionsDropdown
+                  items={menuActions}
+                  label={menuLabel}
+                  triggerMode={menuTriggerMode}
+                  ariaLabel={menuAriaLabel}
+                />
+              ) : null}
+              {onDelete ? (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={onDelete}
+                  disabled={isDeleting}
+                  className="text-red-600 border-red-200 hover:bg-red-50 rounded"
+                >
+                  {isDeleting ? (
+                    <Loader2 className="size-4 mr-2 animate-spin" />
+                  ) : (
+                    <Trash2 className="size-4 mr-2" />
+                  )}
+                  {resolvedDeleteLabel}
+                </Button>
+              ) : null}
+            </>
+          )}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/backend/forms/index.ts

@@ -0,0 +1,4 @@
+export { FormActionButtons, type FormActionButtonsProps } from './FormActionButtons'
+export { ActionsDropdown, type ActionItem, type ActionsDropdownProps } from './ActionsDropdown'
+export { FormHeader, type FormHeaderProps, type FormHeaderEditProps, type FormHeaderDetailProps } from './FormHeader'
+export { FormFooter, type FormFooterProps } from './FormFooter'

package/src/backend/hooks/useAdvancedFilter.ts

@@ -0,0 +1,77 @@
+"use client"
+import * as React from 'react'
+import type { AdvancedFilterState, FilterCondition, FilterFieldDef } from '@open-mercato/shared/lib/query/advanced-filter'
+import { createEmptyCondition, getDefaultOperator, normalizeAdvancedFilterState } from '@open-mercato/shared/lib/query/advanced-filter'
+
+export type UseAdvancedFilterOptions = {
+  fields: FilterFieldDef[]
+  onChange?: (state: AdvancedFilterState) => void
+}
+
+export function useAdvancedFilter({ fields, onChange }: UseAdvancedFilterOptions) {
+  const [state, setState] = React.useState<AdvancedFilterState>({
+    logic: 'and',
+    conditions: [],
+  })
+
+  const updateState = React.useCallback((next: AdvancedFilterState) => {
+    const normalized = normalizeAdvancedFilterState(next)
+    setState(normalized)
+    onChange?.(normalized)
+  }, [onChange])
+
+  const addCondition = React.useCallback(() => {
+    const newCondition = createEmptyCondition()
+    if (fields.length > 0) {
+      newCondition.field = fields[0].key
+      newCondition.operator = getDefaultOperator(fields[0].type)
+    }
+    updateState({
+      ...state,
+      conditions: [...state.conditions, newCondition],
+    })
+  }, [fields, state, updateState])
+
+  const removeCondition = React.useCallback((conditionId: string) => {
+    updateState({
+      ...state,
+      conditions: state.conditions.filter((c) => c.id !== conditionId),
+    })
+  }, [state, updateState])
+
+  const updateCondition = React.useCallback((conditionId: string, updates: Partial<FilterCondition>) => {
+    updateState({
+      ...state,
+      conditions: state.conditions.map((c) =>
+        c.id === conditionId ? { ...c, ...updates } : c,
+      ),
+    })
+  }, [state, updateState])
+
+  const toggleLogic = React.useCallback(() => {
+    const nextLogic = state.logic === 'and' ? 'or' : 'and'
+    updateState({
+      logic: nextLogic,
+      conditions: state.conditions.map((condition, index) => (
+        index === 0 ? condition : { ...condition, join: nextLogic }
+      )),
+    })
+  }, [state, updateState])
+
+  const clearAll = React.useCallback(() => {
+    updateState({ logic: 'and', conditions: [] })
+  }, [updateState])
+
+  const hasActiveConditions = state.conditions.some((c) => c.field && c.operator)
+
+  return {
+    state,
+    setState: updateState,
+    addCondition,
+    removeCondition,
+    updateCondition,
+    toggleLogic,
+    clearAll,
+    hasActiveConditions,
+  }
+}

package/src/backend/indexes/PartialIndexBanner.tsx

@@ -0,0 +1,86 @@
+"use client"
+import * as React from 'react'
+import Link from 'next/link'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { AlertTriangle, X } from 'lucide-react'
+import { Button } from '../../primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { buildHrefWithReturnTo } from '@open-mercato/shared/lib/navigation/returnTo'
+import { dismissPartialIndexWarning, usePartialIndexWarning } from './store'
+
+export function PartialIndexBanner() {
+  const t = useT()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const warning = usePartialIndexWarning()
+
+  const returnTo = React.useMemo(() => {
+    const query = searchParams?.toString() ?? ''
+    if (!pathname) return null
+    return query.length ? `${pathname}?${query}` : pathname
+  }, [pathname, searchParams])
+  const manageIndexesHref = React.useMemo(
+    () => buildHrefWithReturnTo('/backend/query-indexes', returnTo),
+    [returnTo],
+  )
+
+  if (!warning) return null
+
+  const entityLabel = warning.entityLabel || warning.entity
+  const base = warning.baseCount
+  const indexed = warning.indexedCount
+  const hasCounts = typeof base === 'number' && typeof indexed === 'number'
+  const hasExcessIndexedRows = hasCounts && indexed > base
+
+  return (
+    <div className="mb-4 flex flex-col gap-3 rounded-md border border-amber-300 bg-amber-50 px-3 py-3 text-sm text-amber-900 dark:border-amber-600/60 dark:bg-amber-950/40 dark:text-amber-100 md:flex-row md:items-center md:justify-between">
+      <div className="flex flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium text-amber-950 dark:text-amber-50">
+          <AlertTriangle className="size-4" aria-hidden="true" />
+          <span>{t('query_index.banner.partial_title')}</span>
+        </div>
+        <p className="text-amber-900 dark:text-amber-100">
+          {t('query_index.banner.partial_description')}
+        </p>
+        <p className="text-xs text-amber-900/90 dark:text-amber-100/90">
+          {t('query_index.banner.partial_entity', { entity: entityLabel })}
+        </p>
+        {hasCounts && (
+          <p className="text-xs text-amber-900/90 dark:text-amber-100/90">
+            {hasExcessIndexedRows
+              ? t('query_index.banner.partial_counts_excess', { indexed, total: base })
+              : t('query_index.banner.partial_counts', { indexed, total: base })}
+          </p>
+        )}
+        {warning.scope === 'global' && (
+          <p className="text-xs text-amber-900/80 dark:text-amber-100/75">
+            {t('query_index.banner.partial_global_note')}
+          </p>
+        )}
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button
+          asChild
+          variant="outline"
+          size="sm"
+          className="border-amber-300 text-amber-900 hover:bg-amber-100 dark:border-amber-500/60 dark:text-amber-100 dark:hover:bg-amber-900/60"
+        >
+          <Link href={manageIndexesHref}>
+            {t('query_index.banner.manage_indexes')}
+          </Link>
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          type="button"
+          onClick={() => dismissPartialIndexWarning()}
+          className="text-amber-900 hover:bg-amber-100 dark:text-amber-100 dark:hover:bg-amber-900/60"
+          aria-label={t('query_index.banner.dismiss')}
+        >
+          <X className="mr-1 size-4" aria-hidden="true" />
+          {t('query_index.banner.dismiss')}
+        </Button>
+      </div>
+    </div>
+  )
+}

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/ComponentOverrideProvider.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import { createContext, useContext } from 'react'
+import type { ComponentOverride } from '@open-mercato/shared/modules/widgets/component-registry'
+import { registerComponentOverrides } from '@open-mercato/shared/modules/widgets/component-registry'
+import { apiCall } from '../utils/apiCall'
+
+type FeatureCheckResponse = { granted: string[] }
+
+const OverrideUserFeaturesContext = createContext<readonly string[]>([])
+
+export function useOverrideUserFeatures(): readonly string[] {
+  return useContext(OverrideUserFeaturesContext)
+}
+
+export function ComponentOverrideProvider({
+  overrides,
+  children,
+}: {
+  overrides: ComponentOverride[]
+  children: React.ReactNode
+}) {
+  const [userFeatures, setUserFeatures] = React.useState<readonly string[]>([])
+
+  React.useEffect(() => {
+    registerComponentOverrides(overrides)
+    return () => {
+      registerComponentOverrides([])
+    }
+  }, [overrides])
+
+  React.useEffect(() => {
+    const requiredFeatures = new Set<string>()
+    for (const override of overrides) {
+      for (const feature of override.features ?? []) {
+        if (feature && feature.trim().length > 0) requiredFeatures.add(feature)
+      }
+    }
+    if (requiredFeatures.size === 0) return
+    let cancelled = false
+    const fetchFeatures = async () => {
+      const call = await apiCall<FeatureCheckResponse>('/api/auth/feature-check', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ features: Array.from(requiredFeatures) }),
+      })
+      if (cancelled) return
+      if (call.ok && call.result?.granted) {
+        setUserFeatures(call.result.granted)
+      }
+    }
+    void fetchFeatures()
+    return () => {
+      cancelled = true
+    }
+  }, [overrides])
+
+  return (
+    <OverrideUserFeaturesContext.Provider value={userFeatures}>
+      {children}
+    </OverrideUserFeaturesContext.Provider>
+  )
+}
+
+export default ComponentOverrideProvider