@ai-matrx/vault 0.1.21 → 0.1.22

package/dist/index.js

@@ -849,6 +849,19 @@ import { formatAbsoluteDate as formatAbsoluteDate2 } from "@ai-matrx/kit/format"
 import { formatRelativeTime } from "@ai-matrx/kit/format";
 
 // src/model.ts
+function manageUnavailableReason(item) {
+  if (item.capabilities.canManage) return null;
+  if (item.owner.memberShared) return "Only the member who owns it can share, move or delete it";
+  if (item.owner.kind === "shared") return "Only its owner can share, move or delete it";
+  if (item.owner.kind === "organization") return "Only this organization's vault admins can change that";
+  return "You can use this item but not share, move or delete it";
+}
+function ownerDetail(owner) {
+  if (owner.memberShared) return `A member's own credential, shared into ${owner.label}`;
+  if (owner.kind === "organization") return `Organization: ${owner.label}`;
+  if (owner.kind === "shared") return "Shared with you by its owner";
+  return "Your own vault";
+}
 var DEFAULT_LOCATION = { vault: "all", view: "all", q: "", sort: "name", itemId: null, mode: "view", kind: null, url: "", panel: null };
 var SORTS = ["name", "name-desc", "website", "updated", "created", "viewed"];
 function locationFromParams(params, itemId = params.get("item")) {
@@ -5991,6 +6004,7 @@ function ItemPane(props) {
   const setValue = (key, v) => setDraft((d) => ({ ...d, values: { ...d.values, [key]: v } }));
   const canEdit = item ? item.capabilities.canEdit || item.capabilities.canManage : true;
   const canManage = item?.capabilities.canManage ?? false;
+  const manageReason = item ? manageUnavailableReason(item) : null;
   async function save() {
     if (!definition && !item) return;
     setBusy(true);
@@ -6137,7 +6151,8 @@ function ItemPane(props) {
       /* @__PURE__ */ jsx27("h2", { className: "truncate text-base font-semibold leading-tight", children: editing ? draft.name || (mode === "new" ? `New ${typeLabel.toLowerCase()}` : item?.name) : item?.name }),
       /* @__PURE__ */ jsxs25("span", { className: "flex min-w-0 items-center gap-1 text-xs text-muted-foreground", children: [
         typeLabel ? /* @__PURE__ */ jsx27("span", { className: "truncate", children: typeLabel }) : null,
-        shownOwner ? /* @__PURE__ */ jsx27(Badge7, { className: "shrink-0", icon: shownOwner.glyph, "aria-label": `Saved in ${shownOwner.label}`, children: shownOwner.label }) : null,
+        shownOwner ? /* @__PURE__ */ jsx27(Badge7, { className: "shrink-0", icon: shownOwner.glyph, "aria-label": `Saved in ${shownOwner.label}`, title: item && mode !== "new" ? ownerDetail(item.owner) : void 0, children: shownOwner.label }) : null,
+        item && mode !== "new" && item.owner.memberShared ? /* @__PURE__ */ jsx27("span", { className: "shrink-0", "data-member-shared": "", children: "\xB7 A member\u2019s own" }) : null,
         item && !editing ? /* @__PURE__ */ jsx27(SharingSummary, { item, port, className: "hidden truncate before:mr-1 before:content-['\xB7'] sm:inline" }, `${item.updatedAt}-${refreshKey ?? ""}`) : null
       ] })
     ] }),
@@ -6175,9 +6190,9 @@ function ItemPane(props) {
             /* @__PURE__ */ jsx27(ShareGlyph, { className: "size-4" }),
             "Share"
           ] }) : null,
-          canManage ? /* @__PURE__ */ jsxs25(DropdownMenuItem3, { onSelect: () => onPanel("move"), children: [
+          canManage || item.capabilities.canEdit ? /* @__PURE__ */ jsxs25(DropdownMenuItem3, { onSelect: () => onPanel("move"), children: [
             /* @__PURE__ */ jsx27(MoveGlyph, { className: "size-4" }),
-            "Move or copy"
+            canManage ? "Move or copy" : "Copy to\u2026"
           ] }) : null,
           item.capabilities.canReveal ? /* @__PURE__ */ jsxs25(DropdownMenuItem3, { onSelect: () => onPanel("send"), children: [
             /* @__PURE__ */ jsx27(SendGlyph, { className: "size-4" }),
@@ -6201,6 +6216,17 @@ function ItemPane(props) {
               /* @__PURE__ */ jsx27(TrashGlyph, { className: "size-4" }),
               "Delete"
             ] })
+          ] }) : manageReason ? /* @__PURE__ */ jsxs25(Fragment18, { children: [
+            /* @__PURE__ */ jsx27(DropdownMenuSeparator3, {}),
+            /* @__PURE__ */ jsxs25(DropdownMenuItem3, { disabled: true, children: [
+              /* @__PURE__ */ jsx27(ShareGlyph, { className: "size-4" }),
+              "Share"
+            ] }),
+            /* @__PURE__ */ jsxs25(DropdownMenuItem3, { disabled: true, children: [
+              /* @__PURE__ */ jsx27(TrashGlyph, { className: "size-4" }),
+              "Delete"
+            ] }),
+            /* @__PURE__ */ jsx27("div", { className: "max-w-64 px-2 py-1.5 text-xs text-muted-foreground", "data-manage-reason": "", children: manageReason })
           ] }) : null
         ] })
       ] })
