@revenexx/studio-shared 0.3.3 → 0.4.1

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

@@ -1,15 +1,7 @@
 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"> & ({
+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>;
@@ -82,6 +74,12 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         scrollBody?: boolean | "fit" | {
             maxHeight?: string;
         };
+        /**
+         * Extra room `'fit'` keeps free under the table — for a bar the host floats
+         * over the bottom of the list while rows are selected, so it never covers
+         * the pagination row (Re-QA 18.10.).
+         */
+        reserveBottom?: number;
         pagination?: boolean | {
             pageSize?: number;
         };
@@ -95,11 +93,68 @@ 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;
+        /**
+         * Below 768px every row is drawn as a card — title, status badge, two lines
+         * of key facts — instead of a grid two columns of which fit (R4, Charge 2).
+         * Off for a table that is already narrow by nature.
+         */
+        mobileCards?: boolean;
+        /** `localStorage` key the row-height choice is remembered under (D4). */
+        densityKey?: string;
+        /**
+         * Which table the rows-per-page choice is remembered for (PE-1052). Falls
+         * back to the saved views' `storageKey`; with neither, the size is not kept.
+         */
+        pageSizeKey?: string | null;
+        /**
+         * A table set INTO a card on a detail page (Michael 14.10.): no frame or
+         * corners of its own, the grey head row running edge to edge, and the
+         * search row plain white — the tinted toolbar is a list page's chrome, and
+         * inside a card it read as a second box with too little contrast.
+         */
+        embedded?: boolean;
+        /**
+         * Draw the control row at all. A detail-page card hides it until the
+         * operator asks (the filter toggle in the card head, Michael 14.10.), so a
+         * table of three rows is three rows and not a toolbar with a table under it.
+         */
+        toolbar?: boolean;
     } & {
+        query?: string;
         sort?: SortState;
         page?: number;
         viewMode?: string;
         railOpen?: boolean;
+        /**
+         * Row height (D4, Charge 2). Standard is 44px with a second line only in the
+         * identifying column; compact is 36px and one line everywhere. The reader's
+         * choice, remembered across lists — it is about their screen, not one list.
+         */
+        density?: "standard" | "compact";
         /**
          * 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
@@ -107,38 +162,66 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
          * URL without this component holding a second copy to drift from.
          */
         facetSelection?: FacetSelection;
-    }) & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    }) & {
+        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:query"?: ((value: string) => 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:density"?: ((value: "compact" | "standard") => any) | undefined;
+        "onUpdate:facetSelection"?: ((value: FacetSelection) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        visibleColumns: any;
+    }>) => void;
     attrs: any;
     slots: {
-        [x: string]: ((props: {}) => any) | undefined;
-    } & {
-        [x: string]: ((props: {
-            row: any;
-        }) => any) | undefined;
-    } & {
-        'filter-menu'?: (props: {}) => any;
-    } & {
-        scope?: (props: {}) => any;
-    } & {
-        'toolbar-left'?: (props: {}) => any;
-    } & {
-        'toolbar-right'?: (props: {}) => any;
-    } & {
-        actions?: (props: {}) => any;
-    } & {
+        [name: `header-${string}`]: (props: Record<string, never>) => unknown;
+        [name: `cell-${string}`]: (props: {
+            row: T;
+        }) => unknown;
+        'filter-menu'?: (props: Record<string, never>) => unknown;
+        scope?: (props: Record<string, never>) => unknown;
+        'toolbar-left'?: (props: Record<string, never>) => unknown;
+        'toolbar-right'?: (props: Record<string, never>) => unknown;
+        actions?: (props: Record<string, never>) => unknown;
         view?: (props: {
-            rows: any;
-            loading: any;
-        }) => any;
-    } & {
-        empty?: (props: {}) => any;
+            rows: T[];
+            loading: boolean;
+        }) => unknown;
+        empty?: (props: {
+            query: string;
+            filters: {
+                label: string;
+                values: string[];
+            }[];
+            clear: () => void;
+        }) => unknown;
     };
