@revenexx/studio-shared 0.2.0 → 0.3.0

package/dist/module.d.mts

@@ -1,8 +1,14 @@
 import * as nuxt_schema from 'nuxt/schema';
 export * from '../dist/runtime/components/DataTable/types.js';
+export * from '../dist/runtime/types/storage.js';
 export { SidebarNavItem, SidebarNavSection } from '../dist/runtime/types/nav.js';
 export { PlatformAuth } from '../dist/runtime/composables/usePlatformAuth.js';
 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 { IsoOption } from '../dist/runtime/lib/isoLists.js';
+export { Translate, TranslateNamed, Translator } from '../dist/runtime/lib/i18nBridge.js';
 
 declare const _default: nuxt_schema.NuxtModule<nuxt_schema.ModuleOptions, nuxt_schema.ModuleOptions, false>;
 

package/dist/module.json

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

package/dist/module.mjs

@@ -16,10 +16,41 @@ const module$1 = defineNuxtModule({
       new RegExp(runtime.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"))
     );
     nuxt.options.build.transpile.push(runtime);
+    nuxt.options.build.transpile.push("@revenexx/talkback-js");
+    nuxt.options.vite = nuxt.options.vite || {};
+    nuxt.options.vite.resolve = nuxt.options.vite.resolve || {};
+    const dedupe = nuxt.options.vite.resolve.dedupe ??= [];
+    for (const pkg of ["@revenexx/studio-shared", "@revenexx/talkback-js", "centrifuge"]) {
+      if (!dedupe.includes(pkg)) dedupe.push(pkg);
+    }
+    nuxt.options.runtimeConfig.public.talkbackHost ??= "";
+    nuxt.options.runtimeConfig.public.talkbackTokenEndpoint ??= "";
+    nuxt.options.runtimeConfig.public.talkbackSubscriptionTokenEndpoint ??= "";
     addComponentsDir({ path: join(runtime, "components"), pathPrefix: false });
     addImports([
       { name: "usePlatformAuth", from: join(runtime, "composables/usePlatformAuth"), priority: -1 },
-      { name: "usePlatformTenant", from: join(runtime, "composables/usePlatformTenant"), priority: -1 }
+      { name: "usePlatformTenant", from: join(runtime, "composables/usePlatformTenant"), priority: -1 },
+      // Media storage provider seam behind the shared media components — the
+      // cockpit's `app/composables/useMediaLibrary.ts` overrides this default.
+      { name: "useMediaLibrary", from: join(runtime, "composables/useMediaLibrary"), priority: -1 },
+      // Collapsible list-rail state (persisted per surface) behind the
+      // DataTable toolbar's rail handle.
+      { name: "useListRail", from: join(runtime, "composables/useListRail"), priority: -1 },
+      // Realtime provider seam (Talkback). Composes usePlatformAuth +
+      // usePlatformTenant, so a host that overrides those gets a correct client
+      // without overriding this one too.
+      { name: "usePlatformTalkback", from: join(runtime, "composables/usePlatformTalkback"), priority: -1 }
+    ]);
+    addImports([
+      "useTalkbackTopic",
+      "useTalkbackResource",
+      "useTalkbackUser",
+      "useTalkbackStream",
+      "useTalkbackPresence"
+    ].map((name) => ({ name, from: join(runtime, "composables/useTalkbackChannels") })));
+    addImports([
+      { name: "useT", from: join(runtime, "composables/useT") },
+      { name: "useUiLocale", from: join(runtime, "composables/useT") }
     ]);
   }
 });

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

@@ -14,6 +14,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["toggle"]);
 const toggleable = computed(() => props.columns.filter((c) => c.toggleable !== false));
+const t = useT();
 </script>
 
 <template>
