@mdbase-dev/ui 0.1.0-beta.147 → 0.1.0-beta.148

package/README.md

@@ -102,6 +102,15 @@ import "@mdbase-dev/ui/collections.css";
   switcher: a popover, and a bottom sheet below 640px. `icon` puts the app's
   icon before the name, or `icon="mark"` the open collection's initials. In
   the `icon` variant it replaces the folder glyph.
+- Pass `open` and `onOpenChange` to control the switcher; `onOpenChange` is
+  called for every open and close it makes itself, controlled or not.
+  `variant="none"` renders no trigger, for an app that opens the switcher from
+  its own control, such as an item in an overflow menu. It requires
+  `anchorRef`, an element that stays mounted while the switcher is open (the
+  menu's button, say): the popover is placed against it, and focus returns to
+  it when the switcher or a row dialog opened from it closes. Close your menu
+  without moving focus back to that button; the switcher takes focus as it
+  opens.
 - `rowDetail(row)` adds a second line to each collection row, such as where it
   lives or which account it belongs to. `row.entry` is the SDK's entry.
 - `sections` lists collections the app knows about and the SDK doesn't (local

package/css/controls.css

@@ -786,3 +786,10 @@ textarea.mdbase-field {
     transition: none;
   }
 }
+
+/* Mode changes stay inline; progress is text, never an optimistic toggle. */
+.mdbase-collection-mode { display: grid; gap: var(--space-3); min-inline-size: 0; }
+.mdbase-collection-mode :is(h3, p, ul) { margin-block: 0; }
+.mdbase-collection-mode h3 { font-size: var(--font-size-section); font-weight: var(--font-weight-medium); }
+.mdbase-collection-mode > div:last-child { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.mdbase-collection-mode code { overflow-wrap: anywhere; }

package/dist/CollectionModeControl.d.ts

@@ -0,0 +1,11 @@
+type Mode = "private" | "cloud_copy";
+/** Owner controls only. Visibility follows actual executor registration, not a
+ * mode flag. Browser intent cannot produce native key/source consent. */
+export declare function CollectionModeControl({ collectionId, load, change, cancel, native }: {
+    collectionId: string;
+    load(): Promise<unknown>;
+    change(target: Mode, requestId: string): Promise<unknown>;
+    native?: boolean;
+    cancel?(target: Mode, requestId: string): Promise<unknown>;
+}): import("react").JSX.Element | null;
+export {};

package/dist/CollectionModeControl.js

@@ -0,0 +1,290 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { i18n, useLocaleRevision } from "./i18n.js";
+function read(value) {
+  if (!value || typeof value !== "object") return null;
+  const v = value;
+  if (v.execution_available !== true || v.current_mode !== "private" && v.current_mode !== "cloud_copy") return null;
+  if (v.change !== null) {
+    if (!v.change || typeof v.change !== "object") return null;
+    const c = v.change;
+    if (c.target_mode !== "private" && c.target_mode !== "cloud_copy" || typeof c.phase !== "string") return null;
+  }
+  return v;
+}
+/** Owner controls only. Visibility follows actual executor registration, not a
+ * mode flag. Browser intent cannot produce native key/source consent. */
+export function CollectionModeControl({
+  collectionId,
+  load,
+  change,
+  cancel,
+  native = false
+}) {
+  useLocaleRevision();
+  const [status, setStatus] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [failure, setFailure] = useState(false);
+  const [step, setStep] = useState(null);
+  const intent = useRef(null);
+  const generation = useRef(0);
+  // Callback identity changes with parent renders; it must not restart I/O.
+  const callbacks = useRef({
+    load,
+    change,
+    cancel
+  });
+  callbacks.current = {
+    load,
+    change,
+    cancel
+  };
+  useEffect(() => {
+    const active = ++generation.current;
+    setStatus(null);
+    setStep(null);
+    setFailure(false);
+    setBusy(false);
+    intent.current = null;
+    void callbacks.current.load().then(value => {
+      if (generation.current === active) setStatus(read(value));
+    }).catch(() => {});
+    return () => {
+      ++generation.current;
+    };
+  }, [collectionId]);
+  async function refresh() {
+    const active = generation.current;
+    setBusy(true);
+    setFailure(false);
+    try {
+      const next = read(await callbacks.current.load());
+      if (active !== generation.current) return;
+      setStatus(next);
+      if (next && !next.change) {
+        setStep(null);
+        intent.current = null;
+      }
+    } catch {
+      if (active === generation.current) setFailure(true);
+    } finally {
+      if (active === generation.current) setBusy(false);
+    }
+  }
+  async function commit(target) {
+    const active = generation.current;
+    if (intent.current?.target !== target) intent.current = {
+      target,
+      id: crypto.randomUUID()
+    };
+    setBusy(true);
+    setFailure(false);
+    try {
+      const result = await callbacks.current.change(target, intent.current.id);
+      if (active !== generation.current) return;
+      const next = read(await callbacks.current.load());
+      if (active !== generation.current) return;
+      setStatus(next);
+      if (next && !next.change) intent.current = null;
+      setStep(result && typeof result === "object" ? result : null);
+    } catch {
+      if (active === generation.current) setFailure(true);
+    } finally {
+      if (active === generation.current) setBusy(false);
+    }
+  }
+  async function cancelPending() {
+    if (!status?.change?.request_id || !callbacks.current.cancel) return;
+    const active = generation.current;
+    setBusy(true);
+    setFailure(false);
+    try {
+      await callbacks.current.cancel(status.change.target_mode, status.change.request_id);
+      const next = read(await callbacks.current.load());
+      if (active !== generation.current) return;
+      setStatus(next);
+      setStep(null);
+      intent.current = null;
+    } catch {
+      if (active === generation.current) setFailure(true);
+    } finally {
+      if (active === generation.current) setBusy(false);
+    }
+  }
+  if (!status) return null;
+  const pending = status.change;
+  const target = pending?.target_mode ?? (status.current_mode === "private" ? "cloud_copy" : "private");
+  const blocked = step?.phase === "waiting_for_devices" && Array.isArray(step.devices) ? step.devices.filter(v => typeof v === "string") : [];
+  const retryAt = typeof step?.retry_at === "string" ? step.retry_at : typeof pending?.retry_at === "string" ? pending.retry_at : undefined;
+  return _jsxs("section", {
+    className: "mdbase-collection-mode",
+    "aria-label": i18n._(
+    /** i18n */
+    {
+      id: "4GiuPT",
+      message: "Collection storage mode",
+      context: "Collection storage mode"
+    }),
+    "aria-busy": busy,
+    children: [_jsx("h3", {
+      children: i18n._(
+      /** i18n */
+      {
+        id: "vAr5Dp",
+        message: "Storage mode",
+        context: "Collection storage mode"
+      })
+    }), _jsx("p", {
+      children: status.current_mode === "private" ? i18n._(
+      /** i18n */
+      {
+        id: "EIDHh1",
+        message: "Private",
+        context: "Collection storage mode"
+      }) : i18n._(
+      /** i18n */
+      {
+        id: "oKQdii",
+        message: "Cloud copy",
+        context: "Collection storage mode"
+      })
+    }), _jsx("p", {
+      children: target === "private" ? i18n._(
+      /** i18n */
+      {
+        id: "FHz4md",
+        message: "Only your devices can read new content after the switch finishes. mdbase may still be able to read older content.",
+        context: "Collection storage mode"
+      }) : i18n._(
+      /** i18n */
+      {
+        id: "bcDV8T",
+        message: "mdbase will be able to read the collection, including its existing history, and serve it while your devices are off.",
+        context: "Collection storage mode"
+      })
+    }), pending && _jsx("p", {
+      role: "status",
+      children: blocked.length > 0 ? i18n._(
+      /** i18n */
+      {
+        id: "3w1RWH",
+        message: "Waiting for devices to update.",
+        context: "Collection storage mode"
+      }) : pending.phase === "waiting_for_token_expiry" ? i18n._(
+      /** i18n */
+      {
+        id: "lx5IrT",
+        message: "Waiting for older device connections to expire. Cloud copy remains on until the switch finishes.",
+        context: "Collection storage mode"
+      }) : pending.phase === "waiting_for_device" ? i18n._(
+      /** i18n */
+      {
+        id: "3FYCb9",
+        message: "Open mdbase connect on one of the owner's devices to finish the switch.",
+        context: "Collection storage mode"
+      }) : i18n._(
+      /** i18n */
+      {
+        id: "13DGsZ",
+        message: "Finishing the switch. Keep the owner device connected.",
+        context: "Collection storage mode"
+      })
+    }), retryAt && Number.isFinite(Date.parse(retryAt)) && _jsx("p", {
+      children: _jsx("time", {
+        dateTime: retryAt,
+        children: i18n._(
+        /** i18n */
+        {
+          id: "ejJPcY",
+          message: "Continue after {0}.",
+          context: "Collection storage mode",
+          values: {
+            0: new Date(retryAt).toLocaleString()
+          }
+        })
+      })
+    }), blocked.length > 0 && _jsxs("div", {
+      role: "status",
+      children: [_jsx("p", {
+        children: i18n._(
+        /** i18n */
+        {
+          id: "YQ2gus",
+          message: "Update or revoke these devices before continuing:",
+          context: "Collection storage mode"
+        })
+      }), _jsx("ul", {
+        children: blocked.map(id => _jsx("li", {
+          children: _jsx("code", {
+            children: id
+          })
+        }, id))
+      })]
+    }), failure && _jsx("p", {
+      role: "alert",
+      children: i18n._(
+      /** i18n */
+      {
+        id: "Iu3ZPh",
+        message: "We couldn\u2019t confirm progress. Refresh, then retry. An interrupted switch may already have started.",
+        context: "Collection storage mode"
+      })
+    }), _jsxs("div", {
+      children: [(!pending || native) && _jsx("button", {
+        type: "button",
+        className: "mdbase-button",
+        disabled: busy,
+        onClick: () => void commit(target),
+        children: busy ? i18n._(
+        /** i18n */
+        {
+          id: "3xE-Bk",
+          message: "Working\u2026",
+          context: "Collection storage mode"
+        }) : pending ? i18n._(
+        /** i18n */
+        {
+          id: "JKLDUc",
+          message: "Continue on this device",
+          context: "Collection storage mode"
+        }) : target === "private" ? i18n._(
+        /** i18n */
+        {
+          id: "rO1a9-",
+          message: "Make private",
+          context: "Collection storage mode"
+        }) : i18n._(
+        /** i18n */
+        {
+          id: "nVYD2-",
+          message: "Turn on Cloud copy",
+          context: "Collection storage mode"
+        })
+      }), cancel && pending?.request_id && ["waiting_for_device", "waiting_for_token_expiry"].includes(pending.phase) && _jsx("button", {
+        type: "button",
+        className: "mdbase-button is-tertiary",
+        disabled: busy,
+        onClick: () => void cancelPending(),
+        children: i18n._(
+        /** i18n */
+        {
+          id: "VON31G",
+          message: "Cancel switch",
+          context: "Collection storage mode"
+        })
+      }), _jsx("button", {
+        type: "button",
+        className: "mdbase-button is-tertiary",
+        disabled: busy,
+        onClick: () => void refresh(),
+        children: i18n._(
+        /** i18n */
+        {
+          id: "tHHSXx",
+          message: "Refresh status",
+          context: "Collection storage mode"
+        })
+      })]
+    })]
+  });
+}

package/dist/collections/CollectionSwitcher.d.ts

@@ -1,22 +1,47 @@
-import { type JSX, type ReactNode } from "react";
+import { type JSX, type ReactNode, type RefObject } from "react";
 import { type RowDialog } from "./parts.js";
 import { type CollectionUi, type CollectionUiOptions } from "./use-collection-ui.js";
-export interface CollectionSwitcherProps extends CollectionUiOptions {
-    /** "full": name and role; "compact": name only; "icon": a glyph for toolbars. */
-    readonly variant?: "full" | "compact" | "icon";
+export type CollectionSwitcherProps = CollectionUiOptions & {
     readonly className?: string;
     /**
      * Leading content in the trigger: the app's icon, or "mark" for the open
      * collection's initials. In the "icon" variant it replaces the folder glyph.
      */
     readonly icon?: ReactNode | "mark";
-}
+    /**
+     * Whether the switcher is open. Leave it out and the switcher keeps its own
+     * state; pass it and the switcher only asks through `onOpenChange`.
+     */
+    readonly open?: boolean;
+    /** Called whenever the switcher opens or closes itself, controlled or not. */
+    readonly onOpenChange?: (open: boolean) => void;
+} & ({
+    /** "full": name and role; "compact": name only; "icon": a glyph for toolbars; "none": no trigger. */
+    readonly variant?: "full" | "compact" | "icon";
+    readonly anchorRef?: never;
+} | {
+    /**
+     * No trigger of its own: the app opens the switcher with `open` and
+     * `onOpenChange`, for instance from an item in its own menu.
+     */
+    readonly variant: "none";
+    /**
+     * The app's element the switcher belongs to, such as the button of the menu
+     * that offered it. The wide-screen popover is placed against it and focus
+     * returns to it on close. It must stay mounted while the switcher is open.
+     */
+    readonly anchorRef: RefObject<HTMLElement | null>;
+});
 /**
  * The in-app collection switcher: a trigger that opens the approved collections
  * (one click switches, no Connect window), "Add a collection…", "Manage access"
  * and the account. A popover on wide screens, a bottom sheet on narrow ones.
+ *
+ * Pass `open` and `onOpenChange` to control it. With `variant="none"` it has no
+ * trigger, so an app can open it from its own control and pass that control's
+ * element (or the menu button that held it) as `anchorRef`.
  */
-export declare function CollectionSwitcher({ variant, className, icon, ...options }: CollectionSwitcherProps): JSX.Element;
+export declare function CollectionSwitcher({ variant, className, icon, open: openProp, onOpenChange, anchorRef, ...options }: CollectionSwitcherProps): JSX.Element;
 /** The switcher's list and actions, also shown inline by `CollectionPanel`. */
 export declare function SwitcherContent({ ui, onDone, onDialog }: {
     readonly ui: CollectionUi;

package/dist/collections/CollectionSwitcher.js

@@ -11,17 +11,32 @@ const NARROW = "(max-width: 639.98px)";
  * The in-app collection switcher: a trigger that opens the approved collections
  * (one click switches, no Connect window), "Add a collection…", "Manage access"
  * and the account. A popover on wide screens, a bottom sheet on narrow ones.
+ *
+ * Pass `open` and `onOpenChange` to control it. With `variant="none"` it has no
+ * trigger, so an app can open it from its own control and pass that control's
+ * element (or the menu button that held it) as `anchorRef`.
  */
 export function CollectionSwitcher({
   variant = "full",
   className,
   icon,
+  open: openProp,
+  onOpenChange,
+  anchorRef,
   ...options
 }) {
   const ui = useCollectionUi(options);
-  const [open, setOpen] = useState(false);
+  const [ownOpen, setOwnOpen] = useState(false);
+  const open = openProp ?? ownOpen;
+  const setOpen = next => {
+    if (next === open) return;
+    if (openProp === undefined) setOwnOpen(next);
+    onOpenChange?.(next);
+  };
   const [dialog, setDialog] = useState(null);
   const trigger = useRef(null);
+  // The element the panel is placed against and hands focus back to.
+  const anchor = anchorRef ?? trigger;
   const panelId = useId();
   const narrow = useNarrow();
   const {
@@ -40,20 +55,20 @@ export function CollectionSwitcher({
   }) : _jsx(CollectionsGlyph, {}) : icon;
   const close = refocus => {
     setOpen(false);
-    if (refocus) trigger.current?.focus();
+    if (refocus) anchor.current?.focus();
   };
   const toDialog = next => {
     setOpen(false);
     setDialog(next);
   };
-  // The popover that held the row is gone: a closed row dialog hands focus to the trigger.
+  // The popover that held the row is gone: a closed row dialog hands focus to the anchor.
   const returnFocus = useRef(false);
   useEffect(() => {
     if (dialog || !returnFocus.current) return;
     returnFocus.current = false;
     const active = document.activeElement;
-    if (!active || active === document.body) trigger.current?.focus();
-  }, [dialog]);
+    if (!active || active === document.body) anchor.current?.focus();
+  }, [dialog, anchor]);
   const content = _jsx(SwitcherContent, {
     ui: ui,
     onDone: () => close(false),
@@ -62,7 +77,7 @@ export function CollectionSwitcher({
   return _jsxs("span", {
     className: ["mdbase-collections", "mdbase-collections-switcher", className].filter(Boolean).join(" "),
     "data-variant": variant,
-    children: [_jsxs("button", {
+    children: [variant !== "none" && _jsxs("button", {
       ref: trigger,
       type: "button",
       className: "mdbase-collections-trigger",
@@ -73,7 +88,7 @@ export function CollectionSwitcher({
         collection: currentName
       }) : copy.switchCollectionNone,
       title: name,
-      onClick: () => setOpen(value => !value),
+      onClick: () => setOpen(!open),
       children: [busy === "select" || busy === "add" || view.kind === "opening" ? _jsx("span", {
         className: "mdbase-collections-spinner",
         "aria-hidden": "true"
@@ -103,7 +118,7 @@ export function CollectionSwitcher({
     }) : _jsx(SwitcherPopover, {
       id: panelId,
       ui: ui,
-      triggerRef: trigger,
+      anchorRef: anchor,
       onClose: close,
       children: content
     })), _jsx(RowDialogs, {
@@ -430,11 +445,15 @@ function CheckGlyph() {
     })
   });
 }
-/** Wide screens: a non-modal dialog anchored to the trigger, in the top layer where supported. */
+/**
+ * Wide screens: a non-modal dialog anchored to the trigger (or the app's
+ * anchor), in the top layer where supported. Pointer presses and focus on the
+ * anchor count as inside, so the trigger can toggle it.
+ */
 function SwitcherPopover({
   id,
   ui,
-  triggerRef,
+  anchorRef,
   onClose,
   children
 }) {
@@ -443,10 +462,10 @@ function SwitcherPopover({
   closeRef.current = onClose;
   useLayoutEffect(() => {
     const panel = ref.current;
-    const trigger = triggerRef.current;
-    if (!panel || !trigger) return undefined;
+    const anchor = anchorRef.current;
+    if (!panel || !anchor) return undefined;
     if (typeof panel.showPopover === "function") panel.showPopover();
-    const box = trigger.getBoundingClientRect();
+    const box = anchor.getBoundingClientRect();
     const width = Math.min(340, window.innerWidth - 16);
     panel.style.width = `${width}px`;
     const place = anchoredPlacement(box, {
@@ -467,11 +486,11 @@ function SwitcherPopover({
     return () => {
       if (typeof panel.hidePopover === "function" && panel.matches(":popover-open")) panel.hidePopover();
     };
-  }, [triggerRef]);
+  }, [anchorRef]);
   useEffect(() => {
     const outside = event => {
       const target = event.target;
-      if (target && !ref.current?.contains(target) && !triggerRef.current?.contains(target)) closeRef.current(false);
+      if (target && !ref.current?.contains(target) && !anchorRef.current?.contains(target)) closeRef.current(false);
     };
     const resize = () => closeRef.current(false);
     document.addEventListener("pointerdown", outside, true);
@@ -480,7 +499,7 @@ function SwitcherPopover({
       document.removeEventListener("pointerdown", outside, true);
       window.removeEventListener("resize", resize);
     };
-  }, [triggerRef]);
+  }, [anchorRef]);
   return _jsx("div", {
     ref: ref,
     id: id,
@@ -497,7 +516,7 @@ function SwitcherPopover({
     },
     onBlur: event => {
       const next = event.relatedTarget;
-      if (next && !ref.current?.contains(next) && !triggerRef.current?.contains(next)) onClose(false);
+      if (next && !ref.current?.contains(next) && !anchorRef.current?.contains(next)) onClose(false);
     },
     children: children
   });

package/dist/collections/SetupReview.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { describeError } from "@mdbase-dev/sdk/describe";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { actionNotice, problemControl } from "./model.js";
 import { ActionButton, NoticeBlock } from "./parts.js";
 /** Quiet re-plans after a transient refusal (about a minute in all). */
@@ -21,9 +21,28 @@ export function SetupReview({
   });
   const [request, setRequest] = useState({
     options: {},
-    notice: null
+    notice: null,
+    quiet: false
   });
   const [applying, setApplying] = useState(false);
+  const applyingNow = useRef(false);
+  const shown = useRef(state.status);
+  shown.current = state.status;
+  // Readiness re-checks whenever the collection changes (in another tab, or in
+  // the person's own editor). A review planned before that change can be stale:
+  // a restored type may now be upgradable, or a refusal resolved. Plan again,
+  // quietly, each time a re-check settles; an apply in flight owns the screen.
+  const checking = useSyncExternalStore(mdbase.subscribe, () => mdbase.getSnapshot().readiness.checking);
+  const wasChecking = useRef(checking);
+  useEffect(() => {
+    const settled = wasChecking.current && !checking;
+    wasChecking.current = checking;
+    // Only a review on screen is kept: planning or a failure plans again plainly.
+    if (settled && !applyingNow.current) setRequest(current => ({
+      ...current,
+      quiet: shown.current === "ready"
+    }));
+  }, [checking]);
   useEffect(() => {
     const controller = new AbortController();
     let timer = null;
@@ -34,14 +53,16 @@ export function SetupReview({
         ...request.options,
         signal: controller.signal
       }).then(plan => {
-        if (!controller.signal.aborted) setState({
+        if (controller.signal.aborted) return;
+        setState(current => ({
           status: "ready",
           plan,
-          notice: request.notice
-        });
+          notice: request.quiet ? current.notice : request.notice
+        }));
       }, cause => {
         if (controller.signal.aborted) return;
         const described = describeError(cause);
+        if (request.quiet) return;
         if (described?.transient && n < TRANSIENT_REPLANS) {
           timer = setTimeout(() => attempt(n + 1), described.retryAfterMs ?? Math.min(500 * 2 ** n, 5000));
           return;
@@ -65,16 +86,25 @@ export function SetupReview({
     });
     setRequest({
       options,
-      notice
+      notice,
+      quiet: false
     });
   };
+  // Nothing here can change the collection: check it again, then plan again,
+  // after the person has fixed it elsewhere. Readiness may open it outright.
+  const recheck = () => {
+    void ui.actions.track("assess", () => mdbase.assess()).then(() => replan(request.options), () => {});
+  };
   const apply = plan => {
     setApplying(true);
+    applyingNow.current = true;
     mdbase.setup.apply(plan).then(result => {
       setApplying(false);
+      applyingNow.current = false;
       if (result.outcome === "changed") replan(request.options, actionNotice(describeError("setup_changed")));
     }, cause => {
       setApplying(false);
+      applyingNow.current = false;
       const notice = actionNotice(describeError(cause));
       setState(current => current.status === "ready" ? {
         ...current,
@@ -122,6 +152,11 @@ export function SetupReview({
   } : null;
   const nothing = plan.status === "current" || plan.changes.length === 0 && plan.conflicts.length === 0;
   const adoptable = Object.keys(plan.adoptable).length > 0;
+  const applicable = !refusal && plan.canApply;
+  // NoticeBlock shows a refusal's own control, except `set_up` (this is setup).
+  const refusalActs = !!refusalNotice?.control && refusalNotice.control.kind !== "set_up";
+  // Never leave the review without a way forward.
+  const stuck = !applicable && !adoptable && !refusalActs;
   return _jsxs("div", {
     className: "mdbase-collections-setup",
     children: [state.notice && _jsx(NoticeBlock, {
@@ -156,7 +191,7 @@ export function SetupReview({
       })]
     }), _jsxs("div", {
       className: "mdbase-collections-actions",
-      children: [!refusal && plan.canApply && _jsx(ActionButton, {
+      children: [applicable && _jsx(ActionButton, {
         tone: "primary",
         progress: applying ? ui.copy.setupApplying : null,
         onClick: () => apply(plan),
@@ -169,6 +204,12 @@ export function SetupReview({
           adopt: plan.adoptable
         }),
         children: ui.say("setupUseAppVersion")
+      }), stuck && _jsx(ActionButton, {
+        tone: "primary",
+        inert: ui.busy !== null,
+        progress: ui.busy === "assess" ? ui.copy.setupChecking : null,
+        onClick: recheck,
+        children: ui.copy.tryAgain
       })]
     })]
   });

package/dist/collections/mount.d.ts

@@ -4,7 +4,8 @@ export type CollectionUiPart = "panel" | "switcher" | "problem";
 export interface MountCollectionUiOptions extends CollectionUiOptions {
     /** "panel": sign-in, choosing and the list (a settings dialog); "switcher": the header trigger; "problem": the current problem with its fix. */
     readonly part: CollectionUiPart;
-    readonly variant?: CollectionSwitcherProps["variant"];
+    /** "switcher": the trigger's variant. "none" needs an app anchor, so it is not mountable. */
+    readonly variant?: Exclude<CollectionSwitcherProps["variant"], "none">;
     /** "switcher": leading content in the trigger ("mark" for the collection's initials). */
     readonly icon?: CollectionSwitcherProps["icon"];
     /** "panel": call `mdbase.start()` when it hasn't started. Default true. */