@k2b/cloud 0.39.0 → 0.41.0

package/src/ssr/LayoutHelpPanel.browser-harness.tsx

@@ -0,0 +1,135 @@
+import { keyboardPlatform } from "@k2b/ui";
+import { Hono } from "hono";
+import { defineApp } from "../_internal/define-app";
+import { person } from "../_internal/define-app.test-fixture";
+import type { AppAppearance, CloudRuntime } from "../contracts/app";
+import type { User } from "../contracts/shared";
+import type { HelpDocumentManifest, HelpDocumentPayload } from "../shared/help";
+import { appAppearanceStyle } from "./app-appearance";
+import Layout from "./Layout";
+import { LayoutHelpPage, type LayoutHelpPageProps } from "./LayoutHelp";
+import { LayoutHelpPanel, type LayoutHelpPanelProps } from "./LayoutHelpPanel.server";
+import { helpArticlePartsServer } from "./layout-help-article.server";
+import PanelLayout from "./PanelLayout";
+import { readPanelContext } from "./panel-context";
+
+export const documents: HelpDocumentManifest[] = [
+  { id: "spaces-share", title: "Share a Space", kind: "task", icon: "ti ti-share" },
+  { id: "spaces-start", title: "Start with Spaces", kind: "start", icon: "ti ti-rocket" },
+].map((topic) => ({
+  ...topic,
+  kind: topic.id === "spaces-share" ? "task" : "start",
+  order: 1,
+  url: `/api/help/${topic.id}`,
+  searchUrl: "/api/help/search",
+}));
+export const helpManifest = { documents, pageBase: "/help/apps/spaces", baseLocale: "en", locale: "en", manifestHash: "fixture" };
+export const fixtureDocument: HelpDocumentPayload = {
+  id: "spaces-share",
+  title: "Share a Space",
+  locale: "en",
+  markdown: "Share",
+  kind: "task",
+  needs: "manage",
+  related: [],
+  // A lead, the facts chips, and a section: everything the article head reads from the article.
+  html: '<p>Share a Space so other people can see and edit its tasks.</p><h2 id="share">Share</h2><div class="help-steps"><ol><li>Open Space settings.</li><li>Add a person.</li></ol></div>',
+};
+const { html, ...payload } = fixtureDocument;
+const initialArticle = { payload, parts: helpArticlePartsServer(html) };
+const appearance: AppAppearance = { accent: "#16a34a", background: { from: "#16a34a", to: "#0284c7" } };
+const apps: CloudRuntime["apps"] = [
+  {
+    id: "spaces",
+    name: "Spaces",
+    icon: "ti ti-box",
+    description: "Help fixture",
+    routes: ["/app/spaces"],
+    nav: { href: "/app/spaces", section: "primary" },
+    appearance,
+    help: helpManifest,
+  },
+  {
+    id: "core",
+    name: "Core",
+    icon: "ti ti-cloud",
+    description: "Core fixture",
+    routes: ["/"],
+    panel: { href: "/panel", label: "Help", icon: "ti ti-help-circle" },
+  },
+];
+const app = defineApp({
+  id: "help-fixture",
+  name: "Help fixture",
+  description: "Help fixture",
+  icon: "ti ti-help-circle",
+  baseUrl: "http://fixture:3000",
+  routes: ["/"],
+});
+type Environment = { Variables: { runtime: CloudRuntime; user: User } };
+const PropsSnapshot = (props: { value: LayoutHelpPageProps }) => (
+  <script id="help-fixture-props" type="application/json" innerHTML={JSON.stringify(props.value).replace(/</g, "\\u003c")} />
+);
+export const server = new Hono<Environment>()
+  .use(async (c, next) => {
+    c.set("runtime", { apps });
+    c.set("user", person);
+    await next();
+  })
+  .get(
+    "/app/spaces",
+    ...app.ssr<Environment>((c) => () => (
+      <Layout c={c} title="Spaces" help={["spaces-share"]}>
+        <p>App content</p>
+      </Layout>
+    )),
+  )
+  .get(
+    "/panel",
+    ...app.ssr<Environment>((c) => {
+      const context = readPanelContext(c);
+      const props: LayoutHelpPanelProps = {
+        documents,
+        app: { id: "spaces", name: "Spaces", icon: "ti ti-box" },
+        appearance: appAppearanceStyle(appearance),
+        view: context?.app === "spaces" ? context.help?.filter((id) => documents.some((topic) => topic.id === id)) : [],
+        platform: keyboardPlatform(c.req.header("User-Agent") ?? ""),
+        pageBase: helpManifest.pageBase,
+        initialArticle: c.req.query("topic") === "spaces-share" ? initialArticle : undefined,
+        initialTopic: c.req.query("topic") === "spaces-share" ? "spaces-share" : undefined,
+      };
+      return () => (
+        <PanelLayout c={c} title="Help">
+          <LayoutHelpPanel {...props} />
+        </PanelLayout>
+      );
+    }),
+  )
+  .get(
+    "/help/apps/spaces/spaces-share",
+    ...app.ssr<Environment>((c) => () => (
+      <Layout c={c} title="Help">
+        <div id="help-fixture-root">
+          <LayoutHelpPage
+            documents={documents}
+            initialTopic="spaces-share"
+            initialArticle={initialArticle}
+            pageBase={helpManifest.pageBase}
+          />
+        </div>
+        <PropsSnapshot value={{ documents, initialTopic: "spaces-share", initialArticle, pageBase: helpManifest.pageBase }} />
+      </Layout>
+    )),
+  );
+
+/**
+ * Capture during parsing and immediately after mounting; coordinates inside the provider are relative to its viewport.
+ * The article head keeps its position, width and height; the contents column keeps its position and width.
+ */
+export function helpPanelGeometry() {
+  return ["[data-help-view]", "[data-cloud-app-area]", ".help-article-head", ".help-article-aside"].map((selector, index) => {
+    const rect = document.querySelector(selector)?.getBoundingClientRect();
+    if (!rect) return null;
+    return index < 3 ? { x: rect.x, y: rect.y, width: rect.width, height: rect.height } : { x: rect.x, y: rect.y, width: rect.width };
+  });
+}

