@freighttech/ui 0.13.18

package/src/backend/dynamic-table/components/TablePagination.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useT } from '@open-mercato/shared/lib/i18n/context';
+import { PaginationProps } from '../types/index';
+import { SelectMenu } from './SelectMenu';
+
+interface TablePaginationProps {
+  pagination: PaginationProps;
+}
+
+// Compact page items (Figma 220:2935): with more than two pages, show just the
+// active page, an ellipsis, and the last page — e.g. `[2] ··· 5`. On the last
+// page, anchor to the first instead (`1 ··· [5]`). Two pages show both; one
+// page shows just itself. Adjacent anchor/last drop the ellipsis.
+function getPageItems(current: number, total: number): Array<number | 'ellipsis'> {
+  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];
+}
+
+/**
+ * Compact inline pagination (Figma 220:2935) — sits right-aligned on the
+ * perspective-tabs row: `‹ [active] ··· page › [rows-per-page ⌄]`.
+ * Active page is a slate-300 pill (not navy); no record-count text.
+ */
+const TablePagination: React.FC<TablePaginationProps> = ({ pagination }) => {
+  const t = useT();
+  const { currentPage, totalPages, limit, limitOptions, onPageChange, onLimitChange } = pagination;
+
+  return (
+    <div className="hot-table-pagination">
+      <div className="hot-table-pagination-pages">
+        <button
+          type="button"
+          className="hot-table-pagination-btn"
+          disabled={currentPage <= 1}
+          onClick={() => onPageChange(currentPage - 1)}
+          aria-label={t('dynamicTable.pagination.previous', 'Previous page')}
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </button>
+
+        {getPageItems(currentPage, Math.max(totalPages, 1)).map((item, i) =>
+          item === 'ellipsis' ? (
+            <span key={`ellipsis-${i}`} className="hot-table-pagination-ellipsis">···</span>
+          ) : (
+            <button
+              key={item}
+              type="button"
+              className={`hot-table-pagination-page${item === currentPage ? ' is-active' : ''}`}
+              onClick={() => onPageChange(item)}
+              aria-current={item === currentPage ? 'page' : undefined}
+            >
+              {item}
+            </button>
+          )
+        )}
+
+        <button
+          type="button"
+          className="hot-table-pagination-btn"
+          disabled={currentPage >= totalPages}
+          onClick={() => onPageChange(currentPage + 1)}
+          aria-label={t('dynamicTable.pagination.next', 'Next page')}
+        >
+          <ChevronRight className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* Portal-rendered menu, not a native `<select>`. The OS dropdown paints
+          against the page rather than the grid, ignores every v2 type and shape
+          token, and inside a split pane it escaped the pane's stacking context
+          entirely — so the one control that stayed native was also the one that
+          broke the M3 language the moment it was opened. `SelectMenu` already
+          exists for exactly this and keeps the trigger's original class, so
+          spacing, radius and colour are unchanged.
+          `hot-table-pagination-select` is load-bearing for the e2e harness and
+          is preserved as the trigger's class. */}
+      {limitOptions && limitOptions.length > 0 && (
+        <div className="hot-table-pagination-perpage">
+          <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')}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TablePagination;

package/src/backend/dynamic-table/components/TableSkeleton.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import React from 'react';
+
+interface TableSkeletonProps {
+  /** Number of skeleton body rows to display */
+  rows?: number;
+  /** Number of skeleton columns (ignored when `columnWidths` is provided) */
+  columns?: number;
+  /** Whether to show the leading select (checkbox) column */
+  rowHeaders?: boolean;
+  /** Whether to show the column-header bar */
+  colHeaders?: boolean;
+  /** Height of the skeleton container */
+  height?: string | number;
+  /** Width of the skeleton container */
+  width?: string | number;
+  /** Table name (kept for API compatibility; no longer rendered) */
+  tableName?: string;
+  /**
+   * Real column widths from the table being loaded. Used as flex weights so the
+   * skeleton mirrors the table's column proportions and stretches to fill the
+   * container (no narrow grid, no layout jump when data arrives).
+   */
+  columnWidths?: number[];
+  /** Render the toolbar (search + actions) and perspective-tab row above the grid */
+  toolbar?: boolean;
+  /** Render the trailing row-actions (•••) column */
+  actions?: boolean;
+}
+
+// Uniform placeholder widths for a calm, regular grid — except the first data
+// column (the primary/name column), which gets a wider bar to read as the
+// table's main column.
+const CONTENT_BAR_W = 56;
+const HEADER_BAR_W = 56;
+const FIRST_COL_BAR_W = 150;
+
+/** A shimmering placeholder bar (every bar in the skeleton animates). */
+const Bar: React.FC<{
+  w?: number | string;
+  h?: number;
+  round?: number;
+  style?: React.CSSProperties;
+}> = ({ w = '60%', h = 12, round = 6, style }) => (
+  <div className="dt-skel-bar" style={{ width: w, height: h, borderRadius: round, ...style }} />
+);
+
+const TableSkeleton: React.FC<TableSkeletonProps> = ({
+  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);
+
+  // One grid row — the select cell, the weighted data cells, and the actions
+  // cell. `flexGrow: weight` + `flexBasis: 0` distributes the full width in the
+  // same proportions as the real columns. `cellContent(i)` fills each data cell.
+  const gridCells = (cellContent: (colIndex: number) => React.ReactNode) => (
+    <>
+      {rowHeaders && (
+        <div className="dt-skel-cell dt-skel-cell--fixed" style={{ flexBasis: 44 }}>
+          <Bar w={16} h={16} round={4} />
+        </div>
+      )}
+      {widths.map((w, i) => (
+        <div key={i} className="dt-skel-cell" style={{ flexGrow: w, flexBasis: 0 }}>
+          {cellContent(i)}
+        </div>
+      ))}
+      {actions && (
+        <div className="dt-skel-cell dt-skel-cell--fixed dt-skel-cell--center" style={{ flexBasis: 56 }}>
+          <Bar w={16} h={4} round={4} />
+        </div>
+      )}
+    </>
+  );
+
+  return (
+    <div className="table-skeleton dt-skel" style={{ width, height }} aria-hidden>
+      {toolbar && (
+        <>
+          <div className="dt-skel-toolbar">
+            <Bar w={260} h={36} round={10} />
+            <Bar w={36} h={36} round={10} />
+          </div>
+          {/* Perspective tabs (left) and pagination (right) each collapse to a
+              single bar — keeps the shimmer count low. */}
+          <div className="dt-skel-tabs">
+            <Bar w={188} h={28} round={8} />
+            <Bar w={120} h={28} round={8} />
+          </div>
+        </>
+      )}
+
+      {colHeaders && (
+        <div className="dt-skel-header">
+          {gridCells((i) => (
+            <Bar w={i === 0 ? FIRST_COL_BAR_W : HEADER_BAR_W} h={10} round={4} />
+          ))}
+        </div>
+      )}
+
+      <div className="dt-skel-body">
+        {Array.from({ length: rows }, (_, r) => (
+          <div className="dt-skel-row" key={r}>
+            {gridCells((i) => (
+              <Bar w={i === 0 ? FIRST_COL_BAR_W : CONTENT_BAR_W} h={12} round={6} />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TableSkeleton;

package/src/backend/dynamic-table/components/ToolbarOverflow.tsx

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

package/src/backend/dynamic-table/components/ViewModeSwitch.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+/**
+ * VIEW MODE SWITCH — the list/grid control in the toolbar's icon cluster.
+ *
+ * A Material 3 **segmented button**, not a dropdown: two options do not earn a
+ * menu, and the reference this feature is modelled on (Google Drive) uses a
+ * toggle. The selected segment carries the `secondary-container` /
+ * `on-secondary-container` PAIR — never a background without its matching
+ * foreground, which is the mechanism that makes a Material surface legible in
+ * both themes without a second set of colours.
+ *
+ * Three things here are house rules rather than taste:
+ *
+ *  1. **48 dp minimum touch target.** The visible segment is 32 px to sit in a
+ *     dense toolbar; the target is grown to 48 with a transparent inset rather
+ *     than by making the control bigger. A control you can see and cannot
+ *     reliably hit is a control that reads as broken on a laptop trackpad.
+ *  2. **Interaction is a state LAYER** — an 8% wash of the content colour over
+ *     whatever is underneath — not a background swap. A hover that replaces the
+ *     fill loses the selected/unselected distinction for the frame it is under
+ *     the cursor.
+ *  3. **Radio semantics, not two buttons.** `role="radiogroup"` with
+ *     `aria-checked` announces "2 of 2" and the current choice. Two independent
+ *     buttons announce neither, and a screen-reader user cannot tell which view
+ *     they are already in.
+ *
+ * Arrow keys move the selection (radio-group convention); Tab enters and leaves
+ * the group once, landing on the checked segment.
+ */
+
+import * as React from 'react'
+import type { TableViewMode, TableViewModeOption } from '../types/index'
+
+export interface ViewModeSwitchProps {
+  options: TableViewModeOption[]
+  value: TableViewMode
+  onChange: (mode: TableViewMode) => void
+}
+
+export const ViewModeSwitch: React.FC<ViewModeSwitchProps> = ({ options, value, onChange }) => {
+  // One option is not a choice. Rendering a segmented control with a single
+  // segment offers the user a decision that does not exist.
+  if (options.length < 2) return null
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    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 (
+    <div
+      className="hot-viewmode-switch"
+      role="radiogroup"
+      aria-label={options.map((o) => o.label).join(' / ')}
+      onKeyDown={handleKeyDown}
+    >
+      {options.map((option) => {
+        const selected = option.mode === value
+        return (
+          <button
+            key={option.mode}
+            type="button"
+            role="radio"
+            aria-checked={selected}
+            aria-label={option.label}
+            title={option.label}
+            /* Only the checked segment is tabbable — the radio-group
+               convention. Otherwise Tab stops twice inside one control. */
+            tabIndex={selected ? 0 : -1}
+            data-selected={selected ? 'true' : undefined}
+            data-view-mode={option.mode}
+            className="hot-viewmode-segment"
+            onClick={() => { if (!selected) onChange(option.mode) }}
+          >
+            {option.icon}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default ViewModeSwitch