@ai-matrx/vault 0.1.42 → 0.1.44

package/dist/index.js

@@ -1112,7 +1112,7 @@ function HistoryRow({ item, port, page, entry, label, onRestored, onConflict, on
 import { useEffect as useEffect9, useState as useState11 } from "react";
 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";
+import { CopyIcon as CopyIcon5 } from "@ai-matrx/design-system/icons";
 
 // src/ItemIcon.tsx
 import { cn as cn4 } from "@ai-matrx/design-system";
@@ -1447,6 +1447,7 @@ function useCanScan() {
   }, []);
   return ok;
 }
+var SETUP_KEY_PLACEHOLDER = "Setup key or otpauth link";
 var CAMERA_NOTES = {
   blocked: "Camera blocked. Paste the key or choose a QR image.",
   missing: "No camera. Paste the key or choose a QR image.",
@@ -1507,7 +1508,7 @@ function QrScanInline({ onResult, onClose }) {
   if (error) {
     return /* @__PURE__ */ jsxs6("p", { className: "flex items-center gap-2 px-1 pt-1 text-xs text-muted-foreground", role: "status", "data-camera-note": "", children: [
       /* @__PURE__ */ jsx7(CameraGlyph, { className: "size-3.5 shrink-0", "aria-hidden": true }),
-      /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 truncate", children: error }),
+      /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 break-words", children: error }),
       /* @__PURE__ */ jsx7(Button5, { variant: "quiet", onClick: onClose, children: "Dismiss" })
     ] });
   }
@@ -1522,7 +1523,7 @@ function QrScanInline({ onResult, onClose }) {
     ] })
   ] });
 }
