@ai-matrx/vault 0.1.32 → 0.1.33

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.1.33
+
+UNVERIFIED: this release has no Unreleased entry and the source comparison could not be made (the caller supplied no source comparison). Whether source changed is unknown; consumer action is unknown.
+Check the package's gitHead on npm against this version's gitHead: `git diff <previous gitHead> <this gitHead> -- apps/shared/vault/src`.
+
 ## 0.1.32
 
 - **New entry `@ai-matrx/vault/identity`** (build-cost lane, 2026-10-22): `createSupabaseIdentity`, `needsRecentSignIn`, `CONFIRM_RETURN_KEY`, `IdentityGate`, `useConfirmed`, `wasCancelled` and their types, without the Vault workspace. A host that only needs "Confirm it's you" (the share sheet) imported them from the root and so compiled every Vault screen plus `@zip.js/zip.js`, `lossless-json` and `saxes`; `/identity` reaches only the gate (~20 kB, no third-party deps). The ESM build is now one code-split pass, so the gate ships once for both entries (`check-ships-once` + `check-reexport-order` now run in `build`); the root still exports every name. Guard: `scripts/verify-tarball.mjs` walks `dist/identity.js` and fails if it reaches any importer dependency. Consumer action: import the identity names from `@ai-matrx/vault/identity` when you do not render the Vault.

package/dist/{chunk-IJVSAR5M.js → chunk-B5TOAIY6.js}

@@ -443,7 +443,6 @@ export {
   ListGlyph,
   ImportGlyph,
   ExportGlyph,
-  ChevronDownGlyph,
   ChevronRightGlyph,
   SortGlyph,
   UserGlyph,
@@ -466,4 +465,4 @@ export {
   IdentityGate,
   wasCancelled
 };
-//# sourceMappingURL=chunk-IJVSAR5M.js.map
+//# sourceMappingURL=chunk-B5TOAIY6.js.map

package/dist/identity.js

@@ -6,7 +6,7 @@ import {
   needsRecentSignIn,
   useConfirmed,
   wasCancelled
-} from "./chunk-IJVSAR5M.js";
+} from "./chunk-B5TOAIY6.js";
 export {
   CONFIRM_RETURN_KEY,
   IdentityGate,

package/dist/index.cjs

@@ -180,7 +180,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/VaultApp.tsx
 var import_react42 = require("react");
-var import_design_system26 = require("@ai-matrx/design-system");
+var import_design_system25 = require("@ai-matrx/design-system");
 var import_controls35 = require("@ai-matrx/design-system/controls");
 var import_confirm_opener14 = require("@ai-matrx/kit/confirm-opener");
 
@@ -824,7 +824,7 @@ function PlainRow({ label, value, hint: hint2, openUrl, extra, multiline = false
   );
 }
 function AddRow({ label, onAdd, children = "Add" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VaultRow, { label, children: onAdd ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "text-sm text-muted-foreground hover:text-primary", onClick: onAdd, children }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-disabled-foreground", children: "\u2014" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VaultRow, { label, children: onAdd ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls2.Button, { type: "button", variant: "quiet", onClick: onAdd, children }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-disabled-foreground", children: "\u2014" }) });
 }
 function EditRow({ label, hint: hint2, value, onChange, placeholder, secret = false, multiline = false, onRemove, removeLabel, actions, autoFocus, onBlur, inputMode }) {
   const [shown, setShown] = (0, import_react5.useState)(false);
@@ -1767,19 +1767,21 @@ function useCopied() {
 function CodeButton({ live, digits, size = "md", label }) {
   const { copied, copy } = useCopied();
   const shown = live.code ? (0, import_format5.groupCode)(live.code) : maskedCode(digits);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    "button",
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_controls5.Tile,
     {
       type: "button",
       disabled: !live.code,
       onClick: () => live.code && void copy(live.code),
       "aria-label": live.code ? `Copy ${label} code` : `Getting ${label} code`,
-      title: live.code ? "Copy" : void 0,
-      className: (0, import_design_system8.cn)("group -mx-1.5 inline-flex max-w-full shrink-0 items-center gap-3 rounded-md px-1.5 py-1 text-left transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none", size === "lg" && "gap-4"),
-      children: [
+      variant: "quiet",
+      layout: "row",
+      title: "Copy code",
+      end: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: (0, import_design_system8.cn)("inline-flex shrink-0 items-center", size === "lg" ? "gap-4" : "gap-3"), children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: (0, import_design_system8.cn)("whitespace-nowrap font-mono font-medium tabular-nums tracking-[0.08em]", size === "lg" ? "text-2xl" : "text-[1.0625rem]", live.code ? "text-foreground" : "text-disabled-foreground"), children: shown }),
         copied ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex size-6 items-center justify-center text-success", role: "status", "aria-label": "Copied", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckGlyph, { className: "size-4" }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CountdownRing, { remaining: live.remaining, period: live.period, loading: !live.code })
-      ]
+      ] }),
+      className: "max-w-full shrink-0"
     }
   );
 }
