@agent-native/core 0.117.1 → 0.118.0

package/src/client/sharing/ShareDialog.tsx

@@ -1,25 +1,35 @@
-import * as Select from "@radix-ui/react-select";
 import {
-  IconX,
-  IconTrash,
-  IconLock,
-  IconWorld,
+  ActionButton,
+  Avatar as DesignSystemAvatar,
+  Dialog as DesignSystemDialog,
+  IconButton,
+  Picker,
+  Status,
+  TextArea,
+  TextField,
+} from "@agent-native/toolkit/design-system";
+import {
   IconCheck,
+  IconCode,
   IconCopy,
   IconLink,
+  IconLock,
   IconMail,
-  IconCode,
-  IconChevronDown,
+  IconTrash,
   IconUsersGroup,
+  IconWorld,
 } from "@tabler/icons-react";
-import { useEffect, useState, type ReactNode } from "react";
-import { createPortal } from "react-dom";
+import type { ReactNode } from "react";
 
-import { agentNativePath } from "../api-path.js";
-import { writeClipboardText } from "../clipboard.js";
-import { useT } from "../i18n.js";
-import { useActionQuery, useActionMutation } from "../use-action.js";
 import { cn } from "../utils.js";
+import {
+  useShareDialogController,
+  type ResourceShare,
+  type ShareDialogController,
+  type ShareDialogPerson,
+  type ShareDialogTab,
+  type ShareVisibility,
+} from "./useShareDialogController.js";
 
 export interface ShareDialogProps {
   open: boolean;
@@ -45,138 +55,52 @@ export interface ShareDialogProps {
   linkTabExtras?: ReactNode;
 }
 
-type Visibility = "private" | "org" | "public";
-type Role = "viewer" | "editor" | "admin";
-
-interface Share {
-  id: string;
-  principalType: "user" | "org";
-  principalId: string;
-  displayName?: string | null;
-  role: Role;
-}
-
-interface SharesResponse {
-  ownerEmail: string | null;
-  orgId: string | null;
-  visibility: Visibility | null;
-  role?: "owner" | Role;
-  shares: Share[];
-}
-
-interface OrgMember {
-  email: string;
-  name?: string | null;
-}
-
-function useOrgMembers(): OrgMember[] {
-  const [members, setMembers] = useState<OrgMember[]>([]);
-  useEffect(() => {
-    let cancelled = false;
-    fetch(agentNativePath("/_agent-native/org/members"))
-      .then((r) => (r.ok ? r.json() : null))
-      .then((data) => {
-        if (cancelled || !data) return;
-        const list = Array.isArray(data?.members) ? data.members : [];
-        setMembers(
-          list
-            .map((m: any) => ({
-              email: typeof m?.email === "string" ? m.email : "",
-              name: typeof m?.name === "string" ? m.name : null,
-            }))
-            .filter((m: OrgMember) => m.email),
-        );
-      })
-      .catch(() => {});
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-  return members;
-}
-
-function displayName(email: string, members: OrgMember[]): string {
-  const normalized = email.trim().toLowerCase();
-  const match = members.find((m) => m.email.toLowerCase() === normalized);
-  if (match?.name && match.name.trim()) return match.name;
-  return normalized.includes("@") ? email : "Unknown person";
-}
-
 const BUTTON_BASE =
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors active:!scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 const BUTTON_OUTLINE_SM = cn(
   BUTTON_BASE,
-  "h-9 px-3 border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+  "!h-9 !px-3 border border-input bg-background hover:bg-accent hover:text-accent-foreground",
 );
 const BUTTON_PRIMARY_SM = cn(
   BUTTON_BASE,
-  "h-9 px-4 bg-primary text-primary-foreground hover:bg-primary/90",
+  "!h-9 !px-4 bg-primary text-primary-foreground hover:bg-primary/90",
 );
 const BUTTON_GHOST_ICON = cn(
   BUTTON_BASE,
-  "h-8 w-8 p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+  "!h-8 !w-8 !p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground",
 );
 
-const VIS_ICONS: Record<Visibility, typeof IconLock> = {
+const VIS_ICONS: Record<ShareVisibility, typeof IconLock> = {
   private: IconLock,
   org: IconUsersGroup,
   public: IconWorld,
 };
 
-function useVisibilityMeta() {
-  const t = useT();
-  return {
-    private: {
-      label: t("share.private"),
-      description: t("share.privateDescription"),
-      Icon: VIS_ICONS.private,
-    },
-    org: {
-      label: t("share.organization"),
-      description: t("share.organizationDescription"),
-      Icon: VIS_ICONS.org,
-    },
-    public: {
-      label: t("share.public"),
-      description: t("share.publicDescription"),
-      Icon: VIS_ICONS.public,
-    },
-  } satisfies Record<
-    Visibility,
-    { label: string; description: string; Icon: typeof IconLock }
-  >;
-}
-
-function useRoleOptions() {
-  const t = useT();
-  return [
-    {
-      value: "viewer",
-      label: t("share.viewer"),
-      description: t("share.viewerDescription"),
-    },
-    {
-      value: "editor",
-      label: t("share.editor"),
-      description: t("share.editorDescription"),
-    },
-    {
-      value: "admin",
-      label: t("share.admin"),
-      description: t("share.adminDescription"),
-    },
-  ] satisfies Array<{ value: Role; label: string; description: string }>;
-}
+const TAB_ICONS: Record<ShareDialogTab, typeof IconLink> = {
+  link: IconLink,
+  invite: IconMail,
+  embed: IconCode,
+};
 
 /**
  * Framework share dialog. Drop into any template via
- * `<ShareDialog open onClose resourceType resourceId />`. Passing
- * `shareUrl` lights up a Link tab with a copy field; passing `embedUrl`
- * lights up an Embed tab. With neither prop, renders a single Invite +
- * general-access panel (Google-Docs-lite).
+ * `<ShareDialog open onClose resourceType resourceId />`. Passing `shareUrl`
+ * lights up a Link tab with a copy field; passing `embedUrl` lights up an
+ * Embed tab. With neither prop, renders a single Invite + general-access
+ * panel (Google-Docs-lite).
  */
-export function ShareDialog(props: ShareDialogProps) {
-  const {
+export function ShareDialog({
+  open,
+  onClose,
+  resourceType,
+  resourceId,
+  resourceTitle,
+  shareUrl,
+  embedUrl,
+  embedTabContent,
+  linkTabExtras,
+}: ShareDialogProps) {
+  const controller = useShareDialogController({
     open,
     onClose,
     resourceType,
@@ -184,349 +108,194 @@ export function ShareDialog(props: ShareDialogProps) {
     resourceTitle,
     shareUrl,
     embedUrl,
-    embedTabContent,
-    linkTabExtras,
-  } = props;
-  const t = useT();
-
-  const sharesQuery = useActionQuery<SharesResponse>("list-resource-shares", {
-    resourceType,
-    resourceId,
   });
-  const orgMembers = useOrgMembers();
-
-  const hasLinkTab = Boolean(shareUrl);
-  const hasEmbedTab = Boolean(embedUrl);
-  const tabsEnabled = hasLinkTab || hasEmbedTab;
-
-  const [tab, setTab] = useState<"link" | "invite" | "embed">(
-    hasLinkTab ? "link" : "invite",
-  );
-
-  useEffect(() => {
-    if (!open) return;
-    setTab(hasLinkTab ? "link" : "invite");
-  }, [open, hasLinkTab]);
-
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, onClose]);
-
   if (!open) return null;
 
-  const titleText = resourceTitle
-    ? t("share.titleWithResource", { title: resourceTitle })
-    : t("share.titleWithType", { type: resourceType });
-
-  return createPortal(
-    <div
-      className="fixed inset-0 z-[2000] flex items-start justify-center bg-black/40 p-4 sm:items-center"
-      onClick={onClose}
+  return (
+    <DesignSystemDialog
+      open={controller.open}
+      onOpenChange={controller.onOpenChange}
+      title={
+        <span
+          className="truncate !text-base !leading-normal !tracking-normal !text-inherit"
+          title={controller.title}
+        >
+          {controller.title}
+        </span>
+      }
+      closeLabel={controller.labels.close}
+      size="large"
+      className="!top-4 !z-[2010] !block !max-h-none !w-[calc(100vw-2rem)] !max-w-lg !translate-y-0 !gap-0 !overflow-visible !rounded-xl !border-border !bg-popover !p-0 !text-popover-foreground !shadow-2xl sm:!top-1/2 sm:!-translate-y-1/2"
+      aria-label={controller.title}
     >
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-label={titleText}
-        className="w-full max-w-lg rounded-xl border border-border bg-popover text-popover-foreground shadow-2xl outline-none"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-start justify-between gap-3 px-5 pt-4 pb-3">
-          <div className="min-w-0 flex-1">
-            <div className="truncate text-base font-semibold" title={titleText}>
-              {titleText}
-            </div>
-            {sharesQuery.data?.ownerEmail ? (
-              <div className="mt-0.5 truncate text-xs text-muted-foreground">
-                {t("share.owner", {
-                  name: displayName(sharesQuery.data.ownerEmail, orgMembers),
-                })}
-              </div>
-            ) : null}
+      <div className="px-5 pt-0 pb-3">
+        {controller.ownerLabel ? (
+          <div className="truncate text-xs text-muted-foreground">
+            {controller.ownerLabel}
           </div>
-          <button
-            type="button"
-            aria-label={t("share.close")}
-            onClick={onClose}
-            className={BUTTON_GHOST_ICON}
-          >
-            <IconX size={16} />
-          </button>
-        </div>
+        ) : null}
+      </div>
 
-        {tabsEnabled ? (
-          <div
-            role="tablist"
-            aria-label={t("share.shareOptions")}
-            className="mx-5 mt-1 flex gap-1 border-b border-border"
-          >
-            {hasLinkTab ? (
-              <TabTrigger
-                active={tab === "link"}
-                onClick={() => setTab("link")}
-                icon={<IconLink size={14} strokeWidth={1.75} />}
-                label={t("share.link")}
-              />
-            ) : null}
-            <TabTrigger
-              active={tab === "invite"}
-              onClick={() => setTab("invite")}
-              icon={<IconMail size={14} strokeWidth={1.75} />}
-              label={t("share.invite")}
-            />
-            {hasEmbedTab ? (
+      {controller.tabsEnabled ? (
+        <div
+          role="tablist"
+          aria-label={controller.labels.shareOptions}
+          className="mx-5 mt-1 flex gap-1 border-b border-border"
+        >
+          {controller.tabs.map((tab) => {
+            const Icon = TAB_ICONS[tab.value];
+            return (
               <TabTrigger
-                active={tab === "embed"}
-                onClick={() => setTab("embed")}
-                icon={<IconCode size={14} strokeWidth={1.75} />}
-                label={t("share.embed")}
+                key={tab.value}
+                active={controller.activeTab === tab.value}
+                onClick={() => controller.setActiveTab(tab.value)}
+                icon={<Icon size={14} strokeWidth={1.75} />}
+                label={tab.label}
               />
-            ) : null}
-          </div>
-        ) : null}
-
-        <div className="px-5 py-4">
-          {tabsEnabled && tab === "link" && hasLinkTab ? (
-            <LinkTab
-              resourceType={resourceType}
-              resourceId={resourceId}
-              shareUrl={shareUrl!}
-              sharesQuery={sharesQuery}
-              extras={linkTabExtras}
-            />
-          ) : null}
-          {!tabsEnabled || tab === "invite" ? (
-            <InviteTab
-              resourceType={resourceType}
-              resourceId={resourceId}
-              shareUrl={shareUrl}
-              sharesQuery={sharesQuery}
-              showVisibility={!tabsEnabled}
-              orgMembers={orgMembers}
-            />
-          ) : null}
-          {tabsEnabled && tab === "embed" && hasEmbedTab
-            ? (embedTabContent ?? <DefaultEmbedBody embedUrl={embedUrl!} />)
-            : null}
+            );
+          })}
         </div>
+      ) : null}
 
-        <div className="flex justify-end border-t border-border px-5 py-3">
-          <button type="button" onClick={onClose} className={BUTTON_PRIMARY_SM}>
-            {t("share.done")}
-          </button>
-        </div>
+      <div className="px-5 py-4">
+        {controller.tabsEnabled && controller.activeTab === "link" ? (
+          <LinkTab controller={controller} extras={linkTabExtras} />
+        ) : null}
+        {!controller.tabsEnabled || controller.activeTab === "invite" ? (
+          <InviteTab
+            controller={controller}
+            showVisibility={!controller.tabsEnabled}
+          />
+        ) : null}
+        {controller.tabsEnabled && controller.activeTab === "embed"
+          ? (embedTabContent ?? <DefaultEmbedBody controller={controller} />)
+          : null}
+      </div>
+
+      <div className="flex justify-end border-t border-border px-5 py-3">
+        <ActionButton
+          type="button"
+          intent="primary"
+          emphasis="solid"
+          onPress={controller.close}
+          className={BUTTON_PRIMARY_SM}
+        >
+          {controller.labels.done}
+        </ActionButton>
       </div>
-    </div>,
-    document.body,
+    </DesignSystemDialog>
   );
 }
 
-// ---------------------------------------------------------------------------
-// Tabs
-// ---------------------------------------------------------------------------
-
-function TabTrigger(props: {
+function TabTrigger({
+  active,
+  onClick,
+  icon,
+  label,
+}: {
   active: boolean;
   onClick: () => void;
   icon: ReactNode;
   label: string;
 }) {
   return (
-    <button
+    <ActionButton
       type="button"
-      role="tab"
-      aria-selected={props.active}
-      onClick={props.onClick}
+      emphasis="ghost"
+      aria-pressed={active}
+      onPress={onClick}
       className={cn(
-        "inline-flex items-center gap-1.5 border-b-2 px-3 py-2 text-sm font-medium transition-colors",
-        props.active
+        "inline-flex !h-auto items-center gap-1.5 !rounded-none border-b-2 !px-3 !py-2 text-sm font-medium transition-colors hover:!bg-transparent active:!scale-100 focus-visible:!ring-0 focus-visible:!ring-offset-0 [&_svg]:!size-auto",
+        active
           ? "border-foreground text-foreground"
           : "border-transparent text-muted-foreground hover:text-foreground",
       )}
     >
-      {props.icon}
-      {props.label}
-    </button>
+      {icon}
+      {label}
+    </ActionButton>
   );
 }
 
-// ---------------------------------------------------------------------------
-// Link tab — visibility picker + copy-link field + optional extras
-// ---------------------------------------------------------------------------
-
-function LinkTab(props: {
-  resourceType: string;
-  resourceId: string;
-  shareUrl: string;
-  sharesQuery: ReturnType<typeof useActionQuery<SharesResponse>>;
+function LinkTab({
+  controller,
+  extras,
+}: {
+  controller: ShareDialogController;
   extras?: ReactNode;
 }) {
-  const { resourceType, resourceId, shareUrl, sharesQuery, extras } = props;
-  const t = useT();
-  const visibilityMeta = useVisibilityMeta();
-
-  const setVisibility = useActionMutation("set-resource-visibility");
-  const data = sharesQuery.data;
-  const visibility: Visibility =
-    (data?.visibility as Visibility | null) ?? "private";
-  const canManage = data?.role === "owner" || data?.role === "admin";
-  const meta = visibilityMeta[visibility];
-
-  const handleVisibility = (next: Visibility) => {
-    if (next === visibility) return;
-    if (!canManage) return;
-    setVisibility.mutate(
-      { resourceType, resourceId, visibility: next } as any,
-      { onSuccess: () => sharesQuery.refetch() },
-    );
-  };
-
+  const Icon = VIS_ICONS[controller.visibility.value];
   return (
     <div className="space-y-4">
       <div>
         <div className="mb-2 text-sm font-semibold">
-          {t("share.generalAccess")}
+          {controller.labels.generalAccess}
         </div>
         <div className="flex items-center gap-3">
           <span
             aria-hidden
             className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground"
           >
-            <meta.Icon size={16} strokeWidth={1.75} />
+            <Icon size={16} strokeWidth={1.75} />
           </span>
           <div className="min-w-0 flex-1">
-            <VisibilitySelect
-              value={visibility}
-              onChange={handleVisibility}
-              disabled={!canManage}
-            />
+            <VisibilitySelect controller={controller} />
             <div className="mt-0.5 text-xs text-muted-foreground">
-              {meta.description}
+              {controller.visibility.description}
             </div>
           </div>
         </div>
       </div>
-
-      <CopyField label={t("share.shareLink")} value={shareUrl} />
-
+      <CopyField
+        field="share-link"
+        label={controller.labels.shareLink}
+        value={controller.shareUrl!}
+        controller={controller}
+      />
       {extras}
     </div>
   );
 }
 
-// ---------------------------------------------------------------------------
-// Invite tab — invite-by-email + shares list + (optional) visibility
-// ---------------------------------------------------------------------------
-
-function InviteTab(props: {
-  resourceType: string;
-  resourceId: string;
-  shareUrl?: string;
-  sharesQuery: ReturnType<typeof useActionQuery<SharesResponse>>;
+function InviteTab({
+  controller,
+  showVisibility,
+}: {
+  controller: ShareDialogController;
   showVisibility: boolean;
-  orgMembers: OrgMember[];
 }) {
-  const {
-    resourceType,
-    resourceId,
-    shareUrl,
-    sharesQuery,
-    showVisibility,
-    orgMembers,
-  } = props;
-  const t = useT();
-  const visibilityMeta = useVisibilityMeta();
-
-  const share = useActionMutation("share-resource");
-  const unshare = useActionMutation("unshare-resource");
-  const setVisibility = useActionMutation("set-resource-visibility");
-
-  const [email, setEmail] = useState("");
-  const [role, setRole] = useState<Role>("viewer");
-  const [notifyPeople, setNotifyPeople] = useState(true);
-  const hasInviteEmail = email.trim().length > 0;
-
-  const data = sharesQuery.data;
-  const shares = data?.shares ?? [];
-  const visibility: Visibility =
-    (data?.visibility as Visibility | null) ?? "private";
-  const canManage = data?.role === "owner" || data?.role === "admin";
-  const meta = visibilityMeta[visibility];
-
-  const handleAdd = () => {
-    const trimmed = email.trim();
-    if (!trimmed) return;
-    share.mutate(
-      {
-        resourceType,
-        resourceId,
-        principalType: "user",
-        principalId: trimmed,
-        role,
-        notify: notifyPeople,
-        resourceUrl: getNotificationUrl(shareUrl),
-      } as any,
-      {
-        onSuccess: () => {
-          setEmail("");
-          sharesQuery.refetch();
-        },
-      },
-    );
-  };
-
-  const handleRemove = (s: Share) => {
-    unshare.mutate(
-      {
-        resourceType,
-        resourceId,
-        principalType: s.principalType,
-        principalId: s.principalId,
-      } as any,
-      { onSuccess: () => sharesQuery.refetch() },
-    );
-  };
-
-  const handleVisibility = (next: Visibility) => {
-    if (next === visibility) return;
-    if (!canManage) return;
-    setVisibility.mutate(
-      { resourceType, resourceId, visibility: next } as any,
-      { onSuccess: () => sharesQuery.refetch() },
-    );
-  };
-
+  const Icon = VIS_ICONS[controller.visibility.value];
   return (
     <div className="space-y-4">
-      {canManage ? (
+      {controller.canManage ? (
         <div className="space-y-2">
           <div className="flex items-stretch gap-2">
             <input
               type="email"
-              placeholder={t("share.addPeopleByEmail")}
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") handleAdd();
+              placeholder={controller.labels.addPeopleByEmail}
+              value={controller.invite.email}
+              onChange={(event) =>
+                controller.invite.setEmail(event.currentTarget.value)
+              }
+              onKeyDown={(event) => {
+                if (event.key === "Enter") controller.invite.submit();
               }}
               autoComplete="off"
               className="flex-1 min-w-0 h-9 rounded-md border border-input bg-background px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
             />
-            <RoleSelect value={role} onChange={setRole} />
+            <RoleSelect controller={controller} />
           </div>
-          {hasInviteEmail ? (
+          {controller.invite.showNotifyPeople ? (
             <label className="inline-flex items-center gap-2 text-xs text-muted-foreground">
               <input
                 type="checkbox"
-                checked={notifyPeople}
-                onChange={(e) => setNotifyPeople(e.target.checked)}
+                checked={controller.invite.notifyPeople}
+                onChange={(event) =>
+                  controller.invite.setNotifyPeople(event.currentTarget.checked)
+                }
                 className="h-4 w-4 rounded border-input accent-primary"
               />
-              {t("share.notifyPeople")}
+              {controller.labels.notifyPeople}
             </label>
           ) : null}
         </div>
@@ -534,50 +303,21 @@ function InviteTab(props: {
 
       <div>
         <div className="mb-2 text-sm font-semibold">
-          {t("share.peopleWithAccess")}
+          {controller.labels.peopleWithAccess}
         </div>
         <ul className="flex flex-col gap-1 list-none p-0 m-0">
-          {data?.ownerEmail ? (
-            <li className="flex items-center gap-3 px-1 py-1.5 text-sm">
-              <Avatar label={displayName(data.ownerEmail, orgMembers)} />
-              <span className="flex-1 min-w-0 truncate">
-                {displayName(data.ownerEmail, orgMembers)}
-              </span>
-              <span className="text-xs text-muted-foreground">
-                {t("share.ownerRole")}
-              </span>
-            </li>
-          ) : null}
-          {shares.map((s) => (
-            <li
-              key={`${s.principalType}:${s.principalId}`}
-              className="flex items-center gap-3 px-1 py-1.5 text-sm"
-            >
-              <Avatar
-                label={principalLabel(s, orgMembers)}
-                org={s.principalType === "org"}
-              />
-              <span className="flex-1 min-w-0 truncate">
-                {principalLabel(s, orgMembers)}
-              </span>
-              <span className="text-xs text-muted-foreground">
-                {cap(s.role)}
-              </span>
-              {canManage ? (
-                <button
-                  type="button"
-                  aria-label={t("share.remove")}
-                  onClick={() => handleRemove(s)}
-                  className={BUTTON_GHOST_ICON}
-                >
-                  <IconTrash size={14} />
-                </button>
-              ) : null}
-            </li>
+          {controller.people.map((person) => (
+            <PersonRow
+              key={person.key}
+              person={person}
+              canManage={controller.canManage}
+              removeLabel={controller.labels.remove}
+              onRemove={controller.removeShare}
+            />
           ))}
-          {!shares.length && !data?.ownerEmail ? (
+          {!controller.people.length ? (
             <li className="px-1 py-1.5 text-sm text-muted-foreground">
-              {t("share.noAccess")}
+              {controller.labels.noAccess}
             </li>
           ) : null}
         </ul>
@@ -586,23 +326,19 @@ function InviteTab(props: {
       {showVisibility ? (
         <div>
           <div className="mb-2 text-sm font-semibold">
-            {t("share.generalAccess")}
+            {controller.labels.generalAccess}
           </div>
           <div className="flex items-center gap-3">
             <span
               aria-hidden
               className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground"
             >
-              <meta.Icon size={16} strokeWidth={1.75} />
+              <Icon size={16} strokeWidth={1.75} />
             </span>
             <div className="min-w-0 flex-1">
-              <VisibilitySelect
-                value={visibility}
-                onChange={handleVisibility}
-                disabled={!canManage}
-              />
+              <VisibilitySelect controller={controller} />
               <div className="mt-0.5 text-xs text-muted-foreground">
-                {meta.description}
+                {controller.visibility.description}
               </div>
             </div>
           </div>
@@ -612,44 +348,93 @@ function InviteTab(props: {
   );
 }
 
-// ---------------------------------------------------------------------------
-// Default Embed body (simple responsive iframe snippet)
-// ---------------------------------------------------------------------------
+function PersonRow({
+  person,
+  canManage,
+  removeLabel,
+  onRemove,
+}: {
+  person: ShareDialogPerson;
+  canManage: boolean;
+  removeLabel: string;
+  onRemove: (share: ResourceShare) => void;
+}) {
+  return (
+    <li className="flex items-center gap-3 px-1 py-1.5 text-sm">
+      <DesignSystemAvatar
+        name={person.label}
+        fallback={
+          person.principalType === "org" ? (
+            <IconUsersGroup size={14} strokeWidth={1.75} />
+          ) : (
+            person.avatarText
+          )
+        }
+        size="compact"
+        className="inline-flex h-7 w-7 shrink-0 text-[11px] font-semibold"
+      />
+      <span className="flex-1 min-w-0 truncate">{person.label}</span>
+      <Status
+        tone="neutral"
+        size="compact"
+        className="border-0 bg-transparent px-0 text-xs text-muted-foreground"
+      >
+        {person.roleLabel}
+      </Status>
+      {canManage && person.share ? (
+        <IconButton
+          intent="danger"
+          emphasis="ghost"
+          size="compact"
+          icon={<IconTrash size={14} />}
+          label={removeLabel}
+          aria-label={removeLabel}
+          onPress={() => onRemove(person.share!)}
+          className={cn(BUTTON_GHOST_ICON, "[&_svg]:!size-auto")}
+        />
+      ) : null}
+    </li>
+  );
+}
 
-function DefaultEmbedBody({ embedUrl }: { embedUrl: string }) {
-  const t = useT();
-  const code = `<div style="position:relative;padding-bottom:56.25%;height:0"><iframe src="${embedUrl}" frameborder="0" allowfullscreen allow="autoplay; picture-in-picture" style="position:absolute;inset:0;width:100%;height:100%"></iframe></div>`;
+function DefaultEmbedBody({
+  controller,
+}: {
+  controller: ShareDialogController;
+}) {
   return (
     <div className="space-y-3">
-      <CopyField label={t("share.embedUrl")} value={embedUrl} />
-      <CopyField label={t("share.embedCode")} value={code} multiline />
+      <CopyField
+        field="embed-url"
+        label={controller.labels.embedUrl}
+        value={controller.embedUrl!}
+        controller={controller}
+      />
+      <CopyField
+        field="embed-code"
+        label={controller.labels.embedCode}
+        value={controller.embedCode!}
+        controller={controller}
+        multiline
+      />
     </div>
   );
 }
 
-// ---------------------------------------------------------------------------
-// Primitives
-// ---------------------------------------------------------------------------
-
 function CopyField({
+  field,
   label,
   value,
+  controller,
   multiline,
 }: {
+  field: string;
   label: string;
   value: string;
+  controller: ShareDialogController;
   multiline?: boolean;
 }) {
-  const [copied, setCopied] = useState(false);
-  const t = useT();
-  const copy = async () => {
-    if (!(await writeClipboardText(value))) {
-      setCopied(false);
-      return;
-    }
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1400);
-  };
+  const copied = controller.copiedField === field;
   return (
     <div>
       <div className="mb-1 text-xs font-medium text-muted-foreground">
@@ -657,190 +442,71 @@ function CopyField({
       </div>
       <div className="flex items-stretch gap-2">
         {multiline ? (
-          <textarea
+          <TextArea
             readOnly
             value={value}
-            className="flex-1 h-20 rounded-md border border-input bg-background px-3 py-2 text-xs font-mono text-foreground resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+            onChange={() => undefined}
+            aria-label={label}
+            className="flex-1 h-20 text-xs font-mono"
           />
         ) : (
-          <input
+          <TextField
             readOnly
             value={value}
-            className="flex-1 min-w-0 h-9 rounded-md border border-input bg-background px-3 text-xs font-mono text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            onChange={() => undefined}
+            aria-label={label}
+            className="flex-1 min-w-0 text-xs font-mono"
           />
         )}
-        <button
-          type="button"
-          onClick={copy}
-          aria-label={t("share.copy")}
-          className={cn(BUTTON_OUTLINE_SM, "w-9 px-0")}
-        >
-          {copied ? <IconCheck size={14} /> : <IconCopy size={14} />}
-        </button>
+        <IconButton
+          emphasis="outline"
+          size="compact"
+          icon={copied ? <IconCheck size={14} /> : <IconCopy size={14} />}
+          label={controller.labels.copy}
+          onPress={() => void controller.copy(field, value)}
+          aria-label={controller.labels.copy}
+          className={cn(BUTTON_OUTLINE_SM, "!w-9 !px-0 [&_svg]:!size-auto")}
+        />
       </div>
     </div>
   );
 }
 
-const selectContentClass =
-  "z-[2100] min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md";
-const selectItemClass =
-  "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-sm py-2 ps-8 pe-3 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-
-function SelectItems({
-  items,
-}: {
-  items: Array<{ value: string; label: string; description?: string }>;
-}) {
-  return (
-    <>
-      {items.map((it) => (
-        <Select.Item
-          key={it.value}
-          value={it.value}
-          className={selectItemClass}
-        >
-          <span className="absolute start-2 top-2 flex h-4 w-4 items-center justify-center">
-            <Select.ItemIndicator>
-              <IconCheck size={14} />
-            </Select.ItemIndicator>
-          </span>
-          <span className="flex flex-col">
-            <Select.ItemText>{it.label}</Select.ItemText>
-            {it.description ? (
-              <span className="text-xs text-muted-foreground">
-                {it.description}
-              </span>
-            ) : null}
-          </span>
-        </Select.Item>
-      ))}
-    </>
-  );
-}
-
-function RoleSelect(props: { value: Role; onChange: (v: Role) => void }) {
-  const t = useT();
-  const roleOptions = useRoleOptions();
-  const current =
-    roleOptions.find((o) => o.value === props.value) ?? roleOptions[0];
+function RoleSelect({ controller }: { controller: ShareDialogController }) {
   return (
-    <Select.Root
-      value={props.value}
-      onValueChange={(v) => props.onChange(v as Role)}
-    >
-      <Select.Trigger
-        aria-label={t("share.role")}
-        className={cn(
-          BUTTON_BASE,
-          "h-9 px-3 border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        )}
-      >
-        <Select.Value>{current.label}</Select.Value>
-        <Select.Icon>
-          <IconChevronDown size={14} />
-        </Select.Icon>
-      </Select.Trigger>
-      <Select.Portal>
-        <Select.Content
-          className={selectContentClass}
-          position="popper"
-          sideOffset={4}
-        >
-          <Select.Viewport>
-            <SelectItems items={roleOptions} />
-          </Select.Viewport>
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
+    <Picker
+      mode="select"
+      options={controller.invite.roleOptions}
+      value={controller.invite.role}
+      onChange={(value) => {
+        if (value === "viewer" || value === "editor" || value === "admin") {
+          controller.invite.setRole(value);
+        }
+      }}
+      aria-label={controller.labels.role}
+      className="w-auto"
+    />
   );
 }
 
-function VisibilitySelect(props: {
-  value: Visibility;
-  onChange: (v: Visibility) => void;
-  disabled?: boolean;
-  allowPrivate?: boolean;
-  allowPublic?: boolean;
+function VisibilitySelect({
+  controller,
+}: {
+  controller: ShareDialogController;
 }) {
-  const t = useT();
-  const visibilityMeta = useVisibilityMeta();
-  const current = visibilityMeta[props.value];
-  const allowPrivate = props.allowPrivate !== false;
-  const allowPublic = props.allowPublic !== false;
-  const options = (Object.keys(VIS_ICONS) as Visibility[]).filter((k) => {
-    if (k === props.value) return true;
-    if (k === "private" && !allowPrivate) return false;
-    if (k === "public" && !allowPublic) return false;
-    return true;
-  });
-  return (
-    <Select.Root
-      value={props.value}
-      onValueChange={(v) => props.onChange(v as Visibility)}
-      disabled={props.disabled}
-    >
-      <Select.Trigger
-        aria-label={t("share.generalAccess")}
-        className={cn(
-          BUTTON_BASE,
-          "h-7 px-1 -ms-1 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
-        )}
-      >
-        <Select.Value>{current.label}</Select.Value>
-        <Select.Icon>
-          <IconChevronDown size={14} />
-        </Select.Icon>
-      </Select.Trigger>
-      <Select.Portal>
-        <Select.Content
-          className={selectContentClass}
-          position="popper"
-          sideOffset={4}
-        >
-          <Select.Viewport>
-            <SelectItems
-              items={options.map((k) => ({
-                value: k,
-                label: visibilityMeta[k].label,
-                description: visibilityMeta[k].description,
-              }))}
-            />
-          </Select.Viewport>
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
-  );
-}
-
-function Avatar({ label, org }: { label: string; org?: boolean }) {
   return (
-    <span
-      aria-hidden
-      className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-muted text-[11px] font-semibold text-muted-foreground"
-    >
-      {org ? (
-        <IconUsersGroup size={14} strokeWidth={1.75} />
-      ) : (
-        (label.split("@")[0]?.[0] ?? label[0] ?? "?").toUpperCase()
-      )}
-    </span>
+    <Picker
+      mode="select"
+      options={controller.visibility.options}
+      value={controller.visibility.value}
+      onChange={(value) => {
+        if (value === "private" || value === "org" || value === "public") {
+          controller.visibility.set(value);
+        }
+      }}
+      disabled={controller.visibility.disabled}
+      aria-label={controller.labels.generalAccess}
+      className="-ms-1 w-auto"
+    />
   );
 }
-
-function getNotificationUrl(explicit?: string): string | undefined {
-  if (explicit) return explicit;
-  if (typeof window === "undefined") return undefined;
-  return window.location.href;
-}
-
-function cap(s: string): string {
-  return s.charAt(0).toUpperCase() + s.slice(1);
-}
-
-function principalLabel(share: Share, members: OrgMember[]): string {
-  const serverLabel = share.displayName?.trim();
-  if (serverLabel) return serverLabel;
-  if (share.principalType === "org") return "Organization";
-  return displayName(share.principalId, members);
-}