@open-mercato/ui 0.4.2-canary-c02407ff85

package/src/backend/EmptyState.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Plus } from 'lucide-react'
+
+type EmptyStateAction = {
+  label: string
+  onClick?: () => void
+  icon?: React.ReactNode
+  disabled?: boolean
+}
+
+type EmptyStateProps = {
+  title: string
+  description?: string
+  action?: EmptyStateAction
+  actionLabel?: string
+  onAction?: () => void
+  icon?: React.ReactNode
+  className?: string
+  actionLabelClassName?: string
+  children?: React.ReactNode
+}
+
+export function EmptyState({
+  title,
+  description,
+  action,
+  actionLabel,
+  onAction,
+  icon,
+  className,
+  actionLabelClassName,
+  children,
+}: EmptyStateProps) {
+  const resolvedAction = action ?? (actionLabel ? { label: actionLabel, onClick: onAction } : undefined)
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center rounded-lg border border-dashed border-muted-foreground/40 bg-muted/30 px-6 py-10 text-center',
+        className
+      )}
+    >
+      {icon ? <div className="mb-3 text-muted-foreground">{icon}</div> : null}
+      <p className="text-sm font-medium text-foreground">{title}</p>
+      {description ? <p className="mt-2 text-sm text-muted-foreground">{description}</p> : null}
+      {children}
+      {resolvedAction ? (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={resolvedAction.onClick}
+          className={cn('mt-4 inline-flex items-center gap-2 text-foreground', actionLabelClassName)}
+          disabled={resolvedAction.disabled}
+        >
+          {(resolvedAction.icon ?? <Plus className="h-4 w-4" aria-hidden />)}
+          <span>{resolvedAction.label}</span>
+        </Button>
+      ) : null}
+    </div>
+  )
+}

package/src/backend/FilterBar.tsx

