@k2b/cloud 0.39.0 → 0.41.0

package/src/ssr/app-navigation.ts

@@ -1,6 +1,7 @@
 import { isOwnAppPath } from "../_internal/app-path";
 import { hasAnyAppRole } from "../_internal/app-roles";
 import type { RuntimeAppMeta } from "../contracts/app";
+import { panelProviderNeedsConsent } from "../contracts/panel-context-plain";
 import { isPwaPartId } from "../contracts/pwa-paths";
 import type { User } from "../contracts/shared";
 import { resolveAppPresentation } from "../shared/app-presentation";
@@ -54,7 +55,7 @@ export const visiblePwaParts = (apps: readonly RuntimeAppMeta[], user: User | un
     .sort((a, b) => a.name.localeCompare(b.name, locale) || a.id.localeCompare(b.id));
 };
 
-export type PanelProvider = { id: string; label: string; icon: string; href: string };
+export type PanelProvider = { id: string; label: string; icon: string; href: string; appName: string; consent: boolean };
 
 /** Authorized presentation only: the panel route still authorizes every request. */
 export const visiblePanelProviders = (apps: readonly RuntimeAppMeta[], user: User | undefined, locale: string): PanelProvider[] => {
@@ -62,8 +63,20 @@ export const visiblePanelProviders = (apps: readonly RuntimeAppMeta[], user: Use
   return apps
     .flatMap((app) => {
       if (!app.panel || !isOwnAppPath(app.panel.href, app.routes) || !hasAnyAppRole(user, app.panel.requiresRoles)) return [];
-      const panel = resolveAppPresentation(app, locale).panel;
-      return panel ? [{ id: app.id, label: panel.label, icon: panel.icon, href: panel.href }] : [];
+      const presentation = resolveAppPresentation(app, locale);
+      const panel = presentation.panel;
+      return panel
+        ? [
+            {
+              id: app.id,
+              label: panel.label,
+              icon: panel.icon,
+              href: panel.href,
+              appName: presentation.name,
+              consent: panelProviderNeedsConsent(app.id),
+            },
+          ]
+        : [];
     })
     .sort((a, b) => a.label.localeCompare(b.label, locale) || a.id.localeCompare(b.id));
 };

package/src/ssr/compact-shell.browser-harness.ts

@@ -116,30 +116,38 @@ const workspace = (selected: string) =>
  * A task-list page: a long list in Main and an open detail that the server renders with its own close
  * control, as Contacts and Capabilities do. Invented content.
  */
-const listWorkspace = () =>
+const listWorkspace = (head = false) =>
   createComponent(AppWorkspace, {
     class: "min-h-0 flex-1",
     get children() {
-      return createComponent(AppWorkspace.Content, {
-        get children() {
-          return [
-            createComponent(AppWorkspace.Main, {
-              get children() {
-                return Array.from({ length: 80 }, (_, index) =>
-                  createComponent(Button, { class: "list-row", align: "start", children: `Task ${index + 1}` }),
-                );
-              },
-            }),
-            createComponent(AppWorkspace.Detail, {
-              id: "task-detail",
-              open: true,
-              get children() {
-                return createComponent(Button, { "data-workspace-detail-close": "", children: "Close task" });
-              },
-            }),
-          ];
-        },
-      });
+      return [
+        head ? createComponent(AppWorkspace.Head, { primary: { label: "New task", icon: "ti ti-plus", href: "?new=task" } }) : null,
+        createComponent(AppWorkspace.Content, {
+          get children() {
+            return [
+              createComponent(AppWorkspace.Main, {
+                get children() {
+                  return Array.from({ length: 80 }, (_, index) =>
+                    createComponent(Button, {
+                      variant: head ? "ghost" : undefined,
+                      class: "list-row",
+                      align: "start",
+                      children: `Task ${index + 1}`,
+                    }),
+                  );
+                },
+              }),
+              createComponent(AppWorkspace.Detail, {
+                id: "task-detail",
+                open: true,
+                get children() {
+                  return createComponent(Button, { "data-workspace-detail-close": "", children: "Close task" });
+                },
+              }),
+            ];
+          },
+        }),
+      ];
     },
   });
 
@@ -270,7 +278,7 @@ const server = new Hono()
             fullPage: list === "page",
             title: [{ title: "Home", href: "/" }, { title: "Tasks" }],
             get children() {
-              return listWorkspace();
+              return listWorkspace(c.req.query("head") === "1");
             },
           });
       return () =>

