@revenexx/studio-shared 0.3.2 → 0.3.3

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>;
+};

package/dist/runtime/composables/useDashboards.js

@@ -0,0 +1,143 @@
+import { computed, ref } from "vue";
+export class DashboardApiError extends Error {
+  constructor(status, message) {
+    super(message);
+    this.status = status;
+    this.name = "DashboardApiError";
+  }
+}
+export function useDashboards(scope, options = {}) {
+  const base = options.base ?? "/api/cockpit";
+  const auth = usePlatformAuth();
+  const tenant = usePlatformTenant();
+  const key = (name) => `studio.dashboards.${scope}.${name}`;
+  const dashboards = useState(key("list"), () => []);
+  const defaultId = useState(key("defaultId"), () => null);
+  const loaded = useState(key("loaded"), () => false);
+  const loading = useState(key("loading"), () => false);
+  const saving = useState(key("saving"), () => false);
+  const error = useState(key("error"), () => null);
+  const inFlight = ref(null);
+  async function headers() {
+    const token = await auth.getToken();
+    if (!token) throw new DashboardApiError(401, "Not signed in.");
+    if (!tenant.slug.value) await tenant.load();
+    const slug = tenant.slug.value;
+    if (!slug) throw new DashboardApiError(400, "No active tenant.");
+    return { Authorization: `Bearer ${token}`, "X-Revenexx-Tenant": slug };
+  }
+  function fail(err) {
+    const e = err;
+    const status = e.status ?? e.statusCode ?? e.response?.status ?? 0;
+    const message = e.data?.statusMessage ?? e.data?.message ?? e.statusMessage ?? e.message ?? "The dashboard service did not answer.";
+    throw new DashboardApiError(status, message);
+  }
+  async function call(path, init = {}) {
+    try {
+      return await $fetch(`${base}${path}`, {
+        method: init.method ?? "GET",
+        headers: await headers(),
+        query: init.query,
+        body: init.body
+      });
+    } catch (err) {
+      if (err instanceof DashboardApiError) throw err;
+      fail(err);
+    }
+  }
+  function replace(updated) {
+    const idx = dashboards.value.findIndex((d) => d.id === updated.id);
+    dashboards.value = idx === -1 ? [...dashboards.value, updated] : dashboards.value.map((d) => d.id === updated.id ? updated : d);
+  }
+  async function run(force) {
+    loading.value = true;
+    error.value = null;
+    try {
+      const res = await call("/dashboards", { query: { scope } });
+      dashboards.value = res.dashboards;
+      defaultId.value = res.defaultDashboardId;
+      loaded.value = true;
+    } catch (err) {
+      error.value = err.message;
+      if (force) throw err;
+    } finally {
+      loading.value = false;
+    }
+    return dashboards.value;
+  }
+  async function load(force = false) {
+    if (inFlight.value) return inFlight.value;
+    if (loaded.value && !force) return dashboards.value;
+    inFlight.value = run(force);
+    try {
+      return await inFlight.value;
+    } finally {
+      inFlight.value = null;
+    }
+  }
+  async function create(payload) {
+    saving.value = true;
+    try {
+      const created = await call("/dashboards", { method: "POST", body: { ...payload, scope } });
+      replace(created);
+      return created;
+    } finally {
+      saving.value = false;
+    }
+  }
+  async function save(id, payload) {
+    const current = dashboards.value.find((d) => d.id === id);
+    saving.value = true;
+    try {
+      const updated = await call(`/dashboards/${id}`, {
+        method: "PATCH",
+        // The version travels with every write: a stale one is a 409 rather
+        // than a silent overwrite of the other tab's edit.
+        body: { ...payload, version: payload.version ?? current?.version }
+      });
+      replace(updated);
+      return updated;
+    } finally {
+      saving.value = false;
+    }
+  }
+  async function remove(id) {
+    await call(`/dashboards/${id}`, { method: "DELETE" });
+    dashboards.value = dashboards.value.filter((d) => d.id !== id);
+    if (defaultId.value === id) defaultId.value = null;
+  }
+  async function duplicate(id) {
+    const copy = await call(`/dashboards/${id}/duplicate`, { method: "POST" });
+    replace(copy);
+    return copy;
+  }
+  async function setDefault(id) {
+    await call(`/dashboards/${id ?? "none"}/default`, { method: "PUT", body: { scope } });
+    defaultId.value = id;
+    dashboards.value = dashboards.value.map((d) => ({ ...d, isDefault: d.id === id }));
+  }
+  function resolve(slug) {
+    const list = dashboards.value;
+    if (!list.length) return null;
+    if (slug) {
+      const named = list.find((d) => d.slug === slug);
+      if (named) return named;
+    }
+    return list.find((d) => d.id === defaultId.value) ?? list[0] ?? null;
+  }
+  return {
+    scope,
+    dashboards: computed(() => dashboards.value),
+    defaultId: computed(() => defaultId.value),
+    loading: computed(() => loading.value),
+    saving: computed(() => saving.value),
+    error: computed(() => error.value),
+    load,
+    resolve,
+    create,
+    save,
+    remove,
+    duplicate,
+    setDefault
+  };
+}

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