@@ -22,14 +23,14 @@ const toggleable = computed(() => props.columns.filter((c) => c.toggleable !== f
       <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="Columns"
+        :title="t('shared.datatable.columnsmenu.tooltip')"
       >
         <Columns :size="15" />
       </button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end" class="w-48">
       <DropdownMenuLabel class="text-sm text-muted-foreground">
-        Columns
+        {{ t("shared.datatable.columnsmenu.heading") }}
       </DropdownMenuLabel>
       <DropdownMenuSeparator />
       <DropdownMenuItem

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

@@ -1,11 +1,13 @@
-import type { DataTableColumn, DataTableFilter, DataTableState, RowKey, SortState } from './types.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 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" | "onRowClick" | "onStateChange"> & ({
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:sort" | "onUpdate:page" | "onUpdate:viewMode" | "onUpdate:railOpen" | "onRowClick" | "onStateChange"> & ({
         data: T[];
         columns: DataTableColumn<T>[];
         rowKey: RowKey<T>;
@@ -13,10 +15,23 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
             placeholder?: string;
         };
         columnsMenu?: boolean;
-        filter?: boolean;
+        /** Mount the surface's own filter panel in the toolbar's Filter popover
+         *  (`#filter-menu`). Pass an object to widen it / flag it as active. */
+        filter?: boolean | {
+            width?: string;
+            active?: boolean;
+        };
         /** Built-in status/dimension filter pills (static mode). One dimension, or
          *  several (each renders as its own sub-menu). */
         filterTabs?: DataTableFilter<T> | DataTableFilter<T>[];
+        /** Saved views control — the surface supplies snapshot/apply, the table
+         *  owns the control, the storage and the dialogs. */
+        savedViews?: DataTableSavedViews | 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;
+        /** Collapse handle for the surface's left rail (see `ListSurface`). */
+        rail?: boolean | DataTableRail;
         pagination?: boolean | {
             pageSize?: number;
         };
@@ -33,10 +48,14 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     } & {
         sort?: SortState;
         page?: number;
+        viewMode?: string;
+        railOpen?: boolean;
     }) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
+        [x: string]: ((props: {}) => any) | undefined;
+    } & {
         [x: string]: ((props: {
             row: any;
         }) => any) | undefined;
@@ -44,12 +63,21 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         'filter-menu'?: (props: {}) => any;
     } & {
         'toolbar-left'?: (props: {}) => any;
+    } & {
+        'toolbar-right'?: (props: {}) => any;
+    } & {
+        scope?: (props: {}) => any;
     } & {
         actions?: (props: {}) => any;
+    } & {
+        view?: (props: {
+            rows: any;
+            loading: any;
+        }) => any;
     } & {
         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));
+    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));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,5 +1,5 @@
 <script setup>
