@ai-matrx/vault 0.1.22 → 0.1.24

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.1.24
+
+- **A copy or reveal that needs "Confirm it's you" is never silent.** Closing the prompt says "Not confirmed, so nothing was done" once, from `IdentityGate` (every caller already stays quiet about a cancel via `wasCancelled`), so the row buttons, the row's More menu, a host's right-click menu (`rowMenuEntriesAt`) and the keyboard all end in either the copy or a message. Guard: `src/review-0-1-23.test.tsx` § 1. Consumer action: none (a host that passes `notify` receives the line with kind `info`).
+- **The authenticator's own settings are never copy entries or search hits.** `totp_enabled` / `totp_digits` / `totp_period` / `totp_algorithm` / issuer / label and the `mfa_method` marker are internal (`isInternalCustomKey`, `humanCustomFields`); the row menu no longer offers "Copy authenticator digits…". They are still kept on save. Guard: § 2. Consumer action: none.
+- **Search reads everything an item says about itself, never a secret**: name, description, type label and key, the type's family ("AI & model providers"), tags, websites, every field's label, key and env key, and the person's own plaintext custom fields (`matchesQuery(item, query, familyLabel?)`). Guard: § 3. Consumer action: none (a host calling `matchesQuery` may pass the family label).
+- **The old type families are back, nested under their category.** A category holding more than one family lists them indented beneath it while it is open (sidebar) and after it in the compact Show picker (`family:<family>` view, `ViewEntry.families`, `itemFamily`, `familyLabel`; `viewOptions(..., current)`). Guard: § 4. Consumer action: none.
+- **A shown value says when it hides**: a quiet "Hides in Ns" beside every revealed secret, earlier value and recovery code set (`HidesIn`, `useTransientSecret().until`, `useSecondsLeft`). Guard: § 5. Consumer action: none.
+
+## 0.1.23
+
+- **The Vault and Show pickers read in full at every compact width (640-1119px).** They no longer share a row with the Authenticator and More buttons (which squeezed each to ~90px: "All ite…", long vault names cut): the pickers take the whole row (each at least 11rem; one above the other in the 19rem split column, side by side once there is room), and the Authenticator and More buttons moved onto the search row beside the + (`ItemList` `actions`; Trash, Authenticator and the extension's page view carry them on their own search row). Nothing removed, every button one press away as before. Guard: `src/parity-review-0-1-22.test.tsx` § 2. Consumer action: none.
+
 ## 0.1.22
 
 - **A member's credential shared into an organization is the organization's, never "Personal".** An item in an organization's list is the viewer's own only when the viewer owns it (`platform.list_my_organizations` `user_id`, else the owner of the person's own list); a member's own credential shared into the organization is attributed to that organization (`VaultOwner.memberShared`), counted there, its badge says "A member's own credential, shared into <org>", and Share / Delete show disabled with the reason (`manageUnavailableReason`, `ownerDetail`); Copy stays offered to an editor. Consumer action: none.

package/dist/index.cjs

@@ -489,6 +489,7 @@ function needsRecentSignIn(e) {
 // src/auth/IdentityGate.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var CANCELLED = "Not confirmed.";
+var NOT_CONFIRMED_NOTICE = "Not confirmed, so nothing was done";
 var Ctx2 = (0, import_react2.createContext)((run) => run());
 function useConfirmed() {
   return (0, import_react2.useContext)(Ctx2);
@@ -497,6 +498,7 @@ var PROVIDER_LABEL = { google: "Google", github: "GitHub", azure: "Microsoft", a
 var providerLabel = (p) => PROVIDER_LABEL[p] ?? p.charAt(0).toUpperCase() + p.slice(1);
 function IdentityGate({ identity, children }) {
   const [asking, setAsking] = (0, import_react2.useState)(false);
+  const notify = useNotify();
   const waiters = (0, import_react2.useRef)([]);
   const [returnProblem, setReturnProblem] = (0, import_react2.useState)(null);
   (0, import_react2.useEffect)(() => {
@@ -527,6 +529,7 @@ function IdentityGate({ identity, children }) {
     waiters.current = [];
     setAsking(false);
     for (const x of w) ok ? x.resolve() : x.reject(new Error(CANCELLED));
+    if (!ok && w.length > 0) notify(NOT_CONFIRMED_NOTICE, "info");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Ctx2.Provider, { value: confirmed, children: [
     children,
@@ -639,22 +642,35 @@ function useTransientSecret(given) {
   const fromHost = (0, import_react3.useContext)(RevealMs);
   const ms = given ?? fromHost;
   const [value, setValue] = (0, import_react3.useState)(null);
+  const [until, setUntil] = (0, import_react3.useState)(null);
   const timer2 = (0, import_react3.useRef)(null);
   const clear = (0, import_react3.useCallback)(() => {
     if (timer2.current) clearTimeout(timer2.current);
     timer2.current = null;
     setValue(null);
+    setUntil(null);
   }, []);
   const show = (0, import_react3.useCallback)(
     (next) => {
       if (timer2.current) clearTimeout(timer2.current);
       setValue(next);
+      setUntil(Date.now() + ms);
       timer2.current = setTimeout(clear, ms);
     },
     [clear, ms]
   );
   (0, import_react3.useEffect)(() => clear, [clear]);
-  return { value, show, clear };
+  return { value, show, clear, until };
+}
+function useSecondsLeft(until) {
+  const [now, setNow] = (0, import_react3.useState)(() => Date.now());
+  (0, import_react3.useEffect)(() => {
+    if (until === null) return;
+    setNow(Date.now());
+    const t = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(t);
+  }, [until]);
+  return until === null ? null : Math.max(0, Math.ceil((until - now) / 1e3));
 }
 function useElementWidth(ref) {
   const [width, setWidth] = (0, import_react3.useState)(0);
@@ -747,6 +763,15 @@ function SecretText({ value, multiline }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "break-all font-mono text-sm tracking-wide", children: [...value].map((ch, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: /[0-9]/.test(ch) ? "text-primary" : /[^A-Za-z0-9]/.test(ch) ? "text-warning" : void 0, children: ch }, i)) });
 }
 var quietError = (e, fallback) => wasCancelled(e) ? null : e instanceof Error ? e.message : fallback;
+function HidesIn({ until }) {
+  const left = useSecondsLeft(until);
+  if (left === null) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "shrink-0 px-1 text-xs tabular-nums text-muted-foreground", "data-hides-in": "", title: "Shown values hide on their own", children: [
+    "Hides in ",
+    left,
+    "s"
+  ] });
+}
 function SecretRow({ port, item, field, extra, onTurnOn }) {
   const confirmed = useConfirmed();
   const copyValue2 = useCopy();
@@ -802,6 +827,7 @@ function SecretRow({ port, item, field, extra, onTurnOn }) {
       actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
         extra,
         off && onTurnOn ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TurnOnButton, { label: field.label, onTurnOn }) : null,
+        !visible && secret.value !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HidesIn, { until: secret.until }) : null,
         canSee && !visible ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls2.Button, { variant: "quiet", icon: secret.value !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EyeOffGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EyeGlyph, {}), "aria-label": secret.value !== null ? `Hide ${field.label}` : `Show ${field.label}`, disabled: busy, onClick: () => void toggle2() }) : null,
         canSee ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls2.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons2.CopyIcon, {}), "aria-label": `Copy ${field.label}`, disabled: busy, onClick: () => void copy() }) : null
       ] }),
