@ai-matrx/vault 0.1.9 → 0.1.10

package/dist/index.cjs

@@ -222,6 +222,7 @@ var import_design_system2 = require("@ai-matrx/design-system");
 var import_controls = require("@ai-matrx/design-system/controls");
 
 // src/glyphs.tsx
+var import_icons = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function glyph(paths, air = [1, 1]) {
   const style = { "--matrx-glyph-air-l": air[0], "--matrx-glyph-air-r": air[1] };
@@ -233,10 +234,6 @@ var KeyGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_ru
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7.5", cy: "15.5", r: "5.5" }),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m21 2-9.6 9.6M15.5 7.5l3 3" })
 ] }), [1, 2]);
-var GlobeGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
-] }), [1, 1]);
 var NoteGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4M16 13H8M16 17H8" })
@@ -266,10 +263,6 @@ var FileGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_r
 var CodeGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m16 18 6-6-6-6M8 6l-6 6 6 6" }) }), [1, 1]);
 var StarGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z" }), [1, 1]);
 var PlusGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 5v14M5 12h14" }), [4, 4]);
-var CopyGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-] }), [1, 1]);
 var EyeGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z" }),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "3" })
@@ -294,11 +287,6 @@ var BuildingGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_j
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2" }),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9 22v-4h6v4M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01" })
 ] }), [3, 3]);
-var UsersGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "9", cy: "7", r: "4" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8" })
-] }), [1, 1]);
 var ChevronLeftGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m15 18-6-6 6-6" }), [8, 8]);
 var GridGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
@@ -317,7 +305,7 @@ var FAMILY_GLYPHS = {
   cloud_infrastructure: ServerGlyph
 };
 function definitionGlyph(key, family) {
-  if (key === "username_password" || key === "website_login") return GlobeGlyph;
+  if (key === "username_password" || key === "website_login") return import_icons.GlobeIcon;
   return FAMILY_GLYPHS[family] ?? KeyGlyph;
 }
 var XGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }), [5, 5]);
@@ -335,15 +323,7 @@ var MoreGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_r
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "12", r: "1" })
 ] }), [3, 3]);
 var ShareGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13" }) }), [3, 3]);
-var HistoryGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 3v5h5M12 7v5l4 2" })
-] }), [2, 2]);
 var ListGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }), [2, 2]);
-var SettingsGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "3" })
-] }), [2, 2]);
 var ImportGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" }), [2, 2]);
 var ExportGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" }), [2, 2]);
 var ChevronDownGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 9 6 6 6-6" }), [5, 5]);
@@ -384,10 +364,6 @@ var RefreshGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_js
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 3v5h-5M3 21v-5h5" })
 ] }), [2, 2]);
 var SlidersGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6" }) }), [0, 0]);
-var DownloadGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m7 10 5 5 5-5M12 15V3" })
-] }), [2, 2]);
 var UploadGlyph = glyph(/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m17 8-5-5-5 5M12 3v12" })
@@ -469,7 +445,7 @@ var Ctx2 = (0, import_react2.createContext)((run) => run());
 function useConfirmed() {
   return (0, import_react2.useContext)(Ctx2);
 }
-var PROVIDER_LABEL = { google: "Google", github: "GitHub", azure: "Microsoft", apple: "Apple", linkedin_oidc: "LinkedIn", slack_oidc: "Slack" };
+var PROVIDER_LABEL = { google: "Google", github: "GitHub", azure: "Microsoft", apple: "Apple", linkedin_oidc: "LinkedIn", slack_oidc: "Slack", browser: "Browser", touch_id: "Touch ID" };
 var providerLabel = (p) => PROVIDER_LABEL[p] ?? p.charAt(0).toUpperCase() + p.slice(1);
 function IdentityGate({ identity, children }) {
   const [asking, setAsking] = (0, import_react2.useState)(false);
@@ -539,10 +515,21 @@ function ConfirmIdentityDialog({ open, identity, onDone, onCancel }) {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-3", children: [
       identity.dev ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls.Button, { variant: "primary", disabled: busy, onClick: () => void attempt(() => identity.dev?.() ?? Promise.resolve()), children: "Sign in again (dev)" }) : null,
-      account10?.providers.map((p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_controls.Button, { variant: identity.dev ? "outline" : "primary", disabled: busy, onClick: () => void attempt(() => identity.withProvider(p), false), children: [
-        "Continue with ",
-        providerLabel(p)
-      ] }, p)),
+      account10?.providers.map((p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        import_controls.Button,
+        {
+          variant: identity.dev ? "outline" : "primary",
+          disabled: busy,
+          onClick: () => void attempt(async () => {
+            if (await identity.withProvider(p) === "confirmed") onDone();
+          }, false),
+          children: [
+            "Continue with ",
+            providerLabel(p)
+          ]
+        },
+        p
+      )),
       account10?.hasPassword ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { className: "flex gap-2", onSubmit: (e) => {
         e.preventDefault();
         if (password) void attempt(() => identity.withPassword(password));
@@ -569,6 +556,7 @@ function ConfirmIdentityDialog({ open, identity, onDone, onCancel }) {
 var import_react5 = require("react");
 var import_controls2 = require("@ai-matrx/design-system/controls");
 var import_design_system5 = require("@ai-matrx/design-system");
+var import_icons2 = require("@ai-matrx/design-system/icons");
 
 // src/hooks.ts
 var import_react3 = require("react");
@@ -637,7 +625,7 @@ function useRoomOf(ref) {
   return room;
 }
 var RoomProvider = Room.Provider;
-function Section({ title, actions, children, className }) {
+function VaultSection({ title, actions, children, className }) {
   const flat = (0, import_react4.useContext)(InPanel);
   const desktop = (0, import_design_system4.useLook)() === "desktop";
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: (0, import_design_system4.cn)("flex flex-col gap-1.5", className), children: [
@@ -653,7 +641,7 @@ var ROW_GRID = {
   roomy: "grid-cols-[9rem_minmax(0,1fr)_auto] gap-x-3 px-4",
   viewport: "grid-cols-[5.75rem_minmax(0,1fr)_auto] gap-x-2 px-3 sm:grid-cols-[9rem_minmax(0,1fr)_auto] sm:gap-x-3 sm:px-4"
 };
-function Row({ label, hint, children, actions, top = false, className }) {
+function VaultRow({ label, hint, children, actions, top = false, className }) {
   const room = (0, import_react4.useContext)(Room);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_design_system4.cn)("grid min-h-11 py-1", ROW_GRID[room ?? "viewport"], top ? "items-start" : "items-center", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_design_system4.cn)("flex min-w-0 flex-col text-xs leading-tight text-muted-foreground", top && "pt-2.5"), children: [
@@ -674,11 +662,6 @@ function Panel({ title, open = true, onClose, children, footer, size = "lg" }) {
     footer ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.DialogFooter, { children: footer }) : null
   ] }) });
 }
-function formatBytes(n) {
-  if (n < 1024) return `${n} B`;
-  if (n < 1024 * 1024) return `${(n / 1024).toFixed(n < 10 * 1024 ? 1 : 0)} KB`;
-  return `${(n / 1024 / 1024).toFixed(1)} MB`;
-}
 var DAY_FORMAT = { year: "numeric", month: "short", day: "numeric" };
 
 // src/FieldRows.tsx
@@ -737,14 +720,14 @@ function SecretRow({ port, item, field, extra }) {
   const multiline = field.kind === "multiline";
   const shown = visible ? plain : secret.value;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    Row,
+    VaultRow,
     {
       label: field.label,
       top: multiline && shown !== null,
       actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
         extra,
         canSee && !visible ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls2.Button, { variant: "quiet", icon: secret.value !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EyeOffGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EyeGlyph, {}), "aria-label": secret.value !== null ? `Hide ${field.label}` : `Show ${field.label}`, disabled: busy, onClick: () => void toggle2() }) : null,
-        canSee ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls2.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CopyGlyph, {}), "aria-label": `Copy ${field.label}`, disabled: busy, onClick: () => void copy() }) : null
+        canSee ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls2.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons2.CopyIcon, {}), "aria-label": `Copy ${field.label}`, disabled: busy, onClick: () => void copy() }) : null
       ] }),
       children: sealed ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls2.Badge, { icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LockGlyph, {}), children: "Sealed" }) : off ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-muted-foreground", children: "Turned off" }) : error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate text-destructive", title: error, children: error }) : shown !== null ? visible ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: (0, import_design_system5.cn)("block", multiline ? "whitespace-pre-wrap break-words" : "truncate"), children: shown || "\u2014" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SecretText, { value: shown, multiline }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: (0, import_design_system5.cn)("block truncate text-muted-foreground", !visible && "tracking-widest"), children: visible ? "\u2026" : MASK })
     }
@@ -754,7 +737,7 @@ function PlainRow({ label, value, hint, openUrl, extra, multiline = false }) {
   const copyValue2 = useCopy();
   const isUrl = /^https?:\/\//i.test(value);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    Row,
+    VaultRow,
     {
       label,
       hint,
@@ -762,7 +745,7 @@ function PlainRow({ label, value, hint, openUrl, extra, multiline = false }) {
       actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
         extra,
         isUrl && openUrl ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls2.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExternalGlyph, {}), "aria-label": `Open ${value}`, onClick: () => openUrl(value) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls2.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CopyGlyph, {}), "aria-label": `Copy ${typeof label === "string" ? label : "value"}`, onClick: () => void copyValue2(value, typeof label === "string" && label ? label : "Value", { secret: false }) })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls2.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons2.CopyIcon, {}), "aria-label": `Copy ${typeof label === "string" ? label : "value"}`, onClick: () => void copyValue2(value, typeof label === "string" && label ? label : "Value", { secret: false }) })
       ] }),
       children: isUrl && openUrl ? (
         // A real link (right-click, copy link address, open in a new tab); a click goes through the host's opener.
@@ -785,12 +768,12 @@ function PlainRow({ label, value, hint, openUrl, extra, multiline = false }) {
   );
 }
 function AddRow({ label, onAdd, children = "Add" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { 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)("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" }) });
 }
 function EditRow({ label, hint, value, onChange, placeholder, secret = false, multiline = false, onRemove, removeLabel, actions, autoFocus, onBlur, inputMode }) {
   const [shown, setShown] = (0, import_react5.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    Row,
+    VaultRow,
     {
       label,
       hint,
@@ -807,7 +790,7 @@ function EditRow({ label, hint, value, onChange, placeholder, secret = false, mu
 function CustomEditRow({ label, value, onLabel, onValue, secret, onRemove }) {
   const [shown, setShown] = (0, import_react5.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    Row,
+    VaultRow,
     {
       label: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_controls2.Field, { className: "w-full", value: label, onChange: (e) => onLabel(e.target.value), placeholder: "Name", "aria-label": "Field name" }),
       actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
@@ -820,6 +803,7 @@ function CustomEditRow({ label, value, onLabel, onValue, secret, onRemove }) {
 }
 
 // src/activity/HistoryPanel.tsx
+var import_icons3 = require("@ai-matrx/design-system/icons");
 var import_format3 = require("@ai-matrx/kit/format");
 
 // src/activity/logic.ts
@@ -1312,7 +1296,7 @@ function ActivityPanel({ item, port, onClose }) {
       footer: hasMore ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_controls3.Button, { variant: "outline", disabled: loading, onClick: () => setLimit((n) => Math.min(MAX, n * 2)), children: loading ? "Loading\u2026" : "Show more" }) : void 0,
       children: [
         error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { role: "alert", className: "px-1 text-sm text-destructive", children: error }) : null,
-        entries === null ? loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Empty, { children: "Reading activity\u2026" }) : null : entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Empty, { children: "Nothing has happened yet." }) : groupByDay(entries, now).map((day) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Section, { title: day.label, children: collapseRuns(
+        entries === null ? loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Empty, { children: "Reading activity\u2026" }) : null : entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Empty, { children: "Nothing has happened yet." }) : groupByDay(entries, now).map((day) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VaultSection, { title: day.label, children: collapseRuns(
           day.entries.map((entry) => ({ entry, s: auditSentence(entry, item, me) })),
           (r) => `${r.s.what}|${r.s.who ?? ""}`
         ).map(({ row: { entry, s }, times }) => {
@@ -1335,7 +1319,7 @@ function ActivityPanel({ item, port, onClose }) {
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var MASK2 = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
 var messageOf = (e, fallback) => wasCancelled(e) ? null : e instanceof Error ? e.message : fallback;
-function HistoryPanel({ item, port, arg, onClose, onChanged }) {
+function ItemHistoryPanel({ item, port, arg, onClose, onChanged }) {
   const eligible = historyEligible(item);
   const [page, setPage] = (0, import_react7.useState)(null);
   const [loading, setLoading] = (0, import_react7.useState)(eligible);
@@ -1397,7 +1381,7 @@ function HistoryPanel({ item, port, arg, onClose, onChanged }) {
         error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { role: "alert", className: "px-1 text-sm text-destructive", children: error }) : null,
         notice ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { role: "status", className: "px-1 text-sm text-success", children: notice }) : null,
         page && groups.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Empty, { children: "No earlier values yet." }) : null,
-        page ? groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Section, { title: g.label, children: g.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HistoryRow, { item, port, page, entry, label: g.label, onRestored: restored, onConflict: conflicted, onError: setError }, `${item.id}:${entry.fieldId}:${entry.revision}`)) }, g.fieldId)) : null,
+        page ? groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VaultSection, { title: g.label, children: g.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HistoryRow, { item, port, page, entry, label: g.label, onRestored: restored, onConflict: conflicted, onError: setError }, `${item.id}:${entry.fieldId}:${entry.revision}`)) }, g.fieldId)) : null,
         page && (page.captureStartedAt || page.incomplete) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap gap-x-3 gap-y-1 px-1 text-xs", children: [
           page.captureStartedAt ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-muted-foreground", children: [
             "Kept since ",
@@ -1458,12 +1442,12 @@ function HistoryRow({ item, port, page, entry, label, onRestored, onConflict, on
     }
   }
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    Row,
+    VaultRow,
     {
       label: when,
       actions: entry.available ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_controls4.Button, { variant: "quiet", icon: secret.value !== null ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EyeOffGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EyeGlyph, {}), "aria-label": secret.value !== null ? "Hide" : "Show", disabled: busy, onClick: () => void toggle2() }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_controls4.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopyGlyph, {}), "aria-label": "Copy", disabled: busy, onClick: () => void copy() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_controls4.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons3.CopyIcon, {}), "aria-label": "Copy", disabled: busy, onClick: () => void copy() }),
         canRestore(page, entry) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_controls4.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RestoreGlyph, {}), "aria-label": "Restore", disabled: busy, onClick: () => void restore() }) : null
       ] }) : null,
       children: !entry.available ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_controls4.Badge, { children: "Not kept" }) : secret.value !== null ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SecretText, { value: secret.value, multiline: false }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "block truncate tracking-widest text-muted-foreground", children: MASK2 })
