@elizaos/plugin-contacts 2.0.3-beta.2 → 2.0.3-beta.3

package/dist/components/ContactsAppView.js

@@ -0,0 +1,747 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Contacts
+} from "@elizaos/capacitor-contacts";
+import { Button, Input } from "@elizaos/ui";
+import { useAgentElement } from "@elizaos/ui/agent-surface";
+import {
+  navigateToMessagesWithNumber,
+  navigateToPhoneWithNumber
+} from "@elizaos/ui/app-navigate-view";
+import { PermissionRecoveryCallout } from "@elizaos/ui/components";
+import { isNative } from "@elizaos/ui/platform";
+import {
+  ArrowLeft,
+  ChevronLeft,
+  Mail,
+  MessageSquareText,
+  Phone,
+  Plus,
+  Star,
+  Upload
+} from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+const EMPTY_FORM = {
+  displayName: "",
+  phoneNumber: "",
+  emailAddress: ""
+};
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) {
+    const first2 = parts[0];
+    return first2?.charAt(0).toUpperCase() ?? "?";
+  }
+  const first = parts[0]?.charAt(0) ?? "";
+  const last = parts[parts.length - 1]?.charAt(0) ?? "";
+  return `${first}${last}`.toUpperCase() || "?";
+}
+function dedupePreservingOrder(values) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const value of values) {
+    if (seen.has(value)) continue;
+    seen.add(value);
+    result.push(value);
+  }
+  return result;
+}
+function isPermissionRecoveryError(message) {
+  const normalized = message.toLowerCase();
+  return normalized.includes("permission") || normalized.includes("denied") || normalized.includes("access is needed") || normalized.includes("read_contacts");
+}
+function ContactsAppView({ exitToApps, t }) {
+  const [contacts, setContacts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [mode, setMode] = useState("list");
+  const [selectedId, setSelectedId] = useState(null);
+  const [form, setForm] = useState(EMPTY_FORM);
+  const [submitting, setSubmitting] = useState(false);
+  const fileInputRef = useRef(null);
+  const refresh = useCallback(async () => {
+    if (!isNative) {
+      setContacts([]);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const status = await Contacts.requestPermissions().catch(() => null);
+      if (status && status.contacts !== "granted") {
+        setContacts([]);
+        setError(
+          "Contacts access is needed to show your address book. Grant it in your device settings, then retry."
+        );
+        return;
+      }
+      const result = await Contacts.listContacts({});
+      setContacts(result.contacts);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    void refresh();
+    const interval = setInterval(() => void refresh(), 2e4);
+    return () => clearInterval(interval);
+  }, [refresh]);
+  const selected = useMemo(
+    () => contacts.find((c) => c.id === selectedId) ?? null,
+    [contacts, selectedId]
+  );
+  const handleSelect = useCallback((id) => {
+    setSelectedId(id);
+    setMode("detail");
+  }, []);
+  const handleBackToList = useCallback(() => {
+    setMode("list");
+    setSelectedId(null);
+  }, []);
+  const handleOpenNew = useCallback(() => {
+    setForm(EMPTY_FORM);
+    setMode("new");
+  }, []);
+  const handleSubmitNew = useCallback(
+    async (event) => {
+      event.preventDefault();
+      const displayName = form.displayName.trim();
+      if (displayName.length === 0) return;
+      const payload = { displayName };
+      const phone = form.phoneNumber.trim();
+      const email = form.emailAddress.trim();
+      if (phone.length > 0) payload.phoneNumber = phone;
+      if (email.length > 0) payload.emailAddress = email;
+      setSubmitting(true);
+      setError(null);
+      try {
+        await Contacts.createContact(payload);
+        await refresh();
+        setMode("list");
+        setForm(EMPTY_FORM);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [form, refresh]
+  );
+  const handleImportClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const handleFileChange = useCallback(
+    async (event) => {
+      const file = event.target.files?.[0];
+      event.target.value = "";
+      if (!file) return;
+      setLoading(true);
+      setError(null);
+      try {
+        const vcardText = await file.text();
+        await Contacts.importVCard({ vcardText });
+        await refresh();
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+        setLoading(false);
+      }
+    },
+    [refresh]
+  );
+  const backLabel = mode === "list" ? t("nav.back", { defaultValue: "Back" }) : t("nav.backToList", { defaultValue: "Back to list" });
+  const back = useAgentElement({
+    id: "nav-back",
+    role: "button",
+    label: backLabel,
+    group: "contacts-nav",
+    description: mode === "list" ? "Leave the contacts app" : "Return to the contacts list"
+  });
+  const newLabel = t("contacts.new", { defaultValue: "New contact" });
+  const newEl = useAgentElement({
+    id: "action-new",
+    role: "button",
+    label: newLabel,
+    group: "contacts-actions",
+    description: "Open the new contact form"
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "contacts-shell",
+      className: "fixed inset-0 z-50 flex h-[100vh] flex-col overflow-hidden bg-bg pb-[var(--safe-area-bottom,0px)] pl-[var(--safe-area-left,0px)] pr-[var(--safe-area-right,0px)] pt-[var(--safe-area-top,0px)] supports-[height:100dvh]:h-[100dvh]",
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: ".vcf,text/vcard,text/x-vcard",
+            className: "hidden",
+            onChange: handleFileChange
+          }
+        ),
+        /* @__PURE__ */ jsxs("header", { className: "flex shrink-0 items-center justify-between px-3 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                ref: back.ref,
+                ...back.agentProps,
+                variant: "ghost",
+                size: "icon",
+                className: "h-9 w-9 shrink-0 text-muted hover:text-txt",
+                onClick: mode === "list" ? exitToApps : handleBackToList,
+                "aria-label": backLabel,
+                children: mode === "list" ? /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("h1", { className: "truncate text-base font-semibold text-txt", children: mode === "detail" && selected ? selected.displayName : mode === "new" ? t("contacts.new", { defaultValue: "New contact" }) : t("contacts.title", { defaultValue: "Contacts" }) })
+          ] }),
+          mode === "list" && /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: newEl.ref,
+              ...newEl.agentProps,
+              variant: "ghost",
+              size: "icon",
+              className: "h-9 w-9 text-muted hover:text-txt",
+              onClick: handleOpenNew,
+              "aria-label": newLabel,
+              "data-testid": "contacts-new",
+              children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        mode === "list" && /* @__PURE__ */ jsx("p", { "data-testid": "contacts-search-hint", className: "sr-only", children: t("contacts.searchHint", {
+          defaultValue: "Search contacts by typing in the chat."
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "chat-native-scrollbar flex-1 overflow-y-auto", children: [
+          error && isPermissionRecoveryError(error) ? /* @__PURE__ */ jsx(
+            PermissionRecoveryCallout,
+            {
+              permission: "contacts",
+              title: t("contacts.permissionTitle", {
+                defaultValue: "Contacts access is off"
+              }),
+              description: error,
+              onRetry: refresh,
+              retryLabel: t("actions.retry", { defaultValue: "Try again" }),
+              className: "mx-4 mt-4",
+              testId: "contacts-permission-callout"
+            }
+          ) : error ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "alert",
+              className: "mx-4 mt-4 rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger",
+              children: error
+            }
+          ) : null,
+          mode === "list" && /* @__PURE__ */ jsx(
+            ContactList,
+            {
+              contacts,
+              loading: loading && contacts.length === 0,
+              empty: !loading && contacts.length === 0,
+              onSelect: handleSelect,
+              onImport: handleImportClick,
+              t
+            }
+          ),
+          mode === "detail" && selected && /* @__PURE__ */ jsx(ContactDetail, { contact: selected, t }),
+          mode === "new" && /* @__PURE__ */ jsx(
+            NewContactForm,
+            {
+              form,
+              submitting,
+              onChange: setForm,
+              onSubmit: handleSubmitNew,
+              onCancel: handleBackToList,
+              t
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ContactList({
+  contacts,
+  loading,
+  empty,
+  onSelect,
+  onImport,
+  t
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-16 text-sm text-muted", children: t("contacts.loading", { defaultValue: "Loading" }) });
+  }
+  if (empty) {
+    return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-sm flex-col items-center gap-3 px-4 py-16 text-center", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "flex h-16 w-16 items-center justify-center",
+          style: { background: "var(--accent-subtle)" },
+          children: /* @__PURE__ */ jsx(AddressBookMotif, {})
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 text-base font-semibold text-txt", children: t("contacts.empty.title", { defaultValue: "None" }) }),
+      /* @__PURE__ */ jsx("p", { className: "sr-only", children: t("contacts.empty.body", {
+        defaultValue: "Import vCard or add contact."
+      }) }),
+      /* @__PURE__ */ jsx(ImportVCardButton, { onImport, t })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("ul", { children: contacts.map((contact, index) => /* @__PURE__ */ jsx(
+    ContactListItem,
+    {
+      contact,
+      index,
+      onSelect,
+      t
+    },
+    contact.id
+  )) });
+}
+function AddressBookMotif() {
+  return /* @__PURE__ */ jsxs("svg", { width: "88", height: "88", viewBox: "0 0 88 88", fill: "none", role: "img", children: [
+    /* @__PURE__ */ jsx("title", { children: "Address book" }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "20",
+        y: "14",
+        width: "48",
+        height: "60",
+        rx: "10",
+        fill: "var(--surface)",
+        stroke: "var(--accent)",
+        strokeWidth: "2"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: "20",
+        y1: "30",
+        x2: "14",
+        y2: "30",
+        stroke: "var(--accent)",
+        strokeWidth: "3",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: "20",
+        y1: "44",
+        x2: "14",
+        y2: "44",
+        stroke: "var(--accent)",
+        strokeWidth: "3",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: "20",
+        y1: "58",
+        x2: "14",
+        y2: "58",
+        stroke: "var(--accent)",
+        strokeWidth: "3",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: "44",
+        cy: "38",
+        r: "8",
+        fill: "var(--accent-subtle)",
+        stroke: "var(--accent)",
+        strokeWidth: "2"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M32 60 C32 51 56 51 56 60",
+        fill: "none",
+        stroke: "var(--accent)",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function ImportVCardButton({ onImport, t }) {
+  const label = t("contacts.import", { defaultValue: "Import vCard" });
+  const { ref, agentProps } = useAgentElement({
+    id: "action-import",
+    role: "button",
+    label,
+    group: "contacts-actions",
+    description: "Import contacts from a vCard file"
+  });
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      ...agentProps,
+      variant: "default",
+      onClick: onImport,
+      className: "mt-2",
+      children: [
+        /* @__PURE__ */ jsx(Upload, { className: "mr-2 h-4 w-4" }),
+        label
+      ]
+    }
+  );
+}
+function ContactListItem({
+  contact,
+  index,
+  onSelect,
+  t
+}) {
+  const name = contact.displayName || t("contacts.unnamed", { defaultValue: "Unnamed" });
+  const primaryPhone = contact.phoneNumbers[0] ?? "";
+  const primaryEmail = contact.emailAddresses[0] ?? "";
+  const subtitle = primaryPhone || primaryEmail;
+  const { ref, agentProps } = useAgentElement({
+    id: `contact-${contact.id}`,
+    role: "list-item",
+    label: name,
+    group: "contacts-list",
+    description: "Open this contact's details",
+    order: index
+  });
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      ...agentProps,
+      type: "button",
+      onClick: () => onSelect(contact.id),
+      className: "flex w-full items-center gap-3 px-3 py-2.5 text-left hover:bg-bg-accent/40 focus:bg-bg-accent/40 focus:outline-none",
+      children: [
+        /* @__PURE__ */ jsx(Avatar, { name: contact.displayName, photoUri: contact.photoUri }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-txt", children: name }),
+            contact.starred && /* @__PURE__ */ jsx(
+              Star,
+              {
+                className: "h-3.5 w-3.5 shrink-0 text-[var(--accent)]",
+                fill: "currentColor",
+                "aria-label": t("contacts.starred", {
+                  defaultValue: "Starred"
+                })
+              }
+            )
+          ] }),
+          subtitle && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted", children: subtitle })
+        ] })
+      ]
+    }
+  ) });
+}
+function ContactDetail({ contact, t }) {
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-xl flex-col gap-6 px-4 py-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
+      /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          name: contact.displayName,
+          photoUri: contact.photoUri,
+          size: "lg"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-txt", children: contact.displayName || t("contacts.unnamed", { defaultValue: "Unnamed" }) }),
+        contact.starred && /* @__PURE__ */ jsxs("div", { className: "mt-1 inline-flex items-center gap-1 text-xs text-[var(--accent)]", children: [
+          /* @__PURE__ */ jsx(Star, { className: "h-3 w-3", fill: "currentColor" }),
+          t("contacts.starred", { defaultValue: "Starred" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ContactFieldGroup,
+      {
+        label: t("contacts.phones", { defaultValue: "Phone" }),
+        items: contact.phoneNumbers,
+        renderItem: (value) => /* @__PURE__ */ jsx(ContactPhoneRow, { value, contactId: contact.id, t }),
+        emptyLabel: t("contacts.noPhones", {
+          defaultValue: "None"
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ContactFieldGroup,
+      {
+        label: t("contacts.emails", { defaultValue: "Email" }),
+        items: contact.emailAddresses,
+        renderItem: (value) => /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: `mailto:${value}`,
+            className: "flex items-center gap-2 text-sm text-txt hover:underline",
+            children: [
+              /* @__PURE__ */ jsx(Mail, { className: "h-4 w-4 text-muted" }),
+              /* @__PURE__ */ jsx("span", { className: "break-all", children: value })
+            ]
+          }
+        ),
+        emptyLabel: t("contacts.noEmails", {
+          defaultValue: "None"
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "sr-only", children: t("contacts.detail.readOnlyNote", {
+      defaultValue: "Editing existing contacts is unavailable on this device."
+    }) })
+  ] });
+}
+function ContactPhoneRow({
+  value,
+  contactId,
+  t
+}) {
+  const callLabel = t("contacts.call", { defaultValue: "Call" });
+  const textLabel = t("contacts.text", { defaultValue: "Text" });
+  const callEl = useAgentElement({
+    id: `call-${contactId}-${value}`,
+    role: "button",
+    label: `${callLabel} ${value}`,
+    group: "contacts-detail-phone",
+    description: "Open the Phone dialer pre-filled with this number"
+  });
+  const textEl = useAgentElement({
+    id: `text-${contactId}-${value}`,
+    role: "button",
+    label: `${textLabel} ${value}`,
+    group: "contacts-detail-phone",
+    description: "Open Messages to text this number"
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(Phone, { className: "h-4 w-4 shrink-0 text-muted" }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 break-all text-sm text-txt", children: value }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: callEl.ref,
+        ...callEl.agentProps,
+        variant: "ghost",
+        size: "icon",
+        className: "h-8 w-8 shrink-0 rounded-lg text-muted hover:text-txt",
+        onClick: () => navigateToPhoneWithNumber(value),
+        "aria-label": `${callLabel} ${value}`,
+        "data-testid": "contacts-detail-call",
+        children: /* @__PURE__ */ jsx(Phone, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: textEl.ref,
+        ...textEl.agentProps,
+        variant: "ghost",
+        size: "icon",
+        className: "h-8 w-8 shrink-0 rounded-lg text-muted hover:text-txt",
+        onClick: () => navigateToMessagesWithNumber(value),
+        "aria-label": `${textLabel} ${value}`,
+        "data-testid": "contacts-detail-text",
+        children: /* @__PURE__ */ jsx(MessageSquareText, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+function ContactFieldGroup({
+  label,
+  items,
+  renderItem,
+  emptyLabel
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2 pt-2", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-muted", children: label }),
+    items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "sr-only", children: emptyLabel }) : /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: dedupePreservingOrder(items).map((value) => /* @__PURE__ */ jsx("li", { children: renderItem(value) }, value)) })
+  ] });
+}
+function NewContactForm({
+  form,
+  submitting,
+  onChange,
+  onSubmit,
+  onCancel,
+  t
+}) {
+  const canSubmit = form.displayName.trim().length > 0 && !submitting;
+  const nameId = useId();
+  const phoneId = useId();
+  const emailId = useId();
+  const nameEl = useAgentElement({
+    id: "input-name",
+    role: "text-input",
+    label: t("contacts.form.name", { defaultValue: "Name" }),
+    group: "contacts-form",
+    description: "Display name for the new contact"
+  });
+  const phoneEl = useAgentElement({
+    id: "input-phone",
+    role: "text-input",
+    label: t("contacts.form.phone", { defaultValue: "Phone" }),
+    group: "contacts-form",
+    description: "Phone number for the new contact"
+  });
+  const emailEl = useAgentElement({
+    id: "input-email",
+    role: "text-input",
+    label: t("contacts.form.email", { defaultValue: "Email" }),
+    group: "contacts-form",
+    description: "Email address for the new contact"
+  });
+  const cancelEl = useAgentElement({
+    id: "action-cancel",
+    role: "button",
+    label: t("actions.cancel", { defaultValue: "Cancel" }),
+    group: "contacts-form",
+    description: "Discard the new contact and return to the list"
+  });
+  const saveEl = useAgentElement({
+    id: "action-save",
+    role: "button",
+    label: t("contacts.form.save", { defaultValue: "Save" }),
+    group: "contacts-form",
+    description: "Save the new contact",
+    status: canSubmit ? void 0 : "disabled"
+  });
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit,
+      className: "mx-auto flex max-w-md flex-col gap-3 px-3 py-4",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: nameId, className: "text-sm font-medium text-muted", children: t("contacts.form.name", { defaultValue: "Name" }) }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: nameEl.ref,
+              ...nameEl.agentProps,
+              id: nameId,
+              value: form.displayName,
+              onChange: (e) => onChange({ ...form, displayName: e.target.value }),
+              placeholder: t("contacts.form.namePlaceholder", {
+                defaultValue: "Full name"
+              }),
+              required: true,
+              autoFocus: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: phoneId, className: "text-sm font-medium text-muted", children: t("contacts.form.phone", { defaultValue: "Phone" }) }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: phoneEl.ref,
+              ...phoneEl.agentProps,
+              id: phoneId,
+              type: "tel",
+              inputMode: "tel",
+              value: form.phoneNumber,
+              onChange: (e) => onChange({ ...form, phoneNumber: e.target.value }),
+              placeholder: "+1 555 123 4567"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: emailId, className: "text-sm font-medium text-muted", children: t("contacts.form.email", { defaultValue: "Email" }) }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: emailEl.ref,
+              ...emailEl.agentProps,
+              id: emailId,
+              type: "email",
+              inputMode: "email",
+              value: form.emailAddress,
+              onChange: (e) => onChange({ ...form, emailAddress: e.target.value }),
+              placeholder: "name@example.com"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: cancelEl.ref,
+              ...cancelEl.agentProps,
+              type: "button",
+              variant: "ghost",
+              onClick: onCancel,
+              disabled: submitting,
+              children: t("actions.cancel", { defaultValue: "Cancel" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref: saveEl.ref,
+              ...saveEl.agentProps,
+              type: "submit",
+              disabled: !canSubmit,
+              children: submitting ? t("contacts.form.saving", { defaultValue: "Saving\u2026" }) : t("contacts.form.save", { defaultValue: "Save" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Avatar({
+  name,
+  photoUri,
+  size = "md"
+}) {
+  const dimension = size === "lg" ? "h-16 w-16 text-xl" : "h-10 w-10 text-sm";
+  if (photoUri) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: photoUri,
+        alt: "",
+        className: `${dimension} shrink-0 object-cover`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: `${dimension} flex shrink-0 items-center justify-center bg-bg-accent font-semibold text-muted`,
+      children: getInitials(name)
+    }
+  );
+}
+export {
+  ContactsAppView
+};
+//# sourceMappingURL=ContactsAppView.js.map