@@ -976,15 +1002,28 @@ function inView(item, view) {
   return true;
 }
 var AUTHENTICATOR_WORDS = ["authenticator", "2fa", "two-factor", "two factor", "totp", "one-time password", "verification code", "2-step"];
-function matchesQuery(item, query) {
+function matchesQuery(item, query, familyLabel2) {
   const q = query.trim().toLowerCase();
   if (!q) return true;
   if (item.authenticator && AUTHENTICATOR_WORDS.some((w) => w === q || q.length >= 3 && w.startsWith(q))) return true;
-  return [item.name, item.definitionLabel, ...item.tags, ...item.loginUrls, ...item.custom.map((c) => `${c.label} ${c.value}`)].some((h) => h.toLowerCase().includes(q));
+  return [
+    item.name,
+    item.description,
+    item.definitionLabel,
+    item.definitionKey,
+    familyLabel2 ?? "",
+    ...item.tags,
+    ...item.loginUrls,
+    ...item.fields.filter((f) => !isAuthenticatorStorage(f.key)).flatMap((f) => [f.label, f.key, f.envKey ?? ""]),
+    ...humanCustomFields(item).map((c) => `${c.label} ${c.value}`)
+  ].some((h) => h !== "" && h.toLowerCase().includes(q));
 }
 var HIDDEN_ITEM_TAG = "matrx:hidden";
 var isHiddenItem = (item) => (item.tags ?? []).includes(HIDDEN_ITEM_TAG);
 var isAuthenticatorStorage = (key) => key === "totp_seed" || key.startsWith("totp_") || key === "authenticator_last_time_step";
+var MFA_METHOD_KEY = "mfa_method";
+var isInternalCustomKey = (key) => isAuthenticatorStorage(key) || key === MFA_METHOD_KEY;
+var humanCustomFields = (item) => item.custom.filter((c) => !isInternalCustomKey(c.key));
 function loginSiteOf(item) {
   const raw = item.loginUrls[0];
   if (!raw) return "";
@@ -1602,6 +1641,7 @@ function HistoryRow({ item, port, page, entry, label, onRestored, onConflict, on
     {
       label: when,
       actions: entry.available ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        secret.value !== null ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HidesIn, { until: secret.until }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_controls4.Button, { variant: "quiet", icon: secret.value !== null ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EyeOffGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EyeGlyph, {}), "aria-label": secret.value !== null ? "Hide" : "Show", disabled: busy, onClick: () => void toggle2() }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_controls4.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons3.CopyIcon, {}), "aria-label": "Copy", disabled: busy, onClick: () => void copy() }),
         canRestore(page, entry) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_controls4.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RestoreGlyph, {}), "aria-label": "Restore", disabled: busy, onClick: () => void restore() }) : null
