@k2b/cloud 0.39.0 → 0.41.0

package/src/ssr/HelpPanelArticle.island.tsx

@@ -0,0 +1,308 @@
+import { Button, NoticeCard, Placeholder, prefersReducedMotion, useLocale } from "@k2b/ui";
+import { createEffect, createSignal, onCleanup, onMount, Show } from "solid-js";
+import type { HelpDocumentPayload } from "../shared/help";
+import { helpMessages } from "./help-messages";
+import { panelElement } from "./layout-help-panel-lifecycle";
+import { helpPanelModules } from "./layout-help-panel-modules";
+import { type HelpPanelState, helpPanelState } from "./layout-help-panel-state";
+import type { HelpTopic } from "./layout-help-registry";
+import { helpLinkTarget } from "./layout-help-url";
+import { HelpArticleView } from "./layout-help-views";
+import { panelIdle } from "./panel-idle";
+
+export default function HelpPanelArticle(props: { topic?: HelpTopic }) {
+  const locale = useLocale();
+  const t = () => helpMessages.resolve([locale()]).t;
+  const [state, setState] = createSignal<HelpPanelState>();
+  const [reader, setReader] = createSignal<typeof import("./layout-help-panel-reader")>();
+  const [payload, setPayload] = createSignal<HelpDocumentPayload | null>(null);
+  const [error, setError] = createSignal<string | null>(null);
+  const [reloadRequired, setReloadRequired] = createSignal(false);
+  const [attempt, setAttempt] = createSignal(0);
+  let pending: Promise<typeof import("./layout-help-panel-reader")> | undefined;
+  let disposed = false;
+  let sectionPressed = false;
+  let queuedSection: { trigger: HTMLButtonElement; key: string } | undefined;
+  const sections = new Map<Element, () => void>();
+  const load = () =>
+    (pending ??= helpPanelModules
+      .reader()
+      .then((module) => {
+        if (!disposed) setReader(module);
+        return module;
+      })
+      .catch((error: unknown) => {
+        pending = undefined;
+        throw error;
+      }));
+  const warm = () => {
+    void load().catch(() => {});
+  };
+  const topic = () => (state() ? state()?.data.documents.find((topic) => topic.id === state()?.activeId()) : props.topic);
+  const clientVisible = () =>
+    state() ? state()?.view() === "article" && state()?.activeId() !== state()?.data.article?.id : !!props.topic;
+  const scrollToHash = (hash: string) => {
+    const current = state();
+    const heading = Array.from(
+      current?.root.querySelectorAll<HTMLElement>(
+        "article:not([hidden]) h1[id], article:not([hidden]) h2[id], article:not([hidden]) h3[id], article:not([hidden]) h4[id], article:not([hidden]) h5[id], article:not([hidden]) h6[id]",
+      ) ?? [],
+    ).find((element) => element.id === hash);
+    if (!heading) return false;
+    for (let details = heading.closest("details"); details; details = details.parentElement?.closest("details") ?? null)
+      details.open = true;
+    heading.scrollIntoView({ block: "start", behavior: prefersReducedMotion() ? "auto" : "smooth" });
+    return true;
+  };
+  onMount(() => {
+    const current = helpPanelState(panelElement());
+    setState(current);
+    const upgrade = (trigger: HTMLButtonElement, key: string) => {
+      // Safari keeps focus where it was when a button is clicked; only a focus move after the activation cancels it.
+      const start = document.activeElement;
+      const article = current.activeId();
+      void load()
+        .then((module) => {
+          // Back or another article while the chunk loads cancels the activation: the hidden article opens no menu.
+          if (disposed || !trigger.isConnected || current.view() !== "article" || current.activeId() !== article) return;
+          if (trigger.closest("[hidden]")) return;
+          // A pending chunk must not replace the trigger between pointerdown and pointerup.
+          if (sectionPressed) {
+            queuedSection = { trigger, key };
+            return;
+          }
+          const container = trigger.parentElement;
+          if (!container || sections.has(container)) return;
+          const focused = document.activeElement === trigger;
+          if (!focused && document.activeElement !== start && document.activeElement !== document.body) return;
+          setError(null);
+          sections.set(
+            container,
+            module.mountPanelSections(container, { locale: locale(), state: current, key, focused, onSection: scrollToHash }),
+          );
+        })
+        .catch((reason: unknown) => {
+          if (!disposed) {
+            setReloadRequired(true);
+            setError(reason instanceof Error ? reason.message : t().loadFallback);
+            trigger.title = t().loadFailed + ": " + t().reload;
+          }
+        });
+    };
+    const click = (event: MouseEvent) => {
+      if (
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey ||
+        !(event.target instanceof Element)
+      )
+        return;
+      const sectionTrigger = event.target.closest<HTMLButtonElement>("[data-help-sections]");
+      if (sectionTrigger) {
+        event.preventDefault();
+        event.stopPropagation();
+        upgrade(sectionTrigger, "ArrowDown");
+        return;
+      }
+      const button = event.target.closest<HTMLElement>("[data-help-topic]");
+      if (button) {
+        event.preventDefault();
+        current.open(button.dataset.helpTopic ?? "");
+        return;
+      }
+      if (event.target.closest("[data-help-unavailable] button")) {
+        location.reload();
+        return;
+      }
+      const anchor = event.target.closest<HTMLAnchorElement>(".help-article a[href]");
+      if (!anchor || (anchor.target && anchor.target !== "_self") || anchor.hasAttribute("download")) return;
+      const target = helpLinkTarget(anchor.getAttribute("href") ?? "", location.href, current.data);
+      if (!target) return;
+      if (target.kind === "section") {
+        if (scrollToHash(target.hash)) event.preventDefault();
+      } else if (target.topicId === null) {
+        event.preventDefault();
+        current.changeQuery("");
+        current.back();
+        const input = current.root.querySelector<HTMLInputElement>("[data-help-search]");
+        if (input) input.value = "";
+      } else if (current.data.documents.some((topic) => topic.id === target.topicId)) {
+        event.preventDefault();
+        current.open(target.topicId, target.hash);
+      }
+    };
+    const endPress = () => {
+      sectionPressed = false;
+      const next = queuedSection;
+      queuedSection = undefined;
+      if (next) upgrade(next.trigger, next.key);
+    };
+    const cancelPress = () => {
+      sectionPressed = false;
+      queuedSection = undefined;
+    };
+    const intent = (event: Event) => {
+      if (event.type === "pointerdown" && event.target instanceof Element && event.target.closest("[data-help-sections]"))
+        sectionPressed = true;
+      if (event.target instanceof Element && event.target.closest("[data-help-topic], .help-article a[href], [data-help-sections]")) warm();
+    };
+    const key = (event: KeyboardEvent) => {
+      intent(event);
+      const trigger = event.target instanceof Element ? event.target.closest<HTMLButtonElement>("[data-help-sections]") : null;
+      if (event.defaultPrevented || !trigger || !["Enter", " ", "ArrowDown", "ArrowUp"].includes(event.key)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      upgrade(trigger, event.key);
+    };
+    window.addEventListener("pointerup", endPress);
+    window.addEventListener("pointercancel", cancelPress);
+    current.root.addEventListener("click", click);
+    current.root.addEventListener("keydown", key);
+    const intents = ["pointerover", "pointerdown", "focusin"] as const;
+    for (const event of intents) current.root.addEventListener(event, intent);
+    onCleanup(panelIdle(warm));
+    onCleanup(() => {
+      window.removeEventListener("pointerup", endPress);
+      window.removeEventListener("pointercancel", cancelPress);
+      current.root.removeEventListener("click", click);
+      current.root.removeEventListener("keydown", key);
+      for (const event of intents) current.root.removeEventListener(event, intent);
+      for (const dispose of sections.values()) dispose();
+    });
+  });
+  onCleanup(() => {
+    disposed = true;
+  });
+  createEffect(() => {
+    const current = state();
+    const active = topic();
+    attempt();
+    setPayload(null);
+    setError(null);
+    setReloadRequired(false);
+    if (!current || !active || !clientVisible()) return;
+    const controller = new AbortController();
+    let cancelled = false;
+    const chunkFailed = (reason: unknown): never => {
+      if (!cancelled) setReloadRequired(true);
+      throw reason;
+    };
+    void Promise.all([
+      load().catch(chunkFailed),
+      helpPanelModules
+        .document()
+        .catch(chunkFailed)
+        .then((module) => module.loadPanelDocument(current, active, controller.signal, t())),
+    ])
+      .then(([, document]) => {
+        if (!cancelled) setPayload(document);
+      })
+      .catch((reason: unknown) => {
+        if (!cancelled && !(reason instanceof DOMException && reason.name === "AbortError"))
+          setError(reason instanceof Error ? reason.message : t().loadFallback);
+      });
+    onCleanup(() => {
+      cancelled = true;
+      controller.abort();
+    });
+  });
+  /** The navigation whose heading focus and section jump are done; returning from search must not replay them. */
+  let settled = 0;
+  createEffect(() => {
+    const current = state();
+    const navigation = current?.navigation();
+    // The loaded reader replaces the loading frame and its heading; follow it unless the reader moved focus elsewhere.
+    const body = current?.activeId() === current?.data.article?.id || (!!payload() && !!reader());
+    if (!current || !navigation?.version || navigation.version === settled || current.view() !== "article") return;
+    const frame = requestAnimationFrame(() => {
+      const focused = document.activeElement;
+      if (!focused || focused === document.body || focused.matches(".help-article-title") || focused.closest("[hidden]"))
+        current.focusHeading();
+      if (!body) return;
+      settled = navigation.version;
+      if (navigation.hash) scrollToHash(navigation.hash);
+    });
+    onCleanup(() => cancelAnimationFrame(frame));
+  });
+  createEffect(() => {
+    const current = state();
+    const live = current?.root.querySelector("[data-help-announcement]");
+    if (live) live.textContent = current?.announcement() ?? "";
+  });
+  return (
+    <>
+      <Show when={clientVisible() && topic()}>
+        {(active) => (
+          <article class="help-article" data-surface="panel">
+            <Show
+              when={payload() ? reader() : undefined}
+              fallback={
+                <HelpArticleView
+                  surface="panel"
+                  topic={active()}
+                  parts={null}
+                  document={null}
+                  Markdown={() => null}
+                  showTools={false}
+                  sectionMenu={null}
+                  copyButton={null}
+                  loading={
+                    <Show when={!error()}>
+                      <div class="min-h-[24rem]">
+                        <Placeholder state="loading" variant="panel" title={t().loading} />
+                      </div>
+                    </Show>
+                  }
+                  failure={
+                    <Show when={error()}>
+                      {(message) => (
+                        <NoticeCard tone="danger" title={t().loadFailed} detail={message()}>
+                          <Button
+                            size="sm"
+                            variant="secondary"
+                            onClick={() => (reloadRequired() ? location.reload() : setAttempt((value) => value + 1))}
+                          >
+                            {reloadRequired() ? t().reload : t().tryAgain}
+                          </Button>
+                        </NoticeCard>
+                      )}
+                    </Show>
+                  }
+                  toc={null}
+                  copyAction={null}
+                  headingRef={() => {}}
+                  contentRef={() => {}}
+                  onBack={() => state()?.back()}
+                />
+              }
+            >
+              {(module) => {
+                const Reader = module().HelpPanelReader;
+                return (
+                  <Show when={payload()}>
+                    {(document) => {
+                      const current = state();
+                      return current && <Reader state={current} topic={active()} document={document()} onSection={scrollToHash} />;
+                    }}
+                  </Show>
+                );
+              }}
+            </Show>
+          </article>
+        )}
+      </Show>
+      <Show when={state()?.activeId() === state()?.data.article?.id && error()}>
+        {(message) => (
+          <NoticeCard tone="danger" title={t().loadFailed} detail={message()}>
+            <Button size="sm" variant="secondary" onClick={() => location.reload()}>
+              {t().reload}
+            </Button>
+          </NoticeCard>
+        )}
+      </Show>
+    </>
+  );
+}

package/src/ssr/HelpPanelBack.island.tsx

@@ -0,0 +1,32 @@
+import { IconButton, useLocale } from "@k2b/ui";
+import { createSignal, onMount, Show } from "solid-js";
+import { helpMessages } from "./help-messages";
+import { capturePanelFocus, panelElement, restorePanelFocus } from "./layout-help-panel-lifecycle";
+import { type HelpPanelState, helpPanelState } from "./layout-help-panel-state";
+
+capturePanelFocus();
+export default function HelpPanelBack(props: { back: boolean; tile: string }) {
+  const locale = useLocale();
+  const t = () => helpMessages.resolve([locale()]).t;
+  const [state, setState] = createSignal<HelpPanelState>();
+  onMount(() => {
+    const wrapper = panelElement();
+    setState(helpPanelState(wrapper));
+    const button = wrapper.querySelector(".help-head-back");
+    if (button) restorePanelFocus(button);
+  });
+  return (
+    <Show
+      when={state()?.view() === "article" || (!state() && props.back)}
+      fallback={
+        <span class="help-head-tile" aria-hidden="true">
+          <i class={props.tile} />
+        </span>
+      }
+    >
+      <IconButton class="help-head-back" label={t().backToTopics} title={t().back} onClick={() => state()?.back()}>
+        <i class="ti ti-arrow-left" />
+      </IconButton>
+    </Show>
+  );
+}

package/src/ssr/HelpPanelMenu.island.tsx

@@ -0,0 +1,133 @@
+import { Button, NoticeCard, useLocale } from "@k2b/ui";
+import { createSignal, onCleanup, onMount, Show } from "solid-js";
+import { helpMessages } from "./help-messages";
+import { HelpPanelMenuTrigger } from "./layout-help-panel-controls";
+import { capturePanelFocus, panelElement, restorePanelFocus } from "./layout-help-panel-lifecycle";
+import type { MenuActivation } from "./layout-help-panel-menu";
+import { helpPanelModules } from "./layout-help-panel-modules";
+import { type HelpPanelState, helpPanelState } from "./layout-help-panel-state";
+import { panelIdle } from "./panel-idle";
+
+capturePanelFocus();
+export default function HelpPanelMenu() {
+  const locale = useLocale();
+  const t = () => helpMessages.resolve([locale()]).t;
+  const [menu, setMenu] = createSignal<typeof import("./layout-help-panel-menu")>();
+  const [error, setError] = createSignal(false);
+  let state: HelpPanelState | undefined;
+  let loaded: typeof import("./layout-help-panel-menu") | undefined;
+  let pending: Promise<typeof import("./layout-help-panel-menu")> | undefined;
+  let activation: MenuActivation = { key: "ArrowDown", focus: false };
+  let disposed = false;
+  let pressed = false;
+  let queued: { key: string; trigger: HTMLButtonElement; pointer: boolean } | undefined;
+  const load = () =>
+    (pending ??= helpPanelModules
+      .menu()
+      .then((module) => {
+        loaded = module;
+        return module;
+      })
+      .catch((error: unknown) => {
+        pending = undefined;
+        throw error;
+      }));
+  const warm = () => {
+    void load().catch(() => {});
+  };
+  const activate = (key: string, trigger: HTMLButtonElement, pointer = false) => {
+    if (pressed) {
+      queued = { key, trigger, pointer };
+      return;
+    }
+    // Safari keeps focus where it was when a button is clicked; only a focus move after the activation cancels it.
+    const start = document.activeElement;
+    const swap = (module: typeof import("./layout-help-panel-menu")) => {
+      const focused = document.activeElement;
+      if (focused !== start && focused !== trigger && focused !== document.body) return;
+      activation = { key, focus: focused === trigger, pointer };
+      setMenu(module);
+    };
+    setError(false);
+    if (loaded) {
+      swap(loaded);
+      return;
+    }
+    void load()
+      .then((module) => {
+        if (disposed) return;
+        if (pressed) {
+          queued = { key, trigger, pointer };
+          return;
+        }
+        swap(module);
+      })
+      .catch(() => {
+        if (!disposed) setError(true);
+      });
+  };
+  const endPress = () => {
+    pressed = false;
+    const next = queued;
+    queued = undefined;
+    if (next) activate(next.key, next.trigger, next.pointer);
+  };
+  const cancelPress = () => {
+    pressed = false;
+    queued = undefined;
+  };
+  onMount(() => {
+    const wrapper = panelElement();
+    state = helpPanelState(wrapper);
+    const button = wrapper.querySelector("[data-help-menu]");
+    if (button) restorePanelFocus(button);
+    onCleanup(panelIdle(warm));
+    window.addEventListener("pointerup", endPress);
+    window.addEventListener("pointercancel", cancelPress);
+    onCleanup(() => {
+      window.removeEventListener("pointerup", endPress);
+      window.removeEventListener("pointercancel", cancelPress);
+    });
+  });
+  onCleanup(() => {
+    disposed = true;
+  });
+  return (
+    <Show
+      when={menu()}
+      fallback={
+        <>
+          <HelpPanelMenuTrigger
+            label={t().moreActions}
+            onPointerEnter={warm}
+            onPointerDown={() => {
+              pressed = true;
+              warm();
+            }}
+            onFocus={warm}
+            onClick={(event) => activate("ArrowDown", event.currentTarget, event.detail > 0)}
+            onKeyDown={(event) => {
+              warm();
+              if (!["Enter", " ", "ArrowDown", "ArrowUp"].includes(event.key)) return;
+              event.preventDefault();
+              event.stopPropagation();
+              activate(event.key, event.currentTarget);
+            }}
+          />
+          <Show when={error()}>
+            <NoticeCard class="absolute z-50" tone="danger" title={t().helpUnavailable} detail={t().helpUnavailableDetail}>
+              <Button size="sm" variant="secondary" onClick={() => location.reload()}>
+                {t().reload}
+              </Button>
+            </NoticeCard>
+          </Show>
+        </>
+      }
+    >
+      {(module) => {
+        const Menu = module().HelpPanelMenu;
+        return state && <Menu state={state} activation={activation} />;
+      }}
+    </Show>
+  );
+}

package/src/ssr/HelpPanelSearch.island.tsx

@@ -0,0 +1,123 @@
+import { Button, NoticeCard, useLocale } from "@k2b/ui";
+import { createEffect, createSignal, onCleanup, onMount, Show } from "solid-js";
+import { helpMessages } from "./help-messages";
+import { panelElement } from "./layout-help-panel-lifecycle";
+import { helpPanelModules } from "./layout-help-panel-modules";
+import { type HelpPanelState, helpPanelState } from "./layout-help-panel-state";
+import { panelIdle } from "./panel-idle";
+
+export default function HelpPanelSearch() {
+  const locale = useLocale();
+  const t = () => helpMessages.resolve([locale()]).t;
+  const [state, setState] = createSignal<HelpPanelState>();
+  const [engine, setEngine] = createSignal<typeof import("./layout-help-panel-search")>();
+  const [failed, setFailed] = createSignal(false);
+  let input: HTMLInputElement | null = null;
+  let pending: Promise<void> | undefined;
+  let disposed = false;
+  let lastValue = "";
+  const reserve = () => {
+    if (!input) return;
+    const region = state()?.results();
+    if (input.value.trim() && !lastValue.trim() && region) region.style.minHeight = `${region.offsetHeight}px`;
+    if (!input.value.trim() && region) region.style.minHeight = "";
+    lastValue = input.value;
+  };
+  const adopt = () => {
+    reserve();
+    // An empty field shows the start again, also after the search code failed to load.
+    if (input && !input.value.trim()) setFailed(false);
+    if (input && (engine() || failed() || !input.value.trim())) state()?.changeQuery(input.value);
+  };
+  const load = () =>
+    (pending ??= helpPanelModules
+      .search()
+      .then((module) => {
+        if (disposed) return;
+        setFailed(false);
+        setEngine(module);
+        adopt();
+      })
+      .catch(() => {
+        pending = undefined;
+        if (!disposed && input?.value.trim()) {
+          state()?.changeQuery(input.value);
+          setFailed(true);
+        }
+      }));
+  const intent = () => {
+    void load();
+  };
+  onMount(() => {
+    const current = helpPanelState(panelElement());
+    setState(current);
+    input = current.root.querySelector<HTMLInputElement>("[data-help-search]");
+    if (!input) return;
+    const typed = () => {
+      reserve();
+      intent();
+      adopt();
+    };
+    // TextInput publishes every input event, including IME input; keep that existing behavior.
+    input.addEventListener("input", typed);
+    input.addEventListener("compositionend", typed);
+    const intents = ["focus", "pointerdown", "keydown", "compositionstart"] as const;
+    for (const event of intents) input.addEventListener(event, intent);
+    const key = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || event.isComposing) return;
+      if (event.key === "Escape" && event.target === input && input?.value) {
+        event.preventDefault();
+        input.value = "";
+        adopt();
+        setFailed(false);
+        return;
+      }
+      if (event.ctrlKey || event.metaKey || event.altKey) return;
+      if (
+        event.key === "/" &&
+        !(
+          event.target instanceof Element &&
+          event.target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])')
+        )
+      ) {
+        event.preventDefault();
+        input?.focus();
+      }
+    };
+    document.addEventListener("keydown", key);
+    // A user can type before even the eager island arrives. The field itself has never been replaced.
+    if (input.value) typed();
+    onCleanup(panelIdle(intent));
+    onCleanup(() => {
+      input?.removeEventListener("input", typed);
+      input?.removeEventListener("compositionend", typed);
+      for (const event of intents) input?.removeEventListener(event, intent);
+      document.removeEventListener("keydown", key);
+    });
+  });
+  onCleanup(() => {
+    disposed = true;
+  });
+  createEffect(() => {
+    const current = state();
+    const content = current?.root.querySelector<HTMLElement>("[data-help-start-content]");
+    if (content) content.hidden = !!current?.query().trim() || failed();
+  });
+  return (
+    <>
+      <Show when={engine()}>
+        {(module) => {
+          const Results = module().HelpPanelSearchResults;
+          return <Show when={state()}>{(current) => <Results state={current()} />}</Show>;
+        }}
+      </Show>
+      <Show when={failed()}>
+        <NoticeCard tone="danger" title={t().helpUnavailable} detail={t().helpUnavailableDetail}>
+          <Button size="sm" variant="secondary" onClick={() => location.reload()}>
+            {t().reload}
+          </Button>
+        </NoticeCard>
+      </Show>
+    </>
+  );
+}

