@ai-matrx/vault 0.1.1 → 0.1.2

package/dist/index.js

@@ -103,7 +103,7 @@ var init_keepass_xml_worker_client = __esm({
 // src/VaultApp.tsx
 import { useCallback as useCallback5, useEffect as useEffect22, useMemo as useMemo6, useRef as useRef19, useState as useState39 } from "react";
 import { DropdownMenu as DropdownMenu6, DropdownMenuContent as DropdownMenuContent6, DropdownMenuItem as DropdownMenuItem5, DropdownMenuTrigger as DropdownMenuTrigger6 } from "@ai-matrx/design-system";
-import { Button as Button33, SearchField as SearchField4, Select as Select12 } from "@ai-matrx/design-system/controls";
+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";
 
 // src/notice.tsx
@@ -4560,7 +4560,7 @@ function ItemIcon({ definitionKey, family, site, size = "md", inverted = false }
 import { useEffect as useEffect15, useMemo as useMemo3, useRef as useRef14, 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 cn12 } from "@ai-matrx/design-system";
-import { Button as Button21, CONTROLS_CONTAINER_CLASS, Select as Select9, Switch as Switch5 } from "@ai-matrx/design-system/controls";
+import { Badge as Badge7, Button as Button21, CONTROLS_CONTAINER_CLASS, OptionCombobox, Switch as Switch5 } from "@ai-matrx/design-system/controls";
 import { confirm as confirm9 } from "@ai-matrx/kit/confirm-opener";
 
 // src/activity/FilesSection.tsx
@@ -5612,7 +5612,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 ownerLabel = item && item.owner.kind !== "me" ? item.owner.label : 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(UsersGlyph, {}) } : 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: [
@@ -5621,7 +5621,8 @@ function ItemPane(props) {
     /* @__PURE__ */ jsxs24("div", { className: "flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsx26("h2", { className: "truncate text-base font-semibold leading-tight", children: editing ? draft.name || (mode === "new" ? `New ${typeLabel.toLowerCase()}` : item?.name) : item?.name }),
       /* @__PURE__ */ jsxs24("span", { className: "flex min-w-0 items-center gap-1 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsx26("span", { className: "truncate", children: [typeLabel, ownerLabel].filter(Boolean).join(" \xB7 ") }),
+        typeLabel ? /* @__PURE__ */ jsx26("span", { className: "truncate", children: typeLabel }) : null,
+        shownOwner ? /* @__PURE__ */ jsx26(Badge7, { className: "shrink-0", icon: shownOwner.glyph, "aria-label": `Saved in ${shownOwner.label}`, children: shownOwner.label }) : null,
         item && !editing ? /* @__PURE__ */ jsx26(SharingSummary, { item, port, className: "hidden truncate before:mr-1 before:content-['\xB7'] sm:inline" }, `${item.updatedAt}-${refreshKey ?? ""}`) : null
       ] })
     ] }),
@@ -5697,8 +5698,25 @@ function ItemPane(props) {
     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(
+          OptionCombobox,
+          {
+            value: owner,
+            onChange: setOwner,
+            ariaLabel: "Save to",
+            searchable: organizations.length > 6,
+            searchPlaceholder: "Find an organization",
+            groups: [
+              { heading: "Just you", options: ["me"] },
+              ...organizations.length > 0 ? [{ heading: "Organizations", options: organizations.map((o) => o.id) }] : [],
+              { heading: "Send", options: ["person"] }
+            ],
+            getLabel: (v) => v === "me" ? "Personal" : v === "person" ? "Someone else" : organizations.find((o) => o.id === v)?.name ?? v,
+            getHint: (v) => v === "me" ? "Only you" : v === "person" ? "Sent by email" : null,
+            renderIcon: (v) => v === "me" ? /* @__PURE__ */ jsx26(PersonGlyph, { className: "size-4" }) : v === "person" ? /* @__PURE__ */ jsx26(SendGlyph, { className: "size-4" }) : /* @__PURE__ */ jsx26(BuildingGlyph, { className: "size-4" })
+          }
+        ) }) : null,
         /* @__PURE__ */ jsx26(EditRow, { label: "Name", value: draft.name, onChange: (v) => patch({ name: v }), placeholder: "Name", autoFocus: mode === "new" }),
-        mode === "new" ? /* @__PURE__ */ jsx26(Row, { label: "Save to", children: /* @__PURE__ */ jsx26(Select9, { value: owner, onValueChange: setOwner, "aria-label": "Save to", options: [{ value: "me", label: "Personal" }, ...organizations.map((o) => ({ value: o.id, label: o.name })), { value: "person", label: "Someone else" }] }) }) : null,
         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
@@ -5848,8 +5866,9 @@ var SORTS2 = [
   { value: "updated", label: "Recently changed" },
   { value: "created", label: "Recently added" }
 ];
-function subtitleOf(item) {
-  return siteOf(item) || item.definitionLabel;
+function subtitleOf(item, withOwner) {
+  const what = siteOf(item) || item.definitionLabel;
+  return withOwner ? `${what} \xB7 ${item.owner.label}` : what;
 }
 function ItemList({ title, items, definitions, port, selectedId, onSelect, query, onQuery, sort, onSort, onNew, matchingIds, header }) {
   const pinned = matchingIds ? items.filter((i) => matchingIds.has(i.id)) : [];
@@ -5870,7 +5889,8 @@ function ItemList({ title, items, definitions, port, selectedId, onSelect, query
       listRef.current?.querySelector(`[data-item="${next.id}"]`)?.scrollIntoView({ block: "nearest" });
     }
   };
-  const row = (i) => /* @__PURE__ */ jsx27(ListRow, { item: i, family: familyOf2(i.definitionKey), port, on: i.id === selectedId, onSelect }, i.id);
+  const mixedOwners = new Set(items.map((i) => i.owner.organizationId ?? i.owner.kind)).size > 1;
+  const row = (i) => /* @__PURE__ */ jsx27(ListRow, { item: i, family: familyOf2(i.definitionKey), port, on: i.id === selectedId, onSelect, withOwner: mixedOwners }, i.id);
   const sortLabel = SORTS2.find((s) => s.value === sort)?.label ?? "Name";
   return /* @__PURE__ */ jsxs25("section", { "aria-label": title, className: "flex h-full min-h-0 flex-col border-r border-border bg-background", children: [
     /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-2 px-3 pb-2 pt-3", children: [
@@ -5902,7 +5922,7 @@ function ItemList({ title, items, definitions, port, selectedId, onSelect, query
     ] }) })
   ] });
 }