@@ -0,0 +1,161 @@
+"use client"
+import * as React from 'react'
+import { Button } from '../primitives/button'
+import { FilterDef, FilterOverlay, FilterValues } from './FilterOverlay'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type FilterBarProps = {
+  searchValue?: string
+  onSearchChange?: (v: string) => void
+  searchPlaceholder?: string
+  searchAlign?: 'left' | 'right'
+  filters?: FilterDef[]
+  values?: FilterValues
+  onApply?: (values: FilterValues) => void
+  onClear?: () => void
+  className?: string
+  leadingItems?: React.ReactNode
+  layout?: 'stacked' | 'inline'
+  filtersExtraContent?: React.ReactNode
+}
+
+export function FilterBar({
+  searchValue,
+  onSearchChange,
+  searchPlaceholder,
+  searchAlign = 'left',
+  filters = [],
+  values = {},
+  onApply,
+  onClear,
+  className,
+  leadingItems,
+  layout = 'stacked',
+  filtersExtraContent,
+}: FilterBarProps) {
+  const t = useT()
+  const resolvedSearchPlaceholder = searchPlaceholder ?? t('ui.filterBar.searchPlaceholder', 'Search')
+  const [open, setOpen] = React.useState(false)
+  const [searchDraft, setSearchDraft] = React.useState(searchValue ?? '')
+  const lastAppliedSearchRef = React.useRef(searchValue ?? '')
+
+  React.useEffect(() => {
+    const next = searchValue ?? ''
+    lastAppliedSearchRef.current = next
+    setSearchDraft((prev) => (prev === next ? prev : next))
+  }, [searchValue])
+
+  React.useEffect(() => {
+    if (!onSearchChange) return
+    const handle = window.setTimeout(() => {
+      if (lastAppliedSearchRef.current === searchDraft) return
+      lastAppliedSearchRef.current = searchDraft
+      onSearchChange(searchDraft)
+    }, 1000)
+    return () => {
+      window.clearTimeout(handle)
+    }
+  }, [searchDraft, onSearchChange])
+
+  const activeCount = React.useMemo(() => {
+    const isActive = (v: any) => {
+      if (v == null) return false
+      if (typeof v === 'string') return v.trim() !== ''
+      if (Array.isArray(v)) return v.length > 0
+      if (typeof v === 'object') return Object.values(v).some((x) => x != null && x !== '')
+      return Boolean(v)
+    }
+    return Object.values(values).filter(isActive).length
+  }, [values])
+
+  const containerClass = `flex flex-col ${layout === 'inline' ? 'gap-1 sm:gap-2' : 'gap-2'} w-full`
+
+  return (
+    <div className={`${containerClass} ${className ?? ''}`}>
+      <div className="flex flex-wrap items-center gap-2 w-full">
+        {filters.length > 0 && (
+          <Button variant="outline" className="h-9" onClick={() => setOpen(true)}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true" className="opacity-80"><path d="M3 4h18"/><path d="M6 8h12l-3 8H9L6 8z"/></svg>
+            {activeCount 
+              ? t('ui.filterBar.filtersWithCount', 'Filters {count}', { count: activeCount })
+              : t('ui.filterBar.filters', 'Filters')
+            }
+          </Button>
+        )}
+        {leadingItems}
+        {onSearchChange && (
+          <div className={`relative w-full sm:w-[240px] ${searchAlign === 'right' ? 'ml-auto' : ''}`}>
+            <input
+              value={searchDraft}
+              onChange={(e) => setSearchDraft(e.target.value)}
+              placeholder={resolvedSearchPlaceholder}
+              className="h-9 w-full rounded border pl-8 pr-2 text-sm"
+              suppressHydrationWarning
+            />
+            <span className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground">🔍</span>
+          </div>
+        )}
+      </div>
+      {/* Active filter chips */}
+      {filters.length > 0 && activeCount > 0 && (
+        <div className="flex flex-wrap items-center gap-1">
+          {filters.map((f) => {
+            const v = (values as any)[f.id]
+            if (v == null || v === '' || (Array.isArray(v) && v.length === 0)) return null
+            const toLabel = (val: any) => {
+              if (typeof f.formatValue === 'function' && (typeof val === 'string' || typeof val === 'number')) {
+                const formatted = f.formatValue(String(val))
+                if (formatted) return formatted
+              }
+              if (f.type === 'select' && f.options) {
+                const o = f.options.find((o) => o.value === val)
+                return o ? o.label : String(val)
+              }
+              if (typeof val === 'object' && val.from == null && val.to == null) return null
+              if (typeof val === 'object') {
+                const from = val.from ?? ''
+                const to = val.to ? ` → ${val.to}` : ''
+                return `${from}${to}`.trim()
+              }
+              if (val === true) return t('common.yes', 'Yes')
+              if (val === false) return t('common.no', 'No')
+              return String(val)
+            }
+            const removeValue = (val?: any) => {
+              const next = { ...(values || {}) }
+              if (Array.isArray(v) && val !== undefined) next[f.id] = v.filter((x: any) => x !== val)
+              else delete (next as any)[f.id]
+              onApply?.(next)
+            }
+            if (Array.isArray(v)) {
+              return v.map((item) => (
+                <Button key={`${f.id}:${item}`} size="sm" variant="outline" onClick={() => removeValue(item)}>
+                  {f.label}: {toLabel(item)} ×
+                </Button>
+              ))
+            }
+            const label = toLabel(v)
+            if (!label) return null
+            return (
+              <Button key={f.id} size="sm" variant="outline" onClick={() => removeValue()}>
+                {f.label}: {label} ×
+              </Button>
+            )
+          })}
+        </div>
+      )}
+      <FilterOverlay
+        title={t('ui.filterOverlay.title', 'Filters')}
+        filters={filters}
+        initialValues={values}
+        open={open}
+        onOpenChange={setOpen}
+        onApply={(v) => onApply?.(v)}
+        onClear={onClear}
+        extraContent={filtersExtraContent}
+      />
+    </div>
+  )
+}
+
+export type { FilterDef, FilterValues } from './FilterOverlay'

