@k2b/cloud 0.40.0 → 0.42.0

package/src/ssr/help.ts

@@ -1,6 +1,7 @@
 import type { Context } from "hono";
 import { buildHelpDocumentPayload } from "../server/help-payload";
 import { getLocale } from "../server/locale";
+import { appAccessAuthority } from "../services/app-access";
 import { createHelpReader } from "../services/help";
 import type { HelpManifestResult } from "../services/help/types";
 import { logger } from "../services/logging";
@@ -23,7 +24,7 @@ export const preloadLayoutHelp = async (c: Context, appId?: string): Promise<Hel
   const id = appId ?? resolveCurrentApp(getRuntimeContext(c).apps, c.req.path)?.id;
   if (!id) return null;
   try {
-    const manifest = await createHelpReader(getLocale(c), c.get("actor")).manifest(id);
+    const manifest = await createHelpReader(getLocale(c), c.get("actor"), { authority: appAccessAuthority(c) }).manifest(id);
     manifests.set(c, manifest);
     return manifest;
   } catch (error) {
@@ -35,16 +36,17 @@ export const preloadLayoutHelp = async (c: Context, appId?: string): Promise<Hel
   }
 };
 
-export type LayoutHelpArticle = { payload: HelpDocumentPayload; parts: HelpArticleParts };
+/** Article HTML crosses the island boundary once, as parts. */
+export type LayoutHelpArticle = { payload: Omit<HelpDocumentPayload, "html">; parts: HelpArticleParts };
 
 /** An authorized initial article; failures leave the browser's on-demand reader available. */
 export const preloadLayoutHelpArticle = async (c: Context, appId: string, documentId: string): Promise<LayoutHelpArticle | null> => {
   if (!c.get("user")) return null;
   try {
-    const article = await createHelpReader(getLocale(c), c.get("actor")).read({ appId, documentId });
+    const article = await createHelpReader(getLocale(c), c.get("actor"), { authority: appAccessAuthority(c) }).read({ appId, documentId });
     if (!article) return null;
-    const payload = buildHelpDocumentPayload(article, c.req.header("User-Agent") ?? "");
-    return { payload, parts: helpArticlePartsServer(payload.html) };
+    const { html, ...payload } = buildHelpDocumentPayload(article, c.req.header("User-Agent") ?? "");
+    return { payload, parts: helpArticlePartsServer(html) };
   } catch (error) {
     log.warn("Help article unavailable", { appId, documentId, error: error instanceof Error ? error.message : String(error) });
     return null;

package/src/ssr/index.ts

@@ -13,6 +13,7 @@ export {
 } from "./app-navigation";
 export { hintOpen, markHintSeen } from "./hints";
 export { default as Layout } from "./Layout";
+export { LayoutHelpPanel, type LayoutHelpPanelProps } from "./LayoutHelpPanel.server";
 export {
   default as MinimalLayout,
   type MinimalLayoutPreferencePosition,
@@ -22,6 +23,6 @@ export { default as PanelLayout, type PanelLayoutProps } from "./PanelLayout";
 export { default as PwaLayout, type PwaLayoutProps } from "./PwaLayout";
 export { readPanelContext } from "./panel-context";
 export { requestPath } from "./request-path";
-export { getLocalizedRuntimeContext, getRuntimeContext, type RuntimeContext } from "./runtime";
+export { getDisplayRuntimeContext, getLocalizedRuntimeContext, getRuntimeContext, type RuntimeContext } from "./runtime";
 export type { UrlFilterField } from "./url-filter";
 export { createUrlFilter, flag, list, oneOf, page, text } from "./url-filter";

package/src/ssr/islands/index.ts

@@ -4,20 +4,19 @@ export { provideWorkspaceNavigation } from "../workspace-navigation";
 export { default as SearchBar } from "./SearchBar";
 
 import { AppLaunchpadButton, AppLaunchpadProvider } from "../app-launchpad";
-import { LayoutHelpPage, LayoutHelpPanel } from "../LayoutHelp";
+import { LayoutHelpPage } from "../LayoutHelp";
 import { LayoutHelpDocuments } from "../layout-help-registry";
 
 export type { AppLaunchpadApp, AppLaunchpadLegalLink } from "../app-launchpad";
 export { AppLaunchpadButton, AppLaunchpadProvider, openAppLaunchpad, setAppLaunchpadContext } from "../app-launchpad";
-export type { LayoutHelpPageProps, LayoutHelpPanelProps } from "../LayoutHelp";
-export { LayoutHelpPage, LayoutHelpPanel, openLayoutHelpDialog } from "../LayoutHelp";
+export type { LayoutHelpPageProps } from "../LayoutHelp";
+export { LayoutHelpPage, openLayoutHelpDialog } from "../LayoutHelp";
 export type { LayoutHelpDocumentsProps } from "../layout-help-registry";
 export { LayoutHelpDocuments } from "../layout-help-registry";
 
 export const Layout = {
   HelpDocuments: LayoutHelpDocuments,
   HelpPage: LayoutHelpPage,
-  HelpPanel: LayoutHelpPanel,
   AppLaunchpadButton,
   AppLaunchpadProvider,
 };

package/src/ssr/layout-context.ts

@@ -1,10 +1,12 @@
 import type { PanelConsentSnapshot } from "../contracts/panel-context";
 import type { RailSnapshot } from "../contracts/rail-preferences";
 import type { User } from "../contracts/shared";
+import type { AuthContext } from "../server/middleware/auth";
 import type { LayoutAnnouncementsState } from "../server/middleware/settings";
 import type { RuntimeContext } from "./runtime";
 
 export type LayoutContext = {
+  get(key: "actor"): AuthContext["Variables"]["actor"] | undefined;
   get(key: "user"): User | undefined;
   get(key: "panelConsent"): PanelConsentSnapshot | undefined;
   get(key: "railPreferences"): RailSnapshot | undefined;

package/src/ssr/layout-help-panel-controls.tsx

@@ -0,0 +1,43 @@
+import { Button, IconButton } from "@k2b/ui";
+import type { JSX } from "solid-js";
+
+/**
+ * The same button and tooltip as Dropdown.Trigger, without loading the menu implementation. It names no aria-controls:
+ * the menu it would point to exists only once the real Dropdown replaces it on activation.
+ */
+export function HelpPanelMenuTrigger(props: {
+  label: string;
+  onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>;
+  onKeyDown?: JSX.EventHandler<HTMLButtonElement, KeyboardEvent>;
+  onPointerEnter?: JSX.EventHandler<HTMLButtonElement, PointerEvent>;
+  onPointerDown?: JSX.EventHandler<HTMLButtonElement, PointerEvent>;
+  onFocus?: JSX.EventHandler<HTMLButtonElement, FocusEvent>;
+}) {
+  return (
+    <span class="k2b-dropdown ">
+      <IconButton {...props} class="k2b-dropdown__trigger " aria-expanded="false" aria-haspopup="menu" data-help-menu="">
+        <i class="ti ti-dots" aria-hidden="true" />
+      </IconButton>
+    </span>
+  );
+}
+export function HelpPanelSectionTrigger(props: { label: string }) {
+  return (
+    <span class="k2b-dropdown ">
+      <Button
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label={props.label}
+        class=" k2b-dropdown__trigger "
+        size="sm"
+        tooltip={false}
+        variant="secondary"
+        data-help-sections=""
+      >
+        <i class="ti ti-list" aria-hidden="true" />
+        <span>{props.label}</span>
+        <i class="ti ti-chevron-down" aria-hidden="true" />
+      </Button>
+    </span>
+  );
+}

package/src/ssr/layout-help-panel-document.ts

@@ -0,0 +1,67 @@
+import type { HelpArticleLink, HelpDocumentManifest, HelpDocumentPayload } from "../shared/help";
+import { HELP_ACCESS_LEVELS, HELP_KINDS } from "../shared/help";
+import type { HelpPanelState } from "./layout-help-panel-state";
+
+const optionalString = (value: object, key: string): string | undefined => {
+  const field = Reflect.get(value, key);
+  return typeof field === "string" ? field : undefined;
+};
+/** A linked article from the Help API, or nothing when the server sent something else. */
+const articleLink = (value: unknown): HelpArticleLink | undefined => {
+  if (!value || typeof value !== "object") return undefined;
+  const [appId, appName, documentId, title, url] = ["appId", "appName", "documentId", "title", "url"].map((key) =>
+    optionalString(value, key),
+  );
+  if (!appId || !appName || !documentId || !title || !url?.startsWith("/")) return undefined;
+  const [accent, description, icon] = ["accent", "description", "icon"].map((key) => optionalString(value, key));
+  return { appId, appName, accent, documentId, title, description, icon, url };
+};
+
+export const loadPanelDocument = async (
+  state: HelpPanelState,
+  topic: HelpDocumentManifest,
+  signal: AbortSignal,
+  t: { requestFailed: string; invalidDocument: string },
+) => {
+  const cacheKey = `${topic.locale ?? "en"}:${topic.url}`;
+  const cached = state.cache.get(cacheKey);
+  if (cached) return cached;
+
+  const response = await fetch(topic.url, { signal, headers: { Accept: "application/json" } });
+  if (!response.ok) throw new Error(t.requestFailed);
+  const value: unknown = await response.json();
+  if (
+    !value ||
+    typeof value !== "object" ||
+    !("id" in value) ||
+    value.id !== topic.id ||
+    !("html" in value) ||
+    !("markdown" in value) ||
+    !("title" in value) ||
+    ("locale" in value && value.locale !== undefined && typeof value.locale !== "string") ||
+    (topic.locale !== undefined && "locale" in value && value.locale !== undefined && value.locale !== topic.locale) ||
+    typeof value.html !== "string" ||
+    typeof value.markdown !== "string" ||
+    typeof value.title !== "string"
+  ) {
+    throw new Error(t.invalidDocument);
+  }
+  const kind = Reflect.get(value, "kind");
+  const needs = Reflect.get(value, "needs");
+  const related = Reflect.get(value, "related");
+  const next = articleLink(Reflect.get(value, "next"));
+  const document: HelpDocumentPayload = {
+    id: topic.id,
+    title: value.title,
+    html: value.html,
+    markdown: value.markdown,
+    locale: "locale" in value && typeof value.locale === "string" ? value.locale : (topic.locale ?? "en"),
+    // A Core older than the app's Help reader sends no article facts; the article then shows none.
+    kind: HELP_KINDS.find((candidate) => candidate === kind) ?? "task",
+    needs: HELP_ACCESS_LEVELS.find((level) => level === needs),
+    ...(next ? { next } : {}),
+    related: Array.isArray(related) ? related.flatMap((link) => articleLink(link) ?? []) : [],
+  };
+  state.storeDocument(topic, document);
+  return document;
+};

package/src/ssr/layout-help-panel-lifecycle.ts

@@ -0,0 +1,32 @@
+const focused = new WeakMap<Element, string>();
+/** Module evaluation precedes SSR's destructive island mount. */
+export function capturePanelFocus() {
+  if (typeof document === "undefined") return;
+  const element = document.activeElement;
+  const wrapper = element?.closest("solid-island");
+  if (!wrapper || !(element instanceof HTMLElement)) return;
+  const topic = element.dataset.helpTopic;
+  const selector =
+    topic !== undefined
+      ? `[data-help-topic="${CSS.escape(topic)}"]`
+      : element.matches("[data-help-menu]")
+        ? "[data-help-menu]"
+        : element.matches(".help-head-back")
+          ? ".help-head-back"
+          : undefined;
+  if (selector) focused.set(wrapper, selector);
+}
+export function restorePanelFocus(element: Element) {
+  const wrapper = element.closest("solid-island");
+  const selector = wrapper && focused.get(wrapper);
+  if (!wrapper || !selector) return;
+  focused.delete(wrapper);
+  wrapper.querySelector<HTMLElement>(selector)?.focus({ preventScroll: true });
+}
+
+/** One provider reader per document; production island wrappers intentionally omit data-file. */
+export function panelElement(): HTMLElement {
+  const element = document.querySelector<HTMLElement>('.help-shell[data-surface="panel"]');
+  if (!element) throw new Error("Missing Help panel");
+  return element;
+}

package/src/ssr/layout-help-panel-menu.tsx

@@ -0,0 +1,113 @@
+import { clipboard } from "@k2b/stdlib/solid";
+import { Dropdown, toast, useLocale } from "@k2b/ui";
+import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import { helpMessages } from "./help-messages";
+import { formatHelpBundleMarkdown, formatHelpDocumentMarkdown } from "./layout-help-markdown";
+import { loadPanelDocument } from "./layout-help-panel-document";
+import type { HelpPanelState } from "./layout-help-panel-state";
+import { layoutHelpTopicHref } from "./layout-help-url";
+
+export type MenuActivation = { key: string; focus: boolean; pointer?: boolean };
+export function HelpPanelMenu(props: { state: HelpPanelState; activation: MenuActivation }) {
+  const state = props.state;
+  const locale = useLocale();
+  const t = () => helpMessages.resolve([locale()]).t;
+  const write = (text: string) => navigator.clipboard.writeText(text);
+  const writer = clipboard.createWriter({ write, copiedFor: 1800 });
+  const allWriter = clipboard.createWriter({ write, copiedFor: 1800 });
+  createEffect(() => state.setAnnouncement(writer.wasCopied() ? t().articleCopiedAnnouncement : ""));
+  onCleanup(() => state.setAnnouncement(""));
+  const [copying, setCopying] = createSignal(false);
+  let controller: AbortController | undefined;
+  let trigger: HTMLButtonElement | undefined;
+  const topic = () => state.data.documents.find((topic) => topic.id === state.activeId());
+  const payload = () => {
+    const active = topic();
+    return active ? state.cachedDocument(active) : undefined;
+  };
+  const copyArticle = async () => {
+    const active = topic();
+    const document = payload();
+    if (!active || !document) return;
+    // Invoke the clipboard writer before the first await: Safari needs the menu item's user activation.
+    if (await writer.copy(formatHelpDocumentMarkdown({ ...active, markdown: document.markdown }))) {
+      toast.success(t().articleCopied);
+    } else
+      toast.error(t().copyFailed({ message: writer.error()?.message ?? t().copyFallback }), {
+        action: { label: t().tryAgain, onClick: () => void copyArticle() },
+      });
+  };
+  const copyAll = async () => {
+    if (!state.data.documents.length || copying()) return;
+    controller?.abort();
+    const current = new AbortController();
+    controller = current;
+    setCopying(true);
+    const progress = toast(t().preparing, { progress: "indeterminate", duration: 0, iconClass: "ti ti-markdown" });
+    try {
+      const documents = await Promise.all(
+        state.data.documents.map(async (topic) => ({
+          ...topic,
+          markdown: (await loadPanelDocument(state, topic, current.signal, t())).markdown,
+        })),
+      );
+      if (!(await allWriter.copy(formatHelpBundleMarkdown(documents)))) throw allWriter.error() ?? new Error(t().copyFallback);
+      progress.dismiss();
+      toast.success(t().helpCopied);
+    } catch (error) {
+      progress.dismiss();
+      if (!(error instanceof DOMException && error.name === "AbortError"))
+        toast.error(t().copyAllFailed({ message: error instanceof Error ? error.message : t().copyFallback }), {
+          action: { label: t().tryAgain, onClick: () => void copyAll() },
+        });
+    } finally {
+      if (controller === current) {
+        controller = undefined;
+        setCopying(false);
+      }
+    }
+  };
+  const [quiet, setQuiet] = createSignal(!!props.activation.pointer);
+  onCleanup(() => controller?.abort());
+  onMount(() => {
+    if (props.activation.focus) trigger?.focus({ preventScroll: true });
+    trigger?.dispatchEvent(new KeyboardEvent("keydown", { key: props.activation.key, bubbles: true, cancelable: true }));
+  });
+  const items = () => [
+    {
+      label: t().copyAsMarkdown,
+      icon: "ti ti-markdown",
+      ...(copying() || (state.view() === "article" ? !payload() : !state.data.documents.length)
+        ? { disabled: true as const }
+        : { action: () => void (state.view() === "article" ? copyArticle() : copyAll()) }),
+    },
+    ...(state.data.pageBase
+      ? [
+          {
+            label: t().openAsPage,
+            icon: "ti ti-app-window",
+            href: layoutHelpTopicHref(state.data.pageBase, state.view() === "article" ? state.activeId() : null),
+          },
+        ]
+      : []),
+  ];
+  return (
+    <Dropdown.Root label={t().moreActions} position="bottom-left" items={items()}>
+      <Dropdown.Trigger
+        ref={(element) => {
+          trigger = element;
+        }}
+        iconOnly
+        label={t().moreActions}
+        variant="ghost"
+        data-help-menu=""
+        // A press on the light trigger counts as a press here: like Dropdown.Trigger's own, its hint stays closed until
+        // the pointer leaves.
+        tooltip={quiet() ? false : undefined}
+        onPointerLeave={() => setQuiet(false)}
+      >
+        <i class="ti ti-dots" aria-hidden="true" />
+      </Dropdown.Trigger>
+    </Dropdown.Root>
+  );
+}

package/src/ssr/layout-help-panel-modules.ts

@@ -0,0 +1,7 @@
+// Keep importOnDemand() from ../browser/reload out: its eager toast import would break the panel bundle budget.
+export const helpPanelModules = {
+  menu: () => import("./layout-help-panel-menu"),
+  search: () => import("./layout-help-panel-search"),
+  reader: () => import("./layout-help-panel-reader"),
+  document: () => import("./layout-help-panel-document"),
+};

package/src/ssr/layout-help-panel-reader.tsx

@@ -0,0 +1,159 @@
+import { Dropdown, LocaleProvider, MarkdownView, TableOfContents, useLocale } from "@k2b/ui";
+import { type Accessor, createMemo, createSignal, onMount } from "solid-js";
+import { render } from "solid-js/web";
+import type { HelpDocumentPayload } from "../shared/help";
+import { helpMessages } from "./help-messages";
+import { helpArticleParts } from "./layout-help-article";
+import type { HelpPanelState } from "./layout-help-panel-state";
+import type { HelpTopic } from "./layout-help-registry";
+import { HelpArticleView } from "./layout-help-views";
+
+function Sections(props: {
+  sections: { id: string; label: string }[];
+  onSection: (id: string) => void;
+  active: Accessor<string | null>;
+  activation?: { key: string; focused: boolean };
+}) {
+  const locale = useLocale();
+  const t = () => helpMessages.resolve([locale()]).t;
+  let trigger: HTMLButtonElement | undefined;
+  onMount(() => {
+    if (!props.activation) return;
+    if (props.activation.focused) trigger?.focus({ preventScroll: true });
+    trigger?.dispatchEvent(new KeyboardEvent("keydown", { key: props.activation.key, bubbles: true, cancelable: true }));
+  });
+  return (
+    <Dropdown.Root
+      label={t().onThisPage}
+      position="bottom-left"
+      items={props.sections.map((section) => ({
+        label: section.label,
+        choice: "radio" as const,
+        checked: () => props.active() === section.id,
+        action: () => {
+          props.onSection(section.id);
+        },
+      }))}
+    >
+      <Dropdown.Trigger
+        ref={(element) => {
+          trigger = element;
+        }}
+        label={t().onThisPage}
+        size="sm"
+        tooltip={false}
+        variant="secondary"
+      >
+        <i class="ti ti-list" aria-hidden="true" />
+        <span>{t().onThisPage}</span>
+        <i class="ti ti-chevron-down" aria-hidden="true" />
+      </Dropdown.Trigger>
+    </Dropdown.Root>
+  );
+}
+export function HelpPanelReader(props: {
+  state: HelpPanelState;
+  topic: HelpTopic;
+  document: HelpDocumentPayload;
+  onSection: (id: string) => void;
+}) {
+  const locale = useLocale();
+  const t = () => helpMessages.resolve([locale()]).t;
+  const parts = createMemo(() => helpArticleParts(props.document.html));
+  const [active, setActive] = createSignal<string | null>(parts().sections[0]?.id ?? null);
+  let content: HTMLDivElement | undefined;
+  return (
+    <HelpArticleView
+      surface="panel"
+      topic={props.topic}
+      appId={props.state.data.appId}
+      parts={parts()}
+      document={props.document}
+      Markdown={MarkdownView}
+      showTools={parts().sections.length > 0}
+      sectionMenu={
+        parts().sections.length ? (
+          <Sections
+            sections={parts().sections}
+            active={active}
+            onSection={(id) => {
+              setActive(id);
+              props.onSection(id);
+            }}
+          />
+        ) : null
+      }
+      copyButton={null}
+      loading={null}
+      failure={null}
+      toc={
+        <TableOfContents
+          items={parts().sections}
+          title={t().onThisPage}
+          scrollRoot={() => props.state.scroller() ?? undefined}
+          contentRoot={() => content}
+          onActiveChange={(id) => setActive(id ?? null)}
+        />
+      }
+      copyAction={null}
+      headingRef={() => {}}
+      contentRef={(element) => {
+        content = element;
+      }}
+      onBack={props.state.back}
+    />
+  );
+}
+export function mountPanelSections(
+  container: HTMLElement,
+  props: { locale: string; state: HelpPanelState; key: string; focused: boolean; onSection: (id: string) => void },
+): () => void {
+  const article = container.closest("article");
+  const sections = Array.from(article?.querySelectorAll<HTMLAnchorElement>(".help-article-aside a[href^='#']") ?? []).map((link) => ({
+    id: decodeURIComponent(link.getAttribute("href")!.slice(1)),
+    label: link.textContent ?? "",
+  }));
+  const [active, setActive] = createSignal<string | null>(sections[0]?.id ?? null);
+  const aside = article?.querySelector<HTMLElement>(".help-article-aside-sticky");
+  let disposeToc = () => {};
+  // The aside is hidden at every panel width. Upgrade its scroll spy only when the section menu needs it.
+  if (aside) {
+    aside.textContent = "";
+    disposeToc = render(
+      () => (
+        <LocaleProvider locale={props.locale}>
+          <TableOfContents
+            items={sections}
+            title={helpMessages.resolve([props.locale]).t.onThisPage}
+            scrollRoot={() => props.state.scroller() ?? undefined}
+            contentRoot={() => article ?? undefined}
+            onActiveChange={(id) => setActive(id ?? null)}
+          />
+        </LocaleProvider>
+      ),
+      aside,
+    );
+  }
+  container.textContent = "";
+  container.style.display = "contents";
+  const disposeMenu = render(
+    () => (
+      <LocaleProvider locale={props.locale}>
+        <Sections
+          sections={sections}
+          active={active}
+          onSection={(id) => {
+            setActive(id);
+            props.onSection(id);
+          }}
+          activation={{ key: props.key, focused: props.focused }}
+        />
+      </LocaleProvider>
+    ),
+    container,
+  );
+  return () => {
+    disposeMenu();
+    disposeToc();
+  };
+}

package/src/ssr/layout-help-panel-search.tsx

@@ -0,0 +1,69 @@
+import { useLocale } from "@k2b/ui";
+import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js";
+import { helpMessages } from "./help-messages";
+import type { HelpPanelState } from "./layout-help-panel-state";
+import { searchHelpTopics } from "./layout-help-search";
+import { HelpResultsView } from "./layout-help-views";
+
+export function HelpPanelSearchResults(props: { state: HelpPanelState }) {
+  const locale = useLocale();
+  const t = () => helpMessages.resolve([locale()]).t;
+  const query = createMemo(() => props.state.query().trim().toLocaleLowerCase());
+  const [ids, setIds] = createSignal<readonly string[] | null>(null);
+  const [searching, setSearching] = createSignal(false);
+  const [failed, setFailed] = createSignal(false);
+  const [attempt, setAttempt] = createSignal(0);
+  let version = 0;
+  createEffect(() => {
+    const value = query();
+    attempt();
+    const current = ++version;
+    setIds(null);
+    setSearching(false);
+    setFailed(false);
+    const urls = [...new Set(props.state.data.documents.map((topic) => topic.searchUrl))];
+    if (!value || !urls.length) return;
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      setSearching(true);
+      void Promise.all(
+        urls.map(async (url) => {
+          const response = await fetch(`${url}?q=${encodeURIComponent(value)}`, {
+            signal: controller.signal,
+            headers: { Accept: "application/json" },
+          });
+          if (!response.ok) throw new Error(t().searchFailed);
+          const payload: unknown = await response.json();
+          return payload && typeof payload === "object" && "ids" in payload && Array.isArray(payload.ids)
+            ? payload.ids.filter((id): id is string => typeof id === "string")
+            : [];
+        }),
+      )
+        .then((groups) => {
+          if (current === version) setIds([...new Set(groups.flat())]);
+        })
+        .catch((error) => {
+          if (!(error instanceof DOMException && error.name === "AbortError") && current === version) setFailed(true);
+        })
+        .finally(() => {
+          if (current === version) setSearching(false);
+        });
+    }, 120);
+    onCleanup(() => {
+      clearTimeout(timer);
+      controller.abort();
+      if (current === version) version++;
+    });
+  });
+  return (
+    <Show when={query()}>
+      <HelpResultsView
+        results={searchHelpTopics(props.state.data.documents, query(), ids())}
+        searching={searching()}
+        failed={failed()}
+        onRetry={() => setAttempt((value) => value + 1)}
+        onOpen={() => {}}
+      />
+    </Show>
+  );
+}

package/src/ssr/layout-help-panel-shortcuts.ts

@@ -0,0 +1,7 @@
+import { getContext } from "../browser/panel";
+import { panelShortcutsReceived, readPanelShortcuts } from "../browser/panel-shortcuts";
+import type { HelpShortcutCommand } from "./layout-help-start";
+
+/** An empty host list is authoritative too, including when a reader remounts. */
+export const readHelpPanelShortcuts = (seed: HelpShortcutCommand[]): HelpShortcutCommand[] =>
+  panelShortcutsReceived() && getContext() !== null ? readPanelShortcuts() : seed;