@@ -2582,11 +2584,29 @@ function OtpListRow({ port, item, family, entry, onOpen, onOpenInNewTab, onRenam
   if (a.removed) return null;
   const sub = a.error ?? [entry?.account, loginSiteOf(item) || entry?.issuer].filter((v, i, all) => Boolean(v) && all.indexOf(v) === i).join(" \xB7 ");
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid min-h-14 grid-cols-[2rem_minmax(0,1fr)_auto_auto] items-center gap-x-3 rounded-lg px-2 py-1.5 transition-colors hover:bg-accent/50", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: onOpen, "aria-label": `Open ${item.name}`, tabIndex: -1, className: "flex size-8 items-center justify-center rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ItemIcon, { definitionKey: item.definitionKey, family, site: loginSiteOf(item) || (entry?.issuer ?? "") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("button", { type: "button", onClick: onOpen, className: "flex min-w-0 flex-col items-start rounded-md text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: (0, import_design_system10.cn)("max-w-full truncate text-sm font-medium", a.enabled ? "text-foreground" : "text-muted-foreground"), children: item.name }),
-      sub ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: (0, import_design_system10.cn)("max-w-full truncate text-xs", a.error ? "text-destructive" : "text-muted-foreground"), title: sub, children: sub }) : null
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_controls9.Button,
+      {
+        type: "button",
+        variant: "quiet",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ItemIcon, { definitionKey: item.definitionKey, family, site: loginSiteOf(item) || (entry?.issuer ?? "") }),
+        "aria-label": `Open ${item.name}`,
+        tabIndex: -1,
+        className: "shrink-0",
+        onClick: onOpen
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_controls9.Tile,
+      {
+        type: "button",
+        variant: "quiet",
+        onClick: onOpen,
+        title: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: a.enabled ? "text-foreground" : "text-muted-foreground", children: item.name }),
+        line: sub ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: a.error ? "text-destructive" : "text-muted-foreground", title: sub, children: sub }) : void 0,
+        className: "min-w-0"
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex shrink-0 justify-end", children: !a.enabled ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm text-disabled-foreground", children: "Off" }),
       canManage ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls9.Button, { variant: "quiet", disabled: a.busy, onClick: () => void a.setEnabled(true), children: "Turn on" }) : null