-import { AltArrowDown, Filter, Magnifier as Search } from "#solar-icons";
+import { AltArrowDown, Filter, Magnifier as Search, SidebarMinimalistic } from "#solar-icons";
 import {
   Button,
   DropdownMenu,
@@ -15,14 +15,20 @@ import {
 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 },
   rowKey: { type: Function, required: true, skipCheck: true },
   search: { type: [Boolean, Object], required: false, default: true },
   columnsMenu: { type: Boolean, required: false, default: true },
-  filter: { type: Boolean, required: false, default: false },
+  filter: { type: [Boolean, Object], required: false, default: false },
   filterTabs: { type: [Object, Array], required: 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 },
   pagination: { type: [Boolean, Object], required: false, default: true },
   defaultSort: { type: Object, required: false },
   serverMode: { type: Boolean, required: false, default: false },
@@ -33,6 +39,7 @@ const props = defineProps({
   groupEmptyLabel: { type: String, required: false }
 });
 const emit = defineEmits(["rowClick", "stateChange"]);
+const t = useT();
 const query = ref("");
 const sort = defineModel("sort", { type: Object, ...{
   default: () => ({
@@ -41,6 +48,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 } });
 if (props.defaultSort && sort.value.column == null) {
   sort.value = { column: props.defaultSort.column, direction: props.defaultSort.direction };
 }
@@ -74,7 +83,7 @@ const filterDims = computed(() => {
   const raw = props.filterTabs;
   if (!raw) return [];
   const arr = Array.isArray(raw) ? raw : [raw];
-  return arr.map((f, i) => ({ key: f.key ?? f.label ?? `dim${i}`, label: f.label ?? "Status", getter: f.getter, options: f.options, allLabel: f.allLabel }));
+  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));
@@ -151,7 +160,7 @@ const keyedRows = computed(() => {
 });
 const renderRows = computed(() => {
   if (!props.groupBy) return keyedRows.value.map(({ row, key }) => ({ kind: "row", row, key }));
-  const emptyLabel = props.groupEmptyLabel ?? "Ungrouped";
+  const emptyLabel = props.groupEmptyLabel ?? t("shared.datatable.group.ungrouped.default");
   const groups = /* @__PURE__ */ new Map();
   for (const entry of keyedRows.value) {
     const labels2 = props.groupBy(entry.row);
@@ -207,12 +216,18 @@ const gridTemplate = computed(() => {
   return `grid-template-columns: ${tracks.join(" ")};`;
 });
 const placeholder = computed(
-  () => typeof props.search === "object" ? props.search.placeholder ?? "Search\u2026" : "Search\u2026"
+  () => typeof props.search === "object" ? props.search.placeholder ?? t("shared.datatable.toolbar.search.placeholder.default") : t("shared.datatable.toolbar.search.placeholder.default")
 );
 const slots = useSlots();
 const showToolbar = computed(
-  () => props.search || props.columnsMenu || props.filter || !!props.filterTabs || !!slots.actions || !!slots["toolbar-left"]
+  () => 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")
+);
+const showTable = computed(() => !props.viewModes?.length || viewMode.value === "list");
+const sortableColumns = computed(() => props.columns.filter((c) => c.sortable));
+const showSortMenu = computed(() => !showTable.value && sortableColumns.value.length > 0);
 function cellIconFor(col) {
   return col.cellIcon ?? null;
 }
@@ -240,14 +255,31 @@ function defaultCell(col, row) {
 <template>
   <div class="rounded-lg border border-black/[0.06] overflow-hidden flex flex-col">
     <!-- Toolbar ------------------------------------------------------ -->
-    <!-- Toolbar: LEFT = search · filter · columns · RIGHT = actions.
+    <!-- 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.) -->
     <div
       v-if="showToolbar"
-      class="flex 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-white/55 backdrop-blur-md"
     >
       <div class="flex items-center gap-2 min-w-0">
-        <div v-if="search" class="relative w-[21rem] max-w-full">
+        <Button
+          v-if="rail"
+          variant="outline"
+          size="sm"
+          class="h-7 shrink-0 gap-1.5 text-sm"
+          :class="railOpen ? 'border-primary/30 text-primary' : ''"
+          :aria-pressed="railOpen"
+          :aria-label="railOpen ? t('shared.datatable.toolbar.rail.aria.hide', { label: railLabel }) : t('shared.datatable.toolbar.rail.aria.show', { label: railLabel })"
+          @click="railOpen = !railOpen"
+        >
+          <SidebarMinimalistic :size="14" />
+          {{ 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"
@@ -265,7 +297,7 @@ function defaultCell(col, row) {
               :class="anyFilterActive ? 'border-primary/30 text-primary' : ''"
             >
               <Filter :size="14" />
-              Filter
+              {{ t("shared.datatable.toolbar.filter.action") }}
               <AltArrowDown :size="12" class="opacity-60" />
             </Button>
           </DropdownMenuTrigger>
@@ -277,7 +309,7 @@ function defaultCell(col, row) {
               </DropdownMenuSubTrigger>
               <DropdownMenuSubContent class="w-48">
                 <DropdownMenuItem class="gap-2" @select="setFilter(d.key, null)">
-                  <span class="flex-1">{{ d.allLabel ?? "All" }}</span>
+                  <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 />
@@ -294,11 +326,16 @@ function defaultCell(col, row) {
             </DropdownMenuSub>
           </DropdownMenuContent>
         </DropdownMenu>
-        <FilterMenu v-if="filter">
+        <FilterMenu
+          v-if="filter"
+          :width="typeof filter === 'object' ? filter.width : void 0"
+          :active="typeof filter === 'object' ? filter.active : void 0"
+        >
           <slot name="filter-menu" />
         </FilterMenu>
+        <SortMenu v-if="showSortMenu" v-model="sort" :columns="sortableColumns" />
         <ColumnsMenu
-          v-if="columnsMenu"
+          v-if="columnsMenu && showTable"
           :columns="menuColumns"
           :visible="visibleKeys"
           @toggle="toggleColumn"
@@ -306,12 +343,24 @@ function defaultCell(col, row) {
         <slot name="toolbar-left" />
       </div>
       <div class="flex items-center gap-1.5 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>
 
+    <!-- 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>
+
     <!-- 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"
       :style="gridTemplate"
     >
@@ -320,22 +369,27 @@ function defaultCell(col, row) {
         :key="col.key"
         :class="col.alignRight ? 'text-right' : ''"
       >
-        <SortHeader
-          v-if="col.sortable"
-          :column="col.key"
-          :active="sort.column"
-          :direction="sort.direction"
-          :align-right="col.alignRight"
-          @toggle="toggleSort"
-        >
-          {{ col.label }}
-        </SortHeader>
-        <span v-else>{{ col.label }}</span>
+        <!-- `#header-<key>` lets a page take over a header cell (e.g. a
+             select-all checkbox in a selection column). Default: sortable
+             SortHeader or the plain label. -->
+        <slot :name="`header-${col.key}`">
+          <SortHeader
+            v-if="col.sortable"
+            :column="col.key"
+            :active="sort.column"
+            :direction="sort.direction"
+            :align-right="col.alignRight"
+            @toggle="toggleSort"
+          >
+            {{ col.label }}
+          </SortHeader>
+          <span v-else>{{ col.label }}</span>
+        </slot>
       </div>
     </div>
 
     <!-- Body --------------------------------------------------------- -->
-    <template v-for="entry in renderRows" :key="entry.key">
+    <template v-for="entry in showTable ? renderRows : []" :key="entry.key">
       <!-- Group header (groupBy mode) -->
       <div
         v-if="entry.kind === 'header'"
@@ -367,14 +421,17 @@ function defaultCell(col, row) {
               </span>
               <span class="text-sm font-semibold text-[#0B0522] truncate transition-colors group-hover:text-primary">{{ defaultCell(col, entry.row) }}</span>
             </div>
-            <span v-else class="text-sm truncate">{{ defaultCell(col, entry.row) }}</span>
+            <!-- `block`, or `truncate` clips nothing: an inline span establishes
+                 no box, so a long unbroken value overruns the next column
+                 instead of ending in an ellipsis. -->
+            <span v-else class="block truncate text-sm" :title="String(defaultCell(col, entry.row) ?? '')">{{ defaultCell(col, entry.row) }}</span>
           </slot>
         </div>
       </div>
     </template>
 
     <!-- Loading skeleton (only when there are no rows yet) ----------- -->
-    <template v-if="loading && !displayedRows.length">
+    <template v-if="showTable && loading && !displayedRows.length">
       <div
         v-for="n in 6"
         :key="`sk-${n}`"
@@ -396,11 +453,11 @@ function defaultCell(col, row) {
 
     <!-- Empty -------------------------------------------------------- -->
     <div
-      v-if="!displayedRows.length && !loading"
+      v-if="showTable && !displayedRows.length && !loading"
       class="px-3 py-8 text-center text-sm text-muted-foreground"
     >
       <slot name="empty">
-        {{ emptyText ?? "No entries." }}
+        {{ emptyText ?? t("shared.datatable.empty.default") }}
       </slot>
     </div>
 
@@ -411,12 +468,12 @@ function defaultCell(col, row) {
     >
       <div class="flex items-center gap-2.5">
         <span class="tabular-nums">
-          <span v-if="totalCount === 0">No results</span>
-          <span v-else>Showing {{ rangeStart }}–{{ rangeEnd }} of {{ totalCount }}</span>
+          <span v-if="totalCount === 0">{{ t("shared.datatable.footer.noresults") }}</span>
+          <span v-else>{{ t("shared.datatable.footer.showing", { start: rangeStart, end: rangeEnd, total: totalCount }) }}</span>
         </span>
         <span class="text-muted-foreground/40">-</span>
         <label class="flex items-center gap-1.5">
-          <span class="hidden sm:inline">Rows per page</span>
+          <span class="hidden sm:inline">{{ t("shared.datatable.footer.pagesize.label") }}</span>
           <select
             v-model.number="pageSize"
             class="h-7 rounded-md border border-input bg-white px-1.5 text-sm tabular-nums focus:outline-none focus:ring-1 focus:ring-ring"
@@ -433,7 +490,7 @@ function defaultCell(col, row) {
           :disabled="page === 0 || loading"
           @click="prevPage"
         >
-          Previous
+          {{ t("shared.datatable.footer.action.previous") }}
         </Button>
         <span class="tabular-nums">
           {{ page + 1 }} / {{ lastPage + 1 }}
@@ -445,7 +502,7 @@ function defaultCell(col, row) {
           :disabled="page >= lastPage || loading"
           @click="nextPage"
         >
-          Next
+          {{ t("shared.datatable.footer.action.next") }}
         </Button>
       </div>
     </div>

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

@@ -1,11 +1,13 @@
-import type { DataTableColumn, DataTableFilter, DataTableState, RowKey, SortState } from './types.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 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" | "onRowClick" | "onStateChange"> & ({
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:sort" | "onUpdate:page" | "onUpdate:viewMode" | "onUpdate:railOpen" | "onRowClick" | "onStateChange"> & ({
         data: T[];
         columns: DataTableColumn<T>[];
         rowKey: RowKey<T>;
@@ -13,10 +15,23 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
             placeholder?: string;
         };
         columnsMenu?: boolean;
-        filter?: boolean;
+        /** Mount the surface's own filter panel in the toolbar's Filter popover
+         *  (`#filter-menu`). Pass an object to widen it / flag it as active. */
+        filter?: boolean | {
+            width?: string;
+            active?: boolean;
+        };
         /** Built-in status/dimension filter pills (static mode). One dimension, or
          *  several (each renders as its own sub-menu). */
         filterTabs?: DataTableFilter<T> | DataTableFilter<T>[];
+        /** Saved views control — the surface supplies snapshot/apply, the table
+         *  owns the control, the storage and the dialogs. */
+        savedViews?: DataTableSavedViews | 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;
+        /** Collapse handle for the surface's left rail (see `ListSurface`). */
+        rail?: boolean | DataTableRail;
         pagination?: boolean | {
             pageSize?: number;
         };
@@ -33,10 +48,14 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     } & {
         sort?: SortState;
         page?: number;
+        viewMode?: string;
+        railOpen?: boolean;
     }) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
+        [x: string]: ((props: {}) => any) | undefined;
+    } & {
         [x: string]: ((props: {
             row: any;
         }) => any) | undefined;
@@ -44,12 +63,21 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         'filter-menu'?: (props: {}) => any;
     } & {
         'toolbar-left'?: (props: {}) => any;
+    } & {
+        'toolbar-right'?: (props: {}) => any;
+    } & {
+        scope?: (props: {}) => any;
     } & {
         actions?: (props: {}) => any;
+    } & {
+        view?: (props: {
+            rows: any;
+            loading: any;
+        }) => any;
     } & {
         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));
+    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));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,8 +1,17 @@
-declare var __VLS_26: {};
+type __VLS_Props = {
+    /** Popover width class (a wide panel of inputs needs more than the default). */
+    width?: string;
+    /** Tint the trigger while at least one filter is set. */
+    active?: boolean;
+};
+declare var __VLS_34: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_26) => any;
+    default?: (props: typeof __VLS_34) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    active: boolean;
+    width: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,6 +1,7 @@
 <script setup>
-import { Filter } from "#solar-icons";
+import { AltArrowDown, Filter } from "#solar-icons";
 import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -8,27 +9,36 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "@revenexx/studio";
+defineProps({
+  width: { type: String, required: false, default: "w-56" },
+  active: { type: Boolean, required: false, default: false }
+});
+const t = useT();
 </script>
 
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger 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="Filter"
+      <Button
+        variant="outline"
+        size="sm"
+        class="h-7 gap-1.5 text-sm"
+        :class="active ? 'border-primary/30 text-primary' : ''"
+        :aria-label="t('shared.datatable.filtermenu.aria')"
       >
-        <Filter :size="12" />
-      </button>
+        <Filter :size="14" />
+        {{ t("shared.datatable.filtermenu.action") }}
+        <AltArrowDown :size="12" class="opacity-60" />
+      </Button>
     </DropdownMenuTrigger>
-    <DropdownMenuContent align="end" class="w-56">
+    <DropdownMenuContent align="start" :class="width">
       <DropdownMenuLabel class="text-sm text-muted-foreground">
-        Filter
+        {{ t("shared.datatable.filtermenu.heading") }}
       </DropdownMenuLabel>
       <DropdownMenuSeparator />
       <slot>
         <DropdownMenuItem disabled>
-          No filters defined.
+          {{ t("shared.datatable.filtermenu.empty") }}
         </DropdownMenuItem>
       </slot>
     </DropdownMenuContent>

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

@@ -1,8 +1,17 @@
-declare var __VLS_26: {};
+type __VLS_Props = {
+    /** Popover width class (a wide panel of inputs needs more than the default). */
+    width?: string;
+    /** Tint the trigger while at least one filter is set. */
+    active?: boolean;
+};
+declare var __VLS_34: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_26) => any;
+    default?: (props: typeof __VLS_34) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    active: boolean;
+    width: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -0,0 +1,6 @@
+import type { DataTableSavedViews } from './types.js';
+type __VLS_Props = {
+    config: DataTableSavedViews;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;