@open-mercato/ui 0.4.2-canary-c02407ff85

package/src/backend/detail/TabEmptyState.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { EmptyState } from '../EmptyState'
+
+type TabEmptyStateProps = {
+  title: string
+  description?: string
+  actionLabel?: string
+  onAction?: () => void
+  disabled?: boolean
+  action?: {
+    label: string
+    onClick?: () => void
+    icon?: React.ReactNode
+    disabled?: boolean
+  }
+  className?: string
+  children?: React.ReactNode
+}
+
+export function TabEmptyState({
+  title,
+  description,
+  actionLabel,
+  onAction,
+  disabled,
+  action,
+  className,
+  children,
+}: TabEmptyStateProps) {
+  const resolvedAction =
+    action ??
+    (actionLabel
+      ? {
+          label: actionLabel,
+          onClick: onAction,
+          disabled,
+        }
+      : undefined)
+
+  return (
+    <EmptyState title={title} description={description} action={resolvedAction} className={cn('w-full', className)}>
+      {children}
+    </EmptyState>
+  )
+}

package/src/backend/detail/TagsSection.tsx

@@ -0,0 +1,314 @@
+"use client"
+
+import * as React from 'react'
+import { Pencil, X } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { TagsInput } from '@open-mercato/ui/backend/inputs/TagsInput'
+import { DataLoader } from '@open-mercato/ui/primitives/DataLoader'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+
+export type TagOption = {
+  id: string
+  label: string
+  color?: string | null
+}
+
+export type TagsSectionLabels = {
+  loading: string
+  placeholder: string
+  empty: string
+  loadError: string
+  createError: string
+  updateError: string
+  labelRequired: string
+  saveShortcut: string
+  cancelShortcut: string
+  edit?: string
+  cancel?: string
+  success?: string
+}
+
+export type TagsSectionProps = {
+  title: string
+  tags: TagOption[]
+  onChange?: (next: TagOption[]) => void
+  isSubmitting?: boolean
+  canEdit?: boolean
+  loadOptions: (query?: string) => Promise<TagOption[]>
+  createTag: (label: string) => Promise<TagOption>
+  onSave: (params: {
+    next: TagOption[]
+    added: TagOption[]
+    removed: TagOption[]
+  }) => Promise<void>
+  labels: TagsSectionLabels
+}
+
+export function TagsSection({
+  title,
+  tags,
+  onChange,
+  isSubmitting = false,
+  canEdit = true,
+  loadOptions,
+  createTag,
+  onSave,
+  labels,
+}: TagsSectionProps) {
+  const [editing, setEditing] = React.useState(false)
+  const [draft, setDraft] = React.useState<string[]>([])
+  const [saving, setSaving] = React.useState(false)
+  const [options, setOptions] = React.useState<Map<string, TagOption>>(() => new Map())
+  const [loadingOptions, setLoadingOptions] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    setOptions((prev) => {
+      const next = new Map(prev)
+      for (const tag of tags) {
+        next.set(tag.label.toLowerCase(), tag)
+      }
+      return next
+    })
+  }, [tags])
+
+  const syncFetchedOptions = React.useCallback((fetched: TagOption[]) => {
+    if (!fetched.length) return
+    setOptions((prev) => {
+      const next = new Map(prev)
+      for (const tag of fetched) {
+        next.set(tag.label.toLowerCase(), tag)
+      }
+      return next
+    })
+  }, [])
+
+  const loadSuggestions = React.useCallback(
+    async (query?: string) => {
+      try {
+        const fetched = await loadOptions(query)
+        syncFetchedOptions(fetched)
+        return fetched.map((tag) => tag.label)
+      } catch (err) {
+        console.error('tags.section.loadSuggestions', err)
+        return []
+      }
+    },
+    [loadOptions, syncFetchedOptions],
+  )
+
+  const startEditing = React.useCallback(async () => {
+    if (editing || isSubmitting || !canEdit) return
+    setError(null)
+    setDraft(tags.map((tag) => tag.label))
+    setEditing(true)
+    setLoadingOptions(true)
+    try {
+      const fetched = await loadOptions()
+      syncFetchedOptions(fetched)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : labels.loadError
+      setError(message)
+      flash(message, 'error')
+    } finally {
+      setLoadingOptions(false)
+    }
+  }, [canEdit, editing, isSubmitting, labels.loadError, loadOptions, syncFetchedOptions, tags])
+
+  const cancelEditing = React.useCallback(() => {
+    setEditing(false)
+    setDraft([])
+    setError(null)
+  }, [])
+
+  const ensureTagOption = React.useCallback(
+    async (label: string): Promise<TagOption> => {
+      const normalized = label.trim()
+      if (!normalized.length) {
+        throw new Error(labels.labelRequired)
+      }
+      const existing = options.get(normalized.toLowerCase())
+      if (existing) return existing
+      try {
+        const created = await createTag(normalized)
+        setOptions((prev) => {
+          const next = new Map(prev)
+          next.set(created.label.toLowerCase(), created)
+          return next
+        })
+        return created
+      } catch (err) {
+        const message = err instanceof Error ? err.message : labels.createError
+        throw new Error(message)
+      }
+    },
+    [createTag, labels.createError, labels.labelRequired, options],
+  )
+
+  const handleSave = React.useCallback(async () => {
+    if (saving) return
+    const trimmed = draft.map((label) => label.trim()).filter((label) => label.length > 0)
+    const uniqueLabels = Array.from(new Set(trimmed.map((label) => label.toLowerCase())))
+
+    const currentIds = new Set(tags.map((tag) => tag.id))
+    const finalTagOptions: TagOption[] = []
+
+    setSaving(true)
+    setError(null)
+    try {
+      for (const normalized of uniqueLabels) {
+        const existing = options.get(normalized)
+        if (existing) {
+          finalTagOptions.push(existing)
+          continue
+        }
+        const matchingLabel = trimmed.find((label) => label.toLowerCase() === normalized) ?? normalized
+        const created = await ensureTagOption(matchingLabel)
+        finalTagOptions.push(created)
+      }
+
+      const finalIds = new Set(finalTagOptions.map((tag) => tag.id))
+      const added = finalTagOptions.filter((tag) => !currentIds.has(tag.id))
+      const removed = tags.filter((tag) => !finalIds.has(tag.id))
+
+      await onSave({ next: finalTagOptions, added, removed })
+
+      onChange?.(finalTagOptions)
+      setEditing(false)
+      setDraft([])
+      if (labels.success) flash(labels.success, 'success')
+    } catch (err) {
+      const message = err instanceof Error ? err.message : labels.updateError
+      setError(message)
+      flash(message, 'error')
+    } finally {
+      setSaving(false)
+    }
+  }, [draft, ensureTagOption, labels.success, labels.updateError, onChange, onSave, options, saving, tags])
+
+  const activeTags = editing ? draft : tags.map((tag) => tag.label)
+
+  const handleEditingKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!editing) return
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        cancelEditing()
+        return
+      }
+      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+        event.preventDefault()
+        if (saving || isSubmitting) return
+        void handleSave()
+      }
+    },
+    [cancelEditing, editing, handleSave, isSubmitting, saving],
+  )
+
+  const disableInteraction = isSubmitting || !canEdit
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between group">
+        <h2 className="text-sm font-semibold">
+          {title}
+        </h2>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onClick={editing ? cancelEditing : startEditing}
+          disabled={disableInteraction || saving}
+          className={
+            editing
+              ? 'opacity-100 transition-opacity duration-150'
+              : 'opacity-0 transition-opacity duration-150 group-hover:opacity-100 focus-visible:opacity-100'
+          }
+        >
+          {editing ? <X className="h-4 w-4" /> : <Pencil className="h-4 w-4" />}
+          <span className="sr-only">
+            {editing ? labels.cancel ?? 'Cancel' : labels.edit ?? 'Edit'}
+          </span>
+        </Button>
+      </div>
+
+      {editing ? (
+        <div className="rounded-lg border bg-card p-4 space-y-3">
+          <DataLoader
+            isLoading={loadingOptions}
+            loadingMessage={labels.loading}
+            spinnerSize="sm"
+          >
+            <div className="space-y-3" onKeyDown={handleEditingKeyDown}>
+              <TagsInput
+                value={activeTags}
+                onChange={(values) => setDraft(values)}
+                placeholder={labels.placeholder}
+                loadSuggestions={loadSuggestions}
+                autoFocus
+              />
+              {error ? <p className="text-xs text-red-600">{error}</p> : null}
+              <div className="flex items-center gap-2 mt-3 mb-2">
+                <Button type="button" size="sm" onClick={handleSave} disabled={saving || isSubmitting}>
+                  {saving ? (
+                    <span className="mr-2 h-4 w-4 animate-spin rounded-full border border-background border-t-primary" />
+                  ) : null}
+                  {labels.saveShortcut}
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  onClick={cancelEditing}
+                  disabled={saving || isSubmitting}
+                >
+                  {labels.cancelShortcut}
+                </Button>
+              </div>
+            </div>
+          </DataLoader>
+        </div>
+      ) : (
+        <div
+          className="group/tags relative rounded-lg border bg-muted/20 p-4 transition-colors hover:border-primary/40 focus-visible:border-primary focus-visible:outline-none"
+          role={disableInteraction ? undefined : 'button'}
+          tabIndex={disableInteraction ? -1 : 0}
+          onClick={disableInteraction ? undefined : startEditing}
+          onKeyDown={(event) => {
+            if (disableInteraction) return
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault()
+              void startEditing()
+            }
+          }}
+        >
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute right-3 top-3 text-muted-foreground opacity-0 transition-opacity duration-150 group-hover/tags:opacity-100 group-focus-within/tags:opacity-100"
+          >
+            <Pencil className="h-4 w-4" />
+          </span>
+          {tags.length === 0 ? (
+            <p className="text-sm text-muted-foreground">
+              {labels.empty}
+            </p>
+          ) : (
+            <div className="flex flex-wrap gap-2">
+              {tags.map((tag) => (
+                <span
+                  key={tag.id}
+                  className="inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium"
+                  style={tag.color ? { borderColor: tag.color, color: tag.color } : undefined}
+                >
+                  {tag.label}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TagsSection

package/src/backend/detail/addressFormat.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react'
+
+export type AddressFormatStrategy = 'line_first' | 'street_first'
+
+export type AddressValue = {
+  addressLine1: string | null | undefined
+  addressLine2?: string | null
+  buildingNumber?: string | null
+  flatNumber?: string | null
+  city?: string | null
+  region?: string | null
+  postalCode?: string | null
+  country?: string | null
+  companyName?: string | null
+}
+
+export type AddressJsonShape = {
+  format: AddressFormatStrategy
+  companyName: string | null
+  addressLine1: string | null
+  addressLine2: string | null
+  buildingNumber: string | null
+  flatNumber: string | null
+  postalCode: string | null
+  city: string | null
+  region: string | null
+  country: string | null
+}
+
+function normalize(value: string | null | undefined): string | null {
+  if (typeof value !== 'string') return null
+  const trimmed = value.trim()
+  return trimmed.length ? trimmed : null
+}
+
+function mergeStreetLine(address: AddressValue): string | null {
+  const street = normalize(address.addressLine1)
+  const building = normalize(address.buildingNumber)
+  const flat = normalize(address.flatNumber)
+  if (!street && !building && !flat) return null
+  let line = street ?? ''
+  if (building) line = line ? `${line} ${building}` : building
+  if (flat) line = line ? `${line}/${flat}` : flat
+  return line.length ? line : null
+}
+
+export function formatAddressJson(address: AddressValue, format: AddressFormatStrategy): AddressJsonShape {
+  return {
+    format,
+    companyName: normalize(address.companyName),
+    addressLine1: normalize(address.addressLine1),
+    addressLine2: normalize(address.addressLine2),
+    buildingNumber: normalize(address.buildingNumber),
+    flatNumber: normalize(address.flatNumber),
+    postalCode: normalize(address.postalCode),
+    city: normalize(address.city),
+    region: normalize(address.region),
+    country: normalize(address.country),
+  }
+}
+
+export function formatAddressLines(address: AddressValue, format: AddressFormatStrategy): string[] {
+  const json = formatAddressJson(address, format)
+  const lines: string[] = []
+
+  if (json.companyName) lines.push(json.companyName)
+
+  if (format === 'street_first') {
+    const streetLine = mergeStreetLine(address)
+    if (streetLine) lines.push(streetLine)
+    const supplemental = normalize(address.addressLine2)
+    if (supplemental) lines.push(supplemental)
+    const postalCity = [json.postalCode, json.city].filter(Boolean).join(' ')
+    if (postalCity.length) lines.push(postalCity)
+    if (json.region) lines.push(json.region)
+    if (json.country) lines.push(json.country)
+  } else {
+    if (json.addressLine1) {
+      const baseLine1 = json.addressLine1
+      const appended = mergeStreetLine(address)
+      if (!json.buildingNumber && !json.flatNumber) {
+        lines.push(baseLine1)
+      } else {
+        const composite = appended ?? baseLine1
+        lines.push(composite)
+      }
+    }
+    if (json.addressLine2) lines.push(json.addressLine2)
+    const postalCity = [json.postalCode, json.city].filter(Boolean).join(' ')
+    if (postalCity.length) lines.push(postalCity)
+    if (json.region) lines.push(json.region)
+    if (json.country) lines.push(json.country)
+  }
+
+  return lines
+}
+
+export function formatAddressString(address: AddressValue, format: AddressFormatStrategy, separator = ', '): string {
+  return formatAddressLines(address, format).filter(Boolean).join(separator)
+}
+
+type AddressViewProps = {
+  address: AddressValue
+  format: AddressFormatStrategy
+  className?: string
+  lineClassName?: string
+}
+
+export function AddressView({ address, format, className, lineClassName }: AddressViewProps): React.ReactElement | null {
+  const lines = formatAddressLines(address, format)
+  if (!lines.length) return null
+  return (
+    <div className={className}>
+      {lines.map((line, index) => (
+        <div key={`${index}-${line}`} className={lineClassName}>
+          {line}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/backend/detail/index.ts

@@ -0,0 +1,44 @@
+export * from './InlineEditors'
+export * from './DetailFieldsSection'
+export * from './LoadingMessage'
+export * from './ErrorMessage'
+export * from './TabEmptyState'
+export * from './CustomDataSection'
+export * from './TagsSection'
+export { NotesSection, mapCommentSummary } from './NotesSection'
+export type { NotesSectionProps, CommentSummary, SectionAction, TabEmptyStateConfig } from './NotesSection'
+export { ActivitiesSection } from './ActivitiesSection'
+export type {
+  ActivitiesSectionProps,
+  ActivitiesDataAdapter,
+  ActivitySummary,
+  ActivityCreatePayload,
+  ActivityUpdatePayload,
+  ActivityFormBaseValues,
+  ActivityFormSubmitPayload,
+} from './ActivitiesSection'
+export { AddressesSection } from './AddressesSection'
+export type { AddressesSectionProps, AddressDataAdapter, AddressSummary } from './AddressesSection'
+export { default as AddressTiles } from './AddressTiles'
+export type { AddressInput, AddressValue as AddressTileValue, Translator as AddressTilesTranslator } from './AddressTiles'
+export { default as AddressEditor } from './AddressEditor'
+export type {
+  AddressTypeOption,
+  AddressTypesAdapter,
+  AddressEditorDraft,
+  AddressEditorField,
+} from './AddressEditor'
+export {
+  AddressView,
+  formatAddressJson,
+  formatAddressLines,
+  formatAddressString,
+} from './addressFormat'
+export type {
+  AddressFormatStrategy,
+  AddressJsonShape,
+  AddressValue as AddressFormatValue,
+} from './addressFormat'
+export * from './AttachmentMetadataDialog'
+export * from './AttachmentDeleteDialog'
+export * from './AttachmentsSection'

package/src/backend/fields/registry.generated.ts

@@ -0,0 +1,8 @@
+// Auto-registered field components loaded at runtime.
+// This file can be regenerated by module generators. Keep imports side-effectful.
+import '@open-mercato/core/modules/attachments/fields/attachment'
+import '@open-mercato/core/modules/dictionaries/fields/dictionary'
+
+export function loadAll() {
+  // No-op: imports above perform registration via side effects
+}

package/src/backend/fields/registry.ts

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import type { CrudCustomFieldRenderProps } from '../CrudForm'
+
+export type FieldInputComponent = (props: CrudCustomFieldRenderProps & { def?: any }) => React.ReactNode
+export type FieldDefEditorComponent = (props: { def: any; onChange: (patch: any) => void }) => React.ReactNode
+
+type Entry = { input?: FieldInputComponent; defEditor?: FieldDefEditorComponent }
+
+class FieldRegistryImpl {
+  private map = new Map<string, Entry>()
+
+  register(kind: string, entry: Entry) {
+    const k = kind.toLowerCase()
+    const prev = this.map.get(k) || {}
+    this.map.set(k, { ...prev, ...entry })
+  }
+
+  getInput(kind: string): FieldInputComponent | undefined {
+    return this.map.get(kind.toLowerCase())?.input
+  }
+
+  getDefEditor(kind: string): FieldDefEditorComponent | undefined {
+    return this.map.get(kind.toLowerCase())?.defEditor
+  }
+}
+
+export const FieldRegistry = new FieldRegistryImpl()
+
+// Placeholder for generator to auto-register fields from modules
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export async function loadGeneratedFieldRegistrations(): Promise<void> {
+  try {
+    const gen = await import('./registry.generated')
+    if (typeof gen.loadAll === 'function') gen.loadAll()
+  } catch {
+    // ignore when not present
+  }
+}

package/src/backend/indexes/PartialIndexBanner.tsx

@@ -0,0 +1,68 @@
+"use client"
+import * as React from 'react'
+import Link from 'next/link'
+import { AlertTriangle, X } from 'lucide-react'
+import { Button } from '../../primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { dismissPartialIndexWarning, usePartialIndexWarning } from './store'
+
+export function PartialIndexBanner() {
+  const t = useT()
+  const warning = usePartialIndexWarning()
+
+  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'
+
+  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 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">
+          <AlertTriangle className="size-4" aria-hidden="true" />
+          <span>{t('query_index.banner.partial_title')}</span>
+        </div>
+        <p className="text-amber-900">
+          {t('query_index.banner.partial_description')}
+        </p>
+        <p className="text-xs text-amber-900/90">
+          {t('query_index.banner.partial_entity', { entity: entityLabel })}
+        </p>
+        {hasCounts && (
+          <p className="text-xs text-amber-900/90">
+            {t('query_index.banner.partial_counts', { indexed, total: base })}
+          </p>
+        )}
+        {warning.scope === 'global' && (
+          <p className="text-xs text-amber-900/80">
+            {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"
+        >
+          <Link href="/backend/query-indexes">
+            {t('query_index.banner.manage_indexes')}
+          </Link>
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => dismissPartialIndexWarning()}
+          className="text-amber-900 hover:bg-amber-100"
+          aria-label={t('query_index.banner.dismiss')}
+        >
+          <X className="mr-1 size-4" aria-hidden="true" />
+          {t('query_index.banner.dismiss')}
+        </Button>
+      </div>
+    </div>
+  )
+}