@revenexx/studio-shared 0.3.2 → 0.3.3

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

@@ -19,7 +19,10 @@ import {
 import { orderColumnsBy } from "../../lib/columnOrder";
 import { initiallyHidden, visibleColumnsOf } from "../../lib/columnVisibility";
 import { countByValue, matchesFilter } from "../../lib/dataTableFilters";
+import { gridTemplateColumns } from "../../lib/gridTracks";
 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 SortMenu from "./SortMenu.vue";
@@ -31,10 +34,12 @@ const props = defineProps({
   columnsMenu: { type: Boolean, required: false, default: true },
   filter: { type: [Boolean, Object], required: false, default: false },
   filterTabs: { type: [Object, Array], required: false },
+  facets: { type: Array, required: false, default: () => [] },
+  chipFacetLabels: { type: Boolean, required: false, default: false },
   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 },
+  scrollBody: { type: [Boolean, String, Object], required: false },
   pagination: { type: [Boolean, Object], required: false, default: true },
   defaultSort: { type: Object, required: false },
   serverMode: { type: Boolean, required: false, default: false },
@@ -56,6 +61,8 @@ 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 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 };
 }
@@ -233,10 +240,8 @@ function rowKeyFor(row) {
   if (typeof props.rowKey === "function") return props.rowKey(row);
   return row[props.rowKey];
 }
-const gridTemplate = computed(() => {
-  const tracks = visibleColumns.value.map((c) => c.width ?? "minmax(0,1fr)");
-  return `grid-template-columns: ${tracks.join(" ")};`;
-});
+const gridTemplate = computed(() => `grid-template-columns: ${gridTemplateColumns(visibleColumns.value.map((c) => c.width))};`);
+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")
 );
@@ -249,7 +254,7 @@ 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"]
 );
 const railLabel = computed(
-  () => (typeof props.rail === "object" ? props.rail.label : void 0) ?? t("shared.datatable.toolbar.rail.label.default")
+  () => (typeof props.rail === "object" ? props.rail.label : void 0) ?? null
 );
 const showTable = computed(() => !props.viewModes?.length || viewMode.value === "list");
 const sortableColumns = computed(() => props.columns.filter((c) => c.sortable));