package/src/ssr/HelpPanelShortcuts.island.tsx

@@ -0,0 +1,22 @@
+import { type KeyboardPlatform, useLocale } from "@k2b/ui";
+import { createSignal, onCleanup, onMount } from "solid-js";
+import { onContextChange } from "../browser/panel";
+import { onPanelShortcutsChange } from "../browser/panel-shortcuts";
+import { readHelpPanelShortcuts } from "./layout-help-panel-shortcuts";
+import { type HelpShortcutCommand, helpShortcutGroups } from "./layout-help-start";
+import { HelpShortcutsView } from "./layout-help-views";
+import { platformMessages } from "./platform-messages";
+import { shellShortcuts } from "./shell-shortcuts";
+
+export default function HelpPanelShortcuts(props: { appName?: string; platform: KeyboardPlatform }) {
+  const locale = useLocale();
+  const seed = shellShortcuts(platformMessages.resolve([locale()]).t, { panel: true });
+  const [commands, setCommands] = createSignal<HelpShortcutCommand[]>(seed);
+  onMount(() => {
+    const update = () => setCommands(readHelpPanelShortcuts(seed));
+    onCleanup(onPanelShortcutsChange(update));
+    onCleanup(onContextChange(update));
+    update();
+  });
+  return <HelpShortcutsView groups={helpShortcutGroups(commands())} appName={props.appName} platform={props.platform} />;
+}

