@freighttech/ui 0.13.18

package/dist/backend/dynamic-table/components/EntitySearchEditor.js

@@ -0,0 +1,369 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { apiFetch } from "../../utils/api.js";
+if (typeof window !== "undefined") {
+  import("../styles/DynamicTable.css.js");
+}
+const POPUP_MAX_HEIGHT = 200;
+function calculatePopupPosition(cellRef) {
+  if (!cellRef.current) return { top: 0, left: 0, width: 0, openAbove: false };
+  const rect = cellRef.current.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  const spaceBelow = viewportHeight - rect.bottom;
+  const spaceAbove = rect.top;
+  let top;
+  let openAbove = false;
+  if (spaceBelow >= POPUP_MAX_HEIGHT || spaceBelow >= spaceAbove) {
+    top = rect.bottom + 2;
+  } else {
+    top = rect.top - 2;
+    openAbove = true;
+  }
+  return {
+    top,
+    left: rect.left,
+    width: Math.max(rect.width, 200),
+    openAbove
+  };
+}
+const UUID_WITH_DASHES = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const UUID_WITHOUT_DASHES = /^[0-9a-f]{32}$/i;
+const HEX_ID_PATTERN = /^[0-9a-f]{8,}$/i;
+function looksLikeIdOrUuid(value) {
+  if (!value) return false;
+  return UUID_WITH_DASHES.test(value) || UUID_WITHOUT_DASHES.test(value) || HEX_ID_PATTERN.test(value);
+}
+function defaultFormatOption(result) {
+  const title = result.presenter?.title;
+  const subtitle = result.presenter?.subtitle;
+  const primary = title && !looksLikeIdOrUuid(title) ? title : result.recordId.slice(0, 8) + "...";
+  const secondary = subtitle && !looksLikeIdOrUuid(subtitle) ? subtitle : void 0;
+  return { primary, secondary };
+}
+function EntitySearchEditor({
+  config,
+  value,
+  onChange,
+  onSave,
+  onCancel,
+  rowData
+}) {
+  const {
+    entityType,
+    extractValue,
+    additionalFields,
+    formatOption = defaultFormatOption,
+    placeholder = "Type to search...",
+    transformInput,
+    parseInitialValue,
+    minQueryLength = 2,
+    debounceMs = 300,
+    noResultsText = "No results found",
+    searchingText = "Searching...",
+    searchUrl = "/api/search/search",
+    /**
+     * `'fulltext'`, NOT `'meilisearch'`.
+     *
+     * The search module's valid strategy ids are `'tokens' | 'vector' |
+     * 'fulltext'`, and the Meilisearch driver registers under `fulltext`
+     * (`@open-mercato/search/src/fulltext/drivers`). `strategies=meilisearch`
+     * matches NO strategy, so these call sites silently fell through to hashed
+     * token search — which returns results, which is why nobody caught it.
+     * `LocationSearchInput` always had it right.
+     */
+    searchStrategy = "fulltext",
+    searchLimit = 20,
+    // Default to scoped=true for organization isolation
+    scoped = true,
+    initialSuggestions,
+    buildExtraParams
+  } = config;
+  const getInitialDisplayValue = (val) => {
+    const strValue = String(val ?? "");
+    if (parseInitialValue) {
+      return parseInitialValue(strValue);
+    }
+    try {
+      const parsed = JSON.parse(strValue);
+      if (parsed && typeof parsed === "object" && "name" in parsed) {
+        return parsed.name;
+      }
+    } catch {
+    }
+    return strValue;
+  };
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0, width: 0, openAbove: false });
+  const [textValue, setTextValue] = useState(getInitialDisplayValue(value));
+  const [results, setResults] = useState([]);
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+  const [hasUserTyped, setHasUserTyped] = useState(false);
+  const [initialResults, setInitialResults] = useState([]);
+  const [isLoadingInitial, setIsLoadingInitial] = useState(false);
+  const [initialLoaded, setInitialLoaded] = useState(false);
+  const cellRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const isClickingDropdownRef = useRef(false);
+  const abortControllerRef = useRef(null);
+  useEffect(() => {
+    setTimeout(() => {
+      if (cellRef.current) {
+        const length = cellRef.current.value?.length || 0;
+        cellRef.current.selectionStart = length;
+        cellRef.current.selectionEnd = length;
+      }
+    }, 0);
+  }, []);
+  useEffect(() => {
+    if (!initialSuggestions?.loadItems || initialLoaded) return;
+    const loadInitial = async () => {
+      setIsLoadingInitial(true);
+      try {
+        const items = await initialSuggestions.loadItems();
+        const limit = initialSuggestions.limit ?? 4;
+        setInitialResults(items.slice(0, limit));
+        if (items.length > 0 && !hasUserTyped) {
+          setShowDropdown(true);
+        }
+      } catch (error) {
+        console.error("Failed to load initial suggestions:", error);
+      } finally {
+        setIsLoadingInitial(false);
+        setInitialLoaded(true);
+      }
+    };
+    loadInitial();
+  }, [initialSuggestions, initialLoaded, hasUserTyped]);
+  useEffect(() => {
+    if (!hasUserTyped) return;
+    const timer = setTimeout(() => {
+      setDebouncedQuery(textValue);
+    }, debounceMs);
+    return () => clearTimeout(timer);
+  }, [textValue, hasUserTyped, debounceMs]);
+  useEffect(() => {
+    if (!hasUserTyped || debouncedQuery.length < minQueryLength) {
+      setResults([]);
+      setShowDropdown(false);
+      return;
+    }
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    const fetchResults = async () => {
+      setIsLoading(true);
+      try {
+        const params = new URLSearchParams({
+          q: debouncedQuery,
+          strategies: searchStrategy,
+          entityTypes: entityType,
+          limit: String(searchLimit),
+          scoped: scoped ? "true" : "false"
+        });
+        if (buildExtraParams) {
+          for (const [k, v] of Object.entries(buildExtraParams(rowData) || {})) {
+            if (v) params.set(k, v);
+          }
+        }
+        const response = await apiFetch(`${searchUrl}?${params.toString()}`, {
+          signal: controller.signal
+        });
+        if (!response.ok) {
+          throw new Error("Search failed");
+        }
+        const data = await response.json();
+        setResults(data.results || []);
+        setShowDropdown(true);
+        setHighlightedIndex(0);
+      } catch (error) {
+        if (error.name !== "AbortError") {
+          console.error("Entity search error:", error);
+          setResults([]);
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchResults();
+    return () => controller.abort();
+  }, [debouncedQuery, entityType, minQueryLength, searchUrl, searchStrategy, searchLimit, scoped]);
+  useEffect(() => {
+    if (cellRef.current) {
+      const pos = calculatePopupPosition(cellRef);
+      setPosition(pos);
+    }
+    const updatePosition = () => {
+      if (cellRef.current && showDropdown) {
+        const pos = calculatePopupPosition(cellRef);
+        setPosition(pos);
+      }
+    };
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [showDropdown]);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      const isOutsideCell = cellRef.current && !cellRef.current.contains(e.target);
+      const isOutsideDropdown = !dropdownRef.current || !dropdownRef.current.contains(e.target);
+      if (isOutsideCell && isOutsideDropdown) {
+        setShowDropdown(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleOptionClick = useCallback((result) => {
+    isClickingDropdownRef.current = true;
+    const selectedValue = extractValue(result);
+    const { primary } = formatOption(result);
+    if (additionalFields && rowData) {
+      const extraFields = additionalFields(result);
+      Object.assign(rowData, extraFields);
+    }
+    setTextValue(primary);
+    setShowDropdown(false);
+    onChange(selectedValue);
+    onSave(selectedValue);
+  }, [extractValue, formatOption, additionalFields, rowData, onChange, onSave]);
+  const handleKeyDown = useCallback((e) => {
+    const displayResults = hasUserTyped ? results : initialResults;
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (showDropdown && displayResults.length > 0) {
+        const selected = displayResults[highlightedIndex];
+        handleOptionClick(selected);
+      } else {
+        setShowDropdown(false);
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      setShowDropdown(false);
+      onCancel();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightedIndex(
+        (prev) => prev < displayResults.length - 1 ? prev + 1 : prev
+      );
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightedIndex((prev) => prev > 0 ? prev - 1 : 0);
+    } else if (e.key === "Tab") {
+      setShowDropdown(false);
+    }
+  }, [showDropdown, results, initialResults, hasUserTyped, highlightedIndex, handleOptionClick, onCancel]);
+  const handleTextChange = useCallback((e) => {
+    let val = e.target.value;
+    if (transformInput) {
+      val = transformInput(val);
+    }
+    setTextValue(val);
+    onChange(val);
+    setHasUserTyped(true);
+  }, [onChange, transformInput]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: cellRef,
+        value: textValue,
+        onChange: handleTextChange,
+        onKeyDown: handleKeyDown,
+        onBlur: () => {
+        },
+        autoFocus: true,
+        className: "hot-cell-editor hot-dropdown-editor",
+        placeholder
+      }
+    ),
+    showDropdown && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: dropdownRef,
+          className: "hot-editor-dropdown",
+          style: {
+            position: "fixed",
+            top: `${position.top}px`,
+            left: `${position.left}px`,
+            width: `${position.width}px`,
+            maxHeight: `${POPUP_MAX_HEIGHT}px`,
+            overflowY: "auto",
+            zIndex: 1e4,
+            pointerEvents: "auto",
+            ...position.openAbove ? { transform: "translateY(-100%)" } : {}
+          },
+          onMouseDown: (e) => {
+            e.stopPropagation();
+            isClickingDropdownRef.current = true;
+          },
+          onMouseUp: () => {
+            isClickingDropdownRef.current = false;
+          },
+          children: (() => {
+            const displayResults = hasUserTyped ? results : initialResults;
+            const showLoading = hasUserTyped ? isLoading : isLoadingInitial;
+            if (showLoading) {
+              return /* @__PURE__ */ jsx("div", { className: "hot-editor-dropdown-empty", children: searchingText });
+            }
+            if (displayResults.length === 0) {
+              if (hasUserTyped) {
+                return /* @__PURE__ */ jsx("div", { className: "hot-editor-dropdown-empty", children: noResultsText });
+              }
+              return null;
+            }
+            return displayResults.map((result, index) => {
+              const { primary, secondary } = formatOption(result);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `hot-editor-dropdown-item ${index === highlightedIndex ? "highlighted" : ""}`,
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleOptionClick(result);
+                  },
+                  onMouseEnter: () => setHighlightedIndex(index),
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "hot-editor-dropdown-item-primary", children: primary }),
+                    secondary && /* @__PURE__ */ jsx("div", { className: "hot-editor-dropdown-item-secondary", children: secondary })
+                  ]
+                },
+                result.recordId
+              );
+            });
+          })()
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function createEntitySearchEditor(config) {
+  return (value, onChange, onSave, onCancel, rowData) => /* @__PURE__ */ jsx(
+    EntitySearchEditor,
+    {
+      config,
+      value,
+      onChange,
+      onSave,
+      onCancel,
+      rowData
+    }
+  );
+}
+export {
+  EntitySearchEditor,
+  createEntitySearchEditor
+};
+//# sourceMappingURL=EntitySearchEditor.js.map