-function ListRow({ item, family, port, on, onSelect }) {
+function ListRow({ item, family, port, on, onSelect, withOwner }) {
   const confirmed = useConfirmed();
   const copy = useCopy();
   const notify = useNotify();
@@ -5933,7 +5953,7 @@ function ListRow({ item, family, port, on, onSelect }) {
           /* @__PURE__ */ jsx27(ItemIcon, { definitionKey: item.definitionKey, family, site: siteOf(item), inverted: on }),
           /* @__PURE__ */ jsxs25("span", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
             /* @__PURE__ */ jsx27("span", { className: "truncate text-sm font-medium", children: item.name }),
-            /* @__PURE__ */ jsx27("span", { className: "truncate text-xs text-muted-foreground", children: subtitleOf(item) })
+            /* @__PURE__ */ jsx27("span", { className: "truncate text-xs text-muted-foreground", children: subtitleOf(item, withOwner) })
           ] })
         ]
       }
@@ -6201,7 +6221,7 @@ function NewItemFlow({ definitions, url, onUrl, onChoose, onCancel }) {
 import { useEffect as useEffect18, useRef as useRef16, useState as useState30 } from "react";
 import { confirm as confirm10 } from "@ai-matrx/kit/confirm-opener";
 import { Checkbox as Checkbox2 } from "@ai-matrx/design-system";
-import { Badge as Badge7, Button as Button26, Field as Field11, RegionSkeleton as RegionSkeleton2, SegmentedControl as SegmentedControl5, Textarea as Textarea4 } from "@ai-matrx/design-system/controls";
+import { Badge as Badge8, Button as Button26, Field as Field11, RegionSkeleton as RegionSkeleton2, SegmentedControl as SegmentedControl5, Textarea as Textarea4 } from "@ai-matrx/design-system/controls";
 
 // src/sharing/secure-link-logic.ts
 import { formatDurationMinutes } from "@ai-matrx/kit/format";
@@ -6406,7 +6426,7 @@ function SecureLinkPanel({ item, port, onClose }) {
       onClose,
       footer: /* @__PURE__ */ jsxs29("div", { className: "flex w-full flex-wrap items-center gap-2", children: [
         /* @__PURE__ */ jsx31("div", { className: "w-full sm:w-auto sm:min-w-0 sm:flex-1", children: /* @__PURE__ */ jsx31(StatusLine, { error, notice }) }),
-        sameChannelSent && !error ? /* @__PURE__ */ jsx31(Badge7, { tone: "warning", children: "Both by email" }) : null,
+        sameChannelSent && !error ? /* @__PURE__ */ jsx31(Badge8, { tone: "warning", children: "Both by email" }) : null,
         /* @__PURE__ */ jsx31(Button26, { variant: "quiet", className: "ml-auto", onClick: onClose, children: "Close" }),
         /* @__PURE__ */ jsx31(Button26, { variant: "primary", disabled: !canSend, onClick: () => void send(), children: busy === "send" ? "Sending\u2026" : "Send link" })
       ] }),
@@ -6463,7 +6483,7 @@ function SecureLinkPanel({ item, port, onClose }) {
           ] }) })
         ] }) : 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: [
-          /* @__PURE__ */ jsx31(Badge7, { tone: STATUS_TONE[row.status] ?? "neutral", children: statusWord(row.status) }),
+          /* @__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
       ]
@@ -6738,7 +6758,7 @@ function ApprovePanel({ port, host, onClose, approvalKey, label, kind = "browser
 // src/native/NativeImportPanel.tsx
 import { useEffect as useEffect21, useMemo as useMemo5, useState as useState33 } from "react";
 import { confirm as confirm12 } from "@ai-matrx/kit/confirm-opener";
-import { Badge as Badge8, Button as Button28, Select as Select10 } from "@ai-matrx/design-system/controls";
+import { Badge as Badge9, Button as Button28, Select as Select9 } from "@ai-matrx/design-system/controls";
 
 // src/native/logic.ts
 var ACTIVE_PHASES = /* @__PURE__ */ new Set(["authorizing", "importing"]);
@@ -7057,7 +7077,7 @@ function Importer({ bridge, readLimits, activeOrganizationId, organizations, onC
   ] }) : /* @__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(Select10, { value: organizationId, options, "aria-label": "Save to", disabled: busy, onValueChange: setOrganizationId }) }),
+      /* @__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" }) })
     ] }) : null,
@@ -7065,7 +7085,7 @@ function Importer({ bridge, readLimits, activeOrganizationId, organizations, onC
       Windowed,
       {
         items: preview.slots,
-        render: (slot) => /* @__PURE__ */ jsx33(Row, { label: /* @__PURE__ */ jsx33(Badge8, { 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(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)
       }
     ) }) : null,
     status && !preview ? /* @__PURE__ */ jsxs31(Section, { title: `${accounted(status)} of ${status.total} done`, children: [
@@ -7432,7 +7452,7 @@ function MatchRow({ itemId, item, tag, family, port, busy, running, onOpen, onFi
 // src/Sidebar.tsx
 import { useState as useState38 } from "react";
 import { cn as cn15 } from "@ai-matrx/design-system";
-import { Select as Select11 } from "@ai-matrx/design-system/controls";
+import { Select as Select10 } from "@ai-matrx/design-system/controls";
 import { jsx as jsx38, jsxs as jsxs36 } from "react/jsx-runtime";
 function vaultChoices(items, organizations, current) {
   const n = (f) => items.filter(f).length;
@@ -7446,7 +7466,7 @@ function vaultChoices(items, organizations, current) {
   ];
 }
 function VaultSelect({ value, choices, onChange }) {
-  return /* @__PURE__ */ jsx38(Select11, { value, onValueChange: onChange, "aria-label": "Vault", options: choices.map((c) => ({ value: c.value, label: c.label, meta: String(c.count) })) });
+  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 familyOf = (key, definitions) => definitions.find((d) => d.key === key)?.family ?? "generic";
@@ -7717,7 +7737,7 @@ function Workspace({ port, host = NO_HOST, layout = "auto", location, onLocation
   const title = loc.vault === "all" && loc.view === "all" ? "All items" : viewLabel(loc.view, views);
   const compactHeader = mode === "full" ? void 0 : /* @__PURE__ */ jsxs37("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] gap-2", children: [
     /* @__PURE__ */ jsx39(VaultSelect, { value: loc.vault, choices, onChange: (vault) => go({ vault, itemId: null, panel: null }) }),
-    /* @__PURE__ */ jsx39(Select12, { value: loc.view, onValueChange: (view) => go({ view, itemId: null, panel: null }), options: viewOptions(views, inThisVault.length, deleted.length, hasFavorites, port.lists.recents !== void 0, host.page !== void 0), "aria-label": "Show" }),
+    /* @__PURE__ */ jsx39(Select11, { value: loc.view, onValueChange: (view) => go({ view, itemId: null, panel: null }), options: viewOptions(views, inThisVault.length, deleted.length, hasFavorites, port.lists.recents !== void 0, host.page !== void 0), "aria-label": "Show" }),
     /* @__PURE__ */ jsxs37(DropdownMenu6, { children: [
       /* @__PURE__ */ jsx39(DropdownMenuTrigger6, { asChild: true, children: /* @__PURE__ */ jsx39(Button33, { variant: "quiet", icon: /* @__PURE__ */ jsx39(MoreGlyph, {}), "aria-label": "Vault actions" }) }),
       /* @__PURE__ */ jsxs37(DropdownMenuContent6, { align: "end", children: [