@ai-matrx/vault 0.1.8 → 0.1.10

package/dist/index.js

@@ -102,7 +102,7 @@ var init_keepass_xml_worker_client = __esm({
 
 // src/VaultApp.tsx
 import { useCallback as useCallback5, useEffect as useEffect23, useMemo as useMemo6, useRef as useRef19, useState as useState40 } from "react";
-import { DropdownMenu as DropdownMenu6, DropdownMenuContent as DropdownMenuContent6, DropdownMenuItem as DropdownMenuItem5, DropdownMenuTrigger as DropdownMenuTrigger6 } from "@ai-matrx/design-system";
+import { DropdownMenu as DropdownMenu6, DropdownMenuContent as DropdownMenuContent6, DropdownMenuItem as DropdownMenuItem5, DropdownMenuTrigger as DropdownMenuTrigger6, LookScope } from "@ai-matrx/design-system";
 import { Button as Button33, SearchField as SearchField4, Select as Select11 } from "@ai-matrx/design-system/controls";
 import { confirm as confirm13 } from "@ai-matrx/kit/confirm-opener";
 
@@ -164,6 +164,7 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
 import { Button, Field } from "@ai-matrx/design-system/controls";
 
 // src/glyphs.tsx
+import { GlobeIcon } from "@ai-matrx/design-system/icons";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function glyph(paths, air = [1, 1]) {
   const style = { "--matrx-glyph-air-l": air[0], "--matrx-glyph-air-r": air[1] };
@@ -175,10 +176,6 @@ var KeyGlyph = glyph(/* @__PURE__ */ jsxs2(Fragment, { children: [
   /* @__PURE__ */ jsx2("circle", { cx: "7.5", cy: "15.5", r: "5.5" }),
   /* @__PURE__ */ jsx2("path", { d: "m21 2-9.6 9.6M15.5 7.5l3 3" })
 ] }), [1, 2]);
-var GlobeGlyph = glyph(/* @__PURE__ */ jsxs2(Fragment, { children: [
-  /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10" }),
-  /* @__PURE__ */ jsx2("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__ */ jsxs2(Fragment, { children: [
   /* @__PURE__ */ jsx2("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
   /* @__PURE__ */ jsx2("path", { d: "M14 2v4a2 2 0 0 0 2 2h4M16 13H8M16 17H8" })
@@ -208,10 +205,6 @@ var FileGlyph = glyph(/* @__PURE__ */ jsxs2(Fragment, { children: [
 var CodeGlyph = glyph(/* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2("path", { d: "m16 18 6-6-6-6M8 6l-6 6 6 6" }) }), [1, 1]);
 var StarGlyph = glyph(/* @__PURE__ */ jsx2("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__ */ jsx2("path", { d: "M12 5v14M5 12h14" }), [4, 4]);
-var CopyGlyph = glyph(/* @__PURE__ */ jsxs2(Fragment, { children: [
-  /* @__PURE__ */ jsx2("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
-  /* @__PURE__ */ jsx2("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__ */ jsxs2(Fragment, { children: [
   /* @__PURE__ */ jsx2("path", { d: "M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z" }),
   /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" })
@@ -236,11 +229,6 @@ var BuildingGlyph = glyph(/* @__PURE__ */ jsxs2(Fragment, { children: [
   /* @__PURE__ */ jsx2("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2" }),
   /* @__PURE__ */ jsx2("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__ */ jsxs2(Fragment, { children: [
-  /* @__PURE__ */ jsx2("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
-  /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "7", r: "4" }),
-  /* @__PURE__ */ jsx2("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__ */ jsx2("path", { d: "m15 18-6-6 6-6" }), [8, 8]);
 var GridGlyph = glyph(/* @__PURE__ */ jsxs2(Fragment, { children: [
   /* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
@@ -259,7 +247,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 GlobeIcon;
   return FAMILY_GLYPHS[family] ?? KeyGlyph;
 }
 var XGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M18 6 6 18M6 6l12 12" }), [5, 5]);
@@ -277,15 +265,7 @@ var MoreGlyph = glyph(/* @__PURE__ */ jsxs2(Fragment, { children: [
   /* @__PURE__ */ jsx2("circle", { cx: "5", cy: "12", r: "1" })
 ] }), [3, 3]);
 var ShareGlyph = glyph(/* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2("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__ */ jsxs2(Fragment, { children: [
-  /* @__PURE__ */ jsx2("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-  /* @__PURE__ */ jsx2("path", { d: "M3 3v5h5M12 7v5l4 2" })
-] }), [2, 2]);
 var ListGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" }), [2, 2]);
-var SettingsGlyph = glyph(/* @__PURE__ */ jsxs2(Fragment, { children: [
-  /* @__PURE__ */ jsx2("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__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" })
-] }), [2, 2]);
 var ImportGlyph = glyph(/* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsx2("path", { d: "m6 9 6 6 6-6" }), [5, 5]);
@@ -326,10 +306,6 @@ var RefreshGlyph = glyph(/* @__PURE__ */ jsxs2(Fragment, { children: [
   /* @__PURE__ */ jsx2("path", { d: "M21 3v5h-5M3 21v-5h5" })
 ] }), [2, 2]);
 var SlidersGlyph = glyph(/* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2("path", { d: "M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6" }) }), [0, 0]);
-var DownloadGlyph = glyph(/* @__PURE__ */ jsxs2(Fragment, { children: [
-  /* @__PURE__ */ jsx2("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-  /* @__PURE__ */ jsx2("path", { d: "m7 10 5 5 5-5M12 15V3" })
-] }), [2, 2]);
 var UploadGlyph = glyph(/* @__PURE__ */ jsxs2(Fragment, { children: [
   /* @__PURE__ */ jsx2("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
   /* @__PURE__ */ jsx2("path", { d: "m17 8-5-5-5 5M12 3v12" })
@@ -411,7 +387,7 @@ var Ctx2 = createContext2((run) => run());
 function useConfirmed() {
   return useContext2(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] = useState2(false);
@@ -481,10 +457,21 @@ function ConfirmIdentityDialog({ open, identity, onDone, onCancel }) {
     ] }),
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-3", children: [
       identity.dev ? /* @__PURE__ */ jsx3(Button, { variant: "primary", disabled: busy, onClick: () => void attempt(() => identity.dev?.() ?? Promise.resolve()), children: "Sign in again (dev)" }) : null,
-      account10?.providers.map((p) => /* @__PURE__ */ jsxs3(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__ */ jsxs3(
+        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__ */ jsxs3("form", { className: "flex gap-2", onSubmit: (e) => {
         e.preventDefault();
         if (password) void attempt(() => identity.withPassword(password));
@@ -511,6 +498,7 @@ function ConfirmIdentityDialog({ open, identity, onDone, onCancel }) {
 import { useEffect as useEffect5, useState as useState5 } from "react";
 import { Badge, Button as Button2, Field as Field2, Textarea } from "@ai-matrx/design-system/controls";
 import { cn as cn3 } from "@ai-matrx/design-system";
+import { CopyIcon } from "@ai-matrx/design-system/icons";
 
 // src/hooks.ts
 import { createContext as createContext3, createElement, useCallback as useCallback2, useContext as useContext3, useEffect as useEffect3, useLayoutEffect, useRef as useRef3, useState as useState3 } from "react";
@@ -560,7 +548,7 @@ function useElementWidth(ref) {
 // src/ui.tsx
 import { createContext as createContext4, useContext as useContext4, useEffect as useEffect4, useState as useState4 } from "react";
 import { Dialog as Dialog2, DialogContent as DialogContent2, DialogFooter, DialogHeader as DialogHeader2, DialogTitle as DialogTitle2 } from "@ai-matrx/design-system";
-import { cn as cn2 } from "@ai-matrx/design-system";
+import { cn as cn2, useLook } from "@ai-matrx/design-system";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var InPanel = createContext4(false);
 var Room = createContext4(null);
@@ -579,14 +567,15 @@ function useRoomOf(ref) {
   return room;
 }
 var RoomProvider = Room.Provider;
-function Section({ title, actions, children, className }) {
+function VaultSection({ title, actions, children, className }) {
   const flat = useContext4(InPanel);
+  const desktop = useLook() === "desktop";
   return /* @__PURE__ */ jsxs4("section", { className: cn2("flex flex-col gap-1.5", className), children: [
     title || actions ? /* @__PURE__ */ jsxs4("div", { className: "flex min-h-7 items-center justify-between gap-2 px-1", children: [
-      title ? /* @__PURE__ */ jsx4("h3", { className: "text-xs font-medium text-muted-foreground", children: title }) : /* @__PURE__ */ jsx4("span", {}),
+      title ? /* @__PURE__ */ jsx4("h3", { className: desktop ? "text-sm font-semibold text-foreground" : "text-xs font-medium text-muted-foreground", children: title }) : /* @__PURE__ */ jsx4("span", {}),
       actions ? /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-1", children: actions }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx4("div", { className: flat ? "-mx-3 flex flex-col sm:-mx-4" : "flex flex-col rounded-xl border border-border bg-card py-1", children })
+    /* @__PURE__ */ jsx4("div", { className: flat ? "-mx-3 flex flex-col sm:-mx-4" : desktop ? "flex flex-col divide-y divide-border rounded-xl bg-card" : "flex flex-col rounded-xl border border-border bg-card py-1", children })
   ] });
 }
 var ROW_GRID = {
@@ -594,7 +583,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 = useContext4(Room);
   return /* @__PURE__ */ jsxs4("div", { className: cn2("grid min-h-11 py-1", ROW_GRID[room ?? "viewport"], top ? "items-start" : "items-center", className), children: [
     /* @__PURE__ */ jsxs4("div", { className: cn2("flex min-w-0 flex-col text-xs leading-tight text-muted-foreground", top && "pt-2.5"), children: [
@@ -615,11 +604,6 @@ function Panel({ title, open = true, onClose, children, footer, size = "lg" }) {
     footer ? /* @__PURE__ */ jsx4(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
@@ -678,14 +662,14 @@ function SecretRow({ port, item, field, extra }) {
   const multiline = field.kind === "multiline";
   const shown = visible ? plain : secret.value;
   return /* @__PURE__ */ jsx5(
-    Row,
+    VaultRow,
     {
       label: field.label,
       top: multiline && shown !== null,
       actions: /* @__PURE__ */ jsxs5(Fragment2, { children: [
         extra,
         canSee && !visible ? /* @__PURE__ */ jsx5(Button2, { variant: "quiet", icon: secret.value !== null ? /* @__PURE__ */ jsx5(EyeOffGlyph, {}) : /* @__PURE__ */ jsx5(EyeGlyph, {}), "aria-label": secret.value !== null ? `Hide ${field.label}` : `Show ${field.label}`, disabled: busy, onClick: () => void toggle2() }) : null,
-        canSee ? /* @__PURE__ */ jsx5(Button2, { variant: "quiet", icon: /* @__PURE__ */ jsx5(CopyGlyph, {}), "aria-label": `Copy ${field.label}`, disabled: busy, onClick: () => void copy() }) : null
+        canSee ? /* @__PURE__ */ jsx5(Button2, { variant: "quiet", icon: /* @__PURE__ */ jsx5(CopyIcon, {}), "aria-label": `Copy ${field.label}`, disabled: busy, onClick: () => void copy() }) : null
       ] }),
       children: sealed ? /* @__PURE__ */ jsx5(Badge, { icon: /* @__PURE__ */ jsx5(LockGlyph, {}), children: "Sealed" }) : off ? /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground", children: "Turned off" }) : error ? /* @__PURE__ */ jsx5("span", { className: "truncate text-destructive", title: error, children: error }) : shown !== null ? visible ? /* @__PURE__ */ jsx5("span", { className: cn3("block", multiline ? "whitespace-pre-wrap break-words" : "truncate"), children: shown || "\u2014" }) : /* @__PURE__ */ jsx5(SecretText, { value: shown, multiline }) : /* @__PURE__ */ jsx5("span", { className: cn3("block truncate text-muted-foreground", !visible && "tracking-widest"), children: visible ? "\u2026" : MASK })
     }
@@ -695,7 +679,7 @@ function PlainRow({ label, value, hint, openUrl, extra, multiline = false }) {
   const copyValue2 = useCopy();
   const isUrl = /^https?:\/\//i.test(value);
   return /* @__PURE__ */ jsx5(
-    Row,
+    VaultRow,
     {
       label,
       hint,
@@ -703,7 +687,7 @@ function PlainRow({ label, value, hint, openUrl, extra, multiline = false }) {
       actions: /* @__PURE__ */ jsxs5(Fragment2, { children: [
         extra,
         isUrl && openUrl ? /* @__PURE__ */ jsx5(Button2, { variant: "quiet", icon: /* @__PURE__ */ jsx5(ExternalGlyph, {}), "aria-label": `Open ${value}`, onClick: () => openUrl(value) }) : null,
-        /* @__PURE__ */ jsx5(Button2, { variant: "quiet", icon: /* @__PURE__ */ jsx5(CopyGlyph, {}), "aria-label": `Copy ${typeof label === "string" ? label : "value"}`, onClick: () => void copyValue2(value, typeof label === "string" && label ? label : "Value", { secret: false }) })
+        /* @__PURE__ */ jsx5(Button2, { variant: "quiet", icon: /* @__PURE__ */ jsx5(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.
@@ -726,12 +710,12 @@ function PlainRow({ label, value, hint, openUrl, extra, multiline = false }) {
   );
 }
 function AddRow({ label, onAdd, children = "Add" }) {
-  return /* @__PURE__ */ jsx5(Row, { label, children: onAdd ? /* @__PURE__ */ jsx5("button", { type: "button", className: "text-sm text-muted-foreground hover:text-primary", onClick: onAdd, children }) : /* @__PURE__ */ jsx5("span", { className: "text-disabled-foreground", children: "\u2014" }) });
+  return /* @__PURE__ */ jsx5(VaultRow, { label, children: onAdd ? /* @__PURE__ */ jsx5("button", { type: "button", className: "text-sm text-muted-foreground hover:text-primary", onClick: onAdd, children }) : /* @__PURE__ */ jsx5("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] = useState5(false);
   return /* @__PURE__ */ jsx5(
-    Row,
+    VaultRow,
     {
       label,
       hint,
@@ -748,7 +732,7 @@ function EditRow({ label, hint, value, onChange, placeholder, secret = false, mu
 function CustomEditRow({ label, value, onLabel, onValue, secret, onRemove }) {
   const [shown, setShown] = useState5(false);
   return /* @__PURE__ */ jsx5(
-    Row,
+    VaultRow,
     {
       label: /* @__PURE__ */ jsx5(Field2, { className: "w-full", value: label, onChange: (e) => onLabel(e.target.value), placeholder: "Name", "aria-label": "Field name" }),
       actions: /* @__PURE__ */ jsxs5(Fragment2, { children: [
@@ -761,6 +745,7 @@ function CustomEditRow({ label, value, onLabel, onValue, secret, onRemove }) {
 }
 
 // src/activity/HistoryPanel.tsx
+import { CopyIcon as CopyIcon2 } from "@ai-matrx/design-system/icons";
 import { formatAbsoluteDate as formatAbsoluteDate2 } from "@ai-matrx/kit/format";
 
 // src/activity/logic.ts
@@ -1253,7 +1238,7 @@ function ActivityPanel({ item, port, onClose }) {
       footer: hasMore ? /* @__PURE__ */ jsx6(Button3, { variant: "outline", disabled: loading, onClick: () => setLimit((n) => Math.min(MAX, n * 2)), children: loading ? "Loading\u2026" : "Show more" }) : void 0,
       children: [
         error ? /* @__PURE__ */ jsx6("p", { role: "alert", className: "px-1 text-sm text-destructive", children: error }) : null,
-        entries === null ? loading ? /* @__PURE__ */ jsx6(Empty, { children: "Reading activity\u2026" }) : null : entries.length === 0 ? /* @__PURE__ */ jsx6(Empty, { children: "Nothing has happened yet." }) : groupByDay(entries, now).map((day) => /* @__PURE__ */ jsx6(Section, { title: day.label, children: collapseRuns(
+        entries === null ? loading ? /* @__PURE__ */ jsx6(Empty, { children: "Reading activity\u2026" }) : null : entries.length === 0 ? /* @__PURE__ */ jsx6(Empty, { children: "Nothing has happened yet." }) : groupByDay(entries, now).map((day) => /* @__PURE__ */ jsx6(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 }) => {
@@ -1276,7 +1261,7 @@ function ActivityPanel({ item, port, onClose }) {
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "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] = useState7(null);
   const [loading, setLoading] = useState7(eligible);
@@ -1338,7 +1323,7 @@ function HistoryPanel({ item, port, arg, onClose, onChanged }) {
         error ? /* @__PURE__ */ jsx7("p", { role: "alert", className: "px-1 text-sm text-destructive", children: error }) : null,
         notice ? /* @__PURE__ */ jsx7("p", { role: "status", className: "px-1 text-sm text-success", children: notice }) : null,
         page && groups.length === 0 ? /* @__PURE__ */ jsx7(Empty, { children: "No earlier values yet." }) : null,
-        page ? groups.map((g) => /* @__PURE__ */ jsx7(Section, { title: g.label, children: g.entries.map((entry) => /* @__PURE__ */ jsx7(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__ */ jsx7(VaultSection, { title: g.label, children: g.entries.map((entry) => /* @__PURE__ */ jsx7(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__ */ jsxs7("div", { className: "flex flex-wrap gap-x-3 gap-y-1 px-1 text-xs", children: [
           page.captureStartedAt ? /* @__PURE__ */ jsxs7("span", { className: "text-muted-foreground", children: [
             "Kept since ",
@@ -1399,12 +1384,12 @@ function HistoryRow({ item, port, page, entry, label, onRestored, onConflict, on
     }
   }
   return /* @__PURE__ */ jsx7(
-    Row,
+    VaultRow,
     {
       label: when,
       actions: entry.available ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
         /* @__PURE__ */ jsx7(Button4, { variant: "quiet", icon: secret.value !== null ? /* @__PURE__ */ jsx7(EyeOffGlyph, {}) : /* @__PURE__ */ jsx7(EyeGlyph, {}), "aria-label": secret.value !== null ? "Hide" : "Show", disabled: busy, onClick: () => void toggle2() }),
-        /* @__PURE__ */ jsx7(Button4, { variant: "quiet", icon: /* @__PURE__ */ jsx7(CopyGlyph, {}), "aria-label": "Copy", disabled: busy, onClick: () => void copy() }),
+        /* @__PURE__ */ jsx7(Button4, { variant: "quiet", icon: /* @__PURE__ */ jsx7(CopyIcon2, {}), "aria-label": "Copy", disabled: busy, onClick: () => void copy() }),
         canRestore(page, entry) ? /* @__PURE__ */ jsx7(Button4, { variant: "quiet", icon: /* @__PURE__ */ jsx7(RestoreGlyph, {}), "aria-label": "Restore", disabled: busy, onClick: () => void restore() }) : null
       ] }) : null,
       children: !entry.available ? /* @__PURE__ */ jsx7(Badge2, { children: "Not kept" }) : secret.value !== null ? /* @__PURE__ */ jsx7(SecretText, { value: secret.value, multiline: false }) : /* @__PURE__ */ jsx7("span", { className: "block truncate tracking-widest text-muted-foreground", children: MASK2 })
@@ -1416,6 +1401,7 @@ function HistoryRow({ item, port, page, entry, label, onRestored, onConflict, on
 import { useEffect as useEffect11, useState as useState13 } from "react";
 import { Button as Button9 } from "@ai-matrx/design-system/controls";
 import { cn as cn6, DropdownMenu as DropdownMenu2, DropdownMenuContent as DropdownMenuContent2, DropdownMenuItem as DropdownMenuItem2, DropdownMenuSeparator as DropdownMenuSeparator2, DropdownMenuTrigger as DropdownMenuTrigger2, TextInputDialog } from "@ai-matrx/design-system";
+import { CopyIcon as CopyIcon4 } from "@ai-matrx/design-system/icons";
 
 // src/authenticator/AddOtpPanel.tsx
 import { useState as useState12 } from "react";
@@ -1425,8 +1411,11 @@ import { Button as Button8, Field as Field4, Select as Select2 } from "@ai-matrx
 import { useEffect as useEffect8, useRef as useRef6, useState as useState8 } from "react";
 import { Button as Button5 } from "@ai-matrx/design-system/controls";
 import { cn as cn5 } from "@ai-matrx/design-system";
+import { CopyIcon as CopyIcon3 } from "@ai-matrx/design-system/icons";
+import { groupCode as groupCode2 } from "@ai-matrx/kit/format";
 
 // src/authenticator/otpauth.ts
+import { groupCode } from "@ai-matrx/kit/format";
 var TOTP_DEFAULT_DIGITS = 6;
 var TOTP_DEFAULT_PERIOD = 30;
 var TOTP_DEFAULT_ALGORITHM = "SHA1";
@@ -1494,12 +1483,6 @@ 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)));
 }
@@ -1577,7 +1560,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 ? groupCode2(live.code) : maskedCode(digits);
   return /* @__PURE__ */ jsxs8(
     "button",
     {
@@ -1596,7 +1579,7 @@ function CodeButton({ live, digits, size = "md", label }) {
 }
 function CopyCodeButton({ live, label }) {
   const { copied, copy } = useCopied();
-  return /* @__PURE__ */ jsx8(Button5, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx8(CheckGlyph, {}) : /* @__PURE__ */ jsx8(CopyGlyph, {}), ...copied ? { glyphTone: "success" } : {}, "aria-label": `Copy ${label} code`, disabled: !live.code, onClick: () => live.code && void copy(live.code) });
+  return /* @__PURE__ */ jsx8(Button5, { variant: "quiet", icon: copied ? /* @__PURE__ */ jsx8(CheckGlyph, {}) : /* @__PURE__ */ jsx8(CopyIcon3, {}), ...copied ? { glyphTone: "success" } : {}, "aria-label": `Copy ${label} code`, disabled: !live.code, onClick: () => live.code && void copy(live.code) });
 }
 
 // src/authenticator/live-code.ts
@@ -1868,7 +1851,7 @@ function OtpSetupRow({ value, onChange, label = "One-time password", placeholder
       className: dragging ? "rounded-lg bg-accent" : void 0,
       children: [
         /* @__PURE__ */ jsxs9(
-          Row,
+          VaultRow,
           {
             label,
             actions: /* @__PURE__ */ jsxs9(Fragment4, { children: [
@@ -2018,7 +2001,7 @@ function TotpRow({ port, item, onChanged }) {
     ] })
   ] }) : null;
   return /* @__PURE__ */ jsx10(
-    Row,
+    VaultRow,
     {
       label: "One-time password",
       actions: /* @__PURE__ */ jsxs10(Fragment5, { children: [
@@ -2077,7 +2060,7 @@ function TwoFactorMethodRow({ port, item, onChanged }) {
   const [busy, setBusy] = useState11(false);
   const [error, setError] = useState11(null);
   const canEdit = item.capabilities.canEdit || item.capabilities.canManage;
-  return /* @__PURE__ */ jsx10(Row, { label: "Two-factor", hint: error ? /* @__PURE__ */ jsx10("span", { className: "text-destructive", children: error }) : void 0, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx10(VaultRow, { label: "Two-factor", hint: error ? /* @__PURE__ */ jsx10("span", { className: "text-destructive", children: error }) : void 0, children: /* @__PURE__ */ jsx10(
     Select,
     {
       value: value ?? "none",
@@ -2192,7 +2175,7 @@ function AddOtpPanel({ port, items, definitions, itemId = null, onClose, onChang
         /* @__PURE__ */ jsx11(Button8, { variant: "primary", disabled: !ready, onClick: () => void save(), children: busy ? "Adding\u2026" : "Add" })
       ] }),
       children: [
-        /* @__PURE__ */ jsxs11(Section, { children: [
+        /* @__PURE__ */ jsxs11(VaultSection, { children: [
           /* @__PURE__ */ jsx11(
             OtpSetupRow,
             {
@@ -2214,7 +2197,7 @@ function AddOtpPanel({ port, items, definitions, itemId = null, onClose, onChang
               status: image ? `QR image ready \xB7 ${image.name}` : null
             }
           ),
-          /* @__PURE__ */ jsx11(Row, { label: "Add to", children: /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx11(VaultRow, { label: "Add to", children: /* @__PURE__ */ jsx11(
             Select2,
             {
               value: target,
@@ -2228,7 +2211,7 @@ function AddOtpPanel({ port, items, definitions, itemId = null, onClose, onChang
             }
           ) }),
           isNew ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
-            /* @__PURE__ */ jsx11(Row, { label: "Name", children: /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx11(VaultRow, { label: "Name", children: /* @__PURE__ */ jsx11(
               Field4,
               {
                 className: "w-full",
@@ -2242,7 +2225,7 @@ function AddOtpPanel({ port, items, definitions, itemId = null, onClose, onChang
                 "aria-label": "Name"
               }
             ) }),
-            /* @__PURE__ */ jsx11(Row, { label: "Website", hint: websiteBad ? /* @__PURE__ */ jsx11("span", { className: "text-destructive", children: "Not a web address" }) : void 0, children: /* @__PURE__ */ jsx11(Field4, { 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__ */ jsx11(VaultRow, { label: "Website", hint: websiteBad ? /* @__PURE__ */ jsx11("span", { className: "text-destructive", children: "Not a web address" }) : void 0, children: /* @__PURE__ */ jsx11(Field4, { 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__ */ jsx11("p", { className: "px-1 text-sm text-destructive", role: "alert", children: error }) : null
@@ -2310,7 +2293,7 @@ function AuthenticatorView({ port, items, definitions, query, onOpen, onChanged,
       /* @__PURE__ */ jsx12("span", { className: "flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx12(ShieldGlyph, { className: "size-6" }) }),
       /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium text-foreground", children: "No one-time passwords yet" }),
       /* @__PURE__ */ jsx12(Button9, { variant: "primary", icon: /* @__PURE__ */ jsx12(PlusGlyph, {}), onClick: () => setAdding(true), children: "Add one-time password" })
-    ] }) : groups.length === 0 ? /* @__PURE__ */ jsx12("div", { className: "px-4 py-10 text-center text-sm text-muted-foreground", children: "Nothing matches." }) : /* @__PURE__ */ jsx12("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-6 pt-1 sm:px-4", children: /* @__PURE__ */ jsx12("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-5", children: groups.map((g) => /* @__PURE__ */ jsx12(Section, { ...groups.length > 1 ? { title: g.label } : {}, className: "[&>div]:px-1", children: g.items.map((item) => /* @__PURE__ */ jsx12(
+    ] }) : groups.length === 0 ? /* @__PURE__ */ jsx12("div", { className: "px-4 py-10 text-center text-sm text-muted-foreground", children: "Nothing matches." }) : /* @__PURE__ */ jsx12("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-6 pt-1 sm:px-4", children: /* @__PURE__ */ jsx12("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-5", children: groups.map((g) => /* @__PURE__ */ jsx12(VaultSection, { ...groups.length > 1 ? { title: g.label } : {}, className: "[&>div]:px-1", children: g.items.map((item) => /* @__PURE__ */ jsx12(
       OtpListRow,
       {
         port,
@@ -2404,7 +2387,7 @@ function OtpListRow({ port, item, family, entry, onOpen, onRename, onChanged, on
           "Open login"
         ] }),
         live.code ? /* @__PURE__ */ jsxs12(DropdownMenuItem2, { onSelect: () => live.code && void copy(live.code), children: [
-          /* @__PURE__ */ jsx12(CopyGlyph, { className: "size-4" }),
+          /* @__PURE__ */ jsx12(CopyIcon4, { className: "size-4" }),
           "Copy code"
         ] }) : null,
         canManage ? /* @__PURE__ */ jsxs12(Fragment7, { children: [
@@ -2431,6 +2414,7 @@ function OtpListRow({ port, item, family, entry, onOpen, onRename, onChanged, on
 import { useRef as useRef9, useState as useState14 } from "react";
 import { Badge as Badge3, Button as Button10, DisclosureHeader, Field as Field5, SegmentedControl, Select as Select3, Switch } from "@ai-matrx/design-system/controls";
 import { confirm as confirm3 } from "@ai-matrx/kit/confirm-opener";
+import { GlobeIcon as GlobeIcon2 } from "@ai-matrx/design-system/icons";
 
 // src/fields/rules.ts
 var ENV_KEY_RE = /^[A-Za-z_][A-Za-z0-9_]*$/;
@@ -2580,7 +2564,7 @@ function FieldSettings({ item, port, field, onClose, onChanged }) {
   const locked = !canEdit || busy !== null;
   return /* @__PURE__ */ jsxs13(Panel, { title: `${field.label} settings`, size: "md", onClose, footer: /* @__PURE__ */ jsx13(Button10, { variant: "primary", onClick: onClose, children: "Done" }), children: [
     !canEdit ? /* @__PURE__ */ jsx13("p", { className: "px-1 text-sm text-muted-foreground", children: "View only: you can\u2019t change these settings." }) : null,
-    /* @__PURE__ */ jsx13(Section, { title: "Who can see it", children: /* @__PURE__ */ jsx13(Row, { label: "Value", hint: quietHint(handling.hint), children: field.handling === "sealed" ? /* @__PURE__ */ jsx13(Badge3, { icon: /* @__PURE__ */ jsx13(LockGlyph, {}), children: "Sealed for good" }) : /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx13(VaultSection, { title: "Who can see it", children: /* @__PURE__ */ jsx13(VaultRow, { label: "Value", hint: quietHint(handling.hint), children: field.handling === "sealed" ? /* @__PURE__ */ jsx13(Badge3, { icon: /* @__PURE__ */ jsx13(LockGlyph, {}), children: "Sealed for good" }) : /* @__PURE__ */ jsx13(
       SegmentedControl,
       {
         "aria-label": "Who can see it",
@@ -2589,8 +2573,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__ */ jsxs13(Section, { title: "Automation", children: [
-      /* @__PURE__ */ jsx13(Row, { label: "Env key", hint: envProblem ? quietHint(envProblem, "destructive") : quietHint("The name sandboxes and workflows use"), children: /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsxs13(VaultSection, { title: "Automation", children: [
+      /* @__PURE__ */ jsx13(VaultRow, { label: "Env key", hint: envProblem ? quietHint(envProblem, "destructive") : quietHint("The name sandboxes and workflows use"), children: /* @__PURE__ */ jsx13(
         Field5,
         {
           ref: envRef,
@@ -2610,10 +2594,10 @@ function FieldSettings({ item, port, field, onClose, onChanged }) {
           }
         }
       ) }),
-      /* @__PURE__ */ jsx13(Row, { label: "Use in sandbox", hint: blocker && !field.injectIntoSandbox ? quietHint(blocker) : quietHint("Sandboxes get it as an env variable"), children: /* @__PURE__ */ jsx13(Switch, { "aria-label": "Use in sandbox", checked: field.injectIntoSandbox, disabled: locked, onCheckedChange: (v) => void setSandbox(v) }) })
+      /* @__PURE__ */ jsx13(VaultRow, { label: "Use in sandbox", hint: blocker && !field.injectIntoSandbox ? quietHint(blocker) : quietHint("Sandboxes get it as an env variable"), children: /* @__PURE__ */ jsx13(Switch, { "aria-label": "Use in sandbox", checked: field.injectIntoSandbox, disabled: locked, onCheckedChange: (v) => void setSandbox(v) }) })
     ] }),
-    /* @__PURE__ */ jsxs13(Section, { title: "Field", children: [
-      /* @__PURE__ */ jsx13(Row, { label: "Description", children: /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsxs13(VaultSection, { title: "Field", children: [
+      /* @__PURE__ */ jsx13(VaultRow, { label: "Description", children: /* @__PURE__ */ jsx13(
         Field5,
         {
           className: "w-full",
@@ -2629,8 +2613,8 @@ function FieldSettings({ item, port, field, onClose, onChanged }) {
           }
         }
       ) }),
-      /* @__PURE__ */ jsx13(Row, { label: "Editable", hint: quietHint(field.editable ? "The value can be changed" : "The value is locked"), children: /* @__PURE__ */ jsx13(Switch, { "aria-label": "Editable", checked: field.editable, disabled: locked, onCheckedChange: (v) => void update("editable", { editable: v }) }) }),
-      /* @__PURE__ */ jsx13(Row, { label: "Active", hint: quietHint(field.active ? "In use" : "Kept, but nothing uses it"), children: /* @__PURE__ */ jsx13(Switch, { "aria-label": "Active", checked: field.active, disabled: locked, onCheckedChange: (v) => void update("active", { active: v }) }) })
+      /* @__PURE__ */ jsx13(VaultRow, { label: "Editable", hint: quietHint(field.editable ? "The value can be changed" : "The value is locked"), children: /* @__PURE__ */ jsx13(Switch, { "aria-label": "Editable", checked: field.editable, disabled: locked, onCheckedChange: (v) => void update("editable", { editable: v }) }) }),
+      /* @__PURE__ */ jsx13(VaultRow, { label: "Active", hint: quietHint(field.active ? "In use" : "Kept, but nothing uses it"), children: /* @__PURE__ */ jsx13(Switch, { "aria-label": "Active", checked: field.active, disabled: locked, onCheckedChange: (v) => void update("active", { active: v }) }) })
     ] }),
     error ? /* @__PURE__ */ jsx13(Problem, { children: error }) : null
   ] });
@@ -2661,8 +2645,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__ */ jsxs13(Panel, { title: "Item settings", size: "md", onClose, footer: /* @__PURE__ */ jsx13(Button10, { variant: "primary", onClick: onClose, children: "Done" }), children: [
     !canEdit ? /* @__PURE__ */ jsx13("p", { className: "px-1 text-sm text-muted-foreground", children: "View only: you can\u2019t change these settings." }) : null,
-    /* @__PURE__ */ jsxs13(Section, { title: "In the browser", children: [
-      /* @__PURE__ */ jsx13(Row, { label: "Website matching", hint: quietHint(MATCH_WORDS[item.uriMatchMode].hint), children: /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsxs13(VaultSection, { title: "In the browser", children: [
+      /* @__PURE__ */ jsx13(VaultRow, { label: "Website matching", hint: quietHint(MATCH_WORDS[item.uriMatchMode].hint), children: /* @__PURE__ */ jsx13(
         Select3,
         {
           "aria-label": "Website matching",
@@ -2672,13 +2656,13 @@ function ItemSettingsPanel({ item, port, onClose, onChanged, onPanel }) {
           onValueChange: (m) => void save("match", () => port.fields.updateItem(item, { uriMatchMode: m }))
         }
       ) }),
-      /* @__PURE__ */ jsx13(Row, { label: "Fill in browser", hint: quietHint(fillHint), children: /* @__PURE__ */ jsx13(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__ */ jsx13(VaultRow, { label: "Fill in browser", hint: quietHint(fillHint), children: /* @__PURE__ */ jsx13(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__ */ jsx13(
-        Row,
+        VaultRow,
         {
           label: f.label,
           hint: quietHint("Encrypted, so the browser can\u2019t match it"),
-          actions: /* @__PURE__ */ jsx13(Button10, { variant: "outline", icon: /* @__PURE__ */ jsx13(GlobeGlyph, {}), disabled: locked, onClick: () => void promote(f), children: "Use as website" }),
+          actions: /* @__PURE__ */ jsx13(Button10, { variant: "outline", icon: /* @__PURE__ */ jsx13(GlobeIcon2, {}), disabled: locked, onClick: () => void promote(f), children: "Use as website" }),
           children: /* @__PURE__ */ jsx13("span", { className: "text-muted-foreground", children: "Not a website yet" })
         },
         f.id
@@ -2686,8 +2670,8 @@ function ItemSettingsPanel({ item, port, onClose, onChanged, onPanel }) {
     ] }),
     /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-1.5", children: [
       /* @__PURE__ */ jsx13(DisclosureHeader, { open: advanced, title: "Advanced", meta: item.fields.length ? `${item.fields.length} fields` : void 0, onClick: () => setAdvanced((a) => !a) }),
-      advanced ? /* @__PURE__ */ jsx13(Section, { children: item.fields.length === 0 ? /* @__PURE__ */ jsx13(Empty, { children: "No encrypted fields." }) : item.fields.map((f) => /* @__PURE__ */ jsx13(
-        Row,
+      advanced ? /* @__PURE__ */ jsx13(VaultSection, { children: item.fields.length === 0 ? /* @__PURE__ */ jsx13(Empty, { children: "No encrypted fields." }) : item.fields.map((f) => /* @__PURE__ */ jsx13(
+        VaultRow,
         {
           label: f.label,
           actions: /* @__PURE__ */ jsx13(Button10, { variant: "quiet", icon: /* @__PURE__ */ jsx13(SlidersGlyph, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${f.id}`) }),
@@ -2712,6 +2696,7 @@ function ItemSettingsPanel({ item, port, onClose, onChanged, onPanel }) {
 import { createContext as createContext5, useContext as useContext5, useEffect as useEffect12, useRef as useRef10, useState as useState15 } from "react";
 import { Popover, PopoverContent, PopoverTrigger, cn as cn7 } from "@ai-matrx/design-system";
 import { Button as Button11, NumberStepper, SegmentedControl as SegmentedControl2, Select as Select4, Switch as Switch2 } from "@ai-matrx/design-system/controls";
+import { CopyIcon as CopyIcon5 } from "@ai-matrx/design-system/icons";
 
 // src/generator/generate.ts
 import {
@@ -2869,7 +2854,7 @@ function PasswordGenerator({ limits: source, onUse, useLabel = "Use" }) {
       /* @__PURE__ */ jsxs14("div", { className: "flex min-h-7 items-start gap-1", children: [
         /* @__PURE__ */ jsx14("code", { className: cn7("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__ */ jsx14(Button11, { variant: "quiet", icon: revealed ? /* @__PURE__ */ jsx14(EyeOffGlyph, {}) : /* @__PURE__ */ jsx14(EyeGlyph, {}), "aria-label": revealed ? "Hide" : "Reveal", disabled: !candidate, onClick: () => setRevealed((r) => !r) }),
-        /* @__PURE__ */ jsx14(Button11, { variant: "quiet", icon: /* @__PURE__ */ jsx14(CopyGlyph, {}), "aria-label": "Copy", disabled: !candidate, onClick: () => void copy() }),
+        /* @__PURE__ */ jsx14(Button11, { variant: "quiet", icon: /* @__PURE__ */ jsx14(CopyIcon5, {}), "aria-label": "Copy", disabled: !candidate, onClick: () => void copy() }),
         /* @__PURE__ */ jsx14(Button11, { variant: "quiet", icon: /* @__PURE__ */ jsx14(RefreshGlyph, {}), "aria-label": "Generate another", onClick: () => change(settings) })
       ] }),
       strength && candidate ? /* @__PURE__ */ jsxs14("p", { className: "text-xs", children: [
@@ -2996,6 +2981,7 @@ function useLocked(lock) {
 }
 
 // src/io/BackupPanel.tsx
+import { formatFileSize } from "@ai-matrx/kit/format";
 import { useEffect as useEffect13, useRef as useRef11, useState as useState17 } from "react";
 import { Button as Button13, Field as Field6, SegmentedControl as SegmentedControl3, Switch as Switch3 } from "@ai-matrx/design-system/controls";
 import { downloadFile } from "@ai-matrx/kit/download";
@@ -3137,17 +3123,17 @@ function omissionText(o) {
   return `${o.count ?? "Some"} ${what}: ${o.reason.replaceAll("_", " ")}`;
 }
 function Summary({ value }) {
-  return /* @__PURE__ */ jsxs16(Section, { children: [
-    /* @__PURE__ */ jsx16(Row, { label: "Credentials", children: value.record_count }),
-    /* @__PURE__ */ jsx16(Row, { label: "Protected fields", children: value.field_count }),
-    /* @__PURE__ */ jsx16(Row, { label: "Files", children: value.attachment_count > 0 ? `${value.attachment_count} \xB7 ${formatBytes(value.attachment_bytes)}` : "0" })
+  return /* @__PURE__ */ jsxs16(VaultSection, { children: [
+    /* @__PURE__ */ jsx16(VaultRow, { label: "Credentials", children: value.record_count }),
+    /* @__PURE__ */ jsx16(VaultRow, { label: "Protected fields", children: value.field_count }),
+    /* @__PURE__ */ jsx16(VaultRow, { label: "Files", children: value.attachment_count > 0 ? `${value.attachment_count} \xB7 ${formatFileSize(value.attachment_bytes)}` : "0" })
   ] });
 }
 function Omissions({ omissions, accepted, onAccepted, verb }) {
   if (omissions.length === 0) return null;
-  return /* @__PURE__ */ jsxs16(Section, { title: "Left out", children: [
-    omissions.map((o, i) => /* @__PURE__ */ jsx16(Row, { label: o.component.replaceAll("_", " "), children: /* @__PURE__ */ jsx16("span", { className: "block truncate text-muted-foreground", title: omissionText(o), children: omissionText(o) }) }, `${o.component}-${o.source_item_id ?? i}`)),
-    /* @__PURE__ */ jsx16(Row, { label: "Accept", hint: `${verb} without these`, children: /* @__PURE__ */ jsx16(Switch3, { checked: accepted, onCheckedChange: onAccepted, "aria-label": `${verb} without these` }) })
+  return /* @__PURE__ */ jsxs16(VaultSection, { title: "Left out", children: [
+    omissions.map((o, i) => /* @__PURE__ */ jsx16(VaultRow, { label: o.component.replaceAll("_", " "), children: /* @__PURE__ */ jsx16("span", { className: "block truncate text-muted-foreground", title: omissionText(o), children: omissionText(o) }) }, `${o.component}-${o.source_item_id ?? i}`)),
+    /* @__PURE__ */ jsx16(VaultRow, { label: "Accept", hint: `${verb} without these`, children: /* @__PURE__ */ jsx16(Switch3, { checked: accepted, onCheckedChange: onAccepted, "aria-label": `${verb} without these` }) })
   ] });
 }
 function BackupPanel({ port, items, onClose, onChanged }) {
@@ -3282,7 +3268,7 @@ function BackupPanel({ port, items, onClose, onChanged }) {
     ),
     mode === "backup" ? /* @__PURE__ */ jsxs16(Fragment9, { children: [
       /* @__PURE__ */ jsx16(
-        Section,
+        VaultSection,
         {
           title: `${selected.size} of ${plural(items.length, "credential")}`,
           actions: /* @__PURE__ */ jsxs16(Fragment9, { children: [
@@ -3301,13 +3287,13 @@ function BackupPanel({ port, items, onClose, onChanged }) {
       backup ? /* @__PURE__ */ jsxs16(Fragment9, { children: [
         /* @__PURE__ */ jsx16(Summary, { value: backup }),
         /* @__PURE__ */ jsx16(Omissions, { omissions: backup.omissions, accepted, onAccepted: setAccepted, verb: "Back up" }),
-        /* @__PURE__ */ jsxs16(Section, { children: [
-          /* @__PURE__ */ jsx16(Row, { label: "Passphrase", hint: "Not saved. It can't be recovered.", children: /* @__PURE__ */ jsx16(Field6, { type: "password", value: passphrase, autoComplete: "new-password", "aria-label": "Backup passphrase", onChange: (e) => setPassphrase(e.target.value) }) }),
-          /* @__PURE__ */ jsx16(Row, { label: "Repeat", ...mismatch ? { hint: "Doesn't match" } : {}, children: /* @__PURE__ */ jsx16(Field6, { type: "password", value: repeat, autoComplete: "new-password", "aria-label": "Repeat the passphrase", onChange: (e) => setRepeat(e.target.value) }) })
+        /* @__PURE__ */ jsxs16(VaultSection, { children: [
+          /* @__PURE__ */ jsx16(VaultRow, { label: "Passphrase", hint: "Not saved. It can't be recovered.", children: /* @__PURE__ */ jsx16(Field6, { type: "password", value: passphrase, autoComplete: "new-password", "aria-label": "Backup passphrase", onChange: (e) => setPassphrase(e.target.value) }) }),
+          /* @__PURE__ */ jsx16(VaultRow, { label: "Repeat", ...mismatch ? { hint: "Doesn't match" } : {}, children: /* @__PURE__ */ jsx16(Field6, { type: "password", value: repeat, autoComplete: "new-password", "aria-label": "Repeat the passphrase", onChange: (e) => setRepeat(e.target.value) }) })
         ] })
       ] }) : null
-    ] }) : /* @__PURE__ */ jsx16(Fragment9, { children: !restorePreview ? /* @__PURE__ */ jsxs16(Section, { children: [
-      /* @__PURE__ */ jsxs16(Row, { label: "File", ...file ? { hint: file.name } : {}, children: [
+    ] }) : /* @__PURE__ */ jsx16(Fragment9, { children: !restorePreview ? /* @__PURE__ */ jsxs16(VaultSection, { children: [
+      /* @__PURE__ */ jsxs16(VaultRow, { label: "File", ...file ? { hint: file.name } : {}, children: [
         /* @__PURE__ */ jsx16(Button13, { variant: "outline", disabled: busy, onClick: () => fileInput.current?.click(), children: "Choose a backup" }),
         /* @__PURE__ */ jsx16(
           "input",
@@ -3323,11 +3309,11 @@ function BackupPanel({ port, items, onClose, onChanged }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx16(Row, { label: "Passphrase", children: /* @__PURE__ */ jsx16(Field6, { type: "password", value: passphrase, autoComplete: "current-password", "aria-label": "Backup passphrase", onChange: (e) => setPassphrase(e.target.value) }) })
+      /* @__PURE__ */ jsx16(VaultRow, { label: "Passphrase", children: /* @__PURE__ */ jsx16(Field6, { type: "password", value: passphrase, autoComplete: "current-password", "aria-label": "Backup passphrase", onChange: (e) => setPassphrase(e.target.value) }) })
     ] }) : /* @__PURE__ */ jsxs16(Fragment9, { children: [
       /* @__PURE__ */ jsx16(Summary, { value: restorePreview }),
       !result ? /* @__PURE__ */ jsx16(Omissions, { omissions: restorePreview.omissions, accepted, onAccepted: setAccepted, verb: "Restore" }) : null,
-      !result ? /* @__PURE__ */ jsx16("p", { className: "px-1 text-xs text-muted-foreground", children: "Restored items start disabled and restricted." }) : /* @__PURE__ */ jsx16(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__ */ jsx16(Row, { label: names.get(r.source_item_id) ?? "Credential", children: /* @__PURE__ */ jsxs16("span", { className: r.status === "refused" || r.status === "retryable_failure" ? "text-destructive" : "text-foreground", children: [
+      !result ? /* @__PURE__ */ jsx16("p", { className: "px-1 text-xs text-muted-foreground", children: "Restored items start disabled and restricted." }) : /* @__PURE__ */ jsx16(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__ */ jsx16(VaultRow, { label: names.get(r.source_item_id) ?? "Credential", children: /* @__PURE__ */ jsxs16("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)) })
@@ -3432,7 +3418,7 @@ function ExportPanel({ port, items, onClose }) {
         ] })
       ] }),
       children: [
-        /* @__PURE__ */ jsx17(Section, { children: /* @__PURE__ */ jsx17(Row, { label: "Format", hint: format?.hint, children: /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx17(VaultSection, { children: /* @__PURE__ */ jsx17(VaultRow, { label: "Format", hint: format?.hint, children: /* @__PURE__ */ jsx17(
           Select5,
           {
             value: profile,
@@ -3445,7 +3431,7 @@ function ExportPanel({ port, items, onClose }) {
           }
         ) }) }),
         /* @__PURE__ */ jsx17(
-          Section,
+          VaultSection,
           {
             title: `${selected.size} of ${plural(logins.length, "login")}`,
             actions: /* @__PURE__ */ jsxs17(Fragment10, { children: [
@@ -4516,13 +4502,13 @@ function ImportPanel({ port, host, items, organizations, onClose, onChanged, lim
     /* @__PURE__ */ jsx18(Button15, { variant: "primary", onClick: onClose, children: "Done" })
   ] });
   return /* @__PURE__ */ jsxs18(Panel, { title: "Import", size: "xl", onClose, footer, children: [
-    stage === "choose" ? /* @__PURE__ */ jsxs18(Section, { children: [
-      /* @__PURE__ */ jsx18(Row, { label: "Source", actions: help && host.openUrl ? /* @__PURE__ */ jsx18(Button15, { variant: "quiet", onClick: () => host.openUrl?.(help), children: "How to export" }) : void 0, children: /* @__PURE__ */ jsx18(Select6, { value: source, options: SOURCE_OPTIONS, "aria-label": "Source", onValueChange: (s) => {
+    stage === "choose" ? /* @__PURE__ */ jsxs18(VaultSection, { children: [
+      /* @__PURE__ */ jsx18(VaultRow, { label: "Source", actions: help && host.openUrl ? /* @__PURE__ */ jsx18(Button15, { variant: "quiet", onClick: () => host.openUrl?.(help), children: "How to export" }) : void 0, children: /* @__PURE__ */ jsx18(Select6, { value: source, options: SOURCE_OPTIONS, "aria-label": "Source", onValueChange: (s) => {
         setSource(s);
         setError(null);
       } }) }),
-      source === "env" ? /* @__PURE__ */ jsx18(Row, { label: ".env text", hint: "Same key updates in place", top: true, children: /* @__PURE__ */ jsx18(Textarea2, { 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__ */ jsxs18(Row, { label: "File", hint: fileName ?? void 0, children: [
+      source === "env" ? /* @__PURE__ */ jsx18(VaultRow, { label: ".env text", hint: "Same key updates in place", top: true, children: /* @__PURE__ */ jsx18(Textarea2, { 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__ */ jsxs18(VaultRow, { label: "File", hint: fileName ?? void 0, children: [
         /* @__PURE__ */ jsx18(Button15, { variant: "outline", disabled: reading, onClick: () => fileInput.current?.click(), children: reading ? "Reading\u2026" : source === "env" ? "Load a file" : "Choose a file" }),
         /* @__PURE__ */ jsx18(
           "input",
@@ -4539,12 +4525,12 @@ function ImportPanel({ port, host, items, organizations, onClose, onChanged, lim
           }
         )
       ] }),
-      source === "env" ? /* @__PURE__ */ jsx18(Row, { label: "Sandboxes", hint: "Pass these values to agent sandboxes", children: /* @__PURE__ */ jsx18(Switch4, { checked: injectSandbox, onCheckedChange: setInjectSandbox, "aria-label": "Use in sandboxes" }) }) : null
+      source === "env" ? /* @__PURE__ */ jsx18(VaultRow, { label: "Sandboxes", hint: "Pass these values to agent sandboxes", children: /* @__PURE__ */ jsx18(Switch4, { checked: injectSandbox, onCheckedChange: setInjectSandbox, "aria-label": "Use in sandboxes" }) }) : null
     ] }) : null,
     stage === "review" && draft ? /* @__PURE__ */ jsxs18(Fragment11, { children: [
-      organizations.length > 0 ? /* @__PURE__ */ jsx18(Section, { children: /* @__PURE__ */ jsx18(Row, { label: "Save to", children: /* @__PURE__ */ jsx18(Select6, { value: destination, options: destinationOptions, "aria-label": "Save to", onValueChange: (v) => draft.kind === "file" ? restart({ destination: v }) : setDestination(v) }) }) }) : null,
+      organizations.length > 0 ? /* @__PURE__ */ jsx18(VaultSection, { children: /* @__PURE__ */ jsx18(VaultRow, { label: "Save to", children: /* @__PURE__ */ jsx18(Select6, { value: destination, options: destinationOptions, "aria-label": "Save to", onValueChange: (v) => draft.kind === "file" ? restart({ destination: v }) : setDestination(v) }) }) }) : null,
       /* @__PURE__ */ jsx18(
-        Section,
+        VaultSection,
         {
           title: draft.kind === "env" ? plural(envKeys.length, "value") : summary(counts, lines.length),
           actions: /* @__PURE__ */ jsxs18(Fragment11, { children: [
@@ -4572,11 +4558,11 @@ function ImportPanel({ port, host, items, organizations, onClose, onChanged, lim
           )
         }
       ),
-      draft.kind === "file" && draft.parsed.kind === "structured" ? /* @__PURE__ */ jsx18(Section, { children: /* @__PURE__ */ jsx18(Row, { label: "Visible details", hint: "Approve saving websites and public keys in the clear", children: /* @__PURE__ */ jsx18(Switch4, { checked: approvedVisible, disabled: busy, onCheckedChange: setApprovedVisible, "aria-label": "Approve visible details" }) }) }) : null,
+      draft.kind === "file" && draft.parsed.kind === "structured" ? /* @__PURE__ */ jsx18(VaultSection, { children: /* @__PURE__ */ jsx18(VaultRow, { label: "Visible details", hint: "Approve saving websites and public keys in the clear", children: /* @__PURE__ */ jsx18(Switch4, { checked: approvedVisible, disabled: busy, onCheckedChange: setApprovedVisible, "aria-label": "Approve visible details" }) }) }) : null,
       draft.kind === "file" ? /* @__PURE__ */ jsx18(Notices, { draft }) : null,
-      draft.kind === "file" ? /* @__PURE__ */ jsx18(More, { children: /* @__PURE__ */ jsxs18(Section, { children: [
-        /* @__PURE__ */ jsx18(Row, { label: "Browser fill", hint: "Needs username, password and an https address", children: /* @__PURE__ */ jsx18(Switch4, { 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__ */ jsx18(Row, { label: header || `Column ${index + 1}`, children: /* @__PURE__ */ jsx18(
+      draft.kind === "file" ? /* @__PURE__ */ jsx18(More, { children: /* @__PURE__ */ jsxs18(VaultSection, { children: [
+        /* @__PURE__ */ jsx18(VaultRow, { label: "Browser fill", hint: "Needs username, password and an https address", children: /* @__PURE__ */ jsx18(Switch4, { 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__ */ jsx18(VaultRow, { label: header || `Column ${index + 1}`, children: /* @__PURE__ */ jsx18(
           Select6,
           {
             value: draft.mapping[index] ?? "keep",
@@ -4588,16 +4574,16 @@ function ImportPanel({ port, host, items, organizations, onClose, onChanged, lim
       ] }) }) : null,
       ambiguous ? /* @__PURE__ */ jsx18(ErrorLine, { message: "Each of name, username, password, notes and one-time password can be used by one column." }) : null
     ] }) : null,
-    stage === "done" && done ? /* @__PURE__ */ jsxs18(Section, { title: "Result", children: [
-      /* @__PURE__ */ jsx18(Row, { label: "Created", children: /* @__PURE__ */ jsx18("span", { className: "text-foreground", children: done.created.length }) }),
-      /* @__PURE__ */ jsx18(Row, { label: "Skipped", children: /* @__PURE__ */ jsx18("span", { className: "text-foreground", children: done.skipped }) }),
-      /* @__PURE__ */ jsx18(Row, { label: "Failed", children: /* @__PURE__ */ jsx18("span", { className: done.failed.length > 0 ? "text-destructive" : "text-foreground", children: done.failed.length }) }),
-      done.untried.length > 0 ? /* @__PURE__ */ jsx18(Row, { label: "Not tried", children: /* @__PURE__ */ jsx18("span", { className: "text-foreground", children: done.untried.length }) }) : null,
-      done.withOtp > 0 ? /* @__PURE__ */ jsx18(Row, { label: "Codes", children: /* @__PURE__ */ jsxs18("span", { className: "text-muted-foreground", children: [
+    stage === "done" && done ? /* @__PURE__ */ jsxs18(VaultSection, { title: "Result", children: [
+      /* @__PURE__ */ jsx18(VaultRow, { label: "Created", children: /* @__PURE__ */ jsx18("span", { className: "text-foreground", children: done.created.length }) }),
+      /* @__PURE__ */ jsx18(VaultRow, { label: "Skipped", children: /* @__PURE__ */ jsx18("span", { className: "text-foreground", children: done.skipped }) }),
+      /* @__PURE__ */ jsx18(VaultRow, { label: "Failed", children: /* @__PURE__ */ jsx18("span", { className: done.failed.length > 0 ? "text-destructive" : "text-foreground", children: done.failed.length }) }),
+      done.untried.length > 0 ? /* @__PURE__ */ jsx18(VaultRow, { label: "Not tried", children: /* @__PURE__ */ jsx18("span", { className: "text-foreground", children: done.untried.length }) }) : null,
+      done.withOtp > 0 ? /* @__PURE__ */ jsx18(VaultRow, { label: "Codes", children: /* @__PURE__ */ jsxs18("span", { className: "text-muted-foreground", children: [
         plural(done.withOtp, "login"),
         " still need the one-time password added."
       ] }) }) : null,
-      done.failed.map((f) => /* @__PURE__ */ jsx18(Row, { label: f.title, children: /* @__PURE__ */ jsx18("span", { className: "block truncate text-destructive", title: f.reason, children: f.reason }) }, f.key))
+      done.failed.map((f) => /* @__PURE__ */ jsx18(VaultRow, { label: f.title, children: /* @__PURE__ */ jsx18("span", { className: "block truncate text-destructive", title: f.reason, children: f.reason }) }, f.key))
     ] }) : null,
     /* @__PURE__ */ jsx18(ErrorLine, { message: error })
   ] });
@@ -4657,11 +4643,13 @@ import { Badge as Badge7, Button as Button21, CONTROLS_CONTAINER_CLASS, OptionCo
 import { confirm as confirm9 } from "@ai-matrx/kit/confirm-opener";
 
 // src/activity/FilesSection.tsx
+import { formatFileSize as formatFileSize2 } from "@ai-matrx/kit/format";
 import { useRef as useRef13, useState as useState20 } from "react";
 import { Badge as Badge5, Button as Button16, Field as Field7, SegmentedControl as SegmentedControl4 } from "@ai-matrx/design-system/controls";
 import { cn as cn9 } from "@ai-matrx/design-system";
 import { confirm as confirm6 } from "@ai-matrx/kit/confirm-opener";
 import { downloadFile as downloadFile3 } from "@ai-matrx/kit/download";
+import { DownloadIcon } from "@ai-matrx/design-system/icons";
 import { Fragment as Fragment12, jsx as jsx20, jsxs as jsxs19 } from "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.";
@@ -4720,7 +4708,7 @@ function FilesSection({ item, port, editing, onChanged }) {
       onDragLeave: canEdit ? () => setDragging(false) : void 0,
       onDrop: canEdit ? drop : void 0,
       children: /* @__PURE__ */ jsxs19(
-        Section,
+        VaultSection,
         {
           title: "Files",
           actions: canEdit ? /* @__PURE__ */ jsx20(Button16, { variant: "quiet", icon: /* @__PURE__ */ jsx20(PlusGlyph, {}), disabled: busy !== null, onClick: () => picker.current?.click(), children: "Add file" }) : void 0,
@@ -4731,11 +4719,11 @@ function FilesSection({ item, port, editing, onChanged }) {
             } }) : null,
             item.attachments.map(
               (a) => canEdit ? /* @__PURE__ */ jsx20(EditableFile, { port, item, file: a, busy, run, onDownload: () => void download(a), onTooBig: () => setError(TOO_BIG) }, a.id) : /* @__PURE__ */ jsx20(
-                Row,
+                VaultRow,
                 {
                   label: a.label,
                   hint: a.description || void 0,
-                  actions: a.handling === "sealed" ? /* @__PURE__ */ jsx20(Badge5, { icon: /* @__PURE__ */ jsx20(LockGlyph, {}), children: "Sealed" }) : canDownload(item, a) ? /* @__PURE__ */ jsx20(Button16, { variant: "quiet", icon: /* @__PURE__ */ jsx20(DownloadGlyph, {}), "aria-label": `Download ${a.fileName}`, disabled: busy !== null, onClick: () => void download(a) }) : null,
+                  actions: a.handling === "sealed" ? /* @__PURE__ */ jsx20(Badge5, { icon: /* @__PURE__ */ jsx20(LockGlyph, {}), children: "Sealed" }) : canDownload(item, a) ? /* @__PURE__ */ jsx20(Button16, { variant: "quiet", icon: /* @__PURE__ */ jsx20(DownloadIcon, {}), "aria-label": `Download ${a.fileName}`, disabled: busy !== null, onClick: () => void download(a) }) : null,
                   children: /* @__PURE__ */ jsx20(FileName, { file: a })
                 },
                 a.id
@@ -4761,12 +4749,12 @@ function EditableFile({ port, item: it, file: a, busy: b, run: go, onDownload, o
   }
   return /* @__PURE__ */ jsxs19(Fragment12, { children: [
     /* @__PURE__ */ jsx20(
-      Row,
+      VaultRow,
       {
         label: a.label,
         hint: a.description || void 0,
         actions: /* @__PURE__ */ jsxs19(Fragment12, { children: [
-          canDownload(it, a) ? /* @__PURE__ */ jsx20(Button16, { variant: "quiet", icon: /* @__PURE__ */ jsx20(DownloadGlyph, {}), "aria-label": `Download ${a.fileName}`, disabled: b !== null, onClick: onDownload }) : null,
+          canDownload(it, a) ? /* @__PURE__ */ jsx20(Button16, { variant: "quiet", icon: /* @__PURE__ */ jsx20(DownloadIcon, {}), "aria-label": `Download ${a.fileName}`, disabled: b !== null, onClick: onDownload }) : null,
           /* @__PURE__ */ jsx20(Button16, { variant: "quiet", icon: /* @__PURE__ */ jsx20(PencilGlyph, {}), "aria-label": `Edit ${a.label}`, pressed: open, disabled: b !== null, onClick: () => setOpen((o) => !o) }),
           /* @__PURE__ */ jsx20(Button16, { variant: "quiet", icon: /* @__PURE__ */ jsx20(UploadGlyph, {}), "aria-label": `Replace ${a.fileName}`, disabled: b !== null, onClick: () => replacer.current?.click() }),
           /* @__PURE__ */ jsx20(Button16, { variant: "quiet", icon: /* @__PURE__ */ jsx20(TrashGlyph, {}), "aria-label": `Delete ${a.label}`, disabled: b !== null, onClick: () => void remove() }),
@@ -4797,7 +4785,7 @@ function EditableFile({ port, item: it, file: a, busy: b, run: go, onDownload, o
 function FileName({ file }) {
   return /* @__PURE__ */ jsxs19("span", { className: "flex min-w-0 items-center gap-2", children: [
     /* @__PURE__ */ jsx20("span", { className: "truncate", children: file.fileName }),
-    /* @__PURE__ */ jsx20("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatBytes(file.sizeBytes) })
+    /* @__PURE__ */ jsx20("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatFileSize2(file.sizeBytes) })
   ] });
 }
 function Protection({ value, locked, onChange }) {
@@ -4820,13 +4808,13 @@ function NewFile({ file, busy, onAdd, onCancel }) {
     await onAdd({ label: label.trim(), description: description.trim() || null, handling });
   }
   return /* @__PURE__ */ jsxs19(Fragment12, { children: [
-    /* @__PURE__ */ jsx20(Row, { label: "New file", children: /* @__PURE__ */ jsxs19("span", { className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsx20(VaultRow, { label: "New file", children: /* @__PURE__ */ jsxs19("span", { className: "flex min-w-0 items-center gap-2", children: [
       /* @__PURE__ */ jsx20("span", { className: "truncate", children: file.name }),
-      /* @__PURE__ */ jsx20("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatBytes(file.size) })
+      /* @__PURE__ */ jsx20("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatFileSize2(file.size) })
     ] }) }),
-    /* @__PURE__ */ jsx20(Row, { label: "Name", children: /* @__PURE__ */ jsx20(Field7, { "aria-label": "Name", value: label, onChange: (e) => setLabel(e.target.value) }) }),
-    /* @__PURE__ */ jsx20(Row, { label: "Purpose", children: /* @__PURE__ */ jsx20(Field7, { "aria-label": "Purpose", placeholder: "What it is for", value: description, onChange: (e) => setDescription(e.target.value) }) }),
-    /* @__PURE__ */ jsx20(Row, { label: "Protection", children: /* @__PURE__ */ jsx20(Protection, { value: handling, locked: false, onChange: setHandling }) }),
+    /* @__PURE__ */ jsx20(VaultRow, { label: "Name", children: /* @__PURE__ */ jsx20(Field7, { "aria-label": "Name", value: label, onChange: (e) => setLabel(e.target.value) }) }),
+    /* @__PURE__ */ jsx20(VaultRow, { label: "Purpose", children: /* @__PURE__ */ jsx20(Field7, { "aria-label": "Purpose", placeholder: "What it is for", value: description, onChange: (e) => setDescription(e.target.value) }) }),
+    /* @__PURE__ */ jsx20(VaultRow, { label: "Protection", children: /* @__PURE__ */ jsx20(Protection, { value: handling, locked: false, onChange: setHandling }) }),
     /* @__PURE__ */ jsxs19("div", { className: "flex justify-end gap-2 px-3 py-1 sm:px-4", children: [
       /* @__PURE__ */ jsx20(Button16, { variant: "quiet", disabled: busy, onClick: onCancel, children: "Cancel" }),
       /* @__PURE__ */ jsx20(Button16, { variant: "primary", disabled: busy || !label.trim(), onClick: () => void add(), children: busy ? "Adding\u2026" : "Add file" })
@@ -4844,10 +4832,10 @@ function FileDetailsRows({ file, busy, onSave, onCancel }) {
     await onSave({ label: label.trim(), description: description.trim() || null, fileName: fileName.trim(), handling });
   }
   return /* @__PURE__ */ jsxs19(Fragment12, { children: [
-    /* @__PURE__ */ jsx20(Row, { label: "Name", children: /* @__PURE__ */ jsx20(Field7, { "aria-label": "Name", value: label, onChange: (e) => setLabel(e.target.value) }) }),
-    /* @__PURE__ */ jsx20(Row, { label: "Purpose", children: /* @__PURE__ */ jsx20(Field7, { "aria-label": "Purpose", placeholder: "What it is for", value: description, onChange: (e) => setDescription(e.target.value) }) }),
-    /* @__PURE__ */ jsx20(Row, { label: "File name", children: /* @__PURE__ */ jsx20(Field7, { "aria-label": "File name", value: fileName, onChange: (e) => setFileName(e.target.value) }) }),
-    /* @__PURE__ */ jsx20(Row, { label: "Protection", children: /* @__PURE__ */ jsx20(Protection, { value: handling, locked: file.handling === "sealed", onChange: setHandling }) }),
+    /* @__PURE__ */ jsx20(VaultRow, { label: "Name", children: /* @__PURE__ */ jsx20(Field7, { "aria-label": "Name", value: label, onChange: (e) => setLabel(e.target.value) }) }),
+    /* @__PURE__ */ jsx20(VaultRow, { label: "Purpose", children: /* @__PURE__ */ jsx20(Field7, { "aria-label": "Purpose", placeholder: "What it is for", value: description, onChange: (e) => setDescription(e.target.value) }) }),
+    /* @__PURE__ */ jsx20(VaultRow, { label: "File name", children: /* @__PURE__ */ jsx20(Field7, { "aria-label": "File name", value: fileName, onChange: (e) => setFileName(e.target.value) }) }),
+    /* @__PURE__ */ jsx20(VaultRow, { label: "Protection", children: /* @__PURE__ */ jsx20(Protection, { value: handling, locked: file.handling === "sealed", onChange: setHandling }) }),
     /* @__PURE__ */ jsxs19("div", { className: "flex justify-end gap-2 px-3 py-1 sm:px-4", children: [
       /* @__PURE__ */ jsx20(Button16, { variant: "quiet", disabled: busy, onClick: onCancel, children: "Cancel" }),
       /* @__PURE__ */ jsx20(Button16, { variant: "primary", disabled: busy || !changed || !label.trim() || !fileName.trim(), onClick: () => void save(), children: busy ? "Saving\u2026" : "Save" })
@@ -4866,6 +4854,7 @@ function confirmSeal(label) {
 // src/fields/RecoveryCodesRow.tsx
 import { useState as useState21 } from "react";
 import { Badge as Badge6, Button as Button17, Textarea as Textarea3 } from "@ai-matrx/design-system/controls";
+import { CopyIcon as CopyIcon6 } from "@ai-matrx/design-system/icons";
 import { Fragment as Fragment13, jsx as jsx21, jsxs as jsxs20 } from "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;
@@ -4906,7 +4895,7 @@ function RecoveryCodesRow({ item, field, port, onChanged }) {
   };
   if (draft !== null) {
     return /* @__PURE__ */ jsxs20(
-      Row,
+      VaultRow,
       {
         label: "Recovery codes",
         top: true,
@@ -4926,7 +4915,7 @@ function RecoveryCodesRow({ item, field, port, onChanged }) {
   }
   if (!field) {
     if (!canEdit) return null;
-    return /* @__PURE__ */ jsx21(Row, { label: "Recovery codes", actions: /* @__PURE__ */ jsx21(Button17, { variant: "quiet", icon: /* @__PURE__ */ jsx21(PlusGlyph, {}), "aria-label": "Add recovery codes", onClick: () => setDraft("") }), children: /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "None" }) });
+    return /* @__PURE__ */ jsx21(VaultRow, { label: "Recovery codes", actions: /* @__PURE__ */ jsx21(Button17, { variant: "quiet", icon: /* @__PURE__ */ jsx21(PlusGlyph, {}), "aria-label": "Add recovery codes", onClick: () => setDraft("") }), children: /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: "None" }) });
   }
   const sealed = field.handling === "sealed";
   const canSee = !sealed && item.capabilities.canReveal;
@@ -4948,7 +4937,7 @@ function RecoveryCodesRow({ item, field, port, onChanged }) {
     });
   };
   return /* @__PURE__ */ jsx21(
-    Row,
+    VaultRow,
     {
       label: "Recovery codes",
       top: codes !== null,
@@ -4959,7 +4948,7 @@ function RecoveryCodesRow({ item, field, port, onChanged }) {
       children: sealed ? /* @__PURE__ */ jsx21(Badge6, { icon: /* @__PURE__ */ jsx21(LockGlyph, {}), children: "Sealed" }) : codes ? /* @__PURE__ */ jsxs20("ul", { className: "flex flex-col gap-0.5", "aria-label": "Recovery codes", children: [
         codes.map((code, i) => /* @__PURE__ */ jsxs20("li", { className: "flex min-h-7 items-center gap-1", children: [
           /* @__PURE__ */ jsx21("code", { className: "min-w-0 flex-1 break-all font-mono text-sm text-foreground", children: code }),
-          /* @__PURE__ */ jsx21(Button17, { variant: "quiet", icon: /* @__PURE__ */ jsx21(CopyGlyph, {}), "aria-label": `Copy code ${i + 1}`, onClick: () => void copyValue2(code, "Recovery code") }),
+          /* @__PURE__ */ jsx21(Button17, { variant: "quiet", icon: /* @__PURE__ */ jsx21(CopyIcon6, {}), "aria-label": `Copy code ${i + 1}`, onClick: () => void copyValue2(code, "Recovery code") }),
           canEdit ? /* @__PURE__ */ jsx21(Button17, { variant: "quiet", icon: /* @__PURE__ */ jsx21(CheckGlyph, {}), disabled: busy, onClick: () => void markUsed(i), children: "Mark used" }) : null
         ] }, `${i}-${code}`)),
         error ? /* @__PURE__ */ jsx21("li", { role: "alert", className: "text-xs text-destructive", children: error }) : null
@@ -4968,33 +4957,17 @@ function RecoveryCodesRow({ item, field, port, onChanged }) {
   );
 }
 
+// src/ItemPane.tsx
+import { HistoryIcon, SettingsIcon, UsersIcon as UsersIcon2 } from "@ai-matrx/design-system/icons";
+import { dropKeptDraft, keepDraft, readKeptDraft } from "@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
@@ -5141,6 +5114,7 @@ import { useEffect as useEffect15, useState as useState25 } from "react";
 import { confirm as confirm8 } from "@ai-matrx/kit/confirm-opener";
 import { Button as Button20, DisclosureHeader as DisclosureHeader3, Field as Field9, RegionSkeleton, Select as Select8 } from "@ai-matrx/design-system/controls";
 import { cn as cn11 } from "@ai-matrx/design-system";
+import { UsersIcon } from "@ai-matrx/design-system/icons";
 
 // src/sharing/logic.ts
 var LEVEL_OPTIONS = [
@@ -5172,7 +5146,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";
 }
@@ -5262,7 +5236,7 @@ function MovePanel({ item, port, organizations, onClose, onChanged }) {
     const to = destinationOf(moveChoice.value);
     const ok = await confirm7({
       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;
@@ -5298,17 +5272,17 @@ function MovePanel({ item, port, organizations, onClose, onChanged }) {
         /* @__PURE__ */ jsx24(StatusLine, { error, notice }),
         /* @__PURE__ */ jsx24(Button19, { variant: "outline", className: "ml-auto", onClick: onClose, children: "Close" })
       ] }),
-      children: nothing ? /* @__PURE__ */ jsx24(Section, { children: /* @__PURE__ */ jsx24(Empty, { children: passkey ? "A passkey stays where it was created." : "Only the owner can move or give this item." }) }) : /* @__PURE__ */ jsxs22(Section, { children: [
+      children: nothing ? /* @__PURE__ */ jsx24(VaultSection, { children: /* @__PURE__ */ jsx24(Empty, { children: passkey ? "A passkey stays where it was created." : "Only the owner can move or give this item." }) }) : /* @__PURE__ */ jsxs22(VaultSection, { children: [
         canMove && moves.length > 0 ? /* @__PURE__ */ jsx24(
-          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__ */ jsx24(Button19, { variant: "outline", disabled: busy !== null || !moveChoice, onClick: () => void move(), children: "Move" }),
             children: /* @__PURE__ */ jsx24(Select7, { 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__ */ jsx24(Row, { label: "Give to", hint: "You lose all access; your shares end", actions: /* @__PURE__ */ jsx24(Button19, { variant: "danger", disabled: busy !== null || !isEmail(email), onClick: () => void give(), children: "Give" }), children: /* @__PURE__ */ jsx24(
+        canGive ? /* @__PURE__ */ jsx24(VaultRow, { label: "Give to", hint: "You lose all access; your shares end", actions: /* @__PURE__ */ jsx24(Button19, { variant: "danger", disabled: busy !== null || !isEmail(email), onClick: () => void give(), children: "Give" }), children: /* @__PURE__ */ jsx24(
           Field8,
           {
             className: "w-full",
@@ -5322,7 +5296,7 @@ function MovePanel({ item, port, organizations, onClose, onChanged }) {
             onChange: (e) => setEmail(e.target.value)
           }
         ) }) : null,
-        canCopy && copies.length > 0 ? /* @__PURE__ */ jsx24(Row, { label: "Copy to", hint: "A separate item; edits no longer sync", actions: /* @__PURE__ */ jsx24(Button19, { variant: "outline", disabled: busy !== null || !copyChoice, onClick: () => void copy(), children: "Copy" }), children: /* @__PURE__ */ jsx24(Select7, { 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__ */ jsx24(VaultRow, { label: "Copy to", hint: "A separate item; edits no longer sync", actions: /* @__PURE__ */ jsx24(Button19, { variant: "outline", disabled: busy !== null || !copyChoice, onClick: () => void copy(), children: "Copy" }), children: /* @__PURE__ */ jsx24(Select7, { className: "w-full", "aria-label": "Copy to", value: copyTo || NONE, onValueChange: (v) => setCopyTo(v === NONE ? "" : v), options: [{ value: NONE, label: "Choose where" }, ...copies] }) }) : null
       ] })
     }
   );
@@ -5404,7 +5378,7 @@ function SharePanel({ item, port, organizations, onClose, onChanged }) {
     }
   };
   if (!item.capabilities.canManage) {
-    return /* @__PURE__ */ jsx25(Panel, { title: "Share", size: "md", onClose, footer: /* @__PURE__ */ jsx25(Button20, { variant: "primary", onClick: onClose, children: "Done" }), children: /* @__PURE__ */ jsx25(Section, { children: /* @__PURE__ */ jsx25(Empty, { children: "Only the owner can change who has access." }) }) });
+    return /* @__PURE__ */ jsx25(Panel, { title: "Share", size: "md", onClose, footer: /* @__PURE__ */ jsx25(Button20, { variant: "primary", onClick: onClose, children: "Done" }), children: /* @__PURE__ */ jsx25(VaultSection, { children: /* @__PURE__ */ jsx25(Empty, { children: "Only the owner can change who has access." }) }) });
   }
   return /* @__PURE__ */ jsxs23(
     Panel,
@@ -5417,9 +5391,9 @@ function SharePanel({ item, port, organizations, onClose, onChanged }) {
         /* @__PURE__ */ jsx25(Button20, { variant: "primary", className: "ml-auto", onClick: onClose, children: "Done" })
       ] }),
       children: [
-        /* @__PURE__ */ jsxs23(Section, { title: "Who has access", children: [
+        /* @__PURE__ */ jsxs23(VaultSection, { title: "Who has access", children: [
           isOrg ? /* @__PURE__ */ jsx25(AccessLine, { glyph: BuildingGlyph, who: `${orgName} admins`, children: /* @__PURE__ */ jsx25("span", { className: "px-2 text-sm text-muted-foreground", children: "Full access" }) }) : /* @__PURE__ */ jsx25(AccessLine, { glyph: PersonGlyph, who: "You", meta: "Owner", children: /* @__PURE__ */ jsx25("span", { className: "px-2 text-sm text-muted-foreground", children: "Full access" }) }),
-          isOrg ? /* @__PURE__ */ jsx25(AccessLine, { glyph: UsersGlyph, who: `${orgName} members`, children: /* @__PURE__ */ jsx25(
+          isOrg ? /* @__PURE__ */ jsx25(AccessLine, { glyph: UsersIcon, who: `${orgName} members`, children: /* @__PURE__ */ jsx25(
             Select8,
             {
               variant: "inline",
@@ -5480,7 +5454,7 @@ function IntoOrganization({ item, port, organizations, grants, onShared }) {
   const [level, setLevel] = useState25("use");
   const chosen = open.find((o) => o.id === target);
   if (item.owner.kind !== "me") return null;
-  return /* @__PURE__ */ jsx25(Section, { title: "Share into organization", children: open.length > 0 ? /* @__PURE__ */ jsxs23(Fragment14, { children: [
+  return /* @__PURE__ */ jsx25(VaultSection, { title: "Share into organization", children: open.length > 0 ? /* @__PURE__ */ jsxs23(Fragment14, { children: [
     /* @__PURE__ */ jsxs23("div", { className: "flex min-h-11 items-center gap-2 px-3 sm:px-4", children: [
       /* @__PURE__ */ jsx25(BuildingGlyph, { className: "size-4 shrink-0 text-muted-foreground" }),
       /* @__PURE__ */ jsx25(Select8, { 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 }))] }),
@@ -5530,7 +5504,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__ */ jsxs23(Section, { title: `${organizationName} vault access`, children: [
+  return /* @__PURE__ */ jsxs23(VaultSection, { title: `${organizationName} vault access`, children: [
     loadError ? /* @__PURE__ */ jsx25(Empty, { children: loadError }) : list === null ? /* @__PURE__ */ jsx25(RegionSkeleton, { shape: "rows", count: 3, "aria-label": "Loading member access", className: "px-3 sm:px-4" }) : list.members.length === 0 ? /* @__PURE__ */ jsx25(Empty, { children: "No members yet." }) : list.members.map((m) => /* @__PURE__ */ jsx25(AccessLine, { glyph: PersonGlyph, who: m.email || m.userId, meta: m.role, children: m.effective === "admin" ? /* @__PURE__ */ jsx25("span", { className: "px-2 text-sm text-muted-foreground", children: MEMBER_ACCESS_LABEL.admin }) : /* @__PURE__ */ jsx25(
       Select8,
       {
@@ -5606,7 +5580,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 ? readKeptDraft(keepKey, { basedOn: item?.updatedAt ?? "new" })?.value ?? null : null;
       setDraft(kept ? { ...base, ...kept } : base);
       setTagsText((kept ?? base).tags.join(", "));
       setError(null);
@@ -5621,7 +5595,7 @@ function ItemPane(props) {
   useEffect16(() => onDirty(dirty), [dirty, onDirty]);
   const keepKey = draftKey(item?.id ?? null, definition?.key ?? item?.definitionKey ?? null);
   useEffect16(() => {
-    if (editing && dirty) keepDraft(keepKey, item?.updatedAt ?? "new", draft);
+    if (editing && dirty) keepDraft(keepKey, keptFieldsOf(draft), { basedOn: item?.updatedAt ?? "new" });
     else if (!editing) dropKeptDraft(keepKey);
   }, [editing, dirty, draft, keepKey, item?.updatedAt]);
   useEffect16(() => {
@@ -5708,7 +5682,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__ */ jsx26(PersonGlyph, {}) } : owner === "person" ? { label: "Someone else", glyph: /* @__PURE__ */ jsx26(SendGlyph, {}) } : { label: organizations.find((o) => o.id === owner)?.name ?? "Organization", glyph: /* @__PURE__ */ jsx26(BuildingGlyph, {}) } : item ? { label: item.owner.label, glyph: item.owner.kind === "me" ? /* @__PURE__ */ jsx26(PersonGlyph, {}) : item.owner.kind === "organization" ? /* @__PURE__ */ jsx26(BuildingGlyph, {}) : /* @__PURE__ */ jsx26(UsersGlyph, {}) } : null;
+  const shownOwner = mode === "new" ? owner === "me" ? { label: "Personal", glyph: /* @__PURE__ */ jsx26(PersonGlyph, {}) } : owner === "person" ? { label: "Someone else", glyph: /* @__PURE__ */ jsx26(SendGlyph, {}) } : { label: organizations.find((o) => o.id === owner)?.name ?? "Organization", glyph: /* @__PURE__ */ jsx26(BuildingGlyph, {}) } : item ? { label: item.owner.label, glyph: item.owner.kind === "me" ? /* @__PURE__ */ jsx26(PersonGlyph, {}) : item.owner.kind === "organization" ? /* @__PURE__ */ jsx26(BuildingGlyph, {}) : /* @__PURE__ */ jsx26(UsersIcon2, {}) } : null;
   const tagsVisible = showTags || draft.tags.length > 0 || tagsText !== "";
   const descriptionVisible = showDescription || draft.description !== "";
   const header = /* @__PURE__ */ jsxs24("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: [
@@ -5765,7 +5739,7 @@ function ItemPane(props) {
             "Send securely"
           ] }) : null,
           /* @__PURE__ */ jsxs24(DropdownMenuItem3, { onSelect: () => onPanel("history"), children: [
-            /* @__PURE__ */ jsx26(HistoryGlyph, { className: "size-4" }),
+            /* @__PURE__ */ jsx26(HistoryIcon, { className: "size-4" }),
             "Password history"
           ] }),
           /* @__PURE__ */ jsxs24(DropdownMenuItem3, { onSelect: () => onPanel("activity"), children: [
@@ -5773,7 +5747,7 @@ function ItemPane(props) {
             "Activity"
           ] }),
           canEdit ? /* @__PURE__ */ jsxs24(DropdownMenuItem3, { onSelect: () => onPanel("settings"), children: [
-            /* @__PURE__ */ jsx26(SettingsGlyph, { className: "size-4" }),
+            /* @__PURE__ */ jsx26(SettingsIcon, { className: "size-4" }),
             "Settings"
           ] }) : null,
           canManage ? /* @__PURE__ */ jsxs24(Fragment15, { children: [
@@ -5793,8 +5767,8 @@ function ItemPane(props) {
     error ? /* @__PURE__ */ jsx26("div", { role: "alert", className: "border-b border-border bg-muted px-5 py-2 text-sm text-destructive", children: error }) : null,
     notice && !editing ? /* @__PURE__ */ jsx26("div", { role: "status", className: "border-b border-border bg-muted px-5 py-2 text-sm text-warning", children: notice }) : null,
     /* @__PURE__ */ jsx26("div", { className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx26("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__ */ jsxs24(Fragment15, { children: [
-      /* @__PURE__ */ jsxs24(Section, { children: [
-        mode === "new" ? /* @__PURE__ */ jsx26(Row, { label: "Save to", children: /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsxs24(VaultSection, { children: [
+        mode === "new" ? /* @__PURE__ */ jsx26(VaultRow, { label: "Save to", children: /* @__PURE__ */ jsx26(
           OptionCombobox,
           {
             value: owner,
@@ -5815,7 +5789,7 @@ function ItemPane(props) {
         /* @__PURE__ */ jsx26(EditRow, { label: "Name", value: draft.name, onChange: (v) => patch({ name: v }), placeholder: "Name", autoFocus: mode === "new" }),
         mode === "new" && owner === "person" ? /* @__PURE__ */ jsxs24(Fragment15, { children: [
           /* @__PURE__ */ jsx26(EditRow, { label: "Their email", value: recipient, placeholder: "name@company.com", inputMode: "email", onChange: setRecipient }),
-          declared.some((f) => f.storage === "encrypted" && f.kind === "secret") ? /* @__PURE__ */ jsx26(Row, { label: "Password", hint: "You never see it", children: /* @__PURE__ */ jsx26(Switch5, { checked: generatePrivately, onCheckedChange: setGeneratePrivately, "aria-label": "Generate the password privately" }) }) : null
+          declared.some((f) => f.storage === "encrypted" && f.kind === "secret") ? /* @__PURE__ */ jsx26(VaultRow, { label: "Password", hint: "You never see it", children: /* @__PURE__ */ jsx26(Switch5, { 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);
@@ -5835,7 +5809,7 @@ function ItemPane(props) {
               actions: /* @__PURE__ */ jsxs24(Fragment15, { children: [
                 hidden && existing?.handling === "revealable" && item?.capabilities.canReveal ? /* @__PURE__ */ jsx26(Button21, { variant: "quiet", icon: /* @__PURE__ */ jsx26(EyeGlyph, {}), "aria-label": `Show current ${f.label}`, onClick: () => void loadForEdit(f.key) }) : null,
                 secretKind ? /* @__PURE__ */ jsx26(GenerateButton, { onUse: (v) => setValue(f.key, v) }) : null,
-                existing ? /* @__PURE__ */ jsx26(Button21, { variant: "quiet", icon: /* @__PURE__ */ jsx26(SettingsGlyph, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${existing.id}`) }) : null
+                existing ? /* @__PURE__ */ jsx26(Button21, { variant: "quiet", icon: /* @__PURE__ */ jsx26(SettingsIcon, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${existing.id}`) }) : null
               ] })
             },
             f.key
@@ -5853,7 +5827,7 @@ function ItemPane(props) {
             removeLabel: `Delete ${f.label}`,
             actions: /* @__PURE__ */ jsxs24(Fragment15, { children: [
               f.handling === "revealable" && !(f.key in loaded) && item?.capabilities.canReveal ? /* @__PURE__ */ jsx26(Button21, { variant: "quiet", icon: /* @__PURE__ */ jsx26(EyeGlyph, {}), "aria-label": `Show current ${f.label}`, onClick: () => void loadForEdit(f.key) }) : null,
-              /* @__PURE__ */ jsx26(Button21, { variant: "quiet", icon: /* @__PURE__ */ jsx26(SettingsGlyph, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${f.id}`) })
+              /* @__PURE__ */ jsx26(Button21, { variant: "quiet", icon: /* @__PURE__ */ jsx26(SettingsIcon, {}), "aria-label": `${f.label} settings`, onClick: () => onPanel(`field:${f.id}`) })
             ] })
           },
           f.id
@@ -5886,9 +5860,9 @@ function ItemPane(props) {
         /* @__PURE__ */ jsx26(TotpEditRow, { value: draft.authenticator, onChange: (v) => patch({ authenticator: v }), hasExisting: Boolean(item?.authenticator), item, port, onEnrolled: onChanged }),
         item && isLogin && !item.authenticator ? /* @__PURE__ */ jsx26(TwoFactorMethodRow, { port, item, onChanged }) : null
       ] }),
-      /* @__PURE__ */ jsx26(Section, { children: /* @__PURE__ */ jsx26(EditRow, { label: "Notes", value: draft.notes, multiline: true, placeholder: "Anything worth remembering", onChange: (v) => patch({ notes: v }) }) }),
+      /* @__PURE__ */ jsx26(VaultSection, { children: /* @__PURE__ */ jsx26(EditRow, { label: "Notes", value: draft.notes, multiline: true, placeholder: "Anything worth remembering", onChange: (v) => patch({ notes: v }) }) }),
       /* @__PURE__ */ jsxs24(
-        Section,
+        VaultSection,
         {
           title: "More",
           actions: /* @__PURE__ */ jsxs24(DropdownMenu3, { children: [
@@ -5922,7 +5896,7 @@ function ItemPane(props) {
       ),
       filesProps ? /* @__PURE__ */ jsx26(FilesSection, { ...filesProps, editing: true }) : null
     ] }) : item ? /* @__PURE__ */ jsxs24(Fragment15, { children: [
-      /* @__PURE__ */ jsxs24(Section, { children: [
+      /* @__PURE__ */ jsxs24(VaultSection, { children: [
         declared.map((f) => {
           if (f.storage === "metadata") {
             const v = metaValue(f.key);
@@ -5937,10 +5911,10 @@ function ItemPane(props) {
         item.authenticator ? /* @__PURE__ */ jsx26(TotpRow, { port, item, onChanged }) : /* @__PURE__ */ jsx26(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__ */ jsx26(TwoFactorMethodRow, { port, item, onChanged }) : null
       ] }),
-      /* @__PURE__ */ jsx26(Section, { children: item.notes ? /* @__PURE__ */ jsx26(PlainRow, { label: "Notes", value: item.notes, multiline: true }) : /* @__PURE__ */ jsx26(AddRow, { label: "Notes", onAdd: canEdit ? () => onMode("edit") : null, children: "Add notes" }) }),
-      item.description || item.tags.length > 0 || viewCustom.length > 0 ? /* @__PURE__ */ jsxs24(Section, { title: "More", children: [
+      /* @__PURE__ */ jsx26(VaultSection, { children: item.notes ? /* @__PURE__ */ jsx26(PlainRow, { label: "Notes", value: item.notes, multiline: true }) : /* @__PURE__ */ jsx26(AddRow, { label: "Notes", onAdd: canEdit ? () => onMode("edit") : null, children: "Add notes" }) }),
+      item.description || item.tags.length > 0 || viewCustom.length > 0 ? /* @__PURE__ */ jsxs24(VaultSection, { title: "More", children: [
         item.description ? /* @__PURE__ */ jsx26(PlainRow, { label: "Description", value: item.description }) : null,
-        item.tags.length > 0 ? /* @__PURE__ */ jsx26(Row, { label: "Tags", children: /* @__PURE__ */ jsx26("div", { className: "flex flex-wrap gap-1", children: item.tags.map((t) => /* @__PURE__ */ jsx26("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-xs", children: t }, t)) }) }) : null,
+        item.tags.length > 0 ? /* @__PURE__ */ jsx26(VaultRow, { label: "Tags", children: /* @__PURE__ */ jsx26("div", { className: "flex flex-wrap gap-1", children: item.tags.map((t) => /* @__PURE__ */ jsx26("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-xs", children: t }, t)) }) }) : null,
         viewCustom.map((c) => /* @__PURE__ */ jsx26(PlainRow, { label: c.label, value: c.value, openUrl: host.openUrl }, c.key))
       ] }) : null,
       filesProps ? /* @__PURE__ */ jsx26(FilesSection, { ...filesProps, editing: false }) : null,
@@ -6188,13 +6162,13 @@ function RestorePanel({ lists, item, restore, onClose }) {
         refused ? null : /* @__PURE__ */ jsx28(Button23, { variant: "primary", icon: /* @__PURE__ */ jsx28(RestoreGlyph, {}), disabled: busy || loading || lists.preview !== void 0 && preview === null, onClick: () => void run(), children: busy ? "Restoring\u2026" : "Restore" })
       ] }),
       children: [
-        loading ? /* @__PURE__ */ jsx28(Section, { children: /* @__PURE__ */ jsx28(Empty, { children: "Checking what comes back\u2026" }) }) : preview?.supported ? /* @__PURE__ */ jsxs26(Section, { title: "Comes back", children: [
-          /* @__PURE__ */ jsx28(Row, { label: "Fields", children: /* @__PURE__ */ jsx28("span", { className: "text-foreground", children: count(preview.fields, "field") }) }),
-          /* @__PURE__ */ jsx28(Row, { label: "Files", children: /* @__PURE__ */ jsx28("span", { className: "text-foreground", children: count(preview.attachments, "file") }) }),
-          preview.passkeys === 1 ? /* @__PURE__ */ jsx28(Row, { label: "Passkey", hint: "Not turned on; the site may not accept it", children: /* @__PURE__ */ jsx28("span", { className: "text-foreground", children: "1 passkey" }) }) : null,
-          /* @__PURE__ */ jsx28(Row, { label: "Stays off", hint: "Turn each back on yourself", children: /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", children: "Sharing, browser fill, codes, sandboxes, agents" }) }),
-          preview.priorWasDisabled ? /* @__PURE__ */ jsx28(Row, { label: "Before", children: /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", children: "It was already off before it was deleted." }) }) : null
-        ] }) : preview ? /* @__PURE__ */ jsx28(Section, { children: /* @__PURE__ */ jsx28(Empty, { children: refusalText(preview.reason) }) }) : /* @__PURE__ */ jsx28(Section, { children: /* @__PURE__ */ jsx28(Empty, { children: "It comes back turned off: sharing, browser fill, codes and sandbox use stay off." }) }),
+        loading ? /* @__PURE__ */ jsx28(VaultSection, { children: /* @__PURE__ */ jsx28(Empty, { children: "Checking what comes back\u2026" }) }) : preview?.supported ? /* @__PURE__ */ jsxs26(VaultSection, { title: "Comes back", children: [
+          /* @__PURE__ */ jsx28(VaultRow, { label: "Fields", children: /* @__PURE__ */ jsx28("span", { className: "text-foreground", children: count(preview.fields, "field") }) }),
+          /* @__PURE__ */ jsx28(VaultRow, { label: "Files", children: /* @__PURE__ */ jsx28("span", { className: "text-foreground", children: count(preview.attachments, "file") }) }),
+          preview.passkeys === 1 ? /* @__PURE__ */ jsx28(VaultRow, { label: "Passkey", hint: "Not turned on; the site may not accept it", children: /* @__PURE__ */ jsx28("span", { className: "text-foreground", children: "1 passkey" }) }) : null,
+          /* @__PURE__ */ jsx28(VaultRow, { label: "Stays off", hint: "Turn each back on yourself", children: /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", children: "Sharing, browser fill, codes, sandboxes, agents" }) }),
+          preview.priorWasDisabled ? /* @__PURE__ */ jsx28(VaultRow, { label: "Before", children: /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", children: "It was already off before it was deleted." }) }) : null
+        ] }) : preview ? /* @__PURE__ */ jsx28(VaultSection, { children: /* @__PURE__ */ jsx28(Empty, { children: refusalText(preview.reason) }) }) : /* @__PURE__ */ jsx28(VaultSection, { children: /* @__PURE__ */ jsx28(Empty, { children: "It comes back turned off: sharing, browser fill, codes and sandbox use stay off." }) }),
         error ? /* @__PURE__ */ jsx28("p", { role: "alert", className: "px-1 text-sm text-destructive", children: error }) : null
       ]
     }
@@ -6226,7 +6200,7 @@ function TrashView({ port, deleted, query, header, onChanged }) {
   };
   return /* @__PURE__ */ jsxs27("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3", children: [
     header,
-    /* @__PURE__ */ jsx29(Section, { title: "Trash", children: shown.length === 0 ? /* @__PURE__ */ jsx29(Empty, { children: deleted.length === 0 ? "The trash is empty." : "Nothing matches." }) : shown.map((item) => (
+    /* @__PURE__ */ jsx29(VaultSection, { title: "Trash", children: shown.length === 0 ? /* @__PURE__ */ jsx29(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__ */ jsxs27("div", { className: "flex min-h-12 items-center gap-3 px-3 py-1.5 sm:px-4", children: [
@@ -6246,6 +6220,7 @@ function TrashView({ port, deleted, query, header, onChanged }) {
 import { useMemo as useMemo4, useState as useState30 } from "react";
 import { cn as cn14 } from "@ai-matrx/design-system";
 import { Button as Button25, Field as Field10, SearchField as SearchField2 } from "@ai-matrx/design-system/controls";
+import { GlobeIcon as GlobeIcon3 } from "@ai-matrx/design-system/icons";
 import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
 function NewItemFlow({ definitions, url, onUrl, onChoose, onCancel }) {
   const [search, setSearch] = useState30("");
@@ -6280,7 +6255,7 @@ function NewItemFlow({ definitions, url, onUrl, onChoose, onCancel }) {
             "aria-label": "Website address",
             inputMode: "url",
             autoFocus: true,
-            icon: /* @__PURE__ */ jsx30(GlobeGlyph, {})
+            icon: /* @__PURE__ */ jsx30(GlobeIcon3, {})
           }
         ),
         guess && login ? /* @__PURE__ */ jsxs28("div", { className: "flex flex-col gap-2 rounded-xl border border-border bg-card p-3", children: [
@@ -6530,9 +6505,9 @@ function SecureLinkPanel({ item, port, onClose }) {
       ] }),
       children: [
         remedy ? /* @__PURE__ */ jsx31("p", { className: "px-1 text-xs text-muted-foreground", children: remedy }) : null,
-        /* @__PURE__ */ jsxs29(Section, { title: "Recipient", children: [
-          /* @__PURE__ */ jsx31(Row, { label: "Email", children: /* @__PURE__ */ jsx31(Field11, { type: "email", autoComplete: "off", placeholder: "name@example.com", "aria-label": "Their email", value: email, onChange: (e) => setEmail(e.target.value), className: "w-full" }) }),
-          /* @__PURE__ */ jsx31(Row, { label: "Mobile", hint: "For the code", children: /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsxs29(VaultSection, { title: "Recipient", children: [
+          /* @__PURE__ */ jsx31(VaultRow, { label: "Email", children: /* @__PURE__ */ jsx31(Field11, { type: "email", autoComplete: "off", placeholder: "name@example.com", "aria-label": "Their email", value: email, onChange: (e) => setEmail(e.target.value), className: "w-full" }) }),
+          /* @__PURE__ */ jsx31(VaultRow, { label: "Mobile", hint: "For the code", children: /* @__PURE__ */ jsx31(
             Field11,
             {
               type: "tel",
@@ -6548,8 +6523,8 @@ function SecureLinkPanel({ item, port, onClose }) {
               className: "w-full"
             }
           ) }),
-          /* @__PURE__ */ jsx31(Row, { label: "Name", hint: "Optional", children: /* @__PURE__ */ jsx31(Field11, { autoComplete: "off", placeholder: "Their name", "aria-label": "Their name", value: name, onChange: (e) => setName(e.target.value), className: "w-full" }) }),
-          plan && !plan.same ? /* @__PURE__ */ jsx31(Row, { label: "Link by", children: /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx31(VaultRow, { label: "Name", hint: "Optional", children: /* @__PURE__ */ jsx31(Field11, { autoComplete: "off", placeholder: "Their name", "aria-label": "Their name", value: name, onChange: (e) => setName(e.target.value), className: "w-full" }) }),
+          plan && !plan.same ? /* @__PURE__ */ jsx31(VaultRow, { label: "Link by", children: /* @__PURE__ */ jsx31(
             SegmentedControl5,
             {
               "aria-label": "Send the link by",
@@ -6561,26 +6536,26 @@ function SecureLinkPanel({ item, port, onClose }) {
               ]
             }
           ) }) : null,
-          email.trim() ? /* @__PURE__ */ jsx31(Row, { label: "Delivery", children: /* @__PURE__ */ jsx31("span", { className: plan?.same ? "text-warning" : "text-foreground", children: planWords(plan) }) }) : null
+          email.trim() ? /* @__PURE__ */ jsx31(VaultRow, { label: "Delivery", children: /* @__PURE__ */ jsx31("span", { className: plan?.same ? "text-warning" : "text-foreground", children: planWords(plan) }) }) : null
         ] }),
-        /* @__PURE__ */ jsx31(Section, { title: "Include", children: optionsError ? /* @__PURE__ */ jsx31(Empty, { children: /* @__PURE__ */ jsx31("span", { className: "text-destructive", children: optionsError }) }) : !options ? /* @__PURE__ */ jsx31(RegionSkeleton2, { shape: "rows", count: 2, "aria-label": "Loading what can be sent", className: "px-3 sm:px-4" }) : options.fields.length === 0 ? /* @__PURE__ */ jsx31(Empty, { children: "Name and details only" }) : options.fields.map((f) => /* @__PURE__ */ jsxs29("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__ */ jsx31(VaultSection, { title: "Include", children: optionsError ? /* @__PURE__ */ jsx31(Empty, { children: /* @__PURE__ */ jsx31("span", { className: "text-destructive", children: optionsError }) }) : !options ? /* @__PURE__ */ jsx31(RegionSkeleton2, { shape: "rows", count: 2, "aria-label": "Loading what can be sent", className: "px-3 sm:px-4" }) : options.fields.length === 0 ? /* @__PURE__ */ jsx31(Empty, { children: "Name and details only" }) : options.fields.map((f) => /* @__PURE__ */ jsxs29("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__ */ jsx31(Checkbox2, { checked: fields.includes(f.key), disabled: !f.available, onCheckedChange: (v) => toggle2(f.key, v === true), "aria-label": f.label }),
           /* @__PURE__ */ jsx31("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground", children: f.label }),
           !f.available && f.reason ? /* @__PURE__ */ jsx31("span", { className: "min-w-0 max-w-[55%] truncate text-xs text-muted-foreground", title: f.reason, children: f.reason }) : null
         ] }, f.key)) }),
-        /* @__PURE__ */ jsx31(Section, { title: "Message", children: /* @__PURE__ */ jsx31("div", { className: "px-3 py-1 sm:px-4", children: /* @__PURE__ */ jsx31(Textarea4, { 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__ */ jsxs29(Section, { title: "Link", children: [
-          /* @__PURE__ */ jsx31(Row, { label: "Opens", children: /* @__PURE__ */ jsx31("span", { className: "text-foreground", children: "Once" }) }),
-          /* @__PURE__ */ jsx31(Row, { label: "Link expires", children: /* @__PURE__ */ jsxs29("span", { className: "text-foreground", children: [
+        /* @__PURE__ */ jsx31(VaultSection, { title: "Message", children: /* @__PURE__ */ jsx31("div", { className: "px-3 py-1 sm:px-4", children: /* @__PURE__ */ jsx31(Textarea4, { 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__ */ jsxs29(VaultSection, { title: "Link", children: [
+          /* @__PURE__ */ jsx31(VaultRow, { label: "Opens", children: /* @__PURE__ */ jsx31("span", { className: "text-foreground", children: "Once" }) }),
+          /* @__PURE__ */ jsx31(VaultRow, { label: "Link expires", children: /* @__PURE__ */ jsxs29("span", { className: "text-foreground", children: [
             "After ",
             lifetimeWords(options.linkMinutes)
           ] }) }),
-          /* @__PURE__ */ jsx31(Row, { label: "Code expires", children: /* @__PURE__ */ jsxs29("span", { className: "text-foreground", children: [
+          /* @__PURE__ */ jsx31(VaultRow, { label: "Code expires", children: /* @__PURE__ */ jsxs29("span", { className: "text-foreground", children: [
             "After ",
             lifetimeWords(options.codeMinutes)
           ] }) })
         ] }) : null,
-        sharing.sentSecureLinks ? /* @__PURE__ */ jsx31(Section, { title: "Sent links", children: sentError ? /* @__PURE__ */ jsx31(Empty, { children: /* @__PURE__ */ jsx31("span", { className: "text-destructive", children: sentError }) }) : !sent ? /* @__PURE__ */ jsx31(RegionSkeleton2, { shape: "rows", count: 2, "aria-label": "Loading sent links", className: "px-3 sm:px-4" }) : sent.length === 0 ? /* @__PURE__ */ jsx31(Empty, { children: "None yet" }) : sent.map((row) => /* @__PURE__ */ jsxs29(AccessLine, { glyph: row.status === "pending" ? ClockGlyph : row.fieldKeys.length ? LockGlyph : ShareGlyph, who: recipientOf(row), meta: sentMeta(row, options), children: [
+        sharing.sentSecureLinks ? /* @__PURE__ */ jsx31(VaultSection, { title: "Sent links", children: sentError ? /* @__PURE__ */ jsx31(Empty, { children: /* @__PURE__ */ jsx31("span", { className: "text-destructive", children: sentError }) }) : !sent ? /* @__PURE__ */ jsx31(RegionSkeleton2, { shape: "rows", count: 2, "aria-label": "Loading sent links", className: "px-3 sm:px-4" }) : sent.length === 0 ? /* @__PURE__ */ jsx31(Empty, { children: "None yet" }) : sent.map((row) => /* @__PURE__ */ jsxs29(AccessLine, { glyph: row.status === "pending" ? ClockGlyph : row.fieldKeys.length ? LockGlyph : ShareGlyph, who: recipientOf(row), meta: sentMeta(row, options), children: [
           /* @__PURE__ */ jsx31(Badge8, { tone: STATUS_TONE[row.status] ?? "neutral", children: statusWord(row.status) }),
           row.status === "pending" ? /* @__PURE__ */ jsx31(Button26, { variant: "quiet", disabled: busy !== null, onClick: () => void turnOff(row), children: "Turn off" }) : null
         ] }, row.id)) }) : null
@@ -6722,10 +6697,10 @@ function DevicesPanel({ port, onClose }) {
   };
   return /* @__PURE__ */ jsxs30(Panel, { title: "Browsers that can fill", onClose, size: "md", children: [
     /* @__PURE__ */ jsx32(ErrorLine2, { text: error }),
-    /* @__PURE__ */ jsx32(Section, { children: devices === null ? error ? /* @__PURE__ */ jsx32(Empty, { children: /* @__PURE__ */ jsx32(Button27, { variant: "outline", onClick: () => void load(), children: "Try again" }) }) : /* @__PURE__ */ jsx32(RegionSkeleton3, { shape: "rows", count: 2, "aria-label": "Loading your browsers", className: "px-3 sm:px-4" }) : devices.length === 0 ? /* @__PURE__ */ jsx32(Empty, { children: "No browser can fill yet. Turn it on in the extension." }) : devices.map((device) => {
+    /* @__PURE__ */ jsx32(VaultSection, { children: devices === null ? error ? /* @__PURE__ */ jsx32(Empty, { children: /* @__PURE__ */ jsx32(Button27, { variant: "outline", onClick: () => void load(), children: "Try again" }) }) : /* @__PURE__ */ jsx32(RegionSkeleton3, { shape: "rows", count: 2, "aria-label": "Loading your browsers", className: "px-3 sm:px-4" }) : devices.length === 0 ? /* @__PURE__ */ jsx32(Empty, { children: "No browser can fill yet. Turn it on in the extension." }) : devices.map((device) => {
       const off = isRevoked(device);
       return /* @__PURE__ */ jsx32(
-        Row,
+        VaultRow,
         {
           label: off ? "Turned off" : "Can fill",
           hint: off ? formatAbsoluteDate6(device.revokedAt, DAY_FORMAT, "") : void 0,
@@ -6813,18 +6788,18 @@ function ApprovePanel({ port, host, onClose, approvalKey, label, kind = "browser
     /* @__PURE__ */ jsx32(Button27, { variant: "quiet", disabled: busy !== null, onClick: refuse, children: key ? "Refuse" : "Close" }),
     canApprove ? /* @__PURE__ */ jsx32(Button27, { variant: "primary", icon: /* @__PURE__ */ jsx32(FingerprintGlyph, {}), disabled: busy !== null, onClick: () => void approve(), children: busy === "approve" ? "Approving\u2026" : "Approve with passkey" }) : null
   ] });
-  return /* @__PURE__ */ jsx32(Panel, { title, onClose: refuse, size: "sm", footer, children: !key ? /* @__PURE__ */ jsx32(Section, { children: /* @__PURE__ */ jsxs30(Empty, { children: [
+  return /* @__PURE__ */ jsx32(Panel, { title, onClose: refuse, size: "sm", footer, children: !key ? /* @__PURE__ */ jsx32(VaultSection, { children: /* @__PURE__ */ jsxs30(Empty, { children: [
     "This link names no key. Start again from ",
     where,
     "."
   ] }) }) : /* @__PURE__ */ jsxs30(Fragment17, { children: [
-    /* @__PURE__ */ jsxs30(Section, { title: "What is asking", children: [
-      /* @__PURE__ */ jsx32(Row, { label: "Asking", hint: "Approve only if you just asked", children: asker }),
-      name ? /* @__PURE__ */ jsx32(Row, { label: "Name", children: /* @__PURE__ */ jsx32("span", { className: "block truncate", children: name }) }) : null,
-      /* @__PURE__ */ jsx32(Row, { label: "Code", hint: `Must match ${where}`, children: /* @__PURE__ */ jsx32("span", { className: "font-mono tracking-wider text-foreground", children: shortFingerprint(key) }) })
+    /* @__PURE__ */ jsxs30(VaultSection, { title: "What is asking", children: [
+      /* @__PURE__ */ jsx32(VaultRow, { label: "Asking", hint: "Approve only if you just asked", children: asker }),
+      name ? /* @__PURE__ */ jsx32(VaultRow, { label: "Name", children: /* @__PURE__ */ jsx32("span", { className: "block truncate", children: name }) }) : null,
+      /* @__PURE__ */ jsx32(VaultRow, { label: "Code", hint: `Must match ${where}`, children: /* @__PURE__ */ jsx32("span", { className: "font-mono tracking-wider text-foreground", children: shortFingerprint(key) }) })
     ] }),
     /* @__PURE__ */ jsx32(ErrorLine2, { text: error }),
-    /* @__PURE__ */ jsx32(Section, { title: "Confirm it\u2019s you", children: approvedUntil ? /* @__PURE__ */ jsx32(Row, { label: "Approved", actions: /* @__PURE__ */ jsx32(CheckGlyph, { className: "size-4 text-primary" }), children: /* @__PURE__ */ jsxs30("span", { className: "text-foreground", children: [
+    /* @__PURE__ */ jsx32(VaultSection, { title: "Confirm it\u2019s you", children: approvedUntil ? /* @__PURE__ */ jsx32(VaultRow, { label: "Approved", actions: /* @__PURE__ */ jsx32(CheckGlyph, { className: "size-4 text-primary" }), children: /* @__PURE__ */ jsxs30("span", { className: "text-foreground", children: [
       "Return to ",
       where,
       " by ",
@@ -6835,7 +6810,7 @@ function ApprovePanel({ port, host, onClose, approvalKey, label, kind = "browser
       where,
       "."
     ] }) : !here ? /* @__PURE__ */ jsx32(
-      Row,
+      VaultRow,
       {
         label: "Passkey",
         hint: `Passkeys work only on ${passkeys.rpId}`,
@@ -6843,14 +6818,14 @@ function ApprovePanel({ port, host, onClose, approvalKey, label, kind = "browser
         children: /* @__PURE__ */ jsx32("span", { className: "text-muted-foreground", children: "Not on this page" })
       }
     ) : methods === null ? error ? /* @__PURE__ */ jsx32(Empty, { children: /* @__PURE__ */ jsx32(Button27, { variant: "outline", onClick: () => void load(), children: "Try again" }) }) : /* @__PURE__ */ jsx32(RegionSkeleton3, { shape: "rows", count: 1, "aria-label": "Checking your account", className: "px-3 sm:px-4" }) : !methods.passkey ? /* @__PURE__ */ jsx32(
-      Row,
+      VaultRow,
       {
         label: "Passkey",
         hint: methods.password ? `Or type your password in ${where}` : "Add one to approve",
         actions: /* @__PURE__ */ jsx32(Button27, { variant: "primary", icon: /* @__PURE__ */ jsx32(FingerprintGlyph, {}), disabled: busy !== null, onClick: () => void addPasskey(), children: busy === "add" ? "Adding\u2026" : "Add passkey" }),
         children: /* @__PURE__ */ jsx32("span", { className: "text-muted-foreground", children: methods.password ? "None yet" : "No password or passkey" })
       }
-    ) : /* @__PURE__ */ jsx32(Row, { label: "Passkey", hint: "Your device asks for it next", children: /* @__PURE__ */ jsx32("span", { className: "text-foreground", children: "Ready" }) }) })
+    ) : /* @__PURE__ */ jsx32(VaultRow, { label: "Passkey", hint: "Your device asks for it next", children: /* @__PURE__ */ jsx32("span", { className: "text-foreground", children: "Ready" }) }) })
   ] }) });
 }
 
@@ -7128,7 +7103,7 @@ var TONE = {
 };
 function NativeImportPanel({ bridge, readLimits, activeOrganizationId, organizations, onClose, onChanged }) {
   if (!bridge) {
-    return /* @__PURE__ */ jsx33(Panel, { title: "Import passkeys", size: "md", onClose, footer: /* @__PURE__ */ jsx33(Button28, { variant: "primary", onClick: onClose, children: "Close" }), children: /* @__PURE__ */ jsx33(Section, { children: /* @__PURE__ */ jsx33(Empty, { children: "Passkey import needs the desktop app." }) }) });
+    return /* @__PURE__ */ jsx33(Panel, { title: "Import passkeys", size: "md", onClose, footer: /* @__PURE__ */ jsx33(Button28, { variant: "primary", onClick: onClose, children: "Close" }), children: /* @__PURE__ */ jsx33(VaultSection, { children: /* @__PURE__ */ jsx33(Empty, { children: "Passkey import needs the desktop app." }) }) });
   }
   return /* @__PURE__ */ jsx33(Importer, { bridge, readLimits, activeOrganizationId, organizations, onClose, onChanged });
 }
@@ -7175,25 +7150,25 @@ function Importer({ bridge, readLimits, activeOrganizationId, organizations, onC
     /* @__PURE__ */ jsx33(Button28, { variant: "primary", onClick: onClose, children: "Done" })
   ] }) : /* @__PURE__ */ jsx33(Button28, { variant: "quiet", onClick: onClose, children: "Close" });
   return /* @__PURE__ */ jsxs31(Panel, { title: "Import passkeys", size: "lg", onClose, footer, children: [
-    screen.kind === "idle" ? /* @__PURE__ */ jsxs31(Section, { children: [
-      /* @__PURE__ */ jsx33(Row, { label: "Save to", children: /* @__PURE__ */ jsx33(Select9, { value: organizationId, options, "aria-label": "Save to", disabled: busy, onValueChange: setOrganizationId }) }),
-      /* @__PURE__ */ jsx33(Row, { label: "File", hint: limits ? `Up to ${plural2(limits.maxItems, "passkey")}` : "A passkey exchange file", children: /* @__PURE__ */ jsx33(Button28, { variant: "outline", icon: /* @__PURE__ */ jsx33(ImportGlyph, { className: "size-4" }), disabled: busy || !organizationId || limitError !== null, onClick: () => void flow.begin(organizationId), children: busy ? "Opening\u2026" : "Choose file" }) }),
-      /* @__PURE__ */ jsx33(Row, { label: "Interrupted", hint: "Finish or clear an earlier import", children: /* @__PURE__ */ jsx33(Button28, { variant: "quiet", disabled: busy, onClick: () => void flow.recover(), children: "Recover" }) })
+    screen.kind === "idle" ? /* @__PURE__ */ jsxs31(VaultSection, { children: [
+      /* @__PURE__ */ jsx33(VaultRow, { label: "Save to", children: /* @__PURE__ */ jsx33(Select9, { value: organizationId, options, "aria-label": "Save to", disabled: busy, onValueChange: setOrganizationId }) }),
+      /* @__PURE__ */ jsx33(VaultRow, { label: "File", hint: limits ? `Up to ${plural2(limits.maxItems, "passkey")}` : "A passkey exchange file", children: /* @__PURE__ */ jsx33(Button28, { variant: "outline", icon: /* @__PURE__ */ jsx33(ImportGlyph, { className: "size-4" }), disabled: busy || !organizationId || limitError !== null, onClick: () => void flow.begin(organizationId), children: busy ? "Opening\u2026" : "Choose file" }) }),
+      /* @__PURE__ */ jsx33(VaultRow, { label: "Interrupted", hint: "Finish or clear an earlier import", children: /* @__PURE__ */ jsx33(Button28, { variant: "quiet", disabled: busy, onClick: () => void flow.recover(), children: "Recover" }) })
     ] }) : null,
-    preview ? /* @__PURE__ */ jsx33(Section, { title: `${ready} of ${preview.total} ready`, children: /* @__PURE__ */ jsx33(
+    preview ? /* @__PURE__ */ jsx33(VaultSection, { title: `${ready} of ${preview.total} ready`, children: /* @__PURE__ */ jsx33(
       Windowed,
       {
         items: preview.slots,
-        render: (slot) => /* @__PURE__ */ jsx33(Row, { label: /* @__PURE__ */ jsx33(Badge9, { tone: TONE[slot.disposition], children: dispositionLabel(slot.disposition) }), hint: void 0, children: /* @__PURE__ */ jsx33("span", { className: "block truncate text-foreground", title: slot.reason ?? void 0, children: slot.title ?? "Unnamed passkey" }) }, slot.slot_id)
+        render: (slot) => /* @__PURE__ */ jsx33(VaultRow, { label: /* @__PURE__ */ jsx33(Badge9, { tone: TONE[slot.disposition], children: dispositionLabel(slot.disposition) }), hint: void 0, children: /* @__PURE__ */ jsx33("span", { className: "block truncate text-foreground", title: slot.reason ?? void 0, children: slot.title ?? "Unnamed passkey" }) }, slot.slot_id)
       }
     ) }) : null,
-    status && !preview ? /* @__PURE__ */ jsxs31(Section, { title: `${accounted(status)} of ${status.total} done`, children: [
-      /* @__PURE__ */ jsx33(Row, { label: "Imported", children: /* @__PURE__ */ jsx33("span", { className: "text-foreground", children: status.committed }) }),
-      /* @__PURE__ */ jsx33(Row, { label: "Already there", children: /* @__PURE__ */ jsx33("span", { className: "text-foreground", children: status.already_present }) }),
-      /* @__PURE__ */ jsx33(Row, { label: "Can't import", children: /* @__PURE__ */ jsx33("span", { className: "text-foreground", children: status.unsupported }) }),
-      /* @__PURE__ */ jsx33(Row, { label: "Failed", children: /* @__PURE__ */ jsx33("span", { className: status.failed > 0 ? "text-destructive" : "text-foreground", children: status.failed }) }),
-      status.uncertain > 0 ? /* @__PURE__ */ jsx33(Row, { label: "Needs recovery", children: /* @__PURE__ */ jsx33("span", { className: "text-foreground", children: status.uncertain }) }) : null,
-      status.not_attempted > 0 ? /* @__PURE__ */ jsx33(Row, { label: "Not tried", children: /* @__PURE__ */ jsx33("span", { className: "text-foreground", children: status.not_attempted }) }) : null
+    status && !preview ? /* @__PURE__ */ jsxs31(VaultSection, { title: `${accounted(status)} of ${status.total} done`, children: [
+      /* @__PURE__ */ jsx33(VaultRow, { label: "Imported", children: /* @__PURE__ */ jsx33("span", { className: "text-foreground", children: status.committed }) }),
+      /* @__PURE__ */ jsx33(VaultRow, { label: "Already there", children: /* @__PURE__ */ jsx33("span", { className: "text-foreground", children: status.already_present }) }),
+      /* @__PURE__ */ jsx33(VaultRow, { label: "Can't import", children: /* @__PURE__ */ jsx33("span", { className: "text-foreground", children: status.unsupported }) }),
+      /* @__PURE__ */ jsx33(VaultRow, { label: "Failed", children: /* @__PURE__ */ jsx33("span", { className: status.failed > 0 ? "text-destructive" : "text-foreground", children: status.failed }) }),
+      status.uncertain > 0 ? /* @__PURE__ */ jsx33(VaultRow, { label: "Needs recovery", children: /* @__PURE__ */ jsx33("span", { className: "text-foreground", children: status.uncertain }) }) : null,
+      status.not_attempted > 0 ? /* @__PURE__ */ jsx33(VaultRow, { label: "Not tried", children: /* @__PURE__ */ jsx33("span", { className: "text-foreground", children: status.not_attempted }) }) : null
     ] }) : null,
     screen.message ? /* @__PURE__ */ jsx33("p", { role: "status", className: "px-1 text-sm text-muted-foreground", children: screen.message }) : null,
     /* @__PURE__ */ jsx33(ErrorLine, { message: limitError })
@@ -7204,6 +7179,7 @@ function Importer({ bridge, readLimits, activeOrganizationId, organizations, onC
 import { useState as useState38 } from "react";
 import { DropdownMenu as DropdownMenu5, DropdownMenuContent as DropdownMenuContent5, DropdownMenuItem as DropdownMenuItem4, DropdownMenuTrigger as DropdownMenuTrigger5, SiteIcon } from "@ai-matrx/design-system";
 import { Button as Button32 } from "@ai-matrx/design-system/controls";
+import { GlobeIcon as GlobeIcon4 } from "@ai-matrx/design-system/icons";
 
 // src/extension/CaptureCard.tsx
 import { useState as useState35, useSyncExternalStore as useSyncExternalStore3 } from "react";
@@ -7346,6 +7322,7 @@ function FillSetupCard({ fillSetup }) {
 import { useState as useState37 } from "react";
 import { Popover as Popover2, PopoverContent as PopoverContent2, PopoverTrigger as PopoverTrigger2 } from "@ai-matrx/design-system";
 import { Button as Button31 } from "@ai-matrx/design-system/controls";
+import { CopyIcon as CopyIcon7 } from "@ai-matrx/design-system/icons";
 import { Fragment as Fragment20, jsx as jsx36, jsxs as jsxs34 } from "react/jsx-runtime";
 var HOLD_MS = 6e4;
 function PageGenerator({ fields }) {
@@ -7399,11 +7376,11 @@ function PageGenerator({ fields }) {
   const value = held.value;
   return /* @__PURE__ */ jsxs34(Fragment20, { children: [
     /* @__PURE__ */ jsx36(
-      Row,
+      VaultRow,
       {
         label: "New password",
         actions: /* @__PURE__ */ jsxs34(Fragment20, { children: [
-          value ? /* @__PURE__ */ jsx36(Button31, { variant: "quiet", icon: /* @__PURE__ */ jsx36(CopyGlyph, {}), "aria-label": "Copy password", onClick: () => void copy(value, "Password") }) : null,
+          value ? /* @__PURE__ */ jsx36(Button31, { variant: "quiet", icon: /* @__PURE__ */ jsx36(CopyIcon7, {}), "aria-label": "Copy password", onClick: () => void copy(value, "Password") }) : null,
           /* @__PURE__ */ jsxs34(Popover2, { open, onOpenChange: setOpen, children: [
             /* @__PURE__ */ jsx36(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx36(Button31, { variant: "outline", icon: /* @__PURE__ */ jsx36(KeyGlyph, {}), disabled: busy, children: "Generate" }) }),
             /* @__PURE__ */ jsx36(PopoverContent2, { sizing: "content", align: "end", children: open ? /* @__PURE__ */ jsx36(PasswordGenerator, { limits, useLabel: "Fill page", onUse: (v) => void onUse(v) }) : null })
@@ -7412,7 +7389,7 @@ function PageGenerator({ fields }) {
         children: said ? /* @__PURE__ */ jsx36("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__ */ jsx36("span", { className: "text-xs text-muted-foreground", children: "Choose the boxes to fill." }) : /* @__PURE__ */ jsx36("span", { className: "text-xs text-disabled-foreground", children: "Fills the page\u2019s new-password box" })
       }
     ),
-    value && targets.length > 0 ? targets.map((t) => /* @__PURE__ */ jsx36(Row, { label: t.topFrame ? "This page" : "In a frame", actions: /* @__PURE__ */ jsx36(Button31, { variant: "primary", icon: /* @__PURE__ */ jsx36(CheckGlyph, {}), disabled: busy, onClick: () => void put(t.id, value), children: "Fill" }), children: /* @__PURE__ */ jsx36("span", { className: "block truncate text-sm", children: targetLabel(t) }) }, t.id)) : null
+    value && targets.length > 0 ? targets.map((t) => /* @__PURE__ */ jsx36(VaultRow, { label: t.topFrame ? "This page" : "In a frame", actions: /* @__PURE__ */ jsx36(Button31, { variant: "primary", icon: /* @__PURE__ */ jsx36(CheckGlyph, {}), disabled: busy, onClick: () => void put(t.id, value), children: "Fill" }), children: /* @__PURE__ */ jsx36("span", { className: "block truncate text-sm", children: targetLabel(t) }) }, t.id)) : null
   ] });
 }
 
@@ -7474,7 +7451,7 @@ function PageView({ port, page, fill, capture, fillSetup, newPasswordFields, ite
   return /* @__PURE__ */ jsx37("div", { className: "flex h-full min-h-0 flex-col overflow-y-auto bg-background text-foreground", children: /* @__PURE__ */ jsxs35("div", { className: "flex flex-col gap-3 px-3 pb-4 pt-3", children: [
     header,
     /* @__PURE__ */ jsxs35("div", { className: "flex min-h-7 items-center gap-2 px-1", children: [
-      /* @__PURE__ */ jsx37(SiteIcon, { site: page.url, fallback: GlobeGlyph, className: "size-4" }),
+      /* @__PURE__ */ jsx37(SiteIcon, { site: page.url, fallback: GlobeIcon4, className: "size-4" }),
       /* @__PURE__ */ jsx37("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", title: page.url, children: site || "No page open" }),
       page.refresh ? /* @__PURE__ */ jsx37(Button32, { variant: "quiet", icon: /* @__PURE__ */ jsx37(RefreshGlyph, {}), "aria-label": "Check again", onClick: page.refresh }) : null,
       onBrowse ? /* @__PURE__ */ jsx37(Button32, { variant: "quiet", icon: /* @__PURE__ */ jsx37(ListGlyph, {}), onClick: onBrowse, children: "All items" }) : null
@@ -7482,7 +7459,7 @@ function PageView({ port, page, fill, capture, fillSetup, newPasswordFields, ite
     fillSetup ? /* @__PURE__ */ jsx37(FillSetupCard, { fillSetup }) : null,
     capture ? /* @__PURE__ */ jsx37(CaptureCard, { capture, onChanged }) : null,
     /* @__PURE__ */ jsx37(
-      Section,
+      VaultSection,
       {
         title: "This site",
         actions: canSave ? /* @__PURE__ */ jsx37(Button32, { variant: "quiet", icon: /* @__PURE__ */ jsx37(PlusGlyph, {}), onClick: () => onNewForPage(normalizeLoginUrl2(page.url) ?? page.url), children: "Save a login" }) : null,
@@ -7490,7 +7467,7 @@ function PageView({ port, page, fill, capture, fillSetup, newPasswordFields, ite
       }
     ),
     said ? /* @__PURE__ */ jsx37(Outcome, { said, onDismiss: () => setSaid(null) }) : page.blocked && page.url && state.status === "ready" ? /* @__PURE__ */ jsx37("p", { className: "px-1 text-xs text-muted-foreground", children: BLOCK_WORDS[page.blocked] }) : null,
-    newPasswordFields && canSave ? /* @__PURE__ */ jsx37(Section, { children: /* @__PURE__ */ jsx37(PageGenerator, { fields: newPasswordFields }) }) : null
+    newPasswordFields && canSave ? /* @__PURE__ */ jsx37(VaultSection, { children: /* @__PURE__ */ jsx37(PageGenerator, { fields: newPasswordFields }) }) : null
   ] }) });
 }
 function Outcome({ said, onDismiss }) {
@@ -7550,8 +7527,9 @@ function MatchRow({ itemId, item, tag, family, port, busy, running, onOpen, onFi
 
 // src/Sidebar.tsx
 import { useState as useState39 } from "react";
-import { cn as cn15 } from "@ai-matrx/design-system";
+import { cn as cn15, useLook as useLook2 } from "@ai-matrx/design-system";
 import { Select as Select10 } from "@ai-matrx/design-system/controls";
+import { GlobeIcon as GlobeIcon5 } from "@ai-matrx/design-system/icons";
 import { jsx as jsx38, jsxs as jsxs36 } from "react/jsx-runtime";
 function vaultChoices(items, organizations, current) {
   const n = (f) => items.filter(f).length;
@@ -7567,7 +7545,7 @@ function vaultChoices(items, organizations, current) {
 function VaultSelect({ value, choices, onChange }) {
   return /* @__PURE__ */ jsx38(Select10, { 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: GlobeIcon5, passkeys: ShieldGlyph, api: KeyGlyph, oauth: PlugGlyph, infra: DatabaseGlyph, env: TerminalGlyph, files: FileGlyph, other: NoteGlyph };
 var familyOf = (key, definitions) => definitions.find((d) => d.key === key)?.family ?? "generic";
 function itemCategory(item, definitions) {
   return categoryOf(item.definitionKey, familyOf(item.definitionKey, definitions));
@@ -7610,13 +7588,14 @@ function viewOptions(views, allCount, deletedCount, hasFavorites, hasRecents, ha
   ];
 }
 function Entry({ on, glyph: Icon, label, count: count2, onClick }) {
+  const desktop = useLook2() === "desktop";
   return /* @__PURE__ */ jsxs36(
     "button",
     {
       type: "button",
       "aria-current": on ? "page" : void 0,
       onClick,
-      className: cn15("flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-sm", on ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent"),
+      className: cn15("flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-sm", on ? desktop ? "bg-sidebar-accent text-primary" : "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent"),
       children: [
         /* @__PURE__ */ jsx38(Icon, { className: "size-4 shrink-0" }),
         /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 truncate", children: label }),
@@ -7631,7 +7610,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] = useState39(view.startsWith("tag:"));
   return /* @__PURE__ */ jsxs36("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__ */ jsxs36("div", { className: "flex items-center gap-2 px-3 pb-2 pt-3", children: [
@@ -7640,7 +7619,7 @@ function Sidebar({ vault, choices, onVault, view, allCount, deletedCount, views,
     ] }),
     /* @__PURE__ */ jsxs36("div", { className: "flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-2 pb-3 pt-1", children: [
       /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-0.5", children: [
-        hasPage ? /* @__PURE__ */ jsx38(Entry, { on: view === "page", glyph: GlobeGlyph, label: "This page", onClick: () => onView("page") }) : null,
+        hasPage ? /* @__PURE__ */ jsx38(Entry, { on: view === "page", glyph: GlobeIcon5, label: "This page", onClick: () => onView("page") }) : null,
         /* @__PURE__ */ jsx38(Entry, { on: view === "all", glyph: GridGlyph, label: "All items", count: allCount, onClick: () => onView("all") }),
         hasFavorites ? /* @__PURE__ */ jsx38(Entry, { on: view === "favorites", glyph: StarGlyph, label: "Favorites", count: views.favorites, onClick: () => onView("favorites") }) : null,
         hasRecents ? /* @__PURE__ */ jsx38(Entry, { on: view === "recent", glyph: ClockGlyph, label: "Recently opened", count: views.recent, onClick: () => onView("recent") }) : null,
@@ -7680,7 +7659,7 @@ var NO_HOST = {};
 var ITEM_PANELS = {
   share: SharePanel,
   move: MovePanel,
-  history: HistoryPanel,
+  history: ItemHistoryPanel,
   activity: ActivityPanel,
   settings: ItemSettingsPanel,
   field: FieldSettingsPanel,
@@ -7713,7 +7692,7 @@ function VaultApp(props) {
   const lock = props.host?.lock;
   const locked = useLocked(lock);
   const port = useMemo6(() => lock ? guardPort(props.port, () => lock.locked()) : props.port, [props.port, lock]);
-  return /* @__PURE__ */ jsx39("div", { className: "relative h-full min-h-0 w-full", children: /* @__PURE__ */ jsx39(NoticeProvider, { notify: props.notify, children: lock && locked ? /* @__PURE__ */ jsx39(LockedScreen, { lock }) : /* @__PURE__ */ jsx39(ClipboardProvider, { clipboard: props.host?.clipboard, children: /* @__PURE__ */ jsx39(RevealSecondsProvider, { seconds: props.host?.revealSeconds, children: /* @__PURE__ */ jsx39(IdentityGate, { identity: props.host?.identity, children: /* @__PURE__ */ jsx39(GeneratorLimitsProvider, { resolve: generatorLimitsFrom(props.host?.knobs), children: /* @__PURE__ */ jsx39(Workspace, { ...props, port }) }) }) }) }) }) });
+  return /* @__PURE__ */ jsx39(LookScope, { look: props.look ?? "web", className: "h-full min-h-0 w-full", children: /* @__PURE__ */ jsx39("div", { className: "relative h-full min-h-0 w-full", children: /* @__PURE__ */ jsx39(NoticeProvider, { notify: props.notify, children: lock && locked ? /* @__PURE__ */ jsx39(LockedScreen, { lock }) : /* @__PURE__ */ jsx39(ClipboardProvider, { clipboard: props.host?.clipboard, children: /* @__PURE__ */ jsx39(RevealSecondsProvider, { seconds: props.host?.revealSeconds, children: /* @__PURE__ */ jsx39(IdentityGate, { identity: props.host?.identity, children: /* @__PURE__ */ jsx39(GeneratorLimitsProvider, { resolve: generatorLimitsFrom(props.host?.knobs), children: /* @__PURE__ */ jsx39(Workspace, { ...props, port }) }) }) }) }) }) }) });
 }
 function LockedScreen({ lock }) {
   const [busy, setBusy] = useState40(false);
@@ -8071,7 +8050,7 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
     ] }) : null,
     /* @__PURE__ */ jsxs37("div", { className: `grid min-h-0 w-full flex-1 ${grid} overflow-hidden`, children: [
       mode === "full" ? /* @__PURE__ */ jsx39(
-        Sidebar,
+        VaultSidebar,
         {
           vault: loc.vault,
           choices,