@@ -6431,6 +6457,17 @@ function ItemPane(props) {
   ] }) });
 }
 
+// src/row-menu.ts
+var readers = /* @__PURE__ */ new WeakMap();
+function registerRowMenu(el, read) {
+  if (el) readers.set(el, read);
+}
+function rowMenuEntriesAt(target) {
+  const row = target?.closest("[data-item]");
+  const read = row ? readers.get(row) : void 0;
+  return read ? read() : [];
+}
+
 // src/ItemList.tsx
 import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 var RECOVERY_KEYS = /^recovery_codes?$/;
@@ -6452,7 +6489,7 @@ function subtitleOf(item, withOwner) {
   const what = loginSiteOf(item) || item.definitionLabel;
   return withOwner ? `${what} \xB7 ${item.owner.label}` : what;
 }
-function ItemList({ title, items, definitions, port, selectedId, onSelect, query, onQuery, sort, onSort, onNew, matchingIds, header, showOwner, canSortViewed = false, onRefresh, refreshing = false, rowContextMenu = "package", rowMenuItems }) {
+function ItemList({ title, items, definitions, port, selectedId, onSelect, query, onQuery, sort, onSort, onNew, matchingIds, header, showOwner, canSortViewed = false, onRefresh, refreshing = false, rowContextMenu = "package", rowMenuItems, stillLoading, favorites, onToggleFavorite }) {
   const sorts = SORTS2.filter((s) => canSortViewed || s.value !== "viewed");
   const pinned = matchingIds ? items.filter((i) => matchingIds.has(i.id)) : [];
   const rest = matchingIds ? items.filter((i) => !matchingIds.has(i.id)) : items;
@@ -6473,7 +6510,7 @@ function ItemList({ title, items, definitions, port, selectedId, onSelect, query
     }
   };
   const mixedOwners = showOwner ?? new Set(items.map((i) => i.owner.organizationId ?? i.owner.kind)).size > 1;
-  const row = (i) => /* @__PURE__ */ jsx28(ListRow, { item: i, family: familyOf2(i.definitionKey), port, on: i.id === selectedId, onSelect, withOwner: mixedOwners, ownContextMenu: rowContextMenu === "package", extra: rowMenuItems }, i.id);
+  const row = (i) => /* @__PURE__ */ jsx28(ListRow, { item: i, family: familyOf2(i.definitionKey), port, on: i.id === selectedId, onSelect, withOwner: mixedOwners, ownContextMenu: rowContextMenu === "package", extra: rowMenuItems, favorite: onToggleFavorite ? { on: favorites?.has(i.id) ?? false, toggle: () => onToggleFavorite(i.id) } : void 0 }, i.id);
   const sortLabel = sorts.find((s) => s.value === sort)?.label ?? "Name A\u2013Z";
   return /* @__PURE__ */ jsxs26("section", { "aria-label": title, className: "flex h-full min-h-0 flex-col border-r border-border bg-background", children: [
     /* @__PURE__ */ jsxs26("div", { className: "flex flex-col gap-2 px-3 pb-2 pt-3", children: [
@@ -6483,10 +6520,18 @@ function ItemList({ title, items, definitions, port, selectedId, onSelect, query
         /* @__PURE__ */ jsx28(Button23, { variant: "primary", icon: /* @__PURE__ */ jsx28(PlusGlyph, {}), "aria-label": "New item", onClick: onNew })
       ] }),
       /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between gap-2 px-1", children: [
-        /* @__PURE__ */ jsxs26("span", { className: "truncate text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs26("span", { className: "flex min-w-0 items-center gap-1.5 truncate text-xs text-muted-foreground", role: "status", "aria-live": "polite", children: [
           items.length,
           " ",
-          items.length === 1 ? "item" : "items"
+          items.length === 1 ? "item" : "items",
+          stillLoading && stillLoading.length > 0 ? /* @__PURE__ */ jsxs26("span", { className: "flex min-w-0 items-center gap-1 truncate", title: `Still loading ${stillLoading.join(", ")}`, "data-still-loading": "", children: [
+            /* @__PURE__ */ jsx28(RefreshGlyph, { className: "size-3 shrink-0 animate-spin" }),
+            /* @__PURE__ */ jsxs26("span", { className: "truncate", children: [
+              "loading ",
+              stillLoading.length === 1 ? stillLoading[0] : `${stillLoading.length} more`,
+              "\u2026"
+            ] })
+          ] }) : null
         ] }),
         /* @__PURE__ */ jsxs26("span", { className: "flex shrink-0 items-center gap-0.5", children: [
           onRefresh ? /* @__PURE__ */ jsx28(Button23, { variant: "quiet", icon: /* @__PURE__ */ jsx28(RefreshGlyph, { className: refreshing ? "animate-spin" : "" }), "aria-label": "Refresh", title: "Refresh the list", disabled: refreshing, onClick: onRefresh }) : null,
@@ -6498,7 +6543,7 @@ function ItemList({ title, items, definitions, port, selectedId, onSelect, query
       ] })
     ] }),
     /* @__PURE__ */ jsx28("div", { className: "min-h-0 flex-1 overflow-y-auto px-2 pb-3", onKeyDown, children: items.length === 0 ? /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-center gap-3 px-4 py-12 text-center", children: [
-      /* @__PURE__ */ jsx28("span", { className: "text-sm text-muted-foreground", children: query ? `Nothing matches \u201C${query}\u201D.` : "Nothing here yet." }),
+      /* @__PURE__ */ jsx28("span", { className: "text-sm text-muted-foreground", children: query ? `Nothing matches \u201C${query}\u201D.` : stillLoading && stillLoading.length > 0 ? "Still loading\u2026" : "Nothing here yet." }),
       query ? /* @__PURE__ */ jsx28(Button23, { variant: "outline", onClick: () => onQuery(""), children: "Clear search" }) : /* @__PURE__ */ jsx28(Button23, { variant: "outline", icon: /* @__PURE__ */ jsx28(PlusGlyph, {}), onClick: onNew, children: "New item" })
     ] }) : /* @__PURE__ */ jsxs26("ul", { ref: listRef, className: "flex flex-col gap-px", children: [
       pinned.length > 0 ? /* @__PURE__ */ jsx28("li", { className: "px-2 pb-1 pt-1 text-xs font-medium text-muted-foreground", children: "This page" }) : null,
@@ -6508,7 +6553,7 @@ function ItemList({ title, items, definitions, port, selectedId, onSelect, query
     ] }) })
   ] });
 }