package/src/backend/FilterOverlay.tsx

@@ -0,0 +1,328 @@
+"use client"
+import * as React from 'react'
+import { Button } from '../primitives/button'
+import { TagsInput, type TagsInputOption } from './inputs/TagsInput'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type FilterOption = { value: string; label: string; description?: string | null }
+
+export type FilterDef = {
+  id: string
+  label: string
+  type: 'text' | 'select' | 'checkbox' | 'dateRange' | 'tags'
+  options?: FilterOption[]
+  // Optional async loader for options (used by select/tags)
+  loadOptions?: (query?: string) => Promise<FilterOption[]>
+  multiple?: boolean
+  placeholder?: string
+  group?: string
+  formatValue?: (value: string) => string
+  formatDescription?: (value: string) => string | null | undefined
+}
+
+export type FilterValues = Record<string, any>
+
+export type FilterOverlayProps = {
+  title?: string
+  filters: FilterDef[]
+  initialValues: FilterValues
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onApply: (values: FilterValues) => void
+  onClear?: () => void
+  extraContent?: React.ReactNode
+}
+
+const EMPTY_FILTER_VALUES: FilterValues = {}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return value != null && typeof value === 'object' && !Array.isArray(value)
+}
+
+function normalizeKeys(source: FilterValues | null | undefined): string[] {
+  if (!source) return []
+  return Object.keys(source).filter((key) => source[key] !== undefined)
+}
+
+function areFieldValuesEqual(a: any, b: any): boolean {
+  if (a === b) return true
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false
+    for (let i = 0; i < a.length; i += 1) {
+      if (!areFieldValuesEqual(a[i], b[i])) return false
+    }
+    return true
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const keysA = normalizeKeys(a as FilterValues)
+    const keysB = normalizeKeys(b as FilterValues)
+    if (keysA.length !== keysB.length) return false
+    for (const key of keysA) {
+      if (!keysB.includes(key)) return false
+      if (!areFieldValuesEqual((a as FilterValues)[key], (b as FilterValues)[key])) return false
+    }
+    return true
+  }
+  return false
+}
+
+function areFilterValuesEqual(a?: FilterValues | null, b?: FilterValues | null): boolean {
+  if (a === b) return true
+  const keysA = normalizeKeys(a || EMPTY_FILTER_VALUES)
+  const keysB = normalizeKeys(b || EMPTY_FILTER_VALUES)
+  if (keysA.length !== keysB.length) return false
+  for (const key of keysA) {
+    if (!keysB.includes(key)) return false
+    if (!areFieldValuesEqual(a?.[key], b?.[key])) return false
+  }
+  return true
+}
+
+export function FilterOverlay({
+  title,
+  filters,
+  initialValues,
+  open,
+  onOpenChange,
+  onApply,
+  onClear,
+  extraContent,
+}: FilterOverlayProps) {
+  const t = useT()
+  const defaultTitle = title ?? t('ui.filters.title', 'Filters')
+  const [values, setValues] = React.useState<FilterValues>(initialValues)
+  React.useEffect(() => {
+    setValues((prev) => (areFilterValuesEqual(prev, initialValues) ? prev : initialValues))
+  }, [initialValues])
+  const filtersSignature = React.useMemo(
+    () => filters.map((f) => `${f.id}:${f.type}:${Boolean((f as any).loadOptions)}:${(f.options || []).length}`).join('|'),
+    [filters]
+  )
+  const lastLoadedSignatureRef = React.useRef<string | null>(null)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stableFilters = React.useMemo(() => filters, [filtersSignature])
+
+  // Load dynamic options for filters that request it
+  const [dynamicOptions, setDynamicOptions] = React.useState<Record<string, FilterOption[]>>({})
+  React.useEffect(() => {
+    if (!open) return
+    if (lastLoadedSignatureRef.current === filtersSignature) return
+    lastLoadedSignatureRef.current = filtersSignature
+    setDynamicOptions({})
+    let cancelled = false
+    const loadAll = async () => {
+      const loaders = filters
+        .filter((f): f is FilterDef & { loadOptions: (query?: string) => Promise<FilterOption[]> } => (f as any).loadOptions != null)
+        .map(async (f) => {
+          try {
+            const opts = await (f as any).loadOptions()
+            if (!cancelled) setDynamicOptions((prev) => ({ ...prev, [f.id]: opts }))
+          } catch {
+            // ignore
+          }
+        })
+      await Promise.all(loaders)
+    }
+    loadAll()
+    return () => {
+      cancelled = true
+    }
+  }, [filters, filtersSignature, open])
+  React.useEffect(() => {
+    if (!open) {
+      lastLoadedSignatureRef.current = null
+    }
+  }, [open])
+
+  const setValue = (id: string, v: any) => setValues((prev) => ({ ...prev, [id]: v }))
+
+  const handleApply = () => {
+    onApply(values)
+    onOpenChange(false)
+  }
+
+  const handleClear = () => {
+    setValues({})
+    onClear?.()
+  }
+
+  const tagLoaders = React.useMemo(() => {
+    const map = new Map<string, (q?: string) => Promise<Array<string | TagsInputOption>>>()
+    for (const f of stableFilters) {
+      if (f.type === 'tags' && typeof f.loadOptions === 'function') {
+        const fieldId = f.id
+        const load = f.loadOptions as (query?: string) => Promise<FilterOption[]>
+        map.set(fieldId, async (q?: string) => {
+          const query = (q ?? '').trim()
+          if (!query.length) return []
+          try {
+            const opts = await load(query)
+            setDynamicOptions((prev) => ({ ...prev, [fieldId]: opts }))
+            return opts.map((o) => ({ value: o.value, label: o.label, description: o.description ?? null }))
+          } catch {
+            return []
+          }
+        })
+      }
+    }
+    return map
+  }, [stableFilters])
+
+  return (
+    <>
+      {open && (
+        <div className="fixed inset-0 z-50">
+          <div className="absolute inset-0 bg-black/30" onClick={() => onOpenChange(false)} />
+          <div className="absolute left-0 top-0 h-full w-full sm:w-[380px] bg-background shadow-xl border-r flex flex-col">
+            <div className="flex items-center justify-between p-4 border-b">
+              <h2 className="text-base font-semibold">{defaultTitle}</h2>
+              <button className="text-sm text-muted-foreground" onClick={() => onOpenChange(false)}>{t('common.close')}</button>
+            </div>
+            {/* Top actions: duplicate Clear/Apply */}
+            <div className="px-4 py-2 border-b flex items-center justify-between gap-2">
+              <Button variant="outline" size="sm" onClick={handleClear}>{t('ui.filters.actions.clear', 'Clear')}</Button>
+              <Button size="sm" onClick={handleApply} className="inline-flex items-center gap-2">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true" className="opacity-80"><path d="M3 4h18"/><path d="M6 8h12l-3 8H9L6 8z"/></svg>
+                {t('ui.filters.actions.apply', 'Apply')}
+              </Button>
+            </div>
+            <div className="flex-1 overflow-auto p-4 space-y-4">
+              {extraContent ? <div className="space-y-2 rounded-md border bg-muted/30 p-3">{extraContent}</div> : null}
+              {filters.map((f) => (
+                <div key={f.id} className="space-y-2">
+                  <div className="text-sm font-medium">{f.label}</div>
+                  {f.type === 'text' && (
+                    <input
+                      type="text"
+                      className="w-full h-9 rounded border px-2 text-sm"
+                      placeholder={f.placeholder}
+                      value={values[f.id] ?? ''}
+                      onChange={(e) => setValue(f.id, e.target.value || undefined)}
+                    />
+                  )}
+                  {f.type === 'dateRange' && (
+                    <div className="grid grid-cols-1 gap-2">
+                      <div>
+                        <div className="text-xs text-muted-foreground mb-1">{t('ui.filters.dateRange.from', 'From')}</div>
+                        <input
+                          type="date"
+                          className="w-full h-9 rounded border px-2 text-sm"
+                          value={values[f.id]?.from ?? ''}
+                          onChange={(e) => setValue(f.id, { ...(values[f.id] ?? {}), from: e.target.value || undefined })}
+                        />
+                      </div>
+                      <div>
+                        <div className="text-xs text-muted-foreground mb-1">{t('ui.filters.dateRange.to', 'To')}</div>
+                        <input
+                          type="date"
+                          className="w-full h-9 rounded border px-2 text-sm"
+                          value={values[f.id]?.to ?? ''}
+                          onChange={(e) => setValue(f.id, { ...(values[f.id] ?? {}), to: e.target.value || undefined })}
+                        />
+                      </div>
+                    </div>
+                  )}
+                  {f.type === 'select' && (
+                    <div className="space-y-1">
+                      {f.multiple ? (
+                        <div className="flex flex-col gap-1">
+                          {(f.options || dynamicOptions[f.id] || []).map((opt) => {
+                            const arr: string[] = Array.isArray(values[f.id]) ? values[f.id] : []
+                            const checked = arr.includes(opt.value)
+                            return (
+                              <label key={opt.value} className="inline-flex items-center gap-2">
+                                <input
+                                  type="checkbox"
+                                  checked={checked}
+                                  onChange={(e) => {
+                                    const next = new Set(arr)
+                                    if (e.target.checked) next.add(opt.value)
+                                    else next.delete(opt.value)
+                                    setValue(f.id, Array.from(next))
+                                  }}
+                                />
+                                <span className="text-sm">{opt.label}</span>
+                              </label>
+                            )
+                          })}
+                        </div>
+                      ) : (
+                        <select
+                          className="w-full h-9 rounded border px-2 text-sm"
+                          value={values[f.id] ?? ''}
+                          onChange={(e) => setValue(f.id, e.target.value || undefined)}
+                        >
+                          <option value="">{t('ui.forms.select.emptyOption', '—')}</option>
+                          {(f.options || dynamicOptions[f.id] || []).map((opt) => (
+                            <option key={opt.value} value={opt.value}>{opt.label}</option>
+                          ))}
+                        </select>
+                      )}
+                    </div>
+                  )}
+                  {f.type === 'tags' && (() => {
+                    const arr: string[] = Array.isArray(values[f.id]) ? values[f.id] : []
+                    const staticOptions = f.options || []
+                    const dynamic = dynamicOptions[f.id] || []
+                    const optionMap = new Map<string, FilterOption>()
+                    staticOptions.forEach((opt) => optionMap.set(opt.value, opt))
+                    dynamic.forEach((opt) => optionMap.set(opt.value, opt))
+                    const loadSuggestions = tagLoaders.get(f.id)
+                    const resolveTagLabel = f.formatValue
+                      ? (val: string) => f.formatValue!(val)
+                      : (val: string) => optionMap.get(val)?.label ?? val
+                    const resolveTagDescription = f.formatDescription
+                      ? (val: string) => f.formatDescription!(val) ?? null
+                      : (val: string) => optionMap.get(val)?.description ?? null
+                    const suggestionList: TagsInputOption[] = Array.from(optionMap.values()).map((opt) => ({
+                      value: opt.value,
+                      label: opt.label,
+                      description: opt.description ?? null,
+                    }))
+                    return (
+                      <TagsInput
+                        value={arr}
+                        suggestions={suggestionList}
+                        loadSuggestions={loadSuggestions}
+                        allowCustomValues={false}
+                        resolveLabel={resolveTagLabel}
+                        resolveDescription={resolveTagDescription}
+                        placeholder={f.placeholder}
+                        onChange={(next) => setValue(f.id, next.length ? next : undefined)}
+                      />
+                    )
+                  })()}
+                  {f.type === 'checkbox' && (
+                    <div>
+                      <select
+                        className="w-full h-9 rounded border px-2 text-sm"
+                        value={values[f.id] === true ? 'true' : values[f.id] === false ? 'false' : ''}
+                        onChange={(e) => {
+                          const v = e.target.value
+                          if (v === '') setValue(f.id, undefined)
+                          else if (v === 'true') setValue(f.id, true)
+                          else if (v === 'false') setValue(f.id, false)
+                        }}
+                      >
+                        <option value="">{t('ui.forms.select.emptyOption', '—')}</option>
+                        <option value="true">{t('common.yes', 'Yes')}</option>
+                        <option value="false">{t('common.no', 'No')}</option>
+                      </select>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+            <div className="p-4 border-t flex items-center justify-between gap-2">
+              <Button variant="outline" onClick={handleClear}>Clear</Button>
+              <Button onClick={handleApply} className="inline-flex items-center gap-2">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true" className="opacity-80"><path d="M3 4h18"/><path d="M6 8h12l-3 8H9L6 8z"/></svg>
+                Apply
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

package/src/backend/FlashMessages.tsx

@@ -0,0 +1,82 @@
+"use client"
+import * as React from 'react'
+import { usePathname, useSearchParams } from 'next/navigation'
+
+export type FlashKind = 'success' | 'error' | 'warning' | 'info'
+
+// Programmatic API to show a flash message without navigation.
+// Consumers can import { flash } and call flash('text', 'error').
+export function flash(message: string, type: FlashKind = 'info') {
+  if (typeof window === 'undefined') return
+  const evt = new CustomEvent('flash', { detail: { message, type } })
+  window.dispatchEvent(evt)
+}
+
+function FlashMessagesInner() {
+  const [msg, setMsg] = React.useState<string | null>(null)
+  const [kind, setKind] = React.useState<FlashKind>('info')
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  // Read flash from URL on any navigation change (client-side too)
+  React.useEffect(() => {
+    if (!searchParams) return
+    const m = searchParams.get('flash')
+    const t = (searchParams.get('type') as FlashKind | null) || 'success'
+    if (m) {
+      setMsg(m)
+      setKind(t)
+      const url = new URL(window.location.href)
+      url.searchParams.delete('flash')
+      url.searchParams.delete('type')
+      window.history.replaceState({}, '', url.toString())
+      const timer = setTimeout(() => setMsg(null), 3000)
+      return () => clearTimeout(timer)
+    }
+  }, [pathname, searchParams])
+
+  // Listen for programmatic flash events
+  React.useEffect(() => {
+    const handler = (e: Event) => {
+      const ce = e as CustomEvent<{ message?: string; type?: FlashKind }>
+      const text = ce.detail?.message
+      const t = ce.detail?.type || 'info'
+      if (!text) return
+      setMsg(text)
+      setKind(t)
+      const timer = setTimeout(() => setMsg(null), 3000)
+      return () => clearTimeout(timer)
+    }
+    window.addEventListener('flash', handler as EventListener)
+    return () => window.removeEventListener('flash', handler as EventListener)
+  }, [])
+
+  if (!msg) return null
+
+  const color = kind === 'success' ? 'bg-emerald-600' : kind === 'error' ? 'bg-red-600' : kind === 'warning' ? 'bg-amber-500' : 'bg-blue-600'
+
+  return (
+    <div className="pointer-events-none fixed left-3 right-3 top-3 z-[1200] sm:left-auto sm:right-4 sm:w-[380px]">
+      <div className={`pointer-events-auto rounded px-3 py-2 text-white shadow-md ${color}`}>
+        <div className="flex items-center justify-between gap-2">
+          <div className="text-sm">{msg}</div>
+          <button
+            type="button"
+            className="text-sm text-white/90 transition hover:text-white"
+            onClick={() => setMsg(null)}
+          >
+            ×
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function FlashMessages() {
+  return (
+    <React.Suspense fallback={null}>
+      <FlashMessagesInner />
+    </React.Suspense>
+  )
+}