@@ -2137,7 +2177,6 @@ var import_design_system9 = require("@ai-matrx/design-system");
 var import_confirm_opener2 = require("@ai-matrx/kit/confirm-opener");
 
 // src/authenticator/port.ts
-var MFA_METHOD_KEY = "mfa_method";
 var OTP_SEED_KEY = "totp_seed";
 function mfaMethodOf(item) {
   const v = item.custom.find((c) => c.key === MFA_METHOD_KEY)?.value;
@@ -5261,6 +5300,7 @@ function RecoveryCodesRow({ item, field, port, onChanged }) {
       label: "Recovery codes",
       top: codes !== null,
       actions: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+        codes ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(HidesIn, { until: secret.until }) : null,
         canSee ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_controls17.Button, { variant: "quiet", icon: codes ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EyeOffGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EyeGlyph, {}), "aria-label": codes ? "Hide codes" : "Show codes", disabled: busy, onClick: () => void toggle2() }) : null,
         canEdit && !sealed ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_controls17.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PencilGlyph, {}), "aria-label": "Replace all codes", disabled: busy, onClick: () => setDraft("") }) : null
       ] }),
@@ -6196,8 +6236,8 @@ function ItemPane(props) {
   const patchFieldSettings = (key, p) => setDraft((d) => ({ ...d, fieldSettings: { ...d.fieldSettings, [key]: { ...d.fieldSettings?.[key], ...p } } }));
   const extraFields = (item?.fields ?? []).filter((f) => !declaredKeys.has(f.key) && !draft.removed.includes(f.id) && !isAuthenticatorStorage(f.key));
   const metaValue = (key) => draft.values[key] ?? item?.custom.find((c) => c.key === key)?.value ?? "";
-  const extraCustom = draft.custom.filter((c) => !declaredKeys.has(c.key) && c.key !== MFA_METHOD_KEY && !isAuthenticatorStorage(c.key));
-  const viewCustom = (item?.custom ?? []).filter((c) => !declaredKeys.has(c.key) && c.key !== MFA_METHOD_KEY && !isAuthenticatorStorage(c.key));
+  const extraCustom = draft.custom.filter((c) => !declaredKeys.has(c.key) && !isInternalCustomKey(c.key));
+  const viewCustom = (item?.custom ?? []).filter((c) => !declaredKeys.has(c.key) && !isInternalCustomKey(c.key));
   const isLogin = (item?.definitionKey ?? definition?.key) === "website_login" || (item?.definitionKey ?? definition?.key) === "username_password";
   const typeLabel = definition?.label ?? item?.definitionLabel ?? "";
   const recoveryDeclared = declaredKeys.has(RECOVERY_CODES_KEY);
@@ -6556,7 +6596,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, stillLoading, favorites, onToggleFavorite }) {
+function ItemList({ title, items, definitions, port, selectedId, onSelect, query, onQuery, sort, onSort, onNew, matchingIds, header, actions, 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;
@@ -6584,6 +6624,7 @@ function ItemList({ title, items, definitions, port, selectedId, onSelect, query
       header,
       /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_controls23.SearchField, { value: query, onChange: (e) => onQuery(e.target.value), onKeyDown, placeholder: `Search ${title}`, className: "min-w-0 flex-1", "aria-label": "Search the vault" }),
+        actions,
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_controls23.Button, { variant: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PlusGlyph, {}), "aria-label": "New item", onClick: onNew })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between gap-2 px-1", children: [
@@ -6646,7 +6687,7 @@ function ListRow({ item, family, port, on, onSelect, withOwner, ownContextMenu,
   const copyCode = () => code && void run("One-time code", async () => (await port.authenticator.code(item)).code, true);
   const copyName = () => void copy(item.name, "Name", { secret: false });
   const others = otherCopyFields(item, user, secret);
-  const custom = canUse ? item.custom.filter((c) => c.value) : [];
+  const custom = canUse ? humanCustomFields(item).filter((c) => c.value) : [];
   const hostEntries = extra?.(item) ?? [];
   const copyEntries = [
     ...user ? [{ id: "copy:username", kind: "copy", label: `Copy ${user.label.toLowerCase()}`, onSelect: copyUser }] : [],
@@ -8246,20 +8287,33 @@ function VaultSelect({ value, choices, onChange }) {
 }
 var CATEGORY_GLYPHS = { logins: import_icons16.GlobeIcon, passkeys: ShieldGlyph, api: KeyGlyph, oauth: PlugGlyph, infra: DatabaseGlyph, env: TerminalGlyph, files: FileGlyph, other: NoteGlyph };
 var familyOf = (key, definitions) => definitions.find((d) => d.key === key)?.family ?? "generic";
+function itemFamily(item, definitions) {
+  return familyOf(item.definitionKey, definitions);
+}
+var familyLabel = (family) => FAMILY_LABELS[family] ?? family.replace(/_/g, " ").replace(/^./, (c) => c.toUpperCase());
 function itemCategory(item, definitions) {
   return categoryOf(item.definitionKey, familyOf(item.definitionKey, definitions));
 }
 function buildViews(items, definitions, favoriteIds2, recentIds2) {
   const byCat = /* @__PURE__ */ new Map();
+  const byFamily = /* @__PURE__ */ new Map();
   const byTag = /* @__PURE__ */ new Map();
   for (const i of items) {
     const c = itemCategory(i, definitions);
     byCat.set(c, (byCat.get(c) ?? 0) + 1);
+    const fam = itemFamily(i, definitions);
+    const fams = byFamily.get(c) ?? /* @__PURE__ */ new Map();
+    fams.set(fam, (fams.get(fam) ?? 0) + 1);
+    byFamily.set(c, fams);
     for (const t of i.tags) byTag.set(t, (byTag.get(t) ?? 0) + 1);
   }
   const ids = new Set(items.map((i) => i.id));
   return {
-    categories: CATEGORIES.filter((c) => byCat.has(c.id)).map((c) => ({ view: `category:${c.id}`, label: c.label, count: byCat.get(c.id) ?? 0, glyph: CATEGORY_GLYPHS[c.id] })),
+    categories: CATEGORIES.filter((c) => byCat.has(c.id)).map((c) => {
+      const fams = [...(byFamily.get(c.id) ?? /* @__PURE__ */ new Map()).entries()];
+      const families = fams.length > 1 ? fams.map(([f, count2]) => ({ view: `family:${f}`, label: familyLabel(f), count: count2, glyph: CATEGORY_GLYPHS[c.id] })).sort((a, b) => a.label.localeCompare(b.label)) : void 0;
+      return { view: `category:${c.id}`, label: c.label, count: byCat.get(c.id) ?? 0, glyph: CATEGORY_GLYPHS[c.id], ...families ? { families } : {} };
+    }),
     tags: [...byTag.entries()].sort((a, b) => a[0].localeCompare(b[0])).map(([t, count2]) => ({ view: `tag:${t}`, label: t, count: count2, glyph: TagGlyph })),
     favorites: favoriteIds2 ? [...favoriteIds2].filter((id) => ids.has(id)).length : void 0,
     authenticator: items.filter((i) => i.authenticator).length,
@@ -8272,21 +8326,27 @@ function viewLabel(view, views) {
   if (view === "authenticator") return AUTHENTICATOR_LABEL;
   if (view === "trash") return "Trash";
   if (view === "page") return "This page";
+  if (view.startsWith("family:")) return familyLabel(view.slice(7));
   return [...views.categories, ...views.tags].find((v) => v.view === view)?.label ?? "All items";
 }
-function viewOptions(views, allCount, deletedCount, hasFavorites, hasRecents, hasPage = false) {
+function openCategory(view, views) {
+  return views.categories.find((c) => c.view === view || c.families?.some((f) => f.view === view));
+}
+function viewOptions(views, allCount, deletedCount, hasFavorites, hasRecents, hasPage = false, current = "all") {
+  const open = openCategory(current, views);
   return [
     ...hasPage ? [{ value: "page", label: "This page" }] : [],
     { value: "all", label: "Every category", meta: String(allCount) },
     ...hasFavorites ? [{ value: "favorites", label: "Favorites", meta: views.favorites === void 0 ? "" : String(views.favorites) }] : [],
     ...hasRecents ? [{ value: "recent", label: "Recently opened", meta: views.recent === void 0 ? "" : String(views.recent) }] : [],
     { value: "authenticator", label: AUTHENTICATOR_LABEL, meta: String(views.authenticator) },
-    ...views.categories.map((v) => ({ value: v.view, label: v.label, meta: String(v.count) })),
+    // The open category's families follow it, indented by their sign; other categories stay one line.
+    ...views.categories.flatMap((v) => [{ value: v.view, label: v.label, meta: String(v.count) }, ...v === open ? (v.families ?? []).map((f) => ({ value: f.view, label: `\xB7 ${f.label}`, meta: String(f.count) })) : []]),
     ...views.tags.map((v) => ({ value: v.view, label: `#${v.label}`, meta: String(v.count) })),
     { value: "trash", label: "Trash", meta: String(deletedCount) }
   ];
 }
-function Entry({ on, glyph: Icon, label, count: count2, onClick }) {
+function Entry({ on, glyph: Icon, label, count: count2, onClick, nested = false }) {
   const desktop = (0, import_design_system25.useLook)() === "desktop";
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "button",
@@ -8294,9 +8354,10 @@ function Entry({ on, glyph: Icon, label, count: count2, onClick }) {
       type: "button",
       "aria-current": on ? "page" : void 0,
       onClick,
-      className: (0, import_design_system25.cn)("flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-sm", on ? desktop ? "bg-sidebar-accent text-primary" : "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent"),
+      "data-nested": nested ? "" : void 0,
+      className: (0, import_design_system25.cn)("flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-sm", nested && "pl-9", on ? desktop ? "bg-sidebar-accent text-primary" : "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { className: "size-4 shrink-0" }),
+        nested ? null : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { className: "size-4 shrink-0" }),
         /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "min-w-0 flex-1 truncate", children: label }),
         count2 !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-xs tabular-nums text-muted-foreground", children: count2 }) : null
       ]
@@ -8324,7 +8385,10 @@ function VaultSidebar({ vault, choices, onVault, view, allCount, deletedCount, v
         hasRecents ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: view === "recent", glyph: ClockGlyph, label: "Recently opened", count: views.recent, onClick: () => onView("recent") }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: view === "authenticator", glyph: LockGlyph, label: AUTHENTICATOR_LABEL, count: views.authenticator, onClick: () => onView("authenticator") })
       ] }),
-      views.categories.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Group, { title: "Categories", children: views.categories.map((e) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: view === e.view, glyph: e.glyph, label: e.label, count: e.count, onClick: () => onView(e.view) }, e.view)) }) : null,
+      views.categories.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Group, { title: "Categories", children: views.categories.map((e) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: view === e.view, glyph: e.glyph, label: e.label, count: e.count, onClick: () => onView(e.view) }),
+        e === openCategory(view, views) ? e.families?.map((f) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { nested: true, on: view === f.view, glyph: f.glyph, label: f.label, count: f.count, onClick: () => onView(f.view) }, f.view)) : null
+      ] }, e.view)) }) : null,
       views.tags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("button", { type: "button", "aria-expanded": tagsOpen, onClick: () => setTagsOpen((o) => !o), className: "flex h-7 items-center gap-1 rounded-md px-2.5 text-left text-xs font-medium text-muted-foreground hover:text-foreground", children: [
           tagsOpen ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChevronDownGlyph, { className: "size-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChevronRightGlyph, { className: "size-3.5" }),
@@ -8589,10 +8653,11 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
   const views = (0, import_react42.useMemo)(() => buildViews(inThisVault, definitions, favorites, recents), [inThisVault, definitions, favorites, recents]);
   const visible = (0, import_react42.useMemo)(() => {
     const filtered = inThisVault.filter((i) => {
-      if (!matchesQuery(i, loc.q)) return false;
+      if (!matchesQuery(i, loc.q, familyLabel(itemFamily(i, definitions)))) return false;
       if (loc.view === "favorites") return favorites?.has(i.id) ?? false;
       if (loc.view === "recent") return recents?.includes(i.id) ?? false;
       if (loc.view.startsWith("category:")) return itemCategory(i, definitions) === loc.view.slice(9);
+      if (loc.view.startsWith("family:")) return itemFamily(i, definitions) === loc.view.slice(7);
       return inView(i, loc.view);
     });
     if (loc.view === "recent" && recents) return [...filtered].sort((a, b) => recents.indexOf(a.id) - recents.indexOf(b.id));
@@ -8644,65 +8709,66 @@ 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 : (
-    // 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__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "grid grid-cols-[minmax(6rem,1fr)_minmax(6rem,1fr)_auto_auto] gap-2", "data-vault-compact-header": "", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(VaultSelect, { value: loc.vault, choices, onChange: (vault) => go({ vault, itemId: null, panel: null }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_controls35.Select, { 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__ */ (0, import_jsx_runtime40.jsx)(
-        import_controls35.Button,
-        {
-          variant: loc.view === "authenticator" ? "outline" : "quiet",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(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__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenu, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system26.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_controls35.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(MoreGlyph, {}), "aria-label": "Vault actions" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuContent, { align: "end", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: () => go({ panel: "import" }), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ImportGlyph, { className: "size-4" }),
-            "Import"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: () => go({ panel: "export" }), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ExportGlyph, { className: "size-4" }),
-            "Export"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: () => go({ panel: "backup" }), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SafeGlyph, { className: "size-4" }),
-            "Backup"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: () => go({ panel: "devices" }), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ShieldGlyph, { className: "size-4" }),
-            "Browsers that fill"
-          ] }),
-          host.nativeImport ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: () => go({ panel: "import-passkeys" }), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ImportGlyph, { className: "size-4" }),
-            "Import passkeys"
-          ] }) : null,
-          host.nativeProvider && host.nativeProvider.status !== "unavailable" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: host.nativeProvider.openSetup, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ShieldGlyph, { className: "size-4" }),
-            "System AutoFill"
-          ] }) : null,
-          host.lock?.lock ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: () => void host.lock?.lock?.(), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LockGlyph, { className: "size-4" }),
-            "Lock"
-          ] }) : null,
-          host.openWebVault ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: host.openWebVault, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ExternalGlyph, { className: "size-4" }),
-            "Open on the web"
-          ] }) : null
-        ] })
+  const compactHeader = mode === "full" ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(11rem,1fr))] gap-2", "data-vault-compact-header": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(VaultSelect, { value: loc.vault, choices, onChange: (vault) => go({ vault, itemId: null, panel: null }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_controls35.Select, { 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, loc.view), "aria-label": "Show" })
+  ] });
+  const compactActions = mode === "full" ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex shrink-0 items-center gap-2", "data-vault-compact-actions": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      import_controls35.Button,
+      {
+        variant: loc.view === "authenticator" ? "outline" : "quiet",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(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__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system26.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_controls35.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(MoreGlyph, {}), "aria-label": "Vault actions" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: () => go({ panel: "import" }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ImportGlyph, { className: "size-4" }),
+          "Import"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: () => go({ panel: "export" }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ExportGlyph, { className: "size-4" }),
+          "Export"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: () => go({ panel: "backup" }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SafeGlyph, { className: "size-4" }),
+          "Backup"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: () => go({ panel: "devices" }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ShieldGlyph, { className: "size-4" }),
+          "Browsers that fill"
+        ] }),
+        host.nativeImport ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: () => go({ panel: "import-passkeys" }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ImportGlyph, { className: "size-4" }),
+          "Import passkeys"
+        ] }) : null,
+        host.nativeProvider && host.nativeProvider.status !== "unavailable" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: host.nativeProvider.openSetup, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ShieldGlyph, { className: "size-4" }),
+          "System AutoFill"
+        ] }) : null,
+        host.lock?.lock ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: () => void host.lock?.lock?.(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LockGlyph, { className: "size-4" }),
+          "Lock"
+        ] }) : null,
+        host.openWebVault ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system26.DropdownMenuItem, { onSelect: host.openWebVault, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ExternalGlyph, { className: "size-4" }),
+          "Open on the web"
+        ] }) : null
       ] })
     ] })
