@open-mercato/ui 0.6.8-develop.6925.1.cefa200fa4 → 0.6.8-develop.6930.1.1e5976efc3

package/dist/backend/inputs/LookupSelect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/inputs/LookupSelect.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Check, Loader2, Search, X } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '../../primitives/button'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { createLogger } from '@open-mercato/shared/lib/logger'\n\nconst logger = createLogger('ui').child({ component: 'LookupSelect' })\n\nexport type LookupSelectItem = {\n  id: string\n  title: string\n  subtitle?: string | null\n  badge?: string | null\n  icon?: React.ReactNode\n  disabled?: boolean\n  rightLabel?: string | null\n  description?: string | null\n}\n\ntype LookupSelectProps = {\n  value: string | null\n  onChange: (next: string | null) => void\n  fetchItems?: (query: string) => Promise<LookupSelectItem[]>\n  fetchOptions?: (query?: string) => Promise<LookupSelectItem[]>\n  options?: LookupSelectItem[]\n  minQuery?: number\n  actionSlot?: React.ReactNode\n  onReady?: (controls: { setQuery: (value: string) => void }) => void\n  searchPlaceholder?: string\n  placeholder?: string\n  clearLabel?: string\n  emptyLabel?: string\n  loadingLabel?: string\n  selectLabel?: string\n  selectedLabel?: string\n  minQueryHintLabel?: string\n  startTypingLabel?: string\n  selectedHintLabel?: (id: string) => string\n  disabled?: boolean\n  loading?: boolean\n  defaultOpen?: boolean\n}\n\nexport function LookupSelect({\n  value,\n  onChange,\n  fetchItems,\n  fetchOptions,\n  options,\n  minQuery = 2,\n  actionSlot,\n  onReady,\n  placeholder,\n  searchPlaceholder,\n  clearLabel,\n  emptyLabel,\n  loadingLabel,\n  selectLabel,\n  selectedLabel,\n  minQueryHintLabel,\n  startTypingLabel,\n  selectedHintLabel,\n  disabled = false,\n  loading: loadingProp = false,\n  defaultOpen = false,\n}: LookupSelectProps) {\n  const t = useT()\n  const resolvedSearchPlaceholder = searchPlaceholder ?? placeholder ?? t('ui.lookupSelect.searchPlaceholder', 'Search\u2026')\n  const resolvedClearLabel = clearLabel ?? t('ui.lookupSelect.clearSelection', 'Clear selection')\n  const resolvedEmptyLabel = emptyLabel ?? t('ui.lookupSelect.noResults', 'No results')\n  const resolvedLoadingLabel = loadingLabel ?? t('ui.lookupSelect.searching', 'Searching\u2026')\n  const resolvedSelectLabel = selectLabel ?? t('ui.lookupSelect.select', 'Select')\n  const resolvedSelectedLabel = selectedLabel ?? t('ui.lookupSelect.selected', 'Selected')\n  const resolvedStartTypingLabel = startTypingLabel ?? t('ui.lookupSelect.startTyping', 'Start typing to search.')\n  const resolvedMinQueryHintLabel = minQueryHintLabel ?? t(\n    'ui.lookupSelect.minQueryHint',\n    'Type at least {minQuery} characters or paste an id to search.',\n    { minQuery: String(minQuery) }\n  )\n  const [query, setQuery] = React.useState('')\n  const [items, setItems] = React.useState<LookupSelectItem[]>(options ?? [])\n  const [loading, setLoading] = React.useState(false)\n  const [hasTyped, setHasTyped] = React.useState(defaultOpen)\n  const [error, setError] = React.useState<string | null>(null)\n  const [fetchKey, setFetchKey] = React.useState(0)\n  const fetchItemsRef = React.useRef(fetchItems ?? fetchOptions)\n  const setQueryRef = React.useRef(setQuery)\n  const onReadyRef = React.useRef(onReady)\n  const optionsWasArrayRef = React.useRef(Array.isArray(options))\n\n  React.useEffect(() => {\n    fetchItemsRef.current = fetchItems ?? fetchOptions\n  }, [fetchItems, fetchOptions])\n\n  React.useEffect(() => {\n    onReadyRef.current = onReady\n  }, [onReady])\n\n  React.useEffect(() => {\n    if (Array.isArray(options)) {\n      optionsWasArrayRef.current = true\n      setItems(options)\n    } else if (optionsWasArrayRef.current) {\n      optionsWasArrayRef.current = false\n      setFetchKey((k) => k + 1)\n    }\n  }, [options])\n\n  React.useEffect(() => {\n    setQueryRef.current = setQuery\n    if (onReadyRef.current) onReadyRef.current({ setQuery })\n  }, [setQuery])\n\n  const shouldSearch =\n    defaultOpen || query.trim().length >= minQuery || Boolean(value && (options?.length ?? 0) > 0)\n  React.useEffect(() => {\n    if (disabled) {\n      setItems(options ?? [])\n      setLoading(false)\n      return\n    }\n    let cancelled = false\n    let timer: ReturnType<typeof setTimeout> | null = null\n    if (!shouldSearch) {\n      setItems(options ?? [])\n      setLoading(false)\n      setError(null)\n      return () => { cancelled = true }\n    }\n    setLoading(true)\n    setError(null)\n    timer = setTimeout(() => {\n      const requestId = Date.now()\n      const fetcher = fetchItemsRef.current\n      const loader = fetcher ?? (() => Promise.resolve(options ?? []))\n      loader(query.trim())\n        .then((result) => {\n          if (cancelled) return\n          setItems(result)\n        })\n        .catch((err) => {\n          if (cancelled) return\n          logger.error('Failed to fetch lookup items', { err })\n          setError('error')\n        })\n        .finally(() => {\n          if (!cancelled) setLoading(false)\n        })\n      return requestId\n    }, 220)\n    return () => {\n      cancelled = true\n      if (timer) clearTimeout(timer)\n    }\n  }, [query, shouldSearch, fetchKey])\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3\">\n        <div className=\"relative flex-1\">\n          <Search className=\"pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n          <input\n            className=\"w-full h-10 rounded-lg border border-input bg-background pl-10 pr-3 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground hover:border-foreground/20 focus-visible:shadow-focus focus-visible:border-brand-violet disabled:bg-bg-disabled disabled:border-border-disabled disabled:text-muted-foreground disabled:cursor-not-allowed\"\n            value={query}\n            onChange={(event) => {\n              setQuery(event.target.value)\n              setHasTyped(true)\n            }}\n            placeholder={resolvedSearchPlaceholder}\n            disabled={disabled}\n          />\n        </div>\n        {actionSlot ? <div className=\"sm:self-start\">{actionSlot}</div> : null}\n      </div>\n      {shouldSearch ? (\n        <div className=\"space-y-2\">\n          {loading || loadingProp ? (\n            <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n              {resolvedLoadingLabel}\n            </div>\n          ) : null}\n          {!loading && !loadingProp && !items.length ? (\n            <p className=\"text-xs text-muted-foreground\">{resolvedEmptyLabel}</p>\n          ) : null}\n          <div className=\"flex flex-col gap-1.5 max-h-80 overflow-y-auto -mx-0.5 px-0.5 py-0.5\">\n            {items.map((item) => {\n              const isSelected = value === item.id\n              const isInteractive = !item.disabled || isSelected\n              return (\n                <div\n                  key={item.id}\n                  className={cn(\n                    'group flex items-center gap-4 rounded-xl border p-4 transition-all duration-150 focus-visible:outline-none focus-visible:shadow-focus',\n                    isInteractive ? 'cursor-pointer' : 'cursor-not-allowed opacity-60',\n                    isSelected\n                      ? 'border-brand-violet bg-brand-violet/5 shadow-sm'\n                      : 'border-input bg-card hover:border-foreground/20 hover:bg-muted/30 hover:shadow-sm'\n                  )}\n                  role=\"button\"\n                  tabIndex={item.disabled ? -1 : 0}\n                  onClick={() => {\n                    if (!isInteractive) return\n                    onChange(item.id)\n                  }}\n                  onKeyDown={(event) => {\n                    if (event.key === 'Enter' || event.key === ' ') {\n                      event.preventDefault()\n                      if (!isInteractive) return\n                      onChange(item.id)\n                    }\n                  }}\n                  aria-pressed={isSelected}\n                  aria-disabled={item.disabled && !isSelected ? true : undefined}\n                  title={isSelected ? resolvedSelectedLabel : resolvedSelectLabel}\n                >\n                  {item.icon ? (\n                    <div className=\"flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden [&>svg]:size-6 [&_svg]:text-muted-foreground\">\n                      {item.icon}\n                    </div>\n                  ) : (\n                    <div className={cn(\n                      'flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg border transition-colors',\n                      isSelected\n                        ? 'border-brand-violet/40 bg-brand-violet/10 text-brand-violet'\n                        : 'border-input bg-muted text-muted-foreground group-hover:border-foreground/20'\n                    )}>\n                      <span className=\"text-base font-semibold uppercase\">{item.title.slice(0, 1)}</span>\n                    </div>\n                  )}\n                  <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                    <div className=\"flex items-center justify-between gap-3\">\n                      <div className=\"truncate text-sm font-semibold text-foreground\">{item.title}</div>\n                      {item.rightLabel ? (\n                        <div className=\"shrink-0 text-overline font-medium uppercase tracking-wider text-muted-foreground\">\n                          {item.rightLabel}\n                        </div>\n                      ) : null}\n                    </div>\n                    {item.subtitle ? (\n                      <div className=\"text-xs text-muted-foreground truncate\">{item.subtitle}</div>\n                    ) : null}\n                    {item.description ? (\n                      <div className=\"text-xs text-muted-foreground/70 truncate\">{item.description}</div>\n                    ) : null}\n                  </div>\n                  <div className=\"flex shrink-0 items-center justify-center\">\n                    {isSelected ? (\n                      <Check className=\"size-5 text-brand-violet\" aria-hidden=\"true\" />\n                    ) : (\n                      <div className=\"size-5\" aria-hidden=\"true\" />\n                    )}\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n          {value ? (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"w-fit gap-1 text-sm font-normal\"\n              onClick={() => onChange(null)}\n            >\n              <X className=\"h-4 w-4\" />\n              {resolvedClearLabel}\n            </Button>\n          ) : null}\n        </div>\n      ) : hasTyped ? (\n        <p className=\"text-xs text-muted-foreground\">\n          {resolvedMinQueryHintLabel}\n        </p>\n      ) : (\n        <p className=\"text-xs text-muted-foreground\">{resolvedStartTypingLabel}</p>\n      )}\n      {error ? <p className=\"text-xs text-status-error-text\" role=\"alert\">{resolvedEmptyLabel}</p> : null}\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { Check, Loader2, Search, X } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '../../primitives/button'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { createLogger } from '@open-mercato/shared/lib/logger'\n\nconst logger = createLogger('ui').child({ component: 'LookupSelect' })\n\nexport type LookupSelectItem = {\n  id: string\n  title: string\n  subtitle?: string | null\n  badge?: string | null\n  icon?: React.ReactNode\n  disabled?: boolean\n  rightLabel?: string | null\n  description?: string | null\n}\n\ntype LookupSelectProps = {\n  value: string | null\n  onChange: (next: string | null) => void\n  fetchItems?: (query: string) => Promise<LookupSelectItem[]>\n  fetchOptions?: (query?: string) => Promise<LookupSelectItem[]>\n  options?: LookupSelectItem[]\n  minQuery?: number\n  actionSlot?: React.ReactNode\n  onReady?: (controls: { setQuery: (value: string) => void }) => void\n  searchPlaceholder?: string\n  placeholder?: string\n  clearLabel?: string\n  emptyLabel?: string\n  loadingLabel?: string\n  selectLabel?: string\n  selectedLabel?: string\n  minQueryHintLabel?: string\n  startTypingLabel?: string\n  selectedHintLabel?: (id: string) => string\n  disabled?: boolean\n  loading?: boolean\n  defaultOpen?: boolean\n}\n\nexport function LookupSelect({\n  value,\n  onChange,\n  fetchItems,\n  fetchOptions,\n  options,\n  minQuery = 2,\n  actionSlot,\n  onReady,\n  placeholder,\n  searchPlaceholder,\n  clearLabel,\n  emptyLabel,\n  loadingLabel,\n  selectLabel,\n  selectedLabel,\n  minQueryHintLabel,\n  startTypingLabel,\n  selectedHintLabel,\n  disabled = false,\n  loading: loadingProp = false,\n  defaultOpen = false,\n}: LookupSelectProps) {\n  const t = useT()\n  const resolvedSearchPlaceholder = searchPlaceholder ?? placeholder ?? t('ui.lookupSelect.searchPlaceholder', 'Search\u2026')\n  const resolvedClearLabel = clearLabel ?? t('ui.lookupSelect.clearSelection', 'Clear selection')\n  const resolvedEmptyLabel = emptyLabel ?? t('ui.lookupSelect.noResults', 'No results')\n  const resolvedLoadingLabel = loadingLabel ?? t('ui.lookupSelect.searching', 'Searching\u2026')\n  const resolvedSelectLabel = selectLabel ?? t('ui.lookupSelect.select', 'Select')\n  const resolvedSelectedLabel = selectedLabel ?? t('ui.lookupSelect.selected', 'Selected')\n  const resolvedStartTypingLabel = startTypingLabel ?? t('ui.lookupSelect.startTyping', 'Start typing to search.')\n  const resolvedMinQueryHintLabel = minQueryHintLabel ?? t(\n    'ui.lookupSelect.minQueryHint',\n    'Type at least {minQuery} characters or paste an id to search.',\n    { minQuery: String(minQuery) }\n  )\n  const [query, setQuery] = React.useState('')\n  const [items, setItems] = React.useState<LookupSelectItem[]>(options ?? [])\n  const [loading, setLoading] = React.useState(false)\n  const [hasTyped, setHasTyped] = React.useState(defaultOpen)\n  const [error, setError] = React.useState<string | null>(null)\n  const [fetchKey, setFetchKey] = React.useState(0)\n  const [activeIndex, setActiveIndex] = React.useState(-1)\n  const listboxId = React.useId()\n  const fetchItemsRef = React.useRef(fetchItems ?? fetchOptions)\n  const setQueryRef = React.useRef(setQuery)\n  const onReadyRef = React.useRef(onReady)\n  const optionsWasArrayRef = React.useRef(Array.isArray(options))\n\n  React.useEffect(() => {\n    fetchItemsRef.current = fetchItems ?? fetchOptions\n  }, [fetchItems, fetchOptions])\n\n  React.useEffect(() => {\n    onReadyRef.current = onReady\n  }, [onReady])\n\n  React.useEffect(() => {\n    if (Array.isArray(options)) {\n      optionsWasArrayRef.current = true\n      setItems(options)\n    } else if (optionsWasArrayRef.current) {\n      optionsWasArrayRef.current = false\n      setFetchKey((k) => k + 1)\n    }\n  }, [options])\n\n  React.useEffect(() => {\n    setQueryRef.current = setQuery\n    if (onReadyRef.current) onReadyRef.current({ setQuery })\n  }, [setQuery])\n\n  const shouldSearch =\n    defaultOpen || query.trim().length >= minQuery || Boolean(value && (options?.length ?? 0) > 0)\n\n  React.useEffect(() => {\n    setActiveIndex(-1)\n  }, [items])\n\n  const optionDomId = React.useCallback(\n    (index: number) => `${listboxId}-option-${index}`,\n    [listboxId],\n  )\n\n  const isInteractiveItem = React.useCallback(\n    (item: LookupSelectItem) => !item.disabled || value === item.id,\n    [value],\n  )\n\n  const moveActiveIndex = React.useCallback((direction: 1 | -1) => {\n    setActiveIndex((current) => {\n      if (!items.length) return -1\n      let next = current\n      for (let step = 0; step < items.length; step += 1) {\n        next = (next + direction + items.length) % items.length\n        if (isInteractiveItem(items[next])) return next\n      }\n      return current\n    })\n  }, [isInteractiveItem, items])\n\n  React.useEffect(() => {\n    if (activeIndex < 0) return\n    const activeElement = typeof document !== 'undefined'\n      ? document.getElementById(optionDomId(activeIndex))\n      : null\n    if (typeof activeElement?.scrollIntoView === 'function') {\n      activeElement.scrollIntoView({ block: 'nearest' })\n    }\n  }, [activeIndex, optionDomId])\n\n  const listboxVisible = shouldSearch && !disabled\n  const handleInputKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!listboxVisible) return\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      moveActiveIndex(1)\n      return\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      moveActiveIndex(-1)\n      return\n    }\n    if (event.key === 'Enter') {\n      if (activeIndex < 0 || activeIndex >= items.length) return\n      const item = items[activeIndex]\n      if (!isInteractiveItem(item)) return\n      event.preventDefault()\n      onChange(item.id)\n      setActiveIndex(-1)\n      return\n    }\n    if (event.key === 'Escape') {\n      if (query.length === 0 && activeIndex < 0) return\n      event.preventDefault()\n      event.stopPropagation()\n      setQuery('')\n      setActiveIndex(-1)\n    }\n  }, [activeIndex, items, isInteractiveItem, listboxVisible, moveActiveIndex, onChange, query])\n  React.useEffect(() => {\n    if (disabled) {\n      setItems(options ?? [])\n      setLoading(false)\n      return\n    }\n    let cancelled = false\n    let timer: ReturnType<typeof setTimeout> | null = null\n    if (!shouldSearch) {\n      setItems(options ?? [])\n      setLoading(false)\n      setError(null)\n      return () => { cancelled = true }\n    }\n    setLoading(true)\n    setError(null)\n    timer = setTimeout(() => {\n      const requestId = Date.now()\n      const fetcher = fetchItemsRef.current\n      const loader = fetcher ?? (() => Promise.resolve(options ?? []))\n      loader(query.trim())\n        .then((result) => {\n          if (cancelled) return\n          setItems(result)\n        })\n        .catch((err) => {\n          if (cancelled) return\n          logger.error('Failed to fetch lookup items', { err })\n          setError('error')\n        })\n        .finally(() => {\n          if (!cancelled) setLoading(false)\n        })\n      return requestId\n    }, 220)\n    return () => {\n      cancelled = true\n      if (timer) clearTimeout(timer)\n    }\n  }, [query, shouldSearch, fetchKey])\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3\">\n        <div className=\"relative flex-1\">\n          <Search className=\"pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n          <input\n            className=\"w-full h-10 rounded-lg border border-input bg-background pl-10 pr-3 text-sm shadow-xs transition-colors outline-none placeholder:text-muted-foreground hover:border-foreground/20 focus-visible:shadow-focus focus-visible:border-brand-violet disabled:bg-bg-disabled disabled:border-border-disabled disabled:text-muted-foreground disabled:cursor-not-allowed\"\n            value={query}\n            onChange={(event) => {\n              setQuery(event.target.value)\n              setHasTyped(true)\n            }}\n            onKeyDown={handleInputKeyDown}\n            placeholder={resolvedSearchPlaceholder}\n            disabled={disabled}\n            role=\"combobox\"\n            aria-expanded={listboxVisible}\n            aria-controls={listboxId}\n            aria-autocomplete=\"list\"\n            aria-activedescendant={activeIndex >= 0 ? optionDomId(activeIndex) : undefined}\n          />\n        </div>\n        {actionSlot ? <div className=\"sm:self-start\">{actionSlot}</div> : null}\n      </div>\n      {shouldSearch ? (\n        <div className=\"space-y-2\">\n          {loading || loadingProp ? (\n            <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n              <Loader2 className=\"h-4 w-4 animate-spin\" />\n              {resolvedLoadingLabel}\n            </div>\n          ) : null}\n          {!loading && !loadingProp && !items.length ? (\n            <p className=\"text-xs text-muted-foreground\">{resolvedEmptyLabel}</p>\n          ) : null}\n          <div\n            id={listboxId}\n            role=\"listbox\"\n            className=\"flex flex-col gap-1.5 max-h-80 overflow-y-auto -mx-0.5 px-0.5 py-0.5\"\n          >\n            {items.map((item, index) => {\n              const isSelected = value === item.id\n              const isInteractive = !item.disabled || isSelected\n              const isActive = index === activeIndex\n              return (\n                <div\n                  key={item.id}\n                  id={optionDomId(index)}\n                  className={cn(\n                    'group flex items-center gap-4 rounded-xl border p-4 transition-all duration-150 focus-visible:outline-none focus-visible:shadow-focus',\n                    isInteractive ? 'cursor-pointer' : 'cursor-not-allowed opacity-60',\n                    isSelected\n                      ? 'border-brand-violet bg-brand-violet/5 shadow-sm'\n                      : 'border-input bg-card hover:border-foreground/20 hover:bg-muted/30 hover:shadow-sm',\n                    isActive && !isSelected ? 'border-foreground/20 bg-muted/30 shadow-sm' : null\n                  )}\n                  role=\"option\"\n                  tabIndex={item.disabled ? -1 : 0}\n                  onClick={() => {\n                    if (!isInteractive) return\n                    onChange(item.id)\n                  }}\n                  onKeyDown={(event) => {\n                    if (event.key === 'Enter' || event.key === ' ') {\n                      event.preventDefault()\n                      if (!isInteractive) return\n                      onChange(item.id)\n                    }\n                  }}\n                  aria-selected={isSelected}\n                  aria-disabled={item.disabled && !isSelected ? true : undefined}\n                  title={isSelected ? resolvedSelectedLabel : resolvedSelectLabel}\n                >\n                  {item.icon ? (\n                    <div className=\"flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden [&>svg]:size-6 [&_svg]:text-muted-foreground\">\n                      {item.icon}\n                    </div>\n                  ) : (\n                    <div className={cn(\n                      'flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg border transition-colors',\n                      isSelected\n                        ? 'border-brand-violet/40 bg-brand-violet/10 text-brand-violet'\n                        : 'border-input bg-muted text-muted-foreground group-hover:border-foreground/20'\n                    )}>\n                      <span className=\"text-base font-semibold uppercase\">{item.title.slice(0, 1)}</span>\n                    </div>\n                  )}\n                  <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                    <div className=\"flex items-center justify-between gap-3\">\n                      <div className=\"truncate text-sm font-semibold text-foreground\">{item.title}</div>\n                      {item.rightLabel ? (\n                        <div className=\"shrink-0 text-overline font-medium uppercase tracking-wider text-muted-foreground\">\n                          {item.rightLabel}\n                        </div>\n                      ) : null}\n                    </div>\n                    {item.subtitle ? (\n                      <div className=\"text-xs text-muted-foreground truncate\">{item.subtitle}</div>\n                    ) : null}\n                    {item.description ? (\n                      <div className=\"text-xs text-muted-foreground/70 truncate\">{item.description}</div>\n                    ) : null}\n                  </div>\n                  <div className=\"flex shrink-0 items-center justify-center\">\n                    {isSelected ? (\n                      <Check className=\"size-5 text-brand-violet\" aria-hidden=\"true\" />\n                    ) : (\n                      <div className=\"size-5\" aria-hidden=\"true\" />\n                    )}\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n          {value ? (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"w-fit gap-1 text-sm font-normal\"\n              onClick={() => onChange(null)}\n            >\n              <X className=\"h-4 w-4\" />\n              {resolvedClearLabel}\n            </Button>\n          ) : null}\n        </div>\n      ) : hasTyped ? (\n        <p className=\"text-xs text-muted-foreground\">\n          {resolvedMinQueryHintLabel}\n        </p>\n      ) : (\n        <p className=\"text-xs text-muted-foreground\">{resolvedStartTypingLabel}</p>\n      )}\n      {error ? <p className=\"text-xs text-status-error-text\" role=\"alert\">{resolvedEmptyLabel}</p> : null}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.8-develop.6925.1.cefa200fa4",
+  "version": "0.6.8-develop.6930.1.1e5976efc3",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,14 +155,14 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.8-develop.6925.1.cefa200fa4",
+    "@open-mercato/shared": "0.6.8-develop.6930.1.1e5976efc3",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.3.4",
-    "@open-mercato/shared": "0.6.8-develop.6925.1.cefa200fa4",
+    "@open-mercato/shared": "0.6.8-develop.6930.1.1e5976efc3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.1",

package/src/backend/CrudForm.tsx

@@ -960,6 +960,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     dirtyBaselineSnapshotRef.current = createDirtySnapshot(source)
     dirtyBaselineValuesRef.current = { ...source }
     userEditedFieldIdsRef.current.clear()
+    everEditedFieldIdsRef.current.clear()
     isDirtyRef.current = false
     setHasUnsavedChanges(false)
   }, [])