package/src/ssr/LayoutHelpPanel.server.browser-harness.tsx

@@ -0,0 +1,131 @@
+import { basename, resolve } from "node:path";
+import tailwind from "bun-plugin-tailwind";
+import { Hono } from "hono";
+import { toJSON } from "seroval";
+import { createPanelRenderer, panelFixtureProps, panelIslandEntries } from "../../../../scripts/fixtures/help-panel";
+import { buildIslandClosure } from "../../../../scripts/fixtures/island-closure";
+import { islandIdFromFile } from "../../../ssr/src/island-id";
+import { helpArticlePartsServer } from "./layout-help-article.server";
+
+/**
+ * Build the real islands together, with the production mount runtime and shared ESM chunks. One module script imports
+ * every island at once, as @k2b/ssr's loader does, so a held island does not hold the others.
+ */
+export async function helpPanelServerBrowserFixture() {
+  const root = resolve(import.meta.dir, "../../../..");
+  const renderer = await createPanelRenderer();
+  const files: Record<string, string> = {};
+  const entrypoints = panelIslandEntries.map((entry) => {
+    const id = islandIdFromFile(entry, root);
+    const virtual = resolve(import.meta.dir, `${id}.ts`);
+    files[virtual] =
+      `import { mount } from ${JSON.stringify(resolve(root, "packages/ssr/src/mount.ts"))}; import C from ${JSON.stringify(entry)}; mount(C, 'solid-island[data-id="${id}"]'); document.documentElement.dataset[${JSON.stringify(`mounted${id}`)}] = "true";`;
+    return virtual;
+  });
+  try {
+    const build = await buildIslandClosure(entrypoints, files);
+    if (!build.metafile) throw new Error("Missing browser fixture metafile");
+    const outputMeta = new Map(Object.entries(build.metafile.outputs).map(([path, output]) => [basename(path), output]));
+    const eager = new Set<string>();
+    const visit = (name: string) => {
+      if (eager.has(name)) return;
+      eager.add(name);
+      for (const edge of outputMeta.get(name)?.imports ?? []) if (edge.kind !== "dynamic-import") visit(basename(edge.path));
+    };
+    const scripts = entrypoints.map((entry) => {
+      const output = [...outputMeta].find(([, meta]) => meta.entryPoint && resolve(meta.entryPoint) === entry);
+      if (!output) throw new Error(`Missing browser island entry ${entry}`);
+      visit(output[0]);
+      return output[0];
+    });
+    const outputs = new Map(await Promise.all(build.outputs.map(async (output) => [basename(output.path), await output.text()] as const)));
+    const dynamicChunks = [...outputMeta.keys()].filter((name) => !eager.has(name));
+    const chunkFor = (suffix: string) => {
+      const found = [...outputMeta]
+        .filter(([, meta]) => Object.entries(meta.inputs).some(([input, details]) => input.endsWith(suffix) && details.bytesInOutput > 0))
+        .map(([name]) => name);
+      if (!found.length) throw new Error(`Missing chunk for ${suffix}`);
+      return found;
+    };
+    const styles = await Bun.build({ entrypoints: [resolve(root, "styles.css")], plugins: [tailwind] });
+    if (!styles.success) throw new AggregateError(styles.logs, "Could not compile panel styles");
+    const css = await styles.outputs[0]!.text();
+    const initialArticle = {
+      payload: {
+        id: "share",
+        title: "Share a Space",
+        locale: "en",
+        kind: "task" as const,
+        needs: "edit" as const,
+        markdown: "Share a Space.\n\n## Invite\n\nInvite people.",
+        related: [],
+      },
+      parts: helpArticlePartsServer(
+        '<p>Share a Space.</p><h2 id="invite">Invite</h2><p>Invite people.</p><a href="/help/apps/spaces/roles">Roles</a>',
+      ),
+    };
+    const runtimeId = islandIdFromFile(panelIslandEntries.at(-1)!, root);
+    const runtimeProps = JSON.stringify(toJSON({ provider: "fixture", scope: "/panel" }))
+      .replaceAll("&", "&amp;")
+      .replaceAll('"', "&quot;");
+    const app = new Hono()
+      // Split chunks import each other by relative paths from the build's output layout; serve every file by name.
+      .get("/:path{.+\\.js}", (c) => {
+        const content = outputs.get(basename(c.req.path));
+        return content === undefined ? c.notFound() : c.body(content, 200, { "content-type": "text/javascript" });
+      })
+      .get("/", (c) =>
+        c.html(
+          `<!doctype html><html lang="en"${themeClass(c.req.query("theme"))}><head><style>${css}</style></head><body class="k2b-ui" style="margin:0"><div class="cloud-app-canvas" data-panel="open" data-panel-sheet="open" style="position:relative;display:flex;height:100dvh"><main data-cloud-app-area style="flex:1">Host app</main><aside class="cloud-panel" data-state="ready"><div class="cloud-panel__card"><header class="cloud-panel__head">Help</header><div class="cloud-panel__body"><iframe class="cloud-panel__frame" title="Help" src="/panel?${new URLSearchParams({ ...(c.req.query("topic") ? { topic: "share" } : {}), theme: c.req.query("theme") ?? "light" })}"></iframe></div></div></aside></div></body></html>`,
+        ),
+      )
+      .get("/panel", (c) =>
+        c.html(
+          `<!doctype html><html lang="en"${themeClass(c.req.query("theme"))}><head><style>${css}</style><style>html,body{margin:0;height:100%}*,*::before,*::after{animation:none!important;transition:none!important}</style></head><body class="k2b-ui"><div class="cloud-panel-page" data-cloud-panel-page><script id="cloud-panel-context" type="application/json">{"v":1,"seq":0,"pageId":"22222222-2222-4222-8222-222222222222","app":"spaces","help":["share"]}</script><solid-island data-id="${runtimeId}" data-props="${runtimeProps}"></solid-island>${renderer.render({ ...panelFixtureProps, ...(c.req.query("topic") ? { initialTopic: "share", initialArticle } : {}) })}</div><script>document.documentElement.dataset.serverGeometry=JSON.stringify((${panelGeometry.toString()})());</script><script type="module">${JSON.stringify(scripts)}.forEach((file)=>import("/assets/"+file))</script></body></html>`,
+        ),
+      )
+      .get("/api/help/search", (c) => c.json({ ids: ["share"] }))
+      .get("/api/help/:id", (c) =>
+        c.json({
+          ...initialArticle.payload,
+          id: c.req.param("id"),
+          html: '<p>Fixture.</p><h2 id="invite">Invite</h2><p>Invite people.</p>',
+        }),
+      );
+    const server = Bun.serve({ port: 0, fetch: app.fetch });
+    return {
+      origin: `http://localhost:${server.port}`,
+      dynamicChunks,
+      searchChunks: chunkFor("/layout-help-panel-search.tsx"),
+      menuChunks: chunkFor("/layout-help-panel-menu.tsx"),
+      islandChunks: new Map(panelIslandEntries.map((entry, index) => [basename(entry), scripts[index]!])),
+      ids: panelIslandEntries.map((entry) => islandIdFromFile(entry, root)),
+      cleanup: () => {
+        server.stop(true);
+        renderer.cleanup();
+      },
+    };
+  } catch (error) {
+    renderer.cleanup();
+    throw error;
+  }
+}
+
+/** Cloud's theme script sets `dark` on the root; the fixture renders that class on the server for both documents. */
+const themeClass = (theme: string | undefined) => (theme === "dark" ? ' class="dark"' : "");
+
+/** First-frame geometry is the assertion subject, so callers also take it while action chunks are held. */
+export function panelGeometry() {
+  return [
+    "[data-help-head]",
+    "[data-help-search]",
+    "[data-help-results]",
+    "[data-help-tiles] button",
+    "[data-help-server-article] [data-help-article-head]",
+  ].map((selector) => {
+    const element = document.querySelector<HTMLElement>(selector);
+    if (!element || element.closest("[hidden]")) return null;
+    const rect = element.getBoundingClientRect();
+    return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+  });
+}

