@ai-matrx/vault 0.1.22 → 0.1.24

package/dist/index.d.cts

@@ -114,7 +114,7 @@ type VaultSort = "name" | "name-desc" | "website" | "updated" | "created" | "vie
 type VaultSelection = "all" | "mine" | "shared" | (string & {});
 interface VaultLocation {
     vault: VaultSelection;
-    /** `all`, `favorites`, `authenticator`, `trash`, `category:<id>`, `type:<definitionKey>` or `tag:<tag>`. */
+    /** `all`, `favorites`, `authenticator`, `trash`, `category:<id>`, `family:<family>`, `type:<definitionKey>` or `tag:<tag>`. */
     view: string;
     q: string;
     sort: VaultSort;
@@ -134,7 +134,14 @@ declare const DEFAULT_LOCATION: VaultLocation;
 declare function locationFromParams(params: URLSearchParams, itemId?: string | null): VaultLocation;
 /** Writes everything that is not a default (and not the item id, which the host places). */
 declare function locationToParams(loc: VaultLocation): URLSearchParams;
-declare function matchesQuery(item: VaultItem, query: string): boolean;
+/**
+ * The one search every list shares. It reads what an item SAYS about itself, never a secret value:
+ * 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 plaintext custom fields a person wrote
+ * (label and value — the server keeps those unencrypted by design). `familyLabel` comes from the
+ * catalog the caller holds.
+ */
+declare function matchesQuery(item: VaultItem, query: string, familyLabel?: string): boolean;
 /**
  * The authenticator's own storage on an item (the seed, digits, period, issuer…): shown only as the
  * one "One-time password" row, never as loose fields — and always kept when the item is saved.
@@ -423,6 +430,7 @@ interface AuthenticatorEntry {
  * `mfa_method` so agents know to hand control back at the verification step.
  */
 type MfaMethod = "sms" | "push_or_other";
+
 type ItemRef = Pick<VaultItem, "id" | "owner">;
 /**
  * One-time passwords: every code, enrol by key / otpauth address / QR image, enable, disable,

package/dist/index.d.ts

@@ -114,7 +114,7 @@ type VaultSort = "name" | "name-desc" | "website" | "updated" | "created" | "vie
 type VaultSelection = "all" | "mine" | "shared" | (string & {});
 interface VaultLocation {
     vault: VaultSelection;
-    /** `all`, `favorites`, `authenticator`, `trash`, `category:<id>`, `type:<definitionKey>` or `tag:<tag>`. */
+    /** `all`, `favorites`, `authenticator`, `trash`, `category:<id>`, `family:<family>`, `type:<definitionKey>` or `tag:<tag>`. */
     view: string;
     q: string;
     sort: VaultSort;
@@ -134,7 +134,14 @@ declare const DEFAULT_LOCATION: VaultLocation;
 declare function locationFromParams(params: URLSearchParams, itemId?: string | null): VaultLocation;
 /** Writes everything that is not a default (and not the item id, which the host places). */
 declare function locationToParams(loc: VaultLocation): URLSearchParams;
-declare function matchesQuery(item: VaultItem, query: string): boolean;
+/**
+ * The one search every list shares. It reads what an item SAYS about itself, never a secret value:
+ * 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 plaintext custom fields a person wrote
+ * (label and value — the server keeps those unencrypted by design). `familyLabel` comes from the
+ * catalog the caller holds.
+ */
+declare function matchesQuery(item: VaultItem, query: string, familyLabel?: string): boolean;
 /**
  * The authenticator's own storage on an item (the seed, digits, period, issuer…): shown only as the
  * one "One-time password" row, never as loose fields — and always kept when the item is saved.
@@ -423,6 +430,7 @@ interface AuthenticatorEntry {
  * `mfa_method` so agents know to hand control back at the verification step.
  */
 type MfaMethod = "sms" | "push_or_other";
+
 type ItemRef = Pick<VaultItem, "id" | "owner">;
 /**
  * One-time passwords: every code, enrol by key / otpauth address / QR image, enable, disable,

package/dist/index.js

@@ -419,6 +419,7 @@ function needsRecentSignIn(e) {
 // src/auth/IdentityGate.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var CANCELLED = "Not confirmed.";
+var NOT_CONFIRMED_NOTICE = "Not confirmed, so nothing was done";
 var Ctx2 = createContext2((run) => run());
 function useConfirmed() {
   return useContext2(Ctx2);
@@ -427,6 +428,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] = useState2(false);
+  const notify = useNotify();
   const waiters = useRef2([]);
   const [returnProblem, setReturnProblem] = useState2(null);
   useEffect2(() => {
@@ -457,6 +459,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__ */ jsxs3(Ctx2.Provider, { value: confirmed, children: [
     children,
@@ -569,22 +572,35 @@ function useTransientSecret(given) {
   const fromHost = useContext3(RevealMs);
   const ms = given ?? fromHost;
   const [value, setValue] = useState3(null);
+  const [until, setUntil] = useState3(null);
   const timer2 = useRef3(null);
   const clear = useCallback2(() => {
     if (timer2.current) clearTimeout(timer2.current);
     timer2.current = null;
     setValue(null);
+    setUntil(null);
   }, []);
   const show = useCallback2(
     (next) => {
       if (timer2.current) clearTimeout(timer2.current);
       setValue(next);
+      setUntil(Date.now() + ms);
       timer2.current = setTimeout(clear, ms);
     },
     [clear, ms]
   );
   useEffect3(() => clear, [clear]);
-  return { value, show, clear };
+  return { value, show, clear, until };
+}
+function useSecondsLeft(until) {
+  const [now, setNow] = useState3(() => Date.now());
+  useEffect3(() => {
+    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] = useState3(0);
@@ -677,6 +693,15 @@ function SecretText({ value, multiline }) {
   return /* @__PURE__ */ jsx5("span", { className: "break-all font-mono text-sm tracking-wide", children: [...value].map((ch, i) => /* @__PURE__ */ jsx5("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__ */ jsxs5("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();
@@ -732,6 +757,7 @@ function SecretRow({ port, item, field, extra, onTurnOn }) {
       actions: /* @__PURE__ */ jsxs5(Fragment2, { children: [
         extra,
         off && onTurnOn ? /* @__PURE__ */ jsx5(TurnOnButton, { label: field.label, onTurnOn }) : null,
+        !visible && secret.value !== null ? /* @__PURE__ */ jsx5(HidesIn, { until: secret.until }) : null,
         canSee && !visible ? /* @__PURE__ */ jsx5(Button2, { variant: "quiet", icon: secret.value !== null ? /* @__PURE__ */ jsx5(EyeOffGlyph, {}) : /* @__PURE__ */ jsx5(EyeGlyph, {}), "aria-label": secret.value !== null ? `Hide ${field.label}` : `Show ${field.label}`, disabled: busy, onClick: () => void toggle2() }) : null,
         canSee ? /* @__PURE__ */ jsx5(Button2, { variant: "quiet", icon: /* @__PURE__ */ jsx5(CopyIcon, {}), "aria-label": `Copy ${field.label}`, disabled: busy, onClick: () => void copy() }) : null
       ] }),
@@ -906,15 +932,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 "";
@@ -1532,6 +1571,7 @@ function HistoryRow({ item, port, page, entry, label, onRestored, onConflict, on
     {
       label: when,
       actions: entry.available ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
+        secret.value !== null ? /* @__PURE__ */ jsx7(HidesIn, { until: secret.until }) : null,
         /* @__PURE__ */ jsx7(Button4, { variant: "quiet", icon: secret.value !== null ? /* @__PURE__ */ jsx7(EyeOffGlyph, {}) : /* @__PURE__ */ jsx7(EyeGlyph, {}), "aria-label": secret.value !== null ? "Hide" : "Show", disabled: busy, onClick: () => void toggle2() }),
         /* @__PURE__ */ jsx7(Button4, { variant: "quiet", icon: /* @__PURE__ */ jsx7(CopyIcon2, {}), "aria-label": "Copy", disabled: busy, onClick: () => void copy() }),
         canRestore(page, entry) ? /* @__PURE__ */ jsx7(Button4, { variant: "quiet", icon: /* @__PURE__ */ jsx7(RestoreGlyph, {}), "aria-label": "Restore", disabled: busy, onClick: () => void restore() }) : null
@@ -2067,7 +2107,6 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSepara
 import { confirm as confirm2 } from "@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;
@@ -5194,6 +5233,7 @@ function RecoveryCodesRow({ item, field, port, onChanged }) {
       label: "Recovery codes",
       top: codes !== null,
       actions: /* @__PURE__ */ jsxs20(Fragment14, { children: [
+        codes ? /* @__PURE__ */ jsx21(HidesIn, { until: secret.until }) : null,
         canSee ? /* @__PURE__ */ jsx21(Button17, { variant: "quiet", icon: codes ? /* @__PURE__ */ jsx21(EyeOffGlyph, {}) : /* @__PURE__ */ jsx21(EyeGlyph, {}), "aria-label": codes ? "Hide codes" : "Show codes", disabled: busy, onClick: () => void toggle2() }) : null,
         canEdit && !sealed ? /* @__PURE__ */ jsx21(Button17, { variant: "quiet", icon: /* @__PURE__ */ jsx21(PencilGlyph, {}), "aria-label": "Replace all codes", disabled: busy, onClick: () => setDraft("") }) : null
       ] }),
@@ -6129,8 +6169,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);
@@ -6489,7 +6529,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;
@@ -6517,6 +6557,7 @@ function ItemList({ title, items, definitions, port, selectedId, onSelect, query
       header,
       /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx28(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__ */ 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: [
@@ -6579,7 +6620,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 }] : [],
@@ -8179,20 +8220,33 @@ function VaultSelect({ value, choices, onChange }) {
 }
 var CATEGORY_GLYPHS = { logins: GlobeIcon5, 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,
@@ -8205,21 +8259,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 = useLook2() === "desktop";
   return /* @__PURE__ */ jsxs37(
     "button",
@@ -8227,9 +8287,10 @@ function Entry({ on, glyph: Icon, label, count: count2, onClick }) {
       type: "button",
       "aria-current": on ? "page" : void 0,
       onClick,
-      className: cn15("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: cn15("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__ */ jsx39(Icon, { className: "size-4 shrink-0" }),
+        nested ? null : /* @__PURE__ */ jsx39(Icon, { className: "size-4 shrink-0" }),
         /* @__PURE__ */ jsx39("span", { className: "min-w-0 flex-1 truncate", children: label }),
         count2 !== void 0 ? /* @__PURE__ */ jsx39("span", { className: "text-xs tabular-nums text-muted-foreground", children: count2 }) : null
       ]
@@ -8257,7 +8318,10 @@ function VaultSidebar({ vault, choices, onVault, view, allCount, deletedCount, v
         hasRecents ? /* @__PURE__ */ jsx39(Entry, { on: view === "recent", glyph: ClockGlyph, label: "Recently opened", count: views.recent, onClick: () => onView("recent") }) : null,
         /* @__PURE__ */ jsx39(Entry, { on: view === "authenticator", glyph: LockGlyph, label: AUTHENTICATOR_LABEL, count: views.authenticator, onClick: () => onView("authenticator") })
       ] }),
-      views.categories.length > 0 ? /* @__PURE__ */ jsx39(Group, { title: "Categories", children: views.categories.map((e) => /* @__PURE__ */ jsx39(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__ */ jsx39(Group, { title: "Categories", children: views.categories.map((e) => /* @__PURE__ */ jsxs37("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx39(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__ */ jsx39(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__ */ jsxs37("div", { className: "flex flex-col gap-0.5", children: [
         /* @__PURE__ */ jsxs37("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__ */ jsx39(ChevronDownGlyph, { className: "size-3.5" }) : /* @__PURE__ */ jsx39(ChevronRightGlyph, { className: "size-3.5" }),
@@ -8522,10 +8586,11 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
   const views = useMemo6(() => buildViews(inThisVault, definitions, favorites, recents), [inThisVault, definitions, favorites, recents]);
   const visible = useMemo6(() => {
     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));
@@ -8577,65 +8642,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__ */ 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 compactHeader = mode === "full" ? void 0 : /* @__PURE__ */ jsxs38("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(11rem,1fr))] 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, loc.view), "aria-label": "Show" })
+  ] });
+  const compactActions = mode === "full" ? void 0 : /* @__PURE__ */ jsxs38("div", { className: "flex shrink-0 items-center gap-2", "data-vault-compact-actions": "", children: [
+    /* @__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)}` })
+    /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2", children: [
+      /* @__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)}`, 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__ */ jsx40(
@@ -8653,7 +8719,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__ */ jsxs38("div", { className: "flex flex-col gap-2", children: [
+        compactHeader,
+        /* @__PURE__ */ jsx40("div", { className: "flex justify-end", children: compactActions })
+      ] }) } : {}
     }
   ) : null;
   const specialView = pageView ?? (loc.view === "authenticator" ? /* @__PURE__ */ jsx40(AuthenticatorView, { ...viewProps }) : loc.view === "trash" ? /* @__PURE__ */ jsx40(TrashView, { ...viewProps }) : null);
@@ -8680,7 +8749,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;