@k2b/cloud 0.38.0 → 0.40.0

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

@@ -0,0 +1,136 @@
+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, LayoutHelpPanel, type LayoutHelpPanelProps } from "./LayoutHelp";
+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 initialArticle = { payload: fixtureDocument, parts: helpArticlePartsServer(fixtureDocument.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: LayoutHelpPanelProps | 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">
+          <div id="help-fixture-root" class="flex h-full min-h-0 flex-1 flex-col">
+            <LayoutHelpPanel {...props} />
+          </div>
+          <PropsSnapshot value={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/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/LayoutRail.tsx

@@ -5,7 +5,7 @@ import type { RailApp } from "./rail-navigation";
 export type LayoutAppLink = RailApp;
 
 /** The rail frame and Home stay server markup; only the navigation is interactive. */
-export default function LayoutRail(props: { currentPath: string }) {
+export default function LayoutRail(props: { currentPath: string; panelOpen?: boolean }) {
   const locale = useLocale();
   const t = () => platformMessages.resolve([locale()]).t;
   return (
@@ -15,7 +15,7 @@ export default function LayoutRail(props: { currentPath: string }) {
           <img src="/branding/logo" alt="Logo" class="h-5 w-5" />
         </a>
       </div>
-      <CloudShell slot="rail" currentPath={props.currentPath} />
+      <CloudShell slot="rail" currentPath={props.currentPath} panelOpen={props.panelOpen} />
     </aside>
   );
 }

package/src/ssr/LayoutTabBar.tsx

@@ -0,0 +1,29 @@
+import { TabBar, useLocale } from "@k2b/ui";
+import { platformMessages } from "./platform-messages";
+import { phoneBarItems, projectRailNavigation } from "./rail-navigation";
+import { useShellData } from "./shell-data";
+
+/**
+ * The signed-in phone's bottom bar: Home and the person's first apps in their rail order, floating on the app
+ * gradient above the content card. It is server markup, so it stands in its final place before any island mounts and
+ * a link focused early keeps its focus. The rail's island takes over only when the bar's content changes in the
+ * browser: after the person saves their rail preferences, or when the URL changes in the page. The
+ * place of the app's primary action beside it stays free. From 768 px the rail takes over and the bar is hidden.
+ */
+export default function LayoutTabBar(props: { currentPath: string }) {
+  const data = useShellData();
+  const locale = useLocale();
+  if (!data?.rail) return null;
+  const t = platformMessages.resolve([locale()]).t;
+  const items = phoneBarItems(projectRailNavigation(data.apps, data.rail, locale()), props.currentPath, {
+    label: t.home,
+    path: data.home ?? "/",
+  });
+  return (
+    <div class="cloud-tab-bar">
+      <div class="cloud-tab-bar__row">
+        <TabBar variant="floating" label={t.apps} items={items} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { LocaleProvider } from "@k2b/ui";
+import type { JSX } from "solid-js";
+import { canonicalRoute } from "../_internal/app-path";
+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 & { 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) }));
+  const app = resolveRuntimeRoute(apps, new URL(props.c.req.raw.url).pathname)?.app;
+  props.c.get("page").title = props.title;
+  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>
+    </LocaleProvider>
+  );
+}

package/src/ssr/PanelRuntime.island.tsx

@@ -0,0 +1,94 @@
+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 }) {
+  onMount(() => {
+    syncTimezoneCookie(true);
+    const disposeInput = installInputModeController();
+    // The SSR body hands workspace controller ownership to the page runtime, as Layout's ShellRuntime does. A panel
+    // page keeps no workspace layout cookie: the app's own layout must not follow the reader into a narrow panel.
+    const disposeWorkspace = installAppWorkspaceController();
+    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) => {
+      if (!event.persisted) disposeTheme();
+    };
+    const pageShow = (event: PageTransitionEvent) => {
+      if (event.persisted) resumeTheme();
+    };
+    const close = () => window.parent.postMessage({ type: "cloud.panel.close" }, location.origin);
+    const click = (event: MouseEvent) => {
+      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+      const anchor = event.target instanceof Element ? event.target.closest<HTMLAnchorElement>("a[href]") : null;
+      if (!anchor || (anchor.target && anchor.target !== "_self") || anchor.hasAttribute("download")) return;
+      const url = new URL(anchor.getAttribute("href")!, document.baseURI);
+      if (url.origin !== location.origin) return;
+      const scope = props.scope?.replace(/\/$/, "");
+      if (scope !== undefined && (url.pathname === scope || url.pathname.startsWith(`${scope}/`))) return;
+      event.preventDefault();
+      window.parent.location.assign(url.href);
+    };
+    const key = (event: KeyboardEvent) => {
+      if (event.isComposing || event.defaultPrevented || event.altKey || event.shiftKey) return;
+      const apple = keyboardPlatform() === "apple";
+      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;
+        const timer = setTimeout(() => {
+          deferred.delete(timer);
+          if (!event.defaultPrevented) close();
+        }, 0);
+        deferred.add(timer);
+      }
+    };
+    if (embedded) {
+      disposeContext = installPanelContextReceiver();
+      try {
+        const parent = window.parent;
+        const parentRoot = parent.document.documentElement;
+        const syncTheme = () => {
+          for (const theme of ["light", "dark"]) {
+            document.documentElement.classList.toggle(theme, parentRoot.classList.contains(theme));
+          }
+        };
+        parent.addEventListener("cloud:theme-preference", syncTheme);
+        disposeTheme = () => parent.removeEventListener("cloud:theme-preference", syncTheme);
+        resumeTheme = syncTheme;
+        syncTheme();
+      } catch {
+        // A cross-origin parent cannot share its document or theme events.
+      }
+      window.addEventListener("pagehide", pageHide);
+      window.addEventListener("pageshow", pageShow);
+      // The shell reads this mark when its controller arrives after the message.
+      if (props.provider) document.documentElement.dataset.cloudPanelReady = props.provider;
+      window.parent.postMessage({ type: "cloud.panel.ready", v: 1, provider: props.provider }, location.origin);
+      window.addEventListener("keydown", key);
+      window.addEventListener("click", click);
+    }
+    onCleanup(() => {
+      disposeContext();
+      disposeInput();
+      disposeWorkspace();
+      disposeTheme();
+      window.removeEventListener("pagehide", pageHide);
+      window.removeEventListener("pageshow", pageShow);
+      window.removeEventListener("keydown", key);
+      window.removeEventListener("click", click);
+      for (const timer of deferred) clearTimeout(timer);
+    });
+  });
+  return null;
+}

