@ai-matrx/vault 0.1.32 → 0.1.34

package/dist/index.js

@@ -4,7 +4,6 @@ import {
   CONFIRM_RETURN_KEY,
   CameraGlyph,
   CheckGlyph,
-  ChevronDownGlyph,
   ChevronLeftGlyph,
   ChevronRightGlyph,
   ClipboardProvider,
@@ -56,7 +55,7 @@ import {
   useCopy,
   useNotify,
   wasCancelled
-} from "./chunk-IJVSAR5M.js";
+} from "./chunk-B5TOAIY6.js";
 
 // src/VaultApp.tsx
 import { useCallback as useCallback4, useEffect as useEffect21, useMemo as useMemo6, useRef as useRef17, useState as useState39, useSyncExternalStore as useSyncExternalStore5 } from "react";
@@ -344,7 +343,7 @@ function PlainRow({ label, value, hint: hint2, openUrl, extra, multiline = false
   );
 }
 function AddRow({ label, onAdd, children = "Add" }) {
-  return /* @__PURE__ */ jsx2(VaultRow, { label, children: onAdd ? /* @__PURE__ */ jsx2("button", { type: "button", className: "text-sm text-muted-foreground hover:text-primary", onClick: onAdd, children }) : /* @__PURE__ */ jsx2("span", { className: "text-disabled-foreground", children: "\u2014" }) });
+  return /* @__PURE__ */ jsx2(VaultRow, { label, children: onAdd ? /* @__PURE__ */ jsx2(Button, { type: "button", variant: "quiet", onClick: onAdd, children }) : /* @__PURE__ */ jsx2("span", { className: "text-disabled-foreground", children: "\u2014" }) });
 }
 function EditRow({ label, hint: hint2, value, onChange, placeholder, secret = false, multiline = false, onRemove, removeLabel, actions, autoFocus, onBlur, inputMode }) {
   const [shown, setShown] = useState3(false);
@@ -1111,8 +1110,8 @@ function HistoryRow({ item, port, page, entry, label, onRestored, onConflict, on
 
 // src/authenticator/AuthenticatorView.tsx
 import { useEffect as useEffect9, useState as useState11 } from "react";
-import { Button as Button8 } 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 { Button as Button8, Tile as Tile2 } from "@ai-matrx/design-system/controls";
+import { 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/ItemIcon.tsx
@@ -1135,7 +1134,7 @@ import { Button as Button7, Field as Field3, Select as Select2 } from "@ai-matrx
 
 // src/authenticator/CodeParts.tsx
 import { useEffect as useEffect6, useRef as useRef4, useState as useState6 } from "react";
-import { Button as Button4 } from "@ai-matrx/design-system/controls";
+import { Button as Button4, Tile } 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";
@@ -1287,19 +1286,21 @@ function useCopied() {
 function CodeButton({ live, digits, size = "md", label }) {
   const { copied, copy } = useCopied();
   const shown = live.code ? groupCode2(live.code) : maskedCode(digits);
-  return /* @__PURE__ */ jsxs5(
-    "button",
+  return /* @__PURE__ */ jsx6(
+    Tile,
     {
       type: "button",
       disabled: !live.code,
       onClick: () => live.code && void copy(live.code),
       "aria-label": live.code ? `Copy ${label} code` : `Getting ${label} code`,
-      title: live.code ? "Copy" : void 0,
-      className: cn5("group -mx-1.5 inline-flex max-w-full shrink-0 items-center gap-3 rounded-md px-1.5 py-1 text-left transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none", size === "lg" && "gap-4"),
-      children: [
+      variant: "quiet",
+      layout: "row",
+      title: "Copy code",
+      end: /* @__PURE__ */ jsxs5("span", { className: cn5("inline-flex shrink-0 items-center", size === "lg" ? "gap-4" : "gap-3"), children: [
         /* @__PURE__ */ jsx6("span", { className: cn5("whitespace-nowrap font-mono font-medium tabular-nums tracking-[0.08em]", size === "lg" ? "text-2xl" : "text-[1.0625rem]", live.code ? "text-foreground" : "text-disabled-foreground"), children: shown }),
         copied ? /* @__PURE__ */ jsx6("span", { className: "inline-flex size-6 items-center justify-center text-success", role: "status", "aria-label": "Copied", children: /* @__PURE__ */ jsx6(CheckGlyph, { className: "size-4" }) }) : /* @__PURE__ */ jsx6(CountdownRing, { remaining: live.remaining, period: live.period, loading: !live.code })
-      ]
+      ] }),
+      className: "max-w-full shrink-0"
     }
   );
 }
@@ -2102,11 +2103,29 @@ function OtpListRow({ port, item, family, entry, onOpen, onOpenInNewTab, onRenam
   if (a.removed) return null;
   const sub = a.error ?? [entry?.account, loginSiteOf(item) || entry?.issuer].filter((v, i, all) => Boolean(v) && all.indexOf(v) === i).join(" \xB7 ");
   return /* @__PURE__ */ jsxs9("div", { className: "grid min-h-14 grid-cols-[2rem_minmax(0,1fr)_auto_auto] items-center gap-x-3 rounded-lg px-2 py-1.5 transition-colors hover:bg-accent/50", children: [
-    /* @__PURE__ */ jsx10("button", { type: "button", onClick: onOpen, "aria-label": `Open ${item.name}`, tabIndex: -1, className: "flex size-8 items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx10(ItemIcon, { definitionKey: item.definitionKey, family, site: loginSiteOf(item) || (entry?.issuer ?? "") }) }),
-    /* @__PURE__ */ jsxs9("button", { type: "button", onClick: onOpen, className: "flex min-w-0 flex-col items-start rounded-md text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [
-      /* @__PURE__ */ jsx10("span", { className: cn6("max-w-full truncate text-sm font-medium", a.enabled ? "text-foreground" : "text-muted-foreground"), children: item.name }),
-      sub ? /* @__PURE__ */ jsx10("span", { className: cn6("max-w-full truncate text-xs", a.error ? "text-destructive" : "text-muted-foreground"), title: sub, children: sub }) : null
-    ] }),
+    /* @__PURE__ */ jsx10(
+      Button8,
+      {
+        type: "button",
+        variant: "quiet",
+        icon: /* @__PURE__ */ jsx10(ItemIcon, { definitionKey: item.definitionKey, family, site: loginSiteOf(item) || (entry?.issuer ?? "") }),
+        "aria-label": `Open ${item.name}`,
+        tabIndex: -1,
+        className: "shrink-0",
+        onClick: onOpen
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      Tile2,
+      {
+        type: "button",
+        variant: "quiet",
+        onClick: onOpen,
+        title: /* @__PURE__ */ jsx10("span", { className: a.enabled ? "text-foreground" : "text-muted-foreground", children: item.name }),
+        line: sub ? /* @__PURE__ */ jsx10("span", { className: a.error ? "text-destructive" : "text-muted-foreground", title: sub, children: sub }) : void 0,
+        className: "min-w-0"
+      }
+    ),
     /* @__PURE__ */ jsx10("div", { className: "flex shrink-0 justify-end", children: !a.enabled ? /* @__PURE__ */ jsxs9("span", { className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ jsx10("span", { className: "text-sm text-disabled-foreground", children: "Off" }),
       canManage ? /* @__PURE__ */ jsx10(Button8, { variant: "quiet", disabled: a.busy, onClick: () => void a.setEnabled(true), children: "Turn on" }) : null
@@ -2448,7 +2467,7 @@ function ItemSettingsPanel({ item, port, onClose, onChanged, onPanel }) {
 
 // src/generator/PasswordGenerator.tsx
 import { createContext as createContext3, useContext as useContext3, useEffect as useEffect10, useRef as useRef8, useState as useState13 } from "react";
-import { Popover, PopoverContent, PopoverTrigger, cn as cn7 } from "@ai-matrx/design-system";
+import { Popover, PopoverContent, PopoverTrigger, cn as cn6 } from "@ai-matrx/design-system";
 import { Button as Button10, 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";
 
@@ -2606,13 +2625,13 @@ function PasswordGenerator({ limits: source, onUse, useLabel = "Use" }) {
     ),
     /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1 rounded-lg bg-muted px-3 py-2", children: [
       /* @__PURE__ */ jsxs11("div", { className: "flex min-h-7 items-start gap-1", children: [
-        /* @__PURE__ */ jsx12("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__ */ jsx12("code", { className: cn6("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__ */ jsx12(Button10, { variant: "quiet", icon: revealed ? /* @__PURE__ */ jsx12(EyeOffGlyph, {}) : /* @__PURE__ */ jsx12(EyeGlyph, {}), "aria-label": revealed ? "Hide" : "Reveal", disabled: !candidate, onClick: () => setRevealed((r) => !r) }),
         /* @__PURE__ */ jsx12(Button10, { variant: "quiet", icon: /* @__PURE__ */ jsx12(CopyIcon5, {}), "aria-label": "Copy", disabled: !candidate, onClick: () => void copy() }),
         /* @__PURE__ */ jsx12(Button10, { variant: "quiet", icon: /* @__PURE__ */ jsx12(RefreshGlyph, {}), "aria-label": "Generate another", onClick: () => change(settings) })
       ] }),
       strength && candidate ? /* @__PURE__ */ jsxs11("p", { className: "text-xs", children: [
-        /* @__PURE__ */ jsx12("span", { className: cn7(strength.tone === "success" && "text-success", strength.tone === "primary" && "text-primary", strength.tone === "warning" && "text-warning"), children: strength.label }),
+        /* @__PURE__ */ jsx12("span", { className: cn6(strength.tone === "success" && "text-success", strength.tone === "primary" && "text-primary", strength.tone === "warning" && "text-warning"), children: strength.label }),
         /* @__PURE__ */ jsxs11("span", { className: "text-muted-foreground", children: [
           " \xB7 ",
           Math.floor(candidate.bits),
@@ -2639,7 +2658,7 @@ function PasswordGenerator({ limits: source, onUse, useLabel = "Use" }) {
       /* @__PURE__ */ jsx12(OptionLine, { label: "Capitalize", children: /* @__PURE__ */ jsx12(Switch2, { "aria-label": "Capitalize", checked: settings.passphrase.capitalize, onCheckedChange: (capitalize) => change({ ...settings, passphrase: { ...settings.passphrase, capitalize } }) }) }),
       /* @__PURE__ */ jsx12(OptionLine, { label: "Add a digit", children: /* @__PURE__ */ jsx12(Switch2, { "aria-label": "Add a digit", checked: settings.passphrase.appendDigit, onCheckedChange: (appendDigit) => change({ ...settings, passphrase: { ...settings.passphrase, appendDigit } }) }) })
     ] }),
-    note ? /* @__PURE__ */ jsx12("p", { "aria-live": "polite", className: cn7("text-xs", note.tone === "destructive" ? "text-destructive" : note.tone === "success" ? "text-success" : "text-muted-foreground"), children: note.text }) : null,
+    note ? /* @__PURE__ */ jsx12("p", { "aria-live": "polite", className: cn6("text-xs", note.tone === "destructive" ? "text-destructive" : note.tone === "success" ? "text-success" : "text-muted-foreground"), children: note.text }) : null,
     /* @__PURE__ */ jsx12(Button10, { variant: "primary", disabled: !candidate, onClick: use, children: useLabel })
   ] });
 }
@@ -4381,7 +4400,7 @@ function ImportPanel({ port, host, items, definitions, organizations, onClose, o
       done.needOtp.map((made) => {
         const now = items.find((i) => i.id === made.id);
         if (now?.authenticator) return null;
-        return /* @__PURE__ */ jsx16(VaultRow, { label: "Authenticator", children: /* @__PURE__ */ jsxs15("button", { type: "button", className: "truncate text-left text-primary hover:underline", onClick: () => setOtpFor(made.id), children: [
+        return /* @__PURE__ */ jsx16(VaultRow, { label: "Authenticator", children: /* @__PURE__ */ jsxs15(Button14, { type: "button", variant: "link", className: "truncate", onClick: () => setOtpFor(made.id), children: [
           "Set up authenticator for ",
           made.name
         ] }) }, `otp:${made.id}`);
@@ -4436,14 +4455,14 @@ function Notices({ draft }) {
 // src/ItemList.tsx
 import { useEffect as useEffect15, useRef as useRef13, useState as useState26 } from "react";
 import { DropdownMenu as DropdownMenu4, DropdownMenuContent as DropdownMenuContent4, DropdownMenuItem as DropdownMenuItem4, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator as DropdownMenuSeparator4, DropdownMenuTrigger as DropdownMenuTrigger4 } from "@ai-matrx/design-system";
-import { cn as cn12 } from "@ai-matrx/design-system";
-import { Button as Button22, SearchField } from "@ai-matrx/design-system/controls";
+import { cn as cn11 } from "@ai-matrx/design-system";
+import { Button as Button22, SearchField, Tile as Tile3 } from "@ai-matrx/design-system/controls";
 import { CopyIcon as CopyIcon7 } from "@ai-matrx/design-system/icons";
 
 // src/ItemPane.tsx
 import { Fragment as Fragment16, useEffect as useEffect14, useMemo as useMemo3, useRef as useRef12, useState as useState25 } from "react";
 import { DropdownMenu as DropdownMenu3, DropdownMenuContent as DropdownMenuContent3, DropdownMenuItem as DropdownMenuItem3, DropdownMenuSeparator as DropdownMenuSeparator3, DropdownMenuTrigger as DropdownMenuTrigger3 } from "@ai-matrx/design-system";
-import { cn as cn11 } from "@ai-matrx/design-system";
+import { cn as cn10 } from "@ai-matrx/design-system";
 import { Badge as Badge7, Button as Button21, CONTROLS_CONTAINER_CLASS, OptionCombobox, Switch as Switch6 } from "@ai-matrx/design-system/controls";
 import { confirm as confirm10 } from "@ai-matrx/kit/confirm-opener";
 
@@ -4451,7 +4470,7 @@ import { confirm as confirm10 } from "@ai-matrx/kit/confirm-opener";
 import { formatFileSize as formatFileSize2 } from "@ai-matrx/kit/format";
 import { useRef as useRef11, useState as useState18 } from "react";
 import { Badge as Badge5, Button as Button15, Field as Field6, SegmentedControl as SegmentedControl4 } from "@ai-matrx/design-system/controls";
-import { cn as cn8 } from "@ai-matrx/design-system";
+import { cn as cn7 } 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";
@@ -4506,7 +4525,7 @@ function FilesSection({ item, port, editing, onChanged }) {
   return /* @__PURE__ */ jsx17(
     "div",
     {
-      className: cn8("rounded-xl", dragging && "outline outline-2 outline-primary"),
+      className: cn7("rounded-xl", dragging && "outline outline-2 outline-primary"),
       onDragOver: canAdd ? (e) => {
         e.preventDefault();
         setDragging(true);
@@ -4671,7 +4690,7 @@ function DraftFilesSection({ files, onFiles }) {
   return /* @__PURE__ */ jsx17(
     "div",
     {
-      className: cn8("rounded-xl", dragging && "outline outline-2 outline-primary"),
+      className: cn7("rounded-xl", dragging && "outline outline-2 outline-primary"),
       onDragOver: (e) => {
         e.preventDefault();
         setDragging(true);
@@ -5143,7 +5162,7 @@ function UseOnSiteButton({ port, item, pageUrl, onChanged }) {
 import { useEffect as useEffect13, useState as useState24 } from "react";
 import { confirm as confirm9 } from "@ai-matrx/kit/confirm-opener";
 import { Button as Button20, DisclosureHeader as DisclosureHeader3, Field as Field9, RegionSkeleton, Select as Select9 } from "@ai-matrx/design-system/controls";
-import { cn as cn10 } from "@ai-matrx/design-system";
+import { cn as cn9 } from "@ai-matrx/design-system";
 import { UsersIcon } from "@ai-matrx/design-system/icons";
 
 // src/sharing/logic.ts
@@ -5199,7 +5218,7 @@ var MEMBER_CHOICE_DEFAULT = "default";
 
 // src/sharing/parts.tsx
 import { useState as useState22 } from "react";
-import { cn as cn9 } from "@ai-matrx/design-system";
+import { cn as cn8 } from "@ai-matrx/design-system";
 import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var message = (e, fallback) => {
   const m = e instanceof Error && e.message ? e.message : fallback;
@@ -5239,7 +5258,7 @@ function AccessLine({ glyph: G, who, meta, children }) {
 }
 function StatusLine({ error, notice }) {
   if (!error && !notice) return null;
-  return /* @__PURE__ */ jsx21("p", { className: cn9("min-w-0 flex-1 line-clamp-2 text-sm", error ? "text-destructive" : "text-success"), title: error ?? notice ?? void 0, children: error ?? notice });
+  return /* @__PURE__ */ jsx21("p", { className: cn8("min-w-0 flex-1 line-clamp-2 text-sm", error ? "text-destructive" : "text-success"), title: error ?? notice ?? void 0, children: error ?? notice });
 }
 
 // src/sharing/MovePanel.tsx
@@ -5559,7 +5578,7 @@ function SharingSummary({ item, port, className }) {
     };
   }, [port, item, allowed]);
   if (!allowed || !text) return null;
-  return /* @__PURE__ */ jsx23("span", { className: cn10("truncate text-xs text-muted-foreground", className), children: text });
+  return /* @__PURE__ */ jsx23("span", { className: cn9("truncate text-xs text-muted-foreground", className), children: text });
 }
 
 // src/ItemPane.tsx
@@ -5877,7 +5896,7 @@ function ItemPane(props) {
     ] }) : null
   ] });
   const filesProps = item ? { item, port, host, definition, organizations, arg: null, onClose: () => void 0, onChanged, onPanel } : null;
-  return /* @__PURE__ */ jsx24(RoomProvider, { value: room, children: /* @__PURE__ */ jsxs22("article", { ref: paneRef, "aria-label": item?.name ?? "New item", className: cn11(CONTROLS_CONTAINER_CLASS, "flex h-full min-h-0 flex-col bg-background"), children: [
+  return /* @__PURE__ */ jsx24(RoomProvider, { value: room, children: /* @__PURE__ */ jsxs22("article", { ref: paneRef, "aria-label": item?.name ?? "New item", className: cn10(CONTROLS_CONTAINER_CLASS, "flex h-full min-h-0 flex-col bg-background"), children: [
     header,
     error ? /* @__PURE__ */ jsx24("div", { role: "alert", className: "border-b border-border bg-muted px-5 py-2 text-sm text-destructive", children: error }) : null,
     notice && !editing ? /* @__PURE__ */ jsx24("div", { role: "status", className: "border-b border-border bg-muted px-5 py-2 text-sm text-warning", children: notice }) : null,
@@ -6077,7 +6096,7 @@ function ItemPane(props) {
         viewCustom.map((c) => /* @__PURE__ */ jsx24(PlainRow, { label: c.label, value: c.value, openUrl: host.openUrl }, c.key))
       ] }) : null,
       filesProps ? /* @__PURE__ */ jsx24(FilesSection, { ...filesProps, editing: false }) : null,
-      /* @__PURE__ */ jsxs22("p", { className: cn11("px-1 text-xs text-muted-foreground"), children: [
+      /* @__PURE__ */ jsxs22("p", { className: cn10("px-1 text-xs text-muted-foreground"), children: [
         "Modified ",
         formatAbsoluteDate3(item.updatedAt, DAY_FORMAT, ""),
         " \xB7 Created ",
@@ -6245,7 +6264,7 @@ function ListRow({ item, family, port, on, onSelect, withOwner, ownContextMenu,
   ];
   const entriesRef = useRef13(entries);
   entriesRef.current = entries;
-  const glyphOf = (e) => e.id === "copy:username" ? /* @__PURE__ */ jsx25(UserGlyph, { className: "size-4" }) : e.id === "copy:password" ? /* @__PURE__ */ jsx25(KeyGlyph, { className: "size-4" }) : e.id === "copy:code" ? /* @__PURE__ */ jsx25(ClockGlyph, { className: "size-4" }) : e.kind === "favorite" ? /* @__PURE__ */ jsx25(StarGlyph, { className: cn12("size-4", favorite?.on && "fill-current text-warning") }) : e.kind === "open" ? /* @__PURE__ */ jsx25(ChevronRightGlyph, { className: "size-4" }) : e.kind === "host" || e.kind === "manage" ? null : /* @__PURE__ */ jsx25(CopyIcon7, { className: "size-4" });
+  const glyphOf = (e) => e.id === "copy:username" ? /* @__PURE__ */ jsx25(UserGlyph, { className: "size-4" }) : e.id === "copy:password" ? /* @__PURE__ */ jsx25(KeyGlyph, { className: "size-4" }) : e.id === "copy:code" ? /* @__PURE__ */ jsx25(ClockGlyph, { className: "size-4" }) : e.kind === "favorite" ? /* @__PURE__ */ jsx25(StarGlyph, { className: cn11("size-4", favorite?.on && "fill-current text-warning") }) : e.kind === "open" ? /* @__PURE__ */ jsx25(ChevronRightGlyph, { className: "size-4" }) : e.kind === "host" || e.kind === "manage" ? null : /* @__PURE__ */ jsx25(CopyIcon7, { className: "size-4" });
   const menuItem = (e) => /* @__PURE__ */ jsxs23(DropdownMenuItem4, { disabled: e.disabled ?? false, onSelect: e.onSelect, children: [
     glyphOf(e),
     e.label
@@ -6261,25 +6280,23 @@ function ListRow({ item, family, port, on, onSelect, withOwner, ownContextMenu,
         setMenuOpen(true);
       } : void 0,
       children: [
-        /* @__PURE__ */ jsxs23(
-          "button",
+        /* @__PURE__ */ jsx25(
+          Tile3,
           {
             type: "button",
             "aria-current": on ? "true" : void 0,
             "data-surface": on ? "primary" : void 0,
             onClick: () => onSelect(item.id),
-            className: cn12("flex h-12 w-full items-center gap-3 rounded-lg px-2 pr-10 text-left", on ? "bg-primary text-primary-foreground" : "hover:bg-accent"),
-            children: [
-              /* @__PURE__ */ jsx25(ItemIcon, { definitionKey: item.definitionKey, family, site: loginSiteOf(item), inverted: on }),
-              /* @__PURE__ */ jsxs23("span", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
-                /* @__PURE__ */ jsx25("span", { className: "truncate text-sm font-medium", children: item.name }),
-                /* @__PURE__ */ jsx25("span", { className: "truncate text-xs text-muted-foreground", children: subtitleOf(item, withOwner) })
-              ] })
-            ]
+            layout: "row",
+            variant: "quiet",
+            icon: /* @__PURE__ */ jsx25(ItemIcon, { definitionKey: item.definitionKey, family, site: loginSiteOf(item), inverted: on }),
+            title: item.name,
+            line: subtitleOf(item, withOwner),
+            className: "w-full pr-10"
           }
         ),
         /* @__PURE__ */ jsxs23("div", { className: "absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center gap-0.5", "data-surface": on ? "primary" : void 0, children: [
-          user || secret || favorite ? /* @__PURE__ */ jsxs23("div", { className: cn12("hidden items-center gap-0.5 rounded-md pl-2 [@media(hover:hover)]:group-hover:flex [@media(hover:hover)]:group-focus-within:flex", on ? "bg-primary" : "bg-accent"), "data-row-quick": "", children: [
+          user || secret || favorite ? /* @__PURE__ */ jsxs23("div", { className: cn11("hidden items-center gap-0.5 rounded-md pl-2 [@media(hover:hover)]:group-hover:flex [@media(hover:hover)]:group-focus-within:flex", on ? "bg-primary" : "bg-accent"), "data-row-quick": "", children: [
             favorite ? /* @__PURE__ */ jsx25(Button22, { variant: "quiet", icon: /* @__PURE__ */ jsx25(StarGlyph, { className: favorite.on ? "fill-current text-warning" : "" }), "aria-label": favorite.on ? "Remove from favorites" : "Add to favorites", "aria-pressed": favorite.on, onClick: favorite.toggle }) : null,
             user ? /* @__PURE__ */ jsx25(Button22, { variant: "quiet", icon: /* @__PURE__ */ jsx25(UserGlyph, {}), "aria-label": `Copy ${user.label}`, disabled: busy, onClick: copyUser }) : null,
             secret ? /* @__PURE__ */ jsx25(Button22, { variant: "quiet", icon: /* @__PURE__ */ jsx25(KeyGlyph, {}), "aria-label": "Copy password", disabled: busy, onClick: copyPassword }) : null
@@ -6292,7 +6309,7 @@ function ListRow({ item, family, port, on, onSelect, withOwner, ownContextMenu,
                 icon: /* @__PURE__ */ jsx25(MoreGlyph, {}),
                 "aria-label": `Actions for ${item.name}`,
                 disabled: busy,
-                className: cn12("[@media(hover:hover)]:invisible [@media(hover:hover)]:group-hover:visible [@media(hover:hover)]:group-focus-within:visible", menuOpen && "[@media(hover:hover)]:visible")
+                className: cn11("[@media(hover:hover)]:invisible [@media(hover:hover)]:group-hover:visible [@media(hover:hover)]:group-focus-within:visible", menuOpen && "[@media(hover:hover)]:visible")
               }
             ) }),
             /* @__PURE__ */ jsxs23(DropdownMenuContent4, { align: "end", children: [
@@ -6570,8 +6587,7 @@ function TrashView({ port, deleted, query, header, onChanged }) {
 
 // src/NewItemFlow.tsx
 import { useMemo as useMemo4, useState as useState29 } from "react";
-import { cn as cn13 } from "@ai-matrx/design-system";
-import { Button as Button25, Field as Field10, SearchField as SearchField2 } from "@ai-matrx/design-system/controls";
+import { Button as Button25, Field as Field10, SearchField as SearchField2, Tile as Tile4 } from "@ai-matrx/design-system/controls";
 import { GlobeIcon as GlobeIcon2 } from "@ai-matrx/design-system/icons";
 import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 function NewItemFlow({ definitions, url, onUrl, onChoose, onCancel }) {
@@ -6629,10 +6645,17 @@ function NewItemFlow({ definitions, url, onUrl, onChoose, onCancel }) {
         /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-between gap-3", children: /* @__PURE__ */ jsx28("h3", { className: "text-xs font-medium text-muted-foreground", children: search.trim() ? "Matching types" : "Or choose a type" }) }),
         /* @__PURE__ */ jsx28("ul", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: shown.map((d) => {
           const Icon = definitionGlyph(d.key, d.family);
-          return /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsxs26("button", { type: "button", onClick: () => use(d), className: cn13("flex h-12 w-full items-center gap-3 rounded-xl border border-border bg-card px-3 text-left hover:bg-accent"), children: [
-            /* @__PURE__ */ jsx28("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted", children: /* @__PURE__ */ jsx28(Icon, { className: "size-4" }) }),
-            /* @__PURE__ */ jsx28("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: d.label })
-          ] }) }, d.key);
+          return /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(
+            Tile4,
+            {
+              type: "button",
+              onClick: () => use(d),
+              variant: "outline",
+              icon: /* @__PURE__ */ jsx28(Icon, { className: "size-4" }),
+              title: d.label,
+              className: "w-full"
+            }
+          ) }, d.key);
         }) }),
         search.trim() && matches.length === 0 ? /* @__PURE__ */ jsx28("p", { className: "px-1 text-sm text-muted-foreground", children: "No type matches." }) : null,
         /* @__PURE__ */ jsx28(SearchField2, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: `Search all ${definitions.length} types`, "aria-label": "Search types" })
@@ -7529,7 +7552,7 @@ function Importer({ bridge, readLimits, activeOrganizationId, organizations, onC
 // src/extension/PageView.tsx
 import { useState as useState37 } from "react";
 import { SiteIcon } from "@ai-matrx/design-system";
-import { Button as Button32 } from "@ai-matrx/design-system/controls";
+import { Button as Button32, Tile as Tile5 } from "@ai-matrx/design-system/controls";
 import { GlobeIcon as GlobeIcon3 } from "@ai-matrx/design-system/icons";
 
 // src/extension/CaptureCard.tsx
@@ -7849,13 +7872,18 @@ function MatchRow({ itemId, item, tag, family, port, busy, running, onOpen, onFi
   };
   const subtitle = [item ? loginSiteOf(item) || item.definitionLabel : "", tag].filter(Boolean).join(" \xB7 ");
   return /* @__PURE__ */ jsxs33("li", { className: "flex h-12 items-center gap-1 pl-1 pr-2", "data-item": itemId, children: [
-    /* @__PURE__ */ jsxs33("button", { type: "button", onClick: () => onOpen(itemId), className: "flex h-11 min-w-0 flex-1 items-center gap-3 rounded-lg px-2 text-left hover:bg-accent", children: [
-      /* @__PURE__ */ jsx35(ItemIcon, { definitionKey: item?.definitionKey ?? "website_login", family, site: item ? loginSiteOf(item) : "" }),
-      /* @__PURE__ */ jsxs33("span", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
-        /* @__PURE__ */ jsx35("span", { className: "truncate text-sm font-medium", children: item?.name ?? "Saved login" }),
-        subtitle ? /* @__PURE__ */ jsx35("span", { className: "truncate text-xs text-muted-foreground", children: subtitle }) : null
-      ] })
-    ] }),
+    /* @__PURE__ */ jsx35(
+      Tile5,
+      {
+        type: "button",
+        variant: "quiet",
+        onClick: () => onOpen(itemId),
+        icon: /* @__PURE__ */ jsx35(ItemIcon, { definitionKey: item?.definitionKey ?? "website_login", family, site: item ? loginSiteOf(item) : "" }),
+        title: item?.name ?? "Saved login",
+        line: subtitle || void 0,
+        className: "min-w-0 flex-1"
+      }
+    ),
     onFill ? /* @__PURE__ */ jsx35(Button32, { variant: "primary", disabled: busy, "aria-busy": running || void 0, onClick: onFill, "aria-label": `Fill ${item?.name ?? "this login"}`, children: running ? "Filling\u2026" : "Fill" }) : null,
     onSignIn ? /* @__PURE__ */ jsx35(Button32, { variant: onFill ? "outline" : "primary", icon: /* @__PURE__ */ jsx35(ShieldGlyph, {}), disabled: busy, onClick: onSignIn, "aria-label": `Sign me in with ${item?.name ?? "this login"}`, title: "Sign me in", children: "Sign me in" }) : null,
     user && item ? /* @__PURE__ */ jsx35(Button32, { variant: "quiet", icon: /* @__PURE__ */ jsx35(UserGlyph, {}), "aria-label": `Copy ${user.label}`, title: `Copy ${user.label}`, disabled: reading, onClick: () => void read(user.label, () => port.reveal(item, user.key)) }) : null,
@@ -7866,8 +7894,8 @@ function MatchRow({ itemId, item, tag, family, port, busy, running, onOpen, onFi
 
 // src/Sidebar.tsx
 import { useState as useState38 } from "react";
-import { cn as cn14, useLook as useLook2 } from "@ai-matrx/design-system";
-import { Select as Select11 } from "@ai-matrx/design-system/controls";
+import { cn as cn12 } from "@ai-matrx/design-system";
+import { DisclosureHeader as DisclosureHeader4, Select as Select11, Tile as Tile6 } from "@ai-matrx/design-system/controls";
 import { GlobeIcon as GlobeIcon4 } from "@ai-matrx/design-system/icons";
 import { jsx as jsx36, jsxs as jsxs34 } from "react/jsx-runtime";
 var AUTHENTICATOR_LABEL = "Authenticator";
@@ -7949,20 +7977,21 @@ function viewOptions(views, allCount, deletedCount, hasFavorites, hasRecents, ha
   ];
 }
 function Entry({ on, glyph: Icon, label, count: count2, onClick, nested = false }) {
-  const desktop = useLook2() === "desktop";
-  return /* @__PURE__ */ jsxs34(
-    "button",
+  return /* @__PURE__ */ jsx36(
+    Tile6,
     {
       type: "button",
       "aria-current": on ? "page" : void 0,
+      selected: on,
       onClick,
+      layout: "row",
+      variant: "quiet",
+      dense: true,
+      icon: nested ? void 0 : /* @__PURE__ */ jsx36(Icon, { className: "size-4 shrink-0" }),
+      title: label,
+      ...count2 !== void 0 ? { end: /* @__PURE__ */ jsx36("span", { className: "text-xs tabular-nums text-muted-foreground", children: count2 }) } : {},
       "data-nested": nested ? "" : void 0,
-      className: cn14("flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-sm", nested && "pl-9", on ? desktop ? "bg-sidebar-accent text-primary" : "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent"),
-      children: [
-        nested ? null : /* @__PURE__ */ jsx36(Icon, { className: "size-4 shrink-0" }),
-        /* @__PURE__ */ jsx36("span", { className: "min-w-0 flex-1 truncate", children: label }),
-        count2 !== void 0 ? /* @__PURE__ */ jsx36("span", { className: "text-xs tabular-nums text-muted-foreground", children: count2 }) : null
-      ]
+      className: cn12("w-full", nested && "pl-9")
     }
   );
 }
@@ -7992,11 +8021,18 @@ function VaultSidebar({ vault, choices, onVault, view, allCount, deletedCount, v
         e === openCategory(view, views) ? e.families?.map((f) => /* @__PURE__ */ jsx36(Entry, { nested: true, on: view === f.view, glyph: f.glyph, label: f.label, count: f.count, onClick: () => onView(f.view) }, f.view)) : null
       ] }, e.view)) }) : null,
       views.tags.length > 0 ? /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsxs34("button", { type: "button", "aria-expanded": tagsOpen, onClick: () => setTagsOpen((o) => !o), className: "flex h-7 items-center gap-1 rounded-md px-2.5 text-left text-xs font-medium text-muted-foreground hover:text-foreground", children: [
-          tagsOpen ? /* @__PURE__ */ jsx36(ChevronDownGlyph, { className: "size-3.5" }) : /* @__PURE__ */ jsx36(ChevronRightGlyph, { className: "size-3.5" }),
-          "Tags",
-          /* @__PURE__ */ jsx36("span", { className: "ml-auto tabular-nums", children: views.tags.length })
-        ] }),
+        /* @__PURE__ */ jsx36(
+          DisclosureHeader4,
+          {
+            type: "button",
+            variant: "label",
+            open: tagsOpen,
+            onClick: () => setTagsOpen((o) => !o),
+            title: "Tags",
+            meta: views.tags.length,
+            className: "w-full px-2.5"
+          }
+        ),
         tagsOpen ? views.tags.map((e) => /* @__PURE__ */ jsx36(Entry, { on: view === e.view, glyph: e.glyph, label: e.label, count: e.count, onClick: () => onView(e.view) }, e.view)) : null
       ] }) : null
     ] }),
@@ -8007,11 +8043,19 @@ function VaultSidebar({ vault, choices, onVault, view, allCount, deletedCount, v
       /* @__PURE__ */ jsx36(Entry, { on: false, glyph: SafeGlyph, label: "Backup", onClick: () => onPanel("backup") }),
       /* @__PURE__ */ jsx36(Entry, { on: false, glyph: ShieldGlyph, label: "Browsers that fill", onClick: () => onPanel("devices") }),
       hasNativeImport ? /* @__PURE__ */ jsx36(Entry, { on: false, glyph: ImportGlyph, label: "Import passkeys", onClick: () => onPanel("import-passkeys") }) : null,
-      nativeProvider && nativeProvider.status !== "unavailable" ? /* @__PURE__ */ jsxs34("button", { type: "button", onClick: nativeProvider.openSetup, className: "flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-sm hover:bg-sidebar-accent", children: [
-        /* @__PURE__ */ jsx36(ShieldGlyph, { className: "size-4 shrink-0" }),
-        /* @__PURE__ */ jsx36("span", { className: "min-w-0 flex-1 truncate", children: "System AutoFill" }),
-        /* @__PURE__ */ jsx36("span", { className: cn14("text-xs", nativeProvider.status === "ready" ? "text-success" : "text-warning"), children: nativeProvider.status === "ready" ? "On" : "Set up" })
-      ] }) : null,
+      nativeProvider && nativeProvider.status !== "unavailable" ? /* @__PURE__ */ jsx36(
+        Tile6,
+        {
+          type: "button",
+          variant: "quiet",
+          dense: true,
+          onClick: nativeProvider.openSetup,
+          icon: /* @__PURE__ */ jsx36(ShieldGlyph, { className: "size-4 shrink-0" }),
+          title: "System AutoFill",
+          end: /* @__PURE__ */ jsx36("span", { className: cn12("text-xs", nativeProvider.status === "ready" ? "text-success" : "text-warning"), children: nativeProvider.status === "ready" ? "On" : "Set up" }),
+          className: "w-full"
+        }
+      ) : null,
       onOpenWeb ? /* @__PURE__ */ jsx36(Entry, { on: false, glyph: ExternalGlyph, label: "Open on the web", onClick: onOpenWeb }) : null,
       onLock ? /* @__PURE__ */ jsx36(Entry, { on: false, glyph: LockGlyph, label: "Lock", onClick: onLock }) : null
     ] })
@@ -8625,7 +8669,7 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
   return /* @__PURE__ */ jsxs35("div", { ref: rootRef, className: "flex h-full min-h-0 w-full flex-col bg-background text-foreground", children: [
     refreshError ? /* @__PURE__ */ jsxs35("div", { role: "status", className: "flex items-center gap-3 border-b border-border bg-muted px-4 py-2 text-sm", children: [
       /* @__PURE__ */ jsx37("span", { className: "min-w-0 flex-1 truncate text-warning", title: refreshError, children: "Couldn\u2019t refresh. Showing what was loaded." }),
-      /* @__PURE__ */ jsx37("button", { type: "button", className: "shrink-0 text-primary hover:underline", onClick: refresh, children: "Try again" })
+      /* @__PURE__ */ jsx37(Button33, { type: "button", variant: "link", className: "shrink-0", onClick: refresh, children: "Try again" })
     ] }) : null,
     hasPrompts ? (
       // "Save this login?" and "Turn on filling" show above the list in every view, not only "This page".
@@ -8640,7 +8684,7 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
         snap.unavailable.join(", "),
         ". Showing the rest."
       ] }),
-      /* @__PURE__ */ jsx37("button", { type: "button", className: "shrink-0 text-primary hover:underline", onClick: refresh, children: "Try again" })
+      /* @__PURE__ */ jsx37(Button33, { type: "button", variant: "link", className: "shrink-0", onClick: refresh, children: "Try again" })
     ] }) : null,
     /* @__PURE__ */ jsxs35("div", { className: `grid min-h-0 w-full flex-1 ${grid} overflow-hidden`, children: [
       mode === "full" ? /* @__PURE__ */ jsx37(