@@ -4858,7 +4878,7 @@ function ImportPanel({ port, host, items, definitions, organizations, onClose, o
       done.needOtp.map((made) => {
         const now = items.find((i) => i.id === made.id);
         if (now?.authenticator) return null;
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VaultRow, { label: "Authenticator", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("button", { type: "button", className: "truncate text-left text-primary hover:underline", onClick: () => setOtpFor(made.id), children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VaultRow, { label: "Authenticator", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_controls15.Button, { type: "button", variant: "link", className: "truncate", onClick: () => setOtpFor(made.id), children: [
           "Set up authenticator for ",
           made.name
         ] }) }, `otp:${made.id}`);
@@ -6738,21 +6758,19 @@ function ListRow({ item, family, port, on, onSelect, withOwner, ownContextMenu,
         setMenuOpen(true);
       } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-          "button",
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_controls23.Tile,
           {
             type: "button",
             "aria-current": on ? "true" : void 0,
             "data-surface": on ? "primary" : void 0,
             onClick: () => onSelect(item.id),
-            className: (0, import_design_system20.cn)("flex h-12 w-full items-center gap-3 rounded-lg px-2 pr-10 text-left", on ? "bg-primary text-primary-foreground" : "hover:bg-accent"),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ItemIcon, { definitionKey: item.definitionKey, family, site: loginSiteOf(item), inverted: on }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "truncate text-sm font-medium", children: item.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: subtitleOf(item, withOwner) })
-              ] })
-            ]
+            layout: "row",
+            variant: "quiet",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ItemIcon, { definitionKey: item.definitionKey, family, site: loginSiteOf(item), inverted: on }),
+            title: item.name,
+            line: subtitleOf(item, withOwner),
+            className: "w-full pr-10"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("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: [
@@ -7047,7 +7065,6 @@ function TrashView({ port, deleted, query, header, onChanged }) {
 
 // src/NewItemFlow.tsx
 var import_react32 = require("react");
-var import_design_system21 = require("@ai-matrx/design-system");
 var import_controls26 = require("@ai-matrx/design-system/controls");
 var import_icons13 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime31 = require("react/jsx-runtime");
@@ -7106,10 +7123,17 @@ function NewItemFlow({ definitions, url, onUrl, onChoose, onCancel }) {
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-between gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-xs font-medium text-muted-foreground", children: search.trim() ? "Matching types" : "Or choose a type" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: shown.map((d) => {
           const Icon = definitionGlyph(d.key, d.family);
-          return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { type: "button", onClick: () => use(d), className: (0, import_design_system21.cn)("flex h-12 w-full items-center gap-3 rounded-xl border border-border bg-card px-3 text-left hover:bg-accent"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { className: "size-4" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: d.label })
-          ] }) }, d.key);
+          return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            import_controls26.Tile,
+            {
+              type: "button",
+              onClick: () => use(d),
+              variant: "outline",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { className: "size-4" }),
+              title: d.label,
+              className: "w-full"
+            }
+          ) }, d.key);
         }) }),
         search.trim() && matches.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "px-1 text-sm text-muted-foreground", children: "No type matches." }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_controls26.SearchField, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: `Search all ${definitions.length} types`, "aria-label": "Search types" })
@@ -7121,7 +7145,7 @@ function NewItemFlow({ definitions, url, onUrl, onChoose, onCancel }) {
 // src/sharing/SecureLinkPanel.tsx
 var import_react33 = require("react");
 var import_confirm_opener11 = require("@ai-matrx/kit/confirm-opener");
-var import_design_system22 = require("@ai-matrx/design-system");
+var import_design_system21 = require("@ai-matrx/design-system");
 var import_controls27 = require("@ai-matrx/design-system/controls");
 var import_format11 = require("@ai-matrx/kit/format");
 
@@ -7367,7 +7391,7 @@ function SecureLinkPanel({ item, port, onClose }) {
           email.trim() ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VaultRow, { label: "Delivery", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: plan?.same ? "text-warning" : "text-foreground", children: planWords(plan) }) }) : null
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VaultSection, { title: "Include", children: optionsError ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Empty, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-destructive", children: optionsError }) }) : !options ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_controls27.RegionSkeleton, { shape: "rows", count: 2, "aria-label": "Loading what can be sent", className: "px-3 sm:px-4" }) : options.fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Empty, { children: "Name and details only" }) : options.fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "flex min-h-11 items-center gap-3 px-3 py-1 sm:px-4", "data-clickable": f.available ? "" : void 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system22.Checkbox, { checked: fields.includes(f.key), disabled: !f.available, onCheckedChange: (v) => toggle2(f.key, v === true), "aria-label": f.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system21.Checkbox, { checked: fields.includes(f.key), disabled: !f.available, onCheckedChange: (v) => toggle2(f.key, v === true), "aria-label": f.label }),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground", children: f.label }),
           !f.available && f.reason ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "min-w-0 max-w-[55%] truncate text-xs text-muted-foreground", title: f.reason, children: f.reason }) : null
         ] }, f.key)) }),