@@ -257,8 +262,121 @@ const showSortMenu = computed(() => !showTable.value && sortableColumns.value.le
 function cellIconFor(col) {
   return col.cellIcon ?? null;
 }
+const scrollEl = ref(null);
+const footerEl = ref(null);
+const fitHeight = ref(null);
+const MIN_FIT_PX = 220;
+const BOTTOM_GAP_PX = 16;
+function scrollParent(el) {
+  let node = el.parentElement;
+  while (node && node !== document.body) {
+    const overflow = getComputedStyle(node).overflowY;
+    if (overflow === "auto" || overflow === "scroll") return node;
+    node = node.parentElement;
+  }
+  return document.documentElement;
+}
+function measureFit() {
+  if (props.scrollBody !== "fit" || !import.meta.client) return;
+  const el = scrollEl.value;
+  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 overflow = Math.max(container.scrollHeight - container.clientHeight, 0);
+  const available = Math.max(
+    Math.floor(container.clientHeight - offset - reserve - overflow) - 1,
+    MIN_FIT_PX
+  );
+  const current = fitHeight.value ? Number.parseInt(fitHeight.value, 10) : null;
+  if (current !== null && Math.abs(current - available) < 8) return;
+  fitHeight.value = `${available}px`;
+}
+if (import.meta.client) {
+  let frame = 0;
+  let timers = [];
+  const schedule = () => {
+    if (frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      measureFit();
+    });
+  };
+  onMounted(() => {
+    measureFit();
+    window.addEventListener("resize", schedule);
+    timers = [setTimeout(schedule, 250), setTimeout(schedule, 1200)];
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", schedule);
+    for (const timer of timers) clearTimeout(timer);
+    timers = [];
+    if (frame) cancelAnimationFrame(frame);
+  });
+  watch(() => [props.data.length, props.loading], () => nextTick(() => {
+    schedule();
+    syncThumb();
+  }));
+  onMounted(() => {
+    nextTick(syncThumb);
+    window.addEventListener("resize", syncThumb);
+  });
+  onBeforeUnmount(() => window.removeEventListener("resize", syncThumb));
+  watch(fitHeight, () => nextTick(syncThumb));
+}
+const headerRowEl = ref(null);
+const headerHeight = ref(0);
+const rowsOverflow = ref(false);
+const thumbHeight = ref(0);
+const thumbOffset = ref(0);
+const MIN_THUMB_PX = 32;
+const drawnBarSupported = import.meta.client && typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("selector(::-webkit-scrollbar)");
+function syncThumb() {
+  const el = scrollEl.value;
+  if (!props.scrollBody || !el) return;
+  headerHeight.value = headerRowEl.value?.offsetHeight ?? 0;
+  const trackHeight = el.clientHeight - headerHeight.value;
+  const scrollable = el.scrollHeight - el.clientHeight;
+  rowsOverflow.value = drawnBarSupported && scrollable > 1 && trackHeight > MIN_THUMB_PX;
+  if (!rowsOverflow.value) return;
+  const ratio = el.clientHeight / el.scrollHeight;
+  const height = Math.max(Math.round(trackHeight * ratio), MIN_THUMB_PX);
+  thumbHeight.value = height;
+  thumbOffset.value = Math.round(el.scrollTop / scrollable * (trackHeight - height));
+}
+function onRowsScroll() {
+  syncThumb();
+}
+function startThumbDrag(event) {
+  const el = scrollEl.value;
+  if (!el) return;
+  event.preventDefault();
+  const startY = event.clientY;
+  const startScroll = el.scrollTop;
+  const trackHeight = el.clientHeight - headerHeight.value;
+  const scrollable = el.scrollHeight - el.clientHeight;
+  const travel = trackHeight - thumbHeight.value;
+  if (travel <= 0) return;
+  const target = event.target;
+  target.setPointerCapture(event.pointerId);
+  const move = (e) => {
+    el.scrollTop = startScroll + (e.clientY - startY) / travel * scrollable;
+  };
+  const up = (e) => {
+    target.releasePointerCapture(e.pointerId);
+    target.removeEventListener("pointermove", move);
+    target.removeEventListener("pointerup", up);
+    target.removeEventListener("pointercancel", up);
+  };
+  target.addEventListener("pointermove", move);
+  target.addEventListener("pointerup", up);
+  target.addEventListener("pointercancel", up);
+}
 const scrollStyle = computed(() => {
   if (!props.scrollBody) return void 0;
+  if (props.scrollBody === "fit") {
+    return fitHeight.value ? { maxHeight: fitHeight.value } : void 0;
+  }
   const configured = typeof props.scrollBody === "object" ? props.scrollBody.maxHeight : void 0;
   return { maxHeight: configured ?? "calc(100vh - 22rem)" };
 });
@@ -329,13 +447,16 @@ function defaultCell(col, row) {
           variant="outline"
           size="sm"
           class="h-7 shrink-0 gap-1.5 text-sm"
-          :class="railOpen ? 'border-primary/30 text-primary' : ''"
+          :class="[
+  railOpen ? 'border-primary/30 text-primary' : '',
+  railLabel ? '' : 'w-7 px-0 justify-center'
+]"
           :aria-pressed="railOpen"
-          :aria-label="railOpen ? t('shared.datatable.toolbar.rail.aria.hide', { label: railLabel }) : t('shared.datatable.toolbar.rail.aria.show', { label: railLabel })"
+          :aria-label="railLabel ? railOpen ? t('shared.datatable.toolbar.rail.aria.hide', { label: railLabel }) : t('shared.datatable.toolbar.rail.aria.show', { label: railLabel }) : railOpen ? t('shared.datatable.toolbar.rail.aria.hideUnnamed') : t('shared.datatable.toolbar.rail.aria.showUnnamed')"
           @click="railOpen = !railOpen"
         >
           <SidebarMinimalistic :size="14" />
-          {{ railLabel }}
+          <template v-if="railLabel">{{ railLabel }}</template>
         </Button>
         <!-- Shrinks (never wraps the row) once the toolbar carries scope /
              view-mode / saved-view controls next to it.
