@k2b/cloud 0.41.0 → 0.42.0

package/src/ssr/mobile-menu-history.ts

@@ -30,6 +30,7 @@ export function openMobileMenu(view: (beforeSelect: () => Promise<boolean>) => D
       abort.abort();
     };
     window.addEventListener("popstate", pop);
+    window.addEventListener("ssr:nav-popstate", pop);
     window.addEventListener("pagehide", leaving);
     mobile.addEventListener("change", resized);
     try {
@@ -44,6 +45,7 @@ export function openMobileMenu(view: (beforeSelect: () => Promise<boolean>) => D
       );
     } finally {
       window.removeEventListener("popstate", pop);
+      window.removeEventListener("ssr:nav-popstate", pop);
       window.removeEventListener("pagehide", leaving);
       mobile.removeEventListener("change", resized);
       if (!leavingPage && history.state?.[marker] === id) {
@@ -51,9 +53,11 @@ export function openMobileMenu(view: (beforeSelect: () => Promise<boolean>) => D
           const returned = () => {
             window.removeEventListener("pagehide", returned);
             window.removeEventListener("popstate", returned);
+            window.removeEventListener("ssr:nav-popstate", returned);
             resolve();
           };
           window.addEventListener("popstate", returned, { once: true });
+          window.addEventListener("ssr:nav-popstate", returned, { once: true });
           window.addEventListener("pagehide", returned, { once: true });
           history.back();
         });

package/src/ssr/page-swap-fixture/Column.island.tsx

@@ -0,0 +1,15 @@
+import { onCleanup, onMount } from "solid-js";
+
+/** A real column island deliberately using raw history, to exercise install order. */
+export default function Column(props: { page: string; historyProbe?: boolean }) {
+  onMount(() => {
+    const raw = () => {
+      document.documentElement.dataset.rawPops = String(Number(document.documentElement.dataset.rawPops ?? 0) + 1);
+    };
+    window.addEventListener("popstate", raw);
+    onCleanup(() => window.removeEventListener("popstate", raw));
+    if (props.historyProbe) history.pushState({ fixtureColumn: true }, "", `${location.pathname}?entry=column`);
+    document.documentElement.dataset.columnMounted = props.page;
+  });
+  return <output data-column-mounted>{props.page}</output>;
+}

package/src/ssr/page-swap-fixture/ProviderProbe.island.tsx

@@ -0,0 +1,31 @@
+import { onCleanup, onMount } from "solid-js";
+import { getContext, onContextChange } from "../../browser/panel";
+
+export default function ProviderProbe() {
+  onMount(() => {
+    const show = () => {
+      const output = document.getElementById("provider-context");
+      if (output) output.textContent = JSON.stringify(getContext());
+    };
+    show();
+    onCleanup(onContextChange(show));
+    // This token belongs to the provider window, independently of the host DOM.
+    Reflect.set(window, "fixtureProviderToken", crypto.randomUUID());
+    document.documentElement.dataset.providerMounted = "true";
+    const abort = new AbortController();
+    void fetch("/fixture/pending", { signal: abort.signal })
+      .then((response) => response.text())
+      .then((text) => {
+        const output = document.getElementById("pending-result");
+        if (output) output.textContent = text;
+      })
+      .catch((error: unknown) => {
+        if (!abort.signal.aborted) {
+          const output = document.getElementById("pending-result");
+          if (output) output.textContent = String(error);
+        }
+      });
+    onCleanup(() => abort.abort());
+  });
+  return <output data-provider-probe />;
+}

package/src/ssr/page-swap.browser-harness.tsx

@@ -0,0 +1,177 @@
+import { Hono } from "hono";
+import { defineApp } from "../_internal/define-app";
+import { person } from "../_internal/define-app.test-fixture";
+import type { RuntimeAppMeta } from "../contracts/app";
+import type { User } from "../contracts/shared";
+import { type AuthContext, auth } from "../server/middleware/auth";
+import Layout from "./Layout";
+import PanelLayout from "./PanelLayout";
+import Column from "./page-swap-fixture/Column.island";
+import ProviderProbe from "./page-swap-fixture/ProviderProbe.island";
+import type { RuntimeContext } from "./runtime";
+
+const probe = defineApp({
+  id: "fixture",
+  name: "Fixture",
+  icon: "ti ti-box",
+  description: "Page swap browser fixture",
+  baseUrl: "http://fixture:3000",
+  routes: ["/app/fixture"],
+  pageSwap: true,
+});
+const apps: RuntimeAppMeta[] = [
+  {
+    id: "fixture",
+    name: "Fixture",
+    icon: "ti ti-box",
+    description: "Fixture",
+    routes: ["/app/fixture"],
+    nav: { href: "/app/fixture", section: "primary" },
+  },
+  {
+    id: "core",
+    name: "Provider",
+    icon: "ti ti-box",
+    description: "Provider",
+    routes: ["/app/provider"],
+    panel: { href: "/app/provider/panel", label: "Provider", icon: "ti ti-box" },
+  },
+  {
+    id: "other",
+    name: "Other",
+    icon: "ti ti-box",
+    description: "Other",
+    routes: ["/app/other"],
+    nav: { href: "/app/other", section: "primary" },
+  },
+];
+// The route policy decides alone; these pages never render their content for the fixture person.
+const policies = new Hono<AuthContext>()
+  .get("/protected-login", auth.requireRole("user", probe.ssr.access), ...probe.ssr(() => () => <p>Unreachable</p>))
+  .get("/forbidden", auth.requireRole("admin", probe.ssr.access), ...probe.ssr(() => () => <p>Unreachable</p>))
+  .get("/revoked", auth.requireRole("admin", probe.ssr.access), ...probe.ssr(() => () => <p>Unreachable</p>));
+export type FixtureEnvironment = { Variables: AuthContext["Variables"] & { runtime: RuntimeContext } };
+export const server = new Hono<FixtureEnvironment>()
+  .use(async (c, next) => {
+    c.set("runtime", { apps });
+    if (!c.req.path.endsWith("/protected-login")) {
+      const id = c.req.header("cookie")?.match(/(?:^|;\s*)fixture_person=([^;]+)/)?.[1];
+      const user: User = { ...person, ...(id ? { id } : {}) };
+      c.set("user", user);
+    }
+    await next();
+  })
+  .get(
+    "/app/provider/panel",
+    ...probe.ssr<FixtureEnvironment>((c) => () => (
+      <PanelLayout c={c} title="Provider">
+        <label>
+          Draft
+          <textarea aria-label="Provider draft" />
+        </label>
+        <output id="provider-context" />
+        <output id="pending-result" />
+        <ProviderProbe />
+      </PanelLayout>
+    )),
+  )
+  .get("/app/fixture/file", (c) => c.body("Fixture file", 200, { "content-type": "text/plain" }))
+  .get("/api/fixture", (c) => c.json({ fixture: true }))
+  .get("/app/fixture/download", (c) =>
+    c.body("Download", 200, { "content-type": "application/octet-stream", "content-disposition": 'attachment; filename="fixture.txt"' }),
+  )
+  .route("/app/fixture", policies)
+  .get(
+    "/auth/login",
+    ...probe.ssr<FixtureEnvironment>((c) => () => (
+      <Layout c={c} title="Sign in" panel={false}>
+        <h1>Sign in to continue</h1>
+      </Layout>
+    )),
+  )
+  .get(
+    "/app/other",
+    ...probe.ssr<FixtureEnvironment>((c) => () => (
+      <Layout c={c} title="Other">
+        <h1>Other app</h1>
+      </Layout>
+    )),
+  )
+  .get(
+    "/app/fixture/:page?",
+    ...probe.ssr<FixtureEnvironment>((c) => {
+      const page = c.req.param("page") ?? "A";
+      const label =
+        page === "B"
+          ? "Full page B"
+          : page === "focus"
+            ? "Focus editor"
+            : page === "order"
+              ? "Order probe"
+              : page === "C"
+                ? "Regular page C"
+                : "Regular page A";
+      return () => (
+        <Layout
+          c={c}
+          title={page === "A" ? label : [{ title: "Regular page A", href: "/app/fixture/A" }, { title: label }]}
+          fullPage={page === "B"}
+          fullWidth={page === "B"}
+          focusMode={page === "focus"}
+          help={[`help-${page.toLowerCase()}`]}
+          context={{ scope: { type: "fixture.page", id: page } }}
+        >
+          <h1>{label}</h1>
+          <Column page={page} historyProbe={page === "order"} />
+          <a id="to-A" href="/app/fixture/A">
+            A
+          </a>
+          <a id="to-B" href="/app/fixture/B">
+            B
+          </a>
+          <a id="to-C" href="/app/fixture/C">
+            C
+          </a>
+          <a id="to-order" href="/app/fixture/order">
+            Order
+          </a>
+          <a id="to-focus" href="/app/fixture/focus">
+            Focus
+          </a>
+          <a id="to-other" href="/app/other">
+            Other app
+          </a>
+          <a id="to-api" href="/api/fixture">
+            API
+          </a>
+          <a id="to-file" href="/app/fixture/file">
+            File
+          </a>
+          <a id="to-download" href="/app/fixture/download" download="">
+            Download
+          </a>
+          <a id="to-protected-login" href="/app/fixture/protected-login">
+            Sign-in policy
+          </a>
+          <a id="to-forbidden" href="/app/fixture/forbidden">
+            Forbidden policy
+          </a>
+          <a id="to-revoked" href="/app/fixture/revoked">
+            Revoked access
+          </a>
+          <form action="/app/fixture/A" method="get">
+            <input name="query" value="submitted" />
+            <button id="submit" type="submit">
+              Submit
+            </button>
+          </form>
+          <div style="height:1600px" />
+          <ul>
+            <li id="row-B">
+              <a href="/app/fixture/B">B row</a>
+            </li>
+          </ul>
+        </Layout>
+      );
+    }),
+  );

package/src/ssr/page-swap.ts

@@ -0,0 +1,28 @@
+import { createHash } from "node:crypto";
+
+const builds = new WeakMap<object, string>();
+
+/** Register only requests of applications that opted into page swaps. */
+export const registerPageSwap = (context: object, build: string): void => {
+  builds.set(context, build);
+};
+export const getPageSwapBuild = (context: object): string | undefined => builds.get(context);
+
+export type PageSwapParts = {
+  app: string | undefined;
+  kind: "app" | "anonymous";
+  user: string | null;
+  appSession: boolean;
+  locale: string;
+  theme: "light" | "dark" | undefined;
+  build: string;
+  /** The request-scoped inputs of the shell that stays: navigation catalogs, profile, panel providers, announcements and Help. */
+  shell: unknown;
+};
+
+/** Opaque identity of the document that stays around the replaced content column. */
+export const pageSwapSignature = (parts: PageSwapParts): string =>
+  createHash("sha256")
+    .update(JSON.stringify([parts.app, parts.kind, parts.user, parts.appSession, parts.locale, parts.theme, parts.build, parts.shell]))
+    .digest("hex")
+    .slice(0, 32);

package/src/ssr/page-trail-runtime.ts

@@ -7,6 +7,7 @@
  * to the page itself. After returning, the row that led down is marked.
  */
 
+import { swapPage } from "@k2b/ssr/nav";
 import { PAGE_TRAIL_EVENT, readPageTrail } from "@k2b/ui";
 import { registerContextAwareCommand } from "../browser/command-bridge";
 import { PAGE_UP_EVENT, type PageUpDetail } from "./layout-runtime";
@@ -168,7 +169,10 @@ export const goUp = (href: string): boolean => {
   const memory = read();
   memory.returning = { url: destination, from: here() };
   write(memory);
-  location.assign(url.href);
+  const canvas = document.querySelector<HTMLElement>(".cloud-app-canvas[data-nav-shell]");
+  const scope = canvas?.dataset.navScope;
+  if (scope && url.origin === location.origin && (url.pathname === scope || url.pathname.startsWith(`${scope}/`))) void swapPage(url.href);
+  else location.assign(url.href);
   return true;
 };
 
@@ -208,7 +212,10 @@ const restoreReturn = (visit: Visit | undefined, from: URL) => {
   const pending = new Map((visit?.regions ?? []).map((region) => [region.key, region]));
   let marked: HTMLElement | null = null;
   let frames = 0;
+  // A page swap that replaces this column ends its restore; the next page is not the one returned to.
+  const column = document.querySelector("[data-nav-root]");
   const step = () => {
+    if (column && !column.isConnected) return;
     for (const [key, region] of pending) {
       // A region is restored once both axes hold; content that renders late can still widen or lengthen it.
       if (key === "@window") {
@@ -263,8 +270,10 @@ const offerPageUp = (labels: PageUpLabels): (() => void) => {
   };
   update();
   window.addEventListener(PAGE_TRAIL_EVENT, update);
+  window.addEventListener("ssr:nav-swapped", update);
   return () => {
     window.removeEventListener(PAGE_TRAIL_EVENT, update);
+    window.removeEventListener("ssr:nav-swapped", update);
     unregister();
   };
 };
@@ -277,19 +286,26 @@ const offerPageUp = (labels: PageUpLabels): (() => void) => {
  */
 export const installPageTrailRuntime = (labels: PageUpLabels): (() => void) => {
   const stopPageUp = offerPageUp(labels);
-  const memory = read();
-  const returning = memory.returning;
-  if (returning) {
-    delete memory.returning;
-    write(memory);
-    const current = resolve(here());
-    if (pathOf(resolve(returning.url)) === pathOf(current) && resolve(returning.url).search === current.search)
-      restoreReturn(
-        memory.visits.find((visit) => visit.url === returning.url),
-        resolve(returning.from),
-      );
-  }
+  const restoreArrivingPage = () => {
+    const memory = read();
+    const returning = memory.returning;
+    if (returning) {
+      delete memory.returning;
+      write(memory);
+      const current = resolve(here());
+      if (pathOf(resolve(returning.url)) === pathOf(current) && resolve(returning.url).search === current.search)
+        restoreReturn(
+          memory.visits.find((visit) => visit.url === returning.url),
+          resolve(returning.from),
+        );
+    }
+  };
+  restoreArrivingPage();
+  window.addEventListener("ssr:nav-swapped", restoreArrivingPage);
   const onCapture = () => rememberPage();
+  const onNavigate = (event: NavigateEvent) => {
+    if (event.navigationType === "traverse") rememberPage();
+  };
   const onKey = (event: KeyboardEvent) => {
     if (event.key === "Enter") rememberPage();
   };
@@ -303,11 +319,14 @@ export const installPageTrailRuntime = (labels: PageUpLabels): (() => void) => {
   document.addEventListener("keydown", onKey, true);
   document.addEventListener("click", onClick);
   window.addEventListener("pagehide", onCapture);
+  window.navigation?.addEventListener("navigate", onNavigate);
   return () => {
+    window.removeEventListener("ssr:nav-swapped", restoreArrivingPage);
     stopPageUp();
     document.removeEventListener("click", onCapture, true);
     document.removeEventListener("keydown", onKey, true);
     document.removeEventListener("click", onClick);
     window.removeEventListener("pagehide", onCapture);
+    window.navigation?.removeEventListener("navigate", onNavigate);
   };
 };

package/src/ssr/panel-consent.ts

@@ -3,13 +3,13 @@ import { readPanelCookie } from "../_internal/panel-cookie";
 import { getLocale } from "../server/locale";
 import { panelContextConsent } from "../services/panel-context-consent";
 import { visiblePanelProviders } from "./app-navigation";
-import { getRuntimeContext } from "./runtime";
+import { getDisplayRuntimeContext } from "./runtime";
 
 /** One read, only for a host page with the slot open on a consent provider. Fail closed when the store is unavailable. */
 export async function preloadPanelConsent(c: Context): Promise<void> {
   const user = c.get("user");
   if (!user || !c.get("runtime")) return;
-  const providers = visiblePanelProviders(getRuntimeContext(c).apps, user, getLocale(c));
+  const providers = visiblePanelProviders(getDisplayRuntimeContext(c).apps, user, getLocale(c));
   const state = readPanelCookie(
     c.req.header("Cookie"),
     providers.map((provider) => provider.id),

package/src/ssr/panel-slot.browser-harness.tsx

@@ -77,6 +77,9 @@ export const server = new Hono<Environment>()
         <a href="/app/fixture/next" id="leave-panel">
           Open in the app
         </a>
+        <a href="/app/fixture/panel?guard=multiple&mode=manual&step=2" id="internal-panel">
+          Another panel document
+        </a>
       </PanelLayout>
     )),
   )

package/src/ssr/platform-messages.ts

@@ -16,6 +16,9 @@ export const platformMessages = i18n.define({
       panelLoadFailed: "The panel did not load",
       panelNotResponding: ({ label }: { label: string }) => `${label} is not responding.`,
       retry: "Try again",
+      panelLeaveResume: "Back to the panel",
+      panelLeaveBlocked: "The panel is still open",
+      panelLeaveDetail: "Finish or save your work in the panel, then try switching or closing again.",
       panelLoading: ({ label }: { label: string }) => `${label} is loading`,
       enlargePanel: "Enlarge panel",
       shrinkPanel: "Shrink panel",
@@ -47,6 +50,7 @@ export const platformMessages = i18n.define({
       accountOperations: "Operations",
       linuxAccess: "Linux identities",
       pdfRendering: "PDF rendering",
+      placesAndMaps: "Places and maps",
       emailTemplates: "Email templates",
       outgoingMail: "Outgoing mail",
       security: "Security",
@@ -114,6 +118,9 @@ export const platformMessages = i18n.define({
       panelLoadFailed: "Das Panel lädt nicht",
       panelNotResponding: ({ label }: { label: string }) => `${label} antwortet nicht.`,
       retry: "Erneut versuchen",
+      panelLeaveResume: "Zurück zum Panel",
+      panelLeaveBlocked: "Das Panel bleibt geöffnet",
+      panelLeaveDetail: "Beende oder speichere deine Arbeit im Panel. Danach kannst du es erneut wechseln oder schließen.",
       panelLoading: ({ label }: { label: string }) => `${label} lädt`,
       enlargePanel: "Panel vergrößern",
       shrinkPanel: "Panel verkleinern",
@@ -145,6 +152,7 @@ export const platformMessages = i18n.define({
       accountOperations: "Betrieb",
       linuxAccess: "Linux-Identitäten",
       pdfRendering: "PDF-Erstellung",
+      placesAndMaps: "Orte und Karten",
       emailTemplates: "E-Mail-Vorlagen",
       outgoingMail: "Ausgehende Mail",
       security: "Sicherheit",

package/src/ssr/runtime.ts

@@ -2,8 +2,11 @@
  * Runtime context helpers for SSR components.
  * Extracted from _core/runtime-helpers.ts — only the generic parts.
  */
+import type { Context } from "hono";
 import type { CloudRuntime } from "../contracts/app";
 import { getLocale } from "../server/locale";
+import { appAccessAuthority } from "../services/app-access";
+import { discoverableApps } from "../services/app-discovery";
 import { resolveAppPresentation, resolveAppPresentations } from "../shared/app-presentation";
 
 export type RuntimeContext = CloudRuntime;
@@ -47,3 +50,17 @@ export const appNameIn = (carrier: RuntimeCarrier, appId: string, locale: string
   const app = apps.find((entry) => entry.id === appId);
   return app ? resolveAppPresentation(app, locale).name : fallback;
 };
+
+const displayApps = new WeakMap<object, RuntimeContext["apps"]>();
+
+/** Called after route authentication, before page data and synchronous layouts render. Routing keeps the full runtime. */
+export const preloadDisplayApps = async (c: Context): Promise<void> => {
+  if (!c.get("runtime") || displayApps.has(c)) return;
+  displayApps.set(c, await discoverableApps(appAccessAuthority(c), getRuntimeContext(c).apps));
+};
+
+/** Display-only projection. A caller outside the SSR adapter must preload declared app access first. */
+export const getDisplayRuntimeContext = (carrier: RuntimeCarrier): RuntimeContext => {
+  const runtime = getRuntimeContext(carrier);
+  return { ...runtime, apps: displayApps.get(carrier) ?? runtime.apps.filter((app) => app.access === undefined) };
+};

package/src/ssr/shell-data.tsx

@@ -36,15 +36,23 @@ export type ShellData = {
 
 const ShellDataContext = createContext<() => ShellData>();
 
-export function ShellDataProvider(props: { data: ShellData; children: JSX.Element }) {
+export function ShellDataProvider(props: { data: ShellData; skipScript?: boolean; children: JSX.Element }) {
   return (
     <ShellDataContext.Provider value={() => props.data}>
-      <script id="cloud-shell-data" type="application/json" innerHTML={JSON.stringify(props.data).replace(/</g, "\\u003c")} />
+      {/* Inline, not a component: an extra component would shift the hydration keys of every page. */}
+      {!props.skipScript && <script id="cloud-shell-data" type="application/json" innerHTML={shellDataJson(props.data)} />}
       {props.children}
     </ShellDataContext.Provider>
   );
 }
 
+const shellDataJson = (data: ShellData) => JSON.stringify(data).replace(/</g, "\\u003c");
+
+/** The shell data inside a swapped column, so each page brings its own with it. */
+export function ShellDataScript(props: { data: ShellData }) {
+  return <script id="cloud-shell-data" type="application/json" innerHTML={shellDataJson(props.data)} />;
+}
+
 export function readShellData(): ShellData | undefined {
   if (typeof document === "undefined") return undefined;
   const text = document.getElementById("cloud-shell-data")?.textContent;

package/src/styles/global.css

@@ -75,6 +75,14 @@ html:has(.cloud-app-canvas[data-layout-full-page="true"]) {
   overscroll-behavior: none;
 }
 
+/* A full page binds the canvas to the window at every width. The attribute
+   carries it, not a class: a page swap copies the attribute and keeps the
+   canvas element, so a regular page and a full page can follow each other. */
+.cloud-app-canvas[data-layout-full-page="true"] {
+  height: 100dvh;
+  overflow: hidden;
+}
+
 .cloud-app-canvas > :is(.layout-rail, .layout-shell-content) {
   gap: var(--ui-space-shell);
 }
@@ -428,6 +436,62 @@ solid-island {
   }
 }
 
+/* Phone overviews: object navigation sits on the shell before the card.
+   Only an outer flush workspace with visible stacked navigation hands the
+   host's paint to its head/content tracks. The pseudo-element is the first
+   grid item, behind the existing regions, without a new stacking context:
+   the fixed primary action can still sit above the app bar. */
+/* Negated min-width queries keep the exact boundary after CSS compilation;
+   fractional max-width approximations can round back up to 768 px. */
+@media not all and (min-width: 768px) {
+  @media not all and (min-width: 48rem) {
+    .cloud-app-canvas[data-layout-authenticated] .layout-content-main:has(
+      .k2b-app-workspace[data-mobile-surface="flush"]:not(.k2b-app-workspace *, [hidden], [hidden] *)
+        > .k2b-app-workspace__sidebar[data-mobile="stacked"]:not([hidden]),
+      .k2b-app-workspace[data-mobile-surface="flush"]:not(.k2b-app-workspace *, [hidden], [hidden] *)
+        > :is(solid-island, solid-client) > .k2b-app-workspace__sidebar[data-mobile="stacked"]:not([hidden])
+    ) {
+      padding-bottom: 0;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+
+      & .k2b-app-workspace[data-mobile-surface="flush"]:not(.k2b-app-workspace *) {
+        --k2b-workspace-inset-bottom: var(--cloud-tab-bar-space);
+
+        &::before {
+          content: "";
+          grid-column: 1 / -1;
+          grid-row: head-start / -1;
+          min-height: 0;
+          pointer-events: none;
+          border-top: 1px solid transparent;
+          border-radius: 1.75rem 1.75rem 0 0;
+          background: var(--k2b-surface);
+          box-shadow: 0 -10px 30px -24px rgb(15 23 19 / 0.3);
+        }
+
+        & > .k2b-app-workspace__head {
+          border-radius: 1.75rem 1.75rem 0 0;
+          background: transparent;
+        }
+
+        /* Cloud's page title hides the automatic head on phones. With no
+           explicit head, Content itself owns the card's rounded clip. */
+        &:not(:has(> .k2b-app-workspace__head[data-row])) > .k2b-app-workspace__content {
+          border-radius: 1.75rem 1.75rem 0 0;
+        }
+      }
+    }
+
+    .dark .cloud-app-canvas[data-layout-authenticated] .layout-content-main
+      .k2b-app-workspace[data-mobile-surface="flush"]:not(.k2b-app-workspace *)::before {
+      border-top-color: var(--k2b-border);
+    }
+  }
+}
+
 /* The bar and the room it takes switch with `md`, as the header and the rail
    do, so Home stays reachable also where a larger default font size moves
    that switch above 768 px. */
@@ -732,14 +796,14 @@ solid-island {
 }
 
 /* The navigation leaves like a hidden sidebar: its track, its resize handle,
-   and navigation panes go, and the work area rounds its start corners with
-   the card. An island may wrap the sidebar or Main, as in Grids. This follows
-   the app's host, as the sidebar column does: in a host below 64 rem, such as
-   the app beside the panel column, the navigation is an overlay behind the
-   workspace head's button and stays there. */
+   and navigation panes go. With the sidebar space at 0, the workspace rounds
+   the work area's start corners with the card itself. An island may wrap the
+   sidebar or Main, as in Grids. This follows the app's host, as the sidebar
+   column does: in a host below 64 rem, such as the app beside the panel
+   column, the navigation is an overlay behind the workspace head's button and
+   stays there. */
 @container k2b-app-area (min-width: 64rem) {
   .cloud-app-canvas[data-shell-focus] .k2b-app-workspace:not(.k2b-app-workspace *) {
-    --k2b-workspace-start-radius: var(--k2b-workspace-inner-radius);
     --k2b-workspace-sidebar-space: 0px;
   }
   .cloud-app-canvas[data-shell-focus]