@open-mercato/ui 0.4.2-canary-c02407ff85

package/src/backend/utils/nav.ts

@@ -0,0 +1,238 @@
+import type { ReactNode } from 'react'
+import React from 'react'
+
+export type AdminNavItem = {
+  group: string
+  groupId: string
+  groupKey?: string
+  groupDefaultName: string
+  title: string
+  defaultTitle: string
+  titleKey?: string
+  href: string
+  enabled: boolean
+  hidden?: boolean
+  order?: number
+  priority?: number
+  icon?: ReactNode
+  children?: AdminNavItem[]
+}
+
+export type AdminNavFeatureChecker = (features: string[]) => Promise<Iterable<string> | null | undefined>
+
+export type BuildAdminNavOptions = {
+  checkFeatures?: AdminNavFeatureChecker
+}
+
+/**
+ * @deprecated The internal fetch-based feature check will be removed.
+ *             Provide `options.checkFeatures` so buildAdminNav can reuse your RBAC context.
+ */
+async function fetchFeatureGrants(requestFeatures: string[]): Promise<Set<string>> {
+  const granted = new Set<string>()
+  if (!requestFeatures.length) return granted
+  let url = '/api/auth/feature-check'
+  let headersInit: Record<string, string> | undefined
+  if (typeof window === 'undefined') {
+    // On the server, build absolute URL and forward cookies so auth is available
+    try {
+      const { headers: getHeaders } = await import('next/headers')
+      const h = await getHeaders()
+      const host = h.get('x-forwarded-host') || h.get('host') || ''
+      const proto = h.get('x-forwarded-proto') || 'http'
+      const cookie = h.get('cookie') || ''
+      if (host) url = `${proto}://${host}/api/auth/feature-check`
+      headersInit = { cookie }
+    } catch {
+      // ignore; fall back to relative URL without forwarded cookies
+    }
+  }
+  try {
+    const res = await fetch(url, {
+      method: 'POST',
+      credentials: 'include' as any,
+      headers: { 'content-type': 'application/json', ...(headersInit || {}) },
+      body: JSON.stringify({ features: requestFeatures }),
+    } as any)
+    if (res.ok) {
+      const data = await res.json().catch(() => ({ granted: [] }))
+      if (Array.isArray(data?.granted)) {
+        data.granted.forEach((f: string) => granted.add(f))
+      }
+    }
+  } catch {
+    // ignore fetch failures and keep feature set empty
+  }
+  return granted
+}
+
+export async function buildAdminNav(
+  modules: any[],
+  ctx: { auth?: { roles?: string[]; sub?: string; orgId?: string | null; tenantId?: string | null }; path?: string },
+  userEntities?: Array<{ entityId: string; label: string; href: string }>,
+  translate?: (key: string | undefined, fallback: string) => string,
+  options?: BuildAdminNavOptions
+): Promise<AdminNavItem[]> {
+  function capitalize(s: string) {
+    return s.charAt(0).toUpperCase() + s.slice(1)
+  }
+  function deriveTitleFromPath(p: string) {
+    const seg = p.split('/').filter(Boolean).pop() || ''
+    return seg ? seg.split('-').map(capitalize).join(' ') : 'Home'
+  }
+  const entries: AdminNavItem[] = []
+
+  // Collect all unique features needed across all routes first
+  const allRequiredFeatures = new Set<string>()
+  for (const m of modules) {
+    for (const r of m.backendRoutes ?? []) {
+      const features = (r as any).requireFeatures as string[] | undefined
+      if (features && features.length) {
+        features.forEach(f => allRequiredFeatures.add(f))
+      }
+    }
+  }
+
+  // Batch check all features in a single API call
+	  let userFeatures = new Set<string>()
+	  if (allRequiredFeatures.size > 0) {
+	    const requestFeatures = Array.from(allRequiredFeatures)
+	    if (options?.checkFeatures) {
+	      try {
+	        const resolved = await options.checkFeatures(requestFeatures)
+	        if (resolved) {
+	          userFeatures = new Set(resolved)
+	        }
+	      } catch {
+	        // ignore and fall back to empty feature set
+	      }
+	    } else {
+	      userFeatures = await fetchFeatureGrants(requestFeatures)
+	    }
+	  }
+
+  // Helper: check if user has all required features (from cache)
+  function hasAllFeatures(required: string[]): boolean {
+    if (!required || required.length === 0) return true
+    return required.every(f => userFeatures.has(f))
+  }
+
+  // Icons are defined per-page in metadata; no heuristic derivation here.
+  for (const m of modules) {
+    const groupDefault = capitalize(m.id)
+    for (const r of m.backendRoutes ?? []) {
+      const href = (r.pattern ?? r.path ?? '') as string
+      if (!href || href.includes('[')) continue
+      if ((r as any).navHidden) continue
+      const title = (r.title as string) || deriveTitleFromPath(href)
+      const titleKey = (r as any).pageTitleKey ?? (r as any).titleKey
+      const group = (r.group as string) || groupDefault
+      const groupKey = (r as any).pageGroupKey ?? (r as any).groupKey
+      const groupId = (groupKey as string | undefined) ?? group
+      const displayGroup = translate ? translate(groupKey, group) : group
+      const displayTitle = translate ? translate(titleKey, title) : title
+      const visible = r.visible ? await Promise.resolve(r.visible(ctx)) : true
+      if (!visible) continue
+      const enabled = r.enabled ? await Promise.resolve(r.enabled(ctx)) : true
+      // If roles are required, check; otherwise include
+      const required = (r.requireRoles as string[]) || []
+      if (required.length) {
+        const roles = ctx.auth?.roles || []
+        const ok = required.some((role) => roles.includes(role))
+        if (!ok) continue
+      }
+      // If features are required, check from cached batch result
+      const features = (r as any).requireFeatures as string[] | undefined
+      if (features && features.length) {
+        const ok = hasAllFeatures(features)
+        if (!ok) continue
+      }
+      const order = (r as any).order as number | undefined
+      const priority = ((r as any).priority as number | undefined) ?? order
+      let icon = (r as any).icon as ReactNode | undefined
+      entries.push({
+        group: displayGroup,
+        groupId,
+        groupKey,
+        groupDefaultName: displayGroup,
+        title: displayTitle,
+        defaultTitle: displayTitle,
+        titleKey,
+        href,
+        enabled,
+        order,
+        priority,
+        icon,
+      })
+    }
+  }
+  // Build hierarchy: treat routes whose href starts with a parent href + '/'
+  const byHref = new Map<string, AdminNavItem>()
+  for (const e of entries) byHref.set(e.href, e)
+  const roots: AdminNavItem[] = []
+  for (const e of entries) {
+    // Find the longest parent href that is a strict prefix and within same group
+    let parent: AdminNavItem | undefined
+    for (const p of entries) {
+      if (p === e) continue
+      if (p.groupId !== e.groupId) continue
+      if (!e.href.startsWith(p.href + '/')) continue
+      if (!parent || p.href.length > parent.href.length) parent = p
+    }
+    if (parent) {
+      parent.children = parent.children || []
+      parent.children.push(e)
+    } else {
+      roots.push(e)
+    }
+  }
+
+  // Add dynamic user entities to the navigation
+  if (userEntities && userEntities.length > 0) {
+    const tableIcon = React.createElement(
+      'svg',
+      { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2 },
+      React.createElement('rect', { x: 3, y: 4, width: 18, height: 16, rx: 2 }),
+      React.createElement('path', { d: 'M3 10h18M9 4v16M15 4v16' }),
+    )
+    // Find the "User Entities" item in the Data designer group (it should be a root item)
+    const userEntitiesItem = roots.find(item => item.groupKey === 'entities.nav.group' && item.titleKey === 'entities.nav.userEntities')
+    if (userEntitiesItem) {
+      const existingChildren = userEntitiesItem.children || []
+      const dynamicUserEntities = userEntities.map((entity) => ({
+        group: userEntitiesItem.group,
+        groupId: userEntitiesItem.groupId,
+        groupKey: userEntitiesItem.groupKey,
+        groupDefaultName: userEntitiesItem.groupDefaultName,
+        title: entity.label,
+        defaultTitle: entity.label,
+        href: entity.href,
+        enabled: true,
+        order: 1000, // High order to appear at the end
+        priority: 1000,
+        icon: tableIcon,
+      }))
+      // Merge and deduplicate by href to avoid duplicates coming from server or generator
+      const merged = [...existingChildren, ...dynamicUserEntities]
+      const byHref = new Map<string, AdminNavItem>()
+      for (const it of merged) {
+        if (!byHref.has(it.href)) byHref.set(it.href, it)
+      }
+      userEntitiesItem.children = Array.from(byHref.values())
+    }
+  }
+
+  // Sorting: group, then priority/order, then title. Apply within children too.
+  const sortItems = (arr: AdminNavItem[]) => {
+    arr.sort((a, b) => {
+      if (a.groupId !== b.groupId) return a.groupId.localeCompare(b.groupId)
+      const ap = a.priority ?? a.order ?? 10_000
+      const bp = b.priority ?? b.order ?? 10_000
+      if (ap !== bp) return ap - bp
+      return a.title.localeCompare(b.title)
+    })
+    for (const it of arr) if (it.children?.length) sortItems(it.children)
+  }
+  sortItems(roots)
+  return roots
+}

