@freighttech/ui 0.13.18

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/SelectMenu.tsx"],
+  "sourcesContent": ["import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { ChevronDown } from 'lucide-react';\nimport { computeAnchoredPosition } from '../utils/anchoredPosition';\nimport { useEscapeLayer } from '../hooks/useEscapeLayer';\n\n/**\n * The Configure View drawer's dropdown.\n *\n * A native `<select>` is not usable here: the drawer is a `Sheet` with its own\n * scroll container and stacking context, so the OS menu paints against the page\n * rather than the panel, and it cannot carry the v2 type tokens at all. Every\n * dropdown in this product is therefore a portal-rendered menu anchored via\n * `getBoundingClientRect`, closing on outside-click, Escape and scroll \u2014 the\n * same shape `FilterDatePicker` already uses, deliberately copied rather than\n * reinvented.\n *\n * The trigger keeps the class the old `<select>` carried, so spacing, radius\n * and colour are unchanged; only the menu is ours.\n */\n\nexport interface SelectMenuOption {\n  value: string;\n  label: string;\n}\n\nexport interface SelectMenuProps {\n  value: string;\n  onChange: (value: string) => void;\n  options: SelectMenuOption[];\n  /** Shown when `value` matches no option (i.e. nothing chosen yet). */\n  placeholder?: string;\n  /**\n   * Rendered as the first entry and selects `''`. Omit for a menu with no\n   * \"no choice\" state.\n   */\n  emptyOptionLabel?: string;\n  className?: string;\n  ariaLabel?: string;\n  disabled?: boolean;\n  /** Marks the trigger for the harness / tests, mirroring the old select. */\n  dataAttributes?: Record<string, string | boolean | undefined>;\n}\n\nconst MENU_MAX_HEIGHT = 280;\n\nexport const SelectMenu: React.FC<SelectMenuProps> = ({\n  value,\n  onChange,\n  options,\n  placeholder,\n  emptyOptionLabel,\n  className = '',\n  ariaLabel,\n  disabled = false,\n  dataAttributes,\n}) => {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [position, setPosition] = useState({\n    top: 0,\n    left: 0,\n    width: 0,\n    maxHeight: MENU_MAX_HEIGHT,\n    openAbove: false,\n  });\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const entries: SelectMenuOption[] =\n    emptyOptionLabel !== undefined ? [{ value: '', label: emptyOptionLabel }, ...options] : options;\n\n  const selected = entries.find((o) => o.value === value);\n\n  const reposition = useCallback(() => {\n    const el = triggerRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    // The menu sets `minWidth` (not `width`) so a long option label stays\n    // readable \u2014 which means its real width can exceed the trigger's. Clamp\n    // against the WIDER of the two, or a menu opened from a trigger near the\n    // right edge (every select in the Configure View drawer) overflows.\n    const placement = computeAnchoredPosition(\n      rect,\n      { width: window.innerWidth, height: window.innerHeight },\n      {\n        width: Math.max(rect.width, menuRef.current?.offsetWidth ?? rect.width),\n        preferredHeight: MENU_MAX_HEIGHT,\n        minHeight: 96,\n      },\n    );\n    setPosition({\n      top: placement.top,\n      left: placement.left,\n      // Never narrower than the trigger; a value wider than the trigger is\n      // readable rather than clipped.\n      width: rect.width,\n      maxHeight: placement.maxHeight,\n      openAbove: placement.flipAbove,\n    });\n  }, []);\n\n  useLayoutEffect(() => {\n    if (open) reposition();\n  }, [open, reposition]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onScroll = () => reposition();\n    window.addEventListener('scroll', onScroll, true);\n    window.addEventListener('resize', onScroll);\n    return () => {\n      window.removeEventListener('scroll', onScroll, true);\n      window.removeEventListener('resize', onScroll);\n    };\n  }, [open, reposition]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onMouseDown = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (menuRef.current?.contains(target)) return;\n      if (triggerRef.current?.contains(target)) return;\n      setOpen(false);\n    };\n    document.addEventListener('mousedown', onMouseDown);\n    return () => document.removeEventListener('mousedown', onMouseDown);\n  }, [open]);\n\n  // Escape closes THIS menu and nothing else. A `document`-capture listener was\n  // not enough: Radix's Sheet registers its own document-capture Escape handler\n  // when it mounts, i.e. before this menu ever opens, so it always ran first and\n  // the whole Configure View drawer closed. See `useEscapeLayer`.\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  });\n\n  const commit = useCallback(\n    (next: string) => {\n      onChange(next);\n      setOpen(false);\n      triggerRef.current?.focus();\n    },\n    [onChange],\n  );\n\n  const onTriggerKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {\n      if (!open) {\n        e.preventDefault();\n        setActiveIndex(Math.max(0, entries.findIndex((o) => o.value === value)));\n        setOpen(true);\n        return;\n      }\n    }\n    if (!open) return;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      setActiveIndex((i) => Math.min(i + 1, entries.length - 1));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      setActiveIndex((i) => Math.max(i - 1, 0));\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      const entry = entries[activeIndex];\n      if (entry) commit(entry.value);\n    }\n  };\n\n  const menu = open ? (\n    <div\n      ref={menuRef}\n      role=\"listbox\"\n      aria-label={ariaLabel}\n      className=\"hot-select-menu\"\n      style={{\n        position: 'fixed',\n        top: `${position.top}px`,\n        left: `${position.left}px`,\n        minWidth: `${position.width}px`,\n        maxHeight: `${position.maxHeight}px`,\n        zIndex: 10002,\n        ...(position.openAbove ? { transform: 'translateY(-100%)' } : {}),\n      }}\n      onMouseDown={(e) => e.stopPropagation()}\n    >\n      {entries.map((option, index) => (\n        <button\n          key={option.value || '__empty'}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={option.value === value}\n          data-active={index === activeIndex || undefined}\n          data-selected={option.value === value || undefined}\n          className=\"hot-select-menu-option text-body-regular-sm\"\n          onMouseEnter={() => setActiveIndex(index)}\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={() => commit(option.value)}\n        >\n          {option.label}\n        </button>\n      ))}\n    </div>\n  ) : null;\n\n  return (\n    <>\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        aria-label={ariaLabel}\n        disabled={disabled}\n        className={`hot-select-trigger ${className}`.trim()}\n        onClick={() => {\n          setActiveIndex(Math.max(0, entries.findIndex((o) => o.value === value)));\n          setOpen((o) => !o);\n        }}\n        onKeyDown={onTriggerKeyDown}\n        {...dataAttributes}\n      >\n        <span\n          className={`hot-select-trigger-label${selected ? '' : ' hot-select-trigger-placeholder'}`}\n        >\n          {selected ? selected.label : (placeholder ?? '')}\n        </span>\n        <ChevronDown className=\"hot-select-trigger-chevron\" aria-hidden />\n      </button>\n      {menu && typeof document !== 'undefined' ? ReactDOM.createPortal(menu, document.body) : menu}\n    </>\n  );\n};\n\nexport default SelectMenu;\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,26 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "../../../primitives-v2/index.js";
+const StaleDataBar = ({ tableName, onRetry }) => {
+  const t = useT();
+  const message = tableName ? t(
+    "dynamicTable.staleData.messageNamed",
+    "Could not refresh {name} \u2014 the rows below are the previous result, not the current one.",
+    { name: tableName }
+  ) : t(
+    "dynamicTable.staleData.message",
+    "Could not refresh this list \u2014 the rows below are the previous result, not the current one."
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "hot-stale-data-bar", role: "status", "data-stale-data": "", children: [
+    /* @__PURE__ */ jsx(AlertTriangle, { className: "hot-stale-data-bar-icon", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "hot-stale-data-bar-message text-body-regular-sm", title: message, children: message }),
+    onRetry && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, "data-stale-data-retry": "", children: t("dynamicTable.staleData.retry", "Try again") })
+  ] });
+};
+var StaleDataBar_default = StaleDataBar;
+export {
+  StaleDataBar_default as default
+};
+//# sourceMappingURL=StaleDataBar.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/StaleDataBar.tsx"],
+  "sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { AlertTriangle } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Button } from '../../../primitives-v2'\n\nexport interface StaleDataBarProps {\n  /** Host label for the dataset, e.g. \"Invoices\". Used to name what went stale. */\n  tableName?: string\n  /** Re-runs the list request. Omit only when the host cannot refetch. */\n  onRetry?: () => void\n}\n\n/**\n * What a DynamicTable shows when the list request FAILED but the grid still\n * holds rows from the previous successful response (HEDGE-165).\n *\n * THIS IS THE OTHER HALF OF `LoadErrorState`. HEDGE-119 taught the zero-row\n * region to tell \"the server refused\" from \"the server said zero rows\", and\n * stopped there \u2014 because `LoadErrorState` is gated on `rowCount === 0`, the\n * case where a refetch fails *while rows are on screen* rendered nothing at\n * all. The failure flag reached the grid and was dropped on the floor.\n *\n * That silence is worse than the state HEDGE-119 fixed, not milder. A grid that\n * shows nothing at least looks broken. A grid that shows the PREVIOUS answer\n * looks like a correct answer to the question just asked: the operator types a\n * search term, the endpoint 500s, and the five rows already there stay put \u2014 so\n * \"the search is broken\" is the charitable reading and \"these five are the\n * matches\" is the likely one. The same trap swallows a post-save refresh: the\n * save succeeded, the refetch behind it 500'd, and the operator is left looking\n * at their pre-save values with nothing saying so.\n *\n * The rows deliberately STAY (dropping them on a transient failure would be a\n * worse trade, which is exactly what `placeholderData` in `useDynamicTablePage`\n * is for). Only the SIGNAL is added: one line saying what is on screen is the\n * previous result, plus the retry that already existed as `onRetryLoad`.\n *\n * `role=\"status\"`, not `role=\"alert\"`: the rows are still usable and the user\n * may be mid-keystroke, so this must not preempt what they are doing the way\n * the zero-row `LoadErrorState` (which owns `role=\"alert\"`) legitimately does.\n */\nconst StaleDataBar: React.FC<StaleDataBarProps> = ({ tableName, onRetry }) => {\n  const t = useT()\n\n  const message = tableName\n    ? t(\n        'dynamicTable.staleData.messageNamed',\n        'Could not refresh {name} \u2014 the rows below are the previous result, not the current one.',\n        { name: tableName },\n      )\n    : t(\n        'dynamicTable.staleData.message',\n        'Could not refresh this list \u2014 the rows below are the previous result, not the current one.',\n      )\n\n  return (\n    <div className=\"hot-stale-data-bar\" role=\"status\" data-stale-data=\"\">\n      <AlertTriangle className=\"hot-stale-data-bar-icon\" aria-hidden=\"true\" />\n      {/* `title` because the message is clipped to one line on a narrow\n          viewport \u2014 a band that reflows would re-measure the grid under it. */}\n      <span className=\"hot-stale-data-bar-message text-body-regular-sm\" title={message}>\n        {message}\n      </span>\n      {onRetry && (\n        <Button variant=\"outline\" size=\"sm\" onClick={onRetry} data-stale-data-retry=\"\">\n          {t('dynamicTable.staleData.retry', 'Try again')}\n        </Button>\n      )}\n    </div>\n  )\n}\n\nexport default StaleDataBar\n"],
+  "mappings": ";AAyDI,SACE,KADF;AAtDJ,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,cAAc;AAqCvB,MAAM,eAA4C,CAAC,EAAE,WAAW,QAAQ,MAAM;AAC5E,QAAM,IAAI,KAAK;AAEf,QAAM,UAAU,YACZ;AAAA,IACE;AAAA,IACA;AAAA,IACA,EAAE,MAAM,UAAU;AAAA,EACpB,IACA;AAAA,IACE;AAAA,IACA;AAAA,EACF;AAEJ,SACE,qBAAC,SAAI,WAAU,sBAAqB,MAAK,UAAS,mBAAgB,IAChE;AAAA,wBAAC,iBAAc,WAAU,2BAA0B,eAAY,QAAO;AAAA,IAGtE,oBAAC,UAAK,WAAU,mDAAkD,OAAO,SACtE,mBACH;AAAA,IACC,WACC,oBAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,SAAS,SAAS,yBAAsB,IACzE,YAAE,gCAAgC,WAAW,GAChD;AAAA,KAEJ;AAEJ;AAEA,IAAO,uBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,48 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../../../primitives/dialog.js";
+import { Button } from "../../../primitives/button.js";
+function TableDeleteDialog({
+  row,
+  isDeleting,
+  onConfirm,
+  onCancel,
+  restoreFocusRef,
+  title,
+  description,
+  nameColumn = "name"
+}) {
+  const resolvedTitle = row ? typeof title === "function" ? title(row) : title ?? "Delete Item" : "Delete Item";
+  const resolvedDescription = row ? typeof description === "function" ? description(row) : description ?? `Are you sure you want to delete "${row[nameColumn] ?? "this item"}"? This action cannot be undone.` : "";
+  return /* @__PURE__ */ jsx(Dialog, { open: !!row, onOpenChange: (open) => !open && onCancel(), children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: "hot-dialog",
+      onCloseAutoFocus: (e) => {
+        e.preventDefault();
+        restoreFocusRef?.current?.focus();
+      },
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: resolvedTitle }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: resolvedDescription })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onCancel, disabled: isDeleting, children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: onConfirm, disabled: isDeleting, children: isDeleting ? "Deleting..." : "Delete" })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  TableDeleteDialog as default
+};
+//# sourceMappingURL=TableDeleteDialog.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/TableDeleteDialog.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../../../primitives/dialog'\nimport { Button } from '../../../primitives/button'\n\nexport interface TableDeleteDialogProps<TRow = any> {\n  row: TRow | null\n  isDeleting: boolean\n  onConfirm: () => void\n  onCancel: () => void\n  /** Ref to focus when the dialog closes */\n  restoreFocusRef?: React.RefObject<HTMLElement | null>\n  title?: string | ((row: TRow) => string)\n  description?: string | ((row: TRow) => string)\n  /** Column key to use for the row name in the default description */\n  nameColumn?: string\n}\n\nexport default function TableDeleteDialog<TRow = any>({\n  row,\n  isDeleting,\n  onConfirm,\n  onCancel,\n  restoreFocusRef,\n  title,\n  description,\n  nameColumn = 'name',\n}: TableDeleteDialogProps<TRow>) {\n  const resolvedTitle = row\n    ? typeof title === 'function'\n      ? title(row)\n      : title ?? 'Delete Item'\n    : 'Delete Item'\n\n  const resolvedDescription = row\n    ? typeof description === 'function'\n      ? description(row)\n      : description ??\n        `Are you sure you want to delete \"${(row as any)[nameColumn] ?? 'this item'}\"? This action cannot be undone.`\n    : ''\n\n  return (\n    <Dialog open={!!row} onOpenChange={(open) => !open && onCancel()}>\n      <DialogContent\n        className=\"hot-dialog\"\n        onCloseAutoFocus={(e) => {\n          e.preventDefault()\n          restoreFocusRef?.current?.focus()\n        }}\n      >\n        <DialogHeader>\n          <DialogTitle>{resolvedTitle}</DialogTitle>\n          <DialogDescription>{resolvedDescription}</DialogDescription>\n        </DialogHeader>\n        <DialogFooter>\n          <Button variant=\"outline\" onClick={onCancel} disabled={isDeleting}>\n            Cancel\n          </Button>\n          <Button variant=\"destructive\" onClick={onConfirm} disabled={isDeleting}>\n            {isDeleting ? 'Deleting...' : 'Delete'}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": ";AA0DQ,SACE,KADF;AAvDR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AAeR,SAAR,kBAA+C;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAAiC;AAC/B,QAAM,gBAAgB,MAClB,OAAO,UAAU,aACf,MAAM,GAAG,IACT,SAAS,gBACX;AAEJ,QAAM,sBAAsB,MACxB,OAAO,gBAAgB,aACrB,YAAY,GAAG,IACf,eACA,oCAAqC,IAAY,UAAU,KAAK,WAAW,qCAC7E;AAEJ,SACE,oBAAC,UAAO,MAAM,CAAC,CAAC,KAAK,cAAc,CAAC,SAAS,CAAC,QAAQ,SAAS,GAC7D;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,kBAAkB,CAAC,MAAM;AACvB,UAAE,eAAe;AACjB,yBAAiB,SAAS,MAAM;AAAA,MAClC;AAAA,MAEA;AAAA,6BAAC,gBACC;AAAA,8BAAC,eAAa,yBAAc;AAAA,UAC5B,oBAAC,qBAAmB,+BAAoB;AAAA,WAC1C;AAAA,QACA,qBAAC,gBACC;AAAA,8BAAC,UAAO,SAAQ,WAAU,SAAS,UAAU,UAAU,YAAY,oBAEnE;AAAA,UACA,oBAAC,UAAO,SAAQ,eAAc,SAAS,WAAW,UAAU,YACzD,uBAAa,gBAAgB,UAChC;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { SelectMenu } from "./SelectMenu.js";
+function getPageItems(current, total) {
+  if (total <= 1) return [1];
+  if (total === 2) return [1, 2];
+  const anchor = current >= total ? 1 : current;
+  if (total - anchor <= 1) return [anchor, total];
+  return [anchor, "ellipsis", total];
+}
+const TablePagination = ({ pagination }) => {
+  const t = useT();
+  const { currentPage, totalPages, limit, limitOptions, onPageChange, onLimitChange } = pagination;
+  return /* @__PURE__ */ jsxs("div", { className: "hot-table-pagination", children: [
+    /* @__PURE__ */ jsxs("div", { className: "hot-table-pagination-pages", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "hot-table-pagination-btn",
+          disabled: currentPage <= 1,
+          onClick: () => onPageChange(currentPage - 1),
+          "aria-label": t("dynamicTable.pagination.previous", "Previous page"),
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4" })
+        }
+      ),
+      getPageItems(currentPage, Math.max(totalPages, 1)).map(
+        (item, i) => item === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "hot-table-pagination-ellipsis", children: "\xB7\xB7\xB7" }, `ellipsis-${i}`) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `hot-table-pagination-page${item === currentPage ? " is-active" : ""}`,
+            onClick: () => onPageChange(item),
+            "aria-current": item === currentPage ? "page" : void 0,
+            children: item
+          },
+          item
+        )
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "hot-table-pagination-btn",
+          disabled: currentPage >= totalPages,
+          onClick: () => onPageChange(currentPage + 1),
+          "aria-label": t("dynamicTable.pagination.next", "Next page"),
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    limitOptions && limitOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: "hot-table-pagination-perpage", children: /* @__PURE__ */ jsx(
+      SelectMenu,
+      {
+        className: "hot-table-pagination-select",
+        value: String(limit),
+        onChange: (next) => onLimitChange(Number(next)),
+        options: limitOptions.map((opt) => ({ value: String(opt), label: String(opt) })),
+        ariaLabel: t("dynamicTable.pagination.perPage", "Rows per page")
+      }
+    ) })
+  ] });
+};
+var TablePagination_default = TablePagination;
+export {
+  TablePagination_default as default
+};
+//# sourceMappingURL=TablePagination.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/TablePagination.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { useT } from '@open-mercato/shared/lib/i18n/context';\nimport { PaginationProps } from '../types/index';\nimport { SelectMenu } from './SelectMenu';\n\ninterface TablePaginationProps {\n  pagination: PaginationProps;\n}\n\n// Compact page items (Figma 220:2935): with more than two pages, show just the\n// active page, an ellipsis, and the last page \u2014 e.g. `[2] \u00B7\u00B7\u00B7 5`. On the last\n// page, anchor to the first instead (`1 \u00B7\u00B7\u00B7 [5]`). Two pages show both; one\n// page shows just itself. Adjacent anchor/last drop the ellipsis.\nfunction getPageItems(current: number, total: number): Array<number | 'ellipsis'> {\n  if (total <= 1) return [1];\n  if (total === 2) return [1, 2];\n  const anchor = current >= total ? 1 : current;\n  if (total - anchor <= 1) return [anchor, total];\n  return [anchor, 'ellipsis', total];\n}\n\n/**\n * Compact inline pagination (Figma 220:2935) \u2014 sits right-aligned on the\n * perspective-tabs row: `\u2039 [active] \u00B7\u00B7\u00B7 page \u203A [rows-per-page \u2304]`.\n * Active page is a slate-300 pill (not navy); no record-count text.\n */\nconst TablePagination: React.FC<TablePaginationProps> = ({ pagination }) => {\n  const t = useT();\n  const { currentPage, totalPages, limit, limitOptions, onPageChange, onLimitChange } = pagination;\n\n  return (\n    <div className=\"hot-table-pagination\">\n      <div className=\"hot-table-pagination-pages\">\n        <button\n          type=\"button\"\n          className=\"hot-table-pagination-btn\"\n          disabled={currentPage <= 1}\n          onClick={() => onPageChange(currentPage - 1)}\n          aria-label={t('dynamicTable.pagination.previous', 'Previous page')}\n        >\n          <ChevronLeft className=\"w-4 h-4\" />\n        </button>\n\n        {getPageItems(currentPage, Math.max(totalPages, 1)).map((item, i) =>\n          item === 'ellipsis' ? (\n            <span key={`ellipsis-${i}`} className=\"hot-table-pagination-ellipsis\">\u00B7\u00B7\u00B7</span>\n          ) : (\n            <button\n              key={item}\n              type=\"button\"\n              className={`hot-table-pagination-page${item === currentPage ? ' is-active' : ''}`}\n              onClick={() => onPageChange(item)}\n              aria-current={item === currentPage ? 'page' : undefined}\n            >\n              {item}\n            </button>\n          )\n        )}\n\n        <button\n          type=\"button\"\n          className=\"hot-table-pagination-btn\"\n          disabled={currentPage >= totalPages}\n          onClick={() => onPageChange(currentPage + 1)}\n          aria-label={t('dynamicTable.pagination.next', 'Next page')}\n        >\n          <ChevronRight className=\"w-4 h-4\" />\n        </button>\n      </div>\n\n      {/* Portal-rendered menu, not a native `<select>`. The OS dropdown paints\n          against the page rather than the grid, ignores every v2 type and shape\n          token, and inside a split pane it escaped the pane's stacking context\n          entirely \u2014 so the one control that stayed native was also the one that\n          broke the M3 language the moment it was opened. `SelectMenu` already\n          exists for exactly this and keeps the trigger's original class, so\n          spacing, radius and colour are unchanged.\n          `hot-table-pagination-select` is load-bearing for the e2e harness and\n          is preserved as the trigger's class. */}\n      {limitOptions && limitOptions.length > 0 && (\n        <div className=\"hot-table-pagination-perpage\">\n          <SelectMenu\n            className=\"hot-table-pagination-select\"\n            value={String(limit)}\n            onChange={(next) => onLimitChange(Number(next))}\n            options={limitOptions.map((opt) => ({ value: String(opt), label: String(opt) }))}\n            ariaLabel={t('dynamicTable.pagination.perPage', 'Rows per page')}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default TablePagination;\n"],
+  "mappings": "AAiCM,SAQI,KARJ;AAhCN,SAAS,aAAa,oBAAoB;AAC1C,SAAS,YAAY;AAErB,SAAS,kBAAkB;AAU3B,SAAS,aAAa,SAAiB,OAA2C;AAChF,MAAI,SAAS,EAAG,QAAO,CAAC,CAAC;AACzB,MAAI,UAAU,EAAG,QAAO,CAAC,GAAG,CAAC;AAC7B,QAAM,SAAS,WAAW,QAAQ,IAAI;AACtC,MAAI,QAAQ,UAAU,EAAG,QAAO,CAAC,QAAQ,KAAK;AAC9C,SAAO,CAAC,QAAQ,YAAY,KAAK;AACnC;AAOA,MAAM,kBAAkD,CAAC,EAAE,WAAW,MAAM;AAC1E,QAAM,IAAI,KAAK;AACf,QAAM,EAAE,aAAa,YAAY,OAAO,cAAc,cAAc,cAAc,IAAI;AAEtF,SACE,qBAAC,SAAI,WAAU,wBACb;AAAA,yBAAC,SAAI,WAAU,8BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,UAAU,eAAe;AAAA,UACzB,SAAS,MAAM,aAAa,cAAc,CAAC;AAAA,UAC3C,cAAY,EAAE,oCAAoC,eAAe;AAAA,UAEjE,8BAAC,eAAY,WAAU,WAAU;AAAA;AAAA,MACnC;AAAA,MAEC,aAAa,aAAa,KAAK,IAAI,YAAY,CAAC,CAAC,EAAE;AAAA,QAAI,CAAC,MAAM,MAC7D,SAAS,aACP,oBAAC,UAA2B,WAAU,iCAAgC,4BAA3D,YAAY,CAAC,EAAiD,IAEzE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,WAAW,4BAA4B,SAAS,cAAc,eAAe,EAAE;AAAA,YAC/E,SAAS,MAAM,aAAa,IAAI;AAAA,YAChC,gBAAc,SAAS,cAAc,SAAS;AAAA,YAE7C;AAAA;AAAA,UANI;AAAA,QAOP;AAAA,MAEJ;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,UAAU,eAAe;AAAA,UACzB,SAAS,MAAM,aAAa,cAAc,CAAC;AAAA,UAC3C,cAAY,EAAE,gCAAgC,WAAW;AAAA,UAEzD,8BAAC,gBAAa,WAAU,WAAU;AAAA;AAAA,MACpC;AAAA,OACF;AAAA,IAWC,gBAAgB,aAAa,SAAS,KACrC,oBAAC,SAAI,WAAU,gCACb;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,OAAO,KAAK;AAAA,QACnB,UAAU,CAAC,SAAS,cAAc,OAAO,IAAI,CAAC;AAAA,QAC9C,SAAS,aAAa,IAAI,CAAC,SAAS,EAAE,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,EAAE,EAAE;AAAA,QAC/E,WAAW,EAAE,mCAAmC,eAAe;AAAA;AAAA,IACjE,GACF;AAAA,KAEJ;AAEJ;AAEA,IAAO,0BAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,43 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const CONTENT_BAR_W = 56;
+const HEADER_BAR_W = 56;
+const FIRST_COL_BAR_W = 150;
+const Bar = ({ w = "60%", h = 12, round = 6, style }) => /* @__PURE__ */ jsx("div", { className: "dt-skel-bar", style: { width: w, height: h, borderRadius: round, ...style } });
+const TableSkeleton = ({
+  rows = 10,
+  columns = 8,
+  rowHeaders = true,
+  colHeaders = true,
+  height = "auto",
+  width = "100%",
+  columnWidths = [],
+  toolbar = true,
+  actions = true
+}) => {
+  const widths = columnWidths.length ? columnWidths : Array.from({ length: columns }, () => 140);
+  const gridCells = (cellContent) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    rowHeaders && /* @__PURE__ */ jsx("div", { className: "dt-skel-cell dt-skel-cell--fixed", style: { flexBasis: 44 }, children: /* @__PURE__ */ jsx(Bar, { w: 16, h: 16, round: 4 }) }),
+    widths.map((w, i) => /* @__PURE__ */ jsx("div", { className: "dt-skel-cell", style: { flexGrow: w, flexBasis: 0 }, children: cellContent(i) }, i)),
+    actions && /* @__PURE__ */ jsx("div", { className: "dt-skel-cell dt-skel-cell--fixed dt-skel-cell--center", style: { flexBasis: 56 }, children: /* @__PURE__ */ jsx(Bar, { w: 16, h: 4, round: 4 }) })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "table-skeleton dt-skel", style: { width, height }, "aria-hidden": true, children: [
+    toolbar && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "dt-skel-toolbar", children: [
+        /* @__PURE__ */ jsx(Bar, { w: 260, h: 36, round: 10 }),
+        /* @__PURE__ */ jsx(Bar, { w: 36, h: 36, round: 10 })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "dt-skel-tabs", children: [
+        /* @__PURE__ */ jsx(Bar, { w: 188, h: 28, round: 8 }),
+        /* @__PURE__ */ jsx(Bar, { w: 120, h: 28, round: 8 })
+      ] })
+    ] }),
+    colHeaders && /* @__PURE__ */ jsx("div", { className: "dt-skel-header", children: gridCells((i) => /* @__PURE__ */ jsx(Bar, { w: i === 0 ? FIRST_COL_BAR_W : HEADER_BAR_W, h: 10, round: 4 })) }),
+    /* @__PURE__ */ jsx("div", { className: "dt-skel-body", children: Array.from({ length: rows }, (_, r) => /* @__PURE__ */ jsx("div", { className: "dt-skel-row", children: gridCells((i) => /* @__PURE__ */ jsx(Bar, { w: i === 0 ? FIRST_COL_BAR_W : CONTENT_BAR_W, h: 12, round: 6 })) }, r)) })
+  ] });
+};
+var TableSkeleton_default = TableSkeleton;
+export {
+  TableSkeleton_default as default
+};
+//# sourceMappingURL=TableSkeleton.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/TableSkeleton.tsx"],
+  "sourcesContent": ["'use client';\n\nimport React from 'react';\n\ninterface TableSkeletonProps {\n  /** Number of skeleton body rows to display */\n  rows?: number;\n  /** Number of skeleton columns (ignored when `columnWidths` is provided) */\n  columns?: number;\n  /** Whether to show the leading select (checkbox) column */\n  rowHeaders?: boolean;\n  /** Whether to show the column-header bar */\n  colHeaders?: boolean;\n  /** Height of the skeleton container */\n  height?: string | number;\n  /** Width of the skeleton container */\n  width?: string | number;\n  /** Table name (kept for API compatibility; no longer rendered) */\n  tableName?: string;\n  /**\n   * Real column widths from the table being loaded. Used as flex weights so the\n   * skeleton mirrors the table's column proportions and stretches to fill the\n   * container (no narrow grid, no layout jump when data arrives).\n   */\n  columnWidths?: number[];\n  /** Render the toolbar (search + actions) and perspective-tab row above the grid */\n  toolbar?: boolean;\n  /** Render the trailing row-actions (\u2022\u2022\u2022) column */\n  actions?: boolean;\n}\n\n// Uniform placeholder widths for a calm, regular grid \u2014 except the first data\n// column (the primary/name column), which gets a wider bar to read as the\n// table's main column.\nconst CONTENT_BAR_W = 56;\nconst HEADER_BAR_W = 56;\nconst FIRST_COL_BAR_W = 150;\n\n/** A shimmering placeholder bar (every bar in the skeleton animates). */\nconst Bar: React.FC<{\n  w?: number | string;\n  h?: number;\n  round?: number;\n  style?: React.CSSProperties;\n}> = ({ w = '60%', h = 12, round = 6, style }) => (\n  <div className=\"dt-skel-bar\" style={{ width: w, height: h, borderRadius: round, ...style }} />\n);\n\nconst TableSkeleton: React.FC<TableSkeletonProps> = ({\n  rows = 10,\n  columns = 8,\n  rowHeaders = true,\n  colHeaders = true,\n  height = 'auto',\n  width = '100%',\n  columnWidths = [],\n  toolbar = true,\n  actions = true,\n}) => {\n  const widths = columnWidths.length ? columnWidths : Array.from({ length: columns }, () => 140);\n\n  // One grid row \u2014 the select cell, the weighted data cells, and the actions\n  // cell. `flexGrow: weight` + `flexBasis: 0` distributes the full width in the\n  // same proportions as the real columns. `cellContent(i)` fills each data cell.\n  const gridCells = (cellContent: (colIndex: number) => React.ReactNode) => (\n    <>\n      {rowHeaders && (\n        <div className=\"dt-skel-cell dt-skel-cell--fixed\" style={{ flexBasis: 44 }}>\n          <Bar w={16} h={16} round={4} />\n        </div>\n      )}\n      {widths.map((w, i) => (\n        <div key={i} className=\"dt-skel-cell\" style={{ flexGrow: w, flexBasis: 0 }}>\n          {cellContent(i)}\n        </div>\n      ))}\n      {actions && (\n        <div className=\"dt-skel-cell dt-skel-cell--fixed dt-skel-cell--center\" style={{ flexBasis: 56 }}>\n          <Bar w={16} h={4} round={4} />\n        </div>\n      )}\n    </>\n  );\n\n  return (\n    <div className=\"table-skeleton dt-skel\" style={{ width, height }} aria-hidden>\n      {toolbar && (\n        <>\n          <div className=\"dt-skel-toolbar\">\n            <Bar w={260} h={36} round={10} />\n            <Bar w={36} h={36} round={10} />\n          </div>\n          {/* Perspective tabs (left) and pagination (right) each collapse to a\n              single bar \u2014 keeps the shimmer count low. */}\n          <div className=\"dt-skel-tabs\">\n            <Bar w={188} h={28} round={8} />\n            <Bar w={120} h={28} round={8} />\n          </div>\n        </>\n      )}\n\n      {colHeaders && (\n        <div className=\"dt-skel-header\">\n          {gridCells((i) => (\n            <Bar w={i === 0 ? FIRST_COL_BAR_W : HEADER_BAR_W} h={10} round={4} />\n          ))}\n        </div>\n      )}\n\n      <div className=\"dt-skel-body\">\n        {Array.from({ length: rows }, (_, r) => (\n          <div className=\"dt-skel-row\" key={r}>\n            {gridCells((i) => (\n              <Bar w={i === 0 ? FIRST_COL_BAR_W : CONTENT_BAR_W} h={12} round={6} />\n            ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default TableSkeleton;\n"],
+  "mappings": ";AA6CE,SAoBE,UApBF,KAoBE,YApBF;AAXF,MAAM,gBAAgB;AACtB,MAAM,eAAe;AACrB,MAAM,kBAAkB;AAGxB,MAAM,MAKD,CAAC,EAAE,IAAI,OAAO,IAAI,IAAI,QAAQ,GAAG,MAAM,MAC1C,oBAAC,SAAI,WAAU,eAAc,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,cAAc,OAAO,GAAG,MAAM,GAAG;AAG9F,MAAM,gBAA8C,CAAC;AAAA,EACnD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,aAAa;AAAA,EACb,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,eAAe,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AACZ,MAAM;AACJ,QAAM,SAAS,aAAa,SAAS,eAAe,MAAM,KAAK,EAAE,QAAQ,QAAQ,GAAG,MAAM,GAAG;AAK7F,QAAM,YAAY,CAAC,gBACjB,iCACG;AAAA,kBACC,oBAAC,SAAI,WAAU,oCAAmC,OAAO,EAAE,WAAW,GAAG,GACvE,8BAAC,OAAI,GAAG,IAAI,GAAG,IAAI,OAAO,GAAG,GAC/B;AAAA,IAED,OAAO,IAAI,CAAC,GAAG,MACd,oBAAC,SAAY,WAAU,gBAAe,OAAO,EAAE,UAAU,GAAG,WAAW,EAAE,GACtE,sBAAY,CAAC,KADN,CAEV,CACD;AAAA,IACA,WACC,oBAAC,SAAI,WAAU,yDAAwD,OAAO,EAAE,WAAW,GAAG,GAC5F,8BAAC,OAAI,GAAG,IAAI,GAAG,GAAG,OAAO,GAAG,GAC9B;AAAA,KAEJ;AAGF,SACE,qBAAC,SAAI,WAAU,0BAAyB,OAAO,EAAE,OAAO,OAAO,GAAG,eAAW,MAC1E;AAAA,eACC,iCACE;AAAA,2BAAC,SAAI,WAAU,mBACb;AAAA,4BAAC,OAAI,GAAG,KAAK,GAAG,IAAI,OAAO,IAAI;AAAA,QAC/B,oBAAC,OAAI,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI;AAAA,SAChC;AAAA,MAGA,qBAAC,SAAI,WAAU,gBACb;AAAA,4BAAC,OAAI,GAAG,KAAK,GAAG,IAAI,OAAO,GAAG;AAAA,QAC9B,oBAAC,OAAI,GAAG,KAAK,GAAG,IAAI,OAAO,GAAG;AAAA,SAChC;AAAA,OACF;AAAA,IAGD,cACC,oBAAC,SAAI,WAAU,kBACZ,oBAAU,CAAC,MACV,oBAAC,OAAI,GAAG,MAAM,IAAI,kBAAkB,cAAc,GAAG,IAAI,OAAO,GAAG,CACpE,GACH;AAAA,IAGF,oBAAC,SAAI,WAAU,gBACZ,gBAAM,KAAK,EAAE,QAAQ,KAAK,GAAG,CAAC,GAAG,MAChC,oBAAC,SAAI,WAAU,eACZ,oBAAU,CAAC,MACV,oBAAC,OAAI,GAAG,MAAM,IAAI,kBAAkB,eAAe,GAAG,IAAI,OAAO,GAAG,CACrE,KAH+B,CAIlC,CACD,GACH;AAAA,KACF;AAEJ;AAEA,IAAO,wBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,204 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { Check, Download, Maximize2, MoreHorizontal } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { DENSITY_LEVELS } from "../types/density.js";
+import { setDensityPreference, useDensityPreference } from "../hooks/useDensityPreference.js";
+import { computeAnchoredPosition } from "../utils/anchoredPosition.js";
+const ToolbarOverflowCloseContext = React.createContext(() => {
+});
+function useToolbarOverflowClose() {
+  return React.useContext(ToolbarOverflowCloseContext);
+}
+const ToolbarOverflowCloseProvider = ToolbarOverflowCloseContext.Provider;
+const MENU_WIDTH = 216;
+const MENU_MAX_HEIGHT = 720;
+const DENSITY_LABELS = {
+  comfortable: "Roomy",
+  compact: "Medium",
+  dense: "Tight"
+};
+const ToolbarOverflow = ({
+  onExport,
+  exportDisabled,
+  showDensity = true,
+  densityTableKey,
+  onFullscreen,
+  extras
+}) => {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  const [exportOpen, setExportOpen] = React.useState(false);
+  const boxRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const [placement, setPlacement] = React.useState({ top: 0, left: 0, maxHeight: MENU_MAX_HEIGHT });
+  const reposition = React.useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const next = computeAnchoredPosition(
+      trigger.getBoundingClientRect(),
+      { width: window.innerWidth, height: window.innerHeight },
+      { width: MENU_WIDTH, preferredHeight: MENU_MAX_HEIGHT, align: "end", minHeight: 180 }
+    );
+    setPlacement({ top: next.top, left: next.left, maxHeight: next.maxHeight });
+  }, []);
+  React.useLayoutEffect(() => {
+    if (open) reposition();
+  }, [open, reposition]);
+  React.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]);
+  const { density } = useDensityPreference(void 0, densityTableKey);
+  const closeMenu = React.useCallback(() => {
+    setOpen(false);
+    setExportOpen(false);
+  }, []);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDown = (event) => {
+      const target = event.target;
+      const insidePanel = boxRef.current?.contains(target);
+      const onTrigger = triggerRef.current?.contains(target);
+      if (!insidePanel && !onTrigger) {
+        setOpen(false);
+        setExportOpen(false);
+      }
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        setExportOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  if (!onExport && !showDensity && !onFullscreen && !extras) return null;
+  const row = "flex h-7 w-full items-center gap-2 rounded-m3-sm px-1.5 text-left text-body-regular-xs text-[var(--m3-on-surface)] transition-colors hover:bg-[var(--m3-state-layer-hover)]";
+  const gutter = "flex w-4 shrink-0 justify-center";
+  const gutterIcon = "h-3.5 w-3.5 text-[var(--m3-on-surface-variant)]";
+  return /* @__PURE__ */ jsxs("div", { className: "relative", ref: boxRef, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        onClick: () => setOpen((value) => !value),
+        title: t("dynamicTable.toolbar.more", "More"),
+        "aria-label": t("dynamicTable.toolbar.more", "More table actions"),
+        "aria-expanded": open,
+        className: "hot-toolbar-overflow-btn",
+        "data-toolbar-overflow": "",
+        children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-4 h-4" })
+      }
+    ),
+    open && typeof document !== "undefined" && ReactDOM.createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: boxRef,
+          className: "fixed z-[1000] overflow-y-auto rounded-m3-md border border-[var(--m3-outline-variant)] bg-[var(--m3-surface-container)] py-1 text-[var(--m3-on-surface)] shadow-m3-2",
+          style: { top: placement.top, left: placement.left, width: MENU_WIDTH, maxHeight: placement.maxHeight },
+          "data-toolbar-overflow-menu": "",
+          children: [
+            onExport && /* @__PURE__ */ jsxs("div", { className: "px-1", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  disabled: exportDisabled,
+                  onClick: () => setExportOpen((value) => !value),
+                  className: row,
+                  "data-toolbar-export": "",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: gutter, children: /* @__PURE__ */ jsx(Download, { className: gutterIcon }) }),
+                    t("dynamicTable.export.button", "Export")
+                  ]
+                }
+              ),
+              exportOpen && /* @__PURE__ */ jsx("div", { className: "mb-1 ml-6 flex flex-col gap-0.5", children: ["csv", "xlsx"].map((format) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    onExport(format);
+                    setExportOpen(false);
+                    setOpen(false);
+                  },
+                  className: "flex h-6 items-center rounded-m3-full px-2 text-left text-body-regular-2xs uppercase text-[var(--m3-on-surface-variant)] transition-colors hover:bg-[var(--m3-state-layer-hover)] hover:text-[var(--m3-on-surface)]",
+                  "data-toolbar-export-format": format,
+                  children: format
+                },
+                format
+              )) })
+            ] }),
+            showDensity && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "px-2 pb-1 pt-1.5 text-label-semibold-2xs uppercase text-[var(--m3-on-surface-variant)]", children: t("dynamicTable.density.label", "Row height") }),
+              /* @__PURE__ */ jsx("div", { className: "px-2 pb-1.5", children: /* @__PURE__ */ jsx("div", { className: "flex overflow-hidden rounded-m3-full border border-[var(--m3-outline)]", children: DENSITY_LEVELS.map((level, index) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setDensityPreference(level, densityTableKey),
+                  className: [
+                    "flex flex-1 items-center justify-center gap-1 py-1 text-caption-medium-md transition-colors",
+                    index > 0 ? "border-l border-[var(--m3-outline)]" : "",
+                    density === level ? "bg-[var(--m3-secondary-container)] text-[var(--m3-on-secondary-container)]" : "text-[var(--m3-on-surface-variant)] hover:bg-[var(--m3-state-layer-hover)]"
+                  ].join(" "),
+                  "data-density-option": level,
+                  "aria-pressed": density === level,
+                  children: [
+                    density === level ? /* @__PURE__ */ jsx(Check, { size: 11, "aria-hidden": "true" }) : null,
+                    DENSITY_LABELS[level]
+                  ]
+                },
+                level
+              )) }) })
+            ] }),
+            onFullscreen && /* @__PURE__ */ jsx("div", { className: "px-1", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onFullscreen();
+                  setOpen(false);
+                },
+                className: row,
+                "data-toolbar-fullscreen": "",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: gutter, children: /* @__PURE__ */ jsx(Maximize2, { className: gutterIcon }) }),
+                  t("dynamicTable.toolbar.fullscreen", "Fullscreen")
+                ]
+              }
+            ) }),
+            extras && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "mx-2 my-1 border-t border-[var(--m3-outline-faint)]" }),
+              /* @__PURE__ */ jsx(ToolbarOverflowCloseContext.Provider, { value: closeMenu, children: extras })
+            ] })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+var ToolbarOverflow_default = ToolbarOverflow;
+export {
+  ToolbarOverflow,
+  ToolbarOverflowCloseProvider,
+  ToolbarOverflow_default as default,
+  useToolbarOverflowClose
+};
+//# sourceMappingURL=ToolbarOverflow.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/ToolbarOverflow.tsx"],
+  "sourcesContent": ["'use client'\n\n/**\n * THE table's overflow menu. One button, everything secondary inside it.\n *\n * Export, row height and fullscreen are occasional controls that were each\n * spending permanent toolbar width on every table in the app, crowding the\n * primary action a page exists for.\n *\n * A host (split view) injects its own items via `extras` rather than rendering\n * a second button beside this one \u2014 an earlier build did exactly that and left\n * two near-identical `\u22EF` buttons side by side, which is worse than the problem\n * it set out to fix.\n */\n\nimport * as React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Check, Download, Maximize2, MoreHorizontal } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { DENSITY_LEVELS, type DensityLevel } from '../types/density'\nimport { setDensityPreference, useDensityPreference } from '../hooks/useDensityPreference'\nimport type { ExportFormat } from '../utils/exportTable'\nimport { computeAnchoredPosition } from '../utils/anchoredPosition'\n\n/**\n * Lets an injected row close the menu it lives in.\n *\n * The menu used to close on ANY click inside `extras`, which made expandable\n * rows (Arrange, Layouts) look dead: the click toggled the section open and\n * tore the menu down in the same gesture. Closing is now the row's own call \u2014\n * terminal actions ask for it, disclosure toggles do not.\n */\nconst ToolbarOverflowCloseContext = React.createContext<() => void>(() => {})\n\nexport function useToolbarOverflowClose(): () => void {\n  return React.useContext(ToolbarOverflowCloseContext)\n}\n\n/** Lets another popover host the same rows and still honour their close calls. */\nexport const ToolbarOverflowCloseProvider = ToolbarOverflowCloseContext.Provider\n\nexport interface ToolbarOverflowProps {\n  onExport?: (format: ExportFormat) => void\n  exportDisabled?: boolean\n  showDensity?: boolean\n  densityTableKey?: string\n  onFullscreen?: () => void\n  /** Host-supplied rows appended below the table's own. */\n  extras?: React.ReactNode\n}\n\nconst MENU_WIDTH = 216\n/**\n * Generous on purpose. `computeAnchoredPosition` clamps this to what actually\n * fits, so asking for a tall panel means \"use the space you have\" rather than\n * \"be this tall\". At 460 the menu capped itself well short of the viewport, and\n * expanding Arrange pushed Layouts, Open full page and Close pane into a scroll\n * region below the fold \u2014 they looked absent.\n */\nconst MENU_MAX_HEIGHT = 720\n\nconst DENSITY_LABELS: Record<DensityLevel, string> = {\n  comfortable: 'Roomy',\n  compact: 'Medium',\n  dense: 'Tight',\n}\n\nexport const ToolbarOverflow: React.FC<ToolbarOverflowProps> = ({\n  onExport,\n  exportDisabled,\n  showDensity = true,\n  densityTableKey,\n  onFullscreen,\n  extras,\n}) => {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const [exportOpen, setExportOpen] = React.useState(false)\n  const boxRef = React.useRef<HTMLDivElement>(null)\n  const triggerRef = React.useRef<HTMLButtonElement>(null)\n  const [placement, setPlacement] = React.useState({ top: 0, left: 0, maxHeight: MENU_MAX_HEIGHT })\n\n  /**\n   * The panel was plain `absolute`, so near the bottom of the viewport it ran\n   * straight off screen \u2014 with the host's rows appended it is tall enough that\n   * Views bar, Arrange, Layouts and Close became unreachable. Portalled to body\n   * and positioned with the same helper every other menu in the grid uses: it\n   * flips above when there is more room there, clamps to the height that\n   * actually fits, and scrolls inside.\n   */\n  const reposition = React.useCallback(() => {\n    const trigger = triggerRef.current\n    if (!trigger) return\n    const next = computeAnchoredPosition(\n      trigger.getBoundingClientRect(),\n      { width: window.innerWidth, height: window.innerHeight },\n      { width: MENU_WIDTH, preferredHeight: MENU_MAX_HEIGHT, align: 'end', minHeight: 180 },\n    )\n    setPlacement({ top: next.top, left: next.left, maxHeight: next.maxHeight })\n  }, [])\n\n  React.useLayoutEffect(() => { if (open) reposition() }, [open, reposition])\n\n  React.useEffect(() => {\n    if (!open) return\n    const onScroll = () => reposition()\n    window.addEventListener('scroll', onScroll, true)\n    window.addEventListener('resize', onScroll)\n    return () => {\n      window.removeEventListener('scroll', onScroll, true)\n      window.removeEventListener('resize', onScroll)\n    }\n  }, [open, reposition])\n  const { density } = useDensityPreference(undefined, densityTableKey)\n\n  const closeMenu = React.useCallback(() => { setOpen(false); setExportOpen(false) }, [])\n\n  React.useEffect(() => {\n    if (!open) return\n    const onDown = (event: MouseEvent) => {\n      const target = event.target as Node\n      // The panel is portalled to body, so it is NOT inside the trigger's\n      // wrapper any more \u2014 both have to count as \"inside\", or clicking the\n      // trigger would close here and immediately reopen via onClick.\n      const insidePanel = boxRef.current?.contains(target)\n      const onTrigger = triggerRef.current?.contains(target)\n      if (!insidePanel && !onTrigger) {\n        setOpen(false)\n        setExportOpen(false)\n      }\n    }\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') { setOpen(false); setExportOpen(false) }\n    }\n    document.addEventListener('mousedown', onDown)\n    document.addEventListener('keydown', onKey)\n    return () => {\n      document.removeEventListener('mousedown', onDown)\n      document.removeEventListener('keydown', onKey)\n    }\n  }, [open])\n\n  if (!onExport && !showDensity && !onFullscreen && !extras) return null\n\n  // One M3 menu row: the concentric 8px corner the overlay sheet gives every\n  // other menu item, a translucent hover state layer, and the 12/16 body token\n  // instead of a raw `text-[12px]`.\n  const row = 'flex h-7 w-full items-center gap-2 rounded-m3-sm px-1.5 text-left text-body-regular-xs text-[var(--m3-on-surface)] transition-colors hover:bg-[var(--m3-state-layer-hover)]'\n  const gutter = 'flex w-4 shrink-0 justify-center'\n  // Leading glyphs are meta, so they take the variant ink. They used to be\n  // dimmed with `opacity-70`, which mutes the icon's own colour against an\n  // unknown ground rather than giving it a role.\n  const gutterIcon = 'h-3.5 w-3.5 text-[var(--m3-on-surface-variant)]'\n\n  return (\n    <div className=\"relative\" ref={boxRef}>\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        onClick={() => setOpen((value) => !value)}\n        title={t('dynamicTable.toolbar.more', 'More')}\n        aria-label={t('dynamicTable.toolbar.more', 'More table actions')}\n        aria-expanded={open}\n        className=\"hot-toolbar-overflow-btn\"\n        data-toolbar-overflow=\"\"\n      >\n        <MoreHorizontal className=\"w-4 h-4\" />\n      </button>\n\n      {open && typeof document !== 'undefined' && ReactDOM.createPortal(\n        <div\n          ref={boxRef}\n          // z-[1000] is the house level for portalled dropdowns (RowActions,\n          // ActionsDropdown). At z-50 this panel rendered UNDER the app\n          // sidebar: a pane on the left anchors its menu over the nav, and\n          // nav links intercepted the clicks, so menu rows that happened to\n          // overlap a link were dead while their neighbours worked.\n          className=\"fixed z-[1000] overflow-y-auto rounded-m3-md border border-[var(--m3-outline-variant)] bg-[var(--m3-surface-container)] py-1 text-[var(--m3-on-surface)] shadow-m3-2\"\n          style={{ top: placement.top, left: placement.left, width: MENU_WIDTH, maxHeight: placement.maxHeight }}\n          data-toolbar-overflow-menu=\"\"\n        >\n          {onExport && (\n            <div className=\"px-1\">\n              <button\n                type=\"button\"\n                disabled={exportDisabled}\n                onClick={() => setExportOpen((value) => !value)}\n                className={row}\n                data-toolbar-export=\"\"\n              >\n                <span className={gutter}><Download className={gutterIcon} /></span>\n                {t('dynamicTable.export.button', 'Export')}\n              </button>\n              {exportOpen && (\n                <div className=\"mb-1 ml-6 flex flex-col gap-0.5\">\n                  {(['csv', 'xlsx'] as const).map((format) => (\n                    <button\n                      key={format}\n                      type=\"button\"\n                      onClick={() => { onExport(format as ExportFormat); setExportOpen(false); setOpen(false) }}\n                      className=\"flex h-6 items-center rounded-m3-full px-2 text-left text-body-regular-2xs uppercase text-[var(--m3-on-surface-variant)] transition-colors hover:bg-[var(--m3-state-layer-hover)] hover:text-[var(--m3-on-surface)]\"\n                      data-toolbar-export-format={format}\n                    >\n                      {format}\n                    </button>\n                  ))}\n                </div>\n              )}\n            </div>\n          )}\n\n          {showDensity && (\n            <>\n              {/* 10px chrome goes through the 10px token. Routing it through\n                  `text-caption-medium-md` (12/16) would grow this label by 20%\n                  and its line box by 60%. It was also dimmed with `opacity-45`,\n                  which washes the ink toward the menu ground instead of naming\n                  it as secondary \u2014 `on-surface-variant` is the role for that. */}\n              <div className=\"px-2 pb-1 pt-1.5 text-label-semibold-2xs uppercase text-[var(--m3-on-surface-variant)]\">\n                {t('dynamicTable.density.label', 'Row height')}\n              </div>\n              <div className=\"px-2 pb-1.5\">\n                {/* M3 connected button group, replacing an iOS-style inset\n                    track with an elevated thumb. No track fill, no gaps and no\n                    shadow: one pill-shaped outline, hairlines between the\n                    segments, and the selected one takes the same\n                    `secondary-container` blue that a selected row and a\n                    selected menu item take. The check glyph is M3's own\n                    selected marker for a segmented button. */}\n                <div className=\"flex overflow-hidden rounded-m3-full border border-[var(--m3-outline)]\">\n                  {DENSITY_LEVELS.map((level, index) => (\n                    <button\n                      key={level}\n                      type=\"button\"\n                      onClick={() => setDensityPreference(level, densityTableKey)}\n                      className={[\n                        'flex flex-1 items-center justify-center gap-1 py-1 text-caption-medium-md transition-colors',\n                        index > 0 ? 'border-l border-[var(--m3-outline)]' : '',\n                        density === level\n                          ? 'bg-[var(--m3-secondary-container)] text-[var(--m3-on-secondary-container)]'\n                          : 'text-[var(--m3-on-surface-variant)] hover:bg-[var(--m3-state-layer-hover)]',\n                      ].join(' ')}\n                      data-density-option={level}\n                      aria-pressed={density === level}\n                    >\n                      {density === level ? <Check size={11} aria-hidden=\"true\" /> : null}\n                      {DENSITY_LABELS[level]}\n                    </button>\n                  ))}\n                </div>\n              </div>\n            </>\n          )}\n\n          {onFullscreen && (\n            <div className=\"px-1\">\n              <button\n                type=\"button\"\n                onClick={() => { onFullscreen(); setOpen(false) }}\n                className={row}\n                data-toolbar-fullscreen=\"\"\n              >\n                <span className={gutter}><Maximize2 className={gutterIcon} /></span>\n                {t('dynamicTable.toolbar.fullscreen', 'Fullscreen')}\n              </button>\n            </div>\n          )}\n\n          {extras && (\n            <>\n              <div className=\"mx-2 my-1 border-t border-[var(--m3-outline-faint)]\" />\n              <ToolbarOverflowCloseContext.Provider value={closeMenu}>\n                {extras}\n              </ToolbarOverflowCloseContext.Provider>\n            </>\n          )}\n        </div>,\n        document.body,\n      )}\n    </div>\n  )\n}\n\nexport default ToolbarOverflow\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+const ViewModeSwitch = ({ options, value, onChange }) => {
+  if (options.length < 2) return null;
+  const handleKeyDown = (e) => {
+    const dir = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+    if (dir === 0) return;
+    e.preventDefault();
+    const idx = options.findIndex((o) => o.mode === value);
+    const next = options[(idx + dir + options.length) % options.length];
+    if (next) onChange(next.mode);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "hot-viewmode-switch",
+      role: "radiogroup",
+      "aria-label": options.map((o) => o.label).join(" / "),
+      onKeyDown: handleKeyDown,
+      children: options.map((option) => {
+        const selected = option.mode === value;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": selected,
+            "aria-label": option.label,
+            title: option.label,
+            tabIndex: selected ? 0 : -1,
+            "data-selected": selected ? "true" : void 0,
+            "data-view-mode": option.mode,
+            className: "hot-viewmode-segment",
+            onClick: () => {
+              if (!selected) onChange(option.mode);
+            },
+            children: option.icon
+          },
+          option.mode
+        );
+      })
+    }
+  );
+};
+var ViewModeSwitch_default = ViewModeSwitch;
+export {
+  ViewModeSwitch,
+  ViewModeSwitch_default as default
+};
+//# sourceMappingURL=ViewModeSwitch.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/ViewModeSwitch.tsx"],
+  "sourcesContent": ["'use client'\n\n/**\n * VIEW MODE SWITCH \u2014 the list/grid control in the toolbar's icon cluster.\n *\n * A Material 3 **segmented button**, not a dropdown: two options do not earn a\n * menu, and the reference this feature is modelled on (Google Drive) uses a\n * toggle. The selected segment carries the `secondary-container` /\n * `on-secondary-container` PAIR \u2014 never a background without its matching\n * foreground, which is the mechanism that makes a Material surface legible in\n * both themes without a second set of colours.\n *\n * Three things here are house rules rather than taste:\n *\n *  1. **48 dp minimum touch target.** The visible segment is 32 px to sit in a\n *     dense toolbar; the target is grown to 48 with a transparent inset rather\n *     than by making the control bigger. A control you can see and cannot\n *     reliably hit is a control that reads as broken on a laptop trackpad.\n *  2. **Interaction is a state LAYER** \u2014 an 8% wash of the content colour over\n *     whatever is underneath \u2014 not a background swap. A hover that replaces the\n *     fill loses the selected/unselected distinction for the frame it is under\n *     the cursor.\n *  3. **Radio semantics, not two buttons.** `role=\"radiogroup\"` with\n *     `aria-checked` announces \"2 of 2\" and the current choice. Two independent\n *     buttons announce neither, and a screen-reader user cannot tell which view\n *     they are already in.\n *\n * Arrow keys move the selection (radio-group convention); Tab enters and leaves\n * the group once, landing on the checked segment.\n */\n\nimport * as React from 'react'\nimport type { TableViewMode, TableViewModeOption } from '../types/index'\n\nexport interface ViewModeSwitchProps {\n  options: TableViewModeOption[]\n  value: TableViewMode\n  onChange: (mode: TableViewMode) => void\n}\n\nexport const ViewModeSwitch: React.FC<ViewModeSwitchProps> = ({ options, value, onChange }) => {\n  // One option is not a choice. Rendering a segmented control with a single\n  // segment offers the user a decision that does not exist.\n  if (options.length < 2) return null\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const dir = e.key === 'ArrowRight' || e.key === 'ArrowDown'\n      ? 1\n      : e.key === 'ArrowLeft' || e.key === 'ArrowUp'\n        ? -1\n        : 0\n    if (dir === 0) return\n    e.preventDefault()\n    const idx = options.findIndex((o) => o.mode === value)\n    const next = options[(idx + dir + options.length) % options.length]\n    if (next) onChange(next.mode)\n  }\n\n  return (\n    <div\n      className=\"hot-viewmode-switch\"\n      role=\"radiogroup\"\n      aria-label={options.map((o) => o.label).join(' / ')}\n      onKeyDown={handleKeyDown}\n    >\n      {options.map((option) => {\n        const selected = option.mode === value\n        return (\n          <button\n            key={option.mode}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            aria-label={option.label}\n            title={option.label}\n            /* Only the checked segment is tabbable \u2014 the radio-group\n               convention. Otherwise Tab stops twice inside one control. */\n            tabIndex={selected ? 0 : -1}\n            data-selected={selected ? 'true' : undefined}\n            data-view-mode={option.mode}\n            className=\"hot-viewmode-segment\"\n            onClick={() => { if (!selected) onChange(option.mode) }}\n          >\n            {option.icon}\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n\nexport default ViewModeSwitch\n"],
+  "mappings": ";AAoEU;AA5BH,MAAM,iBAAgD,CAAC,EAAE,SAAS,OAAO,SAAS,MAAM;AAG7F,MAAI,QAAQ,SAAS,EAAG,QAAO;AAE/B,QAAM,gBAAgB,CAAC,MAA2C;AAChE,UAAM,MAAM,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,cAC5C,IACA,EAAE,QAAQ,eAAe,EAAE,QAAQ,YACjC,KACA;AACN,QAAI,QAAQ,EAAG;AACf,MAAE,eAAe;AACjB,UAAM,MAAM,QAAQ,UAAU,CAAC,MAAM,EAAE,SAAS,KAAK;AACrD,UAAM,OAAO,SAAS,MAAM,MAAM,QAAQ,UAAU,QAAQ,MAAM;AAClE,QAAI,KAAM,UAAS,KAAK,IAAI;AAAA,EAC9B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK;AAAA,MAClD,WAAW;AAAA,MAEV,kBAAQ,IAAI,CAAC,WAAW;AACvB,cAAM,WAAW,OAAO,SAAS;AACjC,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,cAAY,OAAO;AAAA,YACnB,OAAO,OAAO;AAAA,YAGd,UAAU,WAAW,IAAI;AAAA,YACzB,iBAAe,WAAW,SAAS;AAAA,YACnC,kBAAgB,OAAO;AAAA,YACvB,WAAU;AAAA,YACV,SAAS,MAAM;AAAE,kBAAI,CAAC,SAAU,UAAS,OAAO,IAAI;AAAA,YAAE;AAAA,YAErD,iBAAO;AAAA;AAAA,UAdH,OAAO;AAAA,QAed;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,yBAAQ;",
+  "names": []
+}