@k2b/cloud 0.35.0 → 0.37.0

package/src/ssr/ShellRuntime.island.tsx

@@ -6,13 +6,14 @@ import {
   serializeAppWorkspaceLayoutState,
   useLocale,
 } from "@k2b/ui";
-import { createEffect, onCleanup, onMount } from "solid-js";
+import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
 import { appWorkspaceCookieName, readAppWorkspaceLayoutCookie } from "../_internal/app-workspace-state";
 import { registerContextAwareCommand } from "../browser/command-bridge";
 import { attachCommandShortcuts } from "../browser/command-shortcuts";
 import { navigationSearchItems } from "../browser/navigation-search";
 import { importOnDemand } from "../browser/reload";
 import { registerGlobalSearchHost } from "../browser/search-bridge";
+import { attachShellFocusControls, readShellFocus, SHELL_FOCUS_CHANGE_EVENT, toggleShellFocus } from "../browser/shell-focus";
 import {
   ANNOUNCEMENTS_COOKIE,
   ANNOUNCEMENTS_COOKIE_MAX_AGE_SECONDS,
@@ -37,6 +38,8 @@ export type ShellRuntimeProps = {
   help?: { documents: readonly HelpDocumentManifest[]; pageBase: string };
   /** Layout pages outside focus mode: the search host, Cmd/Ctrl+K, the Help command (Shift+/) and command shortcuts. */
   commands?: { searchResources: boolean };
+  /** Signed-in Layout pages: the sidebar buttons, Cmd/Ctrl+\ and the left-edge drag hide and show the app bar and the app's navigation. */
+  focus?: boolean;
   /** Signed-in pages: refresh this browser's push endpoint. */
   push?: boolean;
   /** Announcements the person has not seen yet; a dialog shows them once. */
@@ -95,6 +98,38 @@ export default function ShellRuntime(props: ShellRuntimeProps) {
       });
     });
   }