package/src/backend/utils/serverErrors.ts

@@ -0,0 +1,302 @@
+export type CrudServerFieldErrors = Record<string, string>
+
+export type NormalizedCrudServerError = {
+  message?: string
+  fieldErrors?: CrudServerFieldErrors
+  details?: unknown
+  status?: number
+  raw?: string | null
+  [key: string]: unknown
+}
+
+const JSON_FIELD_KEYS = ['fieldErrors', 'fields', 'errors', 'data'] as const
+const ISSUE_KEYS = ['details', 'issues', 'errors'] as const
+
+function coerceFieldErrors(input: unknown): CrudServerFieldErrors | null {
+  if (!input || typeof input !== 'object') return null
+  const result: CrudServerFieldErrors = {}
+  for (const [rawKey, rawValue] of Object.entries(input as Record<string, unknown>)) {
+    const key = typeof rawKey === 'string' && rawKey.trim().length > 0 ? rawKey.trim() : null
+    if (!key) continue
+    if (rawValue === undefined || rawValue === null) continue
+    const message =
+      typeof rawValue === 'string'
+        ? rawValue
+        : typeof (rawValue as any)?.message === 'string'
+          ? (rawValue as any).message
+          : String(rawValue)
+    if (!message) continue
+    result[key] = message
+  }
+  return Object.keys(result).length ? result : null
+}
+
+function mapIssueArray(issues: unknown): CrudServerFieldErrors | null {
+  if (!Array.isArray(issues)) return null
+  const result: CrudServerFieldErrors = {}
+  for (const issue of issues) {
+    if (!issue || typeof issue !== 'object') continue
+    const pathValue: unknown[] = Array.isArray((issue as any).path) ? (issue as any).path : []
+    let field: string | null = null
+    for (const part of pathValue) {
+      if (typeof part === 'string' && part.trim().length > 0) {
+        field = part.trim()
+        break
+      }
+    }
+    if (!field && typeof (issue as any).field === 'string') {
+      const fromField = ((issue as any).field as string).trim()
+      field = fromField.length > 0 ? fromField : null
+    }
+    if (!field && pathValue.length > 0) {
+      const joined = pathValue.map((part) => String(part)).join('.')
+      if (joined) field = joined
+    }
+    if (!field) continue
+    const message = typeof (issue as any).message === 'string' ? (issue as any).message : null
+    if (!message) continue
+    result[field] = message
+  }
+  return Object.keys(result).length ? result : null
+}
+
+function tryParseJson(text: string): unknown {
+  try {
+    return JSON.parse(text)
+  } catch {
+    return null
+  }
+}
+
+function collectCandidatePayloads(err: unknown): unknown[] {
+  const candidates: unknown[] = []
+  if (!err) return candidates
+  candidates.push(err)
+
+  if (typeof err === 'string') {
+    const parsed = tryParseJson(err)
+    if (parsed) candidates.push(parsed)
+  } else if (err instanceof Error) {
+    if (typeof err.message === 'string' && err.message.trim()) {
+      const parsed = tryParseJson(err.message.trim())
+      if (parsed) candidates.push(parsed)
+    }
+    if ((err as any).cause) {
+      candidates.push((err as any).cause)
+    }
+  } else if (typeof err === 'object') {
+    const maybeMessage = (err as any)?.message
+    if (typeof maybeMessage === 'string') {
+      const parsed = tryParseJson(maybeMessage)
+      if (parsed) candidates.push(parsed)
+    }
+    if ((err as any)?.body) candidates.push((err as any).body)
+    if ((err as any)?.response) candidates.push((err as any).response)
+    if ((err as any)?.data) candidates.push((err as any).data)
+  }
+
+  return candidates
+}
+
+export function normalizeCrudServerError(err: unknown): NormalizedCrudServerError {
+  let message: string | undefined
+  let fieldErrors: CrudServerFieldErrors | undefined
+  const processed = new Set<unknown>()
+
+  const queue = collectCandidatePayloads(err)
+  while (queue.length) {
+    const current = queue.shift()
+    if (!current || processed.has(current)) continue
+    processed.add(current)
+
+    if (typeof current === 'string') {
+      if (!message) message = current
+      const parsed = tryParseJson(current)
+      if (parsed) queue.push(parsed)
+      continue
+    }
+
+    if (current instanceof Response) {
+      const body = (current as any)?._bodyInit
+      if (body) queue.push(body)
+      continue
+    }
+
+    if (typeof current !== 'object') continue
+
+    const candidateMessage =
+      typeof (current as any).error === 'string'
+        ? (current as any).error
+        : typeof (current as any).message === 'string'
+          ? (current as any).message
+          : undefined
+    if (candidateMessage && !message) message = candidateMessage
+
+    for (const key of JSON_FIELD_KEYS) {
+      const value = (current as any)[key]
+      if (value && typeof value === 'object') {
+        const mapped = coerceFieldErrors(value)
+        if (mapped) {
+          fieldErrors = { ...(fieldErrors || {}), ...mapped }
+        }
+      }
+    }
+
+    for (const key of ISSUE_KEYS) {
+      const value = (current as any)[key]
+      const mapped = mapIssueArray(value)
+      if (mapped) {
+        fieldErrors = { ...(fieldErrors || {}), ...mapped }
+      }
+    }
+
+    const nestedKeys = ['body', 'response', 'data', 'details']
+    for (const nestedKey of nestedKeys) {
+      const nested = (current as any)[nestedKey]
+      if (nested && !processed.has(nested)) queue.push(nested)
+    }
+  }
+
+  if (!message && fieldErrors && Object.keys(fieldErrors).length === 1) {
+    const [, firstMessage] = Object.entries(fieldErrors)[0]
+    message = firstMessage
+  }
+
+  if (!message && err instanceof Error && err.message) {
+    message = err.message
+  } else if (!message && typeof err === 'string') {
+    message = err
+  }
+
+  return { message, fieldErrors }
+}
+
+export type FieldNameMapperOptions = {
+  customEntity?: boolean
+}
+
+export function mapServerFieldNameToFormId(field: string, options?: FieldNameMapperOptions): string {
+  const trimmed = field.trim()
+  const customEntity = !!options?.customEntity
+  if (customEntity) {
+    if (trimmed.startsWith('cf_')) return trimmed.slice(3)
+    if (trimmed.startsWith('cf:')) return trimmed.slice(3)
+    return trimmed
+  }
+  if (trimmed.startsWith('cf_')) return trimmed
+  if (trimmed.startsWith('cf:')) return `cf_${trimmed.slice(3)}`
+  return trimmed
+}
+
+export function mapCrudServerErrorToFormErrors(
+  err: unknown,
+  options?: FieldNameMapperOptions,
+): { message?: string; fieldErrors?: CrudServerFieldErrors } {
+  const normalized = normalizeCrudServerError(err)
+  const fieldErrors = normalized.fieldErrors
+  if (!fieldErrors) return { message: normalized.message }
+
+  const mapped: CrudServerFieldErrors = {}
+  for (const [key, value] of Object.entries(fieldErrors)) {
+    const formId = mapServerFieldNameToFormId(key, options)
+    if (!formId) continue
+    mapped[formId] = value
+  }
+
+  let message = normalized.message
+  const firstEntry = Object.entries(mapped)[0]
+  if (
+    firstEntry &&
+    (!message || (typeof message === 'string' && message.trim().toLowerCase() === 'invalid input'))
+  ) {
+    const [, fieldMessage] = firstEntry
+    if (typeof fieldMessage === 'string' && fieldMessage.trim().length) {
+      message = fieldMessage
+    }
+  }
+
+  return {
+    message,
+    fieldErrors: mapped,
+  }
+}
+
+export function parseServerMessage(input: string): string {
+  const trimmed = input.trim()
+  if (!trimmed) return trimmed
+  if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+    try {
+      const parsed = JSON.parse(trimmed) as Record<string, unknown>
+      const text =
+        typeof parsed?.error === 'string' && parsed.error.trim()
+          ? parsed.error.trim()
+          : typeof parsed?.message === 'string' && parsed.message.trim()
+            ? parsed.message.trim()
+            : null
+      if (text) return text
+    } catch {
+      // ignore JSON parse failure, fall through to trimmed string
+    }
+  }
+  return trimmed
+}
+
+export async function raiseCrudError(res: Response, fallbackMessage?: string): Promise<never> {
+  let raw: string | null = null
+  try {
+    raw = await res.text()
+  } catch {
+    raw = null
+  }
+
+  const trimmed = raw && raw.trim() ? raw.trim() : null
+  const parsed = trimmed ? tryParseJson(trimmed) : null
+
+  if (parsed && typeof parsed === 'object') {
+    const data = parsed as Record<string, unknown>
+    const rawMessage =
+      typeof data.error === 'string' && data.error.trim()
+        ? data.error.trim()
+        : typeof data.message === 'string' && data.message.trim()
+          ? data.message.trim()
+          : fallbackMessage ?? `Request failed (${res.status})`
+    const message = parseServerMessage(rawMessage)
+    throw {
+      ...data,
+      status: res.status,
+      message,
+      raw: trimmed ?? null,
+    }
+  }
+
+  const message = parseServerMessage(fallbackMessage ?? `Request failed (${res.status})`)
+  throw { message, status: res.status, raw: trimmed ?? null }
+}
+
+export type CrudFormError = Error & {
+  status?: number
+  fieldErrors?: CrudServerFieldErrors
+  details?: unknown
+}
+
+export function createCrudFormError(
+  message: string,
+  fieldErrors?: CrudServerFieldErrors,
+  extras?: Partial<Pick<CrudFormError, 'status' | 'details'>>,
+): CrudFormError {
+  const error = new Error(message) as CrudFormError
+  if (fieldErrors && Object.keys(fieldErrors).length) error.fieldErrors = fieldErrors
+  if (extras?.status !== undefined) error.status = extras.status
+  if (extras?.details !== undefined) error.details = extras.details
+  return error
+}
+
+export async function readJsonSafe<T>(res: Response, fallback: T | null = null): Promise<T | null> {
+  try {
+    const text = await res.text()
+    if (!text) return fallback
+    return JSON.parse(text) as T
+  } catch {
+    return fallback
+  }
+}