package/dist/backend/dynamic-table/components/EntitySearchEditor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/EntitySearchEditor.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useState, useEffect, useRef, useCallback } from 'react'\nimport { createPortal } from 'react-dom'\nimport { apiFetch } from '../../utils/api'\n\n// Dynamically load editor styles\nif (typeof window !== 'undefined') {\n  // @ts-ignore - CSS import handled by bundler\n  import('../styles/DynamicTable.css')\n}\n\nconst POPUP_MAX_HEIGHT = 200\n\nexport type SearchResult = {\n  entityId: string\n  recordId: string\n  presenter?: {\n    title?: string\n    subtitle?: string\n    icon?: string\n    badge?: string\n  }\n  fields?: Record<string, unknown>\n}\n\nexport type EntitySearchEditorConfig = {\n  entityType: string\n  extractValue: (result: SearchResult) => string\n  additionalFields?: (result: SearchResult) => Record<string, any>\n  formatOption?: (result: SearchResult) => {\n    primary: string\n    secondary?: string\n  }\n  placeholder?: string\n  transformInput?: (value: string) => string\n  // Parse initial value for display (e.g., extract name from JSON)\n  parseInitialValue?: (value: string) => string\n  minQueryLength?: number\n  debounceMs?: number\n  noResultsText?: string\n  searchingText?: string\n  // Search API configuration\n  searchUrl?: string\n  searchStrategy?: string\n  searchLimit?: number\n  // Extra query params merged into the search request, computed per row. Lets a\n  // cell filter results by row context (e.g. a leg's mode \u2192 carrier role) when\n  // paired with a custom `searchUrl`. Falsy values are skipped.\n  buildExtraParams?: (rowData: any) => Record<string, string | null | undefined>\n  // Organization scoping - when true (default), only show results from current organization\n  scoped?: boolean\n  // Initial suggestions shown when dropdown opens without typing\n  initialSuggestions?: {\n    // Async function to load initial suggestions (called once on mount)\n    loadItems: () => Promise<SearchResult[]>\n    // Number of items to show (default: 4)\n    limit?: number\n  }\n}\n\ntype EntitySearchEditorProps = {\n  config: EntitySearchEditorConfig\n  value: any\n  onChange: (newValue: any) => void\n  onSave: (newValue?: any) => void\n  onCancel: () => void\n  rowData?: any\n}\n\nfunction calculatePopupPosition(cellRef: React.RefObject<HTMLElement | null>) {\n  if (!cellRef.current) return { top: 0, left: 0, width: 0, openAbove: false }\n\n  const rect = cellRef.current.getBoundingClientRect()\n  const viewportHeight = window.innerHeight\n\n  const spaceBelow = viewportHeight - rect.bottom\n  const spaceAbove = rect.top\n\n  let top: number\n  let openAbove = false\n  if (spaceBelow >= POPUP_MAX_HEIGHT || spaceBelow >= spaceAbove) {\n    top = rect.bottom + 2\n  } else {\n    // Position at cell top; renderers apply translateY(-100%) to flip above\n    top = rect.top - 2\n    openAbove = true\n  }\n\n  return {\n    top,\n    left: rect.left,\n    width: Math.max(rect.width, 200),\n    openAbove,\n  }\n}\n\n// Patterns to filter out IDs from display\n// Matches: full UUIDs with dashes, UUIDs without dashes, and hex-only ID strings (8+ chars)\nconst UUID_WITH_DASHES = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i\nconst UUID_WITHOUT_DASHES = /^[0-9a-f]{32}$/i\nconst HEX_ID_PATTERN = /^[0-9a-f]{8,}$/i\n\nfunction looksLikeIdOrUuid(value: string | undefined): boolean {\n  if (!value) return false\n  return UUID_WITH_DASHES.test(value) || UUID_WITHOUT_DASHES.test(value) || HEX_ID_PATTERN.test(value)\n}\n\nfunction defaultFormatOption(result: SearchResult): { primary: string; secondary?: string } {\n  const title = result.presenter?.title\n  const subtitle = result.presenter?.subtitle\n\n  // Don't show UUID/hex ID as primary - use a fallback\n  const primary = title && !looksLikeIdOrUuid(title)\n    ? title\n    : result.recordId.slice(0, 8) + '...'\n\n  // Don't show UUID/hex ID as secondary\n  const secondary = subtitle && !looksLikeIdOrUuid(subtitle)\n    ? subtitle\n    : undefined\n\n  return { primary, secondary }\n}\n\nexport function EntitySearchEditor({\n  config,\n  value,\n  onChange,\n  onSave,\n  onCancel,\n  rowData,\n}: EntitySearchEditorProps) {\n  const {\n    entityType,\n    extractValue,\n    additionalFields,\n    formatOption = defaultFormatOption,\n    placeholder = 'Type to search...',\n    transformInput,\n    parseInitialValue,\n    minQueryLength = 2,\n    debounceMs = 300,\n    noResultsText = 'No results found',\n    searchingText = 'Searching...',\n    searchUrl = '/api/search/search',\n    /**\n     * `'fulltext'`, NOT `'meilisearch'`.\n     *\n     * The search module's valid strategy ids are `'tokens' | 'vector' |\n     * 'fulltext'`, and the Meilisearch driver registers under `fulltext`\n     * (`@open-mercato/search/src/fulltext/drivers`). `strategies=meilisearch`\n     * matches NO strategy, so these call sites silently fell through to hashed\n     * token search \u2014 which returns results, which is why nobody caught it.\n     * `LocationSearchInput` always had it right.\n     */\n    searchStrategy = 'fulltext',\n    searchLimit = 20,\n    // Default to scoped=true for organization isolation\n    scoped = true,\n    initialSuggestions,\n    buildExtraParams,\n  } = config\n\n  // Parse the initial value for display (e.g., extract name from JSON)\n  const getInitialDisplayValue = (val: any): string => {\n    const strValue = String(val ?? '')\n    if (parseInitialValue) {\n      return parseInitialValue(strValue)\n    }\n    // Default: try to parse as JSON and extract 'name' field\n    try {\n      const parsed = JSON.parse(strValue)\n      if (parsed && typeof parsed === 'object' && 'name' in parsed) {\n        return parsed.name\n      }\n    } catch {\n      // Not JSON, return as-is\n    }\n    return strValue\n  }\n\n  const [showDropdown, setShowDropdown] = useState(false)\n  const [position, setPosition] = useState({ top: 0, left: 0, width: 0, openAbove: false })\n  const [textValue, setTextValue] = useState(getInitialDisplayValue(value))\n  const [results, setResults] = useState<SearchResult[]>([])\n  const [highlightedIndex, setHighlightedIndex] = useState(0)\n  const [isLoading, setIsLoading] = useState(false)\n  const [debouncedQuery, setDebouncedQuery] = useState('')\n  const [hasUserTyped, setHasUserTyped] = useState(false)\n  // Initial suggestions state\n  const [initialResults, setInitialResults] = useState<SearchResult[]>([])\n  const [isLoadingInitial, setIsLoadingInitial] = useState(false)\n  const [initialLoaded, setInitialLoaded] = useState(false)\n\n  const cellRef = useRef<HTMLTextAreaElement>(null)\n  const dropdownRef = useRef<HTMLDivElement>(null)\n  const isClickingDropdownRef = useRef(false)\n  const abortControllerRef = useRef<AbortController | null>(null)\n\n  // Position cursor at end of text on mount\n  useEffect(() => {\n    setTimeout(() => {\n      if (cellRef.current) {\n        const length = cellRef.current.value?.length || 0\n        cellRef.current.selectionStart = length\n        cellRef.current.selectionEnd = length\n      }\n    }, 0)\n  }, [])\n\n  // Load initial suggestions on mount (if configured)\n  useEffect(() => {\n    if (!initialSuggestions?.loadItems || initialLoaded) return\n\n    const loadInitial = async () => {\n      setIsLoadingInitial(true)\n      try {\n        const items = await initialSuggestions.loadItems()\n        const limit = initialSuggestions.limit ?? 4\n        setInitialResults(items.slice(0, limit))\n        // Show dropdown immediately if we have initial results and user hasn't typed\n        if (items.length > 0 && !hasUserTyped) {\n          setShowDropdown(true)\n        }\n      } catch (error) {\n        console.error('Failed to load initial suggestions:', error)\n      } finally {\n        setIsLoadingInitial(false)\n        setInitialLoaded(true)\n      }\n    }\n\n    loadInitial()\n  }, [initialSuggestions, initialLoaded, hasUserTyped])\n\n  // Debounce search query\n  useEffect(() => {\n    if (!hasUserTyped) return\n    const timer = setTimeout(() => {\n      setDebouncedQuery(textValue)\n    }, debounceMs)\n    return () => clearTimeout(timer)\n  }, [textValue, hasUserTyped, debounceMs])\n\n  // Fetch results from search API\n  useEffect(() => {\n    if (!hasUserTyped || debouncedQuery.length < minQueryLength) {\n      setResults([])\n      setShowDropdown(false)\n      return\n    }\n\n    // Cancel previous request\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort()\n    }\n\n    const controller = new AbortController()\n    abortControllerRef.current = controller\n\n    const fetchResults = async () => {\n      setIsLoading(true)\n      try {\n        const params = new URLSearchParams({\n          q: debouncedQuery,\n          strategies: searchStrategy,\n          entityTypes: entityType,\n          limit: String(searchLimit),\n          scoped: scoped ? 'true' : 'false',\n        })\n        // Per-row extra params (e.g. a leg mode \u2192 carrier role filter).\n        if (buildExtraParams) {\n          for (const [k, v] of Object.entries(buildExtraParams(rowData) || {})) {\n            if (v) params.set(k, v)\n          }\n        }\n\n        const response = await apiFetch(`${searchUrl}?${params.toString()}`, {\n          signal: controller.signal,\n        })\n\n        if (!response.ok) {\n          throw new Error('Search failed')\n        }\n\n        const data = await response.json()\n        setResults(data.results || [])\n        setShowDropdown(true)\n        setHighlightedIndex(0)\n      } catch (error) {\n        if ((error as Error).name !== 'AbortError') {\n          console.error('Entity search error:', error)\n          setResults([])\n        }\n      } finally {\n        setIsLoading(false)\n      }\n    }\n\n    fetchResults()\n\n    return () => controller.abort()\n  }, [debouncedQuery, entityType, minQueryLength, searchUrl, searchStrategy, searchLimit, scoped])\n\n  // Update position\n  useEffect(() => {\n    if (cellRef.current) {\n      const pos = calculatePopupPosition(cellRef)\n      setPosition(pos)\n    }\n\n    const updatePosition = () => {\n      if (cellRef.current && showDropdown) {\n        const pos = calculatePopupPosition(cellRef)\n        setPosition(pos)\n      }\n    }\n\n    window.addEventListener('scroll', updatePosition, true)\n    window.addEventListener('resize', updatePosition)\n\n    return () => {\n      window.removeEventListener('scroll', updatePosition, true)\n      window.removeEventListener('resize', updatePosition)\n    }\n  }, [showDropdown])\n\n  // Click outside handling\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      const isOutsideCell = cellRef.current && !cellRef.current.contains(e.target as Node)\n      const isOutsideDropdown = !dropdownRef.current || !dropdownRef.current.contains(e.target as Node)\n\n      if (isOutsideCell && isOutsideDropdown) {\n        setShowDropdown(false)\n        // Don't save on click outside - only API-selected values are valid\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => document.removeEventListener('mousedown', handleClickOutside)\n  }, [])\n\n  const handleOptionClick = useCallback((result: SearchResult) => {\n    // Set this immediately to prevent blur from interfering\n    isClickingDropdownRef.current = true\n    const selectedValue = extractValue(result)\n    const { primary } = formatOption(result)\n\n    // Apply additional fields to rowData if configured\n    if (additionalFields && rowData) {\n      const extraFields = additionalFields(result)\n      Object.assign(rowData, extraFields)\n    }\n\n    // Use display-friendly value for textarea, raw value for data\n    setTextValue(primary)\n    setShowDropdown(false)\n    onChange(selectedValue)\n    // Call onSave directly - setTimeout can fail if component unmounts\n    onSave(selectedValue)\n  }, [extractValue, formatOption, additionalFields, rowData, onChange, onSave])\n\n  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    // Use the appropriate results based on whether user has typed\n    const displayResults = hasUserTyped ? results : initialResults\n\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault()\n\n      if (showDropdown && displayResults.length > 0) {\n        const selected = displayResults[highlightedIndex]\n        handleOptionClick(selected)\n      } else {\n        // No results to select - just close dropdown, don't save typed text\n        setShowDropdown(false)\n      }\n    } else if (e.key === 'Escape') {\n      e.preventDefault()\n      e.stopPropagation()\n      setShowDropdown(false)\n      onCancel()\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      setHighlightedIndex(prev =>\n        prev < displayResults.length - 1 ? prev + 1 : prev\n      )\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      setHighlightedIndex(prev => prev > 0 ? prev - 1 : 0)\n    } else if (e.key === 'Tab') {\n      setShowDropdown(false)\n      // Don't save - only API-selected values are valid, save happens on selection\n    }\n  }, [showDropdown, results, initialResults, hasUserTyped, highlightedIndex, handleOptionClick, onCancel])\n\n  const handleTextChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    let val = e.target.value\n    if (transformInput) {\n      val = transformInput(val)\n    }\n    setTextValue(val)\n    onChange(val)\n    setHasUserTyped(true)\n  }, [onChange, transformInput])\n\n  return (\n    <>\n      <textarea\n        ref={cellRef}\n        value={textValue}\n        onChange={handleTextChange}\n        onKeyDown={handleKeyDown}\n        onBlur={() => {\n          // Don't save on blur - only API-selected values are valid\n          // Save happens on selection via handleOptionClick\n        }}\n        autoFocus\n        className=\"hot-cell-editor hot-dropdown-editor\"\n        placeholder={placeholder}\n      />\n\n      {showDropdown && createPortal(\n        <div\n          ref={dropdownRef}\n          className=\"hot-editor-dropdown\"\n          style={{\n            position: 'fixed',\n            top: `${position.top}px`,\n            left: `${position.left}px`,\n            width: `${position.width}px`,\n            maxHeight: `${POPUP_MAX_HEIGHT}px`,\n            overflowY: 'auto',\n            zIndex: 10000,\n            pointerEvents: 'auto',\n            ...(position.openAbove ? { transform: 'translateY(-100%)' } : {}),\n          }}\n          onMouseDown={(e) => {\n            e.stopPropagation()\n            isClickingDropdownRef.current = true\n          }}\n          onMouseUp={() => {\n            isClickingDropdownRef.current = false\n          }}\n        >\n          {(() => {\n            // Determine which results to display\n            const displayResults = hasUserTyped ? results : initialResults\n            const showLoading = hasUserTyped ? isLoading : isLoadingInitial\n\n            if (showLoading) {\n              return (\n                <div className=\"hot-editor-dropdown-empty\">\n                  {searchingText}\n                </div>\n              )\n            }\n\n            if (displayResults.length === 0) {\n              // Only show \"no results\" message if user has typed\n              if (hasUserTyped) {\n                return (\n                  <div className=\"hot-editor-dropdown-empty\">\n                    {noResultsText}\n                  </div>\n                )\n              }\n              // For initial suggestions, show nothing if empty\n              return null\n            }\n\n            return displayResults.map((result, index) => {\n              const { primary, secondary } = formatOption(result)\n\n              return (\n                <div\n                  key={result.recordId}\n                  className={`hot-editor-dropdown-item ${index === highlightedIndex ? 'highlighted' : ''}`}\n                  onMouseDown={(e) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    handleOptionClick(result)\n                  }}\n                  onMouseEnter={() => setHighlightedIndex(index)}\n                >\n                  <div className=\"hot-editor-dropdown-item-primary\">{primary}</div>\n                  {secondary && (\n                    <div className=\"hot-editor-dropdown-item-secondary\">{secondary}</div>\n                  )}\n                </div>\n              )\n            })\n          })()}\n        </div>,\n        document.body\n      )}\n    </>\n  )\n}\n\n// Factory function to create a DynamicTable-compatible editor\nexport type DynamicTableEditorFn = (\n  value: any,\n  onChange: (v: any) => void,\n  onSave: (v?: any) => void,\n  onCancel: () => void,\n  rowData: any,\n  col: any,\n  rowIndex: number,\n  colIndex: number\n) => React.ReactNode\n\nexport function createEntitySearchEditor(\n  config: EntitySearchEditorConfig\n): DynamicTableEditorFn {\n  return (value, onChange, onSave, onCancel, rowData) => (\n    <EntitySearchEditor\n      config={config}\n      value={value}\n      onChange={onChange}\n      onSave={onSave}\n      onCancel={onCancel}\n      rowData={rowData}\n    />\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/dynamic-table/components/ExportMenu.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Download, FileSpreadsheet, FileText } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../primitives/popover.js";
+const ExportMenu = ({ onExport, variant = "toolbar", disabled }) => {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const handlePick = (format) => {
+    setOpen(false);
+    onExport(format);
+  };
+  const trigger = variant === "bulk" ? /* @__PURE__ */ jsxs("button", { type: "button", className: "hot-bulk-bar-action", disabled, children: [
+    /* @__PURE__ */ jsx(Download, { size: 12, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { children: t("dynamicTable.export.button", "Export") })
+  ] }) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "fullscreen-toggle-btn",
+      title: t("dynamicTable.export.button", "Export"),
+      "aria-label": t("dynamicTable.export.button", "Export"),
+      disabled,
+      children: /* @__PURE__ */ jsx(Download, { className: "w-4 h-4" })
+    }
+  );
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "hot-export-menu min-w-[180px] p-1", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "hot-export-menu-item",
+          onClick: () => handlePick("csv"),
+          children: [
+            /* @__PURE__ */ jsx(FileText, { size: 14, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { children: t("dynamicTable.export.csv", "Export to CSV") })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "hot-export-menu-item",
+          onClick: () => handlePick("xlsx"),
+          children: [
+            /* @__PURE__ */ jsx(FileSpreadsheet, { size: 14, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { children: t("dynamicTable.export.excel", "Export to Excel") })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+ExportMenu.displayName = "ExportMenu";
+var ExportMenu_default = ExportMenu;
+export {
+  ExportMenu_default as default
+};
+//# sourceMappingURL=ExportMenu.js.map

package/dist/backend/dynamic-table/components/ExportMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/ExportMenu.tsx"],
+  "sourcesContent": ["'use client';\n\nimport React from 'react';\nimport { Download, FileSpreadsheet, FileText } from 'lucide-react';\nimport { useT } from '@open-mercato/shared/lib/i18n/context';\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../primitives/popover';\nimport type { ExportFormat } from '../utils/exportTable';\n\nexport interface ExportMenuProps {\n  /** Invoked with the chosen format when a menu item is clicked. */\n  onExport: (format: ExportFormat) => void;\n  /**\n   * Visual style of the trigger:\n   * - 'toolbar': icon-only button matching the toolbar action buttons.\n   * - 'bulk': labelled button matching the grouped-actions bar.\n   */\n  variant?: 'toolbar' | 'bulk';\n  disabled?: boolean;\n}\n\n/**\n * Export control: a trigger button that opens a small CSV / Excel menu. Shared\n * between the main toolbar (persistent \u2014 exports the current page) and the\n * grouped-actions bar (exports the selected rows). Both call `onExport`.\n */\nconst ExportMenu: React.FC<ExportMenuProps> = ({ onExport, variant = 'toolbar', disabled }) => {\n  const t = useT();\n  const [open, setOpen] = React.useState(false);\n\n  const handlePick = (format: ExportFormat) => {\n    setOpen(false);\n    onExport(format);\n  };\n\n  const trigger =\n    variant === 'bulk' ? (\n      <button type=\"button\" className=\"hot-bulk-bar-action\" disabled={disabled}>\n        <Download size={12} aria-hidden=\"true\" />\n        <span>{t('dynamicTable.export.button', 'Export')}</span>\n      </button>\n    ) : (\n      <button\n        type=\"button\"\n        className=\"fullscreen-toggle-btn\"\n        title={t('dynamicTable.export.button', 'Export')}\n        aria-label={t('dynamicTable.export.button', 'Export')}\n        disabled={disabled}\n      >\n        <Download className=\"w-4 h-4\" />\n      </button>\n    );\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n      {/*\n        `hot-export-menu` is the hook ContextMenu.css uses to give this\n        surface the same 12px corner, `surface-container` fill,\n        `outline-variant` edge and level-2 elevation every other menu in the\n        grid has. It is needed because this popover is portalled OUTSIDE\n        `.hot-appearance-v2`: the Popover primitive's own `bg-popover` /\n        `rounded-md` / `shadow-md` come from the base shadcn token set, so\n        without it the export menu was the one dropdown that missed every\n        grid retint.\n      */}\n      <PopoverContent align=\"end\" className=\"hot-export-menu min-w-[180px] p-1\">\n        <button\n          type=\"button\"\n          className=\"hot-export-menu-item\"\n          onClick={() => handlePick('csv')}\n        >\n          <FileText size={14} aria-hidden=\"true\" />\n          <span>{t('dynamicTable.export.csv', 'Export to CSV')}</span>\n        </button>\n        <button\n          type=\"button\"\n          className=\"hot-export-menu-item\"\n          onClick={() => handlePick('xlsx')}\n        >\n          <FileSpreadsheet size={14} aria-hidden=\"true\" />\n          <span>{t('dynamicTable.export.excel', 'Export to Excel')}</span>\n        </button>\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nExportMenu.displayName = 'ExportMenu';\n\nexport default ExportMenu;\n"],
+  "mappings": ";AAoCM,SACE,KADF;AAlCN,OAAO,WAAW;AAClB,SAAS,UAAU,iBAAiB,gBAAgB;AACpD,SAAS,YAAY;AACrB,SAAS,SAAS,gBAAgB,sBAAsB;AAoBxD,MAAM,aAAwC,CAAC,EAAE,UAAU,UAAU,WAAW,SAAS,MAAM;AAC7F,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAE5C,QAAM,aAAa,CAAC,WAAyB;AAC3C,YAAQ,KAAK;AACb,aAAS,MAAM;AAAA,EACjB;AAEA,QAAM,UACJ,YAAY,SACV,qBAAC,YAAO,MAAK,UAAS,WAAU,uBAAsB,UACpD;AAAA,wBAAC,YAAS,MAAM,IAAI,eAAY,QAAO;AAAA,IACvC,oBAAC,UAAM,YAAE,8BAA8B,QAAQ,GAAE;AAAA,KACnD,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO,EAAE,8BAA8B,QAAQ;AAAA,MAC/C,cAAY,EAAE,8BAA8B,QAAQ;AAAA,MACpD;AAAA,MAEA,8BAAC,YAAS,WAAU,WAAU;AAAA;AAAA,EAChC;AAGJ,SACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA,wBAAC,kBAAe,SAAO,MAAE,mBAAQ;AAAA,IAWjC,qBAAC,kBAAe,OAAM,OAAM,WAAU,qCACpC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM,WAAW,KAAK;AAAA,UAE/B;AAAA,gCAAC,YAAS,MAAM,IAAI,eAAY,QAAO;AAAA,YACvC,oBAAC,UAAM,YAAE,2BAA2B,eAAe,GAAE;AAAA;AAAA;AAAA,MACvD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM,WAAW,MAAM;AAAA,UAEhC;AAAA,gCAAC,mBAAgB,MAAM,IAAI,eAAY,QAAO;AAAA,YAC9C,oBAAC,UAAM,YAAE,6BAA6B,iBAAiB,GAAE;AAAA;AAAA;AAAA,MAC3D;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;",
+  "names": []
+}

package/dist/backend/dynamic-table/components/FilterDatePicker.js

@@ -0,0 +1,165 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { Calendar } from "../../../primitives/calendar.js";
+import { useEscapeLayer } from "../hooks/useEscapeLayer.js";
+function parseISODate(value) {
+  if (!value) return null;
+  const m = value.match(/^(\d{4})-(\d{2})-(\d{2})/);
+  if (!m) return null;
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+function formatISODate(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function formatDisplay(date) {
+  return date.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "2-digit" });
+}
+const FilterDatePicker = ({
+  value,
+  onChange,
+  ariaLabel,
+  placeholder = "Pick date",
+  className = "",
+  zIndex = 1e4
+}) => {
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef(null);
+  const popupRef = useRef(null);
+  const selected = parseISODate(value);
+  const reposition = useCallback(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const margin = 8;
+    const popupHeight = popupRef.current?.offsetHeight || 360;
+    const popupWidth = popupRef.current?.offsetWidth || 300;
+    const fitsBelow = rect.bottom + popupHeight + margin <= window.innerHeight;
+    const desiredTop = fitsBelow ? rect.bottom + 4 : rect.top - 4 - popupHeight;
+    const maxTop = Math.max(margin, window.innerHeight - popupHeight - margin);
+    const top = Math.max(margin, Math.min(desiredTop, maxTop));
+    const maxLeft = window.innerWidth - popupWidth - margin;
+    const left = Math.max(margin, Math.min(rect.left, maxLeft));
+    setPosition({ top, left });
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    reposition();
+    const onScroll = () => reposition();
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [open, reposition]);
+  useEffect(() => {
+    if (!open) return;
+    const onMouseDown = (e) => {
+      const t = e.target;
+      if (popupRef.current?.contains(t)) return;
+      if (triggerRef.current?.contains(t)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", onMouseDown);
+    return () => document.removeEventListener("mousedown", onMouseDown);
+  }, [open]);
+  useEscapeLayer(open, () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  });
+  const handleSelect = (day) => {
+    if (!day) return;
+    onChange(formatISODate(day));
+    setOpen(false);
+  };
+  const popup = open ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: popupRef,
+      className: "hot-editor-popup hot-calendar-popup hot-datetime-popup",
+      style: {
+        position: "fixed",
+        top: `${position.top}px`,
+        left: `${position.left}px`,
+        zIndex
+      },
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "single",
+            selected: selected ?? void 0,
+            defaultMonth: selected ?? void 0,
+            onSelect: handleSelect,
+            classNames: {
+              month: "relative space-y-4",
+              month_caption: "flex justify-center pt-1 items-center",
+              today: "shadow-[var(--m3-focus-halo)] rounded-m3-xs text-[var(--m3-on-surface)] font-semibold"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "hot-calendar-footer", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "hot-calendar-footer-btn hot-calendar-clear-btn",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onChange("");
+                setOpen(false);
+              },
+              children: "Clear"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "hot-calendar-footer-btn hot-calendar-today-btn",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const now = /* @__PURE__ */ new Date();
+                onChange(formatISODate(now));
+                setOpen(false);
+              },
+              children: "Today"
+            }
+          )
+        ] })
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: `hot-config-filter-input hot-config-filter-date-trigger ${className}`.trim(),
+        "aria-label": ariaLabel,
+        onClick: () => setOpen((o) => !o),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: selected ? "" : "hot-config-filter-date-placeholder", children: selected ? formatDisplay(selected) : placeholder }),
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "w-3.5 h-3.5 text-[var(--m3-on-surface-variant)]" })
+        ]
+      }
+    ),
+    popup && typeof document !== "undefined" ? ReactDOM.createPortal(popup, document.body) : popup
+  ] });
+};
+var FilterDatePicker_default = FilterDatePicker;
+export {
+  FilterDatePicker,
+  FilterDatePicker_default as default
+};
+//# sourceMappingURL=FilterDatePicker.js.map