package/src/ssr/PanelSlot.tsx

@@ -0,0 +1,158 @@
+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";
+
+/** Server markup only. The shell loads its controller on demand. */
+export default function PanelSlot(props: { panel: NonNullable<ShellData["panel"]>; state: PanelCookieState; platform?: KeyboardPlatform }) {
+  const locale = useLocale();
+  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
+      class="cloud-panel"
+      id="cloud-panel"
+      data-cloud-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"
+        label={t.resizePanel}
+        orientation="vertical"
+        controls="cloud-panel"
+        min={PANEL_MIN_WIDTH_REM}
+        max={PANEL_MAX_WIDTH_REM}
+        value={props.state.widthRem ?? 26}
+        grow="start"
+        onResize={() => {}}
+      />
+      <div class="cloud-panel__card">
+        <button type="button" class="cloud-panel__grabber" data-cloud-panel-grow="" aria-label={t.enlargePanel}>
+          <span aria-hidden="true" />
+        </button>
+        <div class="cloud-panel__head">
+          {tabs ? (
+            <div class="cloud-panel__tabs" role="tablist" aria-label={t.panels}>
+              {props.panel.providers.map((item) => (
+                <button
+                  type="button"
+                  role="tab"
+                  class="cloud-panel__tab"
+                  data-cloud-panel-provider={item.id}
+                  aria-selected={item.id === provider.id}
+                  aria-controls="cloud-panel-body"
+                  tabindex={item.id === provider.id ? 0 : -1}
+                >
+                  <i class={item.icon} aria-hidden="true" />
+                  <span class="cloud-panel__tab-label k2b-truncate-fade">{item.label}</span>
+                </button>
+              ))}
+            </div>
+          ) : (
+            <h2 class="cloud-panel__title">
+              <i class={provider.icon} aria-hidden="true" />
+              <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"})`}
+            data-cloud-panel-close=""
+          >
+            <i class="ti ti-x" aria-hidden="true" />
+          </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 />
+            <span />
+          </div>
+          {/* Lazy: below 768 px the open cookie leaves the slot hidden, and a hidden iframe must not load its provider. */}
+          {props.state.open && (
+            <iframe
+              class="cloud-panel__frame"
+              src={withPanelContext(provider.href, allowed ? props.panel.context : null)}
+              title={provider.label}
+              loading="lazy"
+              data-cloud-panel-frame={provider.id}
+            />
+          )}
+          <div class="cloud-panel__fallback">
+            <Placeholder
+              state="error"
+              variant="panel"
+              title={t.panelLoadFailed}
+              description={t.panelNotResponding({ label: provider.label })}
+              action={<Button data-cloud-panel-retry="">{t.retry}</Button>}
+            />
+          </div>
+          <div class="cloud-panel__shield" aria-hidden="true" />
+          <div class="cloud-panel__closing" aria-hidden="true">
+            <span>
+              <i class="ti ti-x" />
+              {t.releaseClosesPanel}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div role="status" class="k2b-sr-only" data-cloud-panel-status="">
+        {props.state.open ? t.panelLoading({ label: provider.label }) : ""}
+      </div>
+    </aside>
+  );
+}

package/src/ssr/PanelTrigger.tsx

@@ -0,0 +1,49 @@
+import { IconButton, Tooltip, useLocale } from "@k2b/ui";
+import { isServer } from "solid-js/web";
+import type { PanelRequest } from "../browser/panel";
+import { platformMessages } from "./platform-messages";
+import { useShellData } from "./shell-data";
+
+export default function PanelTrigger(props: { variant: "rail" | "header"; open?: boolean }) {
+  const locale = useLocale();
+  const data = useShellData();
+  const t = () => platformMessages.resolve([locale()]).t;
+  const title = () => t().panelShortcut({ mod: data?.platform === "apple" ? "⌘" : "Ctrl+" });
+  // The lazy controller may have changed state before this island mounts.
+  const open = () =>
+    isServer
+      ? !!props.open
+      : document
+          .querySelector(".cloud-app-canvas")
+          ?.getAttribute(window.matchMedia("(min-width: 768px)").matches ? "data-panel" : "data-panel-sheet") === "open";
+  const toggle = () => window.dispatchEvent(new CustomEvent<PanelRequest>("cloud.panel.request", { detail: { action: "toggle" } }));
+  if (props.variant === "rail")
+    return (
+      <Tooltip.Trigger
+        type="button"
+        class="rail-item"
+        aria-label={t().openPanel}
+        aria-controls="cloud-panel"
+        aria-expanded={open()}
+        data-cloud-panel-toggle=""
+        content={title()}
+        placement="right"
+        delay={0}
+        onClick={toggle}
+      >
+        <i class="ti ti-layout-sidebar-right text-xl" aria-hidden="true" />
+      </Tooltip.Trigger>
+    );
+  return (
+    <IconButton
+      label={t().openPanel}
+      title={title()}
+      aria-controls="cloud-panel"
+      aria-expanded={open()}
+      data-cloud-panel-toggle=""
+      onClick={toggle}
+    >
+      <i class="ti ti-layout-sidebar-right text-base" aria-hidden="true" />
+    </IconButton>
+  );
+}