-function OtpSetupRow({ value, onChange, label = "Authenticator", placeholder = "Paste setup key or otpauth link", disabled = false, autoFocus = false, onImage, onRecognized, status, autoStartCamera = false }) {
+function OtpSetupRow({ value, onChange, label = "Authenticator", placeholder = SETUP_KEY_PLACEHOLDER, disabled = false, autoFocus = false, onImage, onRecognized, status, autoStartCamera = false }) {
   const file = useRef6(null);
   const canScan = useCanScan();
   const [scanning, setScanning] = useState8(false);
@@ -1659,6 +1660,7 @@ import { useState as useState9 } from "react";
 import { Button as Button6, Select } from "@ai-matrx/design-system/controls";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@ai-matrx/design-system";
 import { confirm as confirm2 } from "@ai-matrx/kit/confirm-opener";
+import { CopyIcon as CopyIcon4 } from "@ai-matrx/design-system/icons";
 
 // src/authenticator/port.ts
 var OTP_SEED_KEY = "totp_seed";
@@ -1723,11 +1725,16 @@ function useOtpActions(port, item, onChanged) {
 function TotpRow({ port, item, onChanged }) {
   const a = useOtpActions(port, item, onChanged);
   const live = useLiveCode(port, item, a.enabled && !a.removed);
+  const { copy } = useCopied();
   const canManage = item.capabilities.canManage || item.capabilities.canEdit;
   if (a.removed || !item.authenticator) return null;
   const menu = canManage ? /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
     /* @__PURE__ */ jsx8(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx8(Button6, { variant: "quiet", icon: /* @__PURE__ */ jsx8(MoreGlyph, {}), "aria-label": "Authenticator options", disabled: a.busy }) }),
     /* @__PURE__ */ jsxs7(DropdownMenuContent, { align: "end", className: "min-w-44", children: [
+      a.enabled && live.code ? /* @__PURE__ */ jsxs7(DropdownMenuItem, { onSelect: () => live.code && void copy(live.code), children: [
+        /* @__PURE__ */ jsx8(CopyIcon4, { className: "size-4" }),
+        "Copy code"
+      ] }) : null,
       /* @__PURE__ */ jsxs7(DropdownMenuItem, { onSelect: () => void a.setEnabled(!a.enabled), children: [
         /* @__PURE__ */ jsx8(PowerGlyph, { className: "size-4" }),
         a.enabled ? "Turn off" : "Turn on"
@@ -1739,12 +1746,12 @@ function TotpRow({ port, item, onChanged }) {
       ] })
     ] })
   ] }) : null;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx8("div", { className: "@container/otprow", children: /* @__PURE__ */ jsx8(
     VaultRow,
     {
       label: "Authenticator",
       actions: /* @__PURE__ */ jsxs7(Fragment5, { children: [
-        a.enabled ? /* @__PURE__ */ jsx8(CopyCodeButton, { live, label: item.name }) : null,
+        a.enabled ? /* @__PURE__ */ jsx8("span", { className: "hidden @[24rem]/otprow:contents", "data-copy-code-button": "", children: /* @__PURE__ */ jsx8(CopyCodeButton, { live, label: item.name }) }) : null,
         menu
       ] }),
       children: a.error ? /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2", children: [
@@ -1758,7 +1765,7 @@ function TotpRow({ port, item, onChanged }) {
         /* @__PURE__ */ jsx8(Button6, { variant: "quiet", onClick: live.retry, children: "Retry" })
       ] }) : /* @__PURE__ */ jsx8(CodeButton, { live, digits: item.authenticator.digits, label: item.name })
     }
-  );
+  ) });
 }
 function TotpEditRow({ value, onChange, hasExisting, item, port, onEnrolled, onRecognized }) {
   const confirmed = useConfirmed();
@@ -1782,7 +1789,7 @@ function TotpEditRow({ value, onChange, hasExisting, item, port, onEnrolled, onR
         setStatus(null);
         onChange(v);
       },
-      placeholder: hasExisting ? "Paste a new key to replace" : "Paste setup key or otpauth link",
+      placeholder: hasExisting ? "Paste a new key to replace" : SETUP_KEY_PLACEHOLDER,
       status,
       ...uploadImage ? { onImage: (f) => void uploadImage(f) } : {},
       ...onRecognized ? { onRecognized } : {}
@@ -2127,71 +2134,76 @@ function OtpListRow({ port, item, family, entry, onOpen, onOpenInNewTab, onRenam
   const canManage = item.capabilities.canManage || item.capabilities.canEdit;
   if (a.removed) return null;
   const sub = a.error ?? [entry?.account, loginSiteOf(item) || entry?.issuer].filter((v, i, all) => Boolean(v) && all.indexOf(v) === i).join(" \xB7 ");
-  return /* @__PURE__ */ jsxs9("div", { className: "grid min-h-14 grid-cols-[2rem_minmax(0,1fr)_auto_auto] items-center gap-x-1 rounded-lg px-2 py-1.5 transition-colors hover:bg-accent/50", children: [
-    /* @__PURE__ */ 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,
-        oneLine: true,
-        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
-    ] }) : live.error ? /* @__PURE__ */ jsxs9("span", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx10("span", { className: "max-w-40 truncate text-xs text-destructive", title: live.error, children: live.error }),
-      /* @__PURE__ */ jsx10(Button8, { variant: "quiet", onClick: live.retry, children: "Retry" })
-    ] }) : /* @__PURE__ */ jsx10(CodeButton, { live, digits: item.authenticator?.digits ?? 6, label: item.name }) }),
-    /* @__PURE__ */ jsxs9(DropdownMenu2, { children: [
-      /* @__PURE__ */ jsx10(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx10(Button8, { variant: "quiet", icon: /* @__PURE__ */ jsx10(MoreGlyph, {}), "aria-label": `${item.name} options`, disabled: a.busy }) }),
-      /* @__PURE__ */ jsxs9(DropdownMenuContent2, { align: "end", className: "min-w-44", children: [
-        /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onSelect: onOpen, children: [
-          /* @__PURE__ */ jsx10(ExternalGlyph, { className: "size-4" }),
-          "Open login"
-        ] }),
-        onOpenInNewTab ? /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onSelect: onOpenInNewTab, children: [
-          /* @__PURE__ */ jsx10(ExternalGlyph, { className: "size-4" }),
-          "Open in new tab"
-        ] }) : null,
-        live.code ? /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onSelect: () => live.code && void copy(live.code), children: [
-          /* @__PURE__ */ jsx10(CopyIcon4, { className: "size-4" }),
-          "Copy code"
-        ] }) : null,
-        canManage ? /* @__PURE__ */ jsxs9(Fragment7, { children: [
-          /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onSelect: onRename, children: [
-            /* @__PURE__ */ jsx10(PencilGlyph, { className: "size-4" }),
-            "Rename"
-          ] }),
-          /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onSelect: () => void a.setEnabled(!a.enabled), children: [
-            /* @__PURE__ */ jsx10(PowerGlyph, { className: "size-4" }),
-            a.enabled ? "Turn off" : "Turn on"
+  return (
+    // A container, not the window, decides: below 26rem of row width the code drops onto its own line
+    // under the name (the name keeps the whole row's width, the code is never squeezed); above it
+    // everything sits on one line. The side panel and the 22.5rem frame are narrow at any window size.
+    /* @__PURE__ */ jsx10("div", { className: "@container/otp", children: /* @__PURE__ */ jsxs9("div", { className: "grid min-h-14 grid-cols-[2rem_minmax(0,1fr)_auto] items-center gap-x-1 gap-y-0.5 rounded-lg px-2 py-1.5 transition-colors hover:bg-accent/50 @[26rem]/otp:grid-cols-[2rem_minmax(0,1fr)_auto_auto]", children: [
+      /* @__PURE__ */ 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: "col-start-1 row-start-1 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,
+          oneLine: true,
+          className: "col-start-2 row-start-1 min-w-0"
+        }
+      ),
+      /* @__PURE__ */ jsx10("div", { className: "col-start-2 row-start-2 flex min-w-0 justify-start @[26rem]/otp:col-start-3 @[26rem]/otp:row-start-1 @[26rem]/otp:shrink-0 @[26rem]/otp:justify-end", children: !a.enabled ? /* @__PURE__ */ 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
+      ] }) : live.error ? /* @__PURE__ */ jsxs9("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx10("span", { className: "max-w-40 truncate text-xs text-destructive", title: live.error, children: live.error }),
+        /* @__PURE__ */ jsx10(Button8, { variant: "quiet", onClick: live.retry, children: "Retry" })
+      ] }) : /* @__PURE__ */ jsx10(CodeButton, { live, digits: item.authenticator?.digits ?? 6, label: item.name }) }),
+      /* @__PURE__ */ jsxs9(DropdownMenu2, { children: [
+        /* @__PURE__ */ jsx10(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx10(Button8, { variant: "quiet", icon: /* @__PURE__ */ jsx10(MoreGlyph, {}), "aria-label": `${item.name} options`, disabled: a.busy, className: "col-start-3 row-start-1 @[26rem]/otp:col-start-4" }) }),
+        /* @__PURE__ */ jsxs9(DropdownMenuContent2, { align: "end", className: "min-w-44", children: [
+          /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onSelect: onOpen, children: [
+            /* @__PURE__ */ jsx10(ExternalGlyph, { className: "size-4" }),
+            "Open login"
           ] }),
-          /* @__PURE__ */ jsx10(DropdownMenuSeparator2, {}),
-          /* @__PURE__ */ jsxs9(DropdownMenuItem2, { className: "text-destructive focus:text-destructive", onSelect: () => void a.remove(), children: [
-            /* @__PURE__ */ jsx10(TrashGlyph, { className: "size-4" }),
-            "Remove"
-          ] })
-        ] }) : null
+          onOpenInNewTab ? /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onSelect: onOpenInNewTab, children: [
+            /* @__PURE__ */ jsx10(ExternalGlyph, { className: "size-4" }),
+            "Open in new tab"
+          ] }) : null,
+          live.code ? /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onSelect: () => live.code && void copy(live.code), children: [
+            /* @__PURE__ */ jsx10(CopyIcon5, { className: "size-4" }),
+            "Copy code"
+          ] }) : null,
+          canManage ? /* @__PURE__ */ jsxs9(Fragment7, { children: [
+            /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onSelect: onRename, children: [
+              /* @__PURE__ */ jsx10(PencilGlyph, { className: "size-4" }),
+              "Rename"
+            ] }),
+            /* @__PURE__ */ jsxs9(DropdownMenuItem2, { onSelect: () => void a.setEnabled(!a.enabled), children: [
+              /* @__PURE__ */ jsx10(PowerGlyph, { className: "size-4" }),
+              a.enabled ? "Turn off" : "Turn on"
+            ] }),
+            /* @__PURE__ */ jsx10(DropdownMenuSeparator2, {}),
+            /* @__PURE__ */ jsxs9(DropdownMenuItem2, { className: "text-destructive focus:text-destructive", onSelect: () => void a.remove(), children: [
+              /* @__PURE__ */ jsx10(TrashGlyph, { className: "size-4" }),
+              "Remove"
+            ] })
+          ] }) : null
+        ] })
       ] })