@@ -0,0 +1,44 @@
+/**
+ * Saved-views storage provider — the DEFAULT (PE-608).
+ *
+ * ## Why this is a seam and not just an API call
+ *
+ * `SavedViewsMenu` ships inside `@revenexx/studio-shared`, which is published
+ * into hosts that have no cockpit backend: the standalone Commerce Studio dev
+ * host, and anything else that installs the module for its DataTable. So the
+ * component cannot reach for `/api/cockpit/saved-views` — it would 404 in every
+ * host but one, and the control would be permanently broken there.
+ *
+ * Same shape as `usePlatformAuth`, `usePlatformTenant` and `useMediaLibrary`:
+ * this file is the default, registered at `priority: -1`, and the cockpit ships
+ * a same-named app-level composable that wins. Here, views are kept in
+ * `localStorage`, which is exactly what the menu did before — so a bare host
+ * behaves as it always has, and only the cockpit gains the account-backed copy.
+ *
+ * ## Why `id` exists in a localStorage implementation
+ *
+ * The server keys a view by a uuid and the menu deletes by it. Making the local
+ * store agree means the component has one code path instead of two, and a
+ * `name`-keyed delete cannot be quietly wrong about which of two views with the
+ * same name it removed. The id is derived from the surface and the name, which
+ * is stable across reloads and is all the uniqueness a browser-local store has.
+ */
+/** One named snapshot of how a list was narrowed. */
+export interface StoredSavedView {
+    id: string;
+    name: string;
+    snapshot: unknown;
+}
+export interface SavedViewsStore {
+    /** Read this surface's views. Never throws — a failure is an empty list. */
+    list: (surface: string) => Promise<StoredSavedView[]>;
+    /** Save under a name, replacing what that name held. */
+    save: (surface: string, name: string, snapshot: unknown) => Promise<StoredSavedView>;
+    remove: (surface: string, id: string) => Promise<void>;
+    /**
+     * Does this store survive a new browser? The menu says so in one line, so
+     * "saved to your account" and "saved in this browser only" stay honest.
+     */
+    readonly durable: boolean;
+}
+export declare function useSavedViews(): SavedViewsStore;

package/dist/runtime/composables/useSavedViews.js

@@ -0,0 +1,44 @@
+function localId(surface, name) {
+  return `local:${surface}::${name}`;
+}
+function readAll(surface) {
+  try {
+    if (typeof window === "undefined") return [];
+    const raw = window.localStorage.getItem(surface);
+    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").map((v) => ({ id: localId(surface, v.name), name: v.name, snapshot: v.snapshot }));
+  } catch {
+    return [];
+  }
+}
+function writeAll(surface, views) {
+  try {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(surface, JSON.stringify(
+      views.map((v) => ({ name: v.name, snapshot: v.snapshot }))
+    ));
+  } catch {
+  }
+}
+export function useSavedViews() {
+  return {
+    durable: false,
+    async list(surface) {
+      return readAll(surface);
+    },
+    async save(surface, name, snapshot) {
+      const views = readAll(surface);
+      const entry = { id: localId(surface, name), name, snapshot };
+      const at = views.findIndex((v) => v.name === name);
+      if (at >= 0) views.splice(at, 1, entry);
+      else views.push(entry);
+      writeAll(surface, views);
+      return entry;
+    },
+    async remove(surface, id) {
+      writeAll(surface, readAll(surface).filter((v) => v.id !== id));
+    }
+  };
+}

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