-    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:query", value: string) => 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:density", value: "compact" | "standard") => 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;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from "vue";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
 import { AltArrowDown, AltArrowRight, Filter, Magnifier } from "#solar-icons";
 import {
   Button,
@@ -7,9 +7,9 @@ import {
   Input,
   Popover,
   PopoverContent,
-  PopoverTrigger,
-  ToolbarFilterTrigger
+  PopoverTrigger
 } from "@revenexx/studio";
+import ToolbarLabelTrigger from "./ToolbarLabelTrigger.vue";
 import {
   allNodes,
   copySelection,
@@ -57,12 +57,54 @@ function matches(facet, label) {
   return label.toLowerCase().includes(query.value);
 }
 function visibleOptions(facet) {
+  if (facet.search) return searchedOptions(facet);
   return (facet.options ?? []).filter((option) => matches(facet, option.label));
 }
+const remote = ref({});
+const pickedHits = ref({});
+let remoteTimer = null;
+let remoteSeq = 0;
+onBeforeUnmount(() => {
+  if (remoteTimer) clearTimeout(remoteTimer);
+});
+function remoteTerm(facet) {
+  return !query.value || facet.label.toLowerCase().includes(query.value) ? "" : search.value.trim();
+}
+async function runRemote(facet) {
+  if (!facet.search) return;
+  const mine = ++remoteSeq;
+  remote.value = { ...remote.value, [facet.key]: { options: remote.value[facet.key]?.options ?? [], busy: true } };
+  let options = [];
+  try {
+    options = await facet.search(remoteTerm(facet));
+  } catch {
+    options = [];
+  }
+  if (mine !== remoteSeq) return;
+  remote.value = { ...remote.value, [facet.key]: { options, busy: false } };
+}
+watch([() => activeFacet.value?.key, query, open], () => {
+  const facet = activeFacet.value;
+  if (!open.value || !facet?.search) return;
+  if (remoteTimer) clearTimeout(remoteTimer);
+  remoteTimer = setTimeout(() => {
+    void runRemote(facet);
+  }, 250);
+}, { immediate: true });
+function searchedOptions(facet) {
+  const ticked = draft.value[facet.key];
+  const values = Array.isArray(ticked) ? ticked : [];
+  const named = new Map((facet.options ?? []).map((o) => [o.value, o]));
+  for (const [value, option] of Object.entries(pickedHits.value[facet.key] ?? {})) named.set(value, option);
+  const head = values.map((value) => named.get(value) ?? { value, label: value });
+  const seen = new Set(values);
+  return [...head, ...(remote.value[facet.key]?.options ?? []).filter((o) => !seen.has(o.value))];
+}
 const visibleFacets = computed(() => {
   if (!query.value) return panelFacets.value;
   return panelFacets.value.filter((facet) => {
     if (facet.label.toLowerCase().includes(query.value)) return true;
+    if (facet.search) return true;
     if (facet.kind === "check") return visibleOptions(facet).length > 0;
     if (facet.kind === "tree") return visibleNodes(facet).length > 0;
     return false;
@@ -73,6 +115,8 @@ function isTicked(key, value) {
   return Array.isArray(current) && current.includes(value);
 }
 function tick(key, value, on) {
+  const hit = remote.value[key]?.options.find((o) => o.value === value);
+  if (on && hit) pickedHits.value = { ...pickedHits.value, [key]: { ...pickedHits.value[key] ?? {}, [value]: hit } };
   const single = props.facets.find((f) => f.key === key)?.single;
   draft.value = toggleFacetValue(draft.value, key, value, on, { single });
 }
@@ -138,8 +182,7 @@ const nothingToReset = computed(() => Object.keys(draft.value).every((key) => is
 <template>
   <Popover v-model:open="open">
     <PopoverTrigger as-child>
-      <ToolbarFilterTrigger
-        icon-only
+      <ToolbarLabelTrigger
         :active="appliedCount > 0"
         :count="appliedCount"
         :label="t('shared.facetpanel.trigger.label')"
@@ -148,7 +191,7 @@ const nothingToReset = computed(() => Object.keys(draft.value).every((key) => is
         <template #icon>
           <Filter :size="14" weight="BoldDuotone" />
         </template>
-      </ToolbarFilterTrigger>
+      </ToolbarLabelTrigger>
     </PopoverTrigger>
 
     <PopoverContent
@@ -229,13 +272,19 @@ const nothingToReset = computed(() => Object.keys(draft.value).every((key) => is
               <!-- Wraps rather than truncates: a label reading "Net 30 days,
                    2% early settlement" is unusable cut off, and the pane cannot
                    grow to fit it without becoming the layout it replaced. -->
-              <span class="min-w-0 flex-1">{{ option.label }}</span>
+              <span class="min-w-0 flex-1">
+                {{ option.label }}
+                <span v-if="option.description" class="block text-xs text-muted-foreground">{{ option.description }}</span>
+              </span>
               <span
                 v-if="option.count !== void 0"
                 class="shrink-0 tabular-nums text-muted-foreground"
               >{{ option.count }}</span>
             </label>
-            <p v-if="!visibleOptions(activeFacet).length" class="px-1.5 py-6 text-center text-sm text-muted-foreground">
+            <div v-if="activeFacet.search && remote[activeFacet.key]?.busy && !visibleOptions(activeFacet).length" class="space-y-1.5 p-1">
+              <div v-for="i in 4" :key="i" class="h-6 animate-pulse rounded-md bg-muted" />
+            </div>
+            <p v-else-if="!visibleOptions(activeFacet).length" class="px-1.5 py-6 text-center text-sm text-muted-foreground">
               {{ query ? t("shared.facetpanel.empty.noMatch", { query: search }) : t("shared.facetpanel.empty.noOption") }}
             </p>
           </div>

package/dist/runtime/components/DataTable/FacetPanel.vue.d.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;

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

@@ -6,15 +6,16 @@ type __VLS_Props = {
     /** How many are set, for the badge. */
     count?: number;
 };
-declare var __VLS_22: {};
+declare var __VLS_32: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_22) => any;
+    default?: (props: typeof __VLS_32) => 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;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     width: string;
+    active: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -1,6 +1,7 @@
 <script setup>
 import { Filter } from "#solar-icons";
-import { Popover, PopoverContent, PopoverTrigger, ToolbarFilterTrigger } from "@revenexx/studio";
+import { Popover, PopoverContent, PopoverTrigger } from "@revenexx/studio";
+import ToolbarLabelTrigger from "./ToolbarLabelTrigger.vue";
 defineProps({
   width: { type: String, required: false, default: "w-72" },
   active: { type: Boolean, required: false, default: false },
@@ -12,16 +13,15 @@ const t = useT();
 <template>
   <Popover>
     <PopoverTrigger as-child>
-      <ToolbarFilterTrigger
-        icon-only
+      <ToolbarLabelTrigger
         :active="active"
         :count="count"
-        :label="t('shared.datatable.filtermenu.aria')"
+        :label="t('shared.datatable.toolbar.filter.action')"
       >
         <template #icon>
           <Filter :size="14" weight="BoldDuotone" />
         </template>
-      </ToolbarFilterTrigger>
+      </ToolbarLabelTrigger>
     </PopoverTrigger>
 
     <PopoverContent align="start" :class="['p-0', width]">

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

@@ -6,15 +6,16 @@ type __VLS_Props = {
     /** How many are set, for the badge. */
     count?: number;
 };
-declare var __VLS_22: {};
+declare var __VLS_32: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_22) => any;
+    default?: (props: typeof __VLS_32) => 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;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     width: string;
+    active: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -4,7 +4,8 @@ type __VLS_Props = {
     /** Matches the row it sits in; `sm` is the 32px square its neighbours are. */
     size?: 'sm' | 'default';
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: "sm" | "default";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { Bookmark, CheckCircle, Diskette, TrashBinMinimalistic } from "#solar-icons";
+import { Bookmark, CheckCircle, Diskette, TrashBinMinimalistic, UsersGroupRounded } from "#solar-icons";
 import {
   Button,
   Dialog,
@@ -14,7 +14,8 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Input
+  Input,
+  Switch
 } from "@revenexx/studio";
 import { sameJson } from "../../lib/canonicalJson";
 const props = defineProps({
@@ -46,11 +47,17 @@ function applyDefault() {
 function applyView(v) {
   props.config.apply(v.snapshot);
 }
+const isMine = (v) => v.mine !== false;
+const myViews = computed(() => views.value.filter(isMine));
+const sharedViews = computed(() => views.value.filter((v) => !isMine(v)));
 const saveOpen = ref(false);
 const saveName = ref("");
+const saveShared = ref(false);
 const saving = ref(false);
 function openSave() {
-  saveName.value = appliedView.value?.name ?? "";
+  const own = appliedView.value && isMine(appliedView.value) ? appliedView.value : null;
+  saveName.value = own?.name ?? "";
+  saveShared.value = own?.shared === true;
   saveOpen.value = true;
 }
 async function save() {
@@ -58,8 +65,8 @@ async function save() {
   if (!name || saving.value) return;
   saving.value = true;
   try {
-    const entry = await store.save(props.config.storageKey, name, props.config.snapshot());
-    const at = views.value.findIndex((v) => v.name === name);
+    const entry = await store.save(props.config.storageKey, name, props.config.snapshot(), { shared: saveShared.value });
+    const at = views.value.findIndex((v) => v.name === name && isMine(v));
     if (at >= 0) views.value.splice(at, 1, entry);
     else views.value = [...views.value, entry].sort((a, b) => a.name.localeCompare(b.name));
     saveOpen.value = false;
@@ -82,7 +89,8 @@ async function remove() {
     <DropdownMenuTrigger as-child>
       <Button
         :variant="hasAppliedView ? 'default' : 'outline'"
-        :size="size === 'sm' ? 'icon-sm' : 'icon'"
+        :size="size"
+        class="size-8 gap-1.5 px-0"
         :data-active="hasAppliedView"
         :aria-label="t('shared.datatable.savedviews.trigger.aria', { name: activeLabel })"
         :title="t('shared.datatable.savedviews.trigger.aria', { name: activeLabel })"
@@ -97,6 +105,8 @@ async function remove() {
         <span class="flex shrink-0 items-center" :class="hasAppliedView ? '' : 'text-primary'">
           <Bookmark :class="size === 'sm' ? 'size-3.5' : 'size-4'" weight="BoldDuotone" />
         </span>
+        <!-- Icon only, the word for screen readers (Michael 12.10.). -->
+        <span class="sr-only">{{ t("shared.datatable.savedviews.heading") }}</span>
       </Button>
     </DropdownMenuTrigger>
     <!--
@@ -105,7 +115,7 @@ async function remove() {
       market switcher's and the column picker's grew right — a menu that opens
       the other way is one a reader has to re-find every time.
     -->
-    <DropdownMenuContent align="start" class="w-60">
+    <DropdownMenuContent align="start" class="w-80">
       <!-- Named, like the market switcher's "Showing" and the column picker's
            "Columns": a menu of bare rows does not say what it is a menu OF. -->
       <DropdownMenuLabel>{{ t("shared.datatable.savedviews.heading") }}</DropdownMenuLabel>
@@ -118,16 +128,27 @@ async function remove() {
         <span class="flex-1 truncate" :class="isDefault ? 'font-medium text-primary' : ''">{{ allLabel }}</span>
         <CheckCircle v-if="isDefault" :size="14" weight="Bold" class="shrink-0 text-primary" />
       </DropdownMenuItem>
-      <template v-if="views.length">
+      <template v-if="myViews.length">
         <DropdownMenuSeparator />
+        <DropdownMenuLabel v-if="sharedViews.length" class="text-xs font-medium text-muted-foreground">
+          {{ t("shared.datatable.savedviews.group.mine") }}
+        </DropdownMenuLabel>
         <DropdownMenuItem
-          v-for="v in views"
+          v-for="v in myViews"
           :key="v.id"
           class="gap-2"
           :aria-current="isActive(v) ? 'true' : void 0"
           @select="applyView(v)"
         >
           <span class="min-w-0 flex-1 truncate" :class="isActive(v) ? 'font-medium text-primary' : ''">{{ v.name }}</span>
+          <span
+            v-if="v.shared"
+            class="inline-flex shrink-0 items-center gap-0.5 rounded border border-primary/20 bg-primary/[0.06] px-1 text-[10.5px] font-medium text-primary"
+            :title="t('shared.datatable.savedviews.savedialog.field.shared.label')"
+          >
+            <UsersGroupRounded :size="11" weight="Bold" />
+            {{ t("shared.datatable.savedviews.badge.shared") }}
+          </span>
           <CheckCircle v-if="isActive(v)" :size="14" weight="Bold" class="shrink-0 text-primary" />
           <span
             role="button"
@@ -140,6 +161,26 @@ async function remove() {
           </span>
         </DropdownMenuItem>
       </template>
+      <template v-if="sharedViews.length">
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel class="text-xs font-medium text-muted-foreground">
+          {{ t("shared.datatable.savedviews.group.shared") }}
+        </DropdownMenuLabel>
+        <DropdownMenuItem
+          v-for="v in sharedViews"
+          :key="v.id"
+          class="gap-2"
+          :aria-current="isActive(v) ? 'true' : void 0"
+          @select="applyView(v)"
+        >
+          <UsersGroupRounded :size="13" weight="Bold" class="shrink-0 text-primary/70" />
+          <span class="min-w-0 flex-1 truncate" :class="isActive(v) ? 'font-medium text-primary' : ''">{{ v.name }}</span>
+          <span v-if="v.ownerName" class="max-w-24 shrink-0 truncate text-xs text-muted-foreground">
+            {{ t("shared.datatable.savedviews.owner", { name: v.ownerName }) }}
+          </span>
+          <CheckCircle v-if="isActive(v)" :size="14" weight="Bold" class="shrink-0 text-primary" />
+        </DropdownMenuItem>
+      </template>
       <DropdownMenuSeparator />
       <DropdownMenuItem class="gap-2" @select="openSave">
         <Diskette :size="14" class="shrink-0 text-muted-foreground" />
@@ -160,7 +201,7 @@ async function remove() {
   <Dialog :open="saveOpen" @update:open="(v2) => {
   if (!v2) saveOpen = false;
 }">
-    <DialogContent>
+    <DialogContent class="sm:max-w-xl">
       <DialogHeader>
         <DialogTitle>{{ t("shared.datatable.savedviews.savedialog.title") }}</DialogTitle>
         <DialogDescription>{{ t("shared.datatable.savedviews.savedialog.description") }}</DialogDescription>
@@ -174,6 +215,14 @@ async function remove() {
           @keydown.enter="save"
         />
       </div>
+      <!-- PE-1052: private by default; the owner may share it with the tenant. -->
+      <div class="flex items-start justify-between gap-4 rounded-md border border-black/[0.06] px-3 py-2.5">
+        <div class="min-w-0">
+          <label for="saved-view-shared" class="text-sm font-medium">{{ t("shared.datatable.savedviews.savedialog.field.shared.label") }}</label>
+          <p class="mt-0.5 text-xs text-muted-foreground">{{ t("shared.datatable.savedviews.savedialog.field.shared.hint") }}</p>
+        </div>
+        <Switch id="saved-view-shared" v-model="saveShared" class="mt-0.5 shrink-0" />
+      </div>
       <DialogFooter>
         <Button variant="outline" @click="saveOpen = false">
           {{ t("shared.datatable.savedviews.savedialog.action.cancel") }}
@@ -189,9 +238,9 @@ async function remove() {
   <Dialog :open="deleteTarget !== null" @update:open="(v2) => {
   if (!v2) deleteTarget = null;
 }">
-    <DialogContent>
+    <DialogContent class="sm:max-w-xl">
       <DialogHeader>
-        <DialogTitle>{{ t("shared.datatable.savedviews.deletedialog.title") }}</DialogTitle>
+        <DialogTitle>{{ t("shared.datatable.savedviews.deletedialog.title", { name: deleteTarget?.name ?? "" }) }}</DialogTitle>
         <DialogDescription>
           {{ t("shared.datatable.savedviews.deletedialog.description", { name: deleteTarget?.name ?? "" }) }}
         </DialogDescription>