@tangle-network/agent-app 0.60.184 → 0.60.185

package/dist/settings-react/index.js

@@ -0,0 +1,1438 @@
+import {
+  RoleSelect,
+  canManageMember,
+  invitationDetail,
+  isCurrentMember,
+  memberRoleLabel
+} from "../chunk-OBKVNZPH.js";
+import {
+  INVITATION_EMAIL_HINT,
+  INVITATION_EXPIRY_DAYS,
+  isInvitationEmail
+} from "../chunk-KBJZMR4E.js";
+import {
+  hasWorkspaceRole
+} from "../chunk-6XIAPIW6.js";
+import {
+  OVERLAY_SHADOW,
+  POPOVER_OPTION_FOCUS,
+  PopoverSurface,
+  fieldPickerTriggerClass,
+  useBrowserLayoutEffect,
+  usePopover
+} from "../chunk-XG6FODYO.js";
+import "../chunk-RASGKEAL.js";
+import {
+  confirmWrite,
+  rejectWrite,
+  useConfirmedMutation
+} from "../chunk-AVP5SNIG.js";
+import {
+  useWorkspaceExport
+} from "../chunk-EZFBGW23.js";
+import "../chunk-AMUXRAUO.js";
+
+// src/settings-react/settings-layout.tsx
+import { Button, PageHeader, PageShell } from "@tangle-network/ui/primitives";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+
+// src/settings-react/save-status.tsx
+import { Check, LoaderCircle } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PENDING_DELAY_MS = 200;
+var SAVED_VISIBLE_MS = 2e3;
+function SavingStatus({ label = "Saving\u2026" }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-sm text-muted-foreground", "data-setting-status": "saving", children: [
+    /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": "true", className: "size-4 animate-spin motion-reduce:animate-none" }),
+    label
+  ] });
+}
+function SavedStatus({ label = "Saved" }) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-sm text-[var(--surface-success-text)]", "data-setting-status": "saved", children: [
+    /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-4" }),
+    label
+  ] });
+}
+function UnsavedStatus({ label = "Unsaved" }) {
+  return /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", "data-setting-status": "unsaved", children: label });
+}
+
+// src/settings-react/settings-layout.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PlainLink({ href, children, ...rest }) {
+  return /* @__PURE__ */ jsx2("a", { href, ...rest, children });
+}
+function isPlainClick(event) {
+  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.defaultPrevented;
+}
+function useOptimisticSection(activeId) {
+  const [pendingId, setPendingId] = useState(null);
+  useEffect(() => setPendingId(null), [activeId]);
+  useEffect(() => {
+    const clear = () => setPendingId(null);
+    window.addEventListener("popstate", clear);
+    return () => window.removeEventListener("popstate", clear);
+  }, []);
+  return { currentId: pendingId ?? activeId, pending: pendingId !== null && pendingId !== activeId, setPendingId };
+}
+var CUE_PANEL = 44;
+var STRIP_GAP = 4;
+function useStripOverflow(listRef) {
+  const [overflow, setOverflow] = useState({ start: false, end: false });
+  const strip = useCallback(() => listRef.current?.parentElement ?? null, [listRef]);
+  useBrowserLayoutEffect(() => {
+    const nav = strip();
+    if (!nav) return;
+    const measure = () => {
+      const scrolls = getComputedStyle(nav).overflowX !== "visible" && nav.scrollWidth > nav.clientWidth + 1;
+      const start = scrolls && nav.scrollLeft > 1;
+      const end = scrolls && nav.scrollLeft + nav.clientWidth < nav.scrollWidth - 1;
+      setOverflow((prev) => prev.start === start && prev.end === end ? prev : { start, end });
+    };
+    measure();
+    nav.addEventListener("scroll", measure, { passive: true });
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    resize?.observe(nav);
+    if (listRef.current) resize?.observe(listRef.current);
+    return () => {
+      nav.removeEventListener("scroll", measure);
+      resize?.disconnect();
+    };
+  }, [listRef, strip]);
+  const page = (direction) => {
+    const nav = strip();
+    if (!nav) return;
+    const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    nav.scrollBy({ left: direction * nav.clientWidth * 0.75, behavior: reduce ? "auto" : "smooth" });
+  };
+  return { overflow, page };
+}
+function ScrollCue({ side, onPage }) {
+  const start = side === "start";
+  const Icon = start ? ChevronLeft : ChevronRight;
+  const gutter = start ? "calc(-1 * var(--tangle-settings-gutter, 0px))" : "var(--tangle-settings-gutter, 0px)";
+  return /* @__PURE__ */ jsx2(
+    Button,
+    {
+      type: "button",
+      variant: "bare",
+      tabIndex: -1,
+      "aria-hidden": "true",
+      "data-scroll-cue": side,
+      onClick: onPage,
+      className: `sticky z-[1] mb-px flex shrink-0 items-center self-stretch bg-background ${start ? "left-0 justify-start" : "right-0 justify-end"}`,
+      style: {
+        width: CUE_PANEL,
+        [start ? "marginRight" : "marginLeft"]: -(CUE_PANEL + STRIP_GAP),
+        boxShadow: `${gutter} 0 0 0 hsl(var(--background))`
+      },
+      children: /* @__PURE__ */ jsx2("span", { className: "flex size-8 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-sm", children: /* @__PURE__ */ jsx2(Icon, { "aria-hidden": "true", className: "size-4" }) })
+    }
+  );
+}
+function NavLinks({ sections, currentId, LinkComponent = PlainLink, onIntent, onPick }) {
+  const listRef = useRef(null);
+  const warmed = useRef(/* @__PURE__ */ new Set());
+  const { overflow, page } = useStripOverflow(listRef);
+  const intent = (section) => {
+    if (!onIntent || warmed.current.has(section.id)) return;
+    warmed.current.add(section.id);
+    onIntent(section);
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    overflow.start && /* @__PURE__ */ jsx2(ScrollCue, { side: "start", onPage: () => page(-1) }),
+    /* @__PURE__ */ jsx2("ul", { ref: listRef, role: "list", children: sections.filter((section) => !section.hidden).map((section) => {
+      const Icon = section.icon;
+      const current = section.id === currentId;
+      return /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2(
+        LinkComponent,
+        {
+          href: section.href,
+          "aria-current": current ? "page" : void 0,
+          "data-settings-section": section.id,
+          onPointerEnter: () => intent(section),
+          onFocus: () => intent(section),
+          onClick: (event) => {
+            if (isPlainClick(event)) onPick(section.id);
+          },
+          children: [
+            Icon && /* @__PURE__ */ jsx2(Icon, { "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx2("span", { children: section.label }),
+            section.badge != null && /* @__PURE__ */ jsx2("span", { "data-count": "", children: section.badge })
+          ]
+        }
+      ) }, section.id);
+    }) }),
+    overflow.end && /* @__PURE__ */ jsx2(ScrollCue, { side: "end", onPage: () => page(1) })
+  ] });
+}
+function SettingsNav(props) {
+  const { currentId, setPendingId } = useOptimisticSection(props.activeId);
+  return /* @__PURE__ */ jsx2(NavLinks, { ...props, currentId, onPick: setPendingId });
+}
+function readHash() {
+  const raw = window.location.hash.slice(1);
+  try {
+    return decodeURIComponent(raw);
+  } catch {
+    return raw;
+  }
+}
+function useSectionScroll(activeId, rootRef) {
+  const first = useRef(true);
+  useEffect(() => {
+    const reveal = () => {
+      const hash = readHash();
+      const target = hash ? document.getElementById(hash) : null;
+      if (!target) return false;
+      target.scrollIntoView({ block: "start" });
+      const heading = document.getElementById(`${hash}-title`) ?? target.querySelector("h2, h3, label") ?? target;
+      if (!heading.hasAttribute("tabindex") && !/^(A|BUTTON|INPUT|SELECT|TEXTAREA)$/.test(heading.tagName)) heading.setAttribute("tabindex", "-1");
+      heading.focus({ preventScroll: true });
+      return true;
+    };
+    if (!reveal() && !first.current) rootRef.current?.scrollIntoView({ block: "start" });
+    first.current = false;
+    const onHash = () => void reveal();
+    window.addEventListener("hashchange", onHash);
+    return () => window.removeEventListener("hashchange", onHash);
+  }, [activeId, rootRef]);
+}
+function useDelayed(pending) {
+  const [shown, setShown] = useState(false);
+  useEffect(() => {
+    if (!pending) {
+      setShown(false);
+      return;
+    }
+    const timer = setTimeout(() => setShown(true), PENDING_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, [pending]);
+  return shown;
+}
+function SettingsLayout({
+  title,
+  description,
+  meta,
+  sections,
+  activeId,
+  LinkComponent,
+  onIntent,
+  navigationLabel = "Settings sections",
+  className,
+  children
+}) {
+  const rootRef = useRef(null);
+  const { currentId, pending, setPendingId } = useOptimisticSection(activeId);
+  const showProgress = useDelayed(pending);
+  useSectionScroll(activeId, rootRef);
+  const visible = sections.filter((section) => !section.hidden);
+  const header = /* @__PURE__ */ jsx2(
+    PageHeader,
+    {
+      level: 2,
+      titleAs: "h1",
+      title,
+      description: description != null || meta != null ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        description,
+        meta != null && /* @__PURE__ */ jsx2("span", { className: "mt-1 block", children: meta })
+      ] }) : void 0
+    }
+  );
+  return /* @__PURE__ */ jsxs2("div", { ref: rootRef, className: "relative min-w-0", "data-settings-layout": true, children: [
+    showProgress && /* @__PURE__ */ jsx2("div", { role: "progressbar", "aria-label": "Opening section", className: "pointer-events-none absolute inset-x-0 top-0 z-[4] h-0.5 overflow-hidden", children: /* @__PURE__ */ jsx2("div", { className: "h-full w-1/3 animate-pulse rounded-full bg-[var(--accent-text)] motion-reduce:animate-none" }) }),
+    /* @__PURE__ */ jsx2(
+      PageShell,
+      {
+        measure: "settings",
+        className,
+        navigationLabel,
+        header,
+        navigation: visible.length > 1 ? /* @__PURE__ */ jsx2(NavLinks, { sections: visible, activeId, currentId, LinkComponent, onIntent, onPick: setPendingId }) : void 0,
+        article: children
+      }
+    )
+  ] });
+}
+
+// src/settings-react/use-setting-field.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function isPlain(value) {
+  const prototype = Object.getPrototypeOf(value);
+  return Array.isArray(value) || prototype === Object.prototype || prototype === null;
+}
+function samePlainValue(a, b) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+  if (Array.isArray(a) !== Array.isArray(b) || !isPlain(a) || !isPlain(b)) return false;
+  const left = a;
+  const right = b;
+  const keys = Object.keys(left);
+  return keys.length === Object.keys(right).length && keys.every((key) => Object.prototype.hasOwnProperty.call(right, key) && samePlainValue(left[key], right[key]));
+}
+function useSettingField({
+  saved,
+  save,
+  commitOn = "change",
+  debounceMs = 0,
+  validate,
+  isEqual = samePlainValue,
+  onSaved
+}) {
+  const [confirmed, setConfirmed] = useState2(saved);
+  const [draft, setDraftState] = useState2(saved);
+  const [failedValue, setFailedValue] = useState2(null);
+  const [showSaving, setShowSaving] = useState2(false);
+  const [showSaved, setShowSaved] = useState2(false);
+  const draftRef = useRef2(draft);
+  draftRef.current = draft;
+  const confirmedRef = useRef2(confirmed);
+  confirmedRef.current = confirmed;
+  const options = useRef2({ validate, isEqual, onSaved });
+  options.current = { validate, isEqual, onSaved };
+  const debounce = useRef2(null);
+  const savedTimer = useRef2(null);
+  const inFlight = useRef2(false);
+  const waiting = useRef2(null);
+  const mutation = useConfirmedMutation({
+    mutate: (value, context) => save(value, context),
+    onSucceeded: (value) => {
+      confirmedRef.current = value;
+      setConfirmed(value);
+      setFailedValue(null);
+      setShowSaved(true);
+      if (savedTimer.current) clearTimeout(savedTimer.current);
+      savedTimer.current = setTimeout(() => setShowSaved(false), SAVED_VISIBLE_MS);
+      options.current.onSaved?.(value);
+    }
+  });
+  const pending = mutation.state.status === "pending";
+  const editing = !isEqual(draft, confirmed) || pending;
+  useEffect2(() => {
+    if (options.current.isEqual(saved, confirmedRef.current)) return;
+    setConfirmed(saved);
+    if (!editing) setDraftState(saved);
+  }, [saved]);
+  useEffect2(() => {
+    if (!pending) {
+      setShowSaving(false);
+      return;
+    }
+    const timer = setTimeout(() => setShowSaving(true), PENDING_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, [pending]);
+  const send = useCallback2(async (first) => {
+    inFlight.current = true;
+    let value = first;
+    for (; ; ) {
+      setShowSaved(false);
+      const outcome = await mutation.run(value);
+      const queued = waiting.current;
+      waiting.current = null;
+      const next = queued && !(outcome.succeeded && options.current.isEqual(queued.value, value)) ? queued : null;
+      if (outcome.succeeded && !next && options.current.isEqual(draftRef.current, value)) {
+        draftRef.current = outcome.value;
+        setDraftState(outcome.value);
+      }
+      if (next && !options.current.isEqual(next.value, confirmedRef.current)) {
+        value = next.value;
+        continue;
+      }
+      inFlight.current = false;
+      if (!outcome.succeeded && !next) setFailedValue({ value });
+      return;
+    }
+  }, [mutation.run]);
+  const commit = useCallback2((next) => {
+    if (debounce.current) {
+      clearTimeout(debounce.current);
+      debounce.current = null;
+    }
+    const value = next === void 0 ? draftRef.current : next;
+    if (options.current.validate?.(value)) return;
+    if (inFlight.current) {
+      waiting.current = { value };
+      return;
+    }
+    if (options.current.isEqual(value, confirmedRef.current)) {
+      setFailedValue(null);
+      return;
+    }
+    void send(value);
+  }, [send]);
+  const commitRef = useRef2(commit);
+  commitRef.current = commit;
+  useEffect2(() => () => {
+    if (savedTimer.current) clearTimeout(savedTimer.current);
+    if (!debounce.current) return;
+    clearTimeout(debounce.current);
+    debounce.current = null;
+    commitRef.current(draftRef.current);
+  }, []);
+  const setDraft = useCallback2((next) => {
+    draftRef.current = next;
+    setDraftState(next);
+    setFailedValue(null);
+    if (commitOn !== "change") return;
+    if (debounce.current) clearTimeout(debounce.current);
+    if (debounceMs > 0) debounce.current = setTimeout(() => commit(next), debounceMs);
+    else commit(next);
+  }, [commit, commitOn, debounceMs]);
+  const revert = useCallback2(() => {
+    if (debounce.current) clearTimeout(debounce.current);
+    debounce.current = null;
+    waiting.current = null;
+    mutation.reset();
+    setFailedValue(null);
+    setDraftState(confirmedRef.current);
+  }, [mutation.reset]);
+  const validation = validate && !isEqual(draft, confirmed) ? validate(draft) : null;
+  const failed = failedValue !== null && isEqual(failedValue.value, draft) && mutation.state.status === "failed";
+  const state = validation ? "invalid" : pending ? "saving" : failed ? "failed" : !isEqual(draft, confirmed) ? "unsaved" : showSaved ? "saved" : "idle";
+  const error = validation ?? (failed && mutation.state.status === "failed" ? mutation.state.message : null);
+  const retry = useCallback2(() => commit(draftRef.current), [commit]);
+  const rowProps = useMemo(() => ({
+    status: state === "saving" ? showSaving ? /* @__PURE__ */ jsx3(SavingStatus, {}) : void 0 : state === "saved" ? /* @__PURE__ */ jsx3(SavedStatus, {}) : state === "unsaved" && commitOn === "blur" ? /* @__PURE__ */ jsx3(UnsavedStatus, {}) : void 0,
+    error: error ?? void 0,
+    onRetry: state === "failed" ? retry : void 0
+  }), [state, showSaving, commitOn, error, retry]);
+  return { draft, setDraft, commit, revert, state, error, rowProps };
+}
+
+// src/settings-react/setting-outcome.ts
+var FALLBACK = {
+  forbidden: "You don't have permission to change this.",
+  invalid: "That value can't be saved. Check it and try again.",
+  plan_limit: "Your plan doesn't include this.",
+  rate_limited: "You've reached the limit for now. Try again shortly.",
+  not_runnable: "This can't run right now.",
+  upstream: "A connected service didn't respond. Nothing changed; try again.",
+  network: "Couldn't reach the server. Check your connection, then retry."
+};
+function codeForStatus(status) {
+  if (status === 401 || status === 403) return "forbidden";
+  if (status === 402) return "plan_limit";
+  if (status === 429) return "rate_limited";
+  if (status === 400 || status === 409 || status === 422) return "invalid";
+  return "upstream";
+}
+function retryWording(seconds) {
+  if (seconds < 90) return `Try again in ${Math.max(1, Math.round(seconds))} seconds.`;
+  return `Try again in ${Math.round(seconds / 60)} minutes.`;
+}
+function readFailure(body, status) {
+  const raw = typeof body === "object" && body !== null ? body.error : void 0;
+  const error = typeof raw === "string" ? { message: raw } : typeof raw === "object" && raw !== null ? raw : {};
+  const code = typeof error.code === "string" && error.code ? error.code : codeForStatus(status);
+  const retryAfterSeconds = typeof error.retryAfterSeconds === "number" ? error.retryAfterSeconds : void 0;
+  const given = typeof error.message === "string" && error.message.trim() ? error.message.trim() : null;
+  let message = given ?? FALLBACK[code] ?? FALLBACK.upstream;
+  if (retryAfterSeconds !== void 0 && code === "rate_limited" && !given) message = `You've reached the limit for now. ${retryWording(retryAfterSeconds)}`;
+  return {
+    code,
+    message,
+    ...typeof error.field === "string" ? { field: error.field } : {},
+    ...retryAfterSeconds !== void 0 ? { retryAfterSeconds } : {}
+  };
+}
+async function confirmSettingResponse(request, parse) {
+  let response;
+  try {
+    response = await request;
+  } catch (error) {
+    return rejectWrite(FALLBACK.network, { code: "network", message: FALLBACK.network, cause: error });
+  }
+  const text = await response.text().catch(() => "");
+  let body;
+  try {
+    body = text ? JSON.parse(text) : void 0;
+  } catch {
+    body = void 0;
+  }
+  if (!response.ok) {
+    const failure = readFailure(body, response.status);
+    return rejectWrite(failure.message, failure);
+  }
+  try {
+    return confirmWrite(parse ? parse(body) : body);
+  } catch (error) {
+    return rejectWrite("The server answered, but not with the saved value. Reload to see what was kept.", error);
+  }
+}
+function settingFailure(outcome) {
+  const error = outcome.error;
+  return typeof error === "object" && error !== null && typeof error.code === "string" ? { ...error, code: error.code, message: outcome.message } : { code: "upstream", message: outcome.message };
+}
+
+// src/settings-react/confirm-action.tsx
+import {
+  Alert,
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button as Button2,
+  Input,
+  Label,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger
+} from "@tangle-network/ui/primitives";
+import { CircleAlert } from "lucide-react";
+import { useCallback as useCallback3, useEffect as useEffect3, useId, useRef as useRef3, useState as useState3, useSyncExternalStore } from "react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var NARROW = "(max-width: 40rem)";
+function subscribeNarrow(onChange) {
+  if (typeof window === "undefined" || !window.matchMedia) return () => void 0;
+  const query = window.matchMedia(NARROW);
+  query.addEventListener("change", onChange);
+  return () => query.removeEventListener("change", onChange);
+}
+var MENU_EXIT_LIMIT_MS = 1e3;
+function useOpenAfterMenus(open) {
+  const [clear, setClear] = useState3(false);
+  useEffect3(() => {
+    if (!open) {
+      setClear(false);
+      return;
+    }
+    const closing = Array.from(document.querySelectorAll('[role="menu"]'));
+    const deadline = performance.now() + MENU_EXIT_LIMIT_MS;
+    let frame = 0;
+    const wait = () => {
+      if (closing.some((menu) => menu.isConnected) && performance.now() < deadline) frame = requestAnimationFrame(wait);
+      else setClear(true);
+    };
+    wait();
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+  return open && clear;
+}
+function useNarrowViewport() {
+  return useSyncExternalStore(
+    subscribeNarrow,
+    () => typeof window !== "undefined" && Boolean(window.matchMedia?.(NARROW).matches),
+    () => false
+  );
+}
+function ConfirmAction({
+  trigger,
+  open: openProp,
+  onOpenChange,
+  title,
+  consequence,
+  changes,
+  notice,
+  confirmLabel,
+  cancelLabel = "Cancel",
+  tone = "default",
+  children,
+  canConfirm = true,
+  requireText,
+  onConfirm,
+  onConfirmed,
+  refusalAction
+}) {
+  const [innerOpen, setInnerOpen] = useState3(false);
+  const open = openProp ?? innerOpen;
+  const shown = useOpenAfterMenus(open);
+  const [typed, setTyped] = useState3("");
+  const narrow = useNarrowViewport();
+  const bodyRef = useRef3(null);
+  const cancelRef = useRef3(null);
+  const inputId = useId();
+  const errorId = useId();
+  const mutation = useConfirmedMutation({ mutate: () => onConfirm(), concurrency: "reject" });
+  const pending = mutation.state.status === "pending";
+  const failure = mutation.state.status === "failed" ? settingFailure(mutation.state) : null;
+  const failureAction = failure && refusalAction?.(failure);
+  const { reset } = mutation;
+  const setOpen = useCallback3((next) => {
+    if (!next && pending) return;
+    setInnerOpen(next);
+    onOpenChange?.(next);
+  }, [onOpenChange, pending]);
+  useEffect3(() => {
+    if (!open) return;
+    setTyped("");
+    reset();
+  }, [open, reset]);
+  const ready = canConfirm && (requireText === void 0 || typed.trim() === requireText);
+  const confirm = async () => {
+    if (!ready || pending) return;
+    const outcome = await mutation.run();
+    if (!outcome.succeeded) return;
+    setInnerOpen(false);
+    onOpenChange?.(false);
+    onConfirmed?.(outcome.value);
+  };
+  const focusFirst = (event) => {
+    event.preventDefault();
+    setTimeout(() => {
+      const target = bodyRef.current?.querySelector('input, textarea, [role="combobox"]') ?? cancelRef.current;
+      target?.focus();
+    }, 0);
+  };
+  const hasBody = Boolean(changes?.length) || notice != null || children != null || requireText !== void 0 || failure != null;
+  const body = hasBody && /* @__PURE__ */ jsxs3("div", { ref: bodyRef, className: "grid min-w-0 gap-4 text-sm", children: [
+    changes && changes.length > 0 && /* @__PURE__ */ jsx4("dl", { className: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-2 rounded-lg border border-border px-4 py-3", children: changes.map((change) => /* @__PURE__ */ jsxs3("div", { className: "contents", children: [
+      /* @__PURE__ */ jsx4("dt", { className: "text-muted-foreground", children: change.label }),
+      /* @__PURE__ */ jsxs3("dd", { className: "min-w-0 [overflow-wrap:anywhere]", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-muted-foreground", children: change.from }),
+        /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: "px-1.5 text-muted-foreground", children: "\u2192" }),
+        /* @__PURE__ */ jsx4("span", { className: "sr-only", children: " to " }),
+        /* @__PURE__ */ jsx4("span", { className: "font-medium text-foreground", children: change.to })
+      ] })
+    ] }, change.label)) }),
+    notice != null && /* @__PURE__ */ jsx4(Alert, { tone: "info", children: notice }),
+    children,
+    requireText !== void 0 && /* @__PURE__ */ jsxs3("div", { className: "grid gap-2", children: [
+      /* @__PURE__ */ jsxs3(Label, { htmlFor: inputId, children: [
+        "Type ",
+        /* @__PURE__ */ jsx4("span", { className: "font-semibold [overflow-wrap:anywhere]", children: requireText }),
+        " to confirm"
+      ] }),
+      /* @__PURE__ */ jsx4(
+        Input,
+        {
+          id: inputId,
+          value: typed,
+          autoComplete: "off",
+          spellCheck: false,
+          "aria-describedby": failure ? errorId : void 0,
+          onChange: (event) => setTyped(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              void confirm();
+            }
+          }
+        }
+      )
+    ] }),
+    failure && /* @__PURE__ */ jsxs3("p", { id: errorId, role: "alert", className: "flex items-start gap-1.5 text-[var(--surface-danger-text)] [overflow-wrap:anywhere]", children: [
+      /* @__PURE__ */ jsx4(CircleAlert, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0" }),
+      /* @__PURE__ */ jsxs3("span", { className: "min-w-0", children: [
+        failure.message,
+        failureAction != null && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          " ",
+          failureAction
+        ] })
+      ] })
+    ] })
+  ] });
+  const confirmButton = /* @__PURE__ */ jsx4(
+    Button2,
+    {
+      type: "button",
+      variant: tone === "danger" ? "destructive" : "default",
+      loading: pending,
+      disabled: !ready || pending,
+      onClick: () => void confirm(),
+      "data-confirm-action": true,
+      children: confirmLabel
+    }
+  );
+  if (narrow) {
+    return /* @__PURE__ */ jsxs3(Sheet, { open: shown, onOpenChange: setOpen, children: [
+      trigger && /* @__PURE__ */ jsx4(SheetTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxs3(SheetContent, { side: "bottom", hideCloseButton: true, onOpenAutoFocus: focusFirst, className: "max-h-[90dvh] overflow-y-auto", children: [
+        /* @__PURE__ */ jsxs3(SheetHeader, { className: "pb-0", children: [
+          /* @__PURE__ */ jsx4(SheetTitle, { children: title }),
+          /* @__PURE__ */ jsx4(SheetDescription, { children: consequence })
+        ] }),
+        body && /* @__PURE__ */ jsx4("div", { className: "px-4", children: body }),
+        /* @__PURE__ */ jsxs3(SheetFooter, { className: "pt-2 pb-[max(1rem,env(safe-area-inset-bottom))]", children: [
+          confirmButton,
+          /* @__PURE__ */ jsx4(Button2, { ref: cancelRef, type: "button", variant: "outline", disabled: pending, onClick: () => setOpen(false), children: cancelLabel })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3(AlertDialog, { open: shown, onOpenChange: setOpen, children: [
+    trigger && /* @__PURE__ */ jsx4(AlertDialogTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs3(AlertDialogContent, { onOpenAutoFocus: focusFirst, children: [
+      /* @__PURE__ */ jsxs3(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx4(AlertDialogTitle, { children: title }),
+        /* @__PURE__ */ jsx4(AlertDialogDescription, { children: consequence })
+      ] }),
+      body,
+      /* @__PURE__ */ jsxs3(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx4(AlertDialogCancel, { ref: cancelRef, disabled: pending, children: cancelLabel }),
+        confirmButton
+      ] })
+    ] })
+  ] });
+}
+
+// src/settings-react/settings-save-bar.tsx
+import { Button as Button3 } from "@tangle-network/ui/primitives";
+import { CircleAlert as CircleAlert2, Lock } from "lucide-react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var STICKY_FOOTER = "@max-[34rem]/settings-section:[:has(>&)]:sticky @max-[34rem]/settings-section:[:has(>&)]:bottom-0 @max-[34rem]/settings-section:[:has(>&)]:z-10";
+function SettingsSaveBar({
+  changes,
+  summary,
+  onDiscard,
+  onSave,
+  state,
+  error,
+  saveLabel = "Save changes",
+  disabledReason
+}) {
+  const saving = state === "saving";
+  const dirty = changes > 0;
+  const [showSaved, setShowSaved] = useState4(state === "saved");
+  useEffect4(() => {
+    setShowSaved(state === "saved");
+    if (state !== "saved") return;
+    const timer = setTimeout(() => setShowSaved(false), SAVED_VISIBLE_MS);
+    return () => clearTimeout(timer);
+  }, [state]);
+  const message = disabledReason != null ? /* @__PURE__ */ jsxs4("span", { className: "flex items-start gap-1.5 text-muted-foreground", children: [
+    /* @__PURE__ */ jsx5(Lock, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0" }),
+    /* @__PURE__ */ jsx5("span", { className: "min-w-0", children: disabledReason })
+  ] }) : state === "failed" && error != null ? /* @__PURE__ */ jsxs4("span", { role: "alert", className: "flex items-start gap-1.5 text-[var(--surface-danger-text)]", children: [
+    /* @__PURE__ */ jsx5(CircleAlert2, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0" }),
+    /* @__PURE__ */ jsx5("span", { className: "min-w-0 [overflow-wrap:anywhere]", children: error })
+  ] }) : summary ?? (dirty ? /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground", children: changes === 1 ? "1 unsaved change" : `${changes} unsaved changes` }) : showSaved ? /* @__PURE__ */ jsx5(SavedStatus, {}) : /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground", children: "No unsaved changes" }));
+  const sticky = dirty && disabledReason == null;
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `flex min-w-0 flex-1 flex-wrap items-center justify-between gap-x-4 gap-y-2${sticky ? ` ${STICKY_FOOTER}` : ""}`,
+      "data-settings-save-bar": true,
+      "data-dirty": sticky || void 0,
+      children: [
+        /* @__PURE__ */ jsx5("div", { "aria-live": "polite", className: "min-w-0 text-sm", children: message }),
+        disabledReason == null && /* @__PURE__ */ jsxs4("div", { className: "ml-auto flex shrink-0 gap-2", children: [
+          dirty && /* @__PURE__ */ jsx5(Button3, { type: "button", variant: "ghost", disabled: saving, onClick: onDiscard, children: "Discard" }),
+          /* @__PURE__ */ jsx5(Button3, { type: "button", variant: dirty ? "default" : "outline", disabled: !dirty || saving, loading: saving, onClick: onSave, children: saveLabel })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/settings-react/members-section.tsx
+import {
+  Avatar,
+  AvatarFallback,
+  Button as Button4,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Input as Input2,
+  Label as Label2,
+  SettingsList,
+  SettingsListItem,
+  SettingsRow,
+  SettingsSection
+} from "@tangle-network/ui/primitives";
+import { ChevronDown } from "lucide-react";
+import { Fragment as Fragment3, useEffect as useEffect5, useId as useId2, useState as useState5 } from "react";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function breakable(address) {
+  const parts = address.split(/(?<=[@.\-_])/);
+  return parts.map((part, index) => /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    part,
+    index < parts.length - 1 && /* @__PURE__ */ jsx6("wbr", {})
+  ] }, index));
+}
+function displayName(member) {
+  return member.name ?? member.email ?? "Unknown";
+}
+function initials(member) {
+  const name = displayName(member);
+  const parts = name.split(/[\s@._-]+/).filter(Boolean);
+  return ((parts[0]?.[0] ?? "?") + (member.name ? parts[1]?.[0] ?? "" : "")).toUpperCase();
+}
+var MEMBER_COLUMNS = { status: "18rem", menu: "36px" };
+function useMemberRole(member, onChangeRole) {
+  const field = useSettingField({
+    saved: member.role,
+    save: async (role) => {
+      const outcome = await onChangeRole({ memberId: member.id, role });
+      return outcome.succeeded ? confirmWrite(role) : outcome;
+    }
+  });
+  return { field, select: /* @__PURE__ */ jsx6(RoleSelect, { id: `role-${member.id}`, value: field.draft, ariaLabel: `Role for ${displayName(member)}`, onChange: field.setDraft }) };
+}
+function MemberItem({ member, editable, self, noun, onChangeRole, onRemove, extraMenu }) {
+  const [removing, setRemoving] = useState5(false);
+  const { field, select } = useMemberRole(member, onChangeRole);
+  const name = displayName(member);
+  const pending = member.acceptedAt == null;
+  const email = member.name && member.email ? member.email : null;
+  const status = field.rowProps.status;
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx6(
+      SettingsListItem,
+      {
+        title: /* @__PURE__ */ jsxs5("span", { className: "flex min-w-0 items-center gap-3", children: [
+          /* @__PURE__ */ jsx6(Avatar, { size: "sm", children: /* @__PURE__ */ jsx6(AvatarFallback, { children: initials(member) }) }),
+          /* @__PURE__ */ jsxs5("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs5("span", { className: "block", children: [
+              name,
+              self && /* @__PURE__ */ jsx6("span", { className: "font-normal text-muted-foreground", children: " (you)" })
+            ] }),
+            (email || pending || status) && /* @__PURE__ */ jsxs5("span", { className: "flex flex-wrap items-center gap-x-2 font-normal text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs5("span", { children: [
+                email && breakable(email),
+                email && pending && " \xB7 ",
+                pending && "Hasn\u2019t joined yet"
+              ] }),
+              status
+            ] })
+          ] })
+        ] }),
+        status: editable ? select : /* @__PURE__ */ jsx6("span", { className: "text-foreground", children: memberRoleLabel(member) }),
+        error: field.rowProps.error,
+        menu: editable ? [...extraMenu, { label: `Remove from ${noun}\u2026`, tone: "danger", onSelect: () => setRemoving(true) }] : void 0
+      }
+    ),
+    editable && /* @__PURE__ */ jsx6(
+      ConfirmAction,
+      {
+        open: removing,
+        onOpenChange: setRemoving,
+        title: `Remove ${name}?`,
+        consequence: `${name} loses access to this ${noun} at once. Their chats and files stay.`,
+        confirmLabel: "Remove",
+        tone: "danger",
+        onConfirm: () => onRemove({ memberId: member.id })
+      }
+    )
+  ] });
+}
+function plansAction(href, Link) {
+  if (!href) return void 0;
+  return (failure) => failure.code === "plan_limit" ? /* @__PURE__ */ jsx6(Link, { href, className: "font-medium text-[var(--accent-text)] underline-offset-4 hover:underline", children: "View plans" }) : null;
+}
+function InviteDialog({ onInvite, plansHref, LinkComponent, open, onOpenChange }) {
+  const id = useId2();
+  const [email, setEmail] = useState5("");
+  const [role, setRole] = useState5("editor");
+  const [checked, setChecked] = useState5(false);
+  useEffect5(() => {
+    if (!open) return;
+    setEmail("");
+    setRole("editor");
+    setChecked(false);
+  }, [open]);
+  const valid = isInvitationEmail(email);
+  const showHint = checked && email.trim() !== "" && !valid;
+  return /* @__PURE__ */ jsxs5(
+    ConfirmAction,
+    {
+      open,
+      onOpenChange,
+      title: "Invite people",
+      consequence: `They get an email with a link to join. The link works for ${INVITATION_EXPIRY_DAYS} days.`,
+      confirmLabel: "Send invite",
+      canConfirm: valid,
+      onConfirm: () => onInvite({ email: email.trim(), role }),
+      refusalAction: plansAction(plansHref, LinkComponent),
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx6(Label2, { htmlFor: `${id}-email`, children: "Email" }),
+          /* @__PURE__ */ jsx6(
+            Input2,
+            {
+              id: `${id}-email`,
+              type: "email",
+              inputMode: "email",
+              autoComplete: "off",
+              value: email,
+              variant: showHint ? "error" : void 0,
+              "aria-describedby": showHint ? `${id}-hint` : void 0,
+              onChange: (event) => setEmail(event.target.value),
+              onBlur: () => setChecked(true)
+            }
+          ),
+          showHint && /* @__PURE__ */ jsx6("p", { id: `${id}-hint`, role: "alert", className: "text-sm text-[var(--surface-danger-text)]", children: INVITATION_EMAIL_HINT })
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx6(Label2, { htmlFor: `${id}-role`, children: "Role" }),
+          /* @__PURE__ */ jsx6(RoleSelect, { id: `${id}-role`, value: role, ariaLabel: "Role", onChange: setRole })
+        ] })
+      ]
+    }
+  );
+}
+function MembersSection({
+  id = "members",
+  title = "Members",
+  description,
+  members,
+  currentRole,
+  currentUserId,
+  noun = "project",
+  onChangeRole,
+  onRemove,
+  onInvite,
+  plansHref,
+  LinkComponent = PlainLink,
+  menuItems
+}) {
+  const [inviting, setInviting] = useState5(false);
+  const canManage = hasWorkspaceRole(currentRole, "admin");
+  return /* @__PURE__ */ jsxs5(
+    SettingsSection,
+    {
+      id,
+      title,
+      description,
+      actions: canManage && onInvite ? /* @__PURE__ */ jsx6(Button4, { type: "button", onClick: () => setInviting(true), children: "Invite" }) : void 0,
+      children: [
+        members.length === 0 ? /* @__PURE__ */ jsx6(SettingsRow, { label: "No members yet", description: "Invite someone to work on this with you.", layout: "compact" }) : /* @__PURE__ */ jsx6(SettingsList, { "aria-label": title, columns: MEMBER_COLUMNS, children: members.map((member) => {
+          const editable = canManageMember(member, currentRole, currentUserId);
+          return /* @__PURE__ */ jsx6(
+            MemberItem,
+            {
+              member,
+              editable,
+              self: isCurrentMember(member, currentUserId),
+              noun,
+              onChangeRole,
+              onRemove,
+              extraMenu: editable && menuItems ? menuItems(member) : []
+            },
+            member.id
+          );
+        }) }),
+        onInvite && /* @__PURE__ */ jsx6(InviteDialog, { onInvite, plansHref, LinkComponent, open: inviting, onOpenChange: setInviting })
+      ]
+    }
+  );
+}
+var INVITATION_COLUMNS = { action: "8rem", menu: "36px" };
+function useFlash() {
+  const [message, setMessage] = useState5(null);
+  useEffect5(() => {
+    if (!message) return;
+    const timer = setTimeout(() => setMessage(null), SAVED_VISIBLE_MS);
+    return () => clearTimeout(timer);
+  }, [message]);
+  return [message, setMessage];
+}
+function PendingInvitation({ invitation, canManage, onResend, onRevoke, onCopy }) {
+  const [revoking, setRevoking] = useState5(false);
+  const [note, flash] = useFlash();
+  const [error, setError] = useState5(null);
+  const copy = async () => {
+    try {
+      if (onCopy) await onCopy({ inviteUrl: invitation.inviteUrl });
+      else await navigator.clipboard.writeText(invitation.inviteUrl);
+      setError(null);
+      flash("Link copied");
+    } catch {
+      setError("Couldn't copy the link. Select it from the invitation email instead.");
+    }
+  };
+  const resend = async () => {
+    const outcome = await onResend({ invitationId: invitation.id });
+    if (outcome.succeeded) {
+      setError(null);
+      flash("Sent again");
+    } else setError(outcome.message);
+  };
+  const undelivered = invitation.emailStatus === "failed" ? "The email wasn\u2019t delivered. Copy the link and send it yourself." : null;
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx6(
+      SettingsListItem,
+      {
+        title: breakable(invitation.email),
+        meta: /* @__PURE__ */ jsxs5("span", { className: "inline-flex flex-wrap items-center gap-x-2", children: [
+          invitationDetail(invitation),
+          note && /* @__PURE__ */ jsx6("span", { className: "text-[var(--surface-success-text)]", children: note })
+        ] }),
+        error: error ?? undelivered ?? void 0,
+        action: canManage ? { label: "Copy link", onSelect: () => void copy() } : void 0,
+        menu: canManage ? [
+          { label: "Resend email", onSelect: () => void resend() },
+          { label: "Revoke\u2026", tone: "danger", onSelect: () => setRevoking(true) }
+        ] : void 0
+      }
+    ),
+    canManage && /* @__PURE__ */ jsx6(
+      ConfirmAction,
+      {
+        open: revoking,
+        onOpenChange: setRevoking,
+        title: `Revoke the invitation to ${invitation.email}?`,
+        consequence: "The link stops working at once. You can invite them again later.",
+        confirmLabel: "Revoke",
+        tone: "danger",
+        onConfirm: () => onRevoke({ invitationId: invitation.id })
+      }
+    )
+  ] });
+}
+function InvitationsSection({
+  id = "invitations",
+  title = "Invitations",
+  invitations,
+  currentRole,
+  onResend,
+  onRevoke,
+  onCopy
+}) {
+  const [showPast, setShowPast] = useState5(false);
+  const canManage = hasWorkspaceRole(currentRole, "admin");
+  const pending = invitations.filter((invitation) => invitation.status === "pending");
+  const past = invitations.filter((invitation) => invitation.status !== "pending");
+  return /* @__PURE__ */ jsxs5(SettingsSection, { id, title, children: [
+    pending.length === 0 ? /* @__PURE__ */ jsx6(SettingsRow, { label: "No pending invitations", layout: "compact" }) : /* @__PURE__ */ jsx6(SettingsList, { "aria-label": "Pending invitations", columns: INVITATION_COLUMNS, children: pending.map((invitation) => /* @__PURE__ */ jsx6(PendingInvitation, { invitation, canManage, onResend, onRevoke, onCopy }, invitation.id)) }),
+    past.length > 0 && /* @__PURE__ */ jsxs5(Collapsible, { open: showPast, onOpenChange: setShowPast, children: [
+      /* @__PURE__ */ jsx6("div", { className: "border-t border-[color:var(--border-subtle)] px-5 py-3 @max-[34rem]/settings-section:px-4", children: /* @__PURE__ */ jsx6(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(Button4, { type: "button", variant: "ghost", className: "-ml-4", children: [
+        showPast ? "Hide past invitations" : `Show ${past.length} past ${past.length === 1 ? "invitation" : "invitations"}`,
+        /* @__PURE__ */ jsx6(ChevronDown, { "aria-hidden": "true", className: showPast ? "rotate-180" : void 0 })
+      ] }) }) }),
+      /* @__PURE__ */ jsx6(CollapsibleContent, { children: /* @__PURE__ */ jsx6(SettingsList, { "aria-label": "Past invitations", columns: {}, children: past.map((invitation) => /* @__PURE__ */ jsx6(SettingsListItem, { title: breakable(invitation.email), meta: invitationDetail(invitation) }, invitation.id)) }) })
+    ] })
+  ] });
+}
+
+// src/settings-react/export-section.tsx
+import {
+  Button as Button5,
+  Collapsible as Collapsible2,
+  CollapsibleContent as CollapsibleContent2,
+  CollapsibleTrigger as CollapsibleTrigger2,
+  Progress,
+  SettingsRow as SettingsRow2,
+  SettingsSection as SettingsSection2
+} from "@tangle-network/ui/primitives";
+import { ChevronDown as ChevronDown2 } from "lucide-react";
+import { useState as useState6 } from "react";
+import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var BYTE_UNITS = ["B", "KB", "MB", "GB", "TB"];
+function formatBytes(bytes) {
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < BYTE_UNITS.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${value < 10 && unit ? value.toFixed(1) : Math.round(value)} ${BYTE_UNITS[unit]}`;
+}
+function unitState(unit) {
+  if (unit.status === "pending") return "Waiting";
+  if (unit.status === "empty") return "Nothing to export";
+  if (unit.status === "failed") return "Failed";
+  if (unit.rows !== void 0) return `${unit.rows} rows`;
+  if (unit.files !== void 0) return `${unit.files} files \xB7 ${formatBytes(unit.bytes)}`;
+  return formatBytes(unit.bytes);
+}
+function progressLine(latest) {
+  return [
+    `${latest.unitsDone} of ${latest.unitsTotal} sources`,
+    latest.unitsFailed ? `${latest.unitsFailed} failed` : null,
+    formatBytes(latest.bytes),
+    latest.status === "running" && latest.current ? `now ${latest.current}` : null
+  ].filter(Boolean).join(" \xB7 ");
+}
+function LatestExport({ latest, continuesInBackground }) {
+  const [open, setOpen] = useState6(false);
+  const percent = latest.unitsTotal ? Math.round(latest.unitsDone / latest.unitsTotal * 100) : 0;
+  const label = latest.status === "running" ? "Preparing your export" : latest.status === "complete" ? "Your export is ready" : "The export failed";
+  return /* @__PURE__ */ jsx7(
+    SettingsRow2,
+    {
+      label,
+      layout: "stacked",
+      description: latest.status === "failed" ? void 0 : progressLine(latest),
+      error: latest.status === "failed" ? `${latest.error ?? "A source could not be read."} Start a new export to try again.` : void 0,
+      children: /* @__PURE__ */ jsxs6("div", { className: "grid w-full min-w-0 gap-3 text-sm", children: [
+        latest.status === "running" && /* @__PURE__ */ jsxs6(Fragment5, { children: [
+          /* @__PURE__ */ jsx7(Progress, { value: percent, "aria-label": "Export progress" }),
+          continuesInBackground && /* @__PURE__ */ jsx7("p", { className: "text-muted-foreground", children: "You can close this page. The export keeps going, and the download is here when you return." })
+        ] }),
+        latest.downloadUrl && /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2", children: [
+          /* @__PURE__ */ jsx7(Button5, { asChild: true, variant: "outline", children: /* @__PURE__ */ jsx7("a", { href: latest.downloadUrl, download: true, children: "Download zip" }) }),
+          /* @__PURE__ */ jsxs6("span", { className: "text-muted-foreground", children: [
+            "Link expires ",
+            latest.downloadExpiresAt ? new Date(latest.downloadExpiresAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "soon",
+            "; reload for a new one."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs6(Collapsible2, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsx7(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs6(Button5, { type: "button", variant: "ghost", className: "-ml-4", children: [
+            open ? "Hide sources" : `Show ${latest.units.length} sources`,
+            /* @__PURE__ */ jsx7(ChevronDown2, { "aria-hidden": "true", className: open ? "rotate-180" : void 0 })
+          ] }) }),
+          /* @__PURE__ */ jsx7(CollapsibleContent2, { children: /* @__PURE__ */ jsx7("ul", { className: "mt-1 divide-y divide-[color:var(--border-subtle)] rounded-lg border border-border", children: latest.units.map((unit) => /* @__PURE__ */ jsxs6("li", { className: "flex flex-wrap items-center justify-between gap-x-3 gap-y-1 px-3 py-2", children: [
+            /* @__PURE__ */ jsx7("span", { className: "min-w-0 [overflow-wrap:anywhere]", children: unit.name }),
+            /* @__PURE__ */ jsx7("span", { className: unit.status === "failed" ? "text-[var(--surface-danger-text)]" : "text-muted-foreground", children: unitState(unit) })
+          ] }, unit.name)) }) })
+        ] })
+      ] })
+    }
+  );
+}
+function ExportSection({
+  id = "export",
+  title = "Export",
+  endpoint,
+  canExport,
+  disabledReason,
+  description = "A zip of everything. Credentials are never included.",
+  fetcher,
+  continuesInBackground = false,
+  children
+}) {
+  const { latest, error, loading, starting, running, start, retry } = useWorkspaceExport({ endpoint, enabled: canExport, fetcher });
+  const showExport = canExport || disabledReason != null;
+  if (!showExport && children == null) return null;
+  return /* @__PURE__ */ jsxs6(SettingsSection2, { id, title, children: [
+    showExport && /* @__PURE__ */ jsx7(
+      SettingsRow2,
+      {
+        label: "Export everything",
+        layout: "compact",
+        description,
+        disabledReason: canExport ? void 0 : disabledReason,
+        error: canExport ? error ?? void 0 : void 0,
+        onRetry: canExport && error ? retry : void 0,
+        children: /* @__PURE__ */ jsx7(Button5, { type: "button", variant: "outline", disabled: !canExport || loading || starting || running, loading: starting, onClick: () => void start(), children: running ? "Exporting\u2026" : "Export" })
+      }
+    ),
+    canExport && latest && /* @__PURE__ */ jsx7(LatestExport, { latest, continuesInBackground }),
+    children
+  ] });
+}
+
+// src/settings-react/delete-workspace-section.tsx
+import { Button as Button6, SettingsRow as SettingsRow3, SettingsSection as SettingsSection3 } from "@tangle-network/ui/primitives";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function listCounts(counts) {
+  const shown = counts.filter((entry) => entry.count > 0).map((entry) => `${entry.count.toLocaleString()} ${entry.label}`);
+  if (shown.length === 0) return null;
+  return shown.length === 1 ? shown[0] : `${shown.slice(0, -1).join(", ")} and ${shown[shown.length - 1]}`;
+}
+function DeleteWorkspaceSection({
+  id = "delete",
+  name,
+  counts = [],
+  noun = "project",
+  disabledReason,
+  notice,
+  onDelete,
+  onDeleted
+}) {
+  const title = `Delete ${noun}`;
+  const removed = listCounts(counts);
+  const trigger = /* @__PURE__ */ jsxs7(Button6, { type: "button", variant: "destructive-outline", disabled: disabledReason != null, children: [
+    title,
+    "\u2026"
+  ] });
+  return /* @__PURE__ */ jsx8(SettingsSection3, { id, title, tone: "danger", children: /* @__PURE__ */ jsx8(
+    SettingsRow3,
+    {
+      label: `Delete this ${noun} for everyone`,
+      description: "This can\u2019t be undone.",
+      disabledReason,
+      layout: "compact",
+      children: disabledReason != null ? trigger : /* @__PURE__ */ jsx8(
+        ConfirmAction,
+        {
+          trigger,
+          title: `Delete ${name}?`,
+          consequence: removed ? `This permanently deletes ${name} for everyone: ${removed}. It can\u2019t be undone.` : `This permanently deletes ${name} for everyone. It can\u2019t be undone.`,
+          notice,
+          confirmLabel: title,
+          tone: "danger",
+          requireText: name,
+          onConfirm: onDelete,
+          onConfirmed: onDeleted
+        }
+      )
+    }
+  ) });
+}
+
+// src/settings-react/timezone-picker.tsx
+import { Button as Button7, Input as Input3 } from "@tangle-network/ui/primitives";
+import { Check as Check2, ChevronDown as ChevronDown3 } from "lucide-react";
+import { useCallback as useCallback4, useEffect as useEffect6, useId as useId3, useMemo as useMemo2, useRef as useRef4, useState as useState7 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var REGIONS = [
+  ["America", "Americas"],
+  ["Europe", "Europe"],
+  ["Africa", "Africa"],
+  ["Asia", "Asia"],
+  ["Australia", "Australia"],
+  ["Pacific", "Pacific"],
+  ["Atlantic", "Atlantic"],
+  ["Indian", "Indian Ocean"],
+  ["Antarctica", "Antarctica"],
+  ["Arctic", "Arctic"]
+];
+var OTHER_REGION = "UTC and other";
+function regionOf(id) {
+  const prefix = id.split("/")[0] ?? "";
+  return REGIONS.find(([name]) => name === prefix)?.[1] ?? OTHER_REGION;
+}
+function cityOf(id) {
+  if (id === "UTC" || id === "Etc/UTC") return "Coordinated Universal Time";
+  return (id.split("/").pop() ?? id).replace(/_/g, " ");
+}
+function offsetMinutesOf(id, now) {
+  try {
+    const part = new Intl.DateTimeFormat("en-US", { timeZone: id, timeZoneName: "longOffset" }).formatToParts(now).find((p) => p.type === "timeZoneName")?.value ?? "";
+    const match = /^GMT(?:([+-−])(\d{1,2})(?::(\d{2}))?)?$/.exec(part);
+    if (!match) return null;
+    if (!match[1]) return 0;
+    const minutes = Number(match[2]) * 60 + Number(match[3] ?? 0);
+    return match[1] === "+" ? minutes : -minutes;
+  } catch {
+    return null;
+  }
+}
+function offsetLabel(minutes) {
+  if (minutes === 0) return "UTC";
+  const sign = minutes > 0 ? "+" : "\u2212";
+  const abs = Math.abs(minutes);
+  const rest = abs % 60;
+  return `UTC${sign}${Math.floor(abs / 60)}${rest ? `:${String(rest).padStart(2, "0")}` : ""}`;
+}
+var CURRENT_NAME = {
+  "America/Buenos_Aires": "America/Argentina/Buenos_Aires",
+  "America/Catamarca": "America/Argentina/Catamarca",
+  "America/Cordoba": "America/Argentina/Cordoba",
+  "America/Godthab": "America/Nuuk",
+  "America/Indianapolis": "America/Indiana/Indianapolis",
+  "America/Jujuy": "America/Argentina/Jujuy",
+  "America/Louisville": "America/Kentucky/Louisville",
+  "America/Mendoza": "America/Argentina/Mendoza",
+  "Asia/Calcutta": "Asia/Kolkata",
+  "Asia/Katmandu": "Asia/Kathmandu",
+  "Asia/Rangoon": "Asia/Yangon",
+  "Asia/Saigon": "Asia/Ho_Chi_Minh",
+  "Atlantic/Faeroe": "Atlantic/Faroe",
+  "Europe/Kiev": "Europe/Kyiv",
+  "Pacific/Enderbury": "Pacific/Kanton",
+  "Pacific/Ponape": "Pacific/Pohnpei",
+  "Pacific/Truk": "Pacific/Chuuk"
+};
+function zoneOf(id, now, legacy) {
+  const offset = offsetMinutesOf(id, now);
+  if (offset === null) return null;
+  return { id, ...legacy ? { legacy } : {}, city: cityOf(id), region: regionOf(id), offsetMinutes: offset, offsetLabel: offsetLabel(offset) };
+}
+function allZones(now) {
+  const listed = typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : [];
+  const zones = /* @__PURE__ */ new Map();
+  for (const name of listed.includes("UTC") ? listed : [...listed, "UTC"]) {
+    const id = CURRENT_NAME[name] ?? name;
+    if (zones.has(id)) continue;
+    const zone = zoneOf(id, now, id === name ? void 0 : name) ?? zoneOf(name, now);
+    if (zone) zones.set(zone.id, zone);
+  }
+  return [...zones.values()];
+}
+function queryOffset(query) {
+  const match = /^(?:utc|gmt)?\s*([+\-−])\s*(\d{1,2})(?::?(\d{2}))?$/.exec(query);
+  if (!match) return /^(?:utc|gmt)$/.test(query) ? 0 : null;
+  const minutes = Number(match[2]) * 60 + Number(match[3] ?? 0);
+  return match[1] === "+" ? minutes : -minutes;
+}
+function matches(zone, query) {
+  const offset = queryOffset(query);
+  if (offset !== null) return zone.offsetMinutes === offset;
+  return zone.city.toLowerCase().includes(query) || zone.id.toLowerCase().replace(/_/g, " ").includes(query) || (zone.legacy?.toLowerCase().replace(/_/g, " ").includes(query) ?? false) || zone.region.toLowerCase().includes(query);
+}
+function grouped(zones) {
+  const order = [...REGIONS.map(([, label]) => label), OTHER_REGION];
+  return order.map((region) => ({
+    region,
+    zones: zones.filter((zone) => zone.region === region).sort((a, b) => a.offsetMinutes - b.offsetMinutes || a.city.localeCompare(b.city))
+  })).filter((group) => group.zones.length > 0);
+}
+function TimezonePicker({ id, value, onChange, disabled = false, "aria-describedby": describedBy, "aria-invalid": invalid }) {
+  const [open, setOpen] = useState7(false);
+  const [query, setQuery] = useState7("");
+  const expanded = open && !disabled;
+  const changeOpen = useCallback4((next) => {
+    setOpen(next && !disabled);
+    if (!next) setQuery("");
+  }, [disabled]);
+  const { containerRef, triggerRef, panelRef, triggerProps } = usePopover(expanded, changeOpen);
+  const inputRef = useRef4(null);
+  const panelId = useId3();
+  const searchId = useId3();
+  const now = useMemo2(() => /* @__PURE__ */ new Date(), [expanded]);
+  const selected = useMemo2(() => zoneOf(CURRENT_NAME[value] ?? value, /* @__PURE__ */ new Date()), [value]);
+  const zones = useMemo2(() => expanded ? allZones(now) : [], [expanded, now]);
+  const q = query.trim().toLowerCase();
+  const groups = useMemo2(() => grouped(q ? zones.filter((zone) => matches(zone, q)) : zones), [zones, q]);
+  useEffect6(() => {
+    if (!expanded) return;
+    const focus = () => inputRef.current?.focus();
+    focus();
+    const frame = requestAnimationFrame(focus);
+    return () => cancelAnimationFrame(frame);
+  }, [expanded]);
+  useEffect6(() => {
+    const panel = panelRef.current;
+    if (!expanded || !panel) return;
+    function onKeyDown(event) {
+      if (event.defaultPrevented || event.isComposing || event.altKey || event.ctrlKey || event.metaKey) return;
+      const input = inputRef.current;
+      if (!input || !panel) return;
+      const controls = [input, ...panel.querySelectorAll("button[data-zone]")];
+      const index = controls.indexOf(document.activeElement);
+      if (index < 0) return;
+      if (event.key === "Tab") {
+        if (event.shiftKey && index === 0 || !event.shiftKey && index === controls.length - 1) {
+          changeOpen(false);
+          triggerRef.current?.focus();
+          if (event.shiftKey) event.preventDefault();
+        }
+        return;
+      }
+      let next;
+      if (event.key === "ArrowDown") next = (index + 1) % controls.length;
+      else if (event.key === "ArrowUp") next = (index - 1 + controls.length) % controls.length;
+      else if (event.key === "Enter" && index === 0 && controls.length > 1) {
+        event.preventDefault();
+        controls[1].click();
+        return;
+      } else return;
+      event.preventDefault();
+      controls[next]?.focus();
+    }
+    panel.addEventListener("keydown", onKeyDown);
+    return () => panel.removeEventListener("keydown", onKeyDown);
+  });
+  const pick = (zone) => {
+    changeOpen(false);
+    triggerRef.current?.focus();
+    if (zone !== value) onChange(zone);
+  };
+  return /* @__PURE__ */ jsxs8("div", { ref: containerRef, className: "relative flex w-full min-w-0", children: [
+    /* @__PURE__ */ jsxs8(
+      Button7,
+      {
+        type: "button",
+        variant: "bare",
+        ...triggerProps,
+        id,
+        disabled,
+        "aria-haspopup": "dialog",
+        "aria-controls": expanded ? panelId : void 0,
+        "aria-describedby": describedBy,
+        "aria-invalid": invalid || void 0,
+        "data-state": expanded ? "open" : "closed",
+        onClick: () => changeOpen(!expanded),
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            changeOpen(true);
+          }
+        },
+        className: fieldPickerTriggerClass({ interactive: !disabled }),
+        children: [
+          /* @__PURE__ */ jsxs8("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+            /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate", children: selected?.city ?? (value || "Choose a timezone") }),
+            selected && /* @__PURE__ */ jsx9("span", { className: "shrink-0 text-muted-foreground tabular-nums", children: selected.offsetLabel })
+          ] }),
+          /* @__PURE__ */ jsx9(ChevronDown3, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs8(
+      PopoverSurface,
+      {
+        open: expanded,
+        id: panelId,
+        role: "dialog",
+        "aria-label": "Choose a timezone",
+        triggerRef,
+        panelRef,
+        matchTriggerWidth: true,
+        side: "below",
+        contentKey: q,
+        className: `flex w-[22rem] max-w-[calc(100vw-2rem)] flex-col overflow-hidden rounded-xl border border-card-edge bg-popover text-foreground ${OVERLAY_SHADOW}`,
+        children: [
+          /* @__PURE__ */ jsx9("div", { className: "shrink-0 border-b border-border p-2", children: /* @__PURE__ */ jsx9(
+            Input3,
+            {
+              ref: inputRef,
+              id: searchId,
+              value: query,
+              onChange: (event) => setQuery(event.target.value),
+              placeholder: "Search by city or UTC offset",
+              "aria-label": "Search timezones",
+              autoComplete: "off",
+              spellCheck: false
+            }
+          ) }),
+          /* @__PURE__ */ jsxs8("div", { className: "min-h-0 overflow-y-auto p-1 pb-2", "data-zone-list": true, children: [
+            groups.length === 0 && /* @__PURE__ */ jsxs8("p", { role: "status", className: "px-3 py-4 text-center text-sm text-muted-foreground", children: [
+              "No timezone matches \u201C",
+              query.trim(),
+              "\u201D"
+            ] }),
+            groups.map((group) => /* @__PURE__ */ jsxs8("div", { role: "group", "aria-label": group.region, children: [
+              /* @__PURE__ */ jsx9("p", { className: "px-3 pb-1 pt-3 text-sm font-semibold text-muted-foreground", children: group.region }),
+              group.zones.map((zone) => {
+                const current = zone.id === (CURRENT_NAME[value] ?? value);
+                return /* @__PURE__ */ jsxs8(
+                  Button7,
+                  {
+                    type: "button",
+                    variant: "bare",
+                    "data-zone": zone.id,
+                    "aria-pressed": current,
+                    title: zone.id,
+                    onClick: () => pick(zone.id),
+                    className: `flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm ${POPOVER_OPTION_FOCUS}`,
+                    children: [
+                      /* @__PURE__ */ jsx9("span", { className: "min-w-0 flex-1 truncate", children: zone.city }),
+                      /* @__PURE__ */ jsx9("span", { className: "shrink-0 text-muted-foreground tabular-nums", children: zone.offsetLabel }),
+                      /* @__PURE__ */ jsx9(Check2, { "aria-hidden": "true", className: `size-4 shrink-0 text-[var(--accent-text)] ${current ? "" : "invisible"}` })
+                    ]
+                  },
+                  zone.id
+                );
+              })
+            ] }, group.region))
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ConfirmAction,
+  DeleteWorkspaceSection,
+  ExportSection,
+  InvitationsSection,
+  MembersSection,
+  SettingsLayout,
+  SettingsNav,
+  SettingsSaveBar,
+  TimezonePicker,
+  confirmSettingResponse,
+  settingFailure,
+  useSettingField
+};
+//# sourceMappingURL=index.js.map