@@ -8005,7 +8029,7 @@ function Importer({ bridge, readLimits, activeOrganizationId, organizations, onC
 
 // src/extension/PageView.tsx
 var import_react40 = require("react");
-var import_design_system24 = require("@ai-matrx/design-system");
+var import_design_system23 = require("@ai-matrx/design-system");
 var import_controls33 = require("@ai-matrx/design-system/controls");
 var import_icons15 = require("@ai-matrx/design-system/icons");
 
@@ -8148,7 +8172,7 @@ function FillSetupCard({ fillSetup }) {
 
 // src/extension/PageGenerator.tsx
 var import_react39 = require("react");
-var import_design_system23 = require("@ai-matrx/design-system");
+var import_design_system22 = require("@ai-matrx/design-system");
 var import_controls32 = require("@ai-matrx/design-system/controls");
 var import_icons14 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime37 = require("react/jsx-runtime");
@@ -8209,9 +8233,9 @@ function PageGenerator({ fields }) {
         label: "New password",
         actions: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
           value ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_controls32.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons14.CopyIcon, {}), "aria-label": "Copy password", onClick: () => void copy(value, "Password") }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_design_system23.Popover, { open, onOpenChange: setOpen, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system23.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_controls32.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KeyGlyph, {}), disabled: busy, children: "Generate" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system23.PopoverContent, { sizing: "content", align: "end", children: open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PasswordGenerator, { limits, useLabel: "Fill page", onUse: (v) => void onUse(v) }) : null })
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_design_system22.Popover, { open, onOpenChange: setOpen, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system22.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_controls32.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KeyGlyph, {}), disabled: busy, children: "Generate" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system22.PopoverContent, { sizing: "content", align: "end", children: open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PasswordGenerator, { limits, useLabel: "Fill page", onUse: (v) => void onUse(v) }) : null })
           ] })
         ] }),
         children: said ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { role: "status", className: said.tone === "success" ? "line-clamp-2 text-xs text-foreground" : "line-clamp-2 text-xs text-muted-foreground", children: said.text }) : targets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-xs text-muted-foreground", children: "Choose the boxes to fill." }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-xs text-disabled-foreground", children: "Fills the page\u2019s new-password box" })
@@ -8279,7 +8303,7 @@ function PageView({ port, page, fill, capture, fillSetup, newPasswordFields, ite
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex h-full min-h-0 flex-col overflow-y-auto bg-background text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-3 px-3 pb-4 pt-3", children: [
     header,
     /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex min-h-7 items-center gap-2 px-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_design_system24.SiteIcon, { site: page.url, fallback: import_icons15.GlobeIcon, className: "size-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_design_system23.SiteIcon, { site: page.url, fallback: import_icons15.GlobeIcon, className: "size-4" }),
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", title: page.url, children: site || "No page open" }),
       page.refresh ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_controls33.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(RefreshGlyph, {}), "aria-label": "Check again", onClick: page.refresh }) : null,
       onBrowse ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_controls33.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ListGlyph, {}), onClick: onBrowse, children: "All items" }) : null