-  );
+  ] });
   const viewHeader = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-2", children: [
     compactHeader,
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_controls35.SearchField, { value: loc.q, onChange: (e) => go({ q: e.target.value }, "replace"), placeholder: `Search ${viewLabel(loc.view, views)}`, "aria-label": `Search ${viewLabel(loc.view, views)}` })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_controls35.SearchField, { value: loc.q, onChange: (e) => go({ q: e.target.value }, "replace"), placeholder: `Search ${viewLabel(loc.view, views)}`, "aria-label": `Search ${viewLabel(loc.view, views)}`, className: "min-w-0 flex-1" }),
+      compactActions
+    ] })
   ] });
   const viewProps = { port, host, items: inThisVault, deleted, definitions, query: loc.q, onOpen: (id) => go({ view: "all", itemId: id, mode: "view", panel: null }), onChanged: load, header: viewHeader };
   const pageView = loc.view === "page" && host.page && !loc.q ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -8720,7 +8786,10 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
       onNewForPage: (url) => go({ mode: "new", kind: null, url, itemId: null, panel: null }),
       onBrowse: () => go({ view: "all", itemId: null }),
       onChanged: load,
-      ...compactHeader ? { header: compactHeader } : {}
+      ...compactHeader ? { header: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        compactHeader,
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex justify-end", children: compactActions })
+      ] }) } : {}
     }
   ) : null;
   const specialView = pageView ?? (loc.view === "authenticator" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AuthenticatorView, { ...viewProps }) : loc.view === "trash" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TrashView, { ...viewProps }) : null);
@@ -8747,7 +8816,8 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
       rowContextMenu: host.rowContextMenu ?? "package",
       ...host.rowMenuItems ? { rowMenuItems: host.rowMenuItems } : {},
       ...matchingIds ? { matchingIds } : {},
-      ...compactHeader ? { header: compactHeader } : {}
+      ...compactHeader ? { header: compactHeader } : {},
+      ...compactActions ? { actions: compactActions } : {}
     }
   );
   const showingDetail = loc.mode === "new" || loc.itemId !== null;