@freighttech/ui 0.13.18

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

@@ -0,0 +1,289 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { Check, ChevronDown, Rows3 } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { DENSITY_LEVELS } from "../types/density.js";
+import { useDensityPreference } from "../hooks/useDensityPreference.js";
+const PANEL_WIDTH = 264;
+const PANEL_ESTIMATED_HEIGHT = 3 * 52 + 8;
+const VIEWPORT_MARGIN = 8;
+function computePanelPosition(rect, align, viewportWidth, viewportHeight) {
+  const below = rect.bottom + 4;
+  const fitsBelow = below + PANEL_ESTIMATED_HEIGHT + VIEWPORT_MARGIN <= viewportHeight;
+  const top = fitsBelow ? below : Math.max(VIEWPORT_MARGIN, rect.top - 4 - PANEL_ESTIMATED_HEIGHT);
+  const preferredLeft = align === "end" ? rect.right - PANEL_WIDTH : rect.left;
+  const maxLeft = viewportWidth - PANEL_WIDTH - VIEWPORT_MARGIN;
+  const left = Math.max(VIEWPORT_MARGIN, Math.min(preferredLeft, maxLeft));
+  return { top, left };
+}
+const DensityControl = ({
+  tableKey,
+  value,
+  onChange,
+  variant = "toolbar",
+  align = "end",
+  disabled = false,
+  className
+}) => {
+  const t = useT();
+  const preference = useDensityPreference(void 0, tableKey);
+  const controlled = value !== void 0;
+  const current = controlled ? value : preference.density;
+  const [open, setOpen] = React.useState(false);
+  const [position, setPosition] = React.useState(null);
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const triggerRef = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const listboxId = React.useId();
+  const options = DENSITY_LEVELS.map((level) => ({
+    level,
+    label: LEVEL_LABEL(t, level),
+    description: LEVEL_DESCRIPTION(t, level)
+  }));
+  const currentLabel = LEVEL_LABEL(t, current);
+  const close = React.useCallback((focusTrigger) => {
+    setOpen(false);
+    setPosition(null);
+    if (focusTrigger) triggerRef.current?.focus();
+  }, []);
+  const openPanel = React.useCallback(() => {
+    const rect = triggerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setPosition(
+      computePanelPosition(rect, align, window.innerWidth, window.innerHeight)
+    );
+    const index = DENSITY_LEVELS.indexOf(current);
+    setActiveIndex(index >= 0 ? index : 0);
+    setOpen(true);
+  }, [align, current]);
+  const choose = React.useCallback(
+    (level) => {
+      if (!controlled) preference.setDensity(level);
+      onChange?.(level);
+      close(true);
+    },
+    [controlled, onChange, preference, close]
+  );
+  React.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (triggerRef.current?.contains(target) || panelRef.current?.contains(target)) return;
+      close(false);
+    };
+    const onScroll = () => close(false);
+    const onResize = () => close(false);
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      close(true);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [open, close]);
+  React.useEffect(() => {
+    if (open && position) panelRef.current?.focus();
+  }, [open, position]);
+  const onTriggerKeyDown = (event) => {
+    if (open) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openPanel();
+    }
+  };
+  const onListboxKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, DENSITY_LEVELS.length - 1));
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+        break;
+      case "Home":
+        event.preventDefault();
+        setActiveIndex(0);
+        break;
+      case "End":
+        event.preventDefault();
+        setActiveIndex(DENSITY_LEVELS.length - 1);
+        break;
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        const level = DENSITY_LEVELS[activeIndex];
+        if (level) choose(level);
+        break;
+      }
+      case "Tab":
+        close(false);
+        break;
+      default:
+        break;
+    }
+  };
+  const accessibleName = `${t("dynamicTable.density.label", "Row density")}: ${currentLabel}`;
+  const trigger = variant === "labelled" ? /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      disabled,
+      onClick: () => open ? close(false) : openPanel(),
+      onKeyDown: onTriggerKeyDown,
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": open ? listboxId : void 0,
+      "aria-label": accessibleName,
+      className: [
+        // An M3 outlined control: pill corner, `--m3-outline` (the role for
+        // input and segment borders), a surface-container-lowest fill and
+        // on-surface ink. The shadcn semantic classes it used to carry
+        // (`border-input`, `bg-background`, `text-foreground`) resolve into
+        // the legacy token set, so the control drifted away from the grid's
+        // palette as soon as the grid moved to M3.
+        "flex items-center justify-between gap-2 rounded-m3-full border border-[var(--m3-outline)] bg-[var(--m3-surface-container-lowest)] px-3 py-2",
+        "text-left text-body-regular-sm text-[var(--m3-on-surface)] shadow-none transition-colors",
+        "hover:bg-[var(--m3-state-layer-hover)] disabled:cursor-default",
+        // Opacity dims a genuinely disabled control and nothing else.
+        "disabled:opacity-[var(--m3-disabled-content-opacity)]",
+        // Focus is TEAL, not blue: blue is selection, teal is
+        // interaction-affirmative. The halo needs clearance, and this trigger
+        // sits in a settings panel rather than inside a dense row, so it gets
+        // the outward form.
+        open ? "border-[var(--m3-focus-ring-color)] shadow-[var(--m3-focus-halo)]" : "",
+        disabled ? "" : "cursor-pointer",
+        className ?? ""
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Rows3, { className: "size-4 shrink-0 text-[var(--m3-on-surface-variant)]", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: currentLabel })
+        ] }),
+        /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-[var(--m3-on-surface-variant)]", "aria-hidden": "true" })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      disabled,
+      onClick: () => open ? close(false) : openPanel(),
+      onKeyDown: onTriggerKeyDown,
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      "aria-controls": open ? listboxId : void 0,
+      "aria-label": accessibleName,
+      title: accessibleName,
+      className: ["fullscreen-toggle-btn", className ?? ""].join(" "),
+      children: /* @__PURE__ */ jsx(Rows3, { className: "w-4 h-4", "aria-hidden": "true" })
+    }
+  );
+  const panel = open && position && typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        id: listboxId,
+        role: "listbox",
+        tabIndex: -1,
+        "aria-label": t("dynamicTable.density.label", "Row density"),
+        "aria-activedescendant": `${listboxId}-${activeIndex}`,
+        onKeyDown: onListboxKeyDown,
+        className: "fixed z-[60] overflow-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 outline-none",
+        style: { top: position.top, left: position.left, width: PANEL_WIDTH },
+        children: options.map((option, index) => {
+          const selected = option.level === current;
+          const active = index === activeIndex;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              id: `${listboxId}-${index}`,
+              role: "option",
+              "aria-selected": selected,
+              "data-density-option": option.level,
+              onClick: () => choose(option.level),
+              onMouseEnter: () => setActiveIndex(index),
+              className: [
+                // Same concentric 8px corner every other overlay item row
+                // in the grid takes (ContextMenu.css), and the same two
+                // states: a translucent hover layer, and a
+                // `secondary-container` swap for the chosen value — M3
+                // defines no "selected" opacity, selection swaps the
+                // container and its ink.
+                "mx-1 flex cursor-pointer items-start gap-2 rounded-m3-sm px-2 py-2 transition-colors",
+                selected ? "bg-[var(--m3-secondary-container)] text-[var(--m3-on-secondary-container)]" : "text-[var(--m3-on-surface)]",
+                active && !selected ? "bg-[var(--m3-state-layer-hover)]" : ""
+              ].join(" "),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "flex w-4 shrink-0 justify-center pt-0.5", children: selected ? /* @__PURE__ */ jsx(Check, { className: "size-4", "aria-hidden": "true" }) : null }),
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block truncate text-body-regular-sm", children: option.label }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: [
+                        "block text-body-regular-xs",
+                        // The description is secondary INK, not dimmed text. On
+                        // the selected blue it inherits `on-secondary-container`
+                        // so it keeps its contrast instead of washing out.
+                        selected ? "" : "text-[var(--m3-on-surface-variant)]"
+                      ].join(" "),
+                      children: option.description
+                    }
+                  )
+                ] })
+              ]
+            },
+            option.level
+          );
+        })
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    panel
+  ] });
+};
+function LEVEL_LABEL(t, level) {
+  switch (level) {
+    case "compact":
+      return t("dynamicTable.density.compact", "Compact");
+    case "dense":
+      return t("dynamicTable.density.dense", "Dense");
+    case "comfortable":
+    default:
+      return t("dynamicTable.density.comfortable", "Comfortable");
+  }
+}
+function LEVEL_DESCRIPTION(t, level) {
+  switch (level) {
+    case "compact":
+      return t("dynamicTable.density.compactHint", "Same text size, tighter rows");
+    case "dense":
+      return t("dynamicTable.density.denseHint", "Smallest text, most rows on screen");
+    case "comfortable":
+    default:
+      return t("dynamicTable.density.comfortableHint", "Default spacing and text size");
+  }
+}
+var DensityControl_default = DensityControl;
+export {
+  DensityControl,
+  DensityControl_default as default
+};
+//# sourceMappingURL=DensityControl.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/DensityControl.tsx"],
+  "sourcesContent": ["'use client'\n\n/**\n * DENSITY CONTROL \u2014 the picker that lets a user choose comfortable / compact /\n * dense for every grid they look at.\n *\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * HOUSE UI RULES THIS FILE OBEYS (they are not stylistic preferences here)\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n *\n *  1. NEVER a native `<select>`. A flat trigger + chevron opens a styled\n *     listbox with hover and a checkmark on the current value. Matches the two\n *     reference implementations in this codebase: `CostLinePicker`\n *     (invoicing/.../[id]/allocate/page.tsx) and `InlineSelectField`\n *     (logistics/lib/inline-edit).\n *\n *  2. THE PANEL RENDERS IN A PORTAL, `position: fixed`, anchored to the\n *     trigger's `getBoundingClientRect()`. This is load-bearing, not\n *     decoration: the DynamicTable toolbar sits inside a card that is itself\n *     inside `overflow: auto` scroll containers, and an absolutely-positioned\n *     panel is clipped by the first of them. `CostLinePicker` says the same\n *     thing in its own header comment.\n *\n *  3. Closes on outside mousedown, on Escape (CAPTURE phase +\n *     `stopPropagation`, so it does not also reach the grid's page-level ESC\n *     handler and clear the user's cell selection), and on scroll \u2014 a fixed\n *     panel does not follow its anchor, so a scrolled-away panel must go.\n *\n *  4. Named typography tokens only. No `text-sm`, no `text-[13px]`.\n *\n *  5. Full keyboard operation with real listbox semantics.\n *\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n * ACCESSIBILITY SHAPE\n * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n *\n * The trigger is a `button` with `aria-haspopup=\"listbox\"` and `aria-expanded`,\n * and its accessible name STATES THE CURRENT LEVEL (\"Row density: Compact\") \u2014\n * not just \"Row density\". In the icon-only toolbar variant there is no visible\n * text at all, so without that a screen-reader user could open the menu and\n * still not know what is selected.\n *\n * The panel uses the `aria-activedescendant` pattern: the listbox itself takes\n * focus and the options are `role=\"option\"` elements identified by id. That is\n * why options are `div`s and not `button`s \u2014 a roving-focus listbox made of\n * buttons announces \"button\" three times and loses the \"3 of 3\" position\n * information that a real listbox gives for free.\n *\n * Keys handled: ArrowDown / ArrowUp (move), Home / End (jump), Enter / Space\n * (choose), Escape (cancel, focus returns to the trigger), Tab (close). Opening\n * with ArrowDown/Enter starts on the CURRENT value, not the first one.\n */\n\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\nimport { Check, ChevronDown, Rows3 } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { DENSITY_LEVELS, type DensityLevel } from '../types/density'\nimport { useDensityPreference } from '../hooks/useDensityPreference'\n\n/** Panel width in px. Wide enough for the longest Polish label + description. */\nconst PANEL_WIDTH = 264\n/**\n * Height used ONLY to decide whether to open downwards or upwards. It is an\n * estimate (3 rows + padding), which is safe because the set of options is\n * fixed at three and always will be \u2014 a fourth level would be a design change,\n * not a runtime possibility. Measuring after mount would mean a paint at the\n * wrong position first.\n */\nconst PANEL_ESTIMATED_HEIGHT = 3 * 52 + 8\nconst VIEWPORT_MARGIN = 8\n\ntype PanelPosition = { top: number; left: number }\n\n/**\n * Anchor the fixed panel to the trigger, keeping it inside the viewport.\n *\n * Pure, so the placement rules are readable in one place: prefer below, flip\n * above when there is no room, and clamp horizontally so a control sitting at\n * the right edge of the toolbar (which is where it lives) never opens\n * off-screen.\n */\nfunction computePanelPosition(\n  rect: DOMRect,\n  align: 'start' | 'end',\n  viewportWidth: number,\n  viewportHeight: number,\n): PanelPosition {\n  const below = rect.bottom + 4\n  const fitsBelow = below + PANEL_ESTIMATED_HEIGHT + VIEWPORT_MARGIN <= viewportHeight\n  const top = fitsBelow ? below : Math.max(VIEWPORT_MARGIN, rect.top - 4 - PANEL_ESTIMATED_HEIGHT)\n\n  const preferredLeft = align === 'end' ? rect.right - PANEL_WIDTH : rect.left\n  const maxLeft = viewportWidth - PANEL_WIDTH - VIEWPORT_MARGIN\n  const left = Math.max(VIEWPORT_MARGIN, Math.min(preferredLeft, maxLeft))\n\n  return { top, left }\n}\n\nexport interface DensityControlProps {\n  /**\n   * Table this control belongs to. Density is stored PER TABLE, so choosing\n   * \"dense\" in one pane no longer re-lays-out every other grid on screen.\n   */\n  tableKey?: string\n  /**\n   * Controlled level. Omit to let the control own the user's persisted\n   * preference (the normal case \u2014 one line in the toolbar and it works).\n   */\n  value?: DensityLevel\n  /** Called on every choice, controlled or not. */\n  onChange?: (level: DensityLevel) => void\n  /**\n   * `toolbar` \u2014 32\u00D732 icon button matching the grid's other toolbar actions.\n   * `labelled` \u2014 bordered trigger showing the current level in words, for\n   * settings panels where the control is not next to a table to compare with.\n   */\n  variant?: 'toolbar' | 'labelled'\n  /** Which trigger edge the panel aligns to. Defaults to `end` (right-aligned). */\n  align?: 'start' | 'end'\n  disabled?: boolean\n  className?: string\n}\n\n/**\n * Row-density picker. Uncontrolled by default: it reads and writes the current\n * user's preference through `useDensityPreference`, which is per-user, global\n * across grids, and physically cannot leak to another account.\n */\nexport const DensityControl: React.FC<DensityControlProps> = ({\n  tableKey,\n  value,\n  onChange,\n  variant = 'toolbar',\n  align = 'end',\n  disabled = false,\n  className,\n}) => {\n  const t = useT()\n  const preference = useDensityPreference(undefined, tableKey)\n  const controlled = value !== undefined\n  const current = controlled ? value : preference.density\n\n  const [open, setOpen] = React.useState(false)\n  const [position, setPosition] = React.useState<PanelPosition | null>(null)\n  const [activeIndex, setActiveIndex] = React.useState(0)\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null)\n  const panelRef = React.useRef<HTMLDivElement>(null)\n  const listboxId = React.useId()\n\n  // Labels are looked up per render but the array is tiny and fixed at three;\n  // this component renders once per toolbar, not once per cell, so there is no\n  // hot path to protect here.\n  const options = DENSITY_LEVELS.map((level) => ({\n    level,\n    label: LEVEL_LABEL(t, level),\n    description: LEVEL_DESCRIPTION(t, level),\n  }))\n  const currentLabel = LEVEL_LABEL(t, current)\n\n  const close = React.useCallback((focusTrigger: boolean) => {\n    setOpen(false)\n    setPosition(null)\n    if (focusTrigger) triggerRef.current?.focus()\n  }, [])\n\n  const openPanel = React.useCallback(() => {\n    const rect = triggerRef.current?.getBoundingClientRect()\n    if (!rect) return\n    setPosition(\n      computePanelPosition(rect, align, window.innerWidth, window.innerHeight),\n    )\n    const index = DENSITY_LEVELS.indexOf(current)\n    setActiveIndex(index >= 0 ? index : 0)\n    setOpen(true)\n  }, [align, current])\n\n  const choose = React.useCallback(\n    (level: DensityLevel) => {\n      if (!controlled) preference.setDensity(level)\n      onChange?.(level)\n      close(true)\n    },\n    [controlled, onChange, preference, close],\n  )\n\n  // Dismissal. All three listeners are bound only while open, and the keydown\n  // one is CAPTURE so Escape is consumed here before the grid's own handler\n  // sees it and clears the selection.\n  React.useEffect(() => {\n    if (!open) return\n    const onPointerDown = (event: MouseEvent) => {\n      const target = event.target as Node\n      if (triggerRef.current?.contains(target) || panelRef.current?.contains(target)) return\n      close(false)\n    }\n    const onScroll = () => close(false)\n    const onResize = () => close(false)\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') return\n      event.stopPropagation()\n      close(true)\n    }\n    document.addEventListener('mousedown', onPointerDown)\n    window.addEventListener('scroll', onScroll, true)\n    window.addEventListener('resize', onResize)\n    window.addEventListener('keydown', onKeyDown, true)\n    return () => {\n      document.removeEventListener('mousedown', onPointerDown)\n      window.removeEventListener('scroll', onScroll, true)\n      window.removeEventListener('resize', onResize)\n      window.removeEventListener('keydown', onKeyDown, true)\n    }\n  }, [open, close])\n\n  // Move focus into the listbox once it exists, so the arrow keys work without\n  // the user having to click first.\n  React.useEffect(() => {\n    if (open && position) panelRef.current?.focus()\n  }, [open, position])\n\n  const onTriggerKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (open) return\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      openPanel()\n    }\n  }\n\n  const onListboxKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault()\n        setActiveIndex((i) => Math.min(i + 1, DENSITY_LEVELS.length - 1))\n        break\n      case 'ArrowUp':\n        event.preventDefault()\n        setActiveIndex((i) => Math.max(i - 1, 0))\n        break\n      case 'Home':\n        event.preventDefault()\n        setActiveIndex(0)\n        break\n      case 'End':\n        event.preventDefault()\n        setActiveIndex(DENSITY_LEVELS.length - 1)\n        break\n      case 'Enter':\n      case ' ': {\n        event.preventDefault()\n        const level = DENSITY_LEVELS[activeIndex]\n        if (level) choose(level)\n        break\n      }\n      case 'Tab':\n        close(false)\n        break\n      default:\n        break\n    }\n  }\n\n  const accessibleName = `${t('dynamicTable.density.label', 'Row density')}: ${currentLabel}`\n\n  const trigger =\n    variant === 'labelled' ? (\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        disabled={disabled}\n        onClick={() => (open ? close(false) : openPanel())}\n        onKeyDown={onTriggerKeyDown}\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={open ? listboxId : undefined}\n        aria-label={accessibleName}\n        className={[\n          // An M3 outlined control: pill corner, `--m3-outline` (the role for\n          // input and segment borders), a surface-container-lowest fill and\n          // on-surface ink. The shadcn semantic classes it used to carry\n          // (`border-input`, `bg-background`, `text-foreground`) resolve into\n          // the legacy token set, so the control drifted away from the grid's\n          // palette as soon as the grid moved to M3.\n          'flex items-center justify-between gap-2 rounded-m3-full border border-[var(--m3-outline)] bg-[var(--m3-surface-container-lowest)] px-3 py-2',\n          'text-left text-body-regular-sm text-[var(--m3-on-surface)] shadow-none transition-colors',\n          'hover:bg-[var(--m3-state-layer-hover)] disabled:cursor-default',\n          // Opacity dims a genuinely disabled control and nothing else.\n          'disabled:opacity-[var(--m3-disabled-content-opacity)]',\n          // Focus is TEAL, not blue: blue is selection, teal is\n          // interaction-affirmative. The halo needs clearance, and this trigger\n          // sits in a settings panel rather than inside a dense row, so it gets\n          // the outward form.\n          open ? 'border-[var(--m3-focus-ring-color)] shadow-[var(--m3-focus-halo)]' : '',\n          disabled ? '' : 'cursor-pointer',\n          className ?? '',\n        ].join(' ')}\n      >\n        <span className=\"flex min-w-0 items-center gap-2\">\n          <Rows3 className=\"size-4 shrink-0 text-[var(--m3-on-surface-variant)]\" aria-hidden=\"true\" />\n          <span className=\"truncate\">{currentLabel}</span>\n        </span>\n        <ChevronDown className=\"size-4 shrink-0 text-[var(--m3-on-surface-variant)]\" aria-hidden=\"true\" />\n      </button>\n    ) : (\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        disabled={disabled}\n        onClick={() => (open ? close(false) : openPanel())}\n        onKeyDown={onTriggerKeyDown}\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={open ? listboxId : undefined}\n        aria-label={accessibleName}\n        title={accessibleName}\n        className={['fullscreen-toggle-btn', className ?? ''].join(' ')}\n      >\n        <Rows3 className=\"w-4 h-4\" aria-hidden=\"true\" />\n      </button>\n    )\n\n  const panel =\n    open && position && typeof document !== 'undefined'\n      ? createPortal(\n          <div\n            ref={panelRef}\n            id={listboxId}\n            role=\"listbox\"\n            tabIndex={-1}\n            aria-label={t('dynamicTable.density.label', 'Row density')}\n            aria-activedescendant={`${listboxId}-${activeIndex}`}\n            onKeyDown={onListboxKeyDown}\n            className=\"fixed z-[60] overflow-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 outline-none\"\n            style={{ top: position.top, left: position.left, width: PANEL_WIDTH }}\n          >\n            {options.map((option, index) => {\n              const selected = option.level === current\n              const active = index === activeIndex\n              return (\n                <div\n                  key={option.level}\n                  id={`${listboxId}-${index}`}\n                  role=\"option\"\n                  aria-selected={selected}\n                  data-density-option={option.level}\n                  onClick={() => choose(option.level)}\n                  onMouseEnter={() => setActiveIndex(index)}\n                  className={[\n                    // Same concentric 8px corner every other overlay item row\n                    // in the grid takes (ContextMenu.css), and the same two\n                    // states: a translucent hover layer, and a\n                    // `secondary-container` swap for the chosen value \u2014 M3\n                    // defines no \"selected\" opacity, selection swaps the\n                    // container and its ink.\n                    'mx-1 flex cursor-pointer items-start gap-2 rounded-m3-sm px-2 py-2 transition-colors',\n                    selected\n                      ? 'bg-[var(--m3-secondary-container)] text-[var(--m3-on-secondary-container)]'\n                      : 'text-[var(--m3-on-surface)]',\n                    active && !selected ? 'bg-[var(--m3-state-layer-hover)]' : '',\n                  ].join(' ')}\n                >\n                  <span className=\"flex w-4 shrink-0 justify-center pt-0.5\">\n                    {selected ? (\n                      <Check className=\"size-4\" aria-hidden=\"true\" />\n                    ) : null}\n                  </span>\n                  <span className=\"min-w-0 flex-1\">\n                    <span className=\"block truncate text-body-regular-sm\">\n                      {option.label}\n                    </span>\n                    <span\n                      className={[\n                        'block text-body-regular-xs',\n                        // The description is secondary INK, not dimmed text. On\n                        // the selected blue it inherits `on-secondary-container`\n                        // so it keeps its contrast instead of washing out.\n                        selected ? '' : 'text-[var(--m3-on-surface-variant)]',\n                      ].join(' ')}\n                    >\n                      {option.description}\n                    </span>\n                  </span>\n                </div>\n              )\n            })}\n          </div>,\n          document.body,\n        )\n      : null\n\n  return (\n    <>\n      {trigger}\n      {panel}\n    </>\n  )\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   LABELS\n\n   English defaults live here; Polish (the primary locale) and the other three\n   arrive from `apps/web/src/i18n/*.json`, which this wave may not touch \u2014 the\n   keys are filed as a wiring contract. Hardcoding Polish in a shared\n   @freighttech package would leak into Tier-3 apps.\n\n   The DESCRIPTIONS are not decoration. \"Dense\" as a bare word does not tell\n   anyone whether it will still be readable, and the whole reason this is a\n   preference rather than a global change is that the product owner has\n   repeatedly flagged FMS type as too small. Stating \"same text size, tighter\n   rows\" on `compact` is what makes it the safe thing to try first.\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\ntype Translate = ReturnType<typeof useT>\n\nfunction LEVEL_LABEL(t: Translate, level: DensityLevel): string {\n  switch (level) {\n    case 'compact':\n      return t('dynamicTable.density.compact', 'Compact')\n    case 'dense':\n      return t('dynamicTable.density.dense', 'Dense')\n    case 'comfortable':\n    default:\n      return t('dynamicTable.density.comfortable', 'Comfortable')\n  }\n}\n\nfunction LEVEL_DESCRIPTION(t: Translate, level: DensityLevel): string {\n  switch (level) {\n    case 'compact':\n      return t('dynamicTable.density.compactHint', 'Same text size, tighter rows')\n    case 'dense':\n      return t('dynamicTable.density.denseHint', 'Smallest text, most rows on screen')\n    case 'comfortable':\n    default:\n      return t('dynamicTable.density.comfortableHint', 'Default spacing and text size')\n  }\n}\n\nexport default DensityControl\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Inbox, SearchX, FilterX } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Button } from "../../../primitives-v2/index.js";
+const EmptyState = ({
+  emptyMessage,
+  searchQuery,
+  filterCount,
+  onClearSearch,
+  onClearFilters
+}) => {
+  const t = useT();
+  const search = (searchQuery ?? "").trim();
+  const hasSearch = search.length > 0;
+  const hasFilters = filterCount > 0;
+  const Icon = hasSearch ? SearchX : hasFilters ? FilterX : Inbox;
+  const title = hasSearch ? t("dynamicTable.empty.searchTitle", "Nothing matches \u201C{query}\u201D", { query: search }) : hasFilters ? t("dynamicTable.empty.filterTitle", "Nothing matches the current filters") : emptyMessage ?? t("dynamicTable.empty.title", "Nothing here yet");
+  const detail = hasSearch && hasFilters ? t(
+    "dynamicTable.empty.searchAndFilterDetail",
+    "The search is being applied on top of {count} filter rule(s). Clear one or both to see rows again.",
+    { count: String(filterCount) }
+  ) : hasSearch ? t("dynamicTable.empty.searchDetail", "No row on this table contains that text.") : hasFilters ? t(
+    "dynamicTable.empty.filterDetail",
+    "{count} filter rule(s) are hiding every row.",
+    { count: String(filterCount) }
+  ) : null;
+  return /* @__PURE__ */ jsx("div", { className: "hot-empty-message", role: "status", children: /* @__PURE__ */ jsxs("div", { className: "hot-empty-state", children: [
+    /* @__PURE__ */ jsx(Icon, { className: "hot-empty-state-icon", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("p", { className: "hot-empty-state-title text-body-medium-md", children: title }),
+    detail && /* @__PURE__ */ jsx("p", { className: "hot-empty-state-detail text-body-regular-sm", children: detail }),
+    (hasSearch || hasFilters) && /* @__PURE__ */ jsxs("div", { className: "hot-empty-state-actions", children: [
+      hasSearch && onClearSearch && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onClearSearch, "data-empty-clear-search": "", children: t("dynamicTable.empty.clearSearch", "Clear search") }),
+      hasFilters && onClearFilters && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onClearFilters, "data-empty-clear-filters": "", children: t("dynamicTable.empty.clearFilters", "Clear filters") })
+    ] })
+  ] }) });
+};
+var EmptyState_default = EmptyState;
+export {
+  EmptyState_default as default
+};
+//# sourceMappingURL=EmptyState.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/EmptyState.tsx"],
+  "sourcesContent": ["'use client'\n\nimport React from 'react';\nimport { Inbox, SearchX, FilterX } from 'lucide-react';\nimport { useT } from '@open-mercato/shared/lib/i18n/context';\nimport { Button } from '../../../primitives-v2';\n\nexport interface EmptyStateProps {\n  /** Host-supplied wording for the \"there is genuinely nothing here\" case. */\n  emptyMessage?: string;\n  /** The dataset-wide search term currently narrowing the rows, if any. */\n  searchQuery?: string;\n  /** How many filter rules are live (quick-filter ticks + drawer rules). */\n  filterCount: number;\n  /** Clears the dataset-wide search. */\n  onClearSearch?: () => void;\n  /** Drops every live filter rule. Omit when the grid has no filter writer. */\n  onClearFilters?: () => void;\n}\n\n/**\n * What a DynamicTable shows when it has no rows (ledger 2.20).\n *\n * THE POINT IS THE DIAGNOSIS, not the decoration. \"No results\" is useless when\n * the user cannot see what removed the rows \u2014 the reported case was a search\n * for a container number that matched nothing, which left the header row and\n * ~400px of void: no message, no icon, and no route back except remembering\n * that the search box up in the toolbar still had text in it.\n *\n * So the state names the CAUSE it can prove, most-specific first:\n *   search + filters \u2192 both, and an undo for each;\n *   search only      \u2192 quotes the term, offers \"Clear search\";\n *   filters only     \u2192 counts the rules, offers \"Clear filters\";\n *   neither          \u2192 the table really is empty; `emptyMessage` (a host string\n *                      like \"No addresses\") or a neutral fallback, and NO\n *                      action, because there is nothing to undo.\n *\n * Rendered UNDER the column headers rather than instead of them: the headers\n * are what tells you which table you are looking at, and a page that swaps its\n * whole body for a message reads as an error rather than a filter result.\n */\nconst EmptyState: React.FC<EmptyStateProps> = ({\n  emptyMessage,\n  searchQuery,\n  filterCount,\n  onClearSearch,\n  onClearFilters,\n}) => {\n  const t = useT();\n  const search = (searchQuery ?? '').trim();\n  const hasSearch = search.length > 0;\n  const hasFilters = filterCount > 0;\n\n  const Icon = hasSearch ? SearchX : hasFilters ? FilterX : Inbox;\n\n  const title = hasSearch\n    ? t('dynamicTable.empty.searchTitle', 'Nothing matches \u201C{query}\u201D', { query: search })\n    : hasFilters\n      ? t('dynamicTable.empty.filterTitle', 'Nothing matches the current filters')\n      : emptyMessage ?? t('dynamicTable.empty.title', 'Nothing here yet');\n\n  const detail = hasSearch && hasFilters\n    ? t(\n        'dynamicTable.empty.searchAndFilterDetail',\n        'The search is being applied on top of {count} filter rule(s). Clear one or both to see rows again.',\n        { count: String(filterCount) },\n      )\n    : hasSearch\n      ? t('dynamicTable.empty.searchDetail', 'No row on this table contains that text.')\n      : hasFilters\n        ? t(\n            'dynamicTable.empty.filterDetail',\n            '{count} filter rule(s) are hiding every row.',\n            { count: String(filterCount) },\n          )\n        : null;\n\n  return (\n    <div className=\"hot-empty-message\" role=\"status\">\n      <div className=\"hot-empty-state\">\n        <Icon className=\"hot-empty-state-icon\" aria-hidden=\"true\" />\n        <p className=\"hot-empty-state-title text-body-medium-md\">{title}</p>\n        {detail && <p className=\"hot-empty-state-detail text-body-regular-sm\">{detail}</p>}\n        {(hasSearch || hasFilters) && (\n          <div className=\"hot-empty-state-actions\">\n            {hasSearch && onClearSearch && (\n              <Button variant=\"outline\" size=\"sm\" onClick={onClearSearch} data-empty-clear-search=\"\">\n                {t('dynamicTable.empty.clearSearch', 'Clear search')}\n              </Button>\n            )}\n            {hasFilters && onClearFilters && (\n              <Button variant=\"outline\" size=\"sm\" onClick={onClearFilters} data-empty-clear-filters=\"\">\n                {t('dynamicTable.empty.clearFilters', 'Clear filters')}\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default EmptyState;\n"],
+  "mappings": ";AAgFQ,cAIE,YAJF;AA7ER,SAAS,OAAO,SAAS,eAAe;AACxC,SAAS,YAAY;AACrB,SAAS,cAAc;AAoCvB,MAAM,aAAwC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,IAAI,KAAK;AACf,QAAM,UAAU,eAAe,IAAI,KAAK;AACxC,QAAM,YAAY,OAAO,SAAS;AAClC,QAAM,aAAa,cAAc;AAEjC,QAAM,OAAO,YAAY,UAAU,aAAa,UAAU;AAE1D,QAAM,QAAQ,YACV,EAAE,kCAAkC,uCAA6B,EAAE,OAAO,OAAO,CAAC,IAClF,aACE,EAAE,kCAAkC,qCAAqC,IACzE,gBAAgB,EAAE,4BAA4B,kBAAkB;AAEtE,QAAM,SAAS,aAAa,aACxB;AAAA,IACE;AAAA,IACA;AAAA,IACA,EAAE,OAAO,OAAO,WAAW,EAAE;AAAA,EAC/B,IACA,YACE,EAAE,mCAAmC,0CAA0C,IAC/E,aACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,EAAE,OAAO,OAAO,WAAW,EAAE;AAAA,EAC/B,IACA;AAER,SACE,oBAAC,SAAI,WAAU,qBAAoB,MAAK,UACtC,+BAAC,SAAI,WAAU,mBACb;AAAA,wBAAC,QAAK,WAAU,wBAAuB,eAAY,QAAO;AAAA,IAC1D,oBAAC,OAAE,WAAU,6CAA6C,iBAAM;AAAA,IAC/D,UAAU,oBAAC,OAAE,WAAU,+CAA+C,kBAAO;AAAA,KAC5E,aAAa,eACb,qBAAC,SAAI,WAAU,2BACZ;AAAA,mBAAa,iBACZ,oBAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,SAAS,eAAe,2BAAwB,IACjF,YAAE,kCAAkC,cAAc,GACrD;AAAA,MAED,cAAc,kBACb,oBAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,SAAS,gBAAgB,4BAAyB,IACnF,YAAE,mCAAmC,eAAe,GACvD;AAAA,OAEJ;AAAA,KAEJ,GACF;AAEJ;AAEA,IAAO,qBAAQ;",
+  "names": []
+}