+  if (props.focus) {
+    const [hidden, setHidden] = createSignal(false);
+    const [available, setAvailable] = createSignal(false);
+    onMount(() => {
+      setHidden(readShellFocus());
+      const media = window.matchMedia("(min-width: 768px)");
+      const resize = () => setAvailable(media.matches);
+      const change = (event: Event) => setHidden((event as CustomEvent<{ hidden: boolean }>).detail.hidden);
+      const dispose = attachShellFocusControls();
+      resize();
+      media.addEventListener("change", resize);
+      window.addEventListener(SHELL_FOCUS_CHANGE_EVENT, change);
+      onCleanup(() => {
+        dispose();
+        media.removeEventListener("change", resize);
+        window.removeEventListener(SHELL_FOCUS_CHANGE_EVENT, change);
+      });
+    });
+    createEffect(() => {
+      if (!available()) return;
+      onCleanup(
+        registerContextAwareCommand({
+          id: "cloud.shell.focus",
+          title: hidden() ? t().showSidebar : t().hideSidebar,
+          description: t().sidebarCommandDescription,
+          icon: hidden() ? "ti ti-layout-sidebar-left-expand" : "ti ti-layout-sidebar-left-collapse",
+          shortcut: "mod+\\",
+          action: toggleShellFocus,
+        }),
+      );
+    });
+  }
   if (props.commands) {
     const host = createGlobalSearchHost(searchItems, props.commands.searchResources);
     onMount(() => onCleanup(registerGlobalSearchHost(host.open, host.dispose)));

package/src/ssr/app-launchpad.tsx

@@ -93,7 +93,7 @@ export function AppLaunchpadButton(props: AppLaunchpadContext & { variant: "rail
         onClick={open}
         aria-busy={action.busy() ? "true" : undefined}
       >
-        <i class={`${action.busy() ? "ti ti-loader-2 animate-spin" : "ti ti-grid-dots"} text-base`} aria-hidden="true" />
+        <i class={`${action.busy() ? "ti ti-loader-2 animate-spin" : "ti ti-grid-dots"} text-xl`} aria-hidden="true" />
       </Tooltip.Trigger>
     );
   }

package/src/ssr/platform-messages.ts

@@ -65,6 +65,11 @@ export const platformMessages = i18n.define({
       pageUpDescription: "Go to the page above this one, as you left it in this tab.",
       openHelp: "Open help",
       helpShortcut: "Help (Shift+/)",
+      hideSidebar: "Hide sidebar",
+      showSidebar: "Show sidebar",
+      hideSidebarShortcut: "Hide sidebar (⌘/Ctrl+\\)",
+      showSidebarShortcut: "Show sidebar (⌘/Ctrl+\\)",
+      sidebarCommandDescription: "Hide or show the app bar and the app's navigation.",
       signIn: "Sign in",
       menu: "Menu",
       search: "Search",
@@ -132,6 +137,11 @@ export const platformMessages = i18n.define({
       pageUpDescription: "Zur Seite darüber, so wie du sie in diesem Tab verlassen hast.",
       openHelp: "Hilfe öffnen",
       helpShortcut: "Hilfe (Umschalt+/)",
+      hideSidebar: "Seitenleiste ausblenden",
+      showSidebar: "Seitenleiste zeigen",
+      hideSidebarShortcut: "Seitenleiste ausblenden (⌘/Strg+\\)",
+      showSidebarShortcut: "Seitenleiste zeigen (⌘/Strg+\\)",
+      sidebarCommandDescription: "App-Leiste und Navigation der App aus- oder einblenden.",
       signIn: "Anmelden",
       menu: "Menü",
       search: "Suchen",

package/src/ssr/shell-focus.browser-harness.tsx

@@ -0,0 +1,83 @@
+import { AppWorkspace } from "@k2b/ui";
+import { Hono } from "hono";
+import { Dynamic } from "solid-js/web";
+import { defineApp } from "../_internal/define-app";
+import { person } from "../_internal/define-app.test-fixture";
+import type { User } from "../contracts/shared";
+import Layout from "./Layout";
+import type { RuntimeContext } from "./runtime";
+
+const probe = defineApp({
+  id: "shell-focus-probe",
+  name: "Focus probe",
+  icon: "ti ti-layout",
+  description: "Shell focus browser fixture",
+  baseUrl: "http://shell-focus-probe:3000",
+  routes: ["/app/focus"],
+});
+type Environment = { Variables: { runtime: RuntimeContext; user: User } };
+export const server = new Hono<Environment>()
+  .use(async (c, next) => {
+    c.set("runtime", {
+      apps: [
+        {
+          id: "shell-focus-probe",
+          name: "Focus probe",
+          description: "Shell focus browser fixture",
+          icon: "ti ti-layout",
+          routes: ["/app/focus"],
+          nav: { href: "/app/focus", section: "primary" },
+        },
+      ],
+    });
+    c.set("user", person);
+    await next();
+  })
+  .get(
+    "/app/focus",
+    ...probe.ssr<Environment>((c) => () => (
+      <Layout c={c} fullWidth fullPage title={[{ title: "Focus probe", href: "/app/focus" }, { title: "Workspace" }]}>
+        <AppWorkspace mobileSurface="flush" class="min-h-0 flex-1">
+          <AppWorkspace.Sidebar id="focus-navigation" label="Navigation">
+            <AppWorkspace.SidebarDesktop>
+              <AppWorkspace.SidebarItem href="/app/focus" active>
+                Workspace
+              </AppWorkspace.SidebarItem>
+            </AppWorkspace.SidebarDesktop>
+          </AppWorkspace.Sidebar>
+          <AppWorkspace.Content>
+            <AppWorkspace.Main>
+              <textarea aria-label="Editor" />
+            </AppWorkspace.Main>
+          </AppWorkspace.Content>
+        </AppWorkspace>
+      </Layout>
+    )),
+  )
+  // Grids wraps Main in an island inside Content and gives it a navigation pane.
+  .get(
+    "/app/focus/panes",
+    ...probe.ssr<Environment>((c) => () => (
+      <Layout c={c} fullWidth fullPage title={[{ title: "Focus probe", href: "/app/focus" }, { title: "Pages" }]}>
+        <AppWorkspace mobileSurface="flush" class="min-h-0 flex-1">
+          <AppWorkspace.Sidebar id="focus-navigation" label="Navigation">
+            <AppWorkspace.SidebarDesktop>
+              <AppWorkspace.SidebarItem href="/app/focus/panes" active>
+                Pages
+              </AppWorkspace.SidebarItem>
+            </AppWorkspace.SidebarDesktop>
+          </AppWorkspace.Sidebar>
+          <AppWorkspace.Content>
+            <Dynamic component="solid-island">
+              <AppWorkspace.Main mobilePane="main" scroll={false}>
+                <AppWorkspace.MainPane id="focus-pages" label="Pages" surface="navigation" defaultSize={280}>
+                  Page list
+                </AppWorkspace.MainPane>
+                <div>Page</div>
+              </AppWorkspace.Main>
+            </Dynamic>
+          </AppWorkspace.Content>
+        </AppWorkspace>
+      </Layout>
+    )),
+  );

package/src/styles/global.css

@@ -79,8 +79,8 @@ html:has(.cloud-app-canvas[data-layout-full-page="true"]) {
 /* The authenticated rail is part of the canvas. Keeping it transparent also
    covers shell-only routes such as 404 pages that have no app workspace. */
 .cloud-app-canvas > .layout-rail {
-  width: calc(2.5rem + var(--ui-space-shell));
-  margin-inline-start: calc(-1 * var(--ui-space-shell));
+  width: calc(3.5rem + env(safe-area-inset-left, 0px));
+  padding-left: env(safe-area-inset-left, 0px);
   background-color: transparent !important;
   background-image: none !important;
 }
@@ -294,11 +294,13 @@ solid-island {
 }
 
 /* Cloud has three shell modes. Phones, below md, get the header and no rail.
-   From md, signed-in people get the rail instead of the header: up to 2xl the
-   app area meets the window's top, right and bottom edges, and from 2xl it is
-   a card with the shell spacing. Anonymous pages keep the header and the card
-   from md. */
-@media (max-width: 767px) {
+   From md, signed-in people get the 56 px rail instead of the header: up to
+   1023 px the app area meets the window's top, right and bottom edges, and
+   from 1024 px it is a card beside the rail. Anonymous pages keep the header
+   and the card from md. Each query is the exact opposite of the next one, so
+   every width, also a fractional one under browser zoom, falls into exactly
+   one mode. */
+@media not all and (min-width: 768px) {
   .cloud-app-canvas {
     padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
   }
@@ -360,35 +362,162 @@ solid-island {
    The rail and the app area reach the window's edges also where the installed
    app reports safe areas, such as the status bar and the home indicator. Their
    own surfaces fill the insets, and their content stays inside them. */
-@media (min-width: 768px) and (max-width: 1535px) {
+@media (min-width: 768px) {
+  @media not all and (min-width: 1024px) {
+    .cloud-app-canvas[data-layout-authenticated] {
+      padding: 0;
+    }
+    .cloud-app-canvas[data-layout-authenticated] > .layout-rail {
+      padding-top: env(safe-area-inset-top, 0px);
+      padding-bottom: calc(var(--ui-space-shell) + env(safe-area-inset-bottom, 0px));
+    }
+    .cloud-app-canvas[data-layout-authenticated] > .layout-shell-content {
+      gap: 0;
+      padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 0;
+      background: var(--k2b-surface);
+    }
+    /* A regular page scrolls `main`, so its end clears the home indicator. A
+       workspace reaches the bottom edge and clears it inside its own surfaces. */
+    .cloud-app-canvas[data-layout-authenticated] .layout-content-main:not(:has(.k2b-app-workspace)) {
+      padding-bottom: env(safe-area-inset-bottom, 0px);
+    }
+    .cloud-app-canvas[data-layout-authenticated] .layout-content-main .k2b-app-workspace:not(.k2b-app-workspace *) {
+      --k2b-workspace-radius: 0px;
+      --k2b-workspace-inset-bottom: env(safe-area-inset-bottom, 0px);
+      border: 0;
+      box-shadow: none;
+    }
+    .cloud-app-canvas[data-layout-authenticated] > .layout-shell-content > :not(.layout-content-main) .k2b-notice-card {
+      border: 0;
+      border-radius: 0;
+    }
+  }
+}
+
+/* Signed-in card: from 1024 px the app area is a card on the app canvas beside
+   the rail, as on laptops. Its spacing and radius grow with the window, from
+   4 to 8 px and from 10 to 14 px at 1440 px, the wide card from there on, in
+   whole pixels, so the card and its columns keep whole widths. The
+   rail starts at the window's left edge and moves down with the card. In the
+   installed app the card and the rail stay below the status bar; the card keeps
+   its spacing at the bottom, and its surfaces keep their content above the
+   home indicator, as in the flush range. */
+@media (min-width: 1024px) {
   .cloud-app-canvas[data-layout-authenticated] {
-    padding: 0;
+    --cloud-card-inset: round(clamp(0.25rem, calc(0.25rem + (100vw - 64rem) / 104), 0.5rem), 1px);
+    --cloud-card-radius: round(clamp(0.625rem, calc(0.625rem + (100vw - 64rem) / 104), 0.875rem), 1px);
+    --cloud-card-inset-bottom: max(0px, env(safe-area-inset-bottom, 0px) - var(--cloud-card-inset));
+    padding: max(var(--cloud-card-inset), env(safe-area-inset-top, 0px)) max(var(--cloud-card-inset), env(safe-area-inset-right, 0px))
+      var(--cloud-card-inset) 0;
   }
   .cloud-app-canvas[data-layout-authenticated] > .layout-rail {
-    width: calc(3rem + env(safe-area-inset-left, 0px));
-    margin-inline-start: 0;
-    padding: env(safe-area-inset-top, 0px) 0 calc(var(--ui-space-shell) + env(safe-area-inset-bottom, 0px))
-      env(safe-area-inset-left, 0px);
+    padding-bottom: var(--cloud-card-inset-bottom);
   }
   .cloud-app-canvas[data-layout-authenticated] > .layout-shell-content {
-    gap: 0;
-    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 0;
-    background: var(--k2b-surface);
+    gap: var(--cloud-card-inset);
   }
-  /* A regular page scrolls `main`, so its end clears the home indicator. A
-     workspace reaches the bottom edge and clears it inside its own surfaces. */
   .cloud-app-canvas[data-layout-authenticated] .layout-content-main:not(:has(.k2b-app-workspace)) {
-    padding-bottom: env(safe-area-inset-bottom, 0px);
+    padding-bottom: var(--cloud-card-inset-bottom);
   }
   .cloud-app-canvas[data-layout-authenticated] .layout-content-main .k2b-app-workspace:not(.k2b-app-workspace *) {
-    --k2b-workspace-radius: 0px;
-    --k2b-workspace-inset-bottom: env(safe-area-inset-bottom, 0px);
-    border: 0;
-    box-shadow: none;
+    --k2b-workspace-radius: var(--cloud-card-radius);
+    --k2b-workspace-inset-bottom: var(--cloud-card-inset-bottom);
+  }
+}
+
+/* Focus: the app bar and the outermost workspace's navigation hide together
+   (Cmd/Ctrl+\ or the sidebar buttons). The canvas carries the state from the
+   `cloud_shell_focus` cookie, so the server renders the same first frame.
+   Phones ignore it. The app area takes the app bar's place and starts at the
+   card spacing, or at the window's edge where it is flush. The button that
+   shows them again floats at the app area's bottom start corner; on touch
+   screens a drag from the 18 px strip at the left edge does the same. From
+   768 to 1023 px the navigation is already an overlay behind the
+   workspace head's button, so there only the app bar hides. */
+.cloud-shell-show,
+.cloud-shell-reveal {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .cloud-app-canvas[data-layout-authenticated][data-shell-focus] > .layout-rail {
+    display: none;
+  }
+  .cloud-app-canvas[data-layout-authenticated][data-shell-focus] .cloud-shell-show {
+    position: absolute;
+    left: calc(env(safe-area-inset-left, 0px) + 0.75rem);
+    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
+    z-index: 15;
+    display: flex;
+  }
+  .cloud-app-canvas[data-layout-authenticated][data-shell-focus] .cloud-shell-show .k2b-icon-button {
+    box-shadow: var(--k2b-shadow-float);
+  }
+}
+
+@media (min-width: 768px) and (pointer: coarse) {
+  .cloud-app-canvas[data-layout-authenticated][data-shell-focus] > .cloud-shell-reveal {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 16;
+    display: block;
+    width: calc(1.125rem + env(safe-area-inset-left, 0px));
+    touch-action: pan-y;
+  }
+}
+
+@media (min-width: 768px) {
+  @media not all and (min-width: 1024px) {
+    .cloud-app-canvas[data-layout-authenticated][data-shell-focus] > .layout-shell-content {
+      padding-left: env(safe-area-inset-left, 0px);
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .cloud-app-canvas[data-layout-authenticated][data-shell-focus] {
+    padding-left: max(var(--cloud-card-inset), env(safe-area-inset-left, 0px));
+  }
+  .cloud-app-canvas[data-layout-authenticated][data-shell-focus] .cloud-shell-show {
+    left: calc(max(var(--cloud-card-inset), env(safe-area-inset-left, 0px)) + 0.75rem);
+    bottom: calc(var(--cloud-card-inset) + var(--cloud-card-inset-bottom) + 0.75rem);
+  }
+  /* 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. */
+  .cloud-app-canvas[data-shell-focus] .k2b-app-workspace:not(.k2b-app-workspace *) {
+    --k2b-workspace-start-radius: var(--k2b-workspace-inner-radius);
   }
-  .cloud-app-canvas[data-layout-authenticated] > .layout-shell-content > :not(.layout-content-main) .k2b-notice-card {
-    border: 0;
-    border-radius: 0;
+  .cloud-app-canvas[data-shell-focus]
+    .k2b-app-workspace:not(.k2b-app-workspace *)
+    > :is(.k2b-app-workspace__sidebar, .k2b-app-workspace__resize[data-app-workspace-resize="sidebar"]),
+  .cloud-app-canvas[data-shell-focus]
+    .k2b-app-workspace:not(.k2b-app-workspace *)
+    > :is(solid-island, solid-client)
+    > :is(.k2b-app-workspace__sidebar, .k2b-app-workspace__resize[data-app-workspace-resize="sidebar"]),
+  .cloud-app-canvas[data-shell-focus]
+    .k2b-app-workspace:not(.k2b-app-workspace *)
+    > .k2b-app-workspace__content
+    > .k2b-app-workspace__main
+    > :is(
+      .k2b-app-workspace__main-pane[data-surface="navigation"]:not(.is-primary),
+      .k2b-app-workspace__main-pane[data-surface="navigation"]:not(.is-primary) + .k2b-app-workspace__resize,
+      .k2b-app-workspace__resize:has(+ .k2b-app-workspace__main-pane[data-surface="navigation"]:not(.is-primary))
+    ),
+  .cloud-app-canvas[data-shell-focus]
+    .k2b-app-workspace:not(.k2b-app-workspace *)
+    > .k2b-app-workspace__content
+    > :is(solid-island, solid-client)
+    > .k2b-app-workspace__main
+    > :is(
+      .k2b-app-workspace__main-pane[data-surface="navigation"]:not(.is-primary),
+      .k2b-app-workspace__main-pane[data-surface="navigation"]:not(.is-primary) + .k2b-app-workspace__resize,
+      .k2b-app-workspace__resize:has(+ .k2b-app-workspace__main-pane[data-surface="navigation"]:not(.is-primary))
+    ) {
+    display: none;
   }
 }
 

package/src/styles/utilities-navigation.css

@@ -750,10 +750,12 @@
   @apply text-[0.6875rem] font-medium normal-case tracking-normal mb-5 text-dimmed select-none;
 }
 
+/* A rail control: a 44 px target in the 56 px rail. Its icon is 20 px
+   (`text-xl` on the icon). */
 @utility rail-item {
   border-right: 0;
   border-radius: var(--ui-radius-surface);
-  @apply w-8 h-8;
+  @apply w-11 h-11;
   @apply flex items-center justify-center text-dimmed;
   @apply transition-[background-color,color] duration-150 ease-out;
 
@@ -795,6 +797,12 @@
   pointer-events: none;
 }
 
+/* On the corner of the rail icon, not of its 44 px target. */
+.rail-item > .cloud-app-badge {
+  top: 0.25rem;
+  right: 0.1875rem;
+}
+
 .app-icon > .cloud-app-badge {
   top: -0.375rem;
   right: -0.375rem;
@@ -841,8 +849,8 @@
 .layout-profile-preferences__link,
 .layout-profile-preferences__dropdown-trigger {
   display: none;
-  width: 2rem;
-  height: 2rem;
+  width: 2.75rem;
+  height: 2.75rem;
   align-items: center;
   justify-content: center;
   padding: 0;