package/src/ssr/LayoutHelpPanel.server.tsx

@@ -0,0 +1,115 @@
+import { MarkdownView, ScrollArea, TableOfContents, useLocale } from "@k2b/ui";
+import { Show } from "solid-js";
+import HelpPanelArticle from "./HelpPanelArticle.island";
+import HelpPanelBack from "./HelpPanelBack.island";
+import HelpPanelMenu from "./HelpPanelMenu.island";
+import HelpPanelSearch from "./HelpPanelSearch.island";
+import HelpPanelShortcuts from "./HelpPanelShortcuts.island";
+import HelpPanelView from "./HelpPanelView.island";
+import { helpMessages } from "./help-messages";
+import { HelpPanelSectionTrigger } from "./layout-help-panel-controls";
+import type { HelpPanelData } from "./layout-help-panel-state";
+import type { LayoutHelpPanelProps } from "./layout-help-panel-types";
+import { helpStart } from "./layout-help-start";
+import { HelpArticleView, HelpHead, HelpNotAvailableView, HelpStartView } from "./layout-help-views";
+
+export type { LayoutHelpPanelProps } from "./layout-help-panel-types";
+
+/** Static provider content survives island mounting; only the controls own browser state. */
+export function LayoutHelpPanel(props: LayoutHelpPanelProps) {
+  const locale = useLocale();
+  const t = () => helpMessages.resolve([locale()]).t;
+  const topic = props.documents.find((topic) => topic.id === props.initialTopic);
+  const article = topic && props.initialArticle?.payload.id === topic.id ? props.initialArticle : undefined;
+  const start = helpStart(props.documents, props.view);
+  const data: HelpPanelData = {
+    // The legacy reader searched and copied its topics in start order; keep that order for every manifest.
+    documents: [...props.documents]
+      .sort((a, b) => (a.order ?? 100) - (b.order ?? 100) || a.title.localeCompare(b.title))
+      .map(({ id, title, description, icon, kind, order, url, searchUrl, locale }) => ({
+        id,
+        title,
+        description,
+        icon,
+        kind,
+        order,
+        url,
+        searchUrl,
+        locale,
+      })),
+    appId: props.app?.id,
+    pageBase: props.pageBase,
+    article: article?.payload,
+  };
+  return (
+    <div
+      class="help-shell app-accent-scope flex h-full min-h-0 flex-col"
+      data-surface="panel"
+      style={props.appearance}
+      data-help-initial-topic={topic?.id}
+    >
+      <Show when={props.state !== "unavailable"}>
+        <HelpHead
+          row
+          back={!!topic}
+          tile={props.app?.icon ?? "ti ti-help-circle"}
+          title={props.app?.name ?? t().help}
+          lead={<HelpPanelBack back={!!topic} tile={props.app?.icon ?? "ti ti-help-circle"} />}
+          menu={<HelpPanelMenu />}
+          closable={false}
+          onBack={() => {}}
+          onClose={() => {}}
+          query=""
+          onQuery={() => {}}
+          searchRef={() => {}}
+        />
+      </Show>
+      <ScrollArea class="min-h-0 flex-1 p-4 sm:p-5">
+        <Show when={props.state !== "unavailable"} fallback={<HelpNotAvailableView />}>
+          <div class="help-start help-measure" data-help-results="" hidden={!!topic}>
+            <div data-help-start-content="">
+              <HelpPanelView topics={start.view} />
+              <HelpStartView
+                start={{ ...start, view: [] }}
+                empty={props.documents.length === 0}
+                failed={props.state === "failed"}
+                onOpen={() => {}}
+                onReload={() => {}}
+                shortcuts={<HelpPanelShortcuts appName={props.app?.name} platform={props.platform} />}
+              />
+            </div>
+            <HelpPanelSearch />
+          </div>
+          <Show when={article && topic}>
+            {article && topic && (
+              <article class="help-article" data-surface="panel" data-help-server-article="">
+                <HelpArticleView
+                  surface="panel"
+                  topic={topic}
+                  appName={props.app?.name}
+                  appId={props.app?.id}
+                  parts={article.parts}
+                  document={{ ...article.payload, html: "" }}
+                  Markdown={MarkdownView}
+                  showTools={article.parts.sections.length > 0}
+                  sectionMenu={article.parts.sections.length ? <HelpPanelSectionTrigger label={t().onThisPage} /> : null}
+                  copyButton={null}
+                  loading={null}
+                  failure={null}
+                  toc={<TableOfContents items={article.parts.sections} title={t().onThisPage} />}
+                  copyAction={null}
+                  headingRef={() => {}}
+                  contentRef={() => {}}
+                  onBack={() => {}}
+                />
+              </article>
+            )}
+          </Show>
+          <HelpPanelArticle topic={article ? undefined : topic} />
+        </Show>
+        <span class="sr-only" aria-live="polite" data-help-announcement="" />
+      </ScrollArea>
+      <script type="application/json" data-help-panel-data="" innerHTML={JSON.stringify(data).replace(/</g, "\\u003c")} />
+    </div>
+  );
+}