-function ListRow({ item, family, port, on, onSelect, withOwner, ownContextMenu, extra }) {
+function ListRow({ item, family, port, on, onSelect, withOwner, ownContextMenu, extra, favorite }) {
   const confirmed = useConfirmed();
   const copy = useCopy();
   const notify = useNotify();
@@ -6536,9 +6581,32 @@ function ListRow({ item, family, port, on, onSelect, withOwner, ownContextMenu,
   const others = otherCopyFields(item, user, secret);
   const custom = canUse ? item.custom.filter((c) => c.value) : [];
   const hostEntries = extra?.(item) ?? [];
+  const copyEntries = [
+    ...user ? [{ id: "copy:username", kind: "copy", label: `Copy ${user.label.toLowerCase()}`, onSelect: copyUser }] : [],
+    ...secret ? [{ id: "copy:password", kind: "copy", label: "Copy password", onSelect: copyPassword }] : [],
+    ...code ? [{ id: "copy:code", kind: "copy", label: "Copy one-time code", onSelect: copyCode }] : [],
+    ...others.map((f) => ({ id: `copy:${f.key}`, kind: "copy", label: `Copy ${f.label.toLowerCase()}`, onSelect: () => void run(f.label, () => port.reveal(item, f.key), f.handling !== "visible") })),
+    ...custom.map((c) => ({ id: `copy:custom:${c.key}`, kind: "copy", label: `Copy ${c.label.toLowerCase()}`, onSelect: () => void copy(c.value, c.label, { secret: false }) }))
+  ];
+  const favoriteEntry = favorite ? { id: "favorite", kind: "favorite", label: favorite.on ? "Remove from favorites" : "Add to favorites", onSelect: favorite.toggle } : null;
+  const entries = [
+    ...copyEntries,
+    ...favoriteEntry ? [favoriteEntry] : [],
+    { id: "open", kind: "open", label: "Open", onSelect: () => onSelect(item.id) },
+    { id: "copy-name", kind: "copy-name", label: "Copy name", onSelect: copyName },
+    ...hostEntries.map((h) => ({ ...h, kind: h.kind ?? "host" }))
+  ];
+  const entriesRef = useRef15(entries);
+  entriesRef.current = entries;
+  const glyphOf = (e) => e.id === "copy:username" ? /* @__PURE__ */ jsx28(UserGlyph, { className: "size-4" }) : e.id === "copy:password" ? /* @__PURE__ */ jsx28(KeyGlyph, { className: "size-4" }) : e.id === "copy:code" ? /* @__PURE__ */ jsx28(ClockGlyph, { className: "size-4" }) : e.kind === "favorite" ? /* @__PURE__ */ jsx28(StarGlyph, { className: cn13("size-4", favorite?.on && "fill-current text-warning") }) : e.kind === "open" ? /* @__PURE__ */ jsx28(ChevronRightGlyph, { className: "size-4" }) : e.kind === "host" ? null : /* @__PURE__ */ jsx28(CopyIcon7, { className: "size-4" });
+  const menuItem = (e) => /* @__PURE__ */ jsxs26(DropdownMenuItem4, { disabled: e.disabled ?? false, onSelect: e.onSelect, children: [
+    glyphOf(e),
+    e.label
+  ] }, e.id ?? e.label);
   return /* @__PURE__ */ jsxs26(
     "li",
     {
+      ref: (el) => registerRowMenu(el, () => entriesRef.current),
       className: "group relative",
       "data-item": item.id,
       onContextMenu: ownContextMenu ? (e) => {
@@ -6564,7 +6632,8 @@ function ListRow({ item, family, port, on, onSelect, withOwner, ownContextMenu,
           }
         ),
         /* @__PURE__ */ jsxs26("div", { className: "absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center gap-0.5", "data-surface": on ? "primary" : void 0, children: [
-          user || secret ? /* @__PURE__ */ jsxs26("div", { className: cn13("hidden items-center gap-0.5 rounded-md pl-2 [@media(hover:hover)]:group-hover:flex [@media(hover:hover)]:group-focus-within:flex", on ? "bg-primary" : "bg-accent"), "data-row-quick": "", children: [
+          user || secret || favorite ? /* @__PURE__ */ jsxs26("div", { className: cn13("hidden items-center gap-0.5 rounded-md pl-2 [@media(hover:hover)]:group-hover:flex [@media(hover:hover)]:group-focus-within:flex", on ? "bg-primary" : "bg-accent"), "data-row-quick": "", children: [
+            favorite ? /* @__PURE__ */ jsx28(Button23, { variant: "quiet", icon: /* @__PURE__ */ jsx28(StarGlyph, { className: favorite.on ? "fill-current text-warning" : "" }), "aria-label": favorite.on ? "Remove from favorites" : "Add to favorites", "aria-pressed": favorite.on, onClick: favorite.toggle }) : null,
             user ? /* @__PURE__ */ jsx28(Button23, { variant: "quiet", icon: /* @__PURE__ */ jsx28(UserGlyph, {}), "aria-label": `Copy ${user.label}`, disabled: busy, onClick: copyUser }) : null,
             secret ? /* @__PURE__ */ jsx28(Button23, { variant: "quiet", icon: /* @__PURE__ */ jsx28(KeyGlyph, {}), "aria-label": "Copy password", disabled: busy, onClick: copyPassword }) : null
           ] }) : null,
@@ -6580,40 +6649,11 @@ function ListRow({ item, family, port, on, onSelect, withOwner, ownContextMenu,
               }
             ) }),
             /* @__PURE__ */ jsxs26(DropdownMenuContent4, { align: "end", children: [
-              user ? /* @__PURE__ */ jsxs26(DropdownMenuItem4, { onSelect: copyUser, children: [
-                /* @__PURE__ */ jsx28(UserGlyph, { className: "size-4" }),
-                "Copy ",
-                user.label.toLowerCase()
-              ] }) : null,
-              secret ? /* @__PURE__ */ jsxs26(DropdownMenuItem4, { onSelect: copyPassword, children: [
-                /* @__PURE__ */ jsx28(KeyGlyph, { className: "size-4" }),
-                "Copy password"
-              ] }) : null,
-              code ? /* @__PURE__ */ jsxs26(DropdownMenuItem4, { onSelect: copyCode, children: [
-                /* @__PURE__ */ jsx28(ClockGlyph, { className: "size-4" }),
-                "Copy one-time code"
-              ] }) : null,
-              others.map((f) => /* @__PURE__ */ jsxs26(DropdownMenuItem4, { onSelect: () => void run(f.label, () => port.reveal(item, f.key), f.handling !== "visible"), children: [
-                /* @__PURE__ */ jsx28(CopyIcon7, { className: "size-4" }),
-                "Copy ",
-                f.label.toLowerCase()
-              ] }, f.key)),
-              custom.map((c) => /* @__PURE__ */ jsxs26(DropdownMenuItem4, { onSelect: () => void copy(c.value, c.label, { secret: false }), children: [
-                /* @__PURE__ */ jsx28(CopyIcon7, { className: "size-4" }),
-                "Copy ",
-                c.label.toLowerCase()
-              ] }, `custom:${c.key}`)),
-              user || secret || code || others.length > 0 || custom.length > 0 ? /* @__PURE__ */ jsx28(DropdownMenuSeparator4, {}) : null,
-              /* @__PURE__ */ jsxs26(DropdownMenuItem4, { onSelect: () => onSelect(item.id), children: [
-                /* @__PURE__ */ jsx28(ChevronRightGlyph, { className: "size-4" }),
-                "Open"
-              ] }),
-              /* @__PURE__ */ jsxs26(DropdownMenuItem4, { onSelect: copyName, children: [
-                /* @__PURE__ */ jsx28(CopyIcon7, { className: "size-4" }),
-                "Copy name"
-              ] }),
+              copyEntries.map(menuItem),
+              copyEntries.length > 0 ? /* @__PURE__ */ jsx28(DropdownMenuSeparator4, {}) : null,
+              entries.filter((e) => e.kind === "favorite" || e.kind === "open" || e.kind === "copy-name").map(menuItem),
               hostEntries.length > 0 ? /* @__PURE__ */ jsx28(DropdownMenuSeparator4, {}) : null,
-              hostEntries.map((h) => /* @__PURE__ */ jsx28(DropdownMenuItem4, { onSelect: h.onSelect, children: h.label }, h.label))
+              entries.filter((e) => e.kind === "host").map(menuItem)
             ] })
           ] })
         ] })
@@ -8121,15 +8161,17 @@ import { Select as Select11 } from "@ai-matrx/design-system/controls";
 import { GlobeIcon as GlobeIcon5 } from "@ai-matrx/design-system/icons";
 import { jsx as jsx39, jsxs as jsxs37 } from "react/jsx-runtime";
 var AUTHENTICATOR_LABEL = "Authenticator";
-function vaultChoices(items, organizations, current) {
+function vaultChoices(items, organizations, _current) {
   const n = (f) => items.filter(f).length;
   const shared = n((i) => i.owner.kind === "shared");
   return [
     { value: "all", label: "All items", count: items.length },
     { value: "mine", label: "Personal", count: n((i) => i.owner.kind === "me") },
     ...shared > 0 ? [{ value: "shared", label: "Shared with me", count: shared }] : [],
-    // Only organizations that hold something; an empty one is a dead end in a vault list.
-    ...organizations.map((o) => ({ value: o.id, label: o.name, count: n((i) => i.owner.organizationId === o.id) })).filter((c) => c.count > 0 || c.value === current)
+    // Every organization the person belongs to, empty ones too: an empty vault opens on its own
+    // "Nothing here yet" with New item, so the first credential can go there. (The organization
+    // list carries no role, so who may add is the server's answer to the save, said in place.)
+    ...organizations.map((o) => ({ value: o.id, label: o.name, count: n((i) => i.owner.organizationId === o.id) }))
   ];
 }
 function VaultSelect({ value, choices, onChange }) {
@@ -8409,7 +8451,16 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
   const load = useCallback5(() => {
     setError(null);
     setRefreshError(null);
-    port.load().then(apply).catch((e) => {
+    let finished = false;
+    port.load((partial) => {
+      if (finished) return;
+      setSnap(partial);
+      setItems(partial.items);
+      setDeleted(partial.deleted);
+    }).then((s) => {
+      finished = true;
+      apply(s);
+    }).catch((e) => {
       setSignedOut(e?.status === 401);
       setError(e instanceof Error ? e.message : "The vault could not be loaded.");
     });
@@ -8526,59 +8577,62 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
   }
   const hasFavorites = port.lists.favorites !== void 0;
   const title = loc.vault === "all" && loc.view === "all" ? "All items" : viewLabel(loc.view, views);
-  const compactHeader = mode === "full" ? void 0 : /* @__PURE__ */ jsxs38("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto_auto] gap-2", children: [
-    /* @__PURE__ */ jsx40(VaultSelect, { value: loc.vault, choices, onChange: (vault) => go({ vault, itemId: null, panel: null }) }),
-    /* @__PURE__ */ jsx40(Select12, { value: loc.view, onValueChange: (view) => go({ view, itemId: null, panel: null }), options: viewOptions(views, inThisVault.length, deleted.length, hasFavorites, port.lists.recents !== void 0, host.page !== void 0), "aria-label": "Show" }),
-    /* @__PURE__ */ jsx40(
-      Button34,
-      {
-        variant: loc.view === "authenticator" ? "outline" : "quiet",
-        icon: /* @__PURE__ */ jsx40(LockGlyph, {}),
-        "aria-label": AUTHENTICATOR_LABEL,
-        "aria-pressed": loc.view === "authenticator",
-        title: AUTHENTICATOR_LABEL,
-        onClick: () => go({ view: loc.view === "authenticator" ? "all" : "authenticator", itemId: null, mode: "view", panel: null }),
-        children: mode === "split" ? AUTHENTICATOR_LABEL : null
-      }
-    ),
-    /* @__PURE__ */ jsxs38(DropdownMenu6, { children: [
-      /* @__PURE__ */ jsx40(DropdownMenuTrigger6, { asChild: true, children: /* @__PURE__ */ jsx40(Button34, { variant: "quiet", icon: /* @__PURE__ */ jsx40(MoreGlyph, {}), "aria-label": "Vault actions" }) }),
-      /* @__PURE__ */ jsxs38(DropdownMenuContent6, { align: "end", children: [
-        /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: () => go({ panel: "import" }), children: [
-          /* @__PURE__ */ jsx40(ImportGlyph, { className: "size-4" }),
-          "Import"
-        ] }),
-        /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: () => go({ panel: "export" }), children: [
-          /* @__PURE__ */ jsx40(ExportGlyph, { className: "size-4" }),
-          "Export"
-        ] }),
-        /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: () => go({ panel: "backup" }), children: [
-          /* @__PURE__ */ jsx40(SafeGlyph, { className: "size-4" }),
-          "Backup"
-        ] }),
-        /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: () => go({ panel: "devices" }), children: [
-          /* @__PURE__ */ jsx40(ShieldGlyph, { className: "size-4" }),
-          "Browsers that fill"
-        ] }),
-        host.nativeImport ? /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: () => go({ panel: "import-passkeys" }), children: [
-          /* @__PURE__ */ jsx40(ImportGlyph, { className: "size-4" }),
-          "Import passkeys"
-        ] }) : null,
-        host.nativeProvider && host.nativeProvider.status !== "unavailable" ? /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: host.nativeProvider.openSetup, children: [
-          /* @__PURE__ */ jsx40(ShieldGlyph, { className: "size-4" }),
-          "System AutoFill"
-        ] }) : null,
-        host.lock?.lock ? /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: () => void host.lock?.lock?.(), children: [
-          /* @__PURE__ */ jsx40(LockGlyph, { className: "size-4" }),
-          "Lock"
-        ] }) : null,
-        host.openWebVault ? /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: host.openWebVault, children: [
-          /* @__PURE__ */ jsx40(ExternalGlyph, { className: "size-4" }),
-          "Open on the web"
-        ] }) : null
+  const compactHeader = mode === "full" ? void 0 : (
+    // The two pickers keep a real width at every compact size (the list column is 19rem in split
+    // mode): the Authenticator button is icon-only beside them, its name in its tooltip.
+    /* @__PURE__ */ jsxs38("div", { className: "grid grid-cols-[minmax(6rem,1fr)_minmax(6rem,1fr)_auto_auto] gap-2", "data-vault-compact-header": "", children: [
+      /* @__PURE__ */ jsx40(VaultSelect, { value: loc.vault, choices, onChange: (vault) => go({ vault, itemId: null, panel: null }) }),
+      /* @__PURE__ */ jsx40(Select12, { value: loc.view, onValueChange: (view) => go({ view, itemId: null, panel: null }), options: viewOptions(views, inThisVault.length, deleted.length, hasFavorites, port.lists.recents !== void 0, host.page !== void 0), "aria-label": "Show" }),
+      /* @__PURE__ */ jsx40(
+        Button34,
+        {
+          variant: loc.view === "authenticator" ? "outline" : "quiet",
+          icon: /* @__PURE__ */ jsx40(LockGlyph, {}),
+          "aria-label": AUTHENTICATOR_LABEL,
+          "aria-pressed": loc.view === "authenticator",
+          title: AUTHENTICATOR_LABEL,
+          onClick: () => go({ view: loc.view === "authenticator" ? "all" : "authenticator", itemId: null, mode: "view", panel: null })
+        }
+      ),
+      /* @__PURE__ */ jsxs38(DropdownMenu6, { children: [
+        /* @__PURE__ */ jsx40(DropdownMenuTrigger6, { asChild: true, children: /* @__PURE__ */ jsx40(Button34, { variant: "quiet", icon: /* @__PURE__ */ jsx40(MoreGlyph, {}), "aria-label": "Vault actions" }) }),
+        /* @__PURE__ */ jsxs38(DropdownMenuContent6, { align: "end", children: [
+          /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: () => go({ panel: "import" }), children: [
+            /* @__PURE__ */ jsx40(ImportGlyph, { className: "size-4" }),
+            "Import"
+          ] }),
+          /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: () => go({ panel: "export" }), children: [
+            /* @__PURE__ */ jsx40(ExportGlyph, { className: "size-4" }),
+            "Export"
+          ] }),
+          /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: () => go({ panel: "backup" }), children: [
+            /* @__PURE__ */ jsx40(SafeGlyph, { className: "size-4" }),
+            "Backup"
+          ] }),
+          /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: () => go({ panel: "devices" }), children: [
+            /* @__PURE__ */ jsx40(ShieldGlyph, { className: "size-4" }),
+            "Browsers that fill"
+          ] }),
+          host.nativeImport ? /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: () => go({ panel: "import-passkeys" }), children: [
+            /* @__PURE__ */ jsx40(ImportGlyph, { className: "size-4" }),
+            "Import passkeys"
+          ] }) : null,
+          host.nativeProvider && host.nativeProvider.status !== "unavailable" ? /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: host.nativeProvider.openSetup, children: [
+            /* @__PURE__ */ jsx40(ShieldGlyph, { className: "size-4" }),
+            "System AutoFill"
+          ] }) : null,
+          host.lock?.lock ? /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: () => void host.lock?.lock?.(), children: [
+            /* @__PURE__ */ jsx40(LockGlyph, { className: "size-4" }),
+            "Lock"
+          ] }) : null,
+          host.openWebVault ? /* @__PURE__ */ jsxs38(DropdownMenuItem6, { onSelect: host.openWebVault, children: [
+            /* @__PURE__ */ jsx40(ExternalGlyph, { className: "size-4" }),
+            "Open on the web"
+          ] }) : null
+        ] })
       ] })
     ] })
