@k2b/cloud 0.38.0 → 0.39.0

package/src/ssr/shell-shortcuts.ts

@@ -1,8 +1,19 @@
 import type { platformMessages } from "./platform-messages";
 
-export const SHELL_SHORTCUT_ORDER = ["cloud.search", "cloud.help"] as const;
+export const SHELL_SHORTCUT_ORDER = ["cloud.search", "cloud.help", "cloud.panel"] as const;
 /** The shell's always-present shortcuts, without their actions; ShellRuntime adds the actions, Help renders them before the browser reports commands. */
-export const shellShortcuts = (t: ReturnType<typeof platformMessages.resolve>["t"]) => [
+export const shellShortcuts = (t: ReturnType<typeof platformMessages.resolve>["t"], options: { panel?: boolean } = {}) => [
   { id: "cloud.search", title: t.openGlobalSearch, description: t.globalSearchDescription, icon: "ti ti-search", shortcut: "mod+k" },
   { id: "cloud.help", title: t.openShortcutHelp, description: t.shortcutHelpDescription, icon: "ti ti-help-circle", shortcut: "shift+/" },
+  ...(options.panel
+    ? [
+        {
+          id: "cloud.panel",
+          title: t.togglePanel,
+          description: t.togglePanelDescription,
+          icon: "ti ti-layout-sidebar-right",
+          shortcut: "mod+j",
+        },
+      ]
+    : []),
 ];

package/src/styles/effects.css

@@ -880,14 +880,15 @@
   flex-direction: column;
   gap: 0.5rem;
   border-radius: var(--ui-radius-surface);
-  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 9%, var(--ui-surface-subtle));
+  /* Both fills are computed with the app ink, so its label stays at AA. */
+  background: var(--ui-app-selected);
   padding: 1.25rem 1.25rem 1.375rem;
   text-decoration: none;
   transition: background-color 140ms ease;
 }
 
 .help-article-next:hover {
-  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 15%, var(--ui-surface-subtle));
+  background: var(--ui-app-selected-nav);
 }
 
 .help-article-next-label {

package/src/styles/global.css

@@ -32,6 +32,7 @@
 @import "./input.css";
 @import "./resource-search.css";
 @import "./file-chooser.css";
+@import "./panel.css";
 
 @theme {
   --color-dark: rgb(9 9 11);
@@ -52,17 +53,19 @@
 }
 
 .cloud-app-canvas {
+  --cloud-canvas-strength: var(--app-canvas-strength, 0%);
+  --cloud-canvas-dark-strength: var(--app-canvas-dark-strength, 0%);
   padding: var(--ui-space-shell);
   background: linear-gradient(
     var(--app-canvas-angle, 135deg),
-    color-mix(in srgb, var(--app-canvas-from, var(--color-zinc-50)) var(--app-canvas-strength, 0%), var(--color-zinc-50)),
+    color-mix(in srgb, var(--app-canvas-from, var(--color-zinc-50)) var(--cloud-canvas-strength), var(--color-zinc-50)),
     color-mix(
         in srgb,
-        var(--app-canvas-via, var(--app-canvas-from, var(--color-zinc-50))) var(--app-canvas-strength, 0%),
+        var(--app-canvas-via, var(--app-canvas-from, var(--color-zinc-50))) var(--cloud-canvas-strength),
         var(--color-zinc-50)
       )
       50%,
-    color-mix(in srgb, var(--app-canvas-to, var(--color-zinc-50)) var(--app-canvas-strength, 0%), var(--color-zinc-50))
+    color-mix(in srgb, var(--app-canvas-to, var(--color-zinc-50)) var(--cloud-canvas-strength), var(--color-zinc-50))
   );
 }
 
@@ -88,12 +91,46 @@ html:has(.cloud-app-canvas[data-layout-full-page="true"]) {
 .dark .cloud-app-canvas {
   background: linear-gradient(
     var(--app-canvas-angle, 135deg),
-    color-mix(in srgb, var(--app-canvas-from, var(--ui-canvas)) var(--app-canvas-dark-strength, 0%), var(--ui-canvas)),
-    color-mix(in srgb, var(--app-canvas-via-dark, var(--ui-canvas)) var(--app-canvas-dark-strength, 0%), var(--ui-canvas)) 50%,
-    color-mix(in srgb, var(--app-canvas-to, var(--ui-canvas)) var(--app-canvas-dark-strength, 0%), var(--ui-canvas))
+    color-mix(in srgb, var(--app-canvas-from, var(--ui-canvas)) var(--cloud-canvas-dark-strength), var(--ui-canvas)),
+    color-mix(in srgb, var(--app-canvas-via-dark, var(--ui-canvas)) var(--cloud-canvas-dark-strength), var(--ui-canvas)) 50%,
+    color-mix(in srgb, var(--app-canvas-to, var(--ui-canvas)) var(--cloud-canvas-dark-strength), var(--ui-canvas))
   );
 }
 
+/* The shell's own colored surfaces, the tablet rail's container and the
+   phone's bottom bar, carry the app color alone in a narrow shape. A white
+   middle, the canvas's default `via`, would make their edge vanish halfway,
+   so they mix the middle from the app's two colors and take a stronger tint:
+   34 % light and 22 % dark, with a 16 % and 12 % middle. A page without an app
+   color gets a neutral tint. The app declaration stays the same. */
+.cloud-app-canvas {
+  --cloud-shell-strength: 34%;
+  --cloud-shell-via-strength: 16%;
+  --cloud-shell-gradient: linear-gradient(
+    160deg,
+    color-mix(in srgb, var(--app-canvas-from, var(--color-zinc-400)) var(--cloud-shell-strength), var(--ui-canvas)),
+    color-mix(
+        in srgb,
+        color-mix(in srgb, var(--app-canvas-from, var(--color-zinc-400)) 45%, var(--app-canvas-to, var(--color-zinc-400)))
+          var(--cloud-shell-via-strength),
+        var(--ui-canvas)
+      )
+      55%,
+    color-mix(in srgb, var(--app-canvas-to, var(--color-zinc-400)) var(--cloud-shell-strength), var(--ui-canvas))
+  );
+  /* On color the open item is the surface; on the surface it is tinted. Its
+     label is the app ink, which app-color.ts keeps at AA on the surface and on
+     the app's selection fills. */
+  --cloud-shell-selected: var(--k2b-surface);
+  --cloud-shell-selected-text: var(--ui-app-accent-text);
+}
+
+.dark .cloud-app-canvas {
+  --cloud-shell-strength: 22%;
+  --cloud-shell-via-strength: 12%;
+  --cloud-shell-selected: var(--ui-app-selected-nav);
+}
+
 :root {
   color-scheme: light;
 }
@@ -243,6 +280,21 @@ body {
   color: rgb(244 244 245); /* zinc-100 */
 }
 
+/* The root paints the screen's page color as well. @k2b/ui makes it the
+   default `k2b-app-area` container, and containment stops a body background
+   from reaching the canvas that overscroll and short pages show. Zero
+   specificity, so the PWA canvas style and syncThemeColor still win; screen
+   only, so paper stays white. */
+@media screen {
+  :where(html) {
+    background-color: rgb(250 250 250); /* zinc-50 */
+  }
+
+  :where(html.dark) {
+    background-color: rgb(9 9 11); /* zinc-950 */
+  }
+}
+
 /* Pages of the mobile app paint the shell canvas, which their theme-color and
    html background repeat for the status bar. */
 html:has(.k2b-mobile-shell) body {
@@ -295,31 +347,37 @@ solid-island {
 
 /* Cloud has three shell modes. Phones, below md, get the header and no rail.
    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. */
+   1023 px the rail sits in a rounded container beside the app as a rounded
+   card, and from 1024 px the app 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);
   }
-  /* The flat surface replaces the app gradient in both themes. The dark
-     selector matches the specificity of the dark gradient above. */
-  .cloud-app-canvas,
-  .dark .cloud-app-canvas {
+  /* Anonymous pages: the flat surface replaces the app gradient in both
+     themes, and the document is the page scroller. The dark selector matches
+     the specificity of the dark gradient above. */
+  .cloud-app-canvas:not([data-layout-authenticated]),
+  .dark .cloud-app-canvas:not([data-layout-authenticated]) {
     background: var(--ui-surface);
   }
-  /* Below lg the document is the page scroller; reserve its scrollbar gutter
-     so short and long pages keep the same width. Full-page surfaces own their
-     inner scrolling. */
-  html:has(.cloud-app-canvas:not([data-layout-full-page])) { scrollbar-gutter: stable; }
+  /* Reserve the page scroller's gutter so short and long pages keep the same
+     width: the document's, or the card's for signed-in people. Full-page
+     surfaces, workspaces, and scroll areas own their inner scrolling, so the
+     card reserves no second gutter beside theirs. */
+  html:has(.cloud-app-canvas:not([data-layout-full-page], [data-layout-authenticated])) { scrollbar-gutter: stable; }
+  .cloud-app-canvas[data-layout-authenticated]:not([data-layout-full-page])
+    .layout-content-main:not(:has(> .k2b-scroll-area, > .k2b-app-workspace, > :is(solid-island, solid-client) > .k2b-app-workspace)) {
+    scrollbar-gutter: stable;
+  }
   /* A page that scrolls its content in a ScrollArea grows with it here, so
      the area does not scroll and reserves no second gutter beside the
      document's. From md, `main` bounds its height and it scrolls. */
-  .cloud-app-canvas:not([data-layout-full-page]) .layout-content-main > .k2b-scroll-area { scrollbar-gutter: auto; }
+  .cloud-app-canvas:not([data-layout-full-page], [data-layout-authenticated]) .layout-content-main > .k2b-scroll-area { scrollbar-gutter: auto; }
   .cloud-app-canvas > .layout-shell-content { gap: 0; }
-  .cloud-app-canvas .layout-header {
+  .cloud-app-canvas:not([data-layout-authenticated]) .layout-header {
     border-radius: 0; border: 0; border-bottom: 1px solid var(--ui-border);
     box-shadow: none !important;
   }
@@ -329,6 +387,145 @@ solid-island {
     --k2b-toast-offset-top: 2.875rem;
   }
 
+  /* Signed-in phones: the app gradient is the page. The title row sits on it
+     without a line, and the content is one soft card with 28 px top corners
+     that scrolls itself, so its rounded edge stays while it scrolls. The bar
+     with the person's apps floats over the card's end; the card keeps that
+     space free at its end and in its scroll padding, so the bar never covers
+     the last row or a focused control. The window never scrolls. */
+  .cloud-app-canvas[data-layout-authenticated] {
+    /* Text sits on the gradient here, so its tint stays at most 30 % light
+       and 15 % dark: then the title and controls read at 4.5:1 on any app
+       color. Built-in apps declare less. */
+    --cloud-canvas-strength: min(var(--app-canvas-strength, 0%), 30%);
+    --cloud-canvas-dark-strength: min(var(--app-canvas-dark-strength, 0%), 15%);
+    height: 100dvh;
+    overflow: hidden;
+    padding-bottom: 0;
+  }
+  .cloud-app-canvas[data-layout-authenticated] .layout-header {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none !important;
+  }
+  .cloud-app-canvas[data-layout-authenticated] .layout-header .font-semibold {
+    font-size: 1.125rem;
+  }
+  /* Content wider than the card scrolls sideways in it, as from md; the
+     rounded corners still clip. */
+  .cloud-app-canvas[data-layout-authenticated] .layout-content-main {
+    overflow: auto;
+    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);
+  }
+  /* Dark: a faint top edge keeps the card apart from the dark gradient. */
+  .dark .cloud-app-canvas[data-layout-authenticated] .layout-content-main {
+    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. */
+.cloud-app-canvas[data-layout-authenticated] {
+  --cloud-tab-bar-height: 3.875rem;
+  --cloud-tab-bar-end: calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
+  --cloud-tab-bar-space: calc(var(--cloud-tab-bar-end) + var(--cloud-tab-bar-height) + 0.75rem);
+}
+
+/* A page whose app has its own navigation (a mailbox, a Space, a book) makes
+   its title the menu "Name ⌄" on phones. It opens the same app menu as the
+   menu button beside it. The navigation's server-rendered snapshot decides,
+   so the first frame already shows the right title. */
+.layout-header-title-menu {
+  display: none;
+  min-width: 0;
+  min-height: 2rem;
+  align-items: center;
+  gap: 0.25rem;
+  margin-inline-start: -0.5rem;
+  padding: 0 0.5rem;
+  border-radius: var(--k2b-radius-control);
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+.layout-header-title-menu:hover {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+.layout-header-title-menu:focus-visible {
+  outline: var(--k2b-focus-width) solid var(--k2b-focus-ring);
+  outline-offset: 1px;
+}
+.layout-header-title-menu > i {
+  flex: none;
+  font-size: 1rem;
+  opacity: 0.7;
+}
+
+@media not all and (min-width: 48rem) {
+  :root:has(script[data-cloud-workspace-navigation]) .layout-header-title {
+    display: none;
+  }
+  :root:has(script[data-cloud-workspace-navigation]) .layout-header-title-menu {
+    display: inline-flex;
+  }
+  .cloud-app-canvas[data-layout-authenticated] .layout-content-main {
+    padding-bottom: var(--cloud-tab-bar-space);
+    scroll-padding-bottom: var(--cloud-tab-bar-space);
+  }
+  .cloud-app-canvas[data-layout-authenticated] > .cloud-tab-bar {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    height: var(--cloud-tab-bar-space);
+    padding: 0 calc(env(safe-area-inset-right, 0px) + 0.75rem) var(--cloud-tab-bar-end) calc(env(safe-area-inset-left, 0px) + 0.75rem);
+    /* Content that scrolls past fades flat into the card above the bar and is
+       gone where the bar begins: no glass, and no text beside or under it. */
+    background: linear-gradient(to bottom, color-mix(in srgb, var(--k2b-surface) 0%, transparent), var(--k2b-surface) 0.75rem);
+    pointer-events: none;
+  }
+}
+
+/* The bar exists only on signed-in phones. Its row keeps the place of the
+   app's primary action free at its end. */
+.cloud-tab-bar {
+  display: none;
+}
+
+.cloud-tab-bar__row {
+  display: flex;
+  width: 100%;
+  max-width: 33.75rem;
+  padding-inline-end: calc(var(--cloud-tab-bar-height) + 0.625rem);
+}
+
+/* The shell's live bar replaces the server's once the bar's content changes
+   in the browser. */
+.cloud-tab-bar__row:has(.cloud-tab-bar__live) > .k2b-tab-bar {
+  display: none;
+}
+
+.cloud-tab-bar__row > div:has(> .cloud-tab-bar__live) {
+  display: contents;
+}
+
+.cloud-tab-bar .k2b-tab-bar {
+  flex: 1;
+  min-width: 0;
+  pointer-events: auto;
+  --k2b-tab-bar-background: var(--cloud-shell-gradient);
+  --k2b-tab-bar-color: var(--k2b-text);
+  --k2b-tab-bar-selected-background: var(--cloud-shell-selected);
+  --k2b-tab-bar-selected-color: var(--cloud-shell-selected-text);
 }
 
 /* Card: the outermost workspace is the app card, so it gets the card's radius
@@ -337,9 +534,7 @@ solid-island {
    child fills `main` and scrolls inside itself, so `main` neither scrolls nor
    clips: it keeps no scrollbar gutter beside the card, the card keeps the
    shell spacing on every side, and its frame shadow shows in that spacing. A
-   workspace nested in other page content leaves `main` the page scroller. For
-   signed-in people, the flush range below removes the frame again; it comes
-   later at equal specificity. */
+   workspace nested in other page content leaves `main` the page scroller. */
 @media (min-width: 768px) {
   .cloud-app-canvas .layout-content-main:has(> .k2b-app-workspace, > :is(solid-island, solid-client) > .k2b-app-workspace) {
     overflow: visible;
@@ -354,42 +549,60 @@ solid-island {
   }
 }
 
-/* Flush: the app area is one opaque surface from the rail to the window's
-   edges, without padding, radius, shadow, or border. The rail keeps the app
-   canvas, so the change of surface alone separates the two; no line does. The
-   outermost workspace and the notices above it lose their frame, so nothing
-   draws a box inside the app area.
-   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. */
+/* Tablet (I5): the rail sits in a rounded container filled with the app
+   color, and the app is a rounded card beside it, both 20 px round with 8 px
+   of neutral canvas on every side. The installed app's safe areas, such as
+   the status bar and the home indicator, add to that spacing, so nothing sits
+   under them. The outermost workspace is the card, as from 1024 px; a page
+   without a workspace shows its content on the canvas. On color the open app
+   is the surface color, and no separator divides the rail. */
 @media (min-width: 768px) {
   @media not all and (min-width: 1024px) {
     .cloud-app-canvas[data-layout-authenticated] {
-      padding: 0;
+      padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) calc(env(safe-area-inset-right, 0px) + 0.5rem)
+        calc(env(safe-area-inset-bottom, 0px) + 0.5rem) calc(env(safe-area-inset-left, 0px) + 0.5rem);
+      background: var(--ui-canvas);
     }
     .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));
+      width: 3.75rem;
+      margin-inline-end: 0.5rem;
+      padding: 0 0 0.5rem;
+      border-radius: 1.25rem;
+      background-image: var(--cloud-shell-gradient) !important;
     }
-    .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);
+    .dark .cloud-app-canvas[data-layout-authenticated] > .layout-rail {
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent, var(--k2b-border)) 22%, var(--k2b-border));
     }
-    /* 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-rail .rail-item {
+      color: var(--k2b-text-secondary);
     }
-    .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-rail .rail-item:hover {
+      background: color-mix(in srgb, var(--k2b-surface) 45%, transparent);
+    }
+    .cloud-app-canvas[data-layout-authenticated] > .layout-rail .rail-item-active {
+      box-shadow: 0 1px 2px rgb(9 9 11 / 0.06);
+    }
+    .cloud-app-canvas[data-layout-authenticated] > .layout-rail .rail-item-active,
+    .cloud-app-canvas[data-layout-authenticated] > .layout-rail .rail-item-active:hover {
+      border-color: transparent;
+      background: var(--cloud-shell-selected);
+      color: var(--cloud-shell-selected-text);
+    }
+    .cloud-app-canvas[data-layout-authenticated] > .layout-rail [role="separator"] {
+      display: none;
     }
-    .cloud-app-canvas[data-layout-authenticated] > .layout-shell-content > :not(.layout-content-main) .k2b-notice-card {
-      border: 0;
-      border-radius: 0;
+    /* The apps scroll in their own area; room above and below the first and
+       last app keeps a focus ring whole, also WebKit's wider one, without
+       moving an app. */
+    .cloud-app-canvas[data-layout-authenticated] > .layout-rail [data-cloud-rail-apps] {
+      margin-block: -0.375rem;
+      padding-block: 0.375rem;
+    }
+    .cloud-app-canvas[data-layout-authenticated] > .layout-shell-content {
+      gap: 0.5rem;
+    }
+    .cloud-app-canvas[data-layout-authenticated] .layout-content-main .k2b-app-workspace:not(.k2b-app-workspace *) {
+      --k2b-workspace-radius: 1.25rem;
     }
   }
 }
@@ -401,7 +614,7 @@ solid-island {
    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. */
+   home indicator. */
 @media (min-width: 1024px) {
   .cloud-app-canvas[data-layout-authenticated] {
     --cloud-card-inset: round(clamp(0.25rem, calc(0.25rem + (100vw - 64rem) / 104), 0.5rem), 1px);
@@ -429,7 +642,7 @@ solid-island {
    (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
+   card spacing. 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
@@ -470,8 +683,9 @@ solid-island {
 
 @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);
+    .cloud-app-canvas[data-layout-authenticated][data-shell-focus] .cloud-shell-show {
+      left: calc(env(safe-area-inset-left, 0px) + 1.25rem);
+      bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
     }
   }
 }