package/src/ssr/dialog-app-colors.browser-harness.tsx

@@ -0,0 +1,43 @@
+import { DataTable, prompts, SettingsModal } from "@k2b/ui";
+import { render } from "solid-js/web";
+
+const host = document.createElement("div");
+document.querySelector(".cloud-app-canvas")!.append(host);
+
+const SelectedTable = () => (
+  <DataTable
+    rows={[{ id: "selected", name: "Selected file" }]}
+    columns={[{ id: "name", header: "Name", value: "name" }]}
+    getRowId={(row) => row.id}
+    selectedRowId="selected"
+    surface="plain"
+  />
+);
+
+render(
+  () => (
+    <button
+      type="button"
+      onClick={() =>
+        void prompts.dialog<void>(
+          (close) => (
+            <div class="dialog-fixed-frame flex min-h-0 flex-col overflow-hidden">
+              <SettingsModal title="App settings" onClose={() => close()}>
+                <SettingsModal.Tab id="general" title="General">
+                  <SelectedTable />
+                </SettingsModal.Tab>
+                <SettingsModal.Tab id="files" title="Files">
+                  <SelectedTable />
+                </SettingsModal.Tab>
+              </SettingsModal>
+            </div>
+          ),
+          { surface: "bare", header: false, size: "large" },
+        )
+      }
+    >
+      Open app settings
+    </button>
+  ),
+  host,
+);

package/src/ssr/help-messages.ts