-    ] })
-  ] });
+    ] }) })
+  );
 }
 
 // src/fields/SettingsPanels.tsx
@@ -2495,7 +2507,7 @@ function ItemSettingsPanel({ item, port, onClose, onChanged, onPanel }) {
 import { createContext as createContext3, useContext as useContext3, useEffect as useEffect10, useRef as useRef8, useState as useState13 } from "react";
 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";
+import { CopyIcon as CopyIcon6 } from "@ai-matrx/design-system/icons";
 
 // src/generator/generate.ts
 import {
@@ -2653,7 +2665,7 @@ function PasswordGenerator({ limits: source, onUse, useLabel = "Use" }) {
       /* @__PURE__ */ jsxs11("div", { className: "flex min-h-7 items-start gap-1", children: [
         /* @__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(CopyIcon6, {}), "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: [
@@ -4539,7 +4551,7 @@ import { useEffect as useEffect16, useRef as useRef14, useState as useState27 }
 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 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";
+import { CopyIcon as CopyIcon8 } from "@ai-matrx/design-system/icons";
 
 // src/ItemPane.tsx
 import { Fragment as Fragment16, useEffect as useEffect15, useMemo as useMemo3, useRef as useRef13, useState as useState26 } from "react";
@@ -4813,7 +4825,7 @@ function DraftFilesSection({ files, onFiles }) {
 // src/fields/RecoveryCodesRow.tsx
 import { useState as useState20 } from "react";
 import { Badge as Badge6, Button as Button16, Textarea as Textarea3 } from "@ai-matrx/design-system/controls";
-import { CopyIcon as CopyIcon6 } from "@ai-matrx/design-system/icons";
+import { CopyIcon as CopyIcon7 } from "@ai-matrx/design-system/icons";
 import { Fragment as Fragment13, jsx as jsx18, jsxs as jsxs17 } 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;
@@ -4908,7 +4920,7 @@ function RecoveryCodesRow({ item, field, port, onChanged }) {
       children: sealed ? /* @__PURE__ */ jsx18(Badge6, { icon: /* @__PURE__ */ jsx18(LockGlyph, {}), children: "Never shown" }) : codes ? /* @__PURE__ */ jsxs17("ul", { className: "flex flex-col gap-0.5", "aria-label": "Recovery codes", children: [
         codes.map((code, i) => /* @__PURE__ */ jsxs17("li", { className: "flex min-h-7 items-center gap-1", children: [
           /* @__PURE__ */ jsx18("code", { className: "min-w-0 flex-1 break-all font-mono text-sm text-foreground", children: code }),
-          /* @__PURE__ */ jsx18(Button16, { variant: "quiet", icon: /* @__PURE__ */ jsx18(CopyIcon6, {}), "aria-label": `Copy code ${i + 1}`, onClick: () => void copyValue2(code, "Recovery code") }),
+          /* @__PURE__ */ jsx18(Button16, { variant: "quiet", icon: /* @__PURE__ */ jsx18(CopyIcon7, {}), "aria-label": `Copy code ${i + 1}`, onClick: () => void copyValue2(code, "Recovery code") }),
           canEdit ? /* @__PURE__ */ jsx18(Button16, { variant: "quiet", icon: /* @__PURE__ */ jsx18(CheckGlyph, {}), disabled: busy, onClick: () => void markUsed(i), children: "Mark used" }) : null
         ] }, `${i}-${code}`)),
         error ? /* @__PURE__ */ jsx18("li", { role: "alert", className: "text-xs text-destructive", children: error }) : null
@@ -5899,20 +5911,20 @@ function ItemPane(props) {
   };
   const tagsVisible = showTags || draft.tags.length > 0 || tagsText !== "";
   const descriptionVisible = showDescription || draft.description !== "";
-  const header = /* @__PURE__ */ jsxs22("header", { className: "flex min-h-14 items-center gap-2 border-b border-border px-3 py-2 sm:gap-3 sm:px-5", children: [
+  const header = /* @__PURE__ */ jsx24("div", { className: "@container/vhead", children: /* @__PURE__ */ jsxs22("header", { className: "flex min-h-14 items-center gap-2 border-b border-border px-3 py-2 @[30rem]/vhead:gap-3 @[30rem]/vhead:px-5", children: [
     onBack ? /* @__PURE__ */ jsx24(Button21, { variant: "quiet", icon: /* @__PURE__ */ jsx24(ChevronLeftGlyph, {}), "aria-label": "Back", onClick: mode === "new" ? onCancelNew : onBack }) : null,
     /* @__PURE__ */ jsx24(ItemIcon, { definitionKey: definition?.key ?? item?.definitionKey ?? "custom", family: definition?.family ?? "generic", site: item ? loginSiteOf(item) : loginSiteOf({ loginUrls: draft.loginUrls }), size: "lg" }),
     /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      /* @__PURE__ */ jsx24("h2", { className: "truncate text-base font-semibold leading-tight", children: editing ? draft.name || (mode === "new" ? `New ${typeLabel.toLowerCase()}` : item?.name) : item?.name }),
-      /* @__PURE__ */ jsxs22("span", { className: "flex min-w-0 items-center gap-1 text-xs text-muted-foreground", children: [
-        typeLabel ? /* @__PURE__ */ jsx24("span", { className: "truncate", children: typeLabel }) : null,
+      /* @__PURE__ */ jsx24("h2", { className: "line-clamp-2 break-words text-base font-semibold leading-tight", children: editing ? draft.name || (mode === "new" ? `New ${typeLabel.toLowerCase()}` : item?.name) : item?.name }),
+      /* @__PURE__ */ jsxs22("span", { className: "flex min-w-0 flex-wrap items-center gap-x-1 text-xs text-muted-foreground", children: [
+        typeLabel ? /* @__PURE__ */ jsx24("span", { className: "break-words", children: typeLabel }) : null,
         shownOwner ? /* @__PURE__ */ jsx24(Badge7, { className: "shrink-0", icon: shownOwner.glyph, "aria-label": `Saved in ${shownOwner.label}`, title: item && mode !== "new" ? ownerDetail(item.owner) : void 0, children: shownOwner.label }) : null,
         item && mode !== "new" && item.owner.memberShared ? /* @__PURE__ */ jsx24("span", { className: "shrink-0", "data-member-shared": "", children: "\xB7 A member\u2019s own" }) : null,
-        item && !editing ? /* @__PURE__ */ jsx24(SharingSummary, { item, port, className: "hidden truncate before:mr-1 before:content-['\xB7'] sm:inline" }, `${item.updatedAt}-${refreshKey ?? ""}`) : null
+        item && !editing ? /* @__PURE__ */ jsx24(SharingSummary, { item, port, className: "hidden truncate before:mr-1 before:content-['\xB7'] @[30rem]/vhead:inline" }, `${item.updatedAt}-${refreshKey ?? ""}`) : null
       ] })
     ] }),
     editing ? /* @__PURE__ */ jsxs22("div", { className: "flex shrink-0 items-center gap-2", children: [
-      dirty ? /* @__PURE__ */ jsxs22("span", { className: "hidden items-center gap-1.5 text-xs text-muted-foreground sm:flex", role: "status", children: [
+      dirty ? /* @__PURE__ */ jsxs22("span", { className: "hidden items-center gap-1.5 text-xs text-muted-foreground @[30rem]/vhead:flex", role: "status", children: [
         /* @__PURE__ */ jsx24("span", { className: "size-1.5 rounded-full bg-warning", "aria-hidden": true }),
         "Unsaved"
       ] }) : null,
@@ -5931,8 +5943,8 @@ function ItemPane(props) {
           children: "Fill"
         }
       ) : null,
-      favorite ? /* @__PURE__ */ jsx24("span", { className: "hidden sm:contents", children: /* @__PURE__ */ jsx24(Button21, { variant: "quiet", icon: /* @__PURE__ */ jsx24(StarGlyph, { className: favorite.on ? "fill-current text-warning" : "size-4" }), "aria-label": favorite.on ? "Remove from favorites" : "Add to favorites", pressed: favorite.on, onClick: favorite.toggle }) }) : null,
-      canManage ? /* @__PURE__ */ jsx24("span", { className: "hidden sm:contents", children: /* @__PURE__ */ jsx24(Button21, { variant: "quiet", icon: /* @__PURE__ */ jsx24(ShareGlyph, {}), "aria-label": "Share", onClick: () => onPanel("share") }) }) : null,
+      favorite ? /* @__PURE__ */ jsx24("span", { className: "hidden @[30rem]/vhead:contents", children: /* @__PURE__ */ jsx24(Button21, { variant: "quiet", icon: /* @__PURE__ */ jsx24(StarGlyph, { className: favorite.on ? "fill-current text-warning" : "size-4" }), "aria-label": favorite.on ? "Remove from favorites" : "Add to favorites", pressed: favorite.on, onClick: favorite.toggle }) }) : null,
+      canManage ? /* @__PURE__ */ jsx24("span", { className: "hidden @[30rem]/vhead:contents", children: /* @__PURE__ */ jsx24(Button21, { variant: "quiet", icon: /* @__PURE__ */ jsx24(ShareGlyph, {}), "aria-label": "Share", onClick: () => onPanel("share") }) }) : null,
       canEdit ? /* @__PURE__ */ jsx24(Button21, { variant: "outline", icon: /* @__PURE__ */ jsx24(PencilGlyph, {}), collapse: "container", "aria-label": "Edit", onClick: () => onMode("edit"), children: "Edit" }) : null,
       /* @__PURE__ */ jsxs22(DropdownMenu3, { children: [
         /* @__PURE__ */ jsx24(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsx24(Button21, { variant: "quiet", icon: /* @__PURE__ */ jsx24(MoreGlyph, {}), "aria-label": "More actions" }) }),
@@ -5986,7 +5998,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: cn10(CONTROLS_CONTAINER_CLASS, "flex h-full min-h-0 flex-col bg-background"), children: [
     header,
@@ -6356,7 +6368,7 @@ function ListRow({ item, family, port, on, onSelect, withOwner, ownContextMenu,
   ];
   const entriesRef = useRef14(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: 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 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(CopyIcon8, { className: "size-4" });
   const menuItem = (e) => /* @__PURE__ */ jsxs23(DropdownMenuItem4, { disabled: e.disabled ?? false, onSelect: e.onSelect, children: [
     glyphOf(e),
     e.label
@@ -7792,7 +7804,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 CopyIcon8 } from "@ai-matrx/design-system/icons";
+import { CopyIcon as CopyIcon9 } from "@ai-matrx/design-system/icons";
 import { Fragment as Fragment22, jsx as jsx34, jsxs as jsxs32 } from "react/jsx-runtime";
 var HOLD_MS = 6e4;
 function PageGenerator({ fields }) {
@@ -7850,7 +7862,7 @@ function PageGenerator({ fields }) {
       {
         label: "New password",
         actions: /* @__PURE__ */ jsxs32(Fragment22, { children: [
-          value ? /* @__PURE__ */ jsx34(Button31, { variant: "quiet", icon: /* @__PURE__ */ jsx34(CopyIcon8, {}), "aria-label": "Copy password", onClick: () => void copy(value, "Password") }) : null,
+          value ? /* @__PURE__ */ jsx34(Button31, { variant: "quiet", icon: /* @__PURE__ */ jsx34(CopyIcon9, {}), "aria-label": "Copy password", onClick: () => void copy(value, "Password") }) : null,
           /* @__PURE__ */ jsxs32(Popover2, { open, onOpenChange: setOpen, children: [
             /* @__PURE__ */ jsx34(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx34(Button31, { variant: "outline", icon: /* @__PURE__ */ jsx34(KeyGlyph, {}), disabled: busy, children: "Generate" }) }),
             /* @__PURE__ */ jsx34(PopoverContent2, { sizing: "content", align: "end", children: open ? /* @__PURE__ */ jsx34(PasswordGenerator, { limits, useLabel: "Fill page", onUse: (v) => void onUse(v) }) : null })