@@ -8326,13 +8350,18 @@ function MatchRow({ itemId, item, tag, family, port, busy, running, onOpen, onFi
   };
   const subtitle = [item ? loginSiteOf(item) || item.definitionLabel : "", tag].filter(Boolean).join(" \xB7 ");
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { className: "flex h-12 items-center gap-1 pl-1 pr-2", "data-item": itemId, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("button", { type: "button", onClick: () => onOpen(itemId), className: "flex h-11 min-w-0 flex-1 items-center gap-3 rounded-lg px-2 text-left hover:bg-accent", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ItemIcon, { definitionKey: item?.definitionKey ?? "website_login", family, site: item ? loginSiteOf(item) : "" }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "truncate text-sm font-medium", children: item?.name ?? "Saved login" }),
-        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: subtitle }) : null
-      ] })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      import_controls33.Tile,
+      {
+        type: "button",
+        variant: "quiet",
+        onClick: () => onOpen(itemId),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ItemIcon, { definitionKey: item?.definitionKey ?? "website_login", family, site: item ? loginSiteOf(item) : "" }),
+        title: item?.name ?? "Saved login",
+        line: subtitle || void 0,
+        className: "min-w-0 flex-1"
+      }
+    ),
     onFill ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_controls33.Button, { variant: "primary", disabled: busy, "aria-busy": running || void 0, onClick: onFill, "aria-label": `Fill ${item?.name ?? "this login"}`, children: running ? "Filling\u2026" : "Fill" }) : null,
     onSignIn ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_controls33.Button, { variant: onFill ? "outline" : "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ShieldGlyph, {}), disabled: busy, onClick: onSignIn, "aria-label": `Sign me in with ${item?.name ?? "this login"}`, title: "Sign me in", children: "Sign me in" }) : null,
     user && item ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_controls33.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(UserGlyph, {}), "aria-label": `Copy ${user.label}`, title: `Copy ${user.label}`, disabled: reading, onClick: () => void read(user.label, () => port.reveal(item, user.key)) }) : null,
@@ -8343,7 +8372,7 @@ function MatchRow({ itemId, item, tag, family, port, busy, running, onOpen, onFi
 
 // src/Sidebar.tsx
 var import_react41 = require("react");
-var import_design_system25 = require("@ai-matrx/design-system");
+var import_design_system24 = require("@ai-matrx/design-system");
 var import_controls34 = require("@ai-matrx/design-system/controls");
 var import_icons16 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime39 = require("react/jsx-runtime");
@@ -8426,20 +8455,21 @@ function viewOptions(views, allCount, deletedCount, hasFavorites, hasRecents, ha
   ];
 }
 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",
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    import_controls34.Tile,
     {
       type: "button",
       "aria-current": on ? "page" : void 0,
+      selected: on,
       onClick,
+      layout: "row",
+      variant: "quiet",
+      dense: true,
+      icon: nested ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { className: "size-4 shrink-0" }),
+      title: label,
+      ...count2 !== void 0 ? { end: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-xs tabular-nums text-muted-foreground", children: count2 }) } : {},
       "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: [
-        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
-      ]
+      className: (0, import_design_system24.cn)("w-full", nested && "pl-9")
     }
   );
 }
@@ -8469,11 +8499,18 @@ function VaultSidebar({ vault, choices, onVault, view, allCount, deletedCount, v
         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" }),
-          "Tags",
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ml-auto tabular-nums", children: views.tags.length })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          import_controls34.DisclosureHeader,
+          {
+            type: "button",
+            variant: "label",
+            open: tagsOpen,
+            onClick: () => setTagsOpen((o) => !o),
+            title: "Tags",
+            meta: views.tags.length,
+            className: "w-full px-2.5"
+          }
+        ),
         tagsOpen ? views.tags.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
       ] }) : null
     ] }),
@@ -8484,11 +8521,19 @@ function VaultSidebar({ vault, choices, onVault, view, allCount, deletedCount, v
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: false, glyph: SafeGlyph, label: "Backup", onClick: () => onPanel("backup") }),
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: false, glyph: ShieldGlyph, label: "Browsers that fill", onClick: () => onPanel("devices") }),
       hasNativeImport ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: false, glyph: ImportGlyph, label: "Import passkeys", onClick: () => onPanel("import-passkeys") }) : null,