@@ -384,8 +505,20 @@ function defaultCell(col, row) {
             <Filter :size="14" weight="BoldDuotone" />
           </template>
         </FilterPanel>
+        <!--
+          The one filter control, for a surface that owns its own query.
+
+          Drawn in the same slot as the other two so a surface never shows two
+          filter triggers: `facets` and `filter` are alternatives, and
+          `filterTabs` is the in-memory path this replaces.
+        -->
+        <FacetPanel
+          v-if="panelFacets.length"
+          v-model="facetSelection"
+          :facets="facets"
+        />
         <FilterMenu
-          v-if="filter"
+          v-if="filter && !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"
@@ -422,23 +555,51 @@ function defaultCell(col, row) {
             <EyeClosed :size="16" weight="Linear" />
           </template>
         </ColumnPicker>
+        <!--
+          Saved views, beside the columns picker rather than out past the market
+          scope and the view-mode switch.
+
+          It belongs with what it saves. Filters, sort and columns are the three
+          things a view is made of, so the control that names one sits at the end
+          of that group — not after the market scope, which is not part of a
+          view, or the view-mode switch, which is about what you are looking at.
+        -->
+        <SavedViewsMenu v-if="savedViews" :config="savedViews" />
         <!-- 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">
+          <!--
+            Violet on hover, and violet while it is the one in effect — the
+            same language the filter trigger, the column picker and the saved
+            views speak two controls to the left. The track's own variant only
+            lifts the active segment onto a white pill, which says WHICH is
+            picked but not that the row is a set of live controls.
+
+            The hover is written against `data-[state=off]` and marked
+            important because the design system's own toggle already ships
+            `data-[state=off]:hover:text-foreground`. A plain `hover:` loses to
+            it on specificity, and matching the specificity alone would leave
+            the winner to whatever order Tailwind happened to emit the two
+            utilities in — a coin toss that reads as a bug the day it lands the
+            other way. Delete the `!` if the toggle's own hover ever goes violet.
+
+            `aria-label` because these are icon-only: the mode still has to
+            announce itself.
+          -->
           <SegmentedToggleItem
             v-for="m in viewModes"
             :key="m.value"
             :value="m.value"
             :aria-label="m.label"
+            class="transition-colors data-[state=on]:text-primary data-[state=off]:hover:text-primary!"
           >
             <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-2 ml-auto shrink-0">
@@ -447,15 +608,40 @@ function defaultCell(col, row) {
       </div>
     </div>
 
+    <!--
+      What is filtering right now. Not optional beside a paned panel: with it
+      closed, a count on an icon says that something narrows the list and never
+      what.
+    -->
+    <FacetChips
+      v-if="facets.length"
+      v-model="facetSelection"
+      :facets="facets"
+      :show-facet="chipFacetLabels"
+    />
+
     <!-- Alternate view mode (gallery, board, …) — same toolbar, same footer. -->
     <div v-if="!showTable" class="border-t border-black/[0.04] bg-white/55">
       <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.
+    <!-- Two boxes: one that scrolls, and the table itself.
+
+         The table is ONE GRID and the rows are subgrids of it (`SUBGRID_ROW`),
+         which is what keeps a heading over its own column. It used to be a grid
+         per row, and a content-sized track then measured itself separately in
+         each one — see `SUBGRID_ROW` for what that did to every list with row
+         actions.
+
+         The scrolling is the outer box's job, and it has to be, because the
+         grid carries `min-w-min`: a box that grows to its own content cannot
+         also be the thing that scrolls it. The panel around them clips
+         (`overflow-hidden`, for the rounded corners), so without this a table
+         whose declared widths outgrow the panel simply lost the excess.
+
+         The inner element used to be `display: contents` when scrolling was
+         off, which made it vanish from layout — and a box that is not in the
+         layout can be neither a grid nor a scroller.
 
          IT IS ALSO THE TABLE. The box that holds the header and the rows and
          nothing else is the only element in this component that can carry the
@@ -470,19 +656,27 @@ 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
-      :role="showTable ? 'table' : void 0"
-      :aria-busy="showTable && loading ? 'true' : void 0"
-      :class="scrollBody ? 'min-h-0 overflow-y-auto' : 'contents'"
+      ref="scrollEl"
+      :class="scrollBody ? 'rx-rows min-h-0 overflow-auto' : 'overflow-x-auto'"
       :style="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"
+      >
     <!-- Header row -------------------------------------------------- -->
     <div
       v-if="showTable"
+      ref="headerRowEl"
       role="row"
-      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="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' : ''"
-      :style="gridTemplate"
+      :style="SUBGRID_ROW"
     >
       <!-- `columnheader` is what names every cell underneath it, so this is
            the half of the fix that does the work. `aria-sort` goes with it:
@@ -494,6 +688,8 @@ function defaultCell(col, row) {
         :key="col.key"
         role="columnheader"
         :aria-sort="ariaSortFor(col)"
+        :title="col.label || void 0"
+        class="min-w-0"
         :class="col.alignRight ? 'text-right' : ''"
       >
         <!-- `#header-<key>` lets a page take over a header cell (e.g. a
@@ -514,7 +710,7 @@ function defaultCell(col, row) {
                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>
+          <span v-else class="block truncate normal-case">{{ col.label }}</span>
         </slot>
       </div>
     </div>
@@ -527,8 +723,11 @@ function defaultCell(col, row) {
       <div
         v-if="entry.kind === 'header'"
         role="row"
-        class="border-t border-black/[0.04] bg-gray-100/70 px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
+        class="col-[1/-1] border-t border-black/[0.04] bg-gray-100/70 px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
       >
+        <!-- Spans every column like the rows do, so a table wide enough to
+             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="visibleColumns.length" class="flex items-center gap-2">
           {{ entry.label }}
           <span class="tabular-nums normal-case text-muted-foreground/70">{{ entry.count }}</span>
@@ -537,8 +736,8 @@ function defaultCell(col, row) {
       <div
         v-else
         role="row"
-        class="group grid items-center gap-2 border-t border-black/[0.04] px-4 py-3 cursor-pointer bg-gray-50 transition-colors"
-        :style="gridTemplate"
+        class="group grid items-center gap-x-2 border-t border-black/[0.04] px-4 py-3 cursor-pointer bg-gray-50 transition-colors"
+        :style="SUBGRID_ROW"
         @click="emit('rowClick', entry.row)"
       >
         <div
@@ -578,8 +777,8 @@ function defaultCell(col, row) {
         v-for="n in 6"
         :key="`sk-${n}`"
         aria-hidden="true"
-        class="grid items-center gap-2 border-t border-black/[0.04] bg-gray-50 px-4 py-3"
-        :style="gridTemplate"
+        class="grid items-center gap-x-2 border-t border-black/[0.04] bg-gray-50 px-4 py-3"
+        :style="SUBGRID_ROW"
       >
         <div
           v-for="col in visibleColumns"
@@ -598,7 +797,7 @@ function defaultCell(col, row) {
     <div
       v-if="showTable && !displayedRows.length && !loading"
       role="row"
-      class="px-3 py-8 text-center text-sm text-muted-foreground"
+      class="col-[1/-1] px-3 py-8 text-center text-sm text-muted-foreground"
     >
       <div role="cell" :aria-colspan="visibleColumns.length">
         <slot name="empty">
@@ -607,11 +806,33 @@ function defaultCell(col, row) {
       </div>
     </div>
 
+      </div>
+    </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
+           the head and the rows are one grid and a `max-content` track resolves
+           per grid (PE-610). So the native bar runs beside the head, which is
+           not where a bar over the ROWS belongs. This one starts under the
+           head, ends at the footer, and drives the same native scrolling. -->
+      <div
+        v-if="scrollBody && rowsOverflow"
+        class="pointer-events-none absolute right-0 z-20 w-3.5"
+        :style="{ top: `${headerHeight}px`, bottom: '0px' }"
+      >
+        <div
+          class="rx-thumb pointer-events-auto absolute right-[3px] w-2 cursor-default rounded-full bg-[rgb(11_5_34_/_0.18)] transition-colors hover:bg-[rgb(11_5_34_/_0.32)]"
+          :style="{ height: `${thumbHeight}px`, transform: `translateY(${thumbOffset}px)` }"
+          @pointerdown="startThumbDrag"
+        />
+      </div>
     </div>
 
     <!-- Footer ------------------------------------------------------- -->
     <div
       v-if="showFooter"
+      ref="footerEl"
       class="flex items-center justify-between gap-2 border-t border-gray-200 bg-white/55 backdrop-blur-md px-4 py-3 text-sm text-muted-foreground/60"
     >
       <div class="flex items-center gap-2.5">
@@ -656,3 +877,7 @@ function defaultCell(col, row) {
     </div>
   </div>
 </template>
+
+<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>

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

@@ -1,3 +1,4 @@
+import type { Facet, FacetSelection } from '../../lib/facets.js';
 import type { DataTableColumn, DataTableFilter, DataTableRail, DataTableSavedViews, DataTableState, DataTableViewMode, RowKey, SortState } from './types.js';
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
@@ -5,9 +6,10 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         readonly "onUpdate:page"?: ((value: number) => any) | undefined;
         readonly "onUpdate:viewMode"?: ((value: string) => any) | undefined;
         readonly "onUpdate:railOpen"?: ((value: boolean) => any) | undefined;
+        readonly "onUpdate:facetSelection"?: ((value: FacetSelection) => any) | undefined;
         readonly onRowClick?: ((row: T) => any) | undefined;
         readonly onStateChange?: ((state: DataTableState) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:sort" | "onUpdate:page" | "onUpdate:viewMode" | "onUpdate:railOpen" | "onRowClick" | "onStateChange"> & ({
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:sort" | "onUpdate:page" | "onUpdate:viewMode" | "onUpdate:railOpen" | "onUpdate:facetSelection" | "onRowClick" | "onStateChange"> & ({
         data: T[];
         columns: DataTableColumn<T>[];
         rowKey: RowKey<T>;
@@ -28,6 +30,25 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         /** Built-in status/dimension filter pills (static mode). One dimension, or
          *  several (each renders as its own sub-menu). */
         filterTabs?: DataTableFilter<T> | DataTableFilter<T>[];
+        /**
+         * The surface's declared dimensions, as one facet model (PE-6xx).
+         *
+         * The THIRD filter path, and the one the others are being folded into. It
+         * differs from `filterTabs` in who does the work: those are filtered in
+         * memory here, which a server-paged list cannot use — a facet count taken
+         * over one page of fifty rows out of twenty-three thousand is a number
+         * nobody can reconcile with the table under it. Here the surface owns the
+         * query and the counts, and this component only draws the control and hands
+         * back a committed selection (`v-model:facet-selection`).
+         *
+         * EVERY declared dimension lives in this one panel, committed together, and
+         * reads back in one chip strip under the toolbar. There is deliberately no
+         * second placement: a tree pinned in a left column beside a panel is two
+         * places to look and two commit rules for one question.
+         */
+        facets?: Facet[];
+        /** Say which facet each chip belongs to (see `FacetChips.showFacet`). */
+        chipFacetLabels?: boolean;
         /** Saved views control — the surface supplies snapshot/apply, the table
          *  owns the control, the storage and the dialogs. */
         savedViews?: DataTableSavedViews | null;
@@ -52,8 +73,13 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
          * 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.
+         *
+         * `'fit'` measures instead of guessing: the rows get whatever height is left
+         * in the surrounding scroll container, so the table ends where the page ends
+         * and nothing below it is pushed out of sight. A short list still ends after
+         * its last row — the measurement is a MAXIMUM, not a height.
          */
-        scrollBody?: boolean | {
+        scrollBody?: boolean | "fit" | {
             maxHeight?: string;
         };
         pagination?: boolean | {
@@ -74,6 +100,13 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         page?: number;
         viewMode?: string;
         railOpen?: boolean;
+        /**
+         * The committed facet selection. Two-way so a chip removed under the toolbar,
+         * a facet picked in the surface's pinned rail and the panel's own Apply all
+         * write to one place — and so the surface can seed it from a saved view or a
+         * URL without this component holding a second copy to drift from.
+         */
+        facetSelection?: FacetSelection;
     }) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
@@ -101,7 +134,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     } & {
         empty?: (props: {}) => any;
     };
-    emit: (((evt: "rowClick", row: T) => void) & ((evt: "stateChange", state: DataTableState) => void)) & (((evt: "update:sort", value: SortState) => void) & ((evt: "update:page", value: number) => void) & ((evt: "update:viewMode", value: string) => void) & ((evt: "update:railOpen", value: boolean) => void));
+    emit: (((evt: "rowClick", row: T) => void) & ((evt: "stateChange", state: DataTableState) => void)) & (((evt: "update:sort", value: SortState) => void) & ((evt: "update:page", value: number) => void) & ((evt: "update:viewMode", value: string) => void) & ((evt: "update:railOpen", value: boolean) => void) & ((evt: "update:facetSelection", value: FacetSelection) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -0,0 +1,16 @@
+import type { Facet, FacetSelection } from '../../lib/facets.js';
+type __VLS_Props = {
+    facets: Facet[];
+    modelValue: FacetSelection;
+    /**
+     * Say which facet each chip belongs to. On where "Draft" could be a status or
+     * a lifecycle; off where the values speak for themselves.
+     */
+    showFacet?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: FacetSelection) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FacetSelection) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,72 @@
+<script setup>
+import { computed } from "vue";
+import { CloseCircle } from "#solar-icons";
+import { dateTimeFormat } from "../../lib/formatBridge";
+import { appliedFacets, clearFacetValue } from "../../lib/facets";
+const props = defineProps({
+  facets: { type: Array, required: true },
+  modelValue: { type: Object, required: true },
+  showFacet: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const t = useT();
+function formatRange(range) {
+  const fmt = dateTimeFormat({ dateStyle: "medium" });
+  const one = (value) => {
+    if (!value) return null;
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? value : fmt.format(date);
+  };
+  const from = one(range.from);
+  const to = one(range.to);
+  if (from && to) return `${from} \u2013 ${to}`;
+  if (from) return t("shared.facetchips.range.since", { date: from });
+  return t("shared.facetchips.range.until", { date: to ?? "" });
+}
+const chips = computed(() => appliedFacets(props.facets, props.modelValue, {
+  range: formatRange,
+  text: (value) => `\u201C${value}\u201D`
+}));
+function remove(chip) {
+  emit("update:modelValue", clearFacetValue(props.modelValue, chip.facetKey, chip.value));
+}
+function clearAll() {
+  emit("update:modelValue", {});
+}
+</script>
+
+<template>
+  <div
+    v-if="chips.length"
+    class="flex flex-wrap items-center gap-1.5 border-t border-black/[0.04] bg-white px-4 py-2.5"
+    role="group"
+    :aria-label="t('shared.facetchips.aria')"
+  >
+    <span
+      v-for="chip in chips"
+      :key="chip.id"
+      class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 py-0.5 pr-1 pl-2.5 text-xs font-medium text-primary"
+    >
+      <span v-if="showFacet" class="font-normal opacity-60">{{ chip.facetLabel }}</span>
+      <span class="max-w-60 truncate">{{ chip.label }}</span>
+      <button
+        type="button"
+        class="cursor-pointer rounded-full opacity-60 transition-opacity hover:opacity-100"
+        :aria-label="t('shared.facetchips.remove', { facet: chip.facetLabel, value: chip.label })"
+        @click="remove(chip)"
+      >
+        <CloseCircle :size="13" weight="Bold" />
+      </button>
+    </span>
+    <!-- Only past two. With one chip beside it, "clear all" is a second control
+         for what the cross next to it already does. -->
+    <button
+      v-if="chips.length > 1"
+      type="button"
+      class="ml-1 cursor-pointer text-xs text-muted-foreground underline decoration-from-font underline-offset-2 hover:text-foreground"
+      @click="clearAll"
+    >
+      {{ t("shared.facetchips.clearAll") }}
+    </button>
+  </div>
+</template>

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

@@ -0,0 +1,16 @@
+import type { Facet, FacetSelection } from '../../lib/facets.js';
+type __VLS_Props = {
+    facets: Facet[];
+    modelValue: FacetSelection;
+    /**
+     * Say which facet each chip belongs to. On where "Draft" could be a status or
+     * a lifecycle; off where the values speak for themselves.
+     */
+    showFacet?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: FacetSelection) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FacetSelection) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,20 @@
+import type { Facet, FacetSelection } from '../../lib/facets.js';
+type __VLS_Props = {
+    /** Every dimension this list can be narrowed by. All of them live here. */
+    facets: Facet[];
+    /** What is applied right now. */
+    modelValue: FacetSelection;
+    size?: 'sm' | 'default';
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    apply: (value: FacetSelection) => any;
+    "update:modelValue": (value: FacetSelection) => any;
+    reset: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onApply?: ((value: FacetSelection) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FacetSelection) => any) | undefined;
+    onReset?: (() => any) | undefined;
+}>, {
+    size: "sm" | "default";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;