@@ -1857,6 +1858,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     const field = fieldById.get(fieldId)
     if (!field || field.disabled) return
     if (hiddenBaseFieldIds.has(fieldId) || hiddenInjectedFieldIds.has(fieldId)) return
+    if (!everEditedFieldIdsRef.current.has(fieldId)) return
 
     const nextValues = sourceValues ?? valuesRef.current
     const nextFieldErrors: Record<string, string> = {}
@@ -2309,6 +2311,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       return
     }
     userEditedFieldIdsRef.current.add(id)
+    everEditedFieldIdsRef.current.add(id)
   }, [])
 
   const setValue = React.useCallback((id: string, nextValue: unknown) => {
@@ -2446,6 +2449,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   const dirtyBaselineSnapshotRef = React.useRef<string | undefined>(undefined)
   const dirtyBaselineValuesRef = React.useRef<Record<string, unknown> | undefined>(undefined)
   const userEditedFieldIdsRef = React.useRef<Set<string>>(new Set())
+  const everEditedFieldIdsRef = React.useRef<Set<string>>(new Set())
   React.useLayoutEffect(() => {
     if (!initialValues) return
     const snapshot = JSON.stringify({
@@ -3093,13 +3097,16 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   }
 
   const renderFields = (fieldList: CrudField[]) => {
-    const usesResponsive = fieldList.some(
+    const visibleFieldList = fieldList.filter(
+      (field) => !hiddenBaseFieldIds.has(field.id) && !hiddenInjectedFieldIds.has(field.id)
+    )
+    const usesResponsive = visibleFieldList.some(
       (field) => field.layout === 'half' || field.layout === 'third'
     )
     const gridClass = usesResponsive ? 'grid grid-cols-1 gap-4 md:grid-cols-6' : 'grid grid-cols-1 gap-4'
     return (
       <div className={gridClass}>
-        {fieldList.map((f) => {
+        {visibleFieldList.map((f) => {
           const layout = f.layout ?? 'full'
           const wrapperClassName = usesResponsive ? resolveLayoutClass(layout) : undefined
           return (

package/src/backend/__tests__/CrudForm.render.test.tsx

@@ -360,7 +360,7 @@ describe('CrudForm initialValues', () => {
     })
 
     await waitFor(() => {
-      expect(queryByRole('button', { name: 'Alpha' })).toBeInTheDocument()
+      expect(queryByRole('option', { name: 'Alpha' })).toBeInTheDocument()
     })
 
     jest.useRealTimers()

package/src/backend/__tests__/CrudForm.validation.test.tsx

@@ -175,13 +175,13 @@ describe('CrudForm validation state', () => {
     })
   })
 
-  it('validates number fields on blur', async () => {
+  it('validates number fields on blur only after the user edited them', async () => {
     const fields: CrudField[] = [
       { id: 'title', label: 'Title', type: 'text' },
       { id: 'cf_priority', label: 'Priority', type: 'number', required: true },
     ]
 
-    const { container, findByText } = renderWithProviders(
+    const { container, findByText, queryByText } = renderWithProviders(
       <CrudForm title="Form" fields={fields} onSubmit={() => {}} />,
       {
         dict: {
@@ -194,9 +194,60 @@ describe('CrudForm validation state', () => {
     const priorityInput = container.querySelector('[data-crud-field-id="cf_priority"] input[type="number"]')
     expect(priorityInput).not.toBeNull()
 
+    // Blurring an untouched field must NOT flag the required error — tabbing
+    // through an empty form is not an error condition.
     await act(async () => {
       fireEvent.blur(priorityInput as HTMLInputElement)
     })
+    expect(queryByText('This field is required')).toBeNull()
+
+    // After the user actually edits the field, clearing it and blurring flags it.
+    await act(async () => {
+      fireEvent.change(priorityInput as HTMLInputElement, { target: { value: '5' } })
+    })
+    await act(async () => {
+      fireEvent.change(priorityInput as HTMLInputElement, { target: { value: '' } })
+    })
+    await act(async () => {
+      fireEvent.blur(priorityInput as HTMLInputElement)
+    })
+
+    expect(await findByText('This field is required')).toBeInTheDocument()
+  })
+
+  it('does not run schema validation when an untouched required field blurs', async () => {
+    const fields: CrudField[] = [
+      { id: 'firstName', label: 'First name', type: 'text', required: true },
+    ]
+    const schema = z.object({
+      firstName: z.string().trim().min(1),
+    })
+
+    const { container, findByText, queryByText } = renderWithProviders(
+      <CrudForm title="Form" schema={schema} fields={fields} onSubmit={() => {}} />,
+      {
+        dict: {
+          'ui.forms.actions.save': 'Save',
+          'ui.forms.errors.required': 'This field is required',
+        },
+      },
+    )
+
+    const firstNameInput = container.querySelector('[data-crud-field-id="firstName"] input[type="text"]')
+    expect(firstNameInput).not.toBeNull()
+
+    await act(async () => {
+      fireEvent.blur(firstNameInput as HTMLInputElement)
+    })
+
+    expect(queryByText('Invalid input: expected string, received undefined')).toBeNull()
+    expect(queryByText('This field is required')).toBeNull()
+
+    await act(async () => {
+      fireEvent.change(firstNameInput as HTMLInputElement, { target: { value: 'Jane' } })
+      fireEvent.change(firstNameInput as HTMLInputElement, { target: { value: '' } })
+      fireEvent.blur(firstNameInput as HTMLInputElement)
+    })
 
     expect(await findByText('This field is required')).toBeInTheDocument()
   })

package/src/backend/__tests__/CrudForm.visibleWhen.test.tsx

@@ -0,0 +1,108 @@
+/** @jest-environment jsdom */
+jest.setTimeout(15000)
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: () => {} }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: async () => ({ ok: true }) }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
+
+import * as React from 'react'
+import { act, fireEvent } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CrudForm, type CrudField, type CrudFieldGroup } from '../CrudForm'
+
+const dict = {
+  'ui.forms.actions.save': 'Save',
+  'ui.forms.select.emptyOption': '—',
+}
+
+const fields: CrudField[] = [
+  {
+    id: 'commodity',
+    label: 'Commodity',
+    type: 'select',
+    options: [
+      { value: 'coffee', label: 'Coffee' },
+      { value: 'wood', label: 'Wood' },
+    ],
+  },
+  {
+    id: 'speciesScientificName',
+    label: 'Scientific species name',
+    type: 'text',
+    visibleWhen: { field: 'commodity', equals: 'wood' },
+  },
+]
+
+const groups: CrudFieldGroup[] = [
+  { id: 'details', title: 'Details', column: 1, fields: ['commodity', 'speciesScientificName'] },
+]
+
+function renderForm(commodity: string, withGroups: boolean) {
+  return renderWithProviders(
+    <CrudForm
+      title="Form"
+      fields={fields}
+      groups={withGroups ? groups : undefined}
+      initialValues={{ commodity, speciesScientificName: '' }}
+      onSubmit={() => {}}
+    />,
+    { dict },
+  )
+}
+
+describe('CrudForm visibleWhen', () => {
+  it('hides a conditional field inside a group when the condition is not met', () => {
+    const { container } = renderForm('coffee', true)
+    expect(container.querySelector('[data-crud-field-id="commodity"]')).not.toBeNull()
+    expect(container.querySelector('[data-crud-field-id="speciesScientificName"]')).toBeNull()
+  })
+
+  it('shows a conditional field inside a group when the condition is met', () => {
+    const { container } = renderForm('wood', true)
+    expect(container.querySelector('[data-crud-field-id="speciesScientificName"]')).not.toBeNull()
+  })
+
+  it('hides a conditional field inside a group when the driving value is empty', () => {
+    const { container } = renderForm('', true)
+    expect(container.querySelector('[data-crud-field-id="speciesScientificName"]')).toBeNull()
+  })
+
+  it('hides a conditional field in an ungrouped form when the condition is not met', () => {
+    const { container } = renderForm('coffee', false)
+    expect(container.querySelector('[data-crud-field-id="speciesScientificName"]')).toBeNull()
+  })
+
+  it('reveals a grouped conditional field when the driving value changes', async () => {
+    const { container } = renderForm('coffee', true)
+    expect(container.querySelector('[data-crud-field-id="speciesScientificName"]')).toBeNull()
+
+    const select = container.querySelector('[data-crud-field-id="commodity"] select') as HTMLSelectElement | null
+    if (!select) {
+      // The select renders as a Radix combobox in some builds; drive the value through the
+      // hidden native control the field always mirrors.
+      const hidden = container.querySelector('[data-crud-field-id="commodity"] input') as HTMLInputElement
+      await act(async () => {
+        fireEvent.change(hidden, { target: { value: 'wood' } })
+      })
+    } else {
+      await act(async () => {
+        fireEvent.change(select, { target: { value: 'wood' } })
+      })
+    }
+
+    expect(container.querySelector('[data-crud-field-id="speciesScientificName"]')).not.toBeNull()
+  })
+})

package/src/backend/icons/lucideRegistry.generated.tsx

@@ -50,8 +50,10 @@ import {
   Download,
   ExternalLink,
   Eye,
+  FileCheck,
   FileMinus,
   FilePenLine,
+  Files,
   FileSpreadsheet,
   FileText,
   FilterX,
@@ -74,6 +76,7 @@ import {
   Key,
   KeyRound,
   Layers,
+  Leaf,
   Lightbulb,
   LineChart,
   Link,
@@ -83,6 +86,7 @@ import {
   Lock,
   Mail,
   MailOpen,
+  Map,
   MapPin,
   MapPinned,
   MessageCircle,
@@ -133,6 +137,7 @@ import {
   TriangleAlert,
   Trophy,
   Truck,
+  Undo,
   Undo2,
   Unlock,
   User,
@@ -198,10 +203,12 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'download': Download,
   'external-link': ExternalLink,
   'eye': Eye,
+  'file-check': FileCheck,
   'file-minus': FileMinus,
   'file-pen-line': FilePenLine,
   'file-spreadsheet': FileSpreadsheet,
   'file-text': FileText,
+  'files': Files,
   'filter-x': FilterX,
   'flag': Flag,
   'flame': Flame,
@@ -222,6 +229,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'key': Key,
   'key-round': KeyRound,
   'layers': Layers,
+  'leaf': Leaf,
   'lightbulb': Lightbulb,
   'line-chart': LineChart,
   'link': Link,
@@ -231,6 +239,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'lock': Lock,
   'mail': Mail,
   'mail-open': MailOpen,
+  'map': Map,
   'map-pin': MapPin,
   'map-pinned': MapPinned,
   'message-circle': MessageCircle,
@@ -281,6 +290,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'triangle-alert': TriangleAlert,
   'trophy': Trophy,
   'truck': Truck,
+  'undo': Undo,
   'undo-2': Undo2,
   'unlock': Unlock,
   'user': User,

package/src/backend/inputs/ComboboxInput.tsx

@@ -92,6 +92,7 @@ export function ComboboxInput({
   const [touched, setTouched] = React.useState(false)
   const [showSuggestions, setShowSuggestions] = React.useState(false)
   const [selectedIndex, setSelectedIndex] = React.useState(-1)
+  const listboxId = React.useId()
   const inputRef = React.useRef<HTMLInputElement>(null)
   const loadingRef = React.useRef(false)
   const blurCloseTimerRef = React.useRef<number | null>(null)
@@ -365,7 +366,9 @@ export function ComboboxInput({
           confirmSelection(input)
         }
       } else if (event.key === 'Escape') {
+        if (!showSuggestions) return
         event.preventDefault()
+        event.stopPropagation()
         setShowSuggestions(false)
         setSelectedIndex(-1)
       }
@@ -373,7 +376,23 @@ export function ComboboxInput({
     [confirmSelection, disabled, filteredSuggestions, input, selectValue, selectedIndex, showSuggestions]
   )
 
+  const optionDomId = React.useCallback(
+    (index: number) => `${listboxId}-option-${index}`,
+    [listboxId],
+  )
+
+  React.useEffect(() => {
+    if (selectedIndex < 0 || !showSuggestions) return
+    const activeElement = typeof document !== 'undefined'
+      ? document.getElementById(optionDomId(selectedIndex))
+      : null
+    if (typeof activeElement?.scrollIntoView === 'function') {
+      activeElement.scrollIntoView({ block: 'nearest' })
+    }
+  }, [optionDomId, selectedIndex, showSuggestions])
+
   const showClearButton = clearable && !disabled && (value !== '' || input !== '')
+  const listboxVisible = showSuggestions && !disabled && (loading || filteredSuggestions.length > 0)
 
   return (
     <div className="relative w-full">
@@ -395,6 +414,11 @@ export function ComboboxInput({
         autoFocus={autoFocus}
         data-crud-focus-target=""
         disabled={disabled}
+        role="combobox"
+        aria-expanded={listboxVisible}
+        aria-controls={listboxId}
+        aria-autocomplete="list"
+        aria-activedescendant={listboxVisible && selectedIndex >= 0 ? optionDomId(selectedIndex) : undefined}
         onFocus={() => {
           setTouched(true)
           if (suppressOpenOnFocusRef.current) {
@@ -442,18 +466,21 @@ export function ComboboxInput({
         </IconButton>
       ) : null}
 
-      {showSuggestions && !disabled && (loading || filteredSuggestions.length > 0) && (
+      {listboxVisible && (
         <div className="absolute z-popover w-full mt-1 rounded-md border border-input bg-popover p-2 shadow-md max-h-48 sm:max-h-60 overflow-auto">
           {loading && touched ? (
             <div className="px-2 py-1.5 text-xs text-muted-foreground">{loadingLabel}</div>
           ) : (
-            <div className="flex flex-col gap-1">
+            <div id={listboxId} role="listbox" className="flex flex-col gap-1">
               {filteredSuggestions.map((option, index) => (
                 <Button
                   key={option.value}
+                  id={optionDomId(index)}
                   type="button"
                   variant="ghost"
                   size="sm"
+                  role="option"
+                  aria-selected={index === selectedIndex}
                   className={[
                     'w-full h-auto justify-start font-normal text-left flex flex-col items-start rounded-lg p-2',
                     index === selectedIndex ? 'bg-muted' : '',

package/src/backend/inputs/LookupSelect.tsx

@@ -86,6 +86,8 @@ export function LookupSelect({
   const [hasTyped, setHasTyped] = React.useState(defaultOpen)
   const [error, setError] = React.useState<string | null>(null)
   const [fetchKey, setFetchKey] = React.useState(0)
+  const [activeIndex, setActiveIndex] = React.useState(-1)
+  const listboxId = React.useId()
   const fetchItemsRef = React.useRef(fetchItems ?? fetchOptions)
   const setQueryRef = React.useRef(setQuery)
   const onReadyRef = React.useRef(onReady)
@@ -116,6 +118,73 @@ export function LookupSelect({
 
   const shouldSearch =
     defaultOpen || query.trim().length >= minQuery || Boolean(value && (options?.length ?? 0) > 0)
+
+  React.useEffect(() => {
+    setActiveIndex(-1)
+  }, [items])
+
+  const optionDomId = React.useCallback(
+    (index: number) => `${listboxId}-option-${index}`,
+    [listboxId],
+  )
+
+  const isInteractiveItem = React.useCallback(
+    (item: LookupSelectItem) => !item.disabled || value === item.id,
+    [value],
+  )
+
+  const moveActiveIndex = React.useCallback((direction: 1 | -1) => {
+    setActiveIndex((current) => {
+      if (!items.length) return -1
+      let next = current
+      for (let step = 0; step < items.length; step += 1) {
+        next = (next + direction + items.length) % items.length
+        if (isInteractiveItem(items[next])) return next
+      }
+      return current
+    })
+  }, [isInteractiveItem, items])
+
+  React.useEffect(() => {
+    if (activeIndex < 0) return
+    const activeElement = typeof document !== 'undefined'
+      ? document.getElementById(optionDomId(activeIndex))
+      : null
+    if (typeof activeElement?.scrollIntoView === 'function') {
+      activeElement.scrollIntoView({ block: 'nearest' })
+    }
+  }, [activeIndex, optionDomId])
+
+  const listboxVisible = shouldSearch && !disabled
+  const handleInputKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!listboxVisible) return
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      moveActiveIndex(1)
+      return
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      moveActiveIndex(-1)
+      return
+    }
+    if (event.key === 'Enter') {
+      if (activeIndex < 0 || activeIndex >= items.length) return
+      const item = items[activeIndex]
+      if (!isInteractiveItem(item)) return
+      event.preventDefault()
+      onChange(item.id)
+      setActiveIndex(-1)
+      return
+    }
+    if (event.key === 'Escape') {
+      if (query.length === 0 && activeIndex < 0) return
+      event.preventDefault()
+      event.stopPropagation()
+      setQuery('')
+      setActiveIndex(-1)
+    }
+  }, [activeIndex, items, isInteractiveItem, listboxVisible, moveActiveIndex, onChange, query])
   React.useEffect(() => {
     if (disabled) {
       setItems(options ?? [])
@@ -169,8 +238,14 @@ export function LookupSelect({
               setQuery(event.target.value)
               setHasTyped(true)
             }}
+            onKeyDown={handleInputKeyDown}
             placeholder={resolvedSearchPlaceholder}
             disabled={disabled}
+            role="combobox"
+            aria-expanded={listboxVisible}
+            aria-controls={listboxId}
+            aria-autocomplete="list"
+            aria-activedescendant={activeIndex >= 0 ? optionDomId(activeIndex) : undefined}
           />
         </div>
         {actionSlot ? <div className="sm:self-start">{actionSlot}</div> : null}
@@ -186,21 +261,28 @@ export function LookupSelect({
           {!loading && !loadingProp && !items.length ? (
             <p className="text-xs text-muted-foreground">{resolvedEmptyLabel}</p>
           ) : null}
-          <div className="flex flex-col gap-1.5 max-h-80 overflow-y-auto -mx-0.5 px-0.5 py-0.5">
-            {items.map((item) => {
+          <div
+            id={listboxId}
+            role="listbox"
+            className="flex flex-col gap-1.5 max-h-80 overflow-y-auto -mx-0.5 px-0.5 py-0.5"
+          >
+            {items.map((item, index) => {
               const isSelected = value === item.id
               const isInteractive = !item.disabled || isSelected
+              const isActive = index === activeIndex
               return (
                 <div
                   key={item.id}
+                  id={optionDomId(index)}
                   className={cn(
                     'group flex items-center gap-4 rounded-xl border p-4 transition-all duration-150 focus-visible:outline-none focus-visible:shadow-focus',
                     isInteractive ? 'cursor-pointer' : 'cursor-not-allowed opacity-60',
                     isSelected
                       ? 'border-brand-violet bg-brand-violet/5 shadow-sm'
-                      : 'border-input bg-card hover:border-foreground/20 hover:bg-muted/30 hover:shadow-sm'
+                      : 'border-input bg-card hover:border-foreground/20 hover:bg-muted/30 hover:shadow-sm',
+                    isActive && !isSelected ? 'border-foreground/20 bg-muted/30 shadow-sm' : null
                   )}
-                  role="button"
+                  role="option"
                   tabIndex={item.disabled ? -1 : 0}
                   onClick={() => {
                     if (!isInteractive) return
@@ -213,7 +295,7 @@ export function LookupSelect({
                       onChange(item.id)
                     }
                   }}
-                  aria-pressed={isSelected}
+                  aria-selected={isSelected}
                   aria-disabled={item.disabled && !isSelected ? true : undefined}
                   title={isSelected ? resolvedSelectedLabel : resolvedSelectLabel}
                 >