@revenexx/studio-shared 0.4.0 → 0.4.2

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

@@ -1,9 +1,10 @@
-import { Eye } from '#solar-icons';
+import type { Facet, FacetSelection } from '../../lib/facets.js';
+import type { DataTableColumn, DataTableFilter, DataTableRail, DataTableSavedViews, DataTableState, DataTableViewMode, RowKey, SortState } from './types.js';
 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: Eye<T>[];
-        rowKey: Eye<T>;
+        columns: DataTableColumn<T>[];
+        rowKey: RowKey<T>;
         /** `label` is the field's accessible name; it defaults to the placeholder
          *  where the surface wrote one (see `searchLabel`). */
         search?: boolean | {
@@ -20,7 +21,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         };
         /** Built-in status/dimension filter pills (static mode). One dimension, or
          *  several (each renders as its own sub-menu). */
-        filterTabs?: Eye<T> | Eye<T>[];
+        filterTabs?: DataTableFilter<T> | DataTableFilter<T>[];
         /**
          * The surface's declared dimensions, as one facet model (PE-6xx).
          *
@@ -37,17 +38,17 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
          * 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?: Eye[];
+        facets?: Facet[];
         /** Say which facet each chip belongs to (see `FacetChips.showFacet`). */
         chipFacetLabels?: boolean;
         /** Saved views control — the surface supplies snapshot/apply, the table
          *  owns the control, the storage and the dialogs. */
-        savedViews?: Eye | null;
+        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?: Eye[] | null;
+        viewModes?: DataTableViewMode[] | null;
         /** Collapse handle for the surface's left rail (see `ListSurface`). */
-        rail?: boolean | Eye;
+        rail?: boolean | DataTableRail;
         /**
          * Scroll the ROWS inside the table instead of the page.
          *
@@ -73,6 +74,12 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         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;
         };
@@ -110,18 +117,51 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
          * 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;
     } & {
-        sort?: Eye;
+        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
          * 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?: Eye;
+        facetSelection?: FacetSelection;
     }) & {
         onRowClick?: ((row: T) => any) | undefined;
         onStateChange?: ((state: DataTableState) => any) | undefined;
@@ -132,50 +172,49 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             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: {}) => void;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        visibleColumns: any;
+    }>) => void;
     attrs: any;
     slots: {
-        [x: `header-${any}`]: ((props: {}) => any) | undefined;
-    } & {
-        [x: `cell-${any}`]: ((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;
+            rows: T[];
             loading: boolean;
-        }) => any;
-    } & {
+        }) => unknown;
         empty?: (props: {
-            query: any;
-            filters: any;
+            query: string;
+            filters: {
+                label: string;
+                values: string[];
+            }[];
             clear: () => void;
-        }) => any;
+        }) => unknown;
     };
     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));
+    }) => 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?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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/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/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>

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

@@ -37,7 +37,8 @@ function pick(key, direction) {
     <DropdownMenuTrigger as-child>
       <Button
         :variant="sorted ? 'default' : 'outline'"
-        :size="size === 'sm' ? 'icon-sm' : 'icon'"
+        :size="size"
+        class="size-8 gap-1.5 px-0"
         :data-active="sorted"
         :aria-label="t('shared.datatable.sortmenu.aria', { sort: label })"
         :title="t('shared.datatable.sortmenu.aria', { sort: label })"
@@ -48,6 +49,8 @@ function pick(key, direction) {
         <span class="flex shrink-0 items-center" :class="sorted ? '' : 'text-primary'">
           <component :is="icon" weight="Linear" :class="size === 'sm' ? 'size-3.5' : 'size-4'" />
         </span>
+        <!-- Icon only, the word for screen readers (Michael 12.10.). -->
+        <span class="sr-only">{{ t("shared.datatable.sortmenu.trigger") }}</span>
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="start" class="w-56">

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    label: string;
+    active?: boolean;
+    count?: number;
+    size?: 'sm' | 'default';
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "default";
+    count: number;
+    active: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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 (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,29 @@
+<script setup>
+import { Button } from "@revenexx/studio";
+const props = defineProps({
+  label: { type: String, required: true },
+  active: { type: Boolean, required: false, default: false },
+  count: { type: Number, required: false, default: 0 },
+  size: { type: String, required: false, default: "sm" }
+});
+</script>
+
+<template>
+  <Button
+    :variant="props.active ? 'default' : 'outline'"
+    :size="props.size"
+    class="relative size-8 gap-1.5 px-0"
+    :data-active="props.active"
+    :aria-label="props.label"
+    :title="props.label"
+  >
+    <span class="flex shrink-0 items-center" :class="props.active ? '' : 'text-primary'">
+      <slot name="icon" />
+    </span>
+    <span class="sr-only">{{ props.label }}</span>
+    <span
+      v-if="props.active && props.count > 0"
+      class="flex h-4 min-w-4 items-center justify-center rounded-full bg-primary-foreground px-1 text-[0.625rem]/none font-semibold tabular-nums text-primary absolute -top-1.5 -right-1.5 bg-primary text-primary-foreground ring-2 ring-card"
+    >{{ props.count }}</span>
+  </Button>
+</template>

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    label: string;
+    active?: boolean;
+    count?: number;
+    size?: 'sm' | 'default';
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "default";
+    count: number;
+    active: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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 (): {
+        $slots: S;
+    };
+};

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

@@ -25,6 +25,13 @@ export interface DataTableColumn<T = unknown> {
     alignRight?: boolean;
     /** Optional icon component for the header. */
     icon?: Component;
