@k2b/cloud 0.38.0 → 0.40.0

package/src/styles/effects.css

@@ -104,6 +104,12 @@
   border-radius: var(--k2b-radius-control);
 }
 
+/* An open question stands apart from the place before and after it; consecutive outcome lines stay together. */
+.k2b-ui .ai-turn__action:has(.k2b-chat-decision__card) + .ai-turn__action,
+.k2b-ui .ai-turn__action + .ai-turn__action:has(.k2b-chat-decision__card) {
+  margin-top: 1rem;
+}
+
 .k2b-ui .ai-turn__action:focus {
   outline: none;
 }
@@ -113,6 +119,60 @@
   outline-offset: var(--k2b-focus-offset);
 }
 
+/* Assistant questions and outcome lines (card v4), built from @k2b/ui Chat.Decision, Chat.Preview, and Chat.Outcome.
+   Only what an older review needs lives here: values that keep their line breaks, a Markdown block, and the call's
+   raw input on demand. Everything else is the shared primitives' look. */
+.k2b-ui .cloud-action-preview__value {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .cloud-action-preview__markdown {
+  min-width: 0;
+  color: var(--k2b-text-secondary);
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.k2b-ui .cloud-action-preview__input {
+  display: grid;
+  min-width: 0;
+  justify-items: start;
+  gap: 0.5rem;
+}
+
+.k2b-ui .cloud-action-preview__input > [role="region"] {
+  width: 100%;
+  min-width: 0;
+}
+
+.k2b-ui .cloud-action-preview__raw {
+  max-height: 13rem;
+  margin: 0;
+  overflow: auto;
+  border-radius: var(--k2b-radius-control);
+  padding: 0.5rem;
+  color: var(--k2b-text);
+  background: var(--k2b-surface-muted);
+  box-shadow: var(--ui-control-recess);
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  white-space: pre-wrap;
+}
+
+/* The review's other links continue the preview above them instead of starting a new block. */
+.k2b-ui .k2b-chat-decision__card > .k2b-chat-preview + .cloud-action-preview__links {
+  margin-top: 0.25rem;
+}
+
+/* The approvals page: where a request waits stands above its card, quiet, on the card's edge. */
+.k2b-ui .cloud-approvals .cloud-approval {
+  display: grid;
+  min-width: 0;
+  gap: 0.25rem;
+  grid-template-columns: minmax(0, 1fr);
+}
+
 /* A pending approval: a calm tinted card in place 4 that says what will happen. Fields stack on phones and the
    decision buttons share the width there. */
 .k2b-ui .ai-approval {
@@ -341,10 +401,6 @@
 /* App help is a reader, not a generic Markdown preview. Keep the measure,
    hierarchy, and rhythm close to the task-first Help wireframe while reusing
    the same safe server-rendered Markdown pipeline as the rest of Cloud. */
-.help-topic-icon {
-  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 10%, var(--ui-surface-muted));
-}
-
 /* Help shell: one head (app tile, "Help for <App>", the menu, and the search) above the start, an article, or
    results. The head never changes size between them, so the search stays in one place. The start and the head share
    the article's measure: wide, the article and its contents; narrower, the article column alone. */
@@ -371,6 +427,7 @@
 
 /* Above a scroll area the head keeps the same scrollbar gutter, so both centre their measure alike. */
 .help-shell[data-surface="modal"] .help-head,
+.help-shell[data-surface="panel"] .help-head,
 .help-shell[data-surface="embedded"] .help-head {
   overflow: hidden;
   padding-bottom: 0.25rem;
@@ -384,6 +441,29 @@
   }
 }
 
+/* Help without a panel slot on a phone: the shared bottom sheet at its full height, with its grabber (#858). */
+.k2b-ui .k2b-dialog.cloud-help-sheet {
+  height: min(92dvh, var(--k2b-dialog-available-height));
+}
+
+.cloud-help-sheet .k2b-bottom-sheet-viewport {
+  height: 100%;
+}
+
+.cloud-help-sheet .help-shell[data-surface="modal"] {
+  height: auto;
+  flex: 1 1 auto;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* In the panel the slot's own title row sits right above: the Help head follows it closely. */
+.help-shell[data-surface="panel"] .help-head {
+  padding-top: 0.25rem;
+}
+
 .help-head-inner {
   display: flex;
   flex-direction: column;
@@ -549,7 +629,7 @@
 }
 
 .help-start-tile:hover {
-  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 6%, var(--ui-surface-subtle));
+  background: var(--ui-surface-muted);
 }
 
 .help-start-tile-icon,
@@ -559,8 +639,6 @@
   height: 2.25rem;
   flex: 0 0 auto;
   place-items: center;
-  border-radius: var(--ui-radius-control);
-  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 14%, var(--ui-surface-muted));
   font-size: 1.125rem;
 }
 
@@ -568,6 +646,32 @@
   margin-bottom: 0.5rem;
 }
 
