@ai-matrx/vault 0.1.42 → 0.1.44

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## 0.1.42
+## 0.1.44
 
 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`.
@@ -299,6 +299,8 @@ Changed shipped source files (8):
 ## 0.1.7
 ### Unreleased
 
+- **Narrow-container fixes from the 360px / 22.5rem playground walk** (2026-10-23): an Authenticator list row measures its OWN width, so below 26rem the code drops onto a second line under the name (the name keeps the row, the code is never squeezed) and above it everything stays on one line; the camera notes in Add authenticator wrap to a second line instead of being cut by Dismiss, and the setup-key hint is "Setup key or otpauth link" (`SETUP_KEY_PLACEHOLDER`); same-named organizations get the shortest id fragment that differs inside their group (`organizationHints`, a suffix when whole ids collide) instead of an identical first 8 characters; the item header measures its pane, not the window (the star and Share step into the "..." menu, the title wraps to two lines, the owner badge wraps below instead of clipping), and the one-time password row hides its separate copy button below 24rem so the ring never sits on it ("Copy code" is in its menu; the code itself still copies). Proof: `src/container-responsive-layout.test.tsx`, `src/narrow-setup-notes.test.tsx`, `src/organization-hints-distinct.test.ts`. Consumer action: none.
+
 - Host-held lock: `host.lock` (`VaultLock`: `locked`, `subscribe`, `unlock`, optional `lock` and
   `unlockLabel`). While locked the vault shows only "Vault locked" with Unlock, and every port call
   (areas included) is refused at call time (`guardPort`, `VaultLockedError`). "Lock" joins the

package/dist/index.cjs

@@ -1593,7 +1593,7 @@ function HistoryRow({ item, port, page, entry, label, onRestored, onConflict, on
 var import_react13 = require("react");
 var import_controls9 = require("@ai-matrx/design-system/controls");
 var import_design_system10 = require("@ai-matrx/design-system");
-var import_icons5 = require("@ai-matrx/design-system/icons");
+var import_icons6 = require("@ai-matrx/design-system/icons");
 
 // src/ItemIcon.tsx
 var import_design_system7 = require("@ai-matrx/design-system");
@@ -1928,6 +1928,7 @@ function useCanScan() {
   }, []);
   return ok;
 }
+var SETUP_KEY_PLACEHOLDER = "Setup key or otpauth link";
 var CAMERA_NOTES = {
   blocked: "Camera blocked. Paste the key or choose a QR image.",
   missing: "No camera. Paste the key or choose a QR image.",
@@ -1988,7 +1989,7 @@ function QrScanInline({ onResult, onClose }) {
   if (error) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "flex items-center gap-2 px-1 pt-1 text-xs text-muted-foreground", role: "status", "data-camera-note": "", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CameraGlyph, { className: "size-3.5 shrink-0", "aria-hidden": true }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "min-w-0 flex-1 truncate", children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "min-w-0 flex-1 break-words", children: error }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_controls6.Button, { variant: "quiet", onClick: onClose, children: "Dismiss" })
     ] });
   }
@@ -2003,7 +2004,7 @@ function QrScanInline({ onResult, onClose }) {
     ] })
   ] });
 }
-function OtpSetupRow({ value, onChange, label = "Authenticator", placeholder = "Paste setup key or otpauth link", disabled = false, autoFocus = false, onImage, onRecognized, status, autoStartCamera = false }) {
+function OtpSetupRow({ value, onChange, label = "Authenticator", placeholder = SETUP_KEY_PLACEHOLDER, disabled = false, autoFocus = false, onImage, onRecognized, status, autoStartCamera = false }) {
   const file = (0, import_react10.useRef)(null);
   const canScan = useCanScan();
   const [scanning, setScanning] = (0, import_react10.useState)(false);
@@ -2140,6 +2141,7 @@ var import_react11 = require("react");
 var import_controls7 = require("@ai-matrx/design-system/controls");
 var import_design_system9 = require("@ai-matrx/design-system");
 var import_confirm_opener2 = require("@ai-matrx/kit/confirm-opener");
+var import_icons5 = require("@ai-matrx/design-system/icons");
 
 // src/authenticator/port.ts
 var OTP_SEED_KEY = "totp_seed";
@@ -2204,11 +2206,16 @@ function useOtpActions(port, item, onChanged) {
 function TotpRow({ port, item, onChanged }) {
   const a = useOtpActions(port, item, onChanged);
   const live = useLiveCode(port, item, a.enabled && !a.removed);
+  const { copy } = useCopied();
   const canManage = item.capabilities.canManage || item.capabilities.canEdit;
   if (a.removed || !item.authenticator) return null;
   const menu = canManage ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_design_system9.DropdownMenu, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_design_system9.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_controls7.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MoreGlyph, {}), "aria-label": "Authenticator options", disabled: a.busy }) }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_design_system9.DropdownMenuContent, { align: "end", className: "min-w-44", children: [
+      a.enabled && live.code ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_design_system9.DropdownMenuItem, { onSelect: () => live.code && void copy(live.code), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.CopyIcon, { className: "size-4" }),
+        "Copy code"
+      ] }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_design_system9.DropdownMenuItem, { onSelect: () => void a.setEnabled(!a.enabled), children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PowerGlyph, { className: "size-4" }),
         a.enabled ? "Turn off" : "Turn on"
@@ -2220,12 +2227,12 @@ function TotpRow({ port, item, onChanged }) {
       ] })
     ] })
   ] }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "@container/otprow", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     VaultRow,
     {
       label: "Authenticator",
       actions: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-        a.enabled ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CopyCodeButton, { live, label: item.name }) : null,
+        a.enabled ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "hidden @[24rem]/otprow:contents", "data-copy-code-button": "", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CopyCodeButton, { live, label: item.name }) }) : null,
         menu
       ] }),
       children: a.error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "flex items-center gap-2", children: [
@@ -2239,7 +2246,7 @@ function TotpRow({ port, item, onChanged }) {
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_controls7.Button, { variant: "quiet", onClick: live.retry, children: "Retry" })
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CodeButton, { live, digits: item.authenticator.digits, label: item.name })
     }
-  );
+  ) });
 }
 function TotpEditRow({ value, onChange, hasExisting, item, port, onEnrolled, onRecognized }) {
   const confirmed = useConfirmed();
@@ -2263,7 +2270,7 @@ function TotpEditRow({ value, onChange, hasExisting, item, port, onEnrolled, onR
         setStatus(null);
         onChange(v);
       },
-      placeholder: hasExisting ? "Paste a new key to replace" : "Paste setup key or otpauth link",
+      placeholder: hasExisting ? "Paste a new key to replace" : SETUP_KEY_PLACEHOLDER,
       status,
       ...uploadImage ? { onImage: (f) => void uploadImage(f) } : {},
       ...onRecognized ? { onRecognized } : {}
@@ -2608,78 +2615,83 @@ function OtpListRow({ port, item, family, entry, onOpen, onOpenInNewTab, onRenam
   const canManage = item.capabilities.canManage || item.capabilities.canEdit;
   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-1 rounded-lg px-2 py-1.5 transition-colors hover:bg-accent/50", children: [
-    /* @__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,
-        oneLine: true,
-        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
-    ] }) : live.error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "max-w-40 truncate text-xs text-destructive", title: live.error, children: live.error }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls9.Button, { variant: "quiet", onClick: live.retry, children: "Retry" })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CodeButton, { live, digits: item.authenticator?.digits ?? 6, label: item.name }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenu, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system10.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls9.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MoreGlyph, {}), "aria-label": `${item.name} options`, disabled: a.busy }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuContent, { align: "end", className: "min-w-44", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuItem, { onSelect: onOpen, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ExternalGlyph, { className: "size-4" }),
-          "Open login"
-        ] }),
-        onOpenInNewTab ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuItem, { onSelect: onOpenInNewTab, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ExternalGlyph, { className: "size-4" }),
-          "Open in new tab"
-        ] }) : null,
-        live.code ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuItem, { onSelect: () => live.code && void copy(live.code), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons5.CopyIcon, { className: "size-4" }),
-          "Copy code"
-        ] }) : null,
-        canManage ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuItem, { onSelect: onRename, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PencilGlyph, { className: "size-4" }),
-            "Rename"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuItem, { onSelect: () => void a.setEnabled(!a.enabled), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PowerGlyph, { className: "size-4" }),
-            a.enabled ? "Turn off" : "Turn on"
+  return (
+    // A container, not the window, decides: below 26rem of row width the code drops onto its own line
+    // under the name (the name keeps the whole row's width, the code is never squeezed); above it
+    // everything sits on one line. The side panel and the 22.5rem frame are narrow at any window size.
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "@container/otp", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "grid min-h-14 grid-cols-[2rem_minmax(0,1fr)_auto] items-center gap-x-1 gap-y-0.5 rounded-lg px-2 py-1.5 transition-colors hover:bg-accent/50 @[26rem]/otp:grid-cols-[2rem_minmax(0,1fr)_auto_auto]", children: [
+      /* @__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: "col-start-1 row-start-1 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,
+          oneLine: true,
+          className: "col-start-2 row-start-1 min-w-0"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "col-start-2 row-start-2 flex min-w-0 justify-start @[26rem]/otp:col-start-3 @[26rem]/otp:row-start-1 @[26rem]/otp:shrink-0 @[26rem]/otp: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
+      ] }) : live.error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "max-w-40 truncate text-xs text-destructive", title: live.error, children: live.error }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls9.Button, { variant: "quiet", onClick: live.retry, children: "Retry" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CodeButton, { live, digits: item.authenticator?.digits ?? 6, label: item.name }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenu, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system10.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls9.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MoreGlyph, {}), "aria-label": `${item.name} options`, disabled: a.busy, className: "col-start-3 row-start-1 @[26rem]/otp:col-start-4" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuContent, { align: "end", className: "min-w-44", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuItem, { onSelect: onOpen, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ExternalGlyph, { className: "size-4" }),
+            "Open login"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system10.DropdownMenuSeparator, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuItem, { className: "text-destructive focus:text-destructive", onSelect: () => void a.remove(), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TrashGlyph, { className: "size-4" }),
-            "Remove"
-          ] })
-        ] }) : null
+          onOpenInNewTab ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuItem, { onSelect: onOpenInNewTab, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ExternalGlyph, { className: "size-4" }),
+            "Open in new tab"
+          ] }) : null,
+          live.code ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuItem, { onSelect: () => live.code && void copy(live.code), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons6.CopyIcon, { className: "size-4" }),
+            "Copy code"
+          ] }) : null,
+          canManage ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuItem, { onSelect: onRename, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PencilGlyph, { className: "size-4" }),
+              "Rename"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuItem, { onSelect: () => void a.setEnabled(!a.enabled), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PowerGlyph, { className: "size-4" }),
+              a.enabled ? "Turn off" : "Turn on"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system10.DropdownMenuSeparator, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.DropdownMenuItem, { className: "text-destructive focus:text-destructive", onSelect: () => void a.remove(), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TrashGlyph, { className: "size-4" }),
+              "Remove"
+            ] })
+          ] }) : null
+        ] })
       ] })
-    ] })
-  ] });
+    ] }) })
+  );
 }
 
 // src/fields/SettingsPanels.tsx
 var import_react14 = require("react");
 var import_controls10 = require("@ai-matrx/design-system/controls");
 var import_confirm_opener3 = require("@ai-matrx/kit/confirm-opener");
-var import_icons6 = require("@ai-matrx/design-system/icons");
+var import_icons7 = require("@ai-matrx/design-system/icons");
 
 // src/fields/rules.ts
 var ENV_KEY_RE = /^[A-Za-z_][A-Za-z0-9_]*$/;
@@ -2942,7 +2954,7 @@ function ItemSettingsPanel({ item, port, onClose, onChanged, onPanel }) {
         {
           label: f.label,
           hint: quietHint("Encrypted, so the browser can\u2019t match it"),
-          actions: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_controls10.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons6.GlobeIcon, {}), disabled: locked, onClick: () => void promote(f), children: "Use as website" }),
+          actions: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_controls10.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons7.GlobeIcon, {}), disabled: locked, onClick: () => void promote(f), children: "Use as website" }),
           children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-muted-foreground", children: "Not a website yet" })
         },
         f.id
@@ -2976,7 +2988,7 @@ function ItemSettingsPanel({ item, port, onClose, onChanged, onPanel }) {
 var import_react15 = require("react");
 var import_design_system11 = require("@ai-matrx/design-system");
 var import_controls11 = require("@ai-matrx/design-system/controls");
-var import_icons7 = require("@ai-matrx/design-system/icons");
+var import_icons8 = require("@ai-matrx/design-system/icons");
 
 // src/generator/generate.ts
 var import_credential_generator = require("@ai-matrx/kit/credential-generator");
@@ -3131,7 +3143,7 @@ function PasswordGenerator({ limits: source, onUse, useLabel = "Use" }) {
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex min-h-7 items-start gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("code", { className: (0, import_design_system11.cn)("min-w-0 flex-1 break-all py-1 font-mono text-sm", candidate ? "text-foreground" : "text-muted-foreground"), "data-testid": "generated-value", children: candidate ? revealed ? candidate.value : MASK3 : "\u2014" }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_controls11.Button, { variant: "quiet", icon: revealed ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(EyeOffGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(EyeGlyph, {}), "aria-label": revealed ? "Hide" : "Reveal", disabled: !candidate, onClick: () => setRevealed((r) => !r) }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_controls11.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons7.CopyIcon, {}), "aria-label": "Copy", disabled: !candidate, onClick: () => void copy() }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_controls11.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons8.CopyIcon, {}), "aria-label": "Copy", disabled: !candidate, onClick: () => void copy() }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_controls11.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(RefreshGlyph, {}), "aria-label": "Generate another", onClick: () => change(settings) })
       ] }),
       strength && candidate ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-xs", children: [
@@ -5017,7 +5029,7 @@ var import_react30 = require("react");
 var import_design_system19 = require("@ai-matrx/design-system");
 var import_design_system20 = require("@ai-matrx/design-system");
 var import_controls23 = require("@ai-matrx/design-system/controls");
-var import_icons12 = require("@ai-matrx/design-system/icons");
+var import_icons13 = require("@ai-matrx/design-system/icons");
 
 // src/ItemPane.tsx
 var import_react29 = require("react");
@@ -5033,7 +5045,7 @@ var import_controls16 = require("@ai-matrx/design-system/controls");
 var import_design_system13 = require("@ai-matrx/design-system");
 var import_confirm_opener6 = require("@ai-matrx/kit/confirm-opener");
 var import_download3 = require("@ai-matrx/kit/download");
-var import_icons8 = require("@ai-matrx/design-system/icons");
+var import_icons9 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var messageOf2 = (e, fallback) => wasCancelled(e) ? null : e instanceof Error ? e.message : fallback;
 var TOO_BIG = "Files over 25 MB can't be stored.";
@@ -5109,7 +5121,7 @@ function FilesSection({ item, port, editing, onChanged }) {
                 {
                   label: a.label,
                   hint: a.description || void 0,
-                  actions: a.handling === "sealed" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Badge, { icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LockGlyph, {}), children: "Never shown" }) : canDownload(item, a) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons8.DownloadIcon, {}), "aria-label": `Download ${a.fileName}`, disabled: busy !== null, onClick: () => void download(a) }) : null,
+                  actions: a.handling === "sealed" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Badge, { icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LockGlyph, {}), children: "Never shown" }) : canDownload(item, a) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons9.DownloadIcon, {}), "aria-label": `Download ${a.fileName}`, disabled: busy !== null, onClick: () => void download(a) }) : null,
                   children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FileName, { file: a })
                 },
                 a.id
@@ -5140,7 +5152,7 @@ function EditableFile({ port, item: it, file: a, busy: b, run: go, onDownload, o
         label: a.label,
         hint: a.description || void 0,
         actions: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-          canDownload(it, a) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons8.DownloadIcon, {}), "aria-label": `Download ${a.fileName}`, disabled: b !== null, onClick: onDownload }) : null,
+          canDownload(it, a) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons9.DownloadIcon, {}), "aria-label": `Download ${a.fileName}`, disabled: b !== null, onClick: onDownload }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PencilGlyph, {}), "aria-label": `Edit ${a.label}`, pressed: open, disabled: b !== null, onClick: () => setOpen((o) => !o) }),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UploadGlyph, {}), "aria-label": `Replace ${a.fileName}`, disabled: b !== null, onClick: () => replacer.current?.click() }),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TrashGlyph, {}), "aria-label": `Delete ${a.label}`, disabled: b !== null, onClick: () => void remove() }),
@@ -5291,7 +5303,7 @@ function DraftFilesSection({ files, onFiles }) {
 // src/fields/RecoveryCodesRow.tsx
 var import_react23 = require("react");
 var import_controls17 = require("@ai-matrx/design-system/controls");
-var import_icons9 = require("@ai-matrx/design-system/icons");
+var import_icons10 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var MASK4 = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
 var say2 = (e, fallback) => e instanceof Error && e.message ? e.message : fallback;
@@ -5386,7 +5398,7 @@ function RecoveryCodesRow({ item, field, port, onChanged }) {
       children: sealed ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_controls17.Badge, { icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LockGlyph, {}), children: "Never shown" }) : codes ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("ul", { className: "flex flex-col gap-0.5", "aria-label": "Recovery codes", children: [
         codes.map((code, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("li", { className: "flex min-h-7 items-center gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("code", { className: "min-w-0 flex-1 break-all font-mono text-sm text-foreground", children: code }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_controls17.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons9.CopyIcon, {}), "aria-label": `Copy code ${i + 1}`, onClick: () => void copyValue2(code, "Recovery code") }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_controls17.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons10.CopyIcon, {}), "aria-label": `Copy code ${i + 1}`, onClick: () => void copyValue2(code, "Recovery code") }),
           canEdit ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_controls17.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CheckGlyph, {}), disabled: busy, onClick: () => void markUsed(i), children: "Mark used" }) : null
         ] }, `${i}-${code}`)),
         error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { role: "alert", className: "text-xs text-destructive", children: error }) : null
@@ -5567,7 +5579,7 @@ function turnedOnSentence(done) {
 }
 
 // src/ItemPane.tsx
-var import_icons11 = require("@ai-matrx/design-system/icons");
+var import_icons12 = require("@ai-matrx/design-system/icons");
 var import_drafts = require("@ai-matrx/kit/drafts");
 
 // src/draft-keep.ts
@@ -5723,7 +5735,7 @@ var import_react28 = require("react");
 var import_confirm_opener9 = require("@ai-matrx/kit/confirm-opener");
 var import_controls21 = require("@ai-matrx/design-system/controls");
 var import_design_system16 = require("@ai-matrx/design-system");
-var import_icons10 = require("@ai-matrx/design-system/icons");
+var import_icons11 = require("@ai-matrx/design-system/icons");
 
 // src/sharing/logic.ts
 var LEVEL_OPTIONS = [
@@ -6006,7 +6018,7 @@ function SharePanel({ item, port, organizations, onClose, onChanged }) {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(VaultSection, { title: "Who has access", children: [
           isOrg ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AccessLine, { glyph: BuildingGlyph, who: `${orgName} admins`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "px-2 text-sm text-muted-foreground", children: "Full access" }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AccessLine, { glyph: PersonGlyph, who: "You", meta: "Owner", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "px-2 text-sm text-muted-foreground", children: "Full access" }) }),
-          isOrg ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AccessLine, { glyph: import_icons10.UsersIcon, who: `${orgName} members`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          isOrg ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AccessLine, { glyph: import_icons11.UsersIcon, who: `${orgName} members`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             import_controls21.Select,
             {
               variant: "inline",
@@ -6370,27 +6382,27 @@ function ItemPane(props) {
   const recoveryExtra = extraFields.some(isRecoveryCodesField);
   const offerRecovery = isLogin || Boolean(item?.authenticator) || draft.authenticator.trim() !== "";
   const recoveryEditing = !recoveryDeclared && !recoveryExtra && (showRecovery || (draft.values[RECOVERY_CODES_KEY] ?? "") !== "");
-  const shownOwner = mode === "new" ? owner === "me" ? { label: "Personal", glyph: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PersonGlyph, {}) } : owner === "person" ? { label: "Someone else", glyph: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SendGlyph, {}) } : { label: organizations.find((o) => o.id === owner)?.name ?? "Organization", glyph: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BuildingGlyph, {}) } : item ? { label: item.owner.label, glyph: item.owner.kind === "me" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PersonGlyph, {}) : item.owner.kind === "organization" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BuildingGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons11.UsersIcon, {}) } : null;
+  const shownOwner = mode === "new" ? owner === "me" ? { label: "Personal", glyph: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PersonGlyph, {}) } : owner === "person" ? { label: "Someone else", glyph: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SendGlyph, {}) } : { label: organizations.find((o) => o.id === owner)?.name ?? "Organization", glyph: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BuildingGlyph, {}) } : item ? { label: item.owner.label, glyph: item.owner.kind === "me" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PersonGlyph, {}) : item.owner.kind === "organization" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BuildingGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons12.UsersIcon, {}) } : null;
   const sameNamed = (id) => {
     const name = organizations.find((o) => o.id === id)?.name.trim().toLowerCase();
     return Boolean(name) && organizations.filter((o) => o.name.trim().toLowerCase() === name).length > 1;
   };
   const tagsVisible = showTags || draft.tags.length > 0 || tagsText !== "";
   const descriptionVisible = showDescription || draft.description !== "";
-  const header = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("header", { className: "flex min-h-14 items-center gap-2 border-b border-border px-3 py-2 sm:gap-3 sm:px-5", children: [
+  const header = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "@container/vhead", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("header", { className: "flex min-h-14 items-center gap-2 border-b border-border px-3 py-2 @[30rem]/vhead:gap-3 @[30rem]/vhead:px-5", children: [
     onBack ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChevronLeftGlyph, {}), "aria-label": "Back", onClick: mode === "new" ? onCancelNew : onBack }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItemIcon, { definitionKey: definition?.key ?? item?.definitionKey ?? "custom", family: definition?.family ?? "generic", site: item ? loginSiteOf(item) : loginSiteOf({ loginUrls: draft.loginUrls }), size: "lg" }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "truncate text-base font-semibold leading-tight", children: editing ? draft.name || (mode === "new" ? `New ${typeLabel.toLowerCase()}` : item?.name) : item?.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "flex min-w-0 items-center gap-1 text-xs text-muted-foreground", children: [
-        typeLabel ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "truncate", children: typeLabel }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "line-clamp-2 break-words text-base font-semibold leading-tight", children: editing ? draft.name || (mode === "new" ? `New ${typeLabel.toLowerCase()}` : item?.name) : item?.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "flex min-w-0 flex-wrap items-center gap-x-1 text-xs text-muted-foreground", children: [
+        typeLabel ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "break-words", children: typeLabel }) : null,
         shownOwner ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Badge, { className: "shrink-0", icon: shownOwner.glyph, "aria-label": `Saved in ${shownOwner.label}`, title: item && mode !== "new" ? ownerDetail(item.owner) : void 0, children: shownOwner.label }) : null,
         item && mode !== "new" && item.owner.memberShared ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "shrink-0", "data-member-shared": "", children: "\xB7 A member\u2019s own" }) : null,
-        item && !editing ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SharingSummary, { item, port, className: "hidden truncate before:mr-1 before:content-['\xB7'] sm:inline" }, `${item.updatedAt}-${refreshKey ?? ""}`) : null
+        item && !editing ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SharingSummary, { item, port, className: "hidden truncate before:mr-1 before:content-['\xB7'] @[30rem]/vhead:inline" }, `${item.updatedAt}-${refreshKey ?? ""}`) : null
       ] })
     ] }),
     editing ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
-      dirty ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "hidden items-center gap-1.5 text-xs text-muted-foreground sm:flex", role: "status", children: [
+      dirty ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "hidden items-center gap-1.5 text-xs text-muted-foreground @[30rem]/vhead:flex", role: "status", children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "size-1.5 rounded-full bg-warning", "aria-hidden": true }),
         "Unsaved"
       ] }) : null,
@@ -6409,8 +6421,8 @@ function ItemPane(props) {
           children: "Fill"
         }
       ) : null,
-      favorite ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hidden sm:contents", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StarGlyph, { className: favorite.on ? "fill-current text-warning" : "size-4" }), "aria-label": favorite.on ? "Remove from favorites" : "Add to favorites", pressed: favorite.on, onClick: favorite.toggle }) }) : null,
-      canManage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hidden sm:contents", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ShareGlyph, {}), "aria-label": "Share", onClick: () => onPanel("share") }) }) : null,
+      favorite ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hidden @[30rem]/vhead:contents", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StarGlyph, { className: favorite.on ? "fill-current text-warning" : "size-4" }), "aria-label": favorite.on ? "Remove from favorites" : "Add to favorites", pressed: favorite.on, onClick: favorite.toggle }) }) : null,
+      canManage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hidden @[30rem]/vhead:contents", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ShareGlyph, {}), "aria-label": "Share", onClick: () => onPanel("share") }) }) : null,
       canEdit ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PencilGlyph, {}), collapse: "container", "aria-label": "Edit", onClick: () => onMode("edit"), children: "Edit" }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_design_system17.DropdownMenu, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_design_system17.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MoreGlyph, {}), "aria-label": "More actions" }) }),
@@ -6432,7 +6444,7 @@ function ItemPane(props) {
             "Send securely"
           ] }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_design_system17.DropdownMenuItem, { onSelect: () => onPanel("history"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons11.HistoryIcon, { className: "size-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons12.HistoryIcon, { className: "size-4" }),
             "Password history"
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_design_system17.DropdownMenuItem, { onSelect: () => onPanel("activity"), children: [
@@ -6440,7 +6452,7 @@ function ItemPane(props) {
             "Activity"
           ] }),
           canEdit ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_design_system17.DropdownMenuItem, { onSelect: () => onPanel("settings"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons11.SettingsIcon, { className: "size-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons12.SettingsIcon, { className: "size-4" }),
             "Settings"
           ] }) : null,
           canManage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
@@ -6464,7 +6476,7 @@ function ItemPane(props) {
         ] })
       ] })
     ] }) : null
-  ] });
+  ] }) });
   const filesProps = item ? { item, port, host, definition, organizations, arg: null, onClose: () => void 0, onChanged, onPanel } : null;
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RoomProvider, { value: room, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("article", { ref: paneRef, "aria-label": item?.name ?? "New item", className: (0, import_design_system18.cn)(import_controls22.CONTROLS_CONTAINER_CLASS, "flex h-full min-h-0 flex-col bg-background"), children: [
     header,
@@ -6520,7 +6532,7 @@ function ItemPane(props) {
                 actions: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
                   hidden && existing?.handling === "revealable" && item?.capabilities.canReveal ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EyeGlyph, {}), "aria-label": `Show current ${f.label}`, onClick: () => void loadForEdit(f.key) }) : null,
                   secretKind ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(GenerateButton, { onUse: (v) => setValue(f.key, v) }) : null,
-                  existing ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons11.SettingsIcon, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${existing.id}`) }) : null,
+                  existing ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons12.SettingsIcon, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${existing.id}`) }) : null,
                   newSecret ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SlidersGlyph, {}), "aria-label": `${f.label} settings`, pressed: open, onClick: () => toggleSettings(f.key) }) : null
                 ] })
               }
@@ -6541,7 +6553,7 @@ function ItemPane(props) {
             removeLabel: `Delete ${f.label}`,
             actions: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
               f.handling === "revealable" && !(f.key in loaded) && item?.capabilities.canReveal ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EyeGlyph, {}), "aria-label": `Show current ${f.label}`, onClick: () => void loadForEdit(f.key) }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons11.SettingsIcon, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${f.id}`) })
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_controls22.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons12.SettingsIcon, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${f.id}`) })
             ] })
           },
           f.id
@@ -6834,7 +6846,7 @@ function ListRow({ item, family, port, on, onSelect, withOwner, ownContextMenu,
   ];
   const entriesRef = (0, import_react30.useRef)(entries);
   entriesRef.current = entries;
-  const glyphOf = (e) => e.id === "copy:username" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UserGlyph, { className: "size-4" }) : e.id === "copy:password" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(KeyGlyph, { className: "size-4" }) : e.id === "copy:code" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ClockGlyph, { className: "size-4" }) : e.kind === "favorite" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StarGlyph, { className: (0, import_design_system20.cn)("size-4", favorite?.on && "fill-current text-warning") }) : e.kind === "open" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronRightGlyph, { className: "size-4" }) : e.kind === "host" || e.kind === "manage" ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons12.CopyIcon, { className: "size-4" });
+  const glyphOf = (e) => e.id === "copy:username" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UserGlyph, { className: "size-4" }) : e.id === "copy:password" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(KeyGlyph, { className: "size-4" }) : e.id === "copy:code" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ClockGlyph, { className: "size-4" }) : e.kind === "favorite" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StarGlyph, { className: (0, import_design_system20.cn)("size-4", favorite?.on && "fill-current text-warning") }) : e.kind === "open" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronRightGlyph, { className: "size-4" }) : e.kind === "host" || e.kind === "manage" ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons13.CopyIcon, { className: "size-4" });
   const menuItem = (e) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_design_system19.DropdownMenuItem, { disabled: e.disabled ?? false, onSelect: e.onSelect, children: [
     glyphOf(e),
     e.label
@@ -7162,7 +7174,7 @@ function TrashView({ port, deleted, query, header, onChanged }) {
 // src/NewItemFlow.tsx
 var import_react33 = require("react");
 var import_controls26 = require("@ai-matrx/design-system/controls");
-var import_icons13 = require("@ai-matrx/design-system/icons");
+var import_icons14 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function NewItemFlow({ definitions, url, onUrl, onChoose, onCancel }) {
   const [search, setSearch] = (0, import_react33.useState)("");
@@ -7197,7 +7209,7 @@ function NewItemFlow({ definitions, url, onUrl, onChoose, onCancel }) {
             "aria-label": "Website address",
             inputMode: "url",
             autoFocus: true,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons13.GlobeIcon, {})
+            icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons14.GlobeIcon, {})
           }
         ),
         guess && login ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-2 rounded-xl border border-border bg-card p-3", children: [
@@ -8127,7 +8139,7 @@ function Importer({ bridge, readLimits, activeOrganizationId, organizations, onC
 var import_react41 = require("react");
 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");
+var import_icons16 = require("@ai-matrx/design-system/icons");
 
 // src/extension/CaptureCard.tsx
 var import_react38 = require("react");
@@ -8270,7 +8282,7 @@ function FillSetupCard({ fillSetup }) {
 var import_react40 = require("react");
 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_icons15 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var HOLD_MS = 6e4;
 function PageGenerator({ fields }) {
@@ -8328,7 +8340,7 @@ 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,
+          value ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_controls32.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons15.CopyIcon, {}), "aria-label": "Copy password", onClick: () => void copy(value, "Password") }) : 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 })
@@ -8399,7 +8411,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_system23.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_icons16.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
@@ -8470,7 +8482,7 @@ function MatchRow({ itemId, item, tag, family, port, busy, running, onOpen, onFi
 var import_react42 = require("react");
 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_icons17 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var AUTHENTICATOR_LABEL = "Authenticator";
 function vaultChoices(items, organizations, _current) {
@@ -8490,7 +8502,7 @@ function vaultChoices(items, organizations, _current) {
 function VaultSelect({ value, choices, onChange, searchAt = ORGANIZATION_SEARCH_AT_UNREAD }) {
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_controls34.Select, { value, onValueChange: onChange, "aria-label": "Vault", searchAt, options: choices.map((c) => ({ value: c.value, label: c.label, meta: String(c.count), ...c.hint ? { hint: c.hint } : {} })) });
 }
-var CATEGORY_GLYPHS = { logins: import_icons16.GlobeIcon, passkeys: ShieldGlyph, api: KeyGlyph, oauth: PlugGlyph, infra: DatabaseGlyph, env: TerminalGlyph, files: FileGlyph, other: NoteGlyph };
+var CATEGORY_GLYPHS = { logins: import_icons17.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);
@@ -8588,7 +8600,7 @@ function VaultSidebar({ vault, choices, onVault, organizationSearchAt, view, all
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-2 pb-3 pt-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
-        hasPage ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: view === "page", glyph: import_icons16.GlobeIcon, label: "This page", onClick: () => onView("page") }) : null,
+        hasPage ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: view === "page", glyph: import_icons17.GlobeIcon, label: "This page", onClick: () => onView("page") }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: view === "all", glyph: GridGlyph, label: "All items", count: allCount, onClick: () => onView("all") }),
         hasFavorites ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: view === "favorites", glyph: StarGlyph, label: "Favorites", count: views.favorites, onClick: () => onView("favorites") }) : null,
         hasRecents ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Entry, { on: view === "recent", glyph: ClockGlyph, label: "Recently opened", count: views.recent, onClick: () => onView("recent") }) : null,