@revenexx/studio-shared 0.3.1 → 0.3.3

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

@@ -1,5 +1,5 @@
 <script setup>
-import { AltArrowDown, Bookmark, TrashBinMinimalistic } from "#solar-icons";
+import { Bookmark, CheckCircle, Diskette, TrashBinMinimalistic } from "#solar-icons";
 import {
   Button,
   Dialog,
@@ -11,51 +11,33 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   Input
 } from "@revenexx/studio";
+import { sameJson } from "../../lib/canonicalJson";
 const props = defineProps({
-  config: { type: Object, required: true }
+  config: { type: Object, required: true },
+  size: { type: String, required: false, default: "sm" }
 });
 const t = useT();
+const store = useSavedViews();
 const views = ref([]);
-function read() {
-  try {
-    if (typeof window === "undefined") return [];
-    const raw = window.localStorage.getItem(props.config.storageKey);
-    if (!raw) return [];
-    const parsed = JSON.parse(raw);
-    if (!Array.isArray(parsed)) return [];
-    return parsed.filter((v) => !!v && typeof v === "object" && typeof v.name === "string");
-  } catch {
-    return [];
-  }
-}
-function persist() {
-  try {
-    if (typeof window === "undefined") return;
-    window.localStorage.setItem(props.config.storageKey, JSON.stringify(views.value));
-  } catch {
-  }
+async function load() {
+  views.value = await store.list(props.config.storageKey);
 }
-onMounted(() => {
-  views.value = read();
-});
-watch(() => props.config.storageKey, () => {
-  views.value = read();
-});
+onMounted(load);
+watch(() => props.config.storageKey, load);
 const allLabel = computed(() => props.config.allLabel ?? t("shared.datatable.savedviews.all.default"));
-function same(a, b) {
-  return JSON.stringify(a) === JSON.stringify(b);
-}
-const isDefault = computed(() => same(props.config.snapshot(), props.config.defaultSnapshot()));
+const isDefault = computed(() => sameJson(props.config.snapshot(), props.config.defaultSnapshot()));
 function isActive(v) {
-  return same(v.snapshot, props.config.snapshot());
+  return sameJson(v.snapshot, props.config.snapshot());
 }
+const appliedView = computed(() => views.value.find(isActive) ?? null);
+const hasAppliedView = computed(() => appliedView.value !== null);
 const activeLabel = computed(() => {
-  const hit = views.value.find(isActive);
-  if (hit) return hit.name;
+  if (appliedView.value) return appliedView.value.name;
   return isDefault.value ? allLabel.value : t("shared.datatable.savedviews.custom");
 });
 function applyDefault() {
@@ -66,25 +48,31 @@ function applyView(v) {
 }
 const saveOpen = ref(false);
 const saveName = ref("");
+const saving = ref(false);
 function openSave() {
-  saveName.value = "";
+  saveName.value = appliedView.value?.name ?? "";
   saveOpen.value = true;
 }
-function save() {
+async function save() {
   const name = saveName.value.trim();
-  if (!name) return;
-  const entry = { name, snapshot: props.config.snapshot() };
-  const idx = views.value.findIndex((v) => v.name === name);
-  if (idx >= 0) views.value.splice(idx, 1, entry);
-  else views.value.push(entry);
-  persist();
-  saveOpen.value = false;
+  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);
+    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;
+  } finally {
+    saving.value = false;
+  }
 }
 const deleteTarget = ref(null);
-function remove() {
-  if (!deleteTarget.value) return;
-  views.value = views.value.filter((v) => v.name !== deleteTarget.value.name);
-  persist();
+async function remove() {
+  const target = deleteTarget.value;
+  if (!target) return;
+  await store.remove(props.config.storageKey, target.id);
+  views.value = views.value.filter((v) => v.id !== target.id);
   deleteTarget.value = null;
 }
 </script>
@@ -93,34 +81,57 @@ function remove() {
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
       <Button
-        variant="outline"
-        size="sm"
-        class="h-7 max-w-48 gap-1.5 text-sm"
-        :class="isDefault ? '' : 'border-primary/30 text-primary'"
-        :aria-label="t('shared.datatable.savedviews.aria')"
+        :variant="hasAppliedView ? 'default' : 'outline'"
+        :size="size === 'sm' ? 'icon-sm' : 'icon'"
+        :data-active="hasAppliedView"
+        :aria-label="t('shared.datatable.savedviews.trigger.aria', { name: activeLabel })"
+        :title="t('shared.datatable.savedviews.trigger.aria', { name: activeLabel })"
       >
-        <Bookmark :size="13" />
-        <span class="truncate">{{ activeLabel }}</span>
-        <AltArrowDown :size="12" class="opacity-60" />
+        <!--
+          Violet like the filter trigger and the column picker beside it, and
+          filled the same way once a stored view is in effect — the button
+          carries that state rather than a second mark inside it. On the filled
+          face the icon inherits the button's own foreground, or it would be
+          violet on violet.
+        -->
+        <span class="flex shrink-0 items-center" :class="hasAppliedView ? '' : 'text-primary'">
+          <Bookmark :class="size === 'sm' ? 'size-3.5' : 'size-4'" weight="BoldDuotone" />
+        </span>
       </Button>
     </DropdownMenuTrigger>
-    <DropdownMenuContent align="end" class="w-56">
+    <!--
+      `align="start"`, like every other menu in this row. It was `end`, so this
+      was the one control whose menu grew to the LEFT of its trigger while the
+      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">
+      <!-- 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>
+      <!--
+        A tick, not just violet text. The mark says WHICH row is in effect, and
+        a reader who cannot separate the two hues gets nothing from a colour —
+        the same reason the market switcher puts a check on its active option.
+      -->
       <DropdownMenuItem class="gap-2" @select="applyDefault">
-        <span class="flex-1 truncate">{{ allLabel }}</span>
-        <span v-if="isDefault" class="text-xs text-primary">{{ t("shared.datatable.savedviews.active.badge") }}</span>
+        <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">
         <DropdownMenuSeparator />
         <DropdownMenuItem
           v-for="v in views"
-          :key="v.name"
+          :key="v.id"
           class="gap-2"
+          :aria-current="isActive(v) ? 'true' : void 0"
           @select="applyView(v)"
         >
-          <span class="flex-1 truncate">{{ v.name }}</span>
+          <span class="min-w-0 flex-1 truncate" :class="isActive(v) ? 'font-medium text-primary' : ''">{{ v.name }}</span>
+          <CheckCircle v-if="isActive(v)" :size="14" weight="Bold" class="shrink-0 text-primary" />
           <span
             role="button"
-            class="text-muted-foreground transition-colors hover:text-rose-600"
+            class="shrink-0 text-muted-foreground transition-colors hover:text-rose-600"
             :aria-label="t('shared.datatable.savedviews.delete.aria', { name: v.name })"
             @click.stop="deleteTarget = v"
             @pointerdown.stop.prevent
@@ -130,9 +141,18 @@ function remove() {
         </DropdownMenuItem>
       </template>
       <DropdownMenuSeparator />
-      <DropdownMenuItem @select="openSave">
-        {{ t("shared.datatable.savedviews.action.savecurrent") }}
+      <DropdownMenuItem class="gap-2" @select="openSave">
+        <Diskette :size="14" class="shrink-0 text-muted-foreground" />
+        <span class="flex-1">{{ t("shared.datatable.savedviews.action.savecurrent") }}</span>
       </DropdownMenuItem>
+      <!--
+        Where the last read or write actually landed. One line, and only when
+        the answer is the surprising one: a control that claims nothing is
+        better than one that claims a sync it did not get.
+      -->
+      <p v-if="!store.durable" class="px-2 pt-1.5 pb-1 text-xs text-muted-foreground">
+        {{ t("shared.datatable.savedviews.local.note") }}
+      </p>
     </DropdownMenuContent>
   </DropdownMenu>
 
@@ -158,7 +178,7 @@ function remove() {
         <Button variant="outline" @click="saveOpen = false">
           {{ t("shared.datatable.savedviews.savedialog.action.cancel") }}
         </Button>
-        <Button :disabled="!saveName.trim()" @click="save">
+        <Button :disabled="!saveName.trim() || saving" @click="save">
           {{ t("shared.datatable.savedviews.savedialog.action.save") }}
         </Button>
       </DialogFooter>

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

@@ -1,6 +1,10 @@
 import type { DataTableSavedViews } from './types.js';
 type __VLS_Props = {
     config: DataTableSavedViews;
+    /** 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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: 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>;
 export default _default;

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

@@ -1,6 +1,8 @@
 import type { DataTableColumn, SortState } from './types.js';
 type __VLS_Props = {
     columns: DataTableColumn[];
+    /** Matches the row it sits in; `sm` is the 32px square its neighbours are. */
+    size?: 'sm' | 'default';
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue: SortState;
@@ -9,5 +11,7 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     "update:modelValue": (value: SortState) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: SortState) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    size: "sm" | "default";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,22 +1,32 @@
 <script setup>
-import { AltArrowDown, SortVertical } from "#solar-icons";
+import { CheckCircle, RoundSortVertical, SortFromBottomToTop, SortFromTopToBottom } from "#solar-icons";
 import {
   Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuTrigger
 } from "@revenexx/studio";
 const props = defineProps({
-  columns: { type: Array, required: true }
+  columns: { type: Array, required: true },
+  size: { type: String, required: false, default: "sm" }
 });
 const sort = defineModel({ type: Object, ...{ required: true } });
 const t = useT();
+const sorted = computed(() => Boolean(sort.value.column && sort.value.direction));
+const icon = computed(() => {
+  if (!sorted.value) return RoundSortVertical;
+  return sort.value.direction === "asc" ? SortFromBottomToTop : SortFromTopToBottom;
+});
 const label = computed(() => {
   const col = props.columns.find((c) => c.key === sort.value.column);
-  if (!col || !sort.value.direction) return t("shared.datatable.sortmenu.label.default");
+  if (!col || !sorted.value) return t("shared.datatable.sortmenu.label.default");
   return `${col.label} ${sort.value.direction === "asc" ? "\u2191" : "\u2193"}`;
 });
+function isActive(key, direction) {
+  return sort.value.column === key && sort.value.direction === direction;
+}
 function pick(key, direction) {
   sort.value = { column: key, direction };
 }
@@ -25,21 +35,39 @@ function pick(key, direction) {
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
-      <Button variant="outline" size="sm" class="h-7 gap-1.5 text-sm" :aria-label="t('shared.datatable.sortmenu.aria')">
-        <SortVertical :size="14" />
-        {{ label }}
-        <AltArrowDown :size="12" class="opacity-60" />
+      <Button
+        :variant="sorted ? 'default' : 'outline'"
+        :size="size === 'sm' ? 'icon-sm' : 'icon'"
+        :data-active="sorted"
+        :aria-label="t('shared.datatable.sortmenu.aria', { sort: label })"
+        :title="t('shared.datatable.sortmenu.aria', { sort: label })"
+      >
+        <!-- Violet while idle like the filter trigger and the column picker
+             beside it; on the filled face the icon takes the button's own
+             foreground, or it would be violet on violet. -->
+        <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>
       </Button>
     </DropdownMenuTrigger>
-    <DropdownMenuContent align="start" class="w-52">
+    <DropdownMenuContent align="start" class="w-56">
+      <DropdownMenuLabel>{{ t("shared.datatable.sortmenu.heading") }}</DropdownMenuLabel>
       <template v-for="col in columns" :key="col.key">
         <DropdownMenuItem class="gap-2" @select="pick(col.key, 'asc')">
-          <span class="flex-1 truncate">{{ col.label }} ↑</span>
-          <span v-if="sort.column === col.key && sort.direction === 'asc'" class="text-xs text-primary">{{ t("shared.datatable.sortmenu.active.badge") }}</span>
+          <SortFromBottomToTop weight="Linear" :size="13" class="shrink-0 text-muted-foreground" />
+          <span
+            class="min-w-0 flex-1 truncate"
+            :class="isActive(col.key, 'asc') ? 'font-medium text-primary' : ''"
+          >{{ col.label }}</span>
+          <CheckCircle v-if="isActive(col.key, 'asc')" :size="14" weight="Bold" class="shrink-0 text-primary" />
         </DropdownMenuItem>
         <DropdownMenuItem class="gap-2" @select="pick(col.key, 'desc')">
-          <span class="flex-1 truncate">{{ col.label }} ↓</span>
-          <span v-if="sort.column === col.key && sort.direction === 'desc'" class="text-xs text-primary">{{ t("shared.datatable.sortmenu.active.badge") }}</span>
+          <SortFromTopToBottom weight="Linear" :size="13" class="shrink-0 text-muted-foreground" />
+          <span
+            class="min-w-0 flex-1 truncate"
+            :class="isActive(col.key, 'desc') ? 'font-medium text-primary' : ''"
+          >{{ col.label }}</span>
+          <CheckCircle v-if="isActive(col.key, 'desc')" :size="14" weight="Bold" class="shrink-0 text-primary" />
         </DropdownMenuItem>
       </template>
     </DropdownMenuContent>

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

@@ -1,6 +1,8 @@
 import type { DataTableColumn, SortState } from './types.js';
 type __VLS_Props = {
     columns: DataTableColumn[];
+    /** Matches the row it sits in; `sm` is the 32px square its neighbours are. */
+    size?: 'sm' | 'default';
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue: SortState;
@@ -9,5 +11,7 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     "update:modelValue": (value: SortState) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: SortState) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    size: "sm" | "default";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Media/MediaPickerDialog.d.vue.ts

@@ -6,11 +6,11 @@ type __VLS_Props = {
     kinds?: string[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (assets: StorageAsset[]) => any;
     "update:open": (value: boolean) => any;
+    select: (assets: StorageAsset[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelect?: ((assets: StorageAsset[]) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onSelect?: ((assets: StorageAsset[]) => any) | undefined;
 }>, {
     multiple: boolean;
     kinds: string[];

package/dist/runtime/components/Media/MediaPickerDialog.vue.d.ts

@@ -6,11 +6,11 @@ type __VLS_Props = {
     kinds?: string[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (assets: StorageAsset[]) => any;
     "update:open": (value: boolean) => any;
+    select: (assets: StorageAsset[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelect?: ((assets: StorageAsset[]) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onSelect?: ((assets: StorageAsset[]) => any) | undefined;
 }>, {
     multiple: boolean;
     kinds: string[];

package/dist/runtime/components/Media/MediaUploader.d.vue.ts

@@ -14,16 +14,16 @@ type __VLS_Props = {
     folderName: string | null;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
     done: (summary: {
         created: number;
         failed: number;
     }) => any;
-    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onDone?: ((summary: {
         created: number;
         failed: number;
     }) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Media/MediaUploader.vue.d.ts

@@ -14,16 +14,16 @@ type __VLS_Props = {
     folderName: string | null;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
     done: (summary: {
         created: number;
         failed: number;
     }) => any;
-    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onDone?: ((summary: {
         created: number;
         failed: number;
     }) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Shared/SortHeader.vue

@@ -18,11 +18,15 @@ const sortIcon = computed(() => {
 <template>
   <button
     type="button"
-    class="group inline-flex cursor-pointer items-center gap-1.5 -m-1 p-1 rounded-md text-left transition-colors hover:text-primary"
+    class="group inline-flex min-w-0 max-w-full cursor-pointer items-center gap-1.5 -m-1 p-1 rounded-md text-left transition-colors hover:text-primary"
     :class="alignRight ? 'flex-row-reverse w-full justify-end' : ''"
     @click="emit('toggle', column)"
   >
-    <slot />
+    <!-- The label truncates. Without this the button is as wide as its words
+         and a heading longer than its column simply prints over the next one —
+         "SortierungGeändert" on a category list, with no hint that two columns
+         are involved. The cell carries the full text as its `title`. -->
+    <span class="min-w-0 truncate"><slot /></span>
     <component
       :is="sortIcon"
       weight="Linear"

package/dist/runtime/components/Shared/TabBar.d.vue.ts

@@ -1,10 +1,22 @@
 /**
- * Underline tab bar — the standard cockpit detail-page tabs. A full-width
- * hairline sits behind the row; the active/hover indicator is a 2px bar that
- * spans exactly the label width (inset-x-3 = the px-3 padding), sitting on the
- * baseline over the hairline. Active = primary; hover = soft primary. Tabs
- * scroll horizontally on overflow. To bleed the line to the panel edges, pass
- * e.g. `class="-mx-4 px-4"` from a padded page.
+ * Underline tab bar — the standard cockpit tabs. A full-width hairline sits
+ * behind the row; the active/hover indicator is a 2px bar spanning exactly the
+ * label width (inset-x-2.5 = the button's px-2.5), sitting on the baseline over
+ * the hairline. Active = primary; hover = soft primary. Tabs scroll
+ * horizontally on overflow. To bleed the line to the panel edges, pass e.g.
+ * `class="-mx-4 px-4"` from a padded page.
+ *
+ * ## `sticky`
+ *
+ * On by default, because the original job was a detail page: the row glues
+ * itself to the bottom of the sticky `PageHeader` (hence the magic `57px`) and
+ * frosts its background so content scrolls through.
+ *
+ * Off for a row INSIDE a panel — the queue tabs between a DataTable's toolbar
+ * and its header, say. There the offset is wrong (there is no page header above
+ * it) and the frosted layer is worse than nothing, because the panel already
+ * has a background of its own and the blur only muddies the rows scrolling past
+ * underneath. Same tabs, same indicator, same hairline; just not pinned.
  */
 export interface TabItem {
     key: string;
@@ -14,10 +26,14 @@ export interface TabItem {
 type __VLS_Props = {
     tabs: TabItem[];
     modelValue: string;
+    /** Pin to the page header. Off for a bar inside a panel. */
+    sticky?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (key: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((key: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    sticky: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Shared/TabBar.vue

@@ -1,7 +1,8 @@
 <script setup>
 defineProps({
   tabs: { type: Array, required: true },
-  modelValue: { type: String, required: true }
+  modelValue: { type: String, required: true },
+  sticky: { type: Boolean, required: false, default: true }
 });
 defineEmits(["update:modelValue"]);
 </script>
@@ -11,7 +12,7 @@ defineEmits(["update:modelValue"]);
        pt-4 pb-3 + text-xl line + 1px border) so header and tabs stay glued as
        one unit while the panel scrolls. Glassy frosted bg (blur + low opacity)
        lets content scroll through. -->
-  <div class="sticky top-[57px] z-10 bg-white/40 backdrop-blur-xl">
+  <div :class="sticky ? 'sticky top-[57px] z-10 bg-white/40 backdrop-blur-xl' : 'relative'">
     <!-- Pull the row out by the tab padding so the first/last label sits flush
          with the surrounding content (headline) edges. -->
     <div class="relative z-10 -mx-2.5 flex gap-1 overflow-x-auto">

package/dist/runtime/components/Shared/TabBar.vue.d.ts

@@ -1,10 +1,22 @@
 /**
- * Underline tab bar — the standard cockpit detail-page tabs. A full-width
- * hairline sits behind the row; the active/hover indicator is a 2px bar that
- * spans exactly the label width (inset-x-3 = the px-3 padding), sitting on the
- * baseline over the hairline. Active = primary; hover = soft primary. Tabs
- * scroll horizontally on overflow. To bleed the line to the panel edges, pass
- * e.g. `class="-mx-4 px-4"` from a padded page.
+ * Underline tab bar — the standard cockpit tabs. A full-width hairline sits
+ * behind the row; the active/hover indicator is a 2px bar spanning exactly the
+ * label width (inset-x-2.5 = the button's px-2.5), sitting on the baseline over
+ * the hairline. Active = primary; hover = soft primary. Tabs scroll
+ * horizontally on overflow. To bleed the line to the panel edges, pass e.g.
+ * `class="-mx-4 px-4"` from a padded page.
+ *
+ * ## `sticky`
+ *
+ * On by default, because the original job was a detail page: the row glues
+ * itself to the bottom of the sticky `PageHeader` (hence the magic `57px`) and
+ * frosts its background so content scrolls through.
+ *
+ * Off for a row INSIDE a panel — the queue tabs between a DataTable's toolbar
+ * and its header, say. There the offset is wrong (there is no page header above
+ * it) and the frosted layer is worse than nothing, because the panel already
+ * has a background of its own and the blur only muddies the rows scrolling past
+ * underneath. Same tabs, same indicator, same hairline; just not pinned.
  */
 export interface TabItem {
     key: string;
@@ -14,10 +26,14 @@ export interface TabItem {
 type __VLS_Props = {
     tabs: TabItem[];
     modelValue: string;
+    /** Pin to the page header. Off for a bar inside a panel. */
+    sticky?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (key: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((key: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    sticky: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/composables/useDashboards.d.ts

@@ -0,0 +1,27 @@
+import type { ComputedRef } from 'vue';
+import type { Dashboard, DashboardScope, DashboardWritePayload } from '../types/dashboard.js';
+export declare class DashboardApiError extends Error {
+    status: number;
+    constructor(status: number, message: string);
+}
+export interface UseDashboardsOptions {
+    /** Where the dashboard routes live. The cockpit serves them from Nitro. */
+    base?: string;
+}
+export declare function useDashboards(scope: DashboardScope, options?: UseDashboardsOptions): {
+    scope: DashboardScope;
+    dashboards: ComputedRef<Dashboard[]>;
+    defaultId: ComputedRef<string | null>;
+    loading: ComputedRef<boolean>;
+    saving: ComputedRef<boolean>;
+    error: ComputedRef<string | null>;
+    load: (force?: boolean) => Promise<Dashboard[]>;
+    resolve: (slug: string | null) => Dashboard | null;
+    create: (payload: DashboardWritePayload & {
+        name: string;
+    }) => Promise<Dashboard>;
+    save: (id: string, payload: DashboardWritePayload) => Promise<Dashboard>;
+    remove: (id: string) => Promise<void>;
+    duplicate: (id: string) => Promise<Dashboard>;
+    setDefault: (id: string | null) => Promise<void>;
+};