@@ -0,0 +1,60 @@
+/**
+ * The narrowing a list was left in, kept across a page change (PE-608).
+ *
+ * Leaving a list to open a record — or to check another one — and coming back
+ * to an unfiltered table is the small tax every operator pays repeatedly: they
+ * re-tick the same facets, re-pick the same sort, and do it again the next
+ * time. The state is already a snapshot (it is what a saved view stores), so
+ * remembering the last one per surface costs nothing new.
+ *
+ * ## Why `sessionStorage` and not `localStorage`
+ *
+ * This is the decision worth arguing, because both are defensible and only one
+ * of them is safe by default.
+ *
+ * A sticky filter is a known way to lose people. An operator opens Orders, sees
+ * three rows out of twenty-three thousand, and concludes the data is gone —
+ * because the filter that did it was set last Tuesday and nothing on screen
+ * looks like an answer to "why is this list short". That is a support ticket,
+ * and a scary one.
+ *
+ * Two things make it safe here rather than merely convenient:
+ *
+ *  1. **It is visible.** The chip strip under the toolbar names every applied
+ *     value and the trigger is lit. A restored narrowing announces itself; the
+ *     version of this feature that is dangerous is the one you cannot see.
+ *  2. **It ends with the tab.** `sessionStorage` survives a navigation and a
+ *     reload — which is what "come back to the list" means — and is gone when
+ *     the tab closes. Tomorrow morning is a fresh list. `localStorage` would
+ *     carry Friday's filter into Monday, and `localStorage` is also what the
+ *     saved views deliberately stopped being: a durable narrowing is a thing
+ *     you NAME and store on your account, not something a list does to you.
+ *
+ * So: sticky within a session, explicit across them. Swapping the two is one
+ * identifier if that trade ever reads differently.
+ *
+ * ## What it does not do
+ *
+ * It does not write the URL. A link to a list is a link to the list, not to how
+ * one person last left it — pasting a narrowed URL into a ticket and having a
+ * colleague see something else is worse than either behaviour here. The queue
+ * pills are the linkable half, and they already carry `?queue=` on purpose.
+ */
+export interface StickyListView<T> {
+    /**
+     * The snapshot this surface was last left in, or `null`.
+     *
+     * Read once, deliberately: a surface restores on mount and owns its state
+     * from then on. A reactive value here would fight the surface for it.
+     */
+    read: () => T | null;
+    /** Remember the current snapshot. Call it whenever the surface's state moves. */
+    write: (snapshot: T) => void;
+    /** Forget this surface's state — what a "reset" should also do. */
+    clear: () => void;
+}
+/**
+ * @param key A stable identifier for the surface — the same route pattern the
+ *   saved views are keyed by, so two lists never share a memory.
+ */
+export declare function useStickyListView<T>(key: string): StickyListView<T>;

package/dist/runtime/composables/useStickyListView.js

@@ -0,0 +1,32 @@
+const VERSION = 1;
+export function useStickyListView(key) {
+  const storageKey = `commerce.listState.${key}`;
+  return {
+    read() {
+      try {
+        if (typeof window === "undefined") return null;
+        const raw = window.sessionStorage.getItem(storageKey);
+        if (!raw) return null;
+        const parsed = JSON.parse(raw);
+        if (!parsed || parsed.v !== VERSION) return null;
+        return parsed.snapshot ?? null;
+      } catch {
+        return null;
+      }
+    },
+    write(snapshot) {
+      try {
+        if (typeof window === "undefined") return;
+        window.sessionStorage.setItem(storageKey, JSON.stringify({ v: VERSION, snapshot }));
+      } catch {
+      }
+    },
+    clear() {
+      try {
+        if (typeof window === "undefined") return;
+        window.sessionStorage.removeItem(storageKey);
+      } catch {
+      }
+    }
+  };
+}