-      nativeProvider && nativeProvider.status !== "unavailable" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("button", { type: "button", onClick: nativeProvider.openSetup, className: "flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-sm hover:bg-sidebar-accent", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ShieldGlyph, { className: "size-4 shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "min-w-0 flex-1 truncate", children: "System AutoFill" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: (0, import_design_system25.cn)("text-xs", nativeProvider.status === "ready" ? "text-success" : "text-warning"), children: nativeProvider.status === "ready" ? "On" : "Set up" })
-      ] }) : null,
+      nativeProvider && nativeProvider.status !== "unavailable" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        import_controls34.Tile,
+        {
+          type: "button",
+          variant: "quiet",
+          dense: true,
+          onClick: nativeProvider.openSetup,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ShieldGlyph, { className: "size-4 shrink-0" }),
+          title: "System AutoFill",
+          end: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: (0, import_design_system24.cn)("text-xs", nativeProvider.status === "ready" ? "text-success" : "text-warning"), children: nativeProvider.status === "ready" ? "On" : "Set up" }),
+          className: "w-full"
+        }
+      ) : null,
       onOpenWeb ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: false, glyph: ExternalGlyph, label: "Open on the web", onClick: onOpenWeb }) : null,
       onLock ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: false, glyph: LockGlyph, label: "Lock", onClick: onLock }) : null
     ] })
@@ -8538,7 +8583,7 @@ function VaultApp(given) {
   const lock = props.host?.lock;
   const locked = useLocked(lock);
   const port = (0, import_react42.useMemo)(() => lock ? guardPort(props.port, () => lock.locked()) : props.port, [props.port, lock]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system26.LookScope, { look: props.look ?? "web", className: "h-full min-h-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "relative h-full min-h-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(NoticeProvider, { notify: props.notify, children: lock && locked ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LockedScreen, { lock }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ClipboardProvider, { clipboard: props.host?.clipboard, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RevealSecondsProvider, { seconds: props.host?.revealSeconds, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IdentityGate, { identity: props.host?.identity, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GeneratorLimitsProvider, { resolve: generatorLimitsFrom(props.host?.knobs), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Workspace, { ...props, port }) }) }) }) }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system25.LookScope, { look: props.look ?? "web", className: "h-full min-h-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "relative h-full min-h-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(NoticeProvider, { notify: props.notify, children: lock && locked ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LockedScreen, { lock }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ClipboardProvider, { clipboard: props.host?.clipboard, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RevealSecondsProvider, { seconds: props.host?.revealSeconds, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IdentityGate, { identity: props.host?.identity, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GeneratorLimitsProvider, { resolve: generatorLimitsFrom(props.host?.knobs), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Workspace, { ...props, port }) }) }) }) }) }) }) });
 }
 function useOrganizationSettings(host) {
   const knobs = host.knobs;
@@ -8865,38 +8910,38 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
         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.jsxs)(import_design_system25.DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system25.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_system25.DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system25.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.jsxs)(import_design_system25.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.jsxs)(import_design_system25.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.jsxs)(import_design_system25.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: [
+        host.nativeImport ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system25.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: [
+        host.nativeProvider && host.nativeProvider.status !== "unavailable" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system25.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: [
+        host.lock?.lock ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system25.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: [
+        host.openWebVault ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system25.DropdownMenuItem, { onSelect: host.openWebVault, children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ExternalGlyph, { className: "size-4" }),
           "Open on the web"
         ] }) : null
@@ -9102,7 +9147,7 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ref: rootRef, className: "flex h-full min-h-0 w-full flex-col bg-background text-foreground", children: [
     refreshError ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { role: "status", className: "flex items-center gap-3 border-b border-border bg-muted px-4 py-2 text-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "min-w-0 flex-1 truncate text-warning", title: refreshError, children: "Couldn\u2019t refresh. Showing what was loaded." }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: "shrink-0 text-primary hover:underline", onClick: refresh, children: "Try again" })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_controls35.Button, { type: "button", variant: "link", className: "shrink-0", onClick: refresh, children: "Try again" })
     ] }) : null,
     hasPrompts ? (
       // "Save this login?" and "Turn on filling" show above the list in every view, not only "This page".
@@ -9117,7 +9162,7 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
         snap.unavailable.join(", "),
         ". Showing the rest."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { type: "button", className: "shrink-0 text-primary hover:underline", onClick: refresh, children: "Try again" })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_controls35.Button, { type: "button", variant: "link", className: "shrink-0", onClick: refresh, children: "Try again" })
     ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: `grid min-h-0 w-full flex-1 ${grid} overflow-hidden`, children: [
       mode === "full" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(