package/src/frontend/AuthFooter.tsx

@@ -0,0 +1,29 @@
+"use client"
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { LanguageSwitcher } from './LanguageSwitcher'
+
+export function AuthFooter() {
+  const pathname = usePathname()
+  const t = useT()
+  const shouldShow =
+    pathname === '/login' ||
+    (typeof pathname === 'string' && pathname.startsWith('/onboarding'))
+  if (!shouldShow) return null
+  return (
+    <footer className="w-full border-t bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/50">
+      <div className="max-w-screen-lg mx-auto px-4 py-3 flex flex-wrap items-center justify-end gap-4">
+        <nav className="flex items-center gap-3 text-xs text-muted-foreground">
+          <Link href="/terms" className="transition hover:text-foreground">
+            {t('common.terms')}
+          </Link>
+          <Link href="/privacy" className="transition hover:text-foreground">
+            {t('common.privacy')}
+          </Link>
+        </nav>
+        <LanguageSwitcher />
+      </div>
+    </footer>
+  )
+}

package/src/frontend/LanguageSwitcher.tsx

@@ -0,0 +1,66 @@
+"use client"
+import { useId, useTransition } from 'react'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { useRouter } from 'next/navigation'
+import { locales, type Locale } from '@open-mercato/shared/lib/i18n/config'
+
+export function LanguageSwitcher() {
+  const current = useLocale()
+  const t = useT()
+  const router = useRouter()
+  const [pending, startTransition] = useTransition()
+  const selectId = useId()
+
+  const languageLabels: Record<Locale, string> = {
+    en: t('common.languages.english', 'English'),
+    pl: t('common.languages.polish', 'Polski'),
+    es: t('common.languages.spanish', 'Español'),
+    de: t('common.languages.german', 'Deutsch'),
+  }
+
+  async function setLocale(locale: Locale) {
+    if (locale === current) return
+    try {
+      const res = await fetch('/api/auth/locale', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ locale }),
+      })
+      if (!res.ok) return
+      startTransition(() => router.refresh())
+      try {
+        window.dispatchEvent(new Event('om:refresh-sidebar'))
+      } catch {
+        // Ignore if window is unavailable
+      }
+    } catch {
+      // Ignore network errors; UX fallback keeps previous locale
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+      <label htmlFor={selectId}>{t('common.language')}</label>
+      <div className="relative">
+        <select
+          id={selectId}
+          className="appearance-none rounded-md border bg-background px-3 py-1 pr-8 text-xs focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 disabled:opacity-60"
+          value={current}
+          onChange={(event) => setLocale(event.target.value as Locale)}
+          disabled={pending}
+        >
+          {locales.map((locale) => (
+            <option key={locale} value={locale}>
+              {languageLabels[locale]}
+            </option>
+          ))}
+        </select>
+        <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M6 9l6 6 6-6" />
+          </svg>
+        </span>
+      </div>
+    </div>
+  )
+}

