@revenexx/studio-shared 0.3.3 → 0.4.0

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

@@ -1,18 +1,9 @@
-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<{
-        readonly "onUpdate:sort"?: ((value: SortState) => any) | undefined;
-        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" | "onUpdate:facetSelection" | "onRowClick" | "onStateChange"> & ({
+import { Eye } from '#solar-icons';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         data: T[];
-        columns: DataTableColumn<T>[];
-        rowKey: RowKey<T>;
+        columns: Eye<T>[];
+        rowKey: Eye<T>;
         /** `label` is the field's accessible name; it defaults to the placeholder
          *  where the surface wrote one (see `searchLabel`). */
         search?: boolean | {
@@ -29,7 +20,7 @@ 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>[];
+        filterTabs?: Eye<T> | Eye<T>[];
         /**
          * The surface's declared dimensions, as one facet model (PE-6xx).
          *
@@ -46,17 +37,17 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
          * 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[];
+        facets?: Eye[];
         /** 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;
+        savedViews?: Eye | null;
         /** View-mode switch (e.g. List | Gallery). Any mode other than `list`
          *  renders the `#view` slot in place of the table body. */
-        viewModes?: DataTableViewMode[] | null;
+        viewModes?: Eye[] | null;
         /** Collapse handle for the surface's left rail (see `ListSurface`). */
-        rail?: boolean | DataTableRail;
+        rail?: boolean | Eye;
         /**
          * Scroll the ROWS inside the table instead of the page.
          *
@@ -95,8 +86,32 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         emptyText?: string;
         groupBy?: ((row: T) => string[]) | null;
         groupEmptyLabel?: string;
+        /** The row whose record is open beside the table (a DetailSheet), marked so
+         *  reading down the list keeps the place visible (PE-690). */
+        activeRowKey?: string | number | null;
+        /**
+         * A row's own tint — a quantity tier set apart under the SKU it belongs to.
+         * Replaces the row's default ground rather than stacking on it: two
+         * translucent backgrounds on one element are whichever Tailwind emitted last.
+         */
+        rowClass?: ((row: T) => string | null | undefined) | null;
+        /**
+         * Rows the operator orders by dragging (PE-952). Draws a handle in a leading
+         * column; a drop — or the arrow keys on a focused handle — emits `rowMove`
+         * with the new order. The table writes nothing: what a position MEANS, and
+         * which rows have to be written for it, is the surface's to decide.
+         */
+        reorderable?: boolean;
+        /**
+         * Why the handles are off right now, or null when they are on. The surface
+         * knows the cases this component cannot see — a sort that is not the
+         * sequence, a write still in flight. The table adds its own: a search, a
+         * filter or a grouping, under any of which "the row above" is not the row
+         * above in the sequence.
+         */
+        reorderDisabled?: string | null;
     } & {
-        sort?: SortState;
+        sort?: Eye;
         page?: number;
         viewMode?: string;
         railOpen?: boolean;
@@ -106,14 +121,31 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
          * 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;
+        facetSelection?: Eye;
+    }) & {
+        onRowClick?: ((row: T) => any) | undefined;
+        onStateChange?: ((state: DataTableState) => any) | undefined;
+        onOrderChange?: ((keys: (string | number)[]) => any) | undefined;
+        onRowMove?: ((move: {
+            key: string | number;
+            from: number;
+            to: number;
+            keys: (string | number)[];
+        }) => any) | undefined;
+        "onUpdate:sort"?: ((value: SortState) => any) | undefined;
+        "onUpdate:page"?: ((value: number) => any) | undefined;
+        "onUpdate:viewMode"?: ((value: string) => any) | undefined;
+        "onUpdate:railOpen"?: ((value: boolean) => any) | undefined;
+        "onUpdate:facetSelection"?: ((value: FacetSelection) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: {
-        [x: string]: ((props: {}) => any) | undefined;
+        [x: `header-${any}`]: ((props: {}) => any) | undefined;
     } & {
-        [x: string]: ((props: {
+        [x: `cell-${any}`]: ((props: {
             row: any;
         }) => any) | undefined;
     } & {
@@ -129,16 +161,28 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     } & {
         view?: (props: {
             rows: any;
-            loading: any;
+            loading: boolean;
         }) => any;
     } & {
-        empty?: (props: {}) => any;
+        empty?: (props: {
+            query: any;
+            filters: any;
+            clear: () => void;
+        }) => 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) & ((evt: "update:facetSelection", value: FacetSelection) => void));
+    emit: (((evt: "rowClick", row: T) => void) & ((evt: "stateChange", state: DataTableState) => void) & ((evt: "orderChange", keys: (string | number)[]) => void) & ((evt: "rowMove", move: {
+        key: string | number;
+        from: number;
+        to: number;
+        keys: (string | number)[];
+    }) => void)) & (((event: "update:sort", value: SortState) => void) & ((event: "update:page", value: number) => void) & ((event: "update:viewMode", value: string) => void) & ((event: "update:railOpen", value: boolean) => void) & ((event: "update:facetSelection", value: FacetSelection) => void));
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
-} & {};
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -3,6 +3,7 @@ import {
   Eye,
   EyeClosed,
   Filter,
+  HamburgerMenu as DragHandle,
   ListArrowDownMinimalistic,
   Magnifier as Search,
   SidebarMinimalistic,
@@ -20,6 +21,8 @@ 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 { dropEdge, dropTargetIndex, moveKey, stepTarget } from "../../lib/rowMove";
 import SortHeader from "../Shared/SortHeader.vue";
 import FacetChips from "./FacetChips.vue";
 import FacetPanel from "./FacetPanel.vue";
@@ -47,9 +50,13 @@ const props = defineProps({
   loading: { type: Boolean, required: false, default: false },
   emptyText: { type: String, required: false },
   groupBy: { type: [Function, null], required: false, default: null },
-  groupEmptyLabel: { type: String, required: false }
+  groupEmptyLabel: { type: String, required: false },
+  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 }
 });
-const emit = defineEmits(["rowClick", "stateChange"]);
+const emit = defineEmits(["rowClick", "stateChange", "orderChange", "rowMove"]);
 const t = useT();
 const query = ref("");
 const sort = defineModel("sort", { type: Object, ...{
@@ -164,9 +171,24 @@ const sorted = computed(() => {
     return 0;
   });
 });
+watch(sorted, (rows) => emit("orderChange", rows.map(rowKeyFor)), { immediate: true });
 const totalCount = computed(
   () => props.serverMode ? props.total ?? props.data.length : sorted.value.length
 );
+const activeNarrowing = computed(() => filterDims.value.map((d) => ({
+  label: d.label,
+  values: (activeFilters.value[d.key] ?? []).map((v) => d.options.find((o) => o.value === v)?.label ?? v)
+})).filter((d) => d.values.length > 0));
+function clearNarrowing() {
+  query.value = "";
+  activeFilters.value = {};
+  facetSelection.value = {};
+}
+const liveStatus = computed(() => {
+  if (!showTable.value) return "";
+  if (props.loading) return t("shared.datatable.state.loading");
+  return totalCount.value === 0 ? t("shared.datatable.footer.noresults") : t("shared.datatable.footer.showing", { start: rangeStart.value, end: rangeEnd.value, total: totalCount.value });
+});
 const paginated = computed(() => {
   if (props.serverMode || !props.pagination) return sorted.value;
   const start = page.value * pageSize.value;
@@ -240,7 +262,7 @@ function rowKeyFor(row) {
   if (typeof props.rowKey === "function") return props.rowKey(row);
   return row[props.rowKey];
 }
-const gridTemplate = computed(() => `grid-template-columns: ${gridTemplateColumns(visibleColumns.value.map((c) => c.width))};`);
+const gridTemplate = computed(() => `grid-template-columns: ${gridTemplateColumns(renderColumns.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")
@@ -394,6 +416,88 @@ function prevPage() {
 function nextPage() {
   if (page.value < lastPage.value) page.value += 1;
 }
+const MOVE_COLUMN = "__move";
+const renderColumns = computed(() => props.reorderable ? [{ key: MOVE_COLUMN, label: "", width: "max-content" }, ...visibleColumns.value] : visibleColumns.value);
+const reorderBlocked = computed(() => {
+  if (!props.reorderable) return null;
+  if (props.reorderDisabled) return props.reorderDisabled;
+  if (!props.serverMode && query.value.trim()) return t("shared.datatable.reorder.blocked.search");
+  if (Object.values(activeFilters.value).some((v) => v.length)) return t("shared.datatable.reorder.blocked.filter");
+  if (props.groupBy) return t("shared.datatable.reorder.blocked.group");
+  return null;
+});
+const dragKey = ref(null);
+const dropAt = ref(null);
+const moveStatus = ref("");
+function orderedKeys() {
+  return sorted.value.map(rowKeyFor);
+}
+function commitMove(keys, from, to) {
+  emit("rowMove", { key: keys[from], from, to, keys: moveKey(keys, from, to) });
+  moveStatus.value = t("shared.datatable.reorder.moved", { position: to + 1, total: keys.length });
+}
+function finishDrag() {
+  dragKey.value = null;
+  dropAt.value = null;
+}
+function onHandleDragStart(event, row) {
+  if (reorderBlocked.value) {
+    event.preventDefault();
+    return;
+  }
+  const key = rowKeyFor(row);
+  dragKey.value = key;
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", String(key));
+    const rowEl = event.target?.closest('[role="row"]');
+    if (rowEl) event.dataTransfer.setDragImage(rowEl, 16, 16);
+  }
+}
+function onRowDragOver(event, row) {
+  if (dragKey.value == null) return;
+  event.preventDefault();
+  if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+  const rect = event.currentTarget.getBoundingClientRect();
+  dropAt.value = { key: rowKeyFor(row), edge: dropEdge(event.clientY, rect.top, rect.height) };
+}
+function onRowDrop(event, row) {
+  if (dragKey.value == null) return;
+  event.preventDefault();
+  const keys = orderedKeys();
+  const from = keys.indexOf(dragKey.value);
+  const target = keys.indexOf(rowKeyFor(row));
+  const edge = dropAt.value?.edge ?? "before";
+  finishDrag();
+  const to = dropTargetIndex(from, target, edge);
+  if (to !== null) commitMove(keys, from, to);
+}
+function onHandleKeydown(event, row) {
+  if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+  event.preventDefault();
+  if (reorderBlocked.value) return;
+  const keys = orderedKeys();
+  const key = rowKeyFor(row);
+  const from = keys.indexOf(key);
+  const to = stepTarget(from, event.key === "ArrowUp" ? -1 : 1, keys.length);
+  if (to === null) return;
+  commitMove(keys, from, to);
+  const handle = event.currentTarget;
+  const root = handle.closest('[role="table"]');
+  void nextTick(() => setTimeout(() => {
+    const again = root?.querySelector(`[data-move-key="${CSS.escape(String(key))}"]`);
+    again?.focus();
+  }, 0));
+}
+function dropClass(row) {
+  const at = dropAt.value;
+  if (!at || dragKey.value == null || at.key !== rowKeyFor(row)) return "";
+  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]";
+  return props.rowClass?.(row) || "bg-gray-50";
+}
 function defaultCell(col, row) {
   const v = col.sortGetter ? col.sortGetter(row) : row[col.key];
   if (v == null) return "\u2014";
@@ -678,6 +782,11 @@ function defaultCell(col, row) {
       :class="scrollBody ? 'sticky top-0 z-10' : ''"
       :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">
+        <span class="sr-only">{{ t("shared.datatable.reorder.column") }}</span>
+      </div>
       <!-- `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:
            a heading that carries a sort button and says nothing about the
@@ -690,7 +799,7 @@ function defaultCell(col, row) {
         :aria-sort="ariaSortFor(col)"
         :title="col.label || void 0"
         class="min-w-0"
-        :class="col.alignRight ? 'text-right' : ''"
+        :class="col.alignRight ? RIGHT_ALIGNED : ''"
       >
         <!-- `#header-<key>` lets a page take over a header cell (e.g. a
              select-all checkbox in a selection column). Default: sortable
@@ -728,7 +837,7 @@ function defaultCell(col, row) {
         <!-- 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">
+        <div role="cell" :aria-colspan="renderColumns.length" class="flex items-center gap-2">
           {{ entry.label }}
           <span class="tabular-nums normal-case text-muted-foreground/70">{{ entry.count }}</span>
         </div>
@@ -736,16 +845,40 @@ function defaultCell(col, row) {
       <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 bg-gray-50 transition-colors"
+        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' : '']"
+        :aria-current="activeRowKey != null && rowKeyFor(entry.row) === activeRowKey ? 'true' : void 0"
         :style="SUBGRID_ROW"
         @click="emit('rowClick', entry.row)"
+        @dragover="onRowDragOver($event, entry.row)"
+        @drop="onRowDrop($event, entry.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>
+          <button
+            type="button"
+            :data-move-key="String(rowKeyFor(entry.row))"
+            :draggable="!reorderBlocked"
+            :aria-disabled="reorderBlocked ? 'true' : void 0"
+            :aria-label="t('shared.datatable.reorder.handle')"
+            :title="reorderBlocked ?? t('shared.datatable.reorder.hint')"
+            class="inline-flex size-6 items-center justify-center rounded-md text-muted-foreground transition-colors"
+            :class="reorderBlocked ? 'cursor-not-allowed opacity-30' : 'cursor-grab hover:bg-muted hover:text-primary active:cursor-grabbing'"
+            @dragstart="onHandleDragStart($event, entry.row)"
+            @dragend="finishDrag"
+            @keydown="onHandleKeydown($event, entry.row)"
+          >
+            <DragHandle :size="14" weight="Linear" />
+          </button>
+        </div>
         <div
           v-for="col in visibleColumns"
           :key="col.key"
           role="cell"
           class="min-w-0"
-          :class="col.alignRight ? 'text-right' : ''"
+          :class="col.alignRight ? RIGHT_ALIGNED : ''"
         >
           <slot :name="`cell-${col.key}`" :row="entry.row">
             <!-- Primary column: bold record anchor + optional tinted icon tile. -->
@@ -781,7 +914,7 @@ function defaultCell(col, row) {
         :style="SUBGRID_ROW"
       >
         <div
-          v-for="col in visibleColumns"
+          v-for="col in renderColumns"
           :key="col.key"
           :class="col.alignRight ? 'flex justify-end' : ''"
         >
@@ -799,8 +932,8 @@ function defaultCell(col, row) {
       role="row"
       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">
+      <div role="cell" :aria-colspan="renderColumns.length">
+        <slot name="empty" :query="query" :filters="activeNarrowing" :clear="clearNarrowing">
           {{ emptyText ?? t("shared.datatable.empty.default") }}
         </slot>
       </div>
@@ -829,11 +962,18 @@ function defaultCell(col, row) {
       </div>
     </div>
 
+    <!-- Result count, spoken. Outside the table role: a live region is not
+         a row, and the table may own rows only. -->
+    <span role="status" class="sr-only">{{ liveStatus }}</span>
+    <!-- A move, said once: a reader who stepped a row with the arrow keys
+         hears where it landed. -->
+    <span v-if="reorderable" role="status" class="sr-only">{{ moveStatus }}</span>
+
     <!-- 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"
+      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"
     >
       <div class="flex items-center gap-2.5">
         <span class="tabular-nums">
@@ -855,7 +995,7 @@ function defaultCell(col, row) {
         <Button
           variant="outline"
           size="sm"
-          class="h-7 text-sm"
+          class="h-7 text-sm disabled:opacity-100 disabled:text-muted-foreground"
           :disabled="page === 0 || loading"
           @click="prevPage"
         >
@@ -867,7 +1007,7 @@ function defaultCell(col, row) {
         <Button
           variant="outline"
           size="sm"
-          class="h-7 text-sm"
+          class="h-7 text-sm disabled:opacity-100 disabled:text-muted-foreground"
           :disabled="page >= lastPage || loading"
           @click="nextPage"
         >

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

@@ -1,18 +1,9 @@
-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<{
-        readonly "onUpdate:sort"?: ((value: SortState) => any) | undefined;
-        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" | "onUpdate:facetSelection" | "onRowClick" | "onStateChange"> & ({
+import { Eye } from '#solar-icons';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         data: T[];
-        columns: DataTableColumn<T>[];
-        rowKey: RowKey<T>;
+        columns: Eye<T>[];
+        rowKey: Eye<T>;
         /** `label` is the field's accessible name; it defaults to the placeholder
          *  where the surface wrote one (see `searchLabel`). */
         search?: boolean | {
@@ -29,7 +20,7 @@ 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>[];
+        filterTabs?: Eye<T> | Eye<T>[];
         /**
          * The surface's declared dimensions, as one facet model (PE-6xx).
          *
@@ -46,17 +37,17 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
          * 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[];
+        facets?: Eye[];
         /** 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;
+        savedViews?: Eye | null;
         /** View-mode switch (e.g. List | Gallery). Any mode other than `list`
          *  renders the `#view` slot in place of the table body. */
-        viewModes?: DataTableViewMode[] | null;
+        viewModes?: Eye[] | null;
         /** Collapse handle for the surface's left rail (see `ListSurface`). */
-        rail?: boolean | DataTableRail;
+        rail?: boolean | Eye;
         /**
          * Scroll the ROWS inside the table instead of the page.
          *
@@ -95,8 +86,32 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         emptyText?: string;
         groupBy?: ((row: T) => string[]) | null;
         groupEmptyLabel?: string;
+        /** The row whose record is open beside the table (a DetailSheet), marked so
+         *  reading down the list keeps the place visible (PE-690). */
+        activeRowKey?: string | number | null;
+        /**
+         * A row's own tint — a quantity tier set apart under the SKU it belongs to.
+         * Replaces the row's default ground rather than stacking on it: two
+         * translucent backgrounds on one element are whichever Tailwind emitted last.
+         */
+        rowClass?: ((row: T) => string | null | undefined) | null;
+        /**
+         * Rows the operator orders by dragging (PE-952). Draws a handle in a leading
+         * column; a drop — or the arrow keys on a focused handle — emits `rowMove`
+         * with the new order. The table writes nothing: what a position MEANS, and
+         * which rows have to be written for it, is the surface's to decide.
+         */
+        reorderable?: boolean;
+        /**
+         * Why the handles are off right now, or null when they are on. The surface
+         * knows the cases this component cannot see — a sort that is not the
+         * sequence, a write still in flight. The table adds its own: a search, a
+         * filter or a grouping, under any of which "the row above" is not the row
+         * above in the sequence.
+         */
+        reorderDisabled?: string | null;
     } & {
-        sort?: SortState;
+        sort?: Eye;
         page?: number;
         viewMode?: string;
         railOpen?: boolean;
@@ -106,14 +121,31 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
          * 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;
+        facetSelection?: Eye;
+    }) & {
+        onRowClick?: ((row: T) => any) | undefined;
+        onStateChange?: ((state: DataTableState) => any) | undefined;
+        onOrderChange?: ((keys: (string | number)[]) => any) | undefined;
+        onRowMove?: ((move: {
+            key: string | number;
+            from: number;
+            to: number;
+            keys: (string | number)[];
+        }) => any) | undefined;
+        "onUpdate:sort"?: ((value: SortState) => any) | undefined;
+        "onUpdate:page"?: ((value: number) => any) | undefined;
+        "onUpdate:viewMode"?: ((value: string) => any) | undefined;
+        "onUpdate:railOpen"?: ((value: boolean) => any) | undefined;
+        "onUpdate:facetSelection"?: ((value: FacetSelection) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: {
-        [x: string]: ((props: {}) => any) | undefined;
+        [x: `header-${any}`]: ((props: {}) => any) | undefined;
     } & {
-        [x: string]: ((props: {
+        [x: `cell-${any}`]: ((props: {
             row: any;
         }) => any) | undefined;
     } & {
@@ -129,16 +161,28 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     } & {
         view?: (props: {
             rows: any;
-            loading: any;
+            loading: boolean;
         }) => any;
     } & {
-        empty?: (props: {}) => any;
+        empty?: (props: {
+            query: any;
+            filters: any;
+            clear: () => void;
+        }) => 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) & ((evt: "update:facetSelection", value: FacetSelection) => void));
+    emit: (((evt: "rowClick", row: T) => void) & ((evt: "stateChange", state: DataTableState) => void) & ((evt: "orderChange", keys: (string | number)[]) => void) & ((evt: "rowMove", move: {
+        key: string | number;
+        from: number;
+        to: number;
+        keys: (string | number)[];
+    }) => void)) & (((event: "update:sort", value: SortState) => void) & ((event: "update:page", value: number) => void) & ((event: "update:viewMode", value: string) => void) & ((event: "update:railOpen", value: boolean) => void) & ((event: "update:facetSelection", value: FacetSelection) => void));
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
-} & {};
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -8,9 +8,10 @@ type __VLS_Props = {
      */
     showFacet?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -8,9 +8,10 @@ type __VLS_Props = {
      */
     showFacet?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -6,15 +6,16 @@ type __VLS_Props = {
     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;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     reset: () => any;
+    "update:modelValue": (value: FacetSelection) => any;
+    apply: (value: FacetSelection) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onApply?: ((value: FacetSelection) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: FacetSelection) => any) | undefined;
     onReset?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FacetSelection) => any) | undefined;
+    onApply?: ((value: FacetSelection) => any) | undefined;
 }>, {
     size: "sm" | "default";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;