@revenexx/studio-shared 0.4.0 → 0.4.1

package/dist/runtime/components/DataTable/DataTable.vue

@@ -1,5 +1,7 @@
 <script setup>
 import {
+  AlignVerticalSpacing,
+  AltArrowRight,
   Eye,
   EyeClosed,
   Filter,
@@ -19,16 +21,18 @@ import {
 } from "@revenexx/studio";
 import { orderColumnsBy } from "../../lib/columnOrder";
 import { initiallyHidden, visibleColumnsOf } from "../../lib/columnVisibility";
-import { countByValue, matchesFilter } from "../../lib/dataTableFilters";
-import { gridTemplateColumns } from "../../lib/gridTracks";
-const RIGHT_ALIGNED = "text-right pr-4";
+import { facetCounts, matchesFilter } from "../../lib/dataTableFilters";
+import { gridTemplateColumns, headerFloor } from "../../lib/gridTracks";
 import { dropEdge, dropTargetIndex, moveKey, stepTarget } from "../../lib/rowMove";
 import SortHeader from "../Shared/SortHeader.vue";
 import FacetChips from "./FacetChips.vue";
 import FacetPanel from "./FacetPanel.vue";
 import FilterMenu from "./FilterMenu.vue";
 import SavedViewsMenu from "./SavedViewsMenu.vue";
+import ToolbarLabelTrigger from "./ToolbarLabelTrigger.vue";
 import SortMenu from "./SortMenu.vue";
+import { DEFAULT_PAGE_SIZE, pageSizeOptions as pageSizeChoices, readPageSize, writePageSize } from "../../lib/pageSize";
+const RIGHT_ALIGNED = "text-right pr-4";
 const props = defineProps({
   data: { type: Array, required: true },
   columns: { type: Array, required: true },
@@ -43,6 +47,7 @@ const props = defineProps({
   viewModes: { type: [Array, null], required: false, default: null },
   rail: { type: [Boolean, Object], required: false, default: false },
   scrollBody: { type: [Boolean, String, Object], required: false },
+  reserveBottom: { type: Number, required: false },
   pagination: { type: [Boolean, Object], required: false, default: true },
   defaultSort: { type: Object, required: false },
   serverMode: { type: Boolean, required: false, default: false },
@@ -54,11 +59,17 @@ const props = defineProps({
   activeRowKey: { type: [String, Number, null], required: false },
   rowClass: { type: [Function, null], required: false, default: null },
   reorderable: { type: Boolean, required: false, default: false },
-  reorderDisabled: { type: [String, null], required: false, default: null }
+  reorderDisabled: { type: [String, null], required: false, default: null },
+  mobileCards: { type: Boolean, required: false, default: true },
+  densityKey: { type: String, required: false, default: "cockpit.datatable.density" },
+  pageSizeKey: { type: [String, null], required: false, default: null },
+  embedded: { type: Boolean, required: false, default: false },
+  toolbar: { type: Boolean, required: false, default: true }
 });
 const emit = defineEmits(["rowClick", "stateChange", "orderChange", "rowMove"]);
+defineSlots();
 const t = useT();
-const query = ref("");
+const query = defineModel("query", { type: String, ...{ default: "" } });
 const sort = defineModel("sort", { type: Object, ...{
   default: () => ({
     column: null,
@@ -68,19 +79,66 @@ const sort = defineModel("sort", { type: Object, ...{
 const page = defineModel("page", { type: Number, ...{ default: 0 } });
 const viewMode = defineModel("viewMode", { type: String, ...{ default: "list" } });
 const railOpen = defineModel("railOpen", { type: Boolean, ...{ default: true } });
+const density = defineModel("density", { type: String, ...{ default: "standard" } });
+if (import.meta.client) {
+  try {
+    const stored = localStorage.getItem(props.densityKey);
+    if (stored === "compact" || stored === "standard") density.value = stored;
+  } catch {
+  }
+}
+function setDensity(next) {
+  density.value = next;
+  try {
+    localStorage.setItem(props.densityKey, next);
+  } catch {
+  }
+}
+const narrow = ref(false);
+let narrowMql = null;
+const onNarrow = (e) => {
+  narrow.value = e.matches;
+};
+onMounted(() => {
+  narrowMql = window.matchMedia("(max-width: 767px)");
+  narrow.value = narrowMql.matches;
+  narrowMql.addEventListener("change", onNarrow);
+});
+onBeforeUnmount(() => narrowMql?.removeEventListener("change", onNarrow));
+const cardMode = computed(() => props.mobileCards && narrow.value);
+const CONTROL_KEYS = /* @__PURE__ */ new Set(["__select", "__actions", "__move"]);
+const STATUS_KEY = /(^|_)(status|state|phase|stage|lifecycle)(_|$)/i;
+const cardLayout = computed(() => {
+  const cols = visibleColumns.value;
+  const data = cols.filter((c) => !CONTROL_KEYS.has(c.key) && c.card !== "hidden");
+  const title = data.find((c) => c.card === "title") ?? data.find((c) => c.primary) ?? data[0] ?? null;
+  const status = data.find((c) => c.card === "status") ?? data.find((c) => c !== title && c.card !== "meta" && STATUS_KEY.test(c.key)) ?? null;
+  const explicitMeta = data.filter((c) => c.card === "meta");
+  const meta = (explicitMeta.length ? explicitMeta : data.filter((c) => c !== title && c !== status)).slice(0, 4);
+  return {
+    select: cols.find((c) => c.key === "__select") ?? null,
+    actions: cols.find((c) => c.key === "__actions") ?? null,
+    title,
+    status,
+    meta
+  };
+});
 const facetSelection = defineModel("facetSelection", { type: Object, ...{ default: () => ({}) } });
 const panelFacets = computed(() => props.facets);
 if (props.defaultSort && sort.value.column == null) {
   sort.value = { column: props.defaultSort.column, direction: props.defaultSort.direction };
 }
+const pageSizeTable = computed(() => props.pageSizeKey ?? props.savedViews?.storageKey ?? null);
 const pageSize = ref(
-  typeof props.pagination === "object" && props.pagination?.pageSize ? props.pagination.pageSize : 20
+  readPageSize(pageSizeTable.value) ?? (typeof props.pagination === "object" && props.pagination?.pageSize ? props.pagination.pageSize : DEFAULT_PAGE_SIZE)
 );
-const pageSizeOptions = computed(() => Array.from(/* @__PURE__ */ new Set([10, 20, 50, 100, pageSize.value])).sort((a, b) => a - b));
+const pageSizeOptions = computed(() => pageSizeChoices(pageSize.value));
+watch(pageSize, (n) => writePageSize(pageSizeTable.value, n));
 const hidden = ref(initiallyHidden(props.columns));
 const columnOrder = ref([]);
 const arrangedColumns = computed(() => orderColumnsBy(props.columns, columnOrder.value));
 const visibleColumns = computed(() => visibleColumnsOf(arrangedColumns.value, hidden.value));
+defineExpose({ visibleColumns });
 const pickerColumns = computed(() => arrangedColumns.value.filter((c) => (c.label ?? "").trim().length > 0).map((c) => ({
   key: c.key,
   label: c.label ?? c.key,
@@ -127,22 +185,22 @@ const filterFacets = computed(() => filterDims.value.map((d) => {
   };
 }));
 function dimCounts(d) {
-  return countByValue(props.data, d.getter);
+  return facetCounts(queried.value, filterDims.value, activeFilters.value, d);
 }
-const filtered = computed(() => {
-  if (props.serverMode || !filterDims.value.length) return props.data;
-  const active = filterDims.value.filter((d) => activeFilters.value[d.key]?.length);
-  if (!active.length) return props.data;
-  return props.data.filter((row) => active.every((d) => matchesFilter(d.getter, row, activeFilters.value[d.key])));
-});
-const searched = computed(() => {
+const queried = computed(() => {
   if (props.serverMode) return props.data;
   const q = query.value.trim().toLowerCase();
-  if (!q) return filtered.value;
-  return filtered.value.filter(
+  if (!q) return props.data;
+  return props.data.filter(
     (row) => props.columns.some((col) => searchOf(col, row).includes(q))
   );
 });
+const searched = computed(() => {
+  if (props.serverMode || !filterDims.value.length) return queried.value;
+  const active = filterDims.value.filter((d) => activeFilters.value[d.key]?.length);
+  if (!active.length) return queried.value;
+  return queried.value.filter((row) => active.every((d) => matchesFilter(d.getter, row, activeFilters.value[d.key])));
+});
 function sortKey(col, row) {
   if (col.sortGetter) return col.sortGetter(row);
   const raw = row[col.key];
@@ -262,7 +320,94 @@ function rowKeyFor(row) {
   if (typeof props.rowKey === "function") return props.rowKey(row);
   return row[props.rowKey];
 }
-const gridTemplate = computed(() => `grid-template-columns: ${gridTemplateColumns(renderColumns.value.map((c) => c.width))};`);
+const gridTemplate = computed(() => `grid-template-columns: ${gridTemplateColumns(
+  renderColumns.value.map((c) => c.width),
+  void 0,
+  // A flexible column keeps room for its one-line heading and the (?)/sort icons beside it.
+  renderColumns.value.map((c) => c.primary ? c.floor ?? PRIMARY_FLOOR : c.floor ?? headerFloor(c.label, { icons: (c.sortable ? 1 : 0) + 1, maxChars: HEADER_NOWRAP_MAX }))
+)};`);
+const PRIMARY_FLOOR = "260px";
+const pinnedCount = computed(() => {
+  if (cardMode.value) return 0;
+  const i = renderColumns.value.findIndex((c) => c.primary);
+  return i < 0 ? 0 : i + 1;
+});
+const pinnedOffsets = ref([]);
+const scrolledX = ref(false);
+const moreRight = ref(false);
+function measurePinned() {
+  const row = headerRowEl.value;
+  if (!row || !pinnedCount.value) {
+    pinnedOffsets.value = [];
+    return;
+  }
+  const cells = Array.from(row.querySelectorAll(':scope > [role="columnheader"]'));
+  const rowLeft = row.getBoundingClientRect().left;
+  const style = getComputedStyle(row);
+  const pad = Number.parseFloat(style.paddingLeft) || 0;
+  const gap = Number.parseFloat(style.columnGap) || 0;
+  pinnedOffsets.value = cells.slice(0, pinnedCount.value).map((cell, i) => {
+    const left = cell.getBoundingClientRect().left - rowLeft + (Number.parseFloat(cell.style.marginLeft) ? -Number.parseFloat(cell.style.marginLeft) : 0);
+    const gutter = i === 0 ? pad : gap;
+    return { left: left - gutter, gutter };
+  });
+}
+function pinnedStyle(index) {
+  const o = pinnedOffsets.value[index];
+  if (!o || index >= pinnedCount.value) return void 0;
+  return {
+    position: "sticky",
+    left: `${o.left}px`,
+    marginLeft: `-${o.gutter}px`,
+    paddingLeft: `${o.gutter}px`,
+    backgroundColor: "inherit",
+    zIndex: "1"
+  };
+}
+const HEADER_NOWRAP_MAX = 18;
+function headerNoWrap(col) {
+  return (col.label ?? "").length <= HEADER_NOWRAP_MAX ? "whitespace-nowrap" : "";
+}
+function rightPinStyle(col) {
+  if (!col.pinRight || cardMode.value) return void 0;
+  return { position: "sticky", right: "0px", backgroundColor: "inherit", zIndex: "1" };
+}
+function rightPinClass(col) {
+  return col.pinRight && moreRight.value ? "shadow-[-6px_0_8px_-6px_rgba(11,5,34,0.18)]" : "";
+}
+function pinnedClass(index) {
+  return index === pinnedCount.value - 1 && scrolledX.value ? "shadow-[6px_0_8px_-6px_rgba(11,5,34,0.18)]" : "";
+}
+function syncScrollX() {
+  const el = scrollEl.value;
+  if (!el) return;
+  scrolledX.value = el.scrollLeft > 0;
+  moreRight.value = el.scrollWidth - el.clientWidth - el.scrollLeft > 2;
+}
+function scrollRight() {
+  scrollEl.value?.scrollBy({ left: Math.max(240, (scrollEl.value?.clientWidth ?? 0) * 0.6), behavior: "smooth" });
+}
+let pinObserver = null;
+onMounted(() => {
+  pinObserver = new ResizeObserver(() => {
+    measurePinned();
+    syncScrollX();
+  });
+  if (scrollEl.value) pinObserver.observe(scrollEl.value);
+  if (headerRowEl.value) pinObserver.observe(headerRowEl.value);
+  nextTick(() => {
+    measurePinned();
+    syncScrollX();
+  });
+  watch([() => renderColumns.value.map((c) => `${c.key}:${c.width ?? ""}`).join("|"), () => props.data, cardMode, density], () => {
+    nextTick(() => {
+      if (headerRowEl.value && pinObserver) pinObserver.observe(headerRowEl.value);
+      measurePinned();
+      syncScrollX();
+    });
+  });
+});
+onBeforeUnmount(() => pinObserver?.disconnect());
 const SUBGRID_ROW = "grid-column: 1 / -1; grid-template-columns: subgrid;";
 const placeholder = computed(
   () => typeof props.search === "object" ? props.search.placeholder ?? t("shared.datatable.toolbar.search.placeholder.default") : t("shared.datatable.toolbar.search.placeholder.default")
@@ -273,7 +418,7 @@ const searchLabel = computed(() => {
 });
 const slots = useSlots();
 const showToolbar = computed(
-  () => props.search || props.columnsMenu || props.filter || !!props.filterTabs || !!props.savedViews || !!props.viewModes?.length || !!props.rail || !!slots.actions || !!slots.scope || !!slots["toolbar-left"] || !!slots["toolbar-right"]
+  () => props.toolbar && (props.search || props.columnsMenu || props.filter || !!props.filterTabs || !!props.savedViews || !!props.viewModes?.length || !!props.rail || !!slots.actions || !!slots.scope || !!slots["toolbar-left"] || !!slots["toolbar-right"])
 );
 const railLabel = computed(
   () => (typeof props.rail === "object" ? props.rail.label : void 0) ?? null
@@ -304,7 +449,7 @@ function measureFit() {
   if (!el) return;
   const container = scrollParent(el);
   const offset = el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
-  const reserve = (footerEl.value?.offsetHeight ?? 0) + BOTTOM_GAP_PX;
+  const reserve = (footerEl.value?.offsetHeight ?? 0) + BOTTOM_GAP_PX + (props.reserveBottom ?? 0);
   const overflow = Math.max(container.scrollHeight - container.clientHeight, 0);
   const available = Math.max(
     Math.floor(container.clientHeight - offset - reserve - overflow) - 1,
@@ -339,6 +484,7 @@ if (import.meta.client) {
     schedule();
     syncThumb();
   }));
+  watch(() => props.reserveBottom, () => nextTick(schedule));
   onMounted(() => {
     nextTick(syncThumb);
     window.addEventListener("resize", syncThumb);
@@ -368,6 +514,7 @@ function syncThumb() {
 }
 function onRowsScroll() {
   syncThumb();
+  syncScrollX();
 }
 function startThumbDrag(event) {
   const el = scrollEl.value;
@@ -402,7 +549,7 @@ const scrollStyle = computed(() => {
   const configured = typeof props.scrollBody === "object" ? props.scrollBody.maxHeight : void 0;
   return { maxHeight: configured ?? "calc(100vh - 22rem)" };
 });
-const showFooter = computed(() => props.pagination !== false && !props.groupBy);
+const showFooter = computed(() => props.pagination !== false && !props.groupBy && !(totalCount.value === 0 && !props.loading));
 const lastPage = computed(
   () => pageSize.value > 0 ? Math.max(0, Math.ceil(totalCount.value / pageSize.value) - 1) : 0
 );
@@ -495,7 +642,7 @@ function dropClass(row) {
   return at.edge === "before" ? "shadow-[inset_0_2px_0_0_var(--color-primary)]" : "shadow-[inset_0_-2px_0_0_var(--color-primary)]";
 }
 function rowGround(row) {
-  if (props.activeRowKey != null && rowKeyFor(row) === props.activeRowKey) return "bg-primary/[0.06]";
+  if (props.activeRowKey != null && rowKeyFor(row) === props.activeRowKey) return "bg-[#f5f1fe]";
   return props.rowClass?.(row) || "bg-gray-50";
 }
 function defaultCell(col, row) {
@@ -506,7 +653,7 @@ function defaultCell(col, row) {
 </script>
 
 <template>
-  <div class="rounded-lg border border-black/[0.06] overflow-hidden flex flex-col">
+  <div class="overflow-hidden flex flex-col" :class="embedded ? 'bg-white' : 'rounded-lg border border-black/[0.06]'">
     <!-- Toolbar ------------------------------------------------------ -->
     <!-- The single control row of a list surface.
 
@@ -543,9 +690,11 @@ function defaultCell(col, row) {
          in it. -->
     <div
       v-if="showToolbar"
-      class="flex flex-wrap items-center justify-between gap-2 px-4 py-3 bg-gradient-to-r from-violet-50/80 via-white to-violet-50/60"
+      class="flex flex-wrap items-center justify-between gap-2 px-4 py-3 xl:flex-nowrap"
+      :class="embedded ? 'bg-white' : 'bg-gradient-to-r from-violet-50/80 via-white to-violet-50/60'"
     >
-      <div class="flex items-center gap-2 min-w-0">
+      <!-- One line on a wide screen (UI-F10): the search gives way first. -->
+      <div class="flex min-w-0 flex-wrap items-center gap-2 max-sm:w-full xl:flex-1 xl:flex-nowrap">
         <Button
           v-if="rail"
           variant="outline"
@@ -573,7 +722,7 @@ function defaultCell(col, row) {
           v-model="query"
           :placeholder="placeholder"
           :label="searchLabel"
-          class="w-[21rem] min-w-40 max-w-full shrink"
+          class="w-full min-w-40 max-w-full shrink sm:w-[21rem] xl:w-auto xl:flex-1 xl:max-w-[21rem]"
         >
           <template #icon>
             <Search :size="14" weight="Linear" />
@@ -605,8 +754,20 @@ function defaultCell(col, row) {
           :reset-label="t('shared.datatable.toolbar.filter.reset')"
           @update:model-value="applyPanelSelection"
         >
-          <template #icon>
-            <Filter :size="14" weight="BoldDuotone" />
+          <!-- D7 (Charge 2): tool buttons carry their word on desktop, the
+               glyph alone on phones. studio's trigger is icon-only by design
+               (ToolbarFilterTrigger icon-only), so the dummy draws its own
+               trigger through the panel's `trigger` slot. -->
+          <template #trigger="{ count }">
+            <ToolbarLabelTrigger
+              :active="count > 0"
+              :count="count"
+              :label="t('shared.datatable.toolbar.filter.action')"
+            >
+              <template #icon>
+                <Filter :size="14" weight="BoldDuotone" />
+              </template>
+            </ToolbarLabelTrigger>
           </template>
         </FilterPanel>
         <!--
@@ -621,8 +782,14 @@ function defaultCell(col, row) {
           v-model="facetSelection"
           :facets="facets"
         />
+        <!--
+          No `#filter-menu`, no trigger: `filter` alone used to draw a Filter
+          button that opened on "No filters defined" — a control promising to
+          narrow the list and refusing to (PO-313). The other two routes draw
+          only when the surface declared facets or dimensions.
+        -->
         <FilterMenu
-          v-if="filter && !panelFacets.length"
+          v-if="filter && slots['filter-menu'] && !panelFacets.length"
           :width="typeof filter === 'object' ? filter.width : void 0"
           :active="typeof filter === 'object' ? filter.active : void 0"
           :count="typeof filter === 'object' ? filter.count : void 0"
@@ -644,10 +811,16 @@ function defaultCell(col, row) {
           :model-value="pickerColumns"
           :label="t('shared.datatable.columnsmenu.tooltip')"
           :heading="t('shared.datatable.columnsmenu.heading')"
+          class="w-8 gap-1.5 px-0 [&_span.bg-primary]:hidden"
           @update:model-value="onPickerUpdate"
         >
+          <!-- No count on the trigger (Michael: no count badges, PE-1082): the
+               studio picker draws one; hidden here until it has a prop.
+               D7: the word rides in the icon slot — studio's picker has no
+               label slot yet (see the studio change list in the ledger). -->
           <template #icon>
             <Columns :size="15" weight="BoldDuotone" />
+            <span class="sr-only">{{ t("shared.datatable.columnsmenu.tooltip") }}</span>
           </template>
           <template #handle>
             <ListArrowDownMinimalistic :size="15" weight="Linear" />
@@ -659,6 +832,33 @@ function defaultCell(col, row) {
             <EyeClosed :size="16" weight="Linear" />
           </template>
         </ColumnPicker>
+        <!-- Row height (D4, Charge 2): standard 44px, compact 36px. -->
+        <SegmentedToggle
+          v-if="showTable && !cardMode"
+          :model-value="density"
+          variant="inset"
+          :aria-label="t('shared.datatable.toolbar.density.label')"
+          @update:model-value="(v) => v && setDensity(v)"
+        >
+          <SegmentedToggleItem
+            value="standard"
+            :aria-label="t('shared.datatable.toolbar.density.standard')"
+            :title="t('shared.datatable.toolbar.density.standard')"
+            class="transition-colors data-[state=on]:text-primary data-[state=off]:hover:text-primary!"
+          >
+            <AlignVerticalSpacing :size="14" weight="Linear" />
+            <span class="sr-only">{{ t("shared.datatable.toolbar.density.standard") }}</span>
+          </SegmentedToggleItem>
+          <SegmentedToggleItem
+            value="compact"
+            :aria-label="t('shared.datatable.toolbar.density.compact')"
+            :title="t('shared.datatable.toolbar.density.compact')"
+            class="transition-colors data-[state=on]:text-primary data-[state=off]:hover:text-primary!"
+          >
+            <DragHandle :size="14" weight="Linear" />
+            <span class="sr-only">{{ t("shared.datatable.toolbar.density.compact") }}</span>
+          </SegmentedToggleItem>
+        </SegmentedToggle>
         <!--
           Saved views, beside the columns picker rather than out past the market
           scope and the view-mode switch.
@@ -760,31 +960,39 @@ function defaultCell(col, row) {
          that. A static table read with a screen reader's own table commands is
          what these lists actually are, and both roles announce the column
          heading with the cell, which is the thing that was missing. -->
-    <div :class="scrollBody ? 'relative flex min-h-0 flex-col' : ''">
+    <div :class="scrollBody && !cardMode ? 'relative flex min-h-0 flex-col' : 'relative'">
     <div
       ref="scrollEl"
-      :class="scrollBody ? 'rx-rows min-h-0 overflow-auto' : 'overflow-x-auto'"
-      :style="scrollStyle"
+      :class="scrollBody && !cardMode ? 'rx-rows min-h-0 overflow-auto' : 'overflow-x-auto'"
+      :style="cardMode ? void 0 : scrollStyle"
       @scroll="onRowsScroll"
     >
       <div
         :role="showTable ? 'table' : void 0"
         :aria-busy="showTable && loading ? 'true' : void 0"
-        :class="showTable ? 'grid min-w-min gap-x-2' : ''"
-        :style="showTable ? gridTemplate : void 0"
+        :class="showTable && !cardMode ? 'grid min-w-min gap-x-2' : ''"
+        :style="showTable && !cardMode ? gridTemplate : void 0"
       >
     <!-- Header row -------------------------------------------------- -->
     <div
-      v-if="showTable"
+      v-if="showTable && !cardMode"
       ref="headerRowEl"
       role="row"
-      class="grid items-center gap-x-2 border-t rounded-t-lg border-gray-200 bg-gray-100 px-4 py-2.5 text-sm font-medium uppercase tracking-normal text-muted-foreground"
-      :class="scrollBody ? 'sticky top-0 z-10' : ''"
+      data-rx-head
+      class="grid items-center gap-x-2 border-gray-200 px-4 py-2.5 text-sm font-medium uppercase tracking-normal text-muted-foreground"
+      :class="[
+  scrollBody ? 'sticky top-0 z-10' : '',
+  embedded ? 'bg-gray-100' : 'rounded-t-lg bg-gray-100',
+  // Embedded with the search row closed, the card head\'s own bottom
+  // edge is already the line above the headings; a second one here drew
+  // a double rule (Michael 14.10.).
+  embedded && !showToolbar ? '' : 'border-t'
+]"
       :style="SUBGRID_ROW"
     >
       <!-- The handle column's heading: nothing to see, but a columnheader the
            handles' cells can be named by. -->
-      <div v-if="reorderable" role="columnheader" class="w-6">
+      <div v-if="reorderable" role="columnheader" class="w-6" :style="pinnedStyle(0)">
         <span class="sr-only">{{ t("shared.datatable.reorder.column") }}</span>
       </div>
       <!-- `columnheader` is what names every cell underneath it, so this is
@@ -793,13 +1001,14 @@ function defaultCell(col, row) {
            current direction is a control whose state is visible only to
            people who can see the arrow. -->
       <div
-        v-for="col in visibleColumns"
+        v-for="(col, ci) in visibleColumns"
         :key="col.key"
         role="columnheader"
         :aria-sort="ariaSortFor(col)"
         :title="col.label || void 0"
         class="min-w-0"
-        :class="col.alignRight ? RIGHT_ALIGNED : ''"
+        :class="[col.alignRight ? RIGHT_ALIGNED : '', pinnedClass(ci + (reorderable ? 1 : 0)), rightPinClass(col)]"
+        :style="rightPinStyle(col) ?? pinnedStyle(ci + (reorderable ? 1 : 0))"
       >
         <!-- `#header-<key>` lets a page take over a header cell (e.g. a
              select-all checkbox in a selection column). Default: sortable
@@ -813,19 +1022,74 @@ function defaultCell(col, row) {
             :align-right="col.alignRight"
             @toggle="toggleSort"
           >
-            {{ col.label }}
+            <span :class="headerNoWrap(col)">{{ col.label }}</span>
           </SortHeader>
           <!-- `normal-case` to match SortHeader, whose button does not inherit
                the row's uppercase. Without it a column reads "LAST CHECK"
                beside "Channel" and "Provider" for no reason a reader can see —
                the header shouts wherever a column happens not to be sortable. -->
-          <span v-else class="block truncate normal-case">{{ col.label }}</span>
+          <span v-else class="block break-normal leading-tight normal-case" :class="headerNoWrap(col)">{{ col.label }}</span>
         </slot>
       </div>
     </div>
 
     <!-- Body --------------------------------------------------------- -->
-    <template v-for="entry in showTable ? renderRows : []" :key="entry.key">
+    <!-- Phone (R4, Charge 2): one card per row. Title and status on the first
+         line, then up to four key facts in two lines, in column priority. The
+         same cell slots render inside, so a card shows exactly what the row
+         would. -->
+    <template v-if="showTable && cardMode">
+      <div
+        v-for="entry in renderRows"
+        :key="entry.key"
+        :role="entry.kind === 'header' ? void 0 : 'button'"
+        :data-row="entry.kind === 'header' ? void 0 : ''"
+        :tabindex="entry.kind === 'header' ? void 0 : 0"
+        class="border-t border-black/[0.04]"
+        :class="entry.kind === 'header' ? 'bg-gray-100/70 px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground' : ['group cursor-pointer px-4 py-3', rowGround(entry.row)]"
+        @click="entry.kind !== 'header' && emit('rowClick', entry.row)"
+        @keydown.enter="entry.kind !== 'header' && emit('rowClick', entry.row)"
+      >
+        <template v-if="entry.kind === 'header'">
+          {{ entry.label }} <span class="tabular-nums normal-case text-muted-foreground/70">{{ entry.count }}</span>
+        </template>
+        <template v-else>
+          <div class="flex items-start gap-3">
+            <div v-if="cardLayout.select" class="pt-0.5" @click.stop>
+              <slot :name="`cell-${cardLayout.select.key}`" :row="entry.row" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <div class="flex items-start justify-between gap-2">
+                <div v-if="cardLayout.title" class="min-w-0 flex-1 text-sm font-semibold text-[#0B0522] [&_*]:max-w-full">
+                  <slot :name="`cell-${cardLayout.title.key}`" :row="entry.row">
+                    <span class="block truncate">{{ defaultCell(cardLayout.title, entry.row) }}</span>
+                  </slot>
+                </div>
+                <div v-if="cardLayout.status" class="shrink-0">
+                  <slot :name="`cell-${cardLayout.status.key}`" :row="entry.row">
+                    <span class="text-sm">{{ defaultCell(cardLayout.status, entry.row) }}</span>
+                  </slot>
+                </div>
+                <div v-if="cardLayout.actions" class="-mr-1 shrink-0" @click.stop>
+                  <slot :name="`cell-${cardLayout.actions.key}`" :row="entry.row" />
+                </div>
+              </div>
+              <dl v-if="cardLayout.meta.length" class="mt-1.5 grid grid-cols-2 gap-x-3 gap-y-1">
+                <div v-for="m in cardLayout.meta" :key="m.key" class="min-w-0">
+                  <dt class="truncate text-xs text-muted-foreground">{{ m.label }}</dt>
+                  <dd class="min-w-0 truncate text-sm">
+                    <slot :name="`cell-${m.key}`" :row="entry.row">
+                      <span class="block truncate">{{ defaultCell(m, entry.row) }}</span>
+                    </slot>
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+    <template v-for="entry in showTable && !cardMode ? renderRows : []" :key="entry.key">
       <!-- Group header (groupBy mode) — a row of one cell that spans the lot.
            The flex moves one element in, onto the cell: a `row` may hold
            cells and the label and the count are neither. -->
@@ -838,15 +1102,16 @@ function defaultCell(col, row) {
              scroll does not show this band stopping short of the rows it
              groups. No subgrid: it holds one cell, not a set of columns. -->
         <div role="cell" :aria-colspan="renderColumns.length" class="flex items-center gap-2">
-          {{ entry.label }}
+          <slot name="group-header" :label="entry.label">{{ entry.label }}</slot>
           <span class="tabular-nums normal-case text-muted-foreground/70">{{ entry.count }}</span>
         </div>
       </div>
       <div
         v-else
         role="row"
-        class="group grid items-center gap-x-2 border-t border-black/[0.04] px-4 py-3 cursor-pointer transition-colors"
-        :class="[rowGround(entry.row), dropClass(entry.row), dragKey != null && dragKey === rowKeyFor(entry.row) ? 'opacity-50' : '']"
+        data-row
+        class="group grid items-center gap-x-2 border-t border-black/[0.04] px-4 cursor-pointer transition-colors"
+        :class="[density === 'compact' ? 'min-h-9 py-1' : 'min-h-11 py-2', rowGround(entry.row), dropClass(entry.row), dragKey != null && dragKey === rowKeyFor(entry.row) ? 'opacity-50' : '']"
         :aria-current="activeRowKey != null && rowKeyFor(entry.row) === activeRowKey ? 'true' : void 0"
         :style="SUBGRID_ROW"
         @click="emit('rowClick', entry.row)"
@@ -856,7 +1121,7 @@ function defaultCell(col, row) {
         <!-- The grip. A button, so it is reachable and the arrow keys can move
              the row; `draggable` on it rather than on the row, so selecting a
              cell's text or clicking an inline input never starts a drag. -->
-        <div v-if="reorderable" role="cell" class="flex items-center" @click.stop>
+        <div v-if="reorderable" role="cell" class="flex items-center" :style="pinnedStyle(0)" @click.stop>
           <button
             type="button"
             :data-move-key="String(rowKeyFor(entry.row))"
@@ -874,11 +1139,12 @@ function defaultCell(col, row) {
           </button>
         </div>
         <div
-          v-for="col in visibleColumns"
+          v-for="(col, ci) in visibleColumns"
           :key="col.key"
           role="cell"
           class="min-w-0"
-          :class="col.alignRight ? RIGHT_ALIGNED : ''"
+          :class="[col.alignRight ? RIGHT_ALIGNED : '', pinnedClass(ci + (reorderable ? 1 : 0)), rightPinClass(col)]"
+          :style="rightPinStyle(col) ?? pinnedStyle(ci + (reorderable ? 1 : 0))"
         >
           <slot :name="`cell-${col.key}`" :row="entry.row">
             <!-- Primary column: bold record anchor + optional tinted icon tile. -->
@@ -905,7 +1171,7 @@ function defaultCell(col, row) {
          information to read out, and announcing them as six empty rows would
          be worse than silence; the table says it is `aria-busy` instead,
          which is the same news in one word. -->
-    <template v-if="showTable && loading && !displayedRows.length">
+    <template v-if="showTable && !cardMode && loading && !displayedRows.length">
       <div
         v-for="n in 6"
         :key="`sk-${n}`"
@@ -942,6 +1208,24 @@ function defaultCell(col, row) {
       </div>
     </div>
 
+      <!-- More columns to the right (D5, Charge 2): a soft edge over the rows
+           and a button that scrolls on, so a wide table says that it is wide
+           instead of ending in a clipped "Stat…". -->
+      <div
+        v-if="showTable && !cardMode && moreRight"
+        class="pointer-events-none absolute inset-y-0 right-0 z-[15] w-10 bg-gradient-to-l from-[rgb(11_5_34_/_0.07)] to-transparent"
+      />
+      <!-- Never over the rows (UI-F02, EC-F30): a table without a footer gets
+           a slim line under it instead of a pill covering the last cells. -->
+      <div
+        v-if="showTable && !cardMode && moreRight && !showFooter"
+        class="relative z-20 flex justify-end border-t border-black/[0.06] bg-white/70 px-2 py-1"
+      >
+        <Button variant="ghost" size="sm" class="h-7 gap-1 text-xs" @click="scrollRight">
+          {{ t("shared.datatable.scroll.more") }}
+          <AltArrowRight :size="12" weight="Bold" />
+        </Button>
+      </div>
       <!-- The rows' scrollbar ---------------------------------------- -->
       <!-- Drawn, not borrowed. A browser's own bar belongs to the scrolling
            box, and the column head is inside that box — it has to be, because
@@ -991,11 +1275,23 @@ function defaultCell(col, row) {
           </select>
         </label>
       </div>
+      <div class="ml-auto flex items-center gap-2">
+        <Button
+          v-if="showTable && !cardMode && moreRight"
+          variant="ghost"
+          size="sm"
+          class="gap-1"
+          @click="scrollRight"
+        >
+          {{ t("shared.datatable.scroll.more") }}
+          <AltArrowRight :size="12" weight="Bold" />
+        </Button>
+      </div>
       <div v-if="lastPage > 0" class="flex items-center gap-2">
         <Button
           variant="outline"
           size="sm"
-          class="h-7 text-sm disabled:opacity-100 disabled:text-muted-foreground"
+          class="text-sm"
           :disabled="page === 0 || loading"
           @click="prevPage"
         >
@@ -1007,7 +1303,7 @@ function defaultCell(col, row) {
         <Button
           variant="outline"
           size="sm"
-          class="h-7 text-sm disabled:opacity-100 disabled:text-muted-foreground"
+          class="text-sm"
           :disabled="page >= lastPage || loading"
           @click="nextPage"
         >
@@ -1021,3 +1317,7 @@ function defaultCell(col, row) {
 <style scoped>
 .rx-rows::-webkit-scrollbar{height:10px;width:0}.rx-rows::-webkit-scrollbar-track{background:transparent}.rx-rows::-webkit-scrollbar-thumb{background:rgba(11,5,34,.18);background-clip:padding-box;border:3px solid transparent;border-radius:9999px}.rx-thumb{min-height:32px}
 </style>
+
+<style>
+@media (max-width:767.98px){[data-reka-popper-content-wrapper]:has(>[data-slot=popover-content].w-\[34rem\]){inset:auto 0 0 0!important;min-width:0!important;position:fixed!important;transform:none!important}[data-reka-popper-content-wrapper]>[data-slot=popover-content].w-\[34rem\]{border-radius:.75rem .75rem 0 0!important;max-height:80svh;max-width:100vw!important;overflow:auto;padding-bottom:env(safe-area-inset-bottom);width:100vw!important}}
+</style>