package/src/frontend/Layout.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { FlashMessages } from '../backend/FlashMessages'
+
+export function FrontendLayout({ header, footer, children }: { header?: React.ReactNode; footer?: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <div className="min-h-svh flex flex-col">
+      <FlashMessages />
+      {header ? <div className="border-b bg-background/60">{header}</div> : null}
+      <div className="flex-1 min-h-0">{children}</div>
+      {footer ? <div className="border-t bg-background/60">{footer}</div> : null}
+    </div>
+  )
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+export * from './theme/ThemeProvider'
+export * from './theme/ThemeToggle'
+export * from './theme/QueryProvider'
+export * from './backend/AppShell'
+export * from './backend/Page'
+export * from './backend/DataTable'
+export * from './backend/FilterBar'
+export * from './backend/ValueIcons'
+export * from './backend/ConfirmDialog'
+export * from './backend/UserMenu'
+export * from './backend/RowActions'
+export * from './backend/utils/nav'
+export * from './backend/CrudForm'
+export * from './backend/JsonBuilder'
+export * from './backend/detail'
+export * from './backend/schedule'
+
+export * from './backend/inputs'
+export * from './backend/ContextHelp'
+export * from './backend/dashboard'
+export * from './frontend/Layout'
+export * from './frontend/AuthFooter'
+export * from './frontend/LanguageSwitcher'
+export * from './primitives/button'
+export * from './primitives/label'
+export * from './primitives/separator'
+export * from './primitives/spinner'
+export * from './primitives/tabs'
+export * from './primitives/DataLoader'
+export * from './primitives/table'
+export * from './primitives/ErrorNotice'
+export * from './primitives/dialog'