@@ -20,6 +20,8 @@ export const helpMessages = i18n.define({
       shortcutsInApp: ({ app }: { app: string }) => `In ${app}`,
       shortcutsInThisApp: "In this app",
       shortcutsWithSelection: "With a selection",
+      helpNotAvailable: "This Help is not available",
+      helpNotAvailableDetail: "You may not have access to it, or it no longer exists.",
       noArticles: "No Help articles here yet",
       reload: "Reload",
       noArticlesDetail: "This app has not published Help yet.",
@@ -79,6 +81,8 @@ export const helpMessages = i18n.define({
       shortcutsInApp: ({ app }) => `In ${app}`,
       shortcutsInThisApp: "In dieser App",
       shortcutsWithSelection: "Mit Auswahl",
+      helpNotAvailable: "Diese Hilfe ist nicht verfügbar",
+      helpNotAvailableDetail: "Vielleicht hast du keinen Zugriff, oder es gibt sie nicht mehr.",
       noArticles: "Hier gibt es noch keine Hilfeartikel",
       reload: "Neu laden",
       noArticlesDetail: "Diese App hat noch keine Hilfe veröffentlicht.",

package/src/ssr/help.ts

@@ -1,9 +1,13 @@
 import type { Context } from "hono";
+import { buildHelpDocumentPayload } from "../server/help-payload";
 import { getLocale } from "../server/locale";
 import { createHelpReader } from "../services/help";
 import type { HelpManifestResult } from "../services/help/types";
 import { logger } from "../services/logging";
+import type { HelpDocumentPayload } from "../shared/help";
 import { resolveCurrentApp } from "./app-appearance";
+import type { HelpArticleParts } from "./layout-help-article";
+import { helpArticlePartsServer } from "./layout-help-article.server";
 import { getRuntimeContext } from "./runtime";
 
 const manifests = new WeakMap<object, HelpManifestResult | null>();
@@ -30,3 +34,20 @@ export const preloadLayoutHelp = async (c: Context, appId?: string): Promise<Hel
     return null;
   }
 };
+
+/** 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 });
+    if (!article) return null;
+    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/hints.ts

@@ -0,0 +1,25 @@
+import type { Context } from "hono";
+import { isHintId, mergeSeenHints, parseSeenHintsCookieHeader, seenHintsSetCookie } from "../contracts/seen-hints";
+import { userFromActor } from "../server/actor";
+
+/** Ids marked seen earlier in the same request, so a second mark or a later check sees them too. */
+const marked = new WeakMap<Context, string[]>();
+
+const seenIds = (c: Context): string[] => marked.get(c) ?? parseSeenHintsCookieHeader(c.req.header("Cookie"));
+
+/** The caller checks access to the new path; anonymous visitors never see a hint. */
+export const hintOpen = (c: Context, id: string, options: { allowed: boolean }): boolean => {
+  if (!isHintId(id)) throw new Error(`Invalid hint id: ${id}`);
+  return options.allowed && !!userFromActor(c.get("actor")) && !seenIds(c).includes(id);
+};
+
+/**
+ * Call on the new path too: using it counts as having seen the hint. Each call writes the whole list seen so far in
+ * this request, so with several calls the browser keeps the last cookie and with it every id.
+ */
+export const markHintSeen = (c: Context, id: string): void => {
+  const ids = mergeSeenHints(seenIds(c), id);
+  marked.set(c, ids);
+  const secure = new URL(c.req.url).protocol === "https:" || c.req.header("x-forwarded-proto")?.split(",")[0]?.trim() === "https";
+  c.header("Set-Cookie", seenHintsSetCookie(ids, secure), { append: true });
+};

package/src/ssr/index.ts

@@ -11,7 +11,9 @@ export {
   visiblePanelProviders,
   visiblePwaParts,
 } 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,
@@ -19,6 +21,7 @@ export {
 } from "./MinimalLayout";
 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 type { UrlFilterField } from "./url-filter";

package/src/ssr/layout-context.ts

@@ -1,3 +1,4 @@
+import type { PanelConsentSnapshot } from "../contracts/panel-context";
 import type { RailSnapshot } from "../contracts/rail-preferences";
 import type { User } from "../contracts/shared";
 import type { LayoutAnnouncementsState } from "../server/middleware/settings";
@@ -5,6 +6,7 @@ import type { RuntimeContext } from "./runtime";
 
 export type LayoutContext = {
   get(key: "user"): User | undefined;
+  get(key: "panelConsent"): PanelConsentSnapshot | undefined;
   get(key: "railPreferences"): RailSnapshot | undefined;
   get(key: "page"): { theme?: "light" | "dark"; title?: string; pwa?: { name: string } };
   get(key: "runtime"): RuntimeContext;

package/src/ssr/layout-help-article.server.ts

@@ -0,0 +1,50 @@
+import type * as Htmlparser2 from "htmlparser2";
+import type { HelpArticleParts } from "./layout-help-article";
+
+// Keep the same synchronous import path as sanitize-html (see ai/readable-html.ts).
+const { parseDocument, DomUtils, ElementType }: typeof Htmlparser2 = require("htmlparser2");
+type HtmlNode = ReturnType<typeof parseDocument>["children"][number];
+
+const insideDetails = (node: HtmlNode): boolean => {
+  for (let parent = node.parent; parent; parent = parent.parent) if ("name" in parent && parent.name === "details") return true;
+  return false;
+};
+const spokenText = (node: HtmlNode): string => {
+  if (node.type === ElementType.Text) return node.data;
+  if (!("children" in node)) return "";
+  return node.children
+    .filter((child) => !("attribs" in child) || child.attribs["aria-hidden"] !== "true")
+    .map(spokenText)
+    .join("");
+};
+
+/** Server-only equivalent of the browser's inert-template splitter. Never import into an island. */
+export const helpArticlePartsServer = (html: string): HelpArticleParts => {
+  const body = parseDocument(html);
+  const first = body.children.find((node) => "attribs" in node);
+  const lead = first?.name === "p" && !first.attribs.class ? DomUtils.getOuterHTML(first) : undefined;
+  if (lead && first) DomUtils.removeElement(first);
+  const elements = DomUtils.findAll(() => true, body.children);
+  return {
+    lead,
+    body: DomUtils.getInnerHTML(body),
+    sections: elements
+      .filter((element) => element.name === "h2" && "id" in element.attribs && !insideDetails(element))
+      .map((element) => ({ id: element.attribs.id ?? "", label: spokenText(element).replace(/\s+/g, " ").trim() }))
+      .filter((section) => section.label),
+    steps: elements.filter((element) => {
+      const list = element.parent;
+      const wrapper = list?.parent;
+      return (
+        element.name === "li" &&
+        list &&
+        "name" in list &&
+        list.name === "ol" &&
+        wrapper &&
+        "attribs" in wrapper &&
+        (wrapper.attribs.class ?? "").split(/\s+/).includes("help-steps") &&
+        !insideDetails(element)
+      );
+    }).length,
+  };
+};

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"),
+};