-  ] });
+  );
   const viewHeader = /* @__PURE__ */ jsxs38("div", { className: "flex flex-col gap-2", children: [
     compactHeader,
     /* @__PURE__ */ jsx40(SearchField4, { value: loc.q, onChange: (e) => go({ q: e.target.value }, "replace"), placeholder: `Search ${viewLabel(loc.view, views)}`, "aria-label": `Search ${viewLabel(loc.view, views)}` })
@@ -8621,6 +8675,8 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
       onNew: () => go({ itemId: null, mode: "new", kind: null, panel: null }),
       onRefresh: refresh,
       refreshing,
+      ...snap.pending && snap.pending.length > 0 ? { stillLoading: snap.pending } : {},
+      ...hasFavorites ? { favorites: favorites ?? /* @__PURE__ */ new Set(), onToggleFavorite: toggleFavorite } : {},
       rowContextMenu: host.rowContextMenu ?? "package",
       ...host.rowMenuItems ? { rowMenuItems: host.rowMenuItems } : {},
       ...matchingIds ? { matchingIds } : {},
@@ -9510,6 +9566,12 @@ function createApiVaultPort(api, options = {}) {
     if (id) return { kind: "organization", label: orgs.find((o) => o.id === id)?.name ?? "Organization", organizationId: id };
     return mine || userId ? { kind: "me", label: "Personal", organizationId: null } : { kind: "shared", label: "Shared with me", organizationId: null };
   };
+  const ownerInOrgList = (w, via, meId) => {
+    if (w.organization_id) return orgOf(w.organization_id, null, false);
+    if (w.user_id && meId && w.user_id === meId) return { kind: "me", label: "Personal", organizationId: null };
+    if (via) return { kind: "organization", label: via.name, organizationId: via.id, memberShared: { userId: w.user_id ?? null } };
+    return { kind: "shared", label: "Shared with me", organizationId: null };
+  };
   async function refetch(id, owner) {
     const w = await account9.getItem(api, { path: { item_id: id } });
     return itemOf(w, owner, defs, auth);
@@ -9537,38 +9599,100 @@ function createApiVaultPort(api, options = {}) {
     io: createIoPort(ctx),
     fields: createFieldsPort(ctx),
     lists: createListsPort(ctx, options.userState),
-    async load() {
+    async load(onProgress) {
       const catalogP = retrying(() => apps2.getAppCatalogKind(api, { path: { app: "matrx", kind: "credential_definition" } }));
       const authP = retrying(() => apps2.listAuthenticators(api));
       const userP = retrying(() => account9.listItems(api, { query: { principal_type: "user" } }));
       const sharedP = retrying(() => account9.sharedWithMe(api));
       const quiet = (p) => void p.catch(() => void 0);
       [catalogP, authP, userP, sharedP].forEach(quiet);
-      const org = options.organizations ? null : await retrying(() => platform.listMyOrganizations(api));
-      orgs = [...new Map((options.organizations ?? (org?.organizations ?? []).filter((o) => !o.archived_at).map((o) => ({ id: o.id, name: o.name }))).map((o) => [o.id, o])).values()];
-      const orgListsP = orgs.map((o) => retrying(() => account9.listItems(api, { query: { principal_type: "organization", organization_id: o.id } }, { organizationId: o.id })));
-      orgListsP.forEach(quiet);
-      const [catalog, mine] = await Promise.all([catalogP, userP]);
-      const [authSettled, sharedSettled, ...orgSettled] = await Promise.allSettled([authP, sharedP, ...orgListsP]);
+      const raw = {
+        orgLists: [],
+        orgsKnown: options.organizations !== void 0,
+        meId: null
+      };
       const unavailable = [];
-      const authList = authSettled.status === "fulfilled" ? authSettled.value : (unavailable.push("One-time codes"), { entries: [] });
-      const orgLists = orgSettled.map((r, i) => r.status === "fulfilled" ? r.value : (unavailable.push(orgs[i]?.name ?? "An organization"), { items: [], count: 0 }));
-      const shared = sharedSettled.status === "fulfilled" ? sharedSettled.value : (unavailable.push("Shared with me"), { items: [], count: 0 });
-      const lists = [mine, ...orgLists, shared];
-      defs = new Map(parseDefinitions(catalog.filter((e) => e.is_active).map((e) => ({ key: e.key, payload: e.payload, sort_order: e.sort_order }))).map((d) => [d.key, d]));
-      auth = new Map((authList.entries ?? []).map((a) => [a.credential_item_id, a]));
-      const seen = /* @__PURE__ */ new Map();
-      const deleted = /* @__PURE__ */ new Map();
-      lists.forEach((l, i) => {
-        const sharedList = i === lists.length - 1;
-        for (const w of l.items) {
-          if (seen.has(w.id) || deleted.has(w.id) || isHiddenItem(w)) continue;
-          const owner = sharedList ? orgOf(w.organization_id, null, false) : orgOf(w.organization_id, w.user_id, i === 0);
-          const item = itemOf(w, sharedList && !w.organization_id ? { kind: "shared", label: "Shared with me", organizationId: null } : owner, defs, auth);
+      let done = false;
+      const build = () => {
+        const catalog2 = raw.catalog ?? [];
+        defs = new Map(parseDefinitions(catalog2.filter((e) => e.is_active).map((e) => ({ key: e.key, payload: e.payload, sort_order: e.sort_order }))).map((d) => [d.key, d]));
+        const mineItems = raw.mine?.items ?? [];
+        const meId = raw.meId ?? mineItems.find((w) => w.user_id)?.user_id ?? null;
+        const seen = /* @__PURE__ */ new Map();
+        const deleted = /* @__PURE__ */ new Map();
+        const take = (w, owner) => {
+          if (seen.has(w.id) || deleted.has(w.id) || isHiddenItem(w)) return;
+          const item = itemOf(w, owner, defs, auth);
           (isDeleted(w) ? deleted : seen).set(w.id, item);
+        };
+        for (const w of mineItems) take(w, orgOf(w.organization_id, null, true));
+        raw.orgLists.forEach((l, i) => {
+          const via = orgs[i];
+          for (const w of l?.items ?? []) take(w, ownerInOrgList(w, via, meId));
+        });
+        for (const w of raw.shared?.items ?? []) take(w, w.organization_id ? orgOf(w.organization_id, null, false) : { kind: "shared", label: "Shared with me", organizationId: null });
+        const pending = done ? [] : [...raw.orgsKnown ? orgs.filter((_, i) => raw.orgLists[i] === void 0).map((o) => o.name) : ["your organizations"], ...raw.shared ? [] : ["Shared with me"]];
+        return {
+          unavailable: [...unavailable],
+          ...pending.length > 0 ? { pending } : {},
+          items: [...seen.values()],
+          deleted: [...deleted.values()],
+          organizations: orgs,
+          definitions: [...defs.values()].sort((a, b) => a.sortOrder - b.sortOrder || a.label.localeCompare(b.label))
+        };
+      };
+      const progress = () => {
+        if (!done && onProgress && raw.catalog && raw.mine) onProgress(build());
+      };
+      const orgReportP = options.organizations ? null : retrying(() => platform.listMyOrganizations(api));
+      if (orgReportP) quiet(orgReportP);
+      const orgListsReady = (async () => {
+        const report = orgReportP ? await orgReportP : null;
+        raw.meId = report?.user_id ?? null;
+        orgs = [...new Map((options.organizations ?? (report?.organizations ?? []).filter((o) => !o.archived_at).map((o) => ({ id: o.id, name: o.name }))).map((o) => [o.id, o])).values()];
+        raw.orgLists = orgs.map(() => void 0);
+        raw.orgsKnown = true;
+        progress();
+        return orgs.map((o, i) => {
+          const p = retrying(() => account9.listItems(api, { query: { principal_type: "organization", organization_id: o.id } }, { organizationId: o.id }));
+          const arrived = p.then((l) => {
+            raw.orgLists[i] = l;
+            progress();
+            return l;
+          });
+          quiet(arrived);
+          return arrived;
+        });
+      })();
+      quiet(orgListsReady);
+      const authDone = authP.then((a) => {
+        auth = new Map((a.entries ?? []).map((e) => [e.credential_item_id, e]));
+        progress();
+      }, () => {
+        unavailable.push("One-time codes");
+      });
+      const sharedDone = sharedP.then((sh) => {
+        raw.shared = sh;
+        progress();
+      }, () => {
+        raw.shared = { items: [], count: 0 };
+        unavailable.push("Shared with me");
+      });
+      const [catalog, mine] = await Promise.all([catalogP, userP]);
+      raw.catalog = catalog;
+      raw.mine = mine;
+      progress();
+      const orgPs = await orgListsReady;
+      const orgSettled = await Promise.allSettled(orgPs);
+      orgSettled.forEach((r, i) => {
+        if (r.status === "rejected") {
+          raw.orgLists[i] = { items: [], count: 0 };
+          unavailable.push(orgs[i]?.name ?? "An organization");
         }
       });
-      return { unavailable, items: [...seen.values()], deleted: [...deleted.values()], organizations: orgs, definitions: [...defs.values()].sort((a, b) => a.sortOrder - b.sortOrder || a.label.localeCompare(b.label)) };
+      await Promise.all([authDone, sharedDone]);
+      done = true;
+      return build();
     },
     async reveal(item, fieldKey2) {
       const field = item.fields.find((f) => f.key === fieldKey2);
@@ -9735,6 +9859,7 @@ export {
   needsRecentSignIn,
   parseDefinitions,
   providerOf,
+  rowMenuEntriesAt,
   siteDomainOf,
   sortItems,
   useConfirmed,