@freighttech/ui 0.13.18

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

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import ReactDOM from "react-dom";
+import { Copy, Check } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+const PerspectiveTemplateMenu = ({
+  anchorRect,
+  templates,
+  savedPerspectives,
+  onCopy,
+  onClose
+}) => {
+  const t = useT();
+  const menuRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) onClose();
+    };
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", handleClickOutside, true);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside, true);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose]);
+  const copiedVersionByTemplate = /* @__PURE__ */ new Map();
+  for (const p of savedPerspectives) {
+    if (p.origin) copiedVersionByTemplate.set(p.origin.templateId, p.origin.version);
+  }
+  const style = {
+    position: "fixed",
+    top: anchorRect.bottom + 4,
+    left: Math.min(anchorRect.left, Math.max(8, window.innerWidth - 280)),
+    minWidth: 240,
+    maxWidth: 320,
+    zIndex: 9999
+  };
+  const menu = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: menuRef,
+      className: "hot-col-menu hot-appearance-v2",
+      style,
+      role: "menu",
+      "aria-label": t("dynamicTable.perspectives.templatesAria", "Shared view templates"),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "hot-col-menu-title", children: t("dynamicTable.perspectives.templatesTitle", "Shared templates") }),
+        templates.length === 0 ? /* @__PURE__ */ jsx("div", { className: "hot-col-menu-empty", children: t("dynamicTable.perspectives.templatesEmpty", "Nobody has shared a view for this table yet.") }) : templates.map((template) => {
+          const copiedVersion = copiedVersionByTemplate.get(template.id);
+          const isCopied = copiedVersion !== void 0;
+          const isStale = isCopied && copiedVersion !== template.version;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: "hot-col-menu-item hot-col-menu-item-stack",
+              role: "menuitem",
+              onClick: () => {
+                onCopy(template);
+                onClose();
+              },
+              children: [
+                isCopied ? /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
+                /* @__PURE__ */ jsxs("span", { className: "hot-col-menu-item-text", children: [
+                  /* @__PURE__ */ jsx("span", { className: "hot-col-menu-item-title", children: template.name }),
+                  /* @__PURE__ */ jsx("span", { className: "hot-col-menu-item-sub", children: isStale ? t(
+                    "dynamicTable.perspectives.templateChanged",
+                    "Updated since your copy \u2014 copy again"
+                  ) : isCopied ? t("dynamicTable.perspectives.templateCopied", "Already copied to your views") : template.roleName ? t("dynamicTable.perspectives.templateSharedWith", "Shared with {role}", {
+                    role: template.roleName
+                  }) : t("dynamicTable.perspectives.templateCopyAction", "Copy to my views") })
+                ] })
+              ]
+            },
+            template.id
+          );
+        })
+      ]
+    }
+  );
+  return ReactDOM.createPortal(menu, document.body);
+};
+var PerspectiveTemplateMenu_default = PerspectiveTemplateMenu;
+export {
+  PerspectiveTemplateMenu_default as default
+};
+//# sourceMappingURL=PerspectiveTemplateMenu.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/PerspectiveTemplateMenu.tsx"],
+  "sourcesContent": ["'use client'\n\nimport React, { useEffect, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Copy, Check } from 'lucide-react';\nimport { useT } from '@open-mercato/shared/lib/i18n/context';\nimport type { PerspectiveConfig, PerspectiveTemplate } from '../types/perspective';\n\nexport interface PerspectiveTemplateMenuProps {\n  /** The trigger this menu hangs off \u2014 the rect is re-read on open. */\n  anchorRect: DOMRect;\n  /** Templates published to roles this user holds. */\n  templates: PerspectiveTemplate[];\n  /** This user's own views, so an already-copied template can say so. */\n  savedPerspectives: PerspectiveConfig[];\n  /** Copy a template into this user's own space. */\n  onCopy: (template: PerspectiveTemplate) => void;\n  onClose: () => void;\n}\n\n/**\n * The shared-template shelf (personalization decision, 3 Aug 2026).\n *\n * Views are PRIVATE by default; this is the one place a view someone else built\n * becomes reachable \u2014 and it is reachable only by COPYING. Nothing here is ever\n * applied to the reader automatically, which is what keeps \"there is no shared\n * thing a user can silently mutate\" true after this feature exists.\n *\n * A template the user has already taken says so and stays clickable: taking a\n * second copy (e.g. after the template changed) is legitimate, so the state is\n * information, not a lock.\n *\n * Structure and CSS are the SAME as `ColumnHeaderMenu` / `PerspectiveTabMenu`\n * (`.hot-col-menu`), so the grid's three dropdowns read as one component.\n */\nconst PerspectiveTemplateMenu: React.FC<PerspectiveTemplateMenuProps> = ({\n  anchorRect,\n  templates,\n  savedPerspectives,\n  onCopy,\n  onClose,\n}) => {\n  const t = useT();\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) onClose();\n    };\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose();\n    };\n    // Capture phase \u2014 the tab strip's own mousedown handlers call\n    // stopPropagation, so a bubbling listener would never see the outside click.\n    document.addEventListener('mousedown', handleClickOutside, true);\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside, true);\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [onClose]);\n\n  // Which templates this user already holds a copy of, and whether that copy is\n  // still on the template's current version. The version comparison is why the\n  // copy records `origin.version` at all.\n  const copiedVersionByTemplate = new Map<string, string>();\n  for (const p of savedPerspectives) {\n    if (p.origin) copiedVersionByTemplate.set(p.origin.templateId, p.origin.version);\n  }\n\n  const style: React.CSSProperties = {\n    position: 'fixed',\n    top: anchorRect.bottom + 4,\n    left: Math.min(anchorRect.left, Math.max(8, window.innerWidth - 280)),\n    minWidth: 240,\n    maxWidth: 320,\n    zIndex: 9999,\n  };\n\n  const menu = (\n    <div\n      ref={menuRef}\n      className=\"hot-col-menu hot-appearance-v2\"\n      style={style}\n      role=\"menu\"\n      aria-label={t('dynamicTable.perspectives.templatesAria', 'Shared view templates')}\n    >\n      <div className=\"hot-col-menu-title\">\n        {t('dynamicTable.perspectives.templatesTitle', 'Shared templates')}\n      </div>\n      {templates.length === 0 ? (\n        <div className=\"hot-col-menu-empty\">\n          {t('dynamicTable.perspectives.templatesEmpty', 'Nobody has shared a view for this table yet.')}\n        </div>\n      ) : (\n        templates.map((template) => {\n          const copiedVersion = copiedVersionByTemplate.get(template.id);\n          const isCopied = copiedVersion !== undefined;\n          const isStale = isCopied && copiedVersion !== template.version;\n          return (\n            <button\n              key={template.id}\n              className=\"hot-col-menu-item hot-col-menu-item-stack\"\n              role=\"menuitem\"\n              onClick={() => { onCopy(template); onClose(); }}\n            >\n              {isCopied ? <Check className=\"w-4 h-4\" /> : <Copy className=\"w-4 h-4\" />}\n              <span className=\"hot-col-menu-item-text\">\n                <span className=\"hot-col-menu-item-title\">{template.name}</span>\n                <span className=\"hot-col-menu-item-sub\">\n                  {isStale\n                    ? t(\n                        'dynamicTable.perspectives.templateChanged',\n                        'Updated since your copy \u2014 copy again',\n                      )\n                    : isCopied\n                      ? t('dynamicTable.perspectives.templateCopied', 'Already copied to your views')\n                      : template.roleName\n                        ? t('dynamicTable.perspectives.templateSharedWith', 'Shared with {role}', {\n                            role: template.roleName,\n                          })\n                        : t('dynamicTable.perspectives.templateCopyAction', 'Copy to my views')}\n                </span>\n              </span>\n            </button>\n          );\n        })\n      )}\n    </div>\n  );\n\n  return ReactDOM.createPortal(menu, document.body);\n};\n\nexport default PerspectiveTemplateMenu;\n"],
+  "mappings": ";AAuFM,cAoBQ,YApBR;AArFN,SAAgB,WAAW,cAAc;AACzC,OAAO,cAAc;AACrB,SAAS,MAAM,aAAa;AAC5B,SAAS,YAAY;AA8BrB,MAAM,0BAAkE,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,IAAI,KAAK;AACf,QAAM,UAAU,OAAuB,IAAI;AAE3C,YAAU,MAAM;AACd,UAAM,qBAAqB,CAAC,MAAkB;AAC5C,UAAI,QAAQ,WAAW,CAAC,QAAQ,QAAQ,SAAS,EAAE,MAAc,EAAG,SAAQ;AAAA,IAC9E;AACA,UAAM,eAAe,CAAC,MAAqB;AACzC,UAAI,EAAE,QAAQ,SAAU,SAAQ;AAAA,IAClC;AAGA,aAAS,iBAAiB,aAAa,oBAAoB,IAAI;AAC/D,aAAS,iBAAiB,WAAW,YAAY;AACjD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,oBAAoB,IAAI;AAClE,eAAS,oBAAoB,WAAW,YAAY;AAAA,IACtD;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAKZ,QAAM,0BAA0B,oBAAI,IAAoB;AACxD,aAAW,KAAK,mBAAmB;AACjC,QAAI,EAAE,OAAQ,yBAAwB,IAAI,EAAE,OAAO,YAAY,EAAE,OAAO,OAAO;AAAA,EACjF;AAEA,QAAM,QAA6B;AAAA,IACjC,UAAU;AAAA,IACV,KAAK,WAAW,SAAS;AAAA,IACzB,MAAM,KAAK,IAAI,WAAW,MAAM,KAAK,IAAI,GAAG,OAAO,aAAa,GAAG,CAAC;AAAA,IACpE,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAEA,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,cAAY,EAAE,2CAA2C,uBAAuB;AAAA,MAEhF;AAAA,4BAAC,SAAI,WAAU,sBACZ,YAAE,4CAA4C,kBAAkB,GACnE;AAAA,QACC,UAAU,WAAW,IACpB,oBAAC,SAAI,WAAU,sBACZ,YAAE,4CAA4C,8CAA8C,GAC/F,IAEA,UAAU,IAAI,CAAC,aAAa;AAC1B,gBAAM,gBAAgB,wBAAwB,IAAI,SAAS,EAAE;AAC7D,gBAAM,WAAW,kBAAkB;AACnC,gBAAM,UAAU,YAAY,kBAAkB,SAAS;AACvD,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,SAAS,MAAM;AAAE,uBAAO,QAAQ;AAAG,wBAAQ;AAAA,cAAG;AAAA,cAE7C;AAAA,2BAAW,oBAAC,SAAM,WAAU,WAAU,IAAK,oBAAC,QAAK,WAAU,WAAU;AAAA,gBACtE,qBAAC,UAAK,WAAU,0BACd;AAAA,sCAAC,UAAK,WAAU,2BAA2B,mBAAS,MAAK;AAAA,kBACzD,oBAAC,UAAK,WAAU,yBACb,oBACG;AAAA,oBACE;AAAA,oBACA;AAAA,kBACF,IACA,WACE,EAAE,4CAA4C,8BAA8B,IAC5E,SAAS,WACP,EAAE,gDAAgD,sBAAsB;AAAA,oBACtE,MAAM,SAAS;AAAA,kBACjB,CAAC,IACD,EAAE,gDAAgD,kBAAkB,GAC9E;AAAA,mBACF;AAAA;AAAA;AAAA,YAtBK,SAAS;AAAA,UAuBhB;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EAEL;AAGF,SAAO,SAAS,aAAa,MAAM,SAAS,IAAI;AAClD;AAEA,IAAO,kCAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const RowHeaderCell = memo(
+  ({ row, isNewRow, isInRowRange, rowRangeEdges, onCancel, onDoubleClick, selectable, selected, onToggleSelect }) => {
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: "hot-row-header",
+        "data-row": row,
+        "data-row-header": "true",
+        "data-in-row-range": isInRowRange,
+        "data-row-range-top": rowRangeEdges.top,
+        "data-row-range-bottom": rowRangeEdges.bottom,
+        onDoubleClick,
+        onMouseDown: selectable ? (e) => e.stopPropagation() : void 0,
+        style: {
+          width: 50,
+          flexBasis: 50,
+          flexShrink: 0,
+          flexGrow: 0,
+          position: "sticky",
+          left: 0,
+          zIndex: 3
+        },
+        children: isNewRow ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "hot-row-cancel-btn-header",
+            onClick: (e) => {
+              e.stopPropagation();
+              onCancel();
+            },
+            title: "Cancel",
+            children: "\u2715"
+          }
+        ) : selectable ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            className: "hot-row-select",
+            checked: !!selected,
+            onChange: () => onToggleSelect?.(),
+            onClick: (e) => e.stopPropagation(),
+            onMouseDown: (e) => e.stopPropagation(),
+            onDoubleClick: (e) => e.stopPropagation(),
+            "aria-label": "Select row"
+          }
+        ) : row + 1
+      }
+    );
+  }
+);
+RowHeaderCell.displayName = "RowHeaderCell";
+var RowHeaderCell_default = RowHeaderCell;
+export {
+  RowHeaderCell_default as default
+};
+//# sourceMappingURL=RowHeaderCell.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/RowHeaderCell.tsx"],
+  "sourcesContent": ["import React, { memo } from 'react';\n\nexport interface RowHeaderCellProps {\n  row: number;\n  isNewRow: boolean;\n  isInRowRange: boolean;\n  rowRangeEdges: { top?: boolean; bottom?: boolean };\n  onCancel: () => void;\n  onDoubleClick: (e: React.MouseEvent) => void;\n  /** v2: show a selection checkbox instead of the row number (bulk/grouped actions). */\n  selectable?: boolean;\n  selected?: boolean;\n  onToggleSelect?: () => void;\n}\n\nconst RowHeaderCell: React.FC<RowHeaderCellProps> = memo(\n  ({ row, isNewRow, isInRowRange, rowRangeEdges, onCancel, onDoubleClick, selectable, selected, onToggleSelect }) => {\n    return (\n      <td\n        className=\"hot-row-header\"\n        data-row={row}\n        data-row-header=\"true\"\n        data-in-row-range={isInRowRange}\n        data-row-range-top={rowRangeEdges.top}\n        data-row-range-bottom={rowRangeEdges.bottom}\n        onDoubleClick={onDoubleClick}\n        // v2 checkbox mode: clicking the header cell must NOT start a grid\n        // row-range selection \u2014 only the checkbox toggles selection. Swallow\n        // mousedown so it never reaches the container's selection handler.\n        onMouseDown={selectable ? (e) => e.stopPropagation() : undefined}\n        style={{\n          width: 50,\n          flexBasis: 50,\n          flexShrink: 0,\n          flexGrow: 0,\n          position: 'sticky',\n          left: 0,\n          zIndex: 3,\n        }}\n      >\n        {isNewRow ? (\n          <button\n            className=\"hot-row-cancel-btn-header\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onCancel();\n            }}\n            title=\"Cancel\"\n          >\n            \u2715\n          </button>\n        ) : selectable ? (\n          <input\n            type=\"checkbox\"\n            className=\"hot-row-select\"\n            checked={!!selected}\n            onChange={() => onToggleSelect?.()}\n            onClick={(e) => e.stopPropagation()}\n            onMouseDown={(e) => e.stopPropagation()}\n            onDoubleClick={(e) => e.stopPropagation()}\n            aria-label=\"Select row\"\n          />\n        ) : (\n          row + 1\n        )}\n      </td>\n    );\n  }\n);\n\nRowHeaderCell.displayName = 'RowHeaderCell';\n\nexport default RowHeaderCell;\n"],
+  "mappings": "AAyCU;AAzCV,SAAgB,YAAY;AAe5B,MAAM,gBAA8C;AAAA,EAClD,CAAC,EAAE,KAAK,UAAU,cAAc,eAAe,UAAU,eAAe,YAAY,UAAU,eAAe,MAAM;AACjH,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,YAAU;AAAA,QACV,mBAAgB;AAAA,QAChB,qBAAmB;AAAA,QACnB,sBAAoB,cAAc;AAAA,QAClC,yBAAuB,cAAc;AAAA,QACrC;AAAA,QAIA,aAAa,aAAa,CAAC,MAAM,EAAE,gBAAgB,IAAI;AAAA,QACvD,OAAO;AAAA,UACL,OAAO;AAAA,UACP,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,UAAU;AAAA,UACV,MAAM;AAAA,UACN,QAAQ;AAAA,QACV;AAAA,QAEC,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS,CAAC,MAAM;AACd,gBAAE,gBAAgB;AAClB,uBAAS;AAAA,YACX;AAAA,YACA,OAAM;AAAA,YACP;AAAA;AAAA,QAED,IACE,aACF;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,CAAC,CAAC;AAAA,YACX,UAAU,MAAM,iBAAiB;AAAA,YACjC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,YAClC,aAAa,CAAC,MAAM,EAAE,gBAAgB;AAAA,YACtC,eAAe,CAAC,MAAM,EAAE,gBAAgB;AAAA,YACxC,cAAW;AAAA;AAAA,QACb,IAEA,MAAM;AAAA;AAAA,IAEV;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;AAE5B,IAAO,wBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,221 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { dispatch } from "../events/events.js";
+import { TableEvents } from "../types/index.js";
+if (typeof window !== "undefined") {
+  import("../styles/SearchBar.css.js");
+}
+const PANEL_OFFSET = 4;
+const VIEWPORT_MARGIN = 8;
+const PANEL_MIN_WIDTH = 460;
+const SearchBar = ({
+  tableRef,
+  placeholder = "Search a product",
+  debounceMs = 300,
+  renderSuggestions
+}) => {
+  const [searchValue, setSearchValue] = useState("");
+  const debounceTimerRef = useRef(null);
+  const inputRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const panelRef = useRef(null);
+  const [suggestionsOpen, setSuggestionsOpen] = useState(false);
+  const [anchor, setAnchor] = useState(null);
+  const dispatchSearchEvent = useCallback((value) => {
+    if (tableRef.current) {
+      dispatch(
+        tableRef.current,
+        TableEvents.SEARCH,
+        {
+          query: value,
+          timestamp: Date.now()
+        }
+      );
+    }
+  }, [tableRef]);
+  const handleSearchChange = useCallback((e) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    setSuggestionsOpen(true);
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    debounceTimerRef.current = setTimeout(() => {
+      dispatchSearchEvent(value);
+    }, debounceMs);
+  }, [dispatchSearchEvent, debounceMs]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Enter") {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      dispatchSearchEvent(searchValue);
+      setSuggestionsOpen(false);
+    } else if (e.key === "Escape") {
+      if (suggestionsOpen) {
+        setSuggestionsOpen(false);
+        return;
+      }
+      setSearchValue("");
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      dispatchSearchEvent("");
+      inputRef.current?.focus();
+    }
+  }, [searchValue, dispatchSearchEvent, suggestionsOpen]);
+  const handleClear = useCallback(() => {
+    setSearchValue("");
+    setSuggestionsOpen(false);
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    dispatchSearchEvent("");
+  }, [dispatchSearchEvent]);
+  const submitQuery = useCallback((value) => {
+    setSearchValue(value);
+    setSuggestionsOpen(false);
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    dispatchSearchEvent(value);
+  }, [dispatchSearchEvent]);
+  const closeSuggestions = useCallback(() => setSuggestionsOpen(false), []);
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    const el = tableRef.current;
+    if (!el) return;
+    const onSearch = (e) => {
+      const query = e.detail?.query ?? "";
+      setSearchValue((current) => current === query ? current : query);
+    };
+    el.addEventListener(TableEvents.SEARCH, onSearch);
+    return () => el.removeEventListener(TableEvents.SEARCH, onSearch);
+  }, [tableRef]);
+  const measureAnchor = useCallback(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const width = Math.min(
+      Math.max(rect.width, PANEL_MIN_WIDTH),
+      window.innerWidth - VIEWPORT_MARGIN * 2
+    );
+    const left = Math.min(
+      Math.max(VIEWPORT_MARGIN, rect.left),
+      window.innerWidth - width - VIEWPORT_MARGIN
+    );
+    setAnchor({ top: rect.bottom + PANEL_OFFSET, left, width });
+  }, []);
+  useEffect(() => {
+    if (!suggestionsOpen) return;
+    measureAnchor();
+    window.addEventListener("resize", measureAnchor);
+    window.addEventListener("scroll", measureAnchor, true);
+    return () => {
+      window.removeEventListener("resize", measureAnchor);
+      window.removeEventListener("scroll", measureAnchor, true);
+    };
+  }, [suggestionsOpen, measureAnchor]);
+  useEffect(() => {
+    if (!suggestionsOpen) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (wrapperRef.current?.contains(target)) return;
+      if (panelRef.current?.contains(target)) return;
+      setSuggestionsOpen(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [suggestionsOpen]);
+  const suggestionsContext = useMemo(() => ({
+    query: searchValue,
+    inputRef,
+    close: closeSuggestions,
+    submit: submitQuery
+  }), [searchValue, closeSuggestions, submitQuery]);
+  const suggestionPanel = renderSuggestions && suggestionsOpen && anchor && searchValue ? createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        className: "hot-search-suggestions",
+        "data-testid": "table-search-suggestions",
+        style: { top: anchor.top, left: anchor.left, width: anchor.width },
+        onMouseDown: (e) => e.preventDefault(),
+        children: renderSuggestions(suggestionsContext)
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "search-bar", children: [
+    /* @__PURE__ */ jsxs("div", { className: "search-input-wrapper", ref: wrapperRef, children: [
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "search-icon",
+          width: "15",
+          height: "15",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM19 19l-4.35-4.35",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: searchValue,
+          onChange: handleSearchChange,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          className: "search-input",
+          ref: inputRef,
+          onFocus: () => {
+            if (searchValue) setSuggestionsOpen(true);
+          },
+          autoComplete: "off",
+          role: renderSuggestions ? "combobox" : void 0,
+          "aria-autocomplete": renderSuggestions ? "list" : void 0,
+          "aria-expanded": renderSuggestions ? suggestionsOpen : void 0
+        }
+      ),
+      searchValue && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleClear,
+          className: "search-clear-btn",
+          "aria-label": "Clear search",
+          title: "Clear search",
+          type: "button",
+          "data-search-clear": "",
+          children: /* @__PURE__ */ jsx(X, { size: 12, strokeWidth: 2.25, "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    suggestionPanel
+  ] });
+};
+var SearchBar_default = SearchBar;
+export {
+  SearchBar_default as default
+};
+//# sourceMappingURL=SearchBar.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/SearchBar.tsx"],
+  "sourcesContent": ["import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { X } from 'lucide-react';\nimport { dispatch } from '../events/events';\nimport { TableEvents, SearchEvent } from '../types/index';\nimport type { SearchSuggestionsRenderer } from '../types/index';\n\nif (typeof window !== 'undefined') {\n  // @ts-ignore - CSS import handled by bundler\n  import('../styles/SearchBar.css');\n}\n\ninterface SearchBarProps {\n  tableRef: React.RefObject<HTMLElement | null>;\n  placeholder?: string;\n  debounceMs?: number;\n  /**\n   * Renders a suggestions panel under the box while it has a query and focus.\n   *\n   * A RENDER PROP RATHER THAN DATA, because what a good hint looks like is\n   * domain knowledge this component does not have: documents want a thumbnail\n   * and the field that matched, an order list would want a status and a total.\n   * SearchBar owns the two things that ARE generic \u2014 where the panel is\n   * anchored, and when it is open.\n   */\n  renderSuggestions?: SearchSuggestionsRenderer;\n}\n\n/** Gap between the input and the panel, and the viewport margin the panel keeps. */\nconst PANEL_OFFSET = 4;\nconst VIEWPORT_MARGIN = 8;\n/**\n * Never narrower than this, however narrow the 320px-max input gets.\n *\n * 460, not 360. At 360 the matched text \u2014 the one thing the user searched for \u2014\n * was clipped at the panel edge while a 30-character filename ran to full\n * length beside it. A hint panel whose match does not fit is a panel that\n * cannot do its job.\n */\nconst PANEL_MIN_WIDTH = 460;\n\nconst SearchBar: React.FC<SearchBarProps> = ({\n  tableRef,\n  placeholder = 'Search a product',\n  debounceMs = 300,\n  renderSuggestions,\n}) => {\n  const [searchValue, setSearchValue] = useState('');\n  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [suggestionsOpen, setSuggestionsOpen] = useState(false);\n  const [anchor, setAnchor] = useState<{ top: number; left: number; width: number } | null>(null);\n\n\n  const dispatchSearchEvent = useCallback((value: string) => {\n    if (tableRef.current) {\n      dispatch<SearchEvent>(\n        tableRef.current,\n        TableEvents.SEARCH,\n        {\n          query: value,\n          timestamp: Date.now(),\n        }\n      );\n    }\n  }, [tableRef]);\n\n  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    setSearchValue(value);\n    // Typing always re-opens: a user who dismissed the panel with Escape and\n    // then kept typing is asking a new question.\n    setSuggestionsOpen(true);\n\n    // Clear existing debounce timer\n    if (debounceTimerRef.current) {\n      clearTimeout(debounceTimerRef.current);\n    }\n\n    // Set new debounce timer\n    debounceTimerRef.current = setTimeout(() => {\n      dispatchSearchEvent(value);\n    }, debounceMs);\n  }, [dispatchSearchEvent, debounceMs]);\n\n  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {\n    // Arrow keys belong to the suggestions panel while it is open; it listens on\n    // the input itself (see `renderSuggestions`' contract) and stops the event\n    // there. Nothing to do here but stay out of the way.\n    if (e.key === 'Enter') {\n      // Clear debounce and dispatch immediately\n      if (debounceTimerRef.current) {\n        clearTimeout(debounceTimerRef.current);\n      }\n      dispatchSearchEvent(searchValue);\n      setSuggestionsOpen(false);\n    } else if (e.key === 'Escape') {\n      // ESCAPE RETREATS ONE STEP AT A TIME. With a panel open it closes the\n      // panel and keeps the query \u2014 wiping a query the user is still reading\n      // results for is a different, much more annoying action than the one they\n      // asked for. A second Escape then clears, as it always did.\n      if (suggestionsOpen) {\n        setSuggestionsOpen(false);\n        return;\n      }\n      // Clear the search on Escape key\n      setSearchValue('');\n      if (debounceTimerRef.current) {\n        clearTimeout(debounceTimerRef.current);\n      }\n      dispatchSearchEvent('');\n      // Keep focus on input after clearing\n      inputRef.current?.focus();\n    }\n  }, [searchValue, dispatchSearchEvent, suggestionsOpen]);\n\n  const handleClear = useCallback(() => {\n    setSearchValue('');\n    setSuggestionsOpen(false);\n    if (debounceTimerRef.current) {\n      clearTimeout(debounceTimerRef.current);\n    }\n    dispatchSearchEvent('');\n  }, [dispatchSearchEvent]);\n\n  /** Put a query into the box and into the dataset in one move \u2014 what clicking\n   *  a suggestion does. */\n  const submitQuery = useCallback((value: string) => {\n    setSearchValue(value);\n    setSuggestionsOpen(false);\n    if (debounceTimerRef.current) {\n      clearTimeout(debounceTimerRef.current);\n    }\n    dispatchSearchEvent(value);\n  }, [dispatchSearchEvent]);\n\n  const closeSuggestions = useCallback(() => setSuggestionsOpen(false), []);\n\n  // Cleanup debounce timer on unmount\n  useEffect(() => {\n    return () => {\n      if (debounceTimerRef.current) {\n        clearTimeout(debounceTimerRef.current);\n      }\n    };\n  }, []);\n\n  /**\n   * Mirror a search dispatched by SOMEONE ELSE.\n   *\n   * The grid's zero-result state dispatches `TableEvents.SEARCH` directly to\n   * clear a dead query \u2014 it hands the change to this control's machinery.\n   * Without this listener the dataset would filter while the box still looked\n   * empty, leaving the user filtered with no visible cause and no way to clear\n   * it. Guarded on value equality, so this can never echo its own change.\n   */\n  useEffect(() => {\n    const el = tableRef.current;\n    if (!el) return;\n    const onSearch = (e: Event) => {\n      const query = (e as CustomEvent<SearchEvent>).detail?.query ?? '';\n      setSearchValue((current) => (current === query ? current : query));\n    };\n    el.addEventListener(TableEvents.SEARCH, onSearch as EventListener);\n    return () => el.removeEventListener(TableEvents.SEARCH, onSearch as EventListener);\n  }, [tableRef]);\n\n  /**\n   * Where the panel goes.\n   *\n   * MEASURED AND PORTALLED, not `position: absolute` inside the wrapper. The\n   * wrapper is `position: relative` and would host a dropdown happily \u2014 but the\n   * toolbar sits inside `.hot-card`, which is `overflow: hidden`, so an in-flow\n   * panel is CLIPPED at the card's edge and only its first few pixels are ever\n   * seen. Measured on the documents list, and it is the same trap the topbar's\n   * own search hit inside the sticky header.\n   */\n  const measureAnchor = useCallback(() => {\n    const el = wrapperRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    const width = Math.min(\n      Math.max(rect.width, PANEL_MIN_WIDTH),\n      window.innerWidth - VIEWPORT_MARGIN * 2,\n    );\n    const left = Math.min(\n      Math.max(VIEWPORT_MARGIN, rect.left),\n      window.innerWidth - width - VIEWPORT_MARGIN,\n    );\n    setAnchor({ top: rect.bottom + PANEL_OFFSET, left, width });\n  }, []);\n\n  useEffect(() => {\n    if (!suggestionsOpen) return;\n    measureAnchor();\n    window.addEventListener('resize', measureAnchor);\n    // Capturing: the page scrolls in `<main>`, not on the window, so a bubbling\n    // listener on window never fires and the panel would detach from the box.\n    window.addEventListener('scroll', measureAnchor, true);\n    return () => {\n      window.removeEventListener('resize', measureAnchor);\n      window.removeEventListener('scroll', measureAnchor, true);\n    };\n  }, [suggestionsOpen, measureAnchor]);\n\n  /** Click-outside. Both refs, because the panel is NOT inside the wrapper. */\n  useEffect(() => {\n    if (!suggestionsOpen) return;\n    const onPointerDown = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (wrapperRef.current?.contains(target)) return;\n      if (panelRef.current?.contains(target)) return;\n      setSuggestionsOpen(false);\n    };\n    document.addEventListener('mousedown', onPointerDown);\n    return () => document.removeEventListener('mousedown', onPointerDown);\n  }, [suggestionsOpen]);\n\n  const suggestionsContext = useMemo(() => ({\n    query: searchValue,\n    inputRef,\n    close: closeSuggestions,\n    submit: submitQuery,\n  }), [searchValue, closeSuggestions, submitQuery]);\n\n  const suggestionPanel = renderSuggestions && suggestionsOpen && anchor && searchValue\n    ? createPortal(\n        <div\n          ref={panelRef}\n          className=\"hot-search-suggestions\"\n          data-testid=\"table-search-suggestions\"\n          style={{ top: anchor.top, left: anchor.left, width: anchor.width }}\n          // The input keeps focus while the panel is used: a mousedown that\n          // moves focus would blur the box, and the arrow keys the panel listens\n          // for on the input would stop arriving mid-interaction.\n          onMouseDown={(e) => e.preventDefault()}\n        >\n          {renderSuggestions(suggestionsContext)}\n        </div>,\n        document.body,\n      )\n    : null;\n\n  return (\n    <div className=\"search-bar\">\n      <div className=\"search-input-wrapper\" ref={wrapperRef}>\n        <svg\n          className=\"search-icon\"\n          width=\"15\"\n          height=\"15\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n\n        >\n          <path\n            d=\"M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16zM19 19l-4.35-4.35\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n        <input\n          type=\"text\"\n          value={searchValue}\n          onChange={handleSearchChange}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          className=\"search-input\"\n          ref={inputRef}\n          onFocus={() => { if (searchValue) setSuggestionsOpen(true); }}\n          autoComplete=\"off\"\n          role={renderSuggestions ? 'combobox' : undefined}\n          aria-autocomplete={renderSuggestions ? 'list' : undefined}\n          aria-expanded={renderSuggestions ? suggestionsOpen : undefined}\n        />\n        {/* NO keyboard hint here. \u2318K belongs to the upstream global search\n            dialog, which registers a window-level listener and preventDefaults\n            it \u2014 this bar has never had a shortcut of any kind, so the badge that\n            used to sit here advertised a key that does something else entirely.\n            Ctrl+F is the BROWSER's: this box filters the whole dataset\n            server-side, and nothing in the grid claims that key. */}\n        {searchValue && (\n          <button\n            onClick={handleClear}\n            className=\"search-clear-btn\"\n            aria-label=\"Clear search\"\n            title=\"Clear search\"\n            type=\"button\"\n            data-search-clear=\"\"\n          >\n            {/* A drawn glyph, not the \"\u00D7\" MULTIPLICATION SIGN character: the\n                literal took its weight and baseline from whatever face the\n                toolbar inherited, so it sat off-centre inside the 20px circle\n                and changed size with the font. The icon is metric-stable. */}\n            <X size={12} strokeWidth={2.25} aria-hidden=\"true\" />\n          </button>\n        )}\n      </div>\n      {suggestionPanel}\n    </div>\n  );\n};\n\nexport default SearchBar;"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,186 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+import { ChevronDown } from "lucide-react";
+import { computeAnchoredPosition } from "../utils/anchoredPosition.js";
+import { useEscapeLayer } from "../hooks/useEscapeLayer.js";
+const MENU_MAX_HEIGHT = 280;
+const SelectMenu = ({
+  value,
+  onChange,
+  options,
+  placeholder,
+  emptyOptionLabel,
+  className = "",
+  ariaLabel,
+  disabled = false,
+  dataAttributes
+}) => {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [position, setPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+    maxHeight: MENU_MAX_HEIGHT,
+    openAbove: false
+  });
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const entries = emptyOptionLabel !== void 0 ? [{ value: "", label: emptyOptionLabel }, ...options] : options;
+  const selected = entries.find((o) => o.value === value);
+  const reposition = useCallback(() => {
+    const el = triggerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const placement = computeAnchoredPosition(
+      rect,
+      { width: window.innerWidth, height: window.innerHeight },
+      {
+        width: Math.max(rect.width, menuRef.current?.offsetWidth ?? rect.width),
+        preferredHeight: MENU_MAX_HEIGHT,
+        minHeight: 96
+      }
+    );
+    setPosition({
+      top: placement.top,
+      left: placement.left,
+      // Never narrower than the trigger; a value wider than the trigger is
+      // readable rather than clipped.
+      width: rect.width,
+      maxHeight: placement.maxHeight,
+      openAbove: placement.flipAbove
+    });
+  }, []);
+  useLayoutEffect(() => {
+    if (open) reposition();
+  }, [open, reposition]);
+  useEffect(() => {
+    if (!open) return;
+    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 target = e.target;
+      if (menuRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", onMouseDown);
+    return () => document.removeEventListener("mousedown", onMouseDown);
+  }, [open]);
+  useEscapeLayer(open, () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  });
+  const commit = useCallback(
+    (next) => {
+      onChange(next);
+      setOpen(false);
+      triggerRef.current?.focus();
+    },
+    [onChange]
+  );
+  const onTriggerKeyDown = (e) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+      if (!open) {
+        e.preventDefault();
+        setActiveIndex(Math.max(0, entries.findIndex((o) => o.value === value)));
+        setOpen(true);
+        return;
+      }
+    }
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, entries.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const entry = entries[activeIndex];
+      if (entry) commit(entry.value);
+    }
+  };
+  const menu = open ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: menuRef,
+      role: "listbox",
+      "aria-label": ariaLabel,
+      className: "hot-select-menu",
+      style: {
+        position: "fixed",
+        top: `${position.top}px`,
+        left: `${position.left}px`,
+        minWidth: `${position.width}px`,
+        maxHeight: `${position.maxHeight}px`,
+        zIndex: 10002,
+        ...position.openAbove ? { transform: "translateY(-100%)" } : {}
+      },
+      onMouseDown: (e) => e.stopPropagation(),
+      children: entries.map((option, index) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": option.value === value,
+          "data-active": index === activeIndex || void 0,
+          "data-selected": option.value === value || void 0,
+          className: "hot-select-menu-option text-body-regular-sm",
+          onMouseEnter: () => setActiveIndex(index),
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => commit(option.value),
+          children: option.label
+        },
+        option.value || "__empty"
+      ))
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-label": ariaLabel,
+        disabled,
+        className: `hot-select-trigger ${className}`.trim(),
+        onClick: () => {
+          setActiveIndex(Math.max(0, entries.findIndex((o) => o.value === value)));
+          setOpen((o) => !o);
+        },
+        onKeyDown: onTriggerKeyDown,
+        ...dataAttributes,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `hot-select-trigger-label${selected ? "" : " hot-select-trigger-placeholder"}`,
+              children: selected ? selected.label : placeholder ?? ""
+            }
+          ),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "hot-select-trigger-chevron", "aria-hidden": true })
+        ]
+      }
+    ),
+    menu && typeof document !== "undefined" ? ReactDOM.createPortal(menu, document.body) : menu
+  ] });
+};
+var SelectMenu_default = SelectMenu;
+export {
+  SelectMenu,
+  SelectMenu_default as default
+};
+//# sourceMappingURL=SelectMenu.js.map