@revenexx/studio-shared 0.3.0 → 0.3.1

package/dist/module.d.mts

@@ -7,6 +7,7 @@ export { PlatformTenant } from '../dist/runtime/composables/usePlatformTenant.js
 export { PlatformTalkback } from '../dist/runtime/composables/usePlatformTalkback.js';
 export { TalkbackChannel, TalkbackChannelOptions, TalkbackMaybeRef } from '../dist/runtime/composables/useTalkbackChannels.js';
 export { MediaLibraryClient } from '../dist/runtime/composables/useMediaLibrary.js';
+export { FloatingPanelDock, FloatingPanelMode, FloatingPanelOptions } from '../dist/runtime/composables/useFloatingPanel.js';
 export { IsoOption } from '../dist/runtime/lib/isoLists.js';
 export { Translate, TranslateNamed, Translator } from '../dist/runtime/lib/i18nBridge.js';
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "studio-shared",
   "configKey": "studioShared",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -36,6 +36,11 @@ const module$1 = defineNuxtModule({
       // Collapsible list-rail state (persisted per surface) behind the
       // DataTable toolbar's rail handle.
       { name: "useListRail", from: join(runtime, "composables/useListRail"), priority: -1 },
+      // A panel that docks to either side of a canvas, floats anywhere on it,
+      // or collapses to a pill — and is dragged between those by its header.
+      // Lifted out of the integration studio's workflow editor so a second
+      // editor can have the same panels without a second implementation.
+      { name: "useFloatingPanel", from: join(runtime, "composables/useFloatingPanel"), priority: -1 },
       // Realtime provider seam (Talkback). Composes usePlatformAuth +
       // usePlatformTenant, so a host that overrides those gets a correct client
       // without overriding this one too.

package/dist/runtime/components/DataTable/ColumnsMenu.d.vue.ts

@@ -6,7 +6,9 @@ type __VLS_Props = {
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (key: string) => any;
+    reorder: (from: number, to: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onToggle?: ((key: string) => any) | undefined;
+    onReorder?: ((from: number, to: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,51 +1,107 @@
 <script setup>
-import { Widget as Columns, CheckCircle as Check } from "#solar-icons";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from "@revenexx/studio";
+import { Eye, EyeClosed, ListArrowDownMinimalistic, Widget as Columns } from "#solar-icons";
+import { Popover, PopoverContent, PopoverTrigger } from "@revenexx/studio";
 const props = defineProps({
   columns: { type: Array, required: true },
   visible: { type: Set, required: true }
 });
-const emit = defineEmits(["toggle"]);
-const toggleable = computed(() => props.columns.filter((c) => c.toggleable !== false));
+const emit = defineEmits(["toggle", "reorder"]);
+const listed = computed(() => props.columns);
+const visibleCount = computed(() => props.columns.filter((c) => props.visible.has(c.key)).length);
+function canHide(col) {
+  if (col.toggleable === false) return false;
+  return !props.visible.has(col.key) || visibleCount.value > 1;
+}
+const dragging = ref(null);
+const over = ref(null);
+const announcement = ref("");
+function move(from, to) {
+  if (to < 0 || to >= listed.value.length || to === from) return;
+  emit("reorder", from, to);
+  const column = listed.value[from];
+  if (column) announcement.value = `${column.label}, ${to + 1} / ${listed.value.length}`;
+}
+function onDrop(index) {
+  if (dragging.value !== null) move(dragging.value, index);
+  dragging.value = null;
+  over.value = null;
+}
+function onKey(event, index) {
+  if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+  event.preventDefault();
+  const to = event.key === "ArrowUp" ? index - 1 : index + 1;
+  move(index, to);
+  const list = event.currentTarget.closest("[data-columns-list]");
+  requestAnimationFrame(() => {
+    list?.querySelectorAll("[data-column-handle]")[to]?.focus();
+  });
+}
 const t = useT();
 </script>
 
 <template>
-  <DropdownMenu>
-    <DropdownMenuTrigger as-child>
+  <Popover>
+    <PopoverTrigger as-child>
       <button
         type="button"
         class="flex size-7 items-center justify-center rounded-md border border-black/[0.06] bg-white text-muted-foreground transition hover:text-foreground"
         :title="t('shared.datatable.columnsmenu.tooltip')"
       >
-        <Columns :size="15" />
+        <Columns :size="15" weight="Bold" />
       </button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent align="end" class="w-48">
-      <DropdownMenuLabel class="text-sm text-muted-foreground">
+    </PopoverTrigger>
+
+    <PopoverContent align="end" class="w-60 p-1.5">
+      <p class="px-2 py-1.5 text-sm text-muted-foreground">
         {{ t("shared.datatable.columnsmenu.heading") }}
-      </DropdownMenuLabel>
-      <DropdownMenuSeparator />
-      <DropdownMenuItem
-        v-for="col in toggleable"
-        :key="col.key"
-        class="justify-between gap-2"
-        @select.prevent="emit('toggle', col.key)"
-      >
-        <span class="truncate">{{ col.label }}</span>
-        <Check
-          v-if="visible.has(col.key)"
-          :size="14"
-          class="text-muted-foreground shrink-0"
-        />
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
+      </p>
+
+      <div data-columns-list class="space-y-0.5">
+        <div
+          v-for="(col, index) in listed"
+          :key="col.key"
+          class="flex items-center gap-1 rounded-md pr-1 transition-colors"
+          :class="[
+  over === index && dragging !== null && dragging !== index ? 'bg-primary/10' : 'hover:bg-muted',
+  dragging === index && 'opacity-40'
+]"
+          @dragover.prevent="over = index"
+          @drop.prevent="onDrop(index)"
+        >
+          <button
+            type="button"
+            data-column-handle
+            draggable="true"
+            class="flex size-7 shrink-0 cursor-grab items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring active:cursor-grabbing"
+            :aria-label="t('shared.datatable.columnsmenu.reorder', { column: col.label })"
+            @dragstart="dragging = index"
+            @dragend="dragging = null;
+  over = null"
+            @keydown="onKey($event, index)"
+          >
+            <ListArrowDownMinimalistic :size="15" weight="Linear" />
+          </button>
+
+          <span
+            class="min-w-0 flex-1 truncate py-1.5 text-sm transition-colors"
+            :class="visible.has(col.key) ? 'text-foreground' : 'text-muted-foreground'"
+          >{{ col.label }}</span>
+
+          <button
+            type="button"
+            class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-35"
+            :disabled="!canHide(col)"
+            :aria-pressed="visible.has(col.key)"
+            :aria-label="col.label"
+            @click="emit('toggle', col.key)"
+          >
+            <Eye v-if="visible.has(col.key)" :size="16" weight="Linear" />
+            <EyeClosed v-else :size="16" weight="Linear" />
+          </button>
+        </div>
+      </div>
+
+      <p class="sr-only" role="status" aria-live="polite">{{ announcement }}</p>
+    </PopoverContent>
+  </Popover>
 </template>

package/dist/runtime/components/DataTable/ColumnsMenu.vue.d.ts

@@ -6,7 +6,9 @@ type __VLS_Props = {
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (key: string) => any;
+    reorder: (from: number, to: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onToggle?: ((key: string) => any) | undefined;
+    onReorder?: ((from: number, to: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -20,6 +20,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         filter?: boolean | {
             width?: string;
             active?: boolean;
+            count?: number;
         };
         /** Built-in status/dimension filter pills (static mode). One dimension, or
          *  several (each renders as its own sub-menu). */
@@ -32,6 +33,26 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         viewModes?: DataTableViewMode[] | null;
         /** Collapse handle for the surface's left rail (see `ListSurface`). */
         rail?: boolean | DataTableRail;
+        /**
+         * Scroll the ROWS inside the table instead of the page.
+         *
+         * The toolbar, the header and the footer stay put and only the data moves,
+         * so paging through a long list keeps the search box, the filters and the
+         * "showing 20 of 400" in view — you stay in the table's context instead of
+         * scrolling the whole surface away and losing the controls that scope it.
+         *
+         * OPT-IN. A short list scrolling inside a box shorter than the list is worse
+         * than a page that scrolls, and there is no way for this component to know
+         * which it is looking at.
+         *
+         * The header row moves INSIDE the scroll container and sticks, rather than
+         * sitting above it. That is not a detail: a scrollbar takes width from the
+         * scrolling box, so a header outside it stays wider than the rows and every
+         * column drifts by however wide the scrollbar is.
+         */
+        scrollBody?: boolean | {
+            maxHeight?: string;
+        };
         pagination?: boolean | {
             pageSize?: number;
         };
@@ -61,12 +82,12 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         }) => any) | undefined;
     } & {
         'filter-menu'?: (props: {}) => any;
+    } & {
+        scope?: (props: {}) => any;
     } & {
         'toolbar-left'?: (props: {}) => any;
     } & {
         'toolbar-right'?: (props: {}) => any;
-    } & {
-        scope?: (props: {}) => any;
     } & {
         actions?: (props: {}) => any;
     } & {

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

@@ -1,23 +1,28 @@
 <script setup>
-import { AltArrowDown, Filter, Magnifier as Search, SidebarMinimalistic } from "#solar-icons";
+import {
+  Eye,
+  EyeClosed,
+  Filter,
+  ListArrowDownMinimalistic,
+  Magnifier as Search,
+  SidebarMinimalistic,
+  Widget as Columns
+} from "#solar-icons";
 import {
   Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-  Input
+  ColumnPicker,
+  FilterPanel,
+  SearchField,
+  SegmentedToggle,
+  SegmentedToggleItem
 } from "@revenexx/studio";
+import { orderColumnsBy } from "../../lib/columnOrder";
+import { initiallyHidden, visibleColumnsOf } from "../../lib/columnVisibility";
+import { countByValue, matchesFilter } from "../../lib/dataTableFilters";
 import SortHeader from "../Shared/SortHeader.vue";
-import ColumnsMenu from "./ColumnsMenu.vue";
 import FilterMenu from "./FilterMenu.vue";
 import SavedViewsMenu from "./SavedViewsMenu.vue";
 import SortMenu from "./SortMenu.vue";
-import ViewModeSwitch from "./ViewModeSwitch.vue";
 const props = defineProps({
   data: { type: Array, required: true },
   columns: { type: Array, required: true },
@@ -29,6 +34,7 @@ const props = defineProps({
   savedViews: { type: [Object, null], required: false, default: null },
   viewModes: { type: [Array, null], required: false, default: null },
   rail: { type: [Boolean, Object], required: false, default: false },
+  scrollBody: { type: [Boolean, Object], required: false },
   pagination: { type: [Boolean, Object], required: false, default: true },
   defaultSort: { type: Object, required: false },
   serverMode: { type: Boolean, required: false, default: false },
@@ -57,19 +63,20 @@ const pageSize = ref(
   typeof props.pagination === "object" && props.pagination?.pageSize ? props.pagination.pageSize : 20
 );
 const pageSizeOptions = computed(() => Array.from(/* @__PURE__ */ new Set([10, 20, 50, 100, pageSize.value])).sort((a, b) => a - b));
-const visibleKeys = ref(
-  new Set(props.columns.filter((c) => c.visible !== false).map((c) => c.key))
-);
-function toggleColumn(key) {
-  const next = new Set(visibleKeys.value);
-  if (next.has(key)) next.delete(key);
-  else next.add(key);
-  visibleKeys.value = next;
+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));
+const pickerColumns = computed(() => arrangedColumns.value.filter((c) => (c.label ?? "").trim().length > 0).map((c) => ({
+  key: c.key,
+  label: c.label ?? c.key,
+  visible: !hidden.value.has(c.key),
+  toggleable: c.toggleable !== false
+})));
+function onPickerUpdate(next) {
+  columnOrder.value = next.map((c) => c.key);
+  hidden.value = new Set(next.filter((c) => c.visible === false).map((c) => c.key));
 }
-const visibleColumns = computed(
-  () => props.columns.filter((c) => visibleKeys.value.has(c.key))
-);
-const menuColumns = computed(() => props.columns);
 function searchOf(col, row) {
   if (col.searchGetter) return col.searchGetter(row).toLowerCase();
   if (col.sortGetter) {
@@ -86,23 +93,33 @@ const filterDims = computed(() => {
   return arr.map((f, i) => ({ key: f.key ?? f.label ?? `dim${i}`, label: f.label ?? t("shared.datatable.filter.dimension.label.default"), getter: f.getter, options: f.options, allLabel: f.allLabel }));
 });
 const activeFilters = ref({});
-const anyFilterActive = computed(() => Object.values(activeFilters.value).some(Boolean));
-function setFilter(key, value) {
-  activeFilters.value = { ...activeFilters.value, [key]: value };
+const panelSelection = computed(() => Object.entries(activeFilters.value).flatMap(([key, values]) => values.map((v) => `${key}:${v}`)));
+function applyPanelSelection(selected) {
+  const next = {};
+  for (const id of selected) {
+    const at = id.indexOf(":");
+    if (at === -1) continue;
+    const key = id.slice(0, at);
+    (next[key] ??= []).push(id.slice(at + 1));
+  }
+  activeFilters.value = next;
 }
+const filterFacets = computed(() => filterDims.value.map((d) => {
+  const counts = dimCounts(d);
+  return {
+    key: d.key,
+    label: d.label,
+    options: d.options.map((o) => ({ value: o.value, label: o.label, count: counts[o.value] ?? 0 }))
+  };
+}));
 function dimCounts(d) {
-  const m = {};
-  for (const row of props.data) {
-    const k = String(d.getter(row) ?? "");
-    m[k] = (m[k] ?? 0) + 1;
-  }
-  return m;
+  return countByValue(props.data, d.getter);
 }
 const filtered = computed(() => {
   if (props.serverMode || !filterDims.value.length) return props.data;
-  const active = filterDims.value.filter((d) => activeFilters.value[d.key]);
+  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) => String(d.getter(row) ?? "") === activeFilters.value[d.key]));
+  return props.data.filter((row) => active.every((d) => matchesFilter(d.getter, row, activeFilters.value[d.key])));
 });
 const searched = computed(() => {
   if (props.serverMode) return props.data;
@@ -231,6 +248,11 @@ const showSortMenu = computed(() => !showTable.value && sortableColumns.value.le
 function cellIconFor(col) {
   return col.cellIcon ?? null;
 }
+const scrollStyle = computed(() => {
+  if (!props.scrollBody) return void 0;
+  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 lastPage = computed(
   () => pageSize.value > 0 ? Math.max(0, Math.ceil(totalCount.value / pageSize.value) - 1) : 0
@@ -255,13 +277,42 @@ function defaultCell(col, row) {
 <template>
   <div class="rounded-lg border border-black/[0.06] overflow-hidden flex flex-col">
     <!-- Toolbar ------------------------------------------------------ -->
-    <!-- The single control row of a list surface:
-         LEFT  = rail · search · filter · columns · #toolbar-left
-         RIGHT = #toolbar-right · saved views · #scope · view mode · #actions
-         (Pagination always lives in the footer.) -->
+    <!-- The single control row of a list surface.
+
+         The bar carries the dashboard's tint rather than flat white, so a
+         list's chrome and the home screen's are recognisably one surface. On
+         white the controls sat on nothing and the row read as a gap above the
+         table; with a ground under them they read as a row.
+
+         The stops are REVERSED from the dashboard's, and measuring is what
+         said so. The dashboard panel runs white → tint → white, which is right
+         for a panel whose content sits in the middle. A toolbar's content sits
+         at the two ENDS: the search field lands at 12% along the bar, where a
+         gradient starting pure white at 0% and reaching its tint at 50% is
+         still white. So a white field sat on a white ground with a 10% hairline
+         and a white rim doing nothing, while the identical control on the
+         dashboard read cleanly against 0.972 lightness.
+
+         Tinted at the ends, clear in the middle where nothing stands.
+
+         Not the dashboard's shimmer or its blurred corner blob: those are for a
+         panel somebody looks AT, and this is one they look through on the way
+         to the rows.
+         LEFT is LOOKING:  rail · search · filter · sort · columns · scope ·
+                           view mode · saved views · #toolbar-left
+         RIGHT is DOING:   #toolbar-right · #actions
+         (Pagination always lives in the footer.)
+
+         The line is not "filters versus the rest". View mode and column
+         visibility narrow nothing and still belong left, because reaching for
+         them means you are still looking for something; once your hand crosses
+         to the right you have stopped looking and started acting. Scope, view
+         mode and saved views used to sit on the right beside the primary
+         action, which made a row of eight controls with no readable boundary
+         in it. -->
     <div
       v-if="showToolbar"
-      class="flex flex-wrap items-center justify-between gap-2 px-4 py-3 bg-white/55 backdrop-blur-md"
+      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"
     >
       <div class="flex items-center gap-2 min-w-0">
         <Button
@@ -278,77 +329,110 @@ function defaultCell(col, row) {
           {{ railLabel }}
         </Button>
         <!-- Shrinks (never wraps the row) once the toolbar carries scope /
-             view-mode / saved-view controls next to it. -->
-        <div v-if="search" class="relative w-[21rem] min-w-40 max-w-full shrink">
-          <Search :size="13" class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            v-model="query"
-            :placeholder="placeholder"
-            class="h-7 pl-8 text-sm bg-white"
-          />
-        </div>
-        <!-- Generic "Filter" dropdown — each dimension is a labelled sub-menu. -->
-        <DropdownMenu v-if="filterDims.length">
-          <DropdownMenuTrigger as-child>
-            <Button
-              variant="outline"
-              size="sm"
-              class="h-7 gap-1.5 text-sm"
-              :class="anyFilterActive ? 'border-primary/30 text-primary' : ''"
-            >
-              <Filter :size="14" />
-              {{ t("shared.datatable.toolbar.filter.action") }}
-              <AltArrowDown :size="12" class="opacity-60" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" class="w-48">
-            <DropdownMenuSub v-for="d in filterDims" :key="d.key">
-              <DropdownMenuSubTrigger class="gap-2">
-                <span class="flex-1">{{ d.label }}</span>
-                <span v-if="activeFilters[d.key]" class="text-xs text-primary capitalize">{{ activeFilters[d.key] }}</span>
-              </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent class="w-48">
-                <DropdownMenuItem class="gap-2" @select="setFilter(d.key, null)">
-                  <span class="flex-1">{{ d.allLabel ?? t("shared.datatable.toolbar.filter.all.default") }}</span>
-                  <span class="tabular-nums text-muted-foreground">{{ data.length }}</span>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  v-for="o in d.options"
-                  :key="o.value"
-                  class="gap-2"
-                  @select="setFilter(d.key, o.value)"
-                >
-                  <span class="flex-1">{{ o.label }}</span>
-                  <span class="tabular-nums text-muted-foreground">{{ dimCounts(d)[o.value] ?? 0 }}</span>
-                </DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-          </DropdownMenuContent>
-        </DropdownMenu>
+             view-mode / saved-view controls next to it.
+
+             `SearchField` rather than an Input with an icon positioned over it
+             and a counted `pl-8`: three decisions that had to agree, and any
+             change to the icon size or the field height broke one of them. -->
+        <SearchField
+          v-if="search"
+          v-model="query"
+          :placeholder="placeholder"
+          class="w-[21rem] min-w-40 max-w-full shrink"
+        >
+          <template #icon>
+            <Search :size="14" weight="Linear" />
+          </template>
+        </SearchField>
+        <!--
+          Every facet at once, committed with Apply.
+
+          It was a menu of submenus: one facet visible at a time, one value
+          each, and the answer to "what is filtering right now?" only available
+          by opening all of them in turn. The panel lets a facet hold more than
+          one value and does not move the list until the reader is done
+          deciding.
+
+          `panes` rather than the automatic choice. Auto reads the numbers - it
+          switches past four facets or eight options - and today's surfaces sit
+          just under both thresholds, so they would draw as columns while the
+          same control on the pattern page draws as panes. A table that gains a
+          fifth facet would then change shape on its own. One layout, whatever
+          the surface happens to declare this week.
+        -->
+        <FilterPanel
+          v-if="filterFacets.length"
+          :model-value="panelSelection"
+          :facets="filterFacets"
+          layout="panes"
+          :label="t('shared.datatable.toolbar.filter.action')"
+          :apply-label="t('shared.datatable.toolbar.filter.apply')"
+          :reset-label="t('shared.datatable.toolbar.filter.reset')"
+          @update:model-value="applyPanelSelection"
+        >
+          <template #icon>
+            <Filter :size="14" weight="BoldDuotone" />
+          </template>
+        </FilterPanel>
         <FilterMenu
           v-if="filter"
           :width="typeof filter === 'object' ? filter.width : void 0"
           :active="typeof filter === 'object' ? filter.active : void 0"
+          :count="typeof filter === 'object' ? filter.count : void 0"
         >
           <slot name="filter-menu" />
         </FilterMenu>
         <SortMenu v-if="showSortMenu" v-model="sort" :columns="sortableColumns" />
-        <ColumnsMenu
+        <!--
+          The design system's picker, drag and drop included. It was a local
+          copy that did its own dragging with the browser's own drag events,
+          which cannot say where a row may GO: a row could be pulled out over
+          the table behind the popover and dropped there. Only the rows of this
+          list register as drop targets now, and the edge the pointer is nearest
+          decides the index rather than arithmetic on a row height that a
+          wrapped label invalidates.
+        -->
+        <ColumnPicker
           v-if="columnsMenu && showTable"
-          :columns="menuColumns"
-          :visible="visibleKeys"
-          @toggle="toggleColumn"
-        />
+          :model-value="pickerColumns"
+          :label="t('shared.datatable.columnsmenu.tooltip')"
+          :heading="t('shared.datatable.columnsmenu.heading')"
+          @update:model-value="onPickerUpdate"
+        >
+          <template #icon>
+            <Columns :size="15" weight="BoldDuotone" />
+          </template>
+          <template #handle>
+            <ListArrowDownMinimalistic :size="15" weight="Linear" />
+          </template>
+          <template #visible>
+            <Eye :size="16" weight="Linear" />
+          </template>
+          <template #hidden>
+            <EyeClosed :size="16" weight="Linear" />
+          </template>
+        </ColumnPicker>
+        <!-- Market scope — the surface passes the shared MarketScopeToggle in;
+             the row position is fixed here. -->
+        <slot name="scope" />
+        <!-- The editor's device switch, which is the right shape wherever the
+             choice changes what you are LOOKING AT rather than which rows. -->
+        <SegmentedToggle v-if="viewModes?.length" v-model="viewMode" variant="inset">
+          <SegmentedToggleItem
+            v-for="m in viewModes"
+            :key="m.value"
+            :value="m.value"
+            :aria-label="m.label"
+          >
+            <component :is="m.icon" v-if="m.icon" :size="14" weight="Bold" />
+            <template v-if="!m.icon">{{ m.label }}</template>
+          </SegmentedToggleItem>
+        </SegmentedToggle>
+        <SavedViewsMenu v-if="savedViews" :config="savedViews" />
         <slot name="toolbar-left" />
       </div>
-      <div class="flex items-center gap-1.5 ml-auto shrink-0">
+      <div class="flex items-center gap-2 ml-auto shrink-0">
         <slot name="toolbar-right" />
-        <SavedViewsMenu v-if="savedViews" :config="savedViews" />
-        <!-- Market scope ("Showing: … / All markets") — the surface passes the
-             shared MarketScopeToggle in; the row position is fixed here. -->
-        <slot name="scope" />
-        <ViewModeSwitch v-if="viewModes?.length" v-model="viewMode" :modes="viewModes" />
         <slot name="actions" />
       </div>
     </div>
@@ -358,10 +442,19 @@ function defaultCell(col, row) {
       <slot name="view" :rows="displayedRows" :loading="loading" />
     </div>
 
+    <!-- The header and the rows share one box so their columns cannot drift.
+         `display: contents` when scrolling is off makes this element vanish
+         from layout entirely, so every table that has not asked for it renders
+         exactly as it did. -->
+    <div
+      :class="scrollBody ? 'min-h-0 overflow-y-auto' : 'contents'"
+      :style="scrollStyle"
+    >
     <!-- Header row -------------------------------------------------- -->
     <div
       v-if="showTable"
       class="grid items-center gap-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' : ''"
       :style="gridTemplate"
     >
       <div
@@ -383,7 +476,11 @@ function defaultCell(col, row) {
           >
             {{ col.label }}
           </SortHeader>
-          <span v-else>{{ col.label }}</span>
+          <!-- `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="normal-case">{{ col.label }}</span>
         </slot>
       </div>
     </div>
@@ -461,6 +558,8 @@ function defaultCell(col, row) {
       </slot>
     </div>
 
+    </div>
+
     <!-- Footer ------------------------------------------------------- -->
     <div
       v-if="showFooter"