+    /** The narrowest this column may get when it takes a share (`fr`) of the
+     *  width — for a name or company column that must stay readable while ID
+     *  columns size to their content. The `primary` column has its own floor. */
+    floor?: string;
+    /** Keeps a trailing column (the row's „…“ menu) in view while the table
+     *  scrolls sideways, like the identifying column on the left. */
+    pinRight?: boolean;
     /** Marks the identifying column. When set (and no `#cell-<key>` slot is
      *  given) the DataTable renders the value as the bold record anchor —
      *  `font-semibold text-[#0B0522]`, truncated — optionally led by a tinted
@@ -36,7 +43,17 @@ export interface DataTableColumn<T = unknown> {
      *  `cellIcon` must NOT be a getter: Solar icons are functional components, so
      *  the table can't tell a getter from an icon and would crash invoking it.) */
     cellIcon?: Component;
+    /**
+     * The column's part in the phone layout, where each row is drawn as a card
+     * (R4, Charge 2). `title` heads the card (defaults to the `primary` column),
+     * `status` sits beside it as the badge, `meta` columns fill the two lines of
+     * key facts in declared order, `hidden` leaves the column out. Unset: the
+     * table decides from `primary` and the column key.
+     */
+    card?: 'title' | 'status' | 'meta' | 'hidden';
 }
+/** Row height (D4, Charge 2): `standard` 44px, `compact` 36px. */
+export type DataTableDensity = 'standard' | 'compact';
 /** A built-in filter dimension rendered under the generic "Filter" dropdown as
  *  a labelled sub-menu (datatable-ux). Static mode only: the DataTable filters
  *  `data` in-memory and shows a count per option. Pass one, or an array of

package/dist/runtime/components/Form/FieldGrid.vue

@@ -4,7 +4,7 @@
 
 <template>
   <div class="@container">
-    <div class="grid grid-cols-1 gap-x-4 gap-y-3.5 @md:grid-cols-2">
+    <div class="grid grid-cols-1 gap-x-4 gap-y-3.5 @lg:grid-cols-2">
       <slot />
     </div>
   </div>

package/dist/runtime/components/Form/SaveBar.d.vue.ts

@@ -29,8 +29,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onCancel?: (() => any) | undefined;
 }>, {
     dirty: boolean;
-    canSubmit: boolean;
     busy: boolean;
+    canSubmit: boolean;
     allowClean: boolean;
     hideCancel: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;