+/* A narrow reader, such as the panel column at 20-23 rem, has no room for two tiles side by side: each task keeps
+   its tile, one per row, with the icon beside its title. */
+@container help-shell (max-width: 23rem) {
+  .help-start-tiles {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .help-start-tile {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: 0.75rem;
+    row-gap: 0.125rem;
+    align-items: start;
+    padding: 0.75rem;
+  }
+
+  .help-start-tile-icon {
+    grid-row: span 2;
+    margin-bottom: 0;
+  }
+
+  .help-start-tile-description {
+    -webkit-line-clamp: 2;
+  }
+}
+
 .help-start-tile-title {
   max-width: 100%;
   color: var(--color-zinc-950);
@@ -750,12 +854,56 @@
   padding-top: 0.25rem;
 }
 
+/* The article head names the app whose Help this is: the app's own canvas gradient (the same tokens and strength as
+   the app background, over the reader's surface), without a border or a shadow, and the article's icon in the flat
+   shared tile. Without app colours it stays the plain surface. The embedded readers (Grids, Pulse) sit inside the
+   app's own chrome, which already names the app: their head stays flat. Text sits on this gradient, so its tint stays at
+   most 30 % light and 15 % dark, as on the phone shell: then the title and the lead read at 4.5:1 on any app colour. */
 .help-article-head {
+  margin-bottom: 2rem;
+}
+
+.help-article:not([data-surface="embedded"]) .help-article-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1.5rem;
+  border-radius: var(--ui-radius-surface);
+  padding: 1.5rem;
+  background: linear-gradient(
+    var(--app-canvas-angle, 135deg),
+    color-mix(in srgb, var(--app-canvas-from, var(--k2b-surface)) min(var(--app-canvas-strength, 0%), 30%), var(--k2b-surface)),
+    color-mix(in srgb, var(--app-canvas-via, var(--k2b-surface)) min(var(--app-canvas-strength, 0%), 30%), var(--k2b-surface)) 50%,
+    color-mix(in srgb, var(--app-canvas-to, var(--k2b-surface)) min(var(--app-canvas-strength, 0%), 30%), var(--k2b-surface))
+  );
+}
+
+.dark .help-article:not([data-surface="embedded"]) .help-article-head {
+  background: linear-gradient(
+    var(--app-canvas-angle, 135deg),
+    color-mix(in srgb, var(--app-canvas-from, var(--k2b-surface)) min(var(--app-canvas-dark-strength, 0%), 15%), var(--k2b-surface)),
+    var(--k2b-surface) 50%,
+    color-mix(in srgb, var(--app-canvas-to, var(--k2b-surface)) min(var(--app-canvas-dark-strength, 0%), 15%), var(--k2b-surface))
+  );
+}
+
+.help-article-head-copy {
   display: flex;
+  min-width: 0;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.75rem;
-  margin-bottom: 2rem;
+}
+
+.help-article-icon {
+  width: 4.5rem;
+  height: 4.5rem;
+  font-size: 2.25rem;
+}
+
+/* Over the gradient the chips keep their own quiet fill, so they read as facts and not as part of the colour. */
+.help-article:not([data-surface="embedded"]) .help-article-head .help-article-fact {
+  background: color-mix(in srgb, var(--k2b-surface) 72%, transparent);
 }
 
 .help-article-path {
@@ -880,14 +1028,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 {
@@ -1103,7 +1252,7 @@
 }
 
 .help-document :where(ul > li)::marker {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 75%, var(--color-zinc-400));
+  color: var(--ui-text-secondary);
 }
 
 .help-document :where(ol > li)::marker {
@@ -1459,11 +1608,52 @@
   }
 }
 
+/* Narrow: the tile stands before the title, and the path, the short answer, and the chips use the full width. */
 @container help-article (max-width: 40rem) {
   .help-article-head {
     margin-bottom: 1.5rem;
   }
 
+  .help-article:not([data-surface="embedded"]) .help-article-head {
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: 0.75rem;
+    row-gap: 0;
+    padding: 1.25rem 1rem;
+  }
+
+  .help-article:not([data-surface="embedded"]) .help-article-head-copy {
+    display: contents;
+  }
+
+  .help-article:not([data-surface="embedded"]) .help-article-path {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    margin-bottom: 0.75rem;
+  }
+
+  .help-article-icon {
+    grid-column: 1;
+    grid-row: 2;
+    width: 2.75rem;
+    height: 2.75rem;
+    font-size: 1.375rem;
+  }
+
+  .help-article:not([data-surface="embedded"]) .help-article-title {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  .help-article:not([data-surface="embedded"]) .help-article-head-copy > :not(.help-article-path, .help-article-title) {
+    grid-column: 1 / -1;
+    margin-top: 0.75rem;
+  }
+
+  /* The panel article has no path row (the panel head names the app), so the tile and the title open the head. */
+  .help-article[data-surface="panel"] :is(.help-article-icon, .help-article-title) {
+    grid-row: 1;
+  }
+
   /* Two columns leave a phone about 140 px per alternative. */
   .help-document .help-compare > ul {
     grid-template-columns: minmax(0, 1fr);

package/src/styles/file-chooser.css

@@ -68,8 +68,9 @@
   color: var(--k2b-text-secondary);
 }
 
+/* A picked file is an object row: its check carries the app ink. */
 .cloud-file-chooser__icon[data-selected="true"] {
-  color: var(--k2b-action);
+  color: var(--ui-app-accent-text);
 }
 
 .cloud-file-chooser__meta {