package/src/ssr/HelpPanelView.island.tsx

@@ -0,0 +1,27 @@
+import { createSignal, onCleanup, onMount } from "solid-js";
+import { getContext, onContextChange } from "../browser/panel";
+import { capturePanelFocus, panelElement, restorePanelFocus } from "./layout-help-panel-lifecycle";
+import { helpPanelState } from "./layout-help-panel-state";
+import type { HelpTopic } from "./layout-help-registry";
+import { helpStart } from "./layout-help-start";
+import { HelpViewSection } from "./layout-help-views";
+
+capturePanelFocus();
+export default function HelpPanelView(props: { topics: readonly HelpTopic[] }) {
+  const [topics, setTopics] = createSignal(props.topics);
+  onMount(() => {
+    const wrapper = panelElement();
+    const state = helpPanelState(wrapper);
+    const update = (context: ReturnType<typeof getContext>) => {
+      const next = helpStart(state.data.documents, context && context.app === state.data.appId ? (context.help ?? []) : []).view;
+      // Retain row identity when the blob and island props name the same topic, including the first host snapshot.
+      setTopics((previous) => next.map((topic) => previous.find((candidate) => candidate.id === topic.id) ?? topic));
+    };
+    onCleanup(onContextChange(update));
+    const section = wrapper.querySelector("[data-help-view]");
+    if (section) restorePanelFocus(section);
+    const context = getContext();
+    if (context) update(context);
+  });
+  return <HelpViewSection items={topics()} onOpen={() => {}} />;
+}