@@ -1475,6 +1459,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_system9 = require("@ai-matrx/design-system");
+var import_icons5 = require("@ai-matrx/design-system/icons");
 
 // src/authenticator/AddOtpPanel.tsx
 var import_react12 = require("react");
@@ -1484,8 +1469,11 @@ var import_controls8 = require("@ai-matrx/design-system/controls");
 var import_react8 = require("react");
 var import_controls5 = require("@ai-matrx/design-system/controls");
 var import_design_system7 = require("@ai-matrx/design-system");
+var import_icons4 = require("@ai-matrx/design-system/icons");
+var import_format5 = require("@ai-matrx/kit/format");
 
 // src/authenticator/otpauth.ts
+var import_format4 = require("@ai-matrx/kit/format");
 var TOTP_DEFAULT_DIGITS = 6;
 var TOTP_DEFAULT_PERIOD = 30;
 var TOTP_DEFAULT_ALGORITHM = "SHA1";
@@ -1553,14 +1541,8 @@ function describeEnrollment(parsed) {
   const parts = [parsed.issuer, parsed.account].filter((p) => Boolean(p));
   return parts.length ? parts.join(" \xB7 ") : "Setup key";
 }
-function groupCode(code) {
-  const c = code.replace(/\s/g, "");
-  if (c.length < 6) return c;
-  const head = Math.ceil(c.length / 2);
-  return `${c.slice(0, head)} ${c.slice(head)}`;
-}
 function maskedCode(digits = TOTP_DEFAULT_DIGITS) {
-  return groupCode("\u2022".repeat(Math.max(6, digits)));
+  return (0, import_format4.groupCode)("\u2022".repeat(Math.max(6, digits)));
 }
 function accountOfLabel(label, issuer) {
   const l = label?.trim();
@@ -1636,7 +1618,7 @@ function useCopied() {
 }
 function CodeButton({ live, digits, size = "md", label }) {
   const { copied, copy } = useCopied();
-  const shown = live.code ? groupCode(live.code) : maskedCode(digits);
+  const shown = live.code ? (0, import_format5.groupCode)(live.code) : maskedCode(digits);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "button",
     {
@@ -1655,7 +1637,7 @@ function CodeButton({ live, digits, size = "md", label }) {
 }
 function CopyCodeButton({ live, label }) {
   const { copied, copy } = useCopied();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_controls5.Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyGlyph, {}), ...copied ? { glyphTone: "success" } : {}, "aria-label": `Copy ${label} code`, disabled: !live.code, onClick: () => live.code && void copy(live.code) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_controls5.Button, { variant: "quiet", icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons4.CopyIcon, {}), ...copied ? { glyphTone: "success" } : {}, "aria-label": `Copy ${label} code`, disabled: !live.code, onClick: () => live.code && void copy(live.code) });
 }
 
 // src/authenticator/live-code.ts
@@ -1927,7 +1909,7 @@ function OtpSetupRow({ value, onChange, label = "One-time password", placeholder
       className: dragging ? "rounded-lg bg-accent" : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-          Row,
+          VaultRow,
           {
             label,
             actions: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
@@ -2077,7 +2059,7 @@ function TotpRow({ port, item, onChanged }) {
     ] })
   ] }) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    Row,
+    VaultRow,
     {
       label: "One-time password",
       actions: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
@@ -2136,7 +2118,7 @@ function TwoFactorMethodRow({ port, item, onChanged }) {
   const [busy, setBusy] = (0, import_react11.useState)(false);
   const [error, setError] = (0, import_react11.useState)(null);
   const canEdit = item.capabilities.canEdit || item.capabilities.canManage;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Row, { label: "Two-factor", hint: error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-destructive", children: error }) : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(VaultRow, { label: "Two-factor", hint: error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-destructive", children: error }) : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_controls7.Select,
     {
       value: value ?? "none",
@@ -2251,7 +2233,7 @@ function AddOtpPanel({ port, items, definitions, itemId = null, onClose, onChang
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_controls8.Button, { variant: "primary", disabled: !ready, onClick: () => void save(), children: busy ? "Adding\u2026" : "Add" })
       ] }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Section, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(VaultSection, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             OtpSetupRow,
             {
@@ -2273,7 +2255,7 @@ function AddOtpPanel({ port, items, definitions, itemId = null, onClose, onChang
               status: image ? `QR image ready \xB7 ${image.name}` : null
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Row, { label: "Add to", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VaultRow, { label: "Add to", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             import_controls8.Select,
             {
               value: target,
@@ -2287,7 +2269,7 @@ function AddOtpPanel({ port, items, definitions, itemId = null, onClose, onChang
             }
           ) }),
           isNew ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Row, { label: "Name", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VaultRow, { label: "Name", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               import_controls8.Field,
               {
                 className: "w-full",
@@ -2301,7 +2283,7 @@ function AddOtpPanel({ port, items, definitions, itemId = null, onClose, onChang
                 "aria-label": "Name"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Row, { label: "Website", hint: websiteBad ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-destructive", children: "Not a web address" }) : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_controls8.Field, { className: "w-full", type: "url", value: website, disabled: busy || created !== null, onChange: (e) => setWebsite(e.target.value), placeholder: "example.com", "aria-label": "Website", "aria-invalid": websiteBad || void 0 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VaultRow, { label: "Website", hint: websiteBad ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-destructive", children: "Not a web address" }) : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_controls8.Field, { className: "w-full", type: "url", value: website, disabled: busy || created !== null, onChange: (e) => setWebsite(e.target.value), placeholder: "example.com", "aria-label": "Website", "aria-invalid": websiteBad || void 0 }) })
           ] }) : null
         ] }),
         error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "px-1 text-sm text-destructive", role: "alert", children: error }) : null