package/src/ssr/LayoutHelpTrigger.tsx

@@ -1,4 +1,7 @@
 import { IconButton, Tooltip, useLocale } from "@k2b/ui";
+import { createSignal, onCleanup, onMount } from "solid-js";
+import { isServer } from "solid-js/web";
+import { closePanel, openPanel } from "../browser/panel";
 import { importOnDemand } from "../browser/reload";
 import { createBusyAction } from "./busy-action";
 import { platformMessages } from "./platform-messages";
@@ -6,6 +9,8 @@ import { platformMessages } from "./platform-messages";
 type LayoutHelpTriggerProps = {
   variant: "header" | "rail";
   class?: string;
+  panel?: boolean;
+  helpOpen?: boolean;
 };
 
 /** Opens end-user help from either the desktop rail or the compact header. */
@@ -13,17 +18,35 @@ export default function LayoutHelpTrigger(props: LayoutHelpTriggerProps) {
   const locale = useLocale();
   const t = () => platformMessages.resolve([locale()]).t;
   const action = createBusyAction();
-  const openHelp = () =>
-    action.run(
+  // The server knows the cookie; the browser also knows the mode: a phone starts with the sheet closed, whatever the
+  // cookie says, and the lazy controller may have changed the state before this island mounts.
+  const readOpen = () => {
+    const canvas = document.querySelector(".cloud-app-canvas");
+    const attribute = window.matchMedia("(min-width: 768px)").matches ? "data-panel" : "data-panel-sheet";
+    return canvas?.getAttribute(attribute) === "open" && document.getElementById("cloud-panel")?.dataset.provider === "core";
+  };
+  const [helpOpen, setHelpOpen] = createSignal(isServer ? !!props.helpOpen : !!props.panel && readOpen());
+  onMount(() => {
+    const changed = (event: WindowEventMap["cloud.panel.state"]) => setHelpOpen(event.detail.open && event.detail.provider === "core");
+    window.addEventListener("cloud.panel.state", changed);
+    onCleanup(() => window.removeEventListener("cloud.panel.state", changed));
+  });
+  const openHelp = () => {
+    if (helpOpen()) return closePanel();
+    if (openPanel("core")) return;
+    return action.run(
       () => importOnDemand(() => import("./LayoutHelp")),
       (help) => help.openLayoutHelpDialog(),
     );
+  };
 
   if (props.variant === "rail")
     return (
       <Tooltip.Trigger
         type="button"
         class={`rail-item text-blue-500 hover:bg-blue-500/10 hover:text-blue-600 dark:text-blue-400 dark:hover:bg-blue-500/15 dark:hover:text-blue-300 ${props.class ?? ""}`}
+        aria-controls={props.panel ? "cloud-panel" : undefined}
+        aria-expanded={props.panel ? helpOpen() : undefined}
         onClick={openHelp}
         aria-busy={action.busy() ? "true" : undefined}
         aria-label={t().openHelp}
@@ -38,6 +61,8 @@ export default function LayoutHelpTrigger(props: LayoutHelpTriggerProps) {
   return (
     <IconButton
       class={props.class}
+      aria-controls={props.panel ? "cloud-panel" : undefined}
+      aria-expanded={props.panel ? helpOpen() : undefined}
       onClick={openHelp}
       aria-busy={action.busy() ? "true" : undefined}
       label={t().openHelp}

package/src/ssr/MobileNavigation.tsx

@@ -48,8 +48,8 @@ function MobileNavigation(props: {
               value={tab}
               onValueChange={setTab}
               options={[
-                { value: "app", label: workspace()?.label || t().appMenu },
-                { value: "apps", label: t().allApps },
+                { value: "app", label: <span class="block k2b-truncate-fade">{workspace()?.label || t().appMenu}</span> },
+                { value: "apps", label: <span class="block k2b-truncate-fade">{t().allApps}</span> },
               ]}
             />
           }

package/src/ssr/PanelLayout.tsx

@@ -5,12 +5,19 @@ import { getLocale } from "../server/locale";
 import { resolveRuntimeRoute } from "./app-navigation";
 import type { MinimalLayoutContext } from "./layout-context";
 import PanelRuntime from "./PanelRuntime.island";
+import { readPanelContext } from "./panel-context";
 import { getRuntimeContext } from "./runtime";
 
-export type PanelLayoutProps = { c: MinimalLayoutContext; title: string; children: JSX.Element };
+export type PanelLayoutProps = {
+  c: MinimalLayoutContext & { header(name: string, value: string): void };
+  title: string;
+  children: JSX.Element;
+};
 
 /** A provider page embedded in the shell's same-origin panel. */
 export default function PanelLayout(props: PanelLayoutProps) {
+  props.c.header("Referrer-Policy", "same-origin");
+  const context = readPanelContext(props.c);
   const runtime = getRuntimeContext(props.c);
   // The provider owns this path by the canonical prefixes its panel declaration was checked against.
   const apps = runtime.apps.map((entry) => ({ ...entry, routes: entry.routes.map(canonicalRoute) }));
@@ -19,6 +26,7 @@ export default function PanelLayout(props: PanelLayoutProps) {
   return (
     <LocaleProvider locale={getLocale(props.c)}>
       <div class="cloud-panel-page" data-cloud-panel-page="" data-panel-provider={app?.id}>
+        <script id="cloud-panel-context" type="application/json" innerHTML={JSON.stringify(context).replace(/</g, "\\u003c")} />
         <PanelRuntime provider={app?.id} scope={app?.panel ? new URL(app.panel.href, props.c.req.raw.url).pathname : undefined} />
         {props.children}
       </div>

package/src/ssr/PanelRuntime.island.tsx

@@ -1,5 +1,6 @@
 import { installAppWorkspaceController, installInputModeController, keyboardPlatform } from "@k2b/ui";
 import { onCleanup, onMount } from "solid-js";
+import { installPanelContextReceiver } from "../browser/panel-context-receiver";
 import { syncTimezoneCookie } from "./timezone-cookie";
 
 export default function PanelRuntime(props: { provider?: string; scope?: string }) {
@@ -12,6 +13,7 @@ export default function PanelRuntime(props: { provider?: string; scope?: string
     const deferred = new Set<ReturnType<typeof setTimeout>>();
     const embedded = window.parent !== window;
     let disposeTheme = () => {};
+    let disposeContext = () => {};
     let resumeTheme = () => {};
     // A page kept in the back/forward cache keeps following the host; only a removed iframe lets go.
     const pageHide = (event: PageTransitionEvent) => {
@@ -38,6 +40,9 @@ export default function PanelRuntime(props: { provider?: string; scope?: string
       if (event.key.toLowerCase() === "j" && event.metaKey === apple && event.ctrlKey === !apple) {
         event.preventDefault();
         if (!event.repeat) close();
+      } else if (event.key.toLowerCase() === "k" && event.metaKey === apple && event.ctrlKey === !apple) {
+        event.preventDefault();
+        if (!event.repeat) window.parent.postMessage({ type: "cloud.panel.search", v: 1 }, location.origin);
       } else if (event.key === "Escape" && !event.metaKey && !event.ctrlKey) {
         // An open modal dialog takes Escape through its cancel event, without preventing this keydown.
         if (document.querySelector("dialog[open], [aria-modal='true']")) return;
@@ -49,6 +54,7 @@ export default function PanelRuntime(props: { provider?: string; scope?: string
       }
     };
     if (embedded) {
+      disposeContext = installPanelContextReceiver();
       try {
         const parent = window.parent;
         const parentRoot = parent.document.documentElement;
@@ -73,6 +79,7 @@ export default function PanelRuntime(props: { provider?: string; scope?: string
       window.addEventListener("click", click);
     }
     onCleanup(() => {
+      disposeContext();
       disposeInput();
       disposeWorkspace();
       disposeTheme();

package/src/ssr/PanelSlot.tsx

@@ -1,5 +1,6 @@
-import { Button, IconButton, type KeyboardPlatform, Placeholder, ResizeSeparator, useLocale } from "@k2b/ui";
+import { Button, IconButton, type KeyboardPlatform, NoticeCard, Placeholder, ResizeSeparator, useLocale } from "@k2b/ui";
 import { PANEL_MAX_WIDTH_REM, PANEL_MIN_WIDTH_REM, type PanelCookieState } from "../_internal/panel-cookie";
+import { withPanelContext } from "../contracts/panel-context-plain";
 import { platformMessages } from "./platform-messages";
 import type { ShellData } from "./shell-data";
 
@@ -9,6 +10,10 @@ export default function PanelSlot(props: { panel: NonNullable<ShellData["panel"]
   const t = platformMessages.resolve([locale()]).t;
   const provider = props.panel.providers.find((provider) => provider.id === props.panel.provider) ?? props.panel.providers[0];
   if (!provider) return null;
+  const answer = props.panel.consent?.provider === provider.id ? props.panel.consent.allowed : null;
+  const ask = props.state.open && provider.consent && answer === null;
+  const allowed = !provider.consent || answer === true;
+  const hasConsent = props.panel.providers.some((provider) => provider.consent);
   const tabs = props.panel.providers.length > 1;
   return (
     <aside
@@ -18,6 +23,10 @@ export default function PanelSlot(props: { panel: NonNullable<ShellData["panel"]
       aria-label={t.panel}
       data-state={props.state.open ? "loading" : "closed"}
       data-provider={provider.id}
+      data-app-name={provider.appName}
+      data-provider-consent={String(provider.consent)}
+      data-context-allowed={String(allowed)}
+      data-consent={ask ? "ask" : undefined}
     >
       <ResizeSeparator
         class="cloud-panel__resize"
@@ -48,7 +57,7 @@ export default function PanelSlot(props: { panel: NonNullable<ShellData["panel"]
                   tabindex={item.id === provider.id ? 0 : -1}
                 >
                   <i class={item.icon} aria-hidden="true" />
-                  <span class="cloud-panel__tab-label">{item.label}</span>
+                  <span class="cloud-panel__tab-label k2b-truncate-fade">{item.label}</span>
                 </button>
               ))}
             </div>
@@ -58,6 +67,19 @@ export default function PanelSlot(props: { panel: NonNullable<ShellData["panel"]
               <span>{provider.label}</span>
             </h2>
           )}
+          {/* The controller mounts the ⋯ menu over this button; the place stays reserved for Core providers. */}
+          {hasConsent && (
+            <span
+              class="cloud-panel__menu"
+              data-cloud-panel-menu=""
+              style={{ visibility: provider.consent ? "visible" : "hidden" }}
+              inert={!provider.consent}
+            >
+              <IconButton label={t.panelMenu} title={t.panelMenu} aria-haspopup="menu" aria-expanded="false">
+                <i class="ti ti-dots" aria-hidden="true" />
+              </IconButton>
+            </span>
+          )}
           <IconButton
             label={t.closePanel}
             title={`${t.closePanel} (${props.platform === "apple" ? "⌘J" : "Ctrl+J"})`}
@@ -67,6 +89,34 @@ export default function PanelSlot(props: { panel: NonNullable<ShellData["panel"]
           </IconButton>
         </div>
         <div class="cloud-panel__body" id="cloud-panel-body" role={tabs ? "tabpanel" : undefined}>
+          {hasConsent && (
+            // The shell asks, not the provider: the question sits above the provider page, which loads without context.
+            <NoticeCard
+              class="cloud-panel__consent"
+              tone="neutral"
+              data-cloud-panel-consent=""
+              role="region"
+              tabindex="-1"
+              aria-labelledby="cloud-panel-consent-title"
+              title={
+                <span id="cloud-panel-consent-title" data-cloud-panel-consent-title="">
+                  {t.panelConsentTitle({ app: provider.appName })}
+                </span>
+              }
+              detail={<span data-cloud-panel-consent-body="">{t.panelConsentBody({ app: provider.appName })}</span>}
+            >
+              <div class="cloud-panel__consent-actions">
+                <Button size="sm" variant="primary" data-cloud-panel-consent-answer="allow">
+                  {t.panelConsentAllow}
+                </Button>
+                <Button size="sm" variant="secondary" data-cloud-panel-consent-answer="deny">
+                  {t.panelConsentDeny}
+                </Button>
+              </div>
+              {/* A failed save reports in this reserved line, so the question never grows. */}
+              <p class="cloud-panel__consent-error" data-cloud-panel-consent-error="" role="status" />
+            </NoticeCard>
+          )}
           <div class="cloud-panel__skeleton" aria-hidden="true">
             <span />
             <span />
@@ -76,7 +126,7 @@ export default function PanelSlot(props: { panel: NonNullable<ShellData["panel"]
           {props.state.open && (
             <iframe
               class="cloud-panel__frame"
-              src={provider.href}
+              src={withPanelContext(provider.href, allowed ? props.panel.context : null)}
               title={provider.label}
               loading="lazy"
               data-cloud-panel-frame={provider.id}