@k2b/cloud 0.30.0 → 0.31.0

package/src/styles/global.css

@@ -281,8 +281,12 @@ solid-island {
   }
 }
 
-/* Cloud has exactly two shell modes: mobile below lg, desktop from lg. */
-@media (max-width: 1023px) {
+/* 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) {
   .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);
   }
@@ -309,6 +313,35 @@ 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. */
+@media (min-width: 768px) and (max-width: 1535px) {
+  .cloud-app-canvas[data-layout-authenticated] {
+    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);
+  }
+  .cloud-app-canvas[data-layout-authenticated] > .layout-rail {
+    width: 3rem;
+    margin-inline-start: 0;
+    padding-bottom: var(--ui-space-shell);
+  }
+  .cloud-app-canvas[data-layout-authenticated] > .layout-shell-content {
+    gap: 0;
+    background: var(--k2b-surface);
+  }
+  .cloud-app-canvas[data-layout-authenticated] .layout-content-main .k2b-app-workspace:not(.k2b-app-workspace *) {
+    border: 0;
+    border-radius: 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;
+  }
+}
+
 .cloud-mobile-menu .k2b-panel-dialog__header {
   gap: .5rem;
   padding-inline: 1rem;

package/src/styles/utilities-layout.css

@@ -238,7 +238,7 @@
 }
 
 /* Shared shell frame and overview composition. */
-@media (min-width: 1024px) {
+@media (min-width: 768px) {
   .cloud-app-canvas .layout-header {
     padding: 0.375rem 0.75rem 0.375rem 1.125rem;
     border-color: transparent;
@@ -601,3 +601,26 @@
 .dark .panel-dialog-tabs > button[aria-pressed="true"] {
   color: var(--color-zinc-50);
 }
+
+/* The shell's row for the way up on pages without a workspace: the page title
+   with "‹ Parent" or the path above it, 46 px high like a workspace head and
+   without a line under it. It shows only on a page with a page above it; a
+   workspace's head or the page's own `PageTrail` takes its place. */
+.layout-page-head {
+  display: none;
+  min-height: 2.875rem;
+  flex: none;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+}
+
+.layout-shell-content:not(:has(.layout-content-main .k2b-app-workspace, .k2b-page-title:not([data-fallback]))) .layout-page-head[data-trail="up"] {
+  display: flex;
+}
+
+/* After going up, the row that led down to where the person came from stays
+   marked, with the hover tint and nothing that moves. */
+[data-page-trail-recent],
+[data-page-trail-recent] > :is(td, th) {
+  background-color: var(--ui-hover);
+}

package/src/styles/utilities-navigation.css

@@ -829,18 +829,15 @@
 }
 
 /* Profile preferences stay Cloud-owned because their placement follows the
-   global shell. Width, height, and pointer media queries select an already
-   server-rendered variant; no client layout state or placeholder is needed. */
+   global shell: the avatar is the last control of the rail. Pointer media
+   queries select an already server-rendered variant; no client layout state
+   or placeholder is needed. */
 .layout-profile-preferences {
   position: relative;
   display: inline-flex;
   flex: none;
 }
 
-.layout-profile-preferences[data-placement="rail"] {
-  display: none;
-}
-
 .layout-profile-preferences__link,
 .layout-profile-preferences__dropdown-trigger {
   display: none;
@@ -868,9 +865,12 @@
   box-shadow: var(--ui-focus);
 }
 
+/* Beside the rail, growing upward from the avatar. */
 .layout-profile-preferences__panel {
   position: absolute;
   z-index: 100;
+  bottom: 0;
+  left: 100%;
   display: none;
   width: min(14rem, calc(100vw - 1rem));
   flex-direction: column;
@@ -887,16 +887,6 @@
   color: var(--color-zinc-300);
 }
 
-.layout-profile-preferences[data-placement="header"] .layout-profile-preferences__panel {
-  top: 100%;
-  right: 0;
-}
-
-.layout-profile-preferences[data-placement="rail"] .layout-profile-preferences__panel {
-  bottom: 0;
-  left: 100%;
-}
-
 .layout-profile-preferences:focus-within .layout-profile-preferences__panel {
   opacity: 1;
   visibility: visible;
@@ -923,9 +913,7 @@
     visibility: visible;
     pointer-events: auto;
   }
-}
 
-@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
   .layout-profile-preferences__link,
   .layout-profile-preferences__panel {
     display: flex;