@@ -2369,7 +2351,7 @@ function AuthenticatorView({ port, items, definitions, query, onOpen, onChanged,
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ShieldGlyph, { className: "size-6" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-medium text-foreground", children: "No one-time passwords yet" }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_controls9.Button, { variant: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlusGlyph, {}), onClick: () => setAdding(true), children: "Add one-time password" })
-    ] }) : groups.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "px-4 py-10 text-center text-sm text-muted-foreground", children: "Nothing matches." }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-6 pt-1 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-5", children: groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Section, { ...groups.length > 1 ? { title: g.label } : {}, className: "[&>div]:px-1", children: g.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    ] }) : groups.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "px-4 py-10 text-center text-sm text-muted-foreground", children: "Nothing matches." }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-6 pt-1 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-5", children: groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(VaultSection, { ...groups.length > 1 ? { title: g.label } : {}, className: "[&>div]:px-1", children: g.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       OtpListRow,
       {
         port,
@@ -2463,7 +2445,7 @@ function OtpListRow({ port, item, family, entry, onOpen, onRename, onChanged, on
           "Open login"
         ] }),
         live.code ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_design_system9.DropdownMenuItem, { onSelect: () => live.code && void copy(live.code), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CopyGlyph, { className: "size-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons5.CopyIcon, { className: "size-4" }),
           "Copy code"
         ] }) : null,
         canManage ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
@@ -2490,6 +2472,7 @@ function OtpListRow({ port, item, family, entry, onOpen, onRename, onChanged, on
 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");
 
 // src/fields/rules.ts
 var ENV_KEY_RE = /^[A-Za-z_][A-Za-z0-9_]*$/;
@@ -2639,7 +2622,7 @@ function FieldSettings({ item, port, field, onClose, onChanged }) {
   const locked = !canEdit || busy !== null;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Panel, { title: `${field.label} settings`, size: "md", onClose, footer: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Button, { variant: "primary", onClick: onClose, children: "Done" }), children: [
     !canEdit ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "px-1 text-sm text-muted-foreground", children: "View only: you can\u2019t change these settings." }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Section, { title: "Who can see it", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Row, { label: "Value", hint: quietHint(handling.hint), children: field.handling === "sealed" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Badge, { icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LockGlyph, {}), children: "Sealed for good" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VaultSection, { title: "Who can see it", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VaultRow, { label: "Value", hint: quietHint(handling.hint), children: field.handling === "sealed" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Badge, { icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LockGlyph, {}), children: "Sealed for good" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       import_controls10.SegmentedControl,
       {
         "aria-label": "Who can see it",
@@ -2648,8 +2631,8 @@ function FieldSettings({ item, port, field, onClose, onChanged }) {
         data: handlingChoices(field.handling).map((h) => ({ value: h, label: HANDLING_WORDS[h].label, title: HANDLING_WORDS[h].hint, disabled: locked }))
       }
     ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Section, { title: "Automation", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Row, { label: "Env key", hint: envProblem ? quietHint(envProblem, "destructive") : quietHint("The name sandboxes and workflows use"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(VaultSection, { title: "Automation", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VaultRow, { label: "Env key", hint: envProblem ? quietHint(envProblem, "destructive") : quietHint("The name sandboxes and workflows use"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         import_controls10.Field,
         {
           ref: envRef,
@@ -2669,10 +2652,10 @@ function FieldSettings({ item, port, field, onClose, onChanged }) {
           }
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Row, { label: "Use in sandbox", hint: blocker && !field.injectIntoSandbox ? quietHint(blocker) : quietHint("Sandboxes get it as an env variable"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Switch, { "aria-label": "Use in sandbox", checked: field.injectIntoSandbox, disabled: locked, onCheckedChange: (v) => void setSandbox(v) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VaultRow, { label: "Use in sandbox", hint: blocker && !field.injectIntoSandbox ? quietHint(blocker) : quietHint("Sandboxes get it as an env variable"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Switch, { "aria-label": "Use in sandbox", checked: field.injectIntoSandbox, disabled: locked, onCheckedChange: (v) => void setSandbox(v) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Section, { title: "Field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Row, { label: "Description", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(VaultSection, { title: "Field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VaultRow, { label: "Description", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         import_controls10.Field,
         {
           className: "w-full",
@@ -2688,8 +2671,8 @@ function FieldSettings({ item, port, field, onClose, onChanged }) {
           }
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Row, { label: "Editable", hint: quietHint(field.editable ? "The value can be changed" : "The value is locked"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Switch, { "aria-label": "Editable", checked: field.editable, disabled: locked, onCheckedChange: (v) => void update("editable", { editable: v }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Row, { label: "Active", hint: quietHint(field.active ? "In use" : "Kept, but nothing uses it"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Switch, { "aria-label": "Active", checked: field.active, disabled: locked, onCheckedChange: (v) => void update("active", { active: v }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VaultRow, { label: "Editable", hint: quietHint(field.editable ? "The value can be changed" : "The value is locked"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Switch, { "aria-label": "Editable", checked: field.editable, disabled: locked, onCheckedChange: (v) => void update("editable", { editable: v }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VaultRow, { label: "Active", hint: quietHint(field.active ? "In use" : "Kept, but nothing uses it"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Switch, { "aria-label": "Active", checked: field.active, disabled: locked, onCheckedChange: (v) => void update("active", { active: v }) }) })
     ] }),
     error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Problem, { children: error }) : null
   ] });
@@ -2720,8 +2703,8 @@ function ItemSettingsPanel({ item, port, onClose, onChanged, onPanel }) {
   const fillHint = !hasWebsite ? "Add a website first" : item.browserFillEnabled ? "Offered on matching pages" : "Never filled automatically";
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Panel, { title: "Item settings", size: "md", onClose, footer: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Button, { variant: "primary", onClick: onClose, children: "Done" }), children: [
     !canEdit ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "px-1 text-sm text-muted-foreground", children: "View only: you can\u2019t change these settings." }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Section, { title: "In the browser", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Row, { label: "Website matching", hint: quietHint(MATCH_WORDS[item.uriMatchMode].hint), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(VaultSection, { title: "In the browser", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VaultRow, { label: "Website matching", hint: quietHint(MATCH_WORDS[item.uriMatchMode].hint), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         import_controls10.Select,
         {
           "aria-label": "Website matching",
@@ -2731,13 +2714,13 @@ function ItemSettingsPanel({ item, port, onClose, onChanged, onPanel }) {
           onValueChange: (m) => void save("match", () => port.fields.updateItem(item, { uriMatchMode: m }))
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Row, { label: "Fill in browser", hint: quietHint(fillHint), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Switch, { "aria-label": "Fill in browser", checked: hasWebsite && item.browserFillEnabled, disabled: locked || !hasWebsite, onCheckedChange: (v) => void save("fill", () => port.fields.updateItem(item, { browserFillEnabled: v })) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VaultRow, { label: "Fill in browser", hint: quietHint(fillHint), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Switch, { "aria-label": "Fill in browser", checked: hasWebsite && item.browserFillEnabled, disabled: locked || !hasWebsite, onCheckedChange: (v) => void save("fill", () => port.fields.updateItem(item, { browserFillEnabled: v })) }) }),
       promotable.map((f) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        Row,
+        VaultRow,
         {
           label: f.label,
           hint: quietHint("Encrypted, so the browser can\u2019t match it"),
-          actions: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GlobeGlyph, {}), disabled: locked, onClick: () => void promote(f), children: "Use as website" }),
+          actions: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons6.GlobeIcon, {}), disabled: locked, onClick: () => void promote(f), children: "Use as website" }),
           children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-muted-foreground", children: "Not a website yet" })
         },
         f.id
@@ -2745,8 +2728,8 @@ function ItemSettingsPanel({ item, port, onClose, onChanged, onPanel }) {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.DisclosureHeader, { open: advanced, title: "Advanced", meta: item.fields.length ? `${item.fields.length} fields` : void 0, onClick: () => setAdvanced((a) => !a) }),
-      advanced ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Section, { children: item.fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Empty, { children: "No encrypted fields." }) : item.fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        Row,
+      advanced ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VaultSection, { children: item.fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Empty, { children: "No encrypted fields." }) : item.fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        VaultRow,
         {
           label: f.label,
           actions: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_controls10.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SlidersGlyph, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${f.id}`) }),
@@ -2771,6 +2754,7 @@ function ItemSettingsPanel({ item, port, onClose, onChanged, onPanel }) {
 var import_react15 = require("react");
 var import_design_system10 = require("@ai-matrx/design-system");
 var import_controls11 = require("@ai-matrx/design-system/controls");
+var import_icons7 = require("@ai-matrx/design-system/icons");
 
 // src/generator/generate.ts
 var import_credential_generator = require("@ai-matrx/kit/credential-generator");
@@ -2925,7 +2909,7 @@ function PasswordGenerator({ limits: source, onUse, useLabel = "Use" }) {
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-h-7 items-start gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("code", { className: (0, import_design_system10.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_runtime14.jsx)(import_controls11.Button, { variant: "quiet", icon: revealed ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EyeOffGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EyeGlyph, {}), "aria-label": revealed ? "Hide" : "Reveal", disabled: !candidate, onClick: () => setRevealed((r) => !r) }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_controls11.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CopyGlyph, {}), "aria-label": "Copy", disabled: !candidate, onClick: () => void copy() }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_controls11.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons7.CopyIcon, {}), "aria-label": "Copy", disabled: !candidate, onClick: () => void copy() }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_controls11.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RefreshGlyph, {}), "aria-label": "Generate another", onClick: () => change(settings) })
       ] }),
       strength && candidate ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-xs", children: [
@@ -3052,6 +3036,7 @@ function useLocked(lock) {
 }
 
 // src/io/BackupPanel.tsx
+var import_format6 = require("@ai-matrx/kit/format");
 var import_react18 = require("react");
 var import_controls13 = require("@ai-matrx/design-system/controls");
 var import_download = require("@ai-matrx/kit/download");
@@ -3193,17 +3178,17 @@ function omissionText(o) {
   return `${o.count ?? "Some"} ${what}: ${o.reason.replaceAll("_", " ")}`;
 }
 function Summary({ value }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Section, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Row, { label: "Credentials", children: value.record_count }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Row, { label: "Protected fields", children: value.field_count }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Row, { label: "Files", children: value.attachment_count > 0 ? `${value.attachment_count} \xB7 ${formatBytes(value.attachment_bytes)}` : "0" })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(VaultSection, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VaultRow, { label: "Credentials", children: value.record_count }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VaultRow, { label: "Protected fields", children: value.field_count }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VaultRow, { label: "Files", children: value.attachment_count > 0 ? `${value.attachment_count} \xB7 ${(0, import_format6.formatFileSize)(value.attachment_bytes)}` : "0" })
   ] });
 }
 function Omissions({ omissions, accepted, onAccepted, verb }) {
   if (omissions.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Section, { title: "Left out", children: [
-    omissions.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Row, { label: o.component.replaceAll("_", " "), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "block truncate text-muted-foreground", title: omissionText(o), children: omissionText(o) }) }, `${o.component}-${o.source_item_id ?? i}`)),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Row, { label: "Accept", hint: `${verb} without these`, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_controls13.Switch, { checked: accepted, onCheckedChange: onAccepted, "aria-label": `${verb} without these` }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(VaultSection, { title: "Left out", children: [
+    omissions.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VaultRow, { label: o.component.replaceAll("_", " "), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "block truncate text-muted-foreground", title: omissionText(o), children: omissionText(o) }) }, `${o.component}-${o.source_item_id ?? i}`)),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VaultRow, { label: "Accept", hint: `${verb} without these`, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_controls13.Switch, { checked: accepted, onCheckedChange: onAccepted, "aria-label": `${verb} without these` }) })
   ] });
 }
 function BackupPanel({ port, items, onClose, onChanged }) {
@@ -3338,7 +3323,7 @@ function BackupPanel({ port, items, onClose, onChanged }) {
     ),
     mode === "backup" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        Section,
+        VaultSection,
         {
           title: `${selected.size} of ${plural(items.length, "credential")}`,
           actions: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
@@ -3357,13 +3342,13 @@ function BackupPanel({ port, items, onClose, onChanged }) {
       backup ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Summary, { value: backup }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Omissions, { omissions: backup.omissions, accepted, onAccepted: setAccepted, verb: "Back up" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Section, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Row, { label: "Passphrase", hint: "Not saved. It can't be recovered.", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_controls13.Field, { type: "password", value: passphrase, autoComplete: "new-password", "aria-label": "Backup passphrase", onChange: (e) => setPassphrase(e.target.value) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Row, { label: "Repeat", ...mismatch ? { hint: "Doesn't match" } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_controls13.Field, { type: "password", value: repeat, autoComplete: "new-password", "aria-label": "Repeat the passphrase", onChange: (e) => setRepeat(e.target.value) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(VaultSection, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VaultRow, { label: "Passphrase", hint: "Not saved. It can't be recovered.", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_controls13.Field, { type: "password", value: passphrase, autoComplete: "new-password", "aria-label": "Backup passphrase", onChange: (e) => setPassphrase(e.target.value) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VaultRow, { label: "Repeat", ...mismatch ? { hint: "Doesn't match" } : {}, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_controls13.Field, { type: "password", value: repeat, autoComplete: "new-password", "aria-label": "Repeat the passphrase", onChange: (e) => setRepeat(e.target.value) }) })
         ] })
       ] }) : null
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: !restorePreview ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Section, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Row, { label: "File", ...file ? { hint: file.name } : {}, children: [
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: !restorePreview ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(VaultSection, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(VaultRow, { label: "File", ...file ? { hint: file.name } : {}, children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_controls13.Button, { variant: "outline", disabled: busy, onClick: () => fileInput.current?.click(), children: "Choose a backup" }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "input",
@@ -3379,11 +3364,11 @@ function BackupPanel({ port, items, onClose, onChanged }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Row, { label: "Passphrase", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_controls13.Field, { type: "password", value: passphrase, autoComplete: "current-password", "aria-label": "Backup passphrase", onChange: (e) => setPassphrase(e.target.value) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VaultRow, { label: "Passphrase", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_controls13.Field, { type: "password", value: passphrase, autoComplete: "current-password", "aria-label": "Backup passphrase", onChange: (e) => setPassphrase(e.target.value) }) })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Summary, { value: restorePreview }),
       !result ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Omissions, { omissions: restorePreview.omissions, accepted, onAccepted: setAccepted, verb: "Restore" }) : null,
-      !result ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "px-1 text-xs text-muted-foreground", children: "Restored items start disabled and restricted." }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Section, { title: `${result.created} restored \xB7 ${result.replayed} already \xB7 ${result.refused} refused \xB7 ${result.retryable_failure} to retry`, children: result.results.map((r) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Row, { label: names.get(r.source_item_id) ?? "Credential", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: r.status === "refused" || r.status === "retryable_failure" ? "text-destructive" : "text-foreground", children: [
+      !result ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "px-1 text-xs text-muted-foreground", children: "Restored items start disabled and restricted." }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VaultSection, { title: `${result.created} restored \xB7 ${result.replayed} already \xB7 ${result.refused} refused \xB7 ${result.retryable_failure} to retry`, children: result.results.map((r) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(VaultRow, { label: names.get(r.source_item_id) ?? "Credential", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: r.status === "refused" || r.status === "retryable_failure" ? "text-destructive" : "text-foreground", children: [
         RECORD_STATUS[r.status],
         r.reason === "alias_conflict" ? " \xB7 name in use" : ""
       ] }) }, r.source_item_id)) })
@@ -3488,7 +3473,7 @@ function ExportPanel({ port, items, onClose }) {
         ] })
       ] }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Section, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Row, { label: "Format", hint: format?.hint, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(VaultSection, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(VaultRow, { label: "Format", hint: format?.hint, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           import_controls14.Select,
           {
             value: profile,
@@ -3501,7 +3486,7 @@ function ExportPanel({ port, items, onClose }) {
           }
         ) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          Section,
+          VaultSection,
           {
             title: `${selected.size} of ${plural(logins.length, "login")}`,
             actions: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
@@ -4572,13 +4557,13 @@ function ImportPanel({ port, host, items, organizations, onClose, onChanged, lim
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Button, { variant: "primary", onClick: onClose, children: "Done" })
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Panel, { title: "Import", size: "xl", onClose, footer, children: [
-    stage === "choose" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Section, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Row, { label: "Source", actions: help && host.openUrl ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Button, { variant: "quiet", onClick: () => host.openUrl?.(help), children: "How to export" }) : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Select, { value: source, options: SOURCE_OPTIONS, "aria-label": "Source", onValueChange: (s) => {
+    stage === "choose" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(VaultSection, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultRow, { label: "Source", actions: help && host.openUrl ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Button, { variant: "quiet", onClick: () => host.openUrl?.(help), children: "How to export" }) : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Select, { value: source, options: SOURCE_OPTIONS, "aria-label": "Source", onValueChange: (s) => {
         setSource(s);
         setError(null);
       } }) }),
-      source === "env" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Row, { label: ".env text", hint: "Same key updates in place", top: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Textarea, { mono: true, rows: 7, value: envText, autoComplete: "off", spellCheck: false, "aria-label": ".env text", placeholder: "OPENAI_API_KEY=sk-...\nDATABASE_URL=postgres://...", onChange: (e) => setEnvText(e.target.value) }) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Row, { label: "File", hint: fileName ?? void 0, children: [
+      source === "env" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultRow, { label: ".env text", hint: "Same key updates in place", top: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Textarea, { mono: true, rows: 7, value: envText, autoComplete: "off", spellCheck: false, "aria-label": ".env text", placeholder: "OPENAI_API_KEY=sk-...\nDATABASE_URL=postgres://...", onChange: (e) => setEnvText(e.target.value) }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(VaultRow, { label: "File", hint: fileName ?? void 0, children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Button, { variant: "outline", disabled: reading, onClick: () => fileInput.current?.click(), children: reading ? "Reading\u2026" : source === "env" ? "Load a file" : "Choose a file" }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "input",
@@ -4595,12 +4580,12 @@ function ImportPanel({ port, host, items, organizations, onClose, onChanged, lim
           }
         )
       ] }),
-      source === "env" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Row, { label: "Sandboxes", hint: "Pass these values to agent sandboxes", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Switch, { checked: injectSandbox, onCheckedChange: setInjectSandbox, "aria-label": "Use in sandboxes" }) }) : null
+      source === "env" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultRow, { label: "Sandboxes", hint: "Pass these values to agent sandboxes", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Switch, { checked: injectSandbox, onCheckedChange: setInjectSandbox, "aria-label": "Use in sandboxes" }) }) : null
     ] }) : null,
     stage === "review" && draft ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-      organizations.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Section, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Row, { label: "Save to", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Select, { value: destination, options: destinationOptions, "aria-label": "Save to", onValueChange: (v) => draft.kind === "file" ? restart({ destination: v }) : setDestination(v) }) }) }) : null,
+      organizations.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultSection, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultRow, { label: "Save to", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Select, { value: destination, options: destinationOptions, "aria-label": "Save to", onValueChange: (v) => draft.kind === "file" ? restart({ destination: v }) : setDestination(v) }) }) }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        Section,
+        VaultSection,
         {
           title: draft.kind === "env" ? plural(envKeys.length, "value") : summary(counts, lines.length),
           actions: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
@@ -4628,11 +4613,11 @@ function ImportPanel({ port, host, items, organizations, onClose, onChanged, lim
           )
         }
       ),
-      draft.kind === "file" && draft.parsed.kind === "structured" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Section, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Row, { label: "Visible details", hint: "Approve saving websites and public keys in the clear", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Switch, { checked: approvedVisible, disabled: busy, onCheckedChange: setApprovedVisible, "aria-label": "Approve visible details" }) }) }) : null,
+      draft.kind === "file" && draft.parsed.kind === "structured" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultSection, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultRow, { label: "Visible details", hint: "Approve saving websites and public keys in the clear", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Switch, { checked: approvedVisible, disabled: busy, onCheckedChange: setApprovedVisible, "aria-label": "Approve visible details" }) }) }) : null,
       draft.kind === "file" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Notices, { draft }) : null,
-      draft.kind === "file" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(More, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Section, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Row, { label: "Browser fill", hint: "Needs username, password and an https address", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Switch, { checked: browserFill, disabled: busy, onCheckedChange: (on) => restart({ browserFill: on }), "aria-label": "Browser fill" }) }),
-        draft.parsed.kind === "csv" ? draft.parsed.preview.headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Row, { label: header || `Column ${index + 1}`, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      draft.kind === "file" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(More, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(VaultSection, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultRow, { label: "Browser fill", hint: "Needs username, password and an https address", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_controls15.Switch, { checked: browserFill, disabled: busy, onCheckedChange: (on) => restart({ browserFill: on }), "aria-label": "Browser fill" }) }),
+        draft.parsed.kind === "csv" ? draft.parsed.preview.headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultRow, { label: header || `Column ${index + 1}`, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           import_controls15.Select,
           {
             value: draft.mapping[index] ?? "keep",
@@ -4644,16 +4629,16 @@ function ImportPanel({ port, host, items, organizations, onClose, onChanged, lim
       ] }) }) : null,
       ambiguous ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ErrorLine, { message: "Each of name, username, password, notes and one-time password can be used by one column." }) : null
     ] }) : null,
-    stage === "done" && done ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Section, { title: "Result", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Row, { label: "Created", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-foreground", children: done.created.length }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Row, { label: "Skipped", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-foreground", children: done.skipped }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Row, { label: "Failed", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: done.failed.length > 0 ? "text-destructive" : "text-foreground", children: done.failed.length }) }),
-      done.untried.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Row, { label: "Not tried", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-foreground", children: done.untried.length }) }) : null,
-      done.withOtp > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Row, { label: "Codes", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-muted-foreground", children: [
+    stage === "done" && done ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(VaultSection, { title: "Result", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultRow, { label: "Created", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-foreground", children: done.created.length }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultRow, { label: "Skipped", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-foreground", children: done.skipped }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultRow, { label: "Failed", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: done.failed.length > 0 ? "text-destructive" : "text-foreground", children: done.failed.length }) }),
+      done.untried.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultRow, { label: "Not tried", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-foreground", children: done.untried.length }) }) : null,
+      done.withOtp > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultRow, { label: "Codes", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-muted-foreground", children: [
         plural(done.withOtp, "login"),
         " still need the one-time password added."
       ] }) }) : null,
-      done.failed.map((f) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Row, { label: f.title, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "block truncate text-destructive", title: f.reason, children: f.reason }) }, f.key))
+      done.failed.map((f) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VaultRow, { label: f.title, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "block truncate text-destructive", title: f.reason, children: f.reason }) }, f.key))
     ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ErrorLine, { message: error })
   ] });
@@ -4713,11 +4698,13 @@ var import_controls21 = require("@ai-matrx/design-system/controls");
 var import_confirm_opener9 = require("@ai-matrx/kit/confirm-opener");
 
 // src/activity/FilesSection.tsx
+var import_format7 = require("@ai-matrx/kit/format");
 var import_react21 = require("react");
 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_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.";
@@ -4776,7 +4763,7 @@ function FilesSection({ item, port, editing, onChanged }) {
       onDragLeave: canEdit ? () => setDragging(false) : void 0,
       onDrop: canEdit ? drop : void 0,
       children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-        Section,
+        VaultSection,
         {
           title: "Files",
           actions: canEdit ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PlusGlyph, {}), disabled: busy !== null, onClick: () => picker.current?.click(), children: "Add file" }) : void 0,
@@ -4787,11 +4774,11 @@ function FilesSection({ item, port, editing, onChanged }) {
             } }) : null,
             item.attachments.map(
               (a) => canEdit ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(EditableFile, { port, item, file: a, busy, run, onDownload: () => void download(a), onTooBig: () => setError(TOO_BIG) }, a.id) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                Row,
+                VaultRow,
                 {
                   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: "Sealed" }) : canDownload(item, a) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DownloadGlyph, {}), "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: "Sealed" }) : 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,
                   children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FileName, { file: a })
                 },
                 a.id
@@ -4817,12 +4804,12 @@ function EditableFile({ port, item: it, file: a, busy: b, run: go, onDownload, o
   }
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      Row,
+      VaultRow,
       {
         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)(DownloadGlyph, {}), "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_icons8.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() }),
@@ -4853,7 +4840,7 @@ function EditableFile({ port, item: it, file: a, busy: b, run: go, onDownload, o
 function FileName({ file }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate", children: file.fileName }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatBytes(file.sizeBytes) })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: (0, import_format7.formatFileSize)(file.sizeBytes) })
   ] });
 }
 function Protection({ value, locked, onChange }) {
@@ -4876,13 +4863,13 @@ function NewFile({ file, busy, onAdd, onCancel }) {
     await onAdd({ label: label.trim(), description: description.trim() || null, handling });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Row, { label: "New file", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VaultRow, { label: "New file", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate", children: file.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatBytes(file.size) })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: (0, import_format7.formatFileSize)(file.size) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Row, { label: "Name", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Field, { "aria-label": "Name", value: label, onChange: (e) => setLabel(e.target.value) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Row, { label: "Purpose", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Field, { "aria-label": "Purpose", placeholder: "What it is for", value: description, onChange: (e) => setDescription(e.target.value) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Row, { label: "Protection", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Protection, { value: handling, locked: false, onChange: setHandling }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VaultRow, { label: "Name", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Field, { "aria-label": "Name", value: label, onChange: (e) => setLabel(e.target.value) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VaultRow, { label: "Purpose", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Field, { "aria-label": "Purpose", placeholder: "What it is for", value: description, onChange: (e) => setDescription(e.target.value) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VaultRow, { label: "Protection", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Protection, { value: handling, locked: false, onChange: setHandling }) }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex justify-end gap-2 px-3 py-1 sm:px-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Button, { variant: "quiet", disabled: busy, onClick: onCancel, children: "Cancel" }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Button, { variant: "primary", disabled: busy || !label.trim(), onClick: () => void add(), children: busy ? "Adding\u2026" : "Add file" })
@@ -4900,10 +4887,10 @@ function FileDetailsRows({ file, busy, onSave, onCancel }) {
     await onSave({ label: label.trim(), description: description.trim() || null, fileName: fileName.trim(), handling });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Row, { label: "Name", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Field, { "aria-label": "Name", value: label, onChange: (e) => setLabel(e.target.value) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Row, { label: "Purpose", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Field, { "aria-label": "Purpose", placeholder: "What it is for", value: description, onChange: (e) => setDescription(e.target.value) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Row, { label: "File name", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Field, { "aria-label": "File name", value: fileName, onChange: (e) => setFileName(e.target.value) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Row, { label: "Protection", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Protection, { value: handling, locked: file.handling === "sealed", onChange: setHandling }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VaultRow, { label: "Name", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Field, { "aria-label": "Name", value: label, onChange: (e) => setLabel(e.target.value) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VaultRow, { label: "Purpose", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Field, { "aria-label": "Purpose", placeholder: "What it is for", value: description, onChange: (e) => setDescription(e.target.value) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VaultRow, { label: "File name", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Field, { "aria-label": "File name", value: fileName, onChange: (e) => setFileName(e.target.value) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VaultRow, { label: "Protection", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Protection, { value: handling, locked: file.handling === "sealed", onChange: setHandling }) }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex justify-end gap-2 px-3 py-1 sm:px-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Button, { variant: "quiet", disabled: busy, onClick: onCancel, children: "Cancel" }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_controls16.Button, { variant: "primary", disabled: busy || !changed || !label.trim() || !fileName.trim(), onClick: () => void save(), children: busy ? "Saving\u2026" : "Save" })
@@ -4922,6 +4909,7 @@ function confirmSeal(label) {
 // src/fields/RecoveryCodesRow.tsx
 var import_react22 = require("react");
 var import_controls17 = require("@ai-matrx/design-system/controls");
+var import_icons9 = 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;
@@ -4962,7 +4950,7 @@ function RecoveryCodesRow({ item, field, port, onChanged }) {
   };
   if (draft !== null) {
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-      Row,
+      VaultRow,
       {
         label: "Recovery codes",
         top: true,
@@ -4982,7 +4970,7 @@ function RecoveryCodesRow({ item, field, port, onChanged }) {
   }
   if (!field) {
     if (!canEdit) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Row, { label: "Recovery codes", actions: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_controls17.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PlusGlyph, {}), "aria-label": "Add recovery codes", onClick: () => setDraft("") }), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-muted-foreground", children: "None" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(VaultRow, { label: "Recovery codes", actions: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_controls17.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PlusGlyph, {}), "aria-label": "Add recovery codes", onClick: () => setDraft("") }), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-muted-foreground", children: "None" }) });
   }
   const sealed = field.handling === "sealed";
   const canSee = !sealed && item.capabilities.canReveal;
@@ -5004,7 +4992,7 @@ function RecoveryCodesRow({ item, field, port, onChanged }) {
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    Row,
+    VaultRow,
     {
       label: "Recovery codes",
       top: codes !== null,
@@ -5015,7 +5003,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: "Sealed" }) : 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)(CopyGlyph, {}), "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_icons9.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
@@ -5024,33 +5012,17 @@ function RecoveryCodesRow({ item, field, port, onChanged }) {
   );
 }
 
+// src/ItemPane.tsx
+var import_icons11 = require("@ai-matrx/design-system/icons");
+var import_drafts = require("@ai-matrx/kit/drafts");
+
 // src/draft-keep.ts
 var PREFIX = "matrx.vault.draft:";
 function draftKey(itemId, definitionKey) {
   return `${PREFIX}${itemId ?? `new:${definitionKey ?? "custom"}`}`;
 }
-function keepDraft(key, basedOn, d) {
-  const kept = { basedOn, draft: { name: d.name, description: d.description, tags: d.tags, loginUrls: d.loginUrls, notes: d.notes, custom: d.custom } };
-  try {
-    globalThis.sessionStorage?.setItem(key, JSON.stringify(kept));
-  } catch {
-  }
-}
-function readKeptDraft(key, basedOn) {
-  try {
-    const raw = globalThis.sessionStorage?.getItem(key);
-    if (!raw) return null;
-    const kept = JSON.parse(raw);
-    return kept.basedOn === basedOn ? kept.draft : null;
-  } catch {
-    return null;
-  }
-}
-function dropKeptDraft(key) {
-  try {
-    globalThis.sessionStorage?.removeItem(key);
-  } catch {
-  }
+function keptFieldsOf(d) {
+  return { name: d.name, description: d.description, tags: d.tags, loginUrls: d.loginUrls, notes: d.notes, custom: d.custom };
 }
 
 // src/extension/page-logic.ts
@@ -5197,6 +5169,7 @@ var import_react26 = require("react");
 var import_confirm_opener8 = require("@ai-matrx/kit/confirm-opener");
 var import_controls20 = require("@ai-matrx/design-system/controls");
 var import_design_system15 = require("@ai-matrx/design-system");
+var import_icons10 = require("@ai-matrx/design-system/icons");
 
 // src/sharing/logic.ts
 var LEVEL_OPTIONS = [
@@ -5228,7 +5201,7 @@ function copyRefusal(message2) {
   return /duplicate/i.test(message2) ? "There is already a copy of this item there." : null;
 }
 var isPasskey = (item) => item.definitionKey === "native_passkey" || item.definitionKey === "passkey_private";
-function moveConsequence(item, to) {
+function itemMoveConsequence(item, to) {
   if (item.authenticator) return "One-time password stays behind; set it up again";
   return to ? "Its members get access; people you shared with lose it" : "Only you; organization members lose access";
 }
@@ -5318,7 +5291,7 @@ function MovePanel({ item, port, organizations, onClose, onChanged }) {
     const to = destinationOf(moveChoice.value);
     const ok = await (0, import_confirm_opener7.confirm)({
       title: `Move to ${moveChoice.label}?`,
-      description: `"${item.name}" stays the same item, so everything using it keeps working. ${moveConsequence(item, to)}.`,
+      description: `"${item.name}" stays the same item, so everything using it keeps working. ${itemMoveConsequence(item, to)}.`,
       confirmLabel: "Move"
     });
     if (!ok) return;
@@ -5354,17 +5327,17 @@ function MovePanel({ item, port, organizations, onClose, onChanged }) {
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StatusLine, { error, notice }),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_controls19.Button, { variant: "outline", className: "ml-auto", onClick: onClose, children: "Close" })
       ] }),
-      children: nothing ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Section, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Empty, { children: passkey ? "A passkey stays where it was created." : "Only the owner can move or give this item." }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Section, { children: [
+      children: nothing ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(VaultSection, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Empty, { children: passkey ? "A passkey stays where it was created." : "Only the owner can move or give this item." }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(VaultSection, { children: [
         canMove && moves.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          Row,
+          VaultRow,
           {
             label: "Move to",
-            hint: moveChoice ? moveConsequence(item, destinationOf(moveChoice.value)) : void 0,
+            hint: moveChoice ? itemMoveConsequence(item, destinationOf(moveChoice.value)) : void 0,
             actions: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_controls19.Button, { variant: "outline", disabled: busy !== null || !moveChoice, onClick: () => void move(), children: "Move" }),
             children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_controls19.Select, { className: "w-full", "aria-label": "Move to", value: moveTo || NONE, onValueChange: (v) => setMoveTo(v === NONE ? "" : v), options: [{ value: NONE, label: "Choose where" }, ...moves] })
           }
         ) : null,
-        canGive ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Row, { label: "Give to", hint: "You lose all access; your shares end", actions: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_controls19.Button, { variant: "danger", disabled: busy !== null || !isEmail(email), onClick: () => void give(), children: "Give" }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        canGive ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(VaultRow, { label: "Give to", hint: "You lose all access; your shares end", actions: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_controls19.Button, { variant: "danger", disabled: busy !== null || !isEmail(email), onClick: () => void give(), children: "Give" }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_controls19.Field,
           {
             className: "w-full",
@@ -5378,7 +5351,7 @@ function MovePanel({ item, port, organizations, onClose, onChanged }) {
             onChange: (e) => setEmail(e.target.value)
           }
         ) }) : null,
-        canCopy && copies.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Row, { label: "Copy to", hint: "A separate item; edits no longer sync", actions: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_controls19.Button, { variant: "outline", disabled: busy !== null || !copyChoice, onClick: () => void copy(), children: "Copy" }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_controls19.Select, { className: "w-full", "aria-label": "Copy to", value: copyTo || NONE, onValueChange: (v) => setCopyTo(v === NONE ? "" : v), options: [{ value: NONE, label: "Choose where" }, ...copies] }) }) : null
+        canCopy && copies.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(VaultRow, { label: "Copy to", hint: "A separate item; edits no longer sync", actions: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_controls19.Button, { variant: "outline", disabled: busy !== null || !copyChoice, onClick: () => void copy(), children: "Copy" }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_controls19.Select, { className: "w-full", "aria-label": "Copy to", value: copyTo || NONE, onValueChange: (v) => setCopyTo(v === NONE ? "" : v), options: [{ value: NONE, label: "Choose where" }, ...copies] }) }) : null
       ] })
     }
   );
@@ -5460,7 +5433,7 @@ function SharePanel({ item, port, organizations, onClose, onChanged }) {
     }
   };
   if (!item.capabilities.canManage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Panel, { title: "Share", size: "md", onClose, footer: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_controls20.Button, { variant: "primary", onClick: onClose, children: "Done" }), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Section, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Empty, { children: "Only the owner can change who has access." }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Panel, { title: "Share", size: "md", onClose, footer: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_controls20.Button, { variant: "primary", onClick: onClose, children: "Done" }), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(VaultSection, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Empty, { children: "Only the owner can change who has access." }) }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     Panel,
@@ -5473,9 +5446,9 @@ function SharePanel({ item, port, organizations, onClose, onChanged }) {
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_controls20.Button, { variant: "primary", className: "ml-auto", onClick: onClose, children: "Done" })
       ] }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Section, { title: "Who has access", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(VaultSection, { title: "Who has access", children: [
           isOrg ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AccessLine, { glyph: BuildingGlyph, who: `${orgName} admins`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "px-2 text-sm text-muted-foreground", children: "Full access" }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AccessLine, { glyph: PersonGlyph, who: "You", meta: "Owner", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "px-2 text-sm text-muted-foreground", children: "Full access" }) }),
-          isOrg ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AccessLine, { glyph: UsersGlyph, who: `${orgName} members`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          isOrg ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AccessLine, { glyph: import_icons10.UsersIcon, who: `${orgName} members`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             import_controls20.Select,
             {
               variant: "inline",
@@ -5536,7 +5509,7 @@ function IntoOrganization({ item, port, organizations, grants, onShared }) {
   const [level, setLevel] = (0, import_react26.useState)("use");
   const chosen = open.find((o) => o.id === target);
   if (item.owner.kind !== "me") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Section, { title: "Share into organization", children: open.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(VaultSection, { title: "Share into organization", children: open.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex min-h-11 items-center gap-2 px-3 sm:px-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BuildingGlyph, { className: "size-4 shrink-0 text-muted-foreground" }),
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_controls20.Select, { className: "min-w-0 flex-1", "aria-label": "Organization", value: target || "__none__", onValueChange: (v) => setTarget(v === "__none__" ? "" : v), options: [{ value: "__none__", label: "Choose an organization" }, ...open.map((o) => ({ value: o.id, label: o.name }))] }),
@@ -5586,7 +5559,7 @@ function MemberAccess({ port, organizationId, organizationName }) {
     const effective = await run(userId, () => port.sharing.setMemberAccess(organizationId, userId, access));
     if (effective) setList((l) => l ? { ...l, members: l.members.map((m) => m.userId === userId ? { ...m, access, effective } : m) } : l);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Section, { title: `${organizationName} vault access`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(VaultSection, { title: `${organizationName} vault access`, children: [
     loadError ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Empty, { children: loadError }) : list === null ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_controls20.RegionSkeleton, { shape: "rows", count: 3, "aria-label": "Loading member access", className: "px-3 sm:px-4" }) : list.members.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Empty, { children: "No members yet." }) : list.members.map((m) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AccessLine, { glyph: PersonGlyph, who: m.email || m.userId, meta: m.role, children: m.effective === "admin" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "px-2 text-sm text-muted-foreground", children: MEMBER_ACCESS_LABEL.admin }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       import_controls20.Select,
       {
@@ -5621,7 +5594,7 @@ function SharingSummary({ item, port, className }) {
 }
 
 // src/ItemPane.tsx
-var import_format4 = require("@ai-matrx/kit/format");
+var import_format8 = require("@ai-matrx/kit/format");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var USERNAME_KEYS = /^(username|user_name|email|login|username_or_email|account_email)$/;
 function ItemPane(props) {
@@ -5662,7 +5635,7 @@ function ItemPane(props) {
     if (was && was.id === id && was.mode === mode && editing) {
       setDraft((d) => rebaseDraft(was.base, base, d));
     } else {
-      const kept = editing ? readKeptDraft(keepKey, item?.updatedAt ?? "new") : null;
+      const kept = editing ? (0, import_drafts.readKeptDraft)(keepKey, { basedOn: item?.updatedAt ?? "new" })?.value ?? null : null;
       setDraft(kept ? { ...base, ...kept } : base);
       setTagsText((kept ?? base).tags.join(", "));
       setError(null);
@@ -5677,8 +5650,8 @@ function ItemPane(props) {
   (0, import_react27.useEffect)(() => onDirty(dirty), [dirty, onDirty]);
   const keepKey = draftKey(item?.id ?? null, definition?.key ?? item?.definitionKey ?? null);
   (0, import_react27.useEffect)(() => {
-    if (editing && dirty) keepDraft(keepKey, item?.updatedAt ?? "new", draft);
-    else if (!editing) dropKeptDraft(keepKey);
+    if (editing && dirty) (0, import_drafts.keepDraft)(keepKey, keptFieldsOf(draft), { basedOn: item?.updatedAt ?? "new" });
+    else if (!editing) (0, import_drafts.dropKeptDraft)(keepKey);
   }, [editing, dirty, draft, keepKey, item?.updatedAt]);
   (0, import_react27.useEffect)(() => {
     if (!editing || !item) return;
@@ -5715,7 +5688,7 @@ function ItemPane(props) {
       if (item) {
         const r = await port.save(item, definition, out);
         const [next, n] = await withOtp(r.item, r.notice);
-        dropKeptDraft(keepKey);
+        (0, import_drafts.dropKeptDraft)(keepKey);
         onSaved(next, false, n);
       } else if (definition && owner === "person") {
         const secretKey = declared.find((f) => f.storage === "encrypted" && f.kind === "secret")?.key ?? null;
@@ -5725,7 +5698,7 @@ function ItemPane(props) {
       } else if (definition) {
         const r = await port.create(definition, owner === "me" ? null : owner, out);
         const [next, n] = await withOtp(r.item, r.notice);
-        dropKeptDraft(keepKey);
+        (0, import_drafts.dropKeptDraft)(keepKey);
         onSaved(next, true, n);
       }
     } catch (e) {
@@ -5764,7 +5737,7 @@ function ItemPane(props) {
   const viewCustom = (item?.custom ?? []).filter((c) => !declaredKeys.has(c.key) && c.key !== MFA_METHOD_KEY && !isAuthenticatorStorage(c.key));
   const isLogin = (item?.definitionKey ?? definition?.key) === "website_login" || (item?.definitionKey ?? definition?.key) === "username_password";
   const typeLabel = definition?.label ?? item?.definitionLabel ?? "";
-  const shownOwner = mode === "new" ? owner === "me" ? { label: "Personal", glyph: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PersonGlyph, {}) } : owner === "person" ? { label: "Someone else", glyph: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SendGlyph, {}) } : { label: organizations.find((o) => o.id === owner)?.name ?? "Organization", glyph: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BuildingGlyph, {}) } : item ? { label: item.owner.label, glyph: item.owner.kind === "me" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PersonGlyph, {}) : item.owner.kind === "organization" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BuildingGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UsersGlyph, {}) } : null;
+  const shownOwner = mode === "new" ? owner === "me" ? { label: "Personal", glyph: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PersonGlyph, {}) } : owner === "person" ? { label: "Someone else", glyph: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SendGlyph, {}) } : { label: organizations.find((o) => o.id === owner)?.name ?? "Organization", glyph: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BuildingGlyph, {}) } : item ? { label: item.owner.label, glyph: item.owner.kind === "me" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PersonGlyph, {}) : item.owner.kind === "organization" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BuildingGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons11.UsersIcon, {}) } : null;
   const tagsVisible = showTags || draft.tags.length > 0 || tagsText !== "";
   const descriptionVisible = showDescription || draft.description !== "";
   const header = /* @__PURE__ */ (0, import_jsx_runtime26.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: [
@@ -5821,7 +5794,7 @@ function ItemPane(props) {
             "Send securely"
           ] }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_design_system16.DropdownMenuItem, { onSelect: () => onPanel("history"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(HistoryGlyph, { className: "size-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons11.HistoryIcon, { className: "size-4" }),
             "Password history"
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_design_system16.DropdownMenuItem, { onSelect: () => onPanel("activity"), children: [
@@ -5829,7 +5802,7 @@ function ItemPane(props) {
             "Activity"
           ] }),
           canEdit ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_design_system16.DropdownMenuItem, { onSelect: () => onPanel("settings"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SettingsGlyph, { className: "size-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons11.SettingsIcon, { className: "size-4" }),
             "Settings"
           ] }) : null,
           canManage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
@@ -5849,8 +5822,8 @@ function ItemPane(props) {
     error ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { role: "alert", className: "border-b border-border bg-muted px-5 py-2 text-sm text-destructive", children: error }) : null,
     notice && !editing ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { role: "status", className: "border-b border-border bg-muted px-5 py-2 text-sm text-warning", children: notice }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-5 px-3 py-4 sm:px-6 sm:py-6", children: editing ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Section, { children: [
-        mode === "new" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Row, { label: "Save to", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(VaultSection, { children: [
+        mode === "new" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VaultRow, { label: "Save to", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           import_controls21.OptionCombobox,
           {
             value: owner,
@@ -5871,7 +5844,7 @@ function ItemPane(props) {
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(EditRow, { label: "Name", value: draft.name, onChange: (v) => patch({ name: v }), placeholder: "Name", autoFocus: mode === "new" }),
         mode === "new" && owner === "person" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(EditRow, { label: "Their email", value: recipient, placeholder: "name@company.com", inputMode: "email", onChange: setRecipient }),
-          declared.some((f) => f.storage === "encrypted" && f.kind === "secret") ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Row, { label: "Password", hint: "You never see it", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_controls21.Switch, { checked: generatePrivately, onCheckedChange: setGeneratePrivately, "aria-label": "Generate the password privately" }) }) : null
+          declared.some((f) => f.storage === "encrypted" && f.kind === "secret") ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VaultRow, { label: "Password", hint: "You never see it", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_controls21.Switch, { checked: generatePrivately, onCheckedChange: setGeneratePrivately, "aria-label": "Generate the password privately" }) }) : null
         ] }) : null,
         declared.map((f) => {
           const existing = item?.fields.find((x) => x.key === f.key);
@@ -5891,7 +5864,7 @@ function ItemPane(props) {
               actions: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
                 hidden && existing?.handling === "revealable" && item?.capabilities.canReveal ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_controls21.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(EyeGlyph, {}), "aria-label": `Show current ${f.label}`, onClick: () => void loadForEdit(f.key) }) : null,
                 secretKind ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GenerateButton, { onUse: (v) => setValue(f.key, v) }) : null,
-                existing ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_controls21.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SettingsGlyph, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${existing.id}`) }) : null
+                existing ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_controls21.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons11.SettingsIcon, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${existing.id}`) }) : null
               ] })
             },
             f.key
@@ -5909,7 +5882,7 @@ function ItemPane(props) {
             removeLabel: `Delete ${f.label}`,
             actions: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
               f.handling === "revealable" && !(f.key in loaded) && item?.capabilities.canReveal ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_controls21.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(EyeGlyph, {}), "aria-label": `Show current ${f.label}`, onClick: () => void loadForEdit(f.key) }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_controls21.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SettingsGlyph, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${f.id}`) })
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_controls21.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons11.SettingsIcon, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${f.id}`) })
             ] })
           },
           f.id
@@ -5942,9 +5915,9 @@ function ItemPane(props) {
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TotpEditRow, { value: draft.authenticator, onChange: (v) => patch({ authenticator: v }), hasExisting: Boolean(item?.authenticator), item, port, onEnrolled: onChanged }),
         item && isLogin && !item.authenticator ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TwoFactorMethodRow, { port, item, onChanged }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Section, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(EditRow, { label: "Notes", value: draft.notes, multiline: true, placeholder: "Anything worth remembering", onChange: (v) => patch({ notes: v }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VaultSection, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(EditRow, { label: "Notes", value: draft.notes, multiline: true, placeholder: "Anything worth remembering", onChange: (v) => patch({ notes: v }) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-        Section,
+        VaultSection,
         {
           title: "More",
           actions: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_design_system16.DropdownMenu, { children: [
@@ -5978,7 +5951,7 @@ function ItemPane(props) {
       ),
       filesProps ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FilesSection, { ...filesProps, editing: true }) : null
     ] }) : item ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Section, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(VaultSection, { children: [
         declared.map((f) => {
           if (f.storage === "metadata") {
             const v = metaValue(f.key);
@@ -5993,18 +5966,18 @@ function ItemPane(props) {
         item.authenticator ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TotpRow, { port, item, onChanged }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AddRow, { label: "One-time password", onAdd: canEdit ? () => onMode("edit") : null, children: "Set up" }),
         !item.authenticator && item.custom.some((c) => c.key === MFA_METHOD_KEY && c.value) ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TwoFactorMethodRow, { port, item, onChanged }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Section, { children: item.notes ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PlainRow, { label: "Notes", value: item.notes, multiline: true }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AddRow, { label: "Notes", onAdd: canEdit ? () => onMode("edit") : null, children: "Add notes" }) }),
-      item.description || item.tags.length > 0 || viewCustom.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Section, { title: "More", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VaultSection, { children: item.notes ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PlainRow, { label: "Notes", value: item.notes, multiline: true }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AddRow, { label: "Notes", onAdd: canEdit ? () => onMode("edit") : null, children: "Add notes" }) }),
+      item.description || item.tags.length > 0 || viewCustom.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(VaultSection, { title: "More", children: [
         item.description ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PlainRow, { label: "Description", value: item.description }) : null,
-        item.tags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Row, { label: "Tags", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-wrap gap-1", children: item.tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-xs", children: t }, t)) }) }) : null,
+        item.tags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VaultRow, { label: "Tags", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex flex-wrap gap-1", children: item.tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-xs", children: t }, t)) }) }) : null,
         viewCustom.map((c) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PlainRow, { label: c.label, value: c.value, openUrl: host.openUrl }, c.key))
       ] }) : null,
       filesProps ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FilesSection, { ...filesProps, editing: false }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { className: (0, import_design_system17.cn)("px-1 text-xs text-muted-foreground"), children: [
         "Modified ",
-        (0, import_format4.formatAbsoluteDate)(item.updatedAt, DAY_FORMAT, ""),
+        (0, import_format8.formatAbsoluteDate)(item.updatedAt, DAY_FORMAT, ""),
         " \xB7 Created ",
-        (0, import_format4.formatAbsoluteDate)(item.createdAt, DAY_FORMAT, "")
+        (0, import_format8.formatAbsoluteDate)(item.createdAt, DAY_FORMAT, "")
       ] })
     ] }) : null }) })
   ] }) });
@@ -6120,7 +6093,7 @@ function ListRow({ item, family, port, on, onSelect, withOwner }) {
 // src/lists/TrashView.tsx
 var import_react30 = require("react");
 var import_controls24 = require("@ai-matrx/design-system/controls");
-var import_format5 = require("@ai-matrx/kit/format");
+var import_format9 = require("@ai-matrx/kit/format");
 
 // src/lists/logic.ts
 var ENTITY_TYPE = "credential_item";
@@ -6244,13 +6217,13 @@ function RestorePanel({ lists, item, restore, onClose }) {
         refused ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_controls23.Button, { variant: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(RestoreGlyph, {}), disabled: busy || loading || lists.preview !== void 0 && preview === null, onClick: () => void run(), children: busy ? "Restoring\u2026" : "Restore" })
       ] }),
       children: [
-        loading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Section, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Empty, { children: "Checking what comes back\u2026" }) }) : preview?.supported ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Section, { title: "Comes back", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Row, { label: "Fields", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-foreground", children: count(preview.fields, "field") }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Row, { label: "Files", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-foreground", children: count(preview.attachments, "file") }) }),
-          preview.passkeys === 1 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Row, { label: "Passkey", hint: "Not turned on; the site may not accept it", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-foreground", children: "1 passkey" }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Row, { label: "Stays off", hint: "Turn each back on yourself", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-muted-foreground", children: "Sharing, browser fill, codes, sandboxes, agents" }) }),
-          preview.priorWasDisabled ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Row, { label: "Before", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-muted-foreground", children: "It was already off before it was deleted." }) }) : null
-        ] }) : preview ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Section, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Empty, { children: refusalText(preview.reason) }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Section, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Empty, { children: "It comes back turned off: sharing, browser fill, codes and sandbox use stay off." }) }),
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VaultSection, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Empty, { children: "Checking what comes back\u2026" }) }) : preview?.supported ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(VaultSection, { title: "Comes back", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VaultRow, { label: "Fields", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-foreground", children: count(preview.fields, "field") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VaultRow, { label: "Files", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-foreground", children: count(preview.attachments, "file") }) }),
+          preview.passkeys === 1 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VaultRow, { label: "Passkey", hint: "Not turned on; the site may not accept it", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-foreground", children: "1 passkey" }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VaultRow, { label: "Stays off", hint: "Turn each back on yourself", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-muted-foreground", children: "Sharing, browser fill, codes, sandboxes, agents" }) }),
+          preview.priorWasDisabled ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VaultRow, { label: "Before", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-muted-foreground", children: "It was already off before it was deleted." }) }) : null
+        ] }) : preview ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VaultSection, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Empty, { children: refusalText(preview.reason) }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(VaultSection, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Empty, { children: "It comes back turned off: sharing, browser fill, codes and sandbox use stay off." }) }),
         error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { role: "alert", className: "px-1 text-sm text-destructive", children: error }) : null
       ]
     }
@@ -6282,13 +6255,13 @@ function TrashView({ port, deleted, query, header, onChanged }) {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3", children: [
     header,
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Section, { title: "Trash", children: shown.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Empty, { children: deleted.length === 0 ? "The trash is empty." : "Nothing matches." }) : shown.map((item) => (
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(VaultSection, { title: "Trash", children: shown.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Empty, { children: deleted.length === 0 ? "The trash is empty." : "Nothing matches." }) : shown.map((item) => (
       // A list row, not a field row: the name gets the whole width (on a phone a label column
       // left "Vau…" for every row), the deletion date sits under it.
       /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex min-h-12 items-center gap-3 px-3 py-1.5 sm:px-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
           /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "truncate text-sm text-foreground", children: item.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: [item.deletion?.deletedAt ? `Deleted ${(0, import_format5.formatAbsoluteDate)(item.deletion.deletedAt, DAY_FORMAT, "")}` : null, item.owner.kind !== "me" ? item.owner.label : null].filter(Boolean).join(" \xB7 ") })
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: [item.deletion?.deletedAt ? `Deleted ${(0, import_format9.formatAbsoluteDate)(item.deletion.deletedAt, DAY_FORMAT, "")}` : null, item.owner.kind !== "me" ? item.owner.label : null].filter(Boolean).join(" \xB7 ") })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_controls24.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RestoreGlyph, {}), disabled: busyId !== null || !item.deletion, onClick: () => setRestoring(item), children: "Restore" })
       ] }, item.id)
@@ -6302,6 +6275,7 @@ function TrashView({ port, deleted, query, header, onChanged }) {
 var import_react31 = require("react");
 var import_design_system20 = require("@ai-matrx/design-system");
 var import_controls25 = require("@ai-matrx/design-system/controls");
+var import_icons12 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function NewItemFlow({ definitions, url, onUrl, onChoose, onCancel }) {
   const [search, setSearch] = (0, import_react31.useState)("");
@@ -6336,7 +6310,7 @@ function NewItemFlow({ definitions, url, onUrl, onChoose, onCancel }) {
             "aria-label": "Website address",
             inputMode: "url",
             autoFocus: true,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GlobeGlyph, {})
+            icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons12.GlobeIcon, {})
           }
         ),
         guess && login ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-2 rounded-xl border border-border bg-card p-3", children: [
@@ -6375,10 +6349,10 @@ var import_react32 = require("react");
 var import_confirm_opener10 = require("@ai-matrx/kit/confirm-opener");
 var import_design_system21 = require("@ai-matrx/design-system");
 var import_controls26 = require("@ai-matrx/design-system/controls");
-var import_format7 = require("@ai-matrx/kit/format");
+var import_format11 = require("@ai-matrx/kit/format");
 
 // src/sharing/secure-link-logic.ts
-var import_format6 = require("@ai-matrx/kit/format");
+var import_format10 = require("@ai-matrx/kit/format");
 var SECURE_RESOURCE_TYPE = "credential_item";
 var NOTE_MAX = 1e3;
 var CHANNEL_WORD = { email: "email", sms: "text" };
@@ -6416,7 +6390,7 @@ function carriedWords(keys, fields) {
   const known = new Map(fields.map((f) => [f.key, f.label]));
   return keys.map((k) => known.get(k) ?? fieldNames([k])).join(", ");
 }
-var lifetimeWords = (minutes) => (0, import_format6.formatDurationMinutes)(minutes, { style: "long" });
+var lifetimeWords = (minutes) => (0, import_format10.formatDurationMinutes)(minutes, { style: "long" });
 function remedyOf(e) {
   const body = e?.serverDetail;
   if (!body || typeof body !== "object") return null;
@@ -6586,9 +6560,9 @@ function SecureLinkPanel({ item, port, onClose }) {
       ] }),
       children: [
         remedy ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "px-1 text-xs text-muted-foreground", children: remedy }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Section, { title: "Recipient", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Row, { label: "Email", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_controls26.Field, { type: "email", autoComplete: "off", placeholder: "name@example.com", "aria-label": "Their email", value: email, onChange: (e) => setEmail(e.target.value), className: "w-full" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Row, { label: "Mobile", hint: "For the code", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(VaultSection, { title: "Recipient", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VaultRow, { label: "Email", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_controls26.Field, { type: "email", autoComplete: "off", placeholder: "name@example.com", "aria-label": "Their email", value: email, onChange: (e) => setEmail(e.target.value), className: "w-full" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VaultRow, { label: "Mobile", hint: "For the code", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             import_controls26.Field,
             {
               type: "tel",
@@ -6604,8 +6578,8 @@ function SecureLinkPanel({ item, port, onClose }) {
               className: "w-full"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Row, { label: "Name", hint: "Optional", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_controls26.Field, { autoComplete: "off", placeholder: "Their name", "aria-label": "Their name", value: name, onChange: (e) => setName(e.target.value), className: "w-full" }) }),
-          plan && !plan.same ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Row, { label: "Link by", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VaultRow, { label: "Name", hint: "Optional", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_controls26.Field, { autoComplete: "off", placeholder: "Their name", "aria-label": "Their name", value: name, onChange: (e) => setName(e.target.value), className: "w-full" }) }),
+          plan && !plan.same ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VaultRow, { label: "Link by", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             import_controls26.SegmentedControl,
             {
               "aria-label": "Send the link by",
@@ -6617,26 +6591,26 @@ function SecureLinkPanel({ item, port, onClose }) {
               ]
             }
           ) }) : null,
-          email.trim() ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Row, { label: "Delivery", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: plan?.same ? "text-warning" : "text-foreground", children: planWords(plan) }) }) : null
+          email.trim() ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VaultRow, { label: "Delivery", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: plan?.same ? "text-warning" : "text-foreground", children: planWords(plan) }) }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Section, { title: "Include", children: optionsError ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Empty, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-destructive", children: optionsError }) }) : !options ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_controls26.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_runtime31.jsx)(Empty, { children: "Name and details only" }) : options.fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.jsx)(VaultSection, { title: "Include", children: optionsError ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Empty, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-destructive", children: optionsError }) }) : !options ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_controls26.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_runtime31.jsx)(Empty, { children: "Name and details only" }) : options.fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.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_runtime31.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground", children: f.label }),
           !f.available && f.reason ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "min-w-0 max-w-[55%] truncate text-xs text-muted-foreground", title: f.reason, children: f.reason }) : null
         ] }, f.key)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Section, { title: "Message", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-3 py-1 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_controls26.Textarea, { className: "w-full", rows: 2, maxLength: NOTE_MAX, placeholder: "Shown once, with it", "aria-label": "Message", value: note, onChange: (e) => setNote(e.target.value) }) }) }),
-        options ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Section, { title: "Link", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Row, { label: "Opens", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-foreground", children: "Once" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Row, { label: "Link expires", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VaultSection, { title: "Message", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-3 py-1 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_controls26.Textarea, { className: "w-full", rows: 2, maxLength: NOTE_MAX, placeholder: "Shown once, with it", "aria-label": "Message", value: note, onChange: (e) => setNote(e.target.value) }) }) }),
+        options ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(VaultSection, { title: "Link", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VaultRow, { label: "Opens", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-foreground", children: "Once" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VaultRow, { label: "Link expires", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "text-foreground", children: [
             "After ",
             lifetimeWords(options.linkMinutes)
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Row, { label: "Code expires", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "text-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VaultRow, { label: "Code expires", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "text-foreground", children: [
             "After ",
             lifetimeWords(options.codeMinutes)
           ] }) })
         ] }) : null,
-        sharing.sentSecureLinks ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Section, { title: "Sent links", children: sentError ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Empty, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-destructive", children: sentError }) }) : !sent ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_controls26.RegionSkeleton, { shape: "rows", count: 2, "aria-label": "Loading sent links", className: "px-3 sm:px-4" }) : sent.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Empty, { children: "None yet" }) : sent.map((row) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(AccessLine, { glyph: row.status === "pending" ? ClockGlyph : row.fieldKeys.length ? LockGlyph : ShareGlyph, who: recipientOf(row), meta: sentMeta(row, options), children: [
+        sharing.sentSecureLinks ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VaultSection, { title: "Sent links", children: sentError ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Empty, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-destructive", children: sentError }) }) : !sent ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_controls26.RegionSkeleton, { shape: "rows", count: 2, "aria-label": "Loading sent links", className: "px-3 sm:px-4" }) : sent.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Empty, { children: "None yet" }) : sent.map((row) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(AccessLine, { glyph: row.status === "pending" ? ClockGlyph : row.fieldKeys.length ? LockGlyph : ShareGlyph, who: recipientOf(row), meta: sentMeta(row, options), children: [
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_controls26.Badge, { tone: STATUS_TONE[row.status] ?? "neutral", children: statusWord(row.status) }),
           row.status === "pending" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_controls26.Button, { variant: "quiet", disabled: busy !== null, onClick: () => void turnOff(row), children: "Turn off" }) : null
         ] }, row.id)) }) : null
@@ -6645,7 +6619,7 @@ function SecureLinkPanel({ item, port, onClose }) {
   );
 }
 function sentMeta(row, options) {
-  const when = row.status === "pending" ? `Until ${(0, import_format7.formatAbsoluteDate)(row.expiresAt, void 0, "")}` : row.status === "viewed" && row.viewedAt ? (0, import_format7.formatAbsoluteDate)(row.viewedAt, void 0, "") : (0, import_format7.formatAbsoluteDate)(row.createdAt, DAY_FORMAT, "");
+  const when = row.status === "pending" ? `Until ${(0, import_format11.formatAbsoluteDate)(row.expiresAt, void 0, "")}` : row.status === "viewed" && row.viewedAt ? (0, import_format11.formatAbsoluteDate)(row.viewedAt, void 0, "") : (0, import_format11.formatAbsoluteDate)(row.createdAt, DAY_FORMAT, "");
   const carried = row.fieldKeys.length ? carriedWords(row.fieldKeys, options?.fields ?? []) : "";
   return [when, carried].filter(Boolean).join(" \xB7 ");
 }
@@ -6654,7 +6628,7 @@ function sentMeta(row, options) {
 var import_react33 = require("react");
 var import_confirm_opener11 = require("@ai-matrx/kit/confirm-opener");
 var import_controls27 = require("@ai-matrx/design-system/controls");
-var import_format8 = require("@ai-matrx/kit/format");
+var import_format12 = require("@ai-matrx/kit/format");
 
 // src/devices/logic.ts
 var PASSKEY_RP_ID = "aimatrx.com";
@@ -6778,19 +6752,19 @@ function DevicesPanel({ port, onClose }) {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Panel, { title: "Browsers that can fill", onClose, size: "md", children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ErrorLine2, { text: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Section, { children: devices === null ? error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Empty, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_controls27.Button, { variant: "outline", onClick: () => void load(), children: "Try again" }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_controls27.RegionSkeleton, { shape: "rows", count: 2, "aria-label": "Loading your browsers", className: "px-3 sm:px-4" }) : devices.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Empty, { children: "No browser can fill yet. Turn it on in the extension." }) : devices.map((device) => {
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VaultSection, { children: devices === null ? error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Empty, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_controls27.Button, { variant: "outline", onClick: () => void load(), children: "Try again" }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_controls27.RegionSkeleton, { shape: "rows", count: 2, "aria-label": "Loading your browsers", className: "px-3 sm:px-4" }) : devices.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Empty, { children: "No browser can fill yet. Turn it on in the extension." }) : devices.map((device) => {
       const off = isRevoked(device);
       return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-        Row,
+        VaultRow,
         {
           label: off ? "Turned off" : "Can fill",
-          hint: off ? (0, import_format8.formatAbsoluteDate)(device.revokedAt, DAY_FORMAT, "") : void 0,
+          hint: off ? (0, import_format12.formatAbsoluteDate)(device.revokedAt, DAY_FORMAT, "") : void 0,
           actions: off ? null : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_controls27.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PowerGlyph, {}), disabled: busyId !== null, onClick: () => void revoke(device), children: "Revoke" }),
           children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "flex min-w-0 flex-col", children: [
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: off ? "truncate text-muted-foreground" : "truncate text-foreground", children: device.label }),
             /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "truncate text-xs text-muted-foreground", children: [
-              device.lastUsedAt ? `Last used ${(0, import_format8.formatAbsoluteDate)(device.lastUsedAt, void 0, "")}` : "Never used",
-              device.addedAt ? ` \xB7 added ${(0, import_format8.formatAbsoluteDate)(device.addedAt, DAY_FORMAT, "")}` : ""
+              device.lastUsedAt ? `Last used ${(0, import_format12.formatAbsoluteDate)(device.lastUsedAt, void 0, "")}` : "Never used",
+              device.addedAt ? ` \xB7 added ${(0, import_format12.formatAbsoluteDate)(device.addedAt, DAY_FORMAT, "")}` : ""
             ] })
           ] })
         },
@@ -6869,29 +6843,29 @@ function ApprovePanel({ port, host, onClose, approvalKey, label, kind = "browser
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_controls27.Button, { variant: "quiet", disabled: busy !== null, onClick: refuse, children: key ? "Refuse" : "Close" }),
     canApprove ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_controls27.Button, { variant: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FingerprintGlyph, {}), disabled: busy !== null, onClick: () => void approve(), children: busy === "approve" ? "Approving\u2026" : "Approve with passkey" }) : null
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Panel, { title, onClose: refuse, size: "sm", footer, children: !key ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Section, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Empty, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Panel, { title, onClose: refuse, size: "sm", footer, children: !key ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VaultSection, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Empty, { children: [
     "This link names no key. Start again from ",
     where,
     "."
   ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Section, { title: "What is asking", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Row, { label: "Asking", hint: "Approve only if you just asked", children: asker }),
-      name ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Row, { label: "Name", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "block truncate", children: name }) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Row, { label: "Code", hint: `Must match ${where}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "font-mono tracking-wider text-foreground", children: shortFingerprint(key) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(VaultSection, { title: "What is asking", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VaultRow, { label: "Asking", hint: "Approve only if you just asked", children: asker }),
+      name ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VaultRow, { label: "Name", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "block truncate", children: name }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VaultRow, { label: "Code", hint: `Must match ${where}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "font-mono tracking-wider text-foreground", children: shortFingerprint(key) }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ErrorLine2, { text: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Section, { title: "Confirm it\u2019s you", children: approvedUntil ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Row, { label: "Approved", actions: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckGlyph, { className: "size-4 text-primary" }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "text-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VaultSection, { title: "Confirm it\u2019s you", children: approvedUntil ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VaultRow, { label: "Approved", actions: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckGlyph, { className: "size-4 text-primary" }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "text-foreground", children: [
       "Return to ",
       where,
       " by ",
-      (0, import_format8.formatAbsoluteDate)(approvedUntil, void 0, ""),
+      (0, import_format12.formatAbsoluteDate)(approvedUntil, void 0, ""),
       "."
     ] }) }) : !passkeys ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Empty, { children: [
       "Approve with your password in ",
       where,
       "."
     ] }) : !here ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      Row,
+      VaultRow,
       {
         label: "Passkey",
         hint: `Passkeys work only on ${passkeys.rpId}`,
@@ -6899,14 +6873,14 @@ function ApprovePanel({ port, host, onClose, approvalKey, label, kind = "browser
         children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-muted-foreground", children: "Not on this page" })
       }
     ) : methods === null ? error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Empty, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_controls27.Button, { variant: "outline", onClick: () => void load(), children: "Try again" }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_controls27.RegionSkeleton, { shape: "rows", count: 1, "aria-label": "Checking your account", className: "px-3 sm:px-4" }) : !methods.passkey ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      Row,
+      VaultRow,
       {
         label: "Passkey",
         hint: methods.password ? `Or type your password in ${where}` : "Add one to approve",
         actions: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_controls27.Button, { variant: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FingerprintGlyph, {}), disabled: busy !== null, onClick: () => void addPasskey(), children: busy === "add" ? "Adding\u2026" : "Add passkey" }),
         children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-muted-foreground", children: methods.password ? "None yet" : "No password or passkey" })
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Row, { label: "Passkey", hint: "Your device asks for it next", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-foreground", children: "Ready" }) }) })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VaultRow, { label: "Passkey", hint: "Your device asks for it next", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-foreground", children: "Ready" }) }) })
   ] }) });
 }
 
@@ -7184,7 +7158,7 @@ var TONE = {
 };
 function NativeImportPanel({ bridge, readLimits, activeOrganizationId, organizations, onClose, onChanged }) {
   if (!bridge) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Panel, { title: "Import passkeys", size: "md", onClose, footer: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_controls28.Button, { variant: "primary", onClick: onClose, children: "Close" }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Section, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Empty, { children: "Passkey import needs the desktop app." }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Panel, { title: "Import passkeys", size: "md", onClose, footer: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_controls28.Button, { variant: "primary", onClick: onClose, children: "Close" }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VaultSection, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Empty, { children: "Passkey import needs the desktop app." }) }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Importer, { bridge, readLimits, activeOrganizationId, organizations, onClose, onChanged });
 }
@@ -7231,25 +7205,25 @@ function Importer({ bridge, readLimits, activeOrganizationId, organizations, onC
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_controls28.Button, { variant: "primary", onClick: onClose, children: "Done" })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_controls28.Button, { variant: "quiet", onClick: onClose, children: "Close" });
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Panel, { title: "Import passkeys", size: "lg", onClose, footer, children: [
-    screen.kind === "idle" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Section, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Row, { label: "Save to", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_controls28.Select, { value: organizationId, options, "aria-label": "Save to", disabled: busy, onValueChange: setOrganizationId }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Row, { label: "File", hint: limits ? `Up to ${plural2(limits.maxItems, "passkey")}` : "A passkey exchange file", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_controls28.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ImportGlyph, { className: "size-4" }), disabled: busy || !organizationId || limitError !== null, onClick: () => void flow.begin(organizationId), children: busy ? "Opening\u2026" : "Choose file" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Row, { label: "Interrupted", hint: "Finish or clear an earlier import", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_controls28.Button, { variant: "quiet", disabled: busy, onClick: () => void flow.recover(), children: "Recover" }) })
+    screen.kind === "idle" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(VaultSection, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VaultRow, { label: "Save to", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_controls28.Select, { value: organizationId, options, "aria-label": "Save to", disabled: busy, onValueChange: setOrganizationId }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VaultRow, { label: "File", hint: limits ? `Up to ${plural2(limits.maxItems, "passkey")}` : "A passkey exchange file", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_controls28.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ImportGlyph, { className: "size-4" }), disabled: busy || !organizationId || limitError !== null, onClick: () => void flow.begin(organizationId), children: busy ? "Opening\u2026" : "Choose file" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VaultRow, { label: "Interrupted", hint: "Finish or clear an earlier import", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_controls28.Button, { variant: "quiet", disabled: busy, onClick: () => void flow.recover(), children: "Recover" }) })
     ] }) : null,
-    preview ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Section, { title: `${ready} of ${preview.total} ready`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    preview ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VaultSection, { title: `${ready} of ${preview.total} ready`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Windowed,
       {
         items: preview.slots,
-        render: (slot) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Row, { label: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_controls28.Badge, { tone: TONE[slot.disposition], children: dispositionLabel(slot.disposition) }), hint: void 0, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "block truncate text-foreground", title: slot.reason ?? void 0, children: slot.title ?? "Unnamed passkey" }) }, slot.slot_id)
+        render: (slot) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VaultRow, { label: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_controls28.Badge, { tone: TONE[slot.disposition], children: dispositionLabel(slot.disposition) }), hint: void 0, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "block truncate text-foreground", title: slot.reason ?? void 0, children: slot.title ?? "Unnamed passkey" }) }, slot.slot_id)
       }
     ) }) : null,
-    status && !preview ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Section, { title: `${accounted(status)} of ${status.total} done`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Row, { label: "Imported", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-foreground", children: status.committed }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Row, { label: "Already there", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-foreground", children: status.already_present }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Row, { label: "Can't import", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-foreground", children: status.unsupported }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Row, { label: "Failed", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: status.failed > 0 ? "text-destructive" : "text-foreground", children: status.failed }) }),
-      status.uncertain > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Row, { label: "Needs recovery", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-foreground", children: status.uncertain }) }) : null,
-      status.not_attempted > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Row, { label: "Not tried", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-foreground", children: status.not_attempted }) }) : null
+    status && !preview ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(VaultSection, { title: `${accounted(status)} of ${status.total} done`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VaultRow, { label: "Imported", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-foreground", children: status.committed }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VaultRow, { label: "Already there", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-foreground", children: status.already_present }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VaultRow, { label: "Can't import", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-foreground", children: status.unsupported }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VaultRow, { label: "Failed", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: status.failed > 0 ? "text-destructive" : "text-foreground", children: status.failed }) }),
+      status.uncertain > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VaultRow, { label: "Needs recovery", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-foreground", children: status.uncertain }) }) : null,
+      status.not_attempted > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VaultRow, { label: "Not tried", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-foreground", children: status.not_attempted }) }) : null
     ] }) : null,
     screen.message ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { role: "status", className: "px-1 text-sm text-muted-foreground", children: screen.message }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ErrorLine, { message: limitError })
@@ -7260,6 +7234,7 @@ function Importer({ bridge, readLimits, activeOrganizationId, organizations, onC
 var import_react39 = require("react");
 var import_design_system23 = require("@ai-matrx/design-system");
 var import_controls32 = require("@ai-matrx/design-system/controls");
+var import_icons14 = require("@ai-matrx/design-system/icons");
 
 // src/extension/CaptureCard.tsx
 var import_react36 = require("react");
@@ -7402,6 +7377,7 @@ function FillSetupCard({ fillSetup }) {
 var import_react38 = require("react");
 var import_design_system22 = require("@ai-matrx/design-system");
 var import_controls31 = require("@ai-matrx/design-system/controls");
+var import_icons13 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var HOLD_MS = 6e4;
 function PageGenerator({ fields }) {
@@ -7455,11 +7431,11 @@ function PageGenerator({ fields }) {
   const value = held.value;
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      Row,
+      VaultRow,
       {
         label: "New password",
         actions: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-          value ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_controls31.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CopyGlyph, {}), "aria-label": "Copy password", onClick: () => void copy(value, "Password") }) : null,
+          value ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_controls31.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons13.CopyIcon, {}), "aria-label": "Copy password", onClick: () => void copy(value, "Password") }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_design_system22.Popover, { open, onOpenChange: setOpen, children: [
             /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system22.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_controls31.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(KeyGlyph, {}), disabled: busy, children: "Generate" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system22.PopoverContent, { sizing: "content", align: "end", children: open ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PasswordGenerator, { limits, useLabel: "Fill page", onUse: (v) => void onUse(v) }) : null })
@@ -7468,7 +7444,7 @@ function PageGenerator({ fields }) {
         children: said ? /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)("span", { className: "text-xs text-muted-foreground", children: "Choose the boxes to fill." }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-xs text-disabled-foreground", children: "Fills the page\u2019s new-password box" })
       }
     ),
-    value && targets.length > 0 ? targets.map((t) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Row, { label: t.topFrame ? "This page" : "In a frame", actions: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_controls31.Button, { variant: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckGlyph, {}), disabled: busy, onClick: () => void put(t.id, value), children: "Fill" }), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "block truncate text-sm", children: targetLabel(t) }) }, t.id)) : null
+    value && targets.length > 0 ? targets.map((t) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(VaultRow, { label: t.topFrame ? "This page" : "In a frame", actions: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_controls31.Button, { variant: "primary", icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckGlyph, {}), disabled: busy, onClick: () => void put(t.id, value), children: "Fill" }), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "block truncate text-sm", children: targetLabel(t) }) }, t.id)) : null
   ] });
 }
 
@@ -7530,7 +7506,7 @@ function PageView({ port, page, fill, capture, fillSetup, newPasswordFields, ite
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex h-full min-h-0 flex-col overflow-y-auto bg-background text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-3 px-3 pb-4 pt-3", children: [
     header,
     /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex min-h-7 items-center gap-2 px-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system23.SiteIcon, { site: page.url, fallback: GlobeGlyph, className: "size-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system23.SiteIcon, { site: page.url, fallback: import_icons14.GlobeIcon, className: "size-4" }),
       /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)(import_controls32.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RefreshGlyph, {}), "aria-label": "Check again", onClick: page.refresh }) : null,
       onBrowse ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_controls32.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ListGlyph, {}), onClick: onBrowse, children: "All items" }) : null
@@ -7538,7 +7514,7 @@ function PageView({ port, page, fill, capture, fillSetup, newPasswordFields, ite
     fillSetup ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FillSetupCard, { fillSetup }) : null,
     capture ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CaptureCard, { capture, onChanged }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-      Section,
+      VaultSection,
       {
         title: "This site",
         actions: canSave ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_controls32.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PlusGlyph, {}), onClick: () => onNewForPage(normalizeLoginUrl2(page.url) ?? page.url), children: "Save a login" }) : null,
@@ -7546,7 +7522,7 @@ function PageView({ port, page, fill, capture, fillSetup, newPasswordFields, ite
       }
     ),
     said ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Outcome, { said, onDismiss: () => setSaid(null) }) : page.blocked && page.url && state.status === "ready" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "px-1 text-xs text-muted-foreground", children: BLOCK_WORDS[page.blocked] }) : null,
-    newPasswordFields && canSave ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Section, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PageGenerator, { fields: newPasswordFields }) }) : null
+    newPasswordFields && canSave ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(VaultSection, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PageGenerator, { fields: newPasswordFields }) }) : null
   ] }) });
 }
 function Outcome({ said, onDismiss }) {
@@ -7608,6 +7584,7 @@ function MatchRow({ itemId, item, tag, family, port, busy, running, onOpen, onFi
 var import_react40 = require("react");
 var import_design_system24 = 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_jsx_runtime38 = require("react/jsx-runtime");
 function vaultChoices(items, organizations, current) {
   const n = (f) => items.filter(f).length;
@@ -7623,7 +7600,7 @@ function vaultChoices(items, organizations, current) {
 function VaultSelect({ value, choices, onChange }) {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_controls33.Select, { value, onValueChange: onChange, "aria-label": "Vault", options: choices.map((c) => ({ value: c.value, label: c.label, meta: String(c.count) })) });
 }
-var CATEGORY_GLYPHS = { logins: GlobeGlyph, passkeys: ShieldGlyph, api: KeyGlyph, oauth: PlugGlyph, infra: DatabaseGlyph, env: TerminalGlyph, files: FileGlyph, other: NoteGlyph };
+var CATEGORY_GLYPHS = { logins: import_icons15.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 itemCategory(item, definitions) {
   return categoryOf(item.definitionKey, familyOf(item.definitionKey, definitions));
@@ -7688,7 +7665,7 @@ function Group({ title, children }) {
     children
   ] });
 }
-function Sidebar({ vault, choices, onVault, view, allCount, deletedCount, views, hasFavorites, hasRecents, onView, onPanel, nativeProvider, hasNativeImport = false, hasPage = false }) {
+function VaultSidebar({ vault, choices, onVault, view, allCount, deletedCount, views, hasFavorites, hasRecents, onView, onPanel, nativeProvider, hasNativeImport = false, hasPage = false }) {
   const [tagsOpen, setTagsOpen] = (0, import_react40.useState)(view.startsWith("tag:"));
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("nav", { "aria-label": "Vault", className: "flex h-full min-h-0 flex-col border-r border-sidebar-border bg-sidebar-background text-sidebar-foreground", children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2 px-3 pb-2 pt-3", children: [
@@ -7697,7 +7674,7 @@ function Sidebar({ vault, choices, onVault, view, allCount, deletedCount, views,
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
-        hasPage ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Entry, { on: view === "page", glyph: GlobeGlyph, label: "This page", onClick: () => onView("page") }) : null,
+        hasPage ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Entry, { on: view === "page", glyph: import_icons15.GlobeIcon, label: "This page", onClick: () => onView("page") }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Entry, { on: view === "all", glyph: GridGlyph, label: "All items", count: allCount, onClick: () => onView("all") }),
         hasFavorites ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Entry, { on: view === "favorites", glyph: StarGlyph, label: "Favorites", count: views.favorites, onClick: () => onView("favorites") }) : null,
         hasRecents ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Entry, { on: view === "recent", glyph: ClockGlyph, label: "Recently opened", count: views.recent, onClick: () => onView("recent") }) : null,
@@ -7737,7 +7714,7 @@ var NO_HOST = {};
 var ITEM_PANELS = {
   share: SharePanel,
   move: MovePanel,
-  history: HistoryPanel,
+  history: ItemHistoryPanel,
   activity: ActivityPanel,
   settings: ItemSettingsPanel,
   field: FieldSettingsPanel,
@@ -8128,7 +8105,7 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
     ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: `grid min-h-0 w-full flex-1 ${grid} overflow-hidden`, children: [
       mode === "full" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-        Sidebar,
+        VaultSidebar,
         {
           vault: loc.vault,
           choices,