@k2b/cloud 0.30.0 → 0.32.0

package/src/styles/approvals.css

@@ -0,0 +1,390 @@
+/* Pending Action approvals (`@k2b/cloud/approvals/ui`). A flat list: rows are set apart by space, not by lines or
+   boxes. A decided row keeps its content and height and turns its decision into a receipt in the same slot. */
+.k2b-ui .cloud-approvals {
+  display: grid;
+  min-width: 0;
+  gap: 1rem;
+}
+
+.k2b-ui .cloud-approvals__toolbar {
+  display: flex;
+  min-height: 1.75rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+}
+
+.k2b-ui .cloud-approvals__list {
+  display: grid;
+  min-width: 0;
+  gap: 2rem;
+}
+
+.k2b-ui .cloud-approvals__group {
+  display: grid;
+  min-width: 0;
+  gap: 1rem;
+}
+
+.k2b-ui .cloud-approvals__group + .cloud-approvals__group {
+  margin-top: 1rem;
+}
+
+.k2b-ui .cloud-approvals__group-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  color: var(--k2b-text);
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.k2b-ui .cloud-approvals__more {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem 0.75rem;
+}
+
+.k2b-ui .cloud-approvals__more-error {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  color: var(--k2b-danger-text);
+  font-size: 0.75rem;
+}
+
+.k2b-ui .cloud-approvals__elsewhere {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem 1rem;
+  margin: 0.5rem 0 0;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+}
+
+.k2b-ui .cloud-approvals__elsewhere a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--k2b-link-accent);
+  font-weight: 500;
+}
+
+.k2b-ui .cloud-approval {
+  display: grid;
+  min-width: 0;
+  gap: 0.875rem;
+  grid-template-columns: 2rem minmax(0, 1fr);
+}
+
+.k2b-ui .cloud-approval__icon {
+  display: grid;
+  width: 2rem;
+  height: 2rem;
+  place-items: center;
+  border-radius: var(--k2b-radius-control);
+  color: var(--k2b-text-secondary);
+  background: var(--k2b-surface-muted);
+  font-size: 1rem;
+}
+
+/* Only an approval is a success; a rejection or a decision that did not apply keeps the neutral icon tile. */
+.k2b-ui .cloud-approval[data-decided="approved"] .cloud-approval__icon {
+  color: var(--k2b-success-text);
+  background: var(--k2b-success-surface);
+}
+
+.k2b-ui .cloud-approval__main {
+  display: grid;
+  min-width: 0;
+  gap: 0.75rem;
+  container-type: inline-size;
+}
+
+.k2b-ui .cloud-approval__content {
+  display: grid;
+  min-width: 0;
+  gap: 0.5rem;
+  transition: opacity 150ms ease-out;
+}
+
+.k2b-ui .cloud-approval[data-decided] .cloud-approval__content {
+  opacity: 0.55;
+}
+
+.k2b-ui .cloud-approval__title,
+.k2b-ui .cloud-approval__sheet-title {
+  margin: 0;
+  color: var(--k2b-text);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .cloud-approval__sheet-title {
+  font-size: 1.0625rem;
+}
+
+.k2b-ui .cloud-approval__origin {
+  margin: -0.25rem 0 0;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .cloud-approval__origin a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
+  text-underline-offset: 0.15em;
+}
+
+.k2b-ui .cloud-approval__origin a:hover {
+  color: var(--k2b-text);
+}
+
+.k2b-ui .cloud-approval__text {
+  margin: 0;
+  color: var(--k2b-text-secondary);
+  font-size: 0.8125rem;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .cloud-approval__fields {
+  display: grid;
+  margin: 0;
+  gap: 0.25rem 1rem;
+  grid-template-columns: max-content minmax(0, 1fr);
+  font-size: 0.75rem;
+}
+
+.k2b-ui .cloud-approval__fields dt,
+.k2b-ui .cloud-approval__label {
+  margin: 0;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.k2b-ui .cloud-approval__fields dd {
+  min-width: 0;
+  margin: 0;
+  color: var(--k2b-text);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .cloud-approval__block {
+  display: grid;
+  min-width: 0;
+  gap: 0.25rem;
+}
+
+/* Long content sits inset, so it reads as quoted from the app without a frame or a rule. */
+.k2b-ui .cloud-approval__quote,
+.k2b-ui .cloud-approval__markdown {
+  margin: 0;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--k2b-radius-control);
+  color: var(--k2b-text-secondary);
+  background: var(--k2b-surface-muted);
+  font-size: 0.75rem;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* The inner text clamps, so the quote's padding never shows a cut line. */
+.k2b-ui .cloud-approval__quote[data-clamp] > span {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.k2b-ui .cloud-approval__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-left: -0.625rem;
+}
+
+.k2b-ui .cloud-approval__sheet {
+  display: grid;
+  min-width: 0;
+  gap: 1rem;
+}
+
+.k2b-ui .cloud-approval__sheet-foot {
+  width: 100%;
+  container-type: inline-size;
+}
+
+.k2b-ui .cloud-approval__callout {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin: 0;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+}
+
+.k2b-ui .cloud-approval__callout i {
+  margin-top: 0.125rem;
+}
+
+/* The foot keeps its height in every state: the note is one line, and the decision slot keeps one button height, so a
+   receipt replaces the buttons without moving anything. A narrow row puts the decision on a line of its own. */
+.k2b-ui .cloud-approval__foot {
+  display: grid;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem 1rem;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.k2b-ui .cloud-approval__note {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+.k2b-ui .cloud-approval__note > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.k2b-ui .cloud-approval__note[data-tone="danger"] {
+  color: var(--k2b-danger-text);
+}
+
+.k2b-ui .cloud-approval__actions {
+  display: flex;
+  min-height: 1.75rem;
+  min-width: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.375rem;
+}
+
+@container (max-width: 32rem) {
+  .k2b-ui .cloud-approval__foot {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  /* The decision shares the width; a receipt keeps the same line. */
+  .k2b-ui .cloud-approval__actions > .k2b-button,
+  .k2b-ui .cloud-approval__actions > .k2b-split-button {
+    flex: 1;
+    min-width: 0;
+    justify-content: center;
+  }
+}
+
+.k2b-ui .cloud-approval__receipt {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.k2b-ui .cloud-approval__receipt[data-outcome="approved"] {
+  color: var(--k2b-success-text);
+}
+
+/* The band sits above the resource a request would change, tinted like the approval card in a chat. */
+.k2b-ui .cloud-approval-bands {
+  display: grid;
+  gap: 0.5rem;
+}
+
+/* Two rows in every width: the decision never shares a line with the title, so a receipt cannot rewrap it. */
+.k2b-ui .cloud-approval-band {
+  display: grid;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+  grid-template-columns: auto minmax(0, 1fr);
+  container-type: inline-size;
+  padding: 0.75rem 1rem;
+  /* Transparent, so forced colours still draw an outline where the tint disappears. */
+  border: 1px solid transparent;
+  border-radius: var(--k2b-radius-surface);
+  color: var(--k2b-text-secondary);
+  background: color-mix(in srgb, var(--k2b-warning-surface) 70%, var(--k2b-surface-canvas));
+  font-size: 0.8125rem;
+}
+
+.k2b-ui.k2b-dark .cloud-approval-band,
+.dark .k2b-ui .cloud-approval-band {
+  background: color-mix(in srgb, var(--k2b-warning-surface) 55%, var(--k2b-surface-canvas));
+}
+
+.k2b-ui .cloud-approval-band > i {
+  color: var(--k2b-warning-text);
+  font-size: 1.125rem;
+}
+
+.k2b-ui .cloud-approval-band[data-decided] {
+  background: var(--k2b-surface-muted);
+}
+
+.k2b-ui .cloud-approval-band[data-decided] > i {
+  color: var(--k2b-text-muted);
+}
+
+.k2b-ui .cloud-approval-band[data-decided="approved"] > i {
+  color: var(--k2b-success-text);
+}
+
+.k2b-ui .cloud-approval-band__text {
+  display: grid;
+  min-width: 0;
+  gap: 0.125rem;
+}
+
+.k2b-ui .cloud-approval-band__text strong {
+  color: var(--k2b-text);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .cloud-approval-band__text .cloud-approval__origin {
+  margin: 0;
+}
+
+.k2b-ui .cloud-approval-band > .cloud-approval__foot {
+  grid-column: 2;
+}
+
+@media (max-width: 40rem) {
+  .k2b-ui .cloud-approval {
+    gap: 0.75rem;
+  }
+
+  .k2b-ui .cloud-approval__fields {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
+  }
+
+  .k2b-ui .cloud-approval__fields dd {
+    margin-bottom: 0.35rem;
+  }
+}

package/src/styles/effects.css

@@ -51,7 +51,7 @@
   }
 }
 
-/* Expanded work: one indent, one size, no lines or boxes; intermediate texts are quiet paragraphs. */
+/* Expanded work: at the work line's left edge, one size, no lines or boxes; intermediate texts are quiet paragraphs. */
 .k2b-ui .ai-turn-steps {
   display: flex;
   min-width: 0;
@@ -60,20 +60,37 @@
 
 .k2b-ui .ai-turn-steps__text {
   padding-block: 0.25rem;
+}
+
+/* A live status in place 3 reads like those texts. It keeps the place's line height, so a status and the text that
+   replaces it line up, and the same text never grows when it turns quiet. */
+.k2b-ui :is(.ai-turn-steps__text, .ai-turn__text--status) {
   color: var(--k2b-text-muted);
 }
 
-.k2b-ui .ai-turn-steps__text .assistant-markdown-block,
-.k2b-ui .ai-turn-steps__text .assistant-markdown-block :where(h1, h2, h3, h4, h5, h6) {
+.k2b-ui :is(.ai-turn-steps__text, .ai-turn__text--status) .assistant-markdown-block,
+.k2b-ui :is(.ai-turn-steps__text, .ai-turn__text--status) .assistant-markdown-block :where(h1, h2, h3, h4, h5, h6) {
   color: inherit;
   font-size: 0.75rem;
+}
+
+.k2b-ui .ai-turn-steps__text .assistant-markdown-block,
+.k2b-ui .ai-turn-steps__text .assistant-markdown-block :where(h1, h2, h3, h4, h5, h6) {
   line-height: 1.55;
 }
 
-.k2b-ui .ai-turn-steps__text .assistant-markdown-block :where(p, ul, ol, pre, blockquote) {
+.k2b-ui :is(.ai-turn-steps__text, .ai-turn__text--status) .assistant-markdown-block :where(p, ul, ol, pre, blockquote) {
   margin-block: 0.375rem;
 }
 
+.k2b-ui .ai-turn__text--status .assistant-markdown-block > :where(:first-child) {
+  margin-top: 0;
+}
+
+.k2b-ui .ai-turn__text--status .assistant-markdown-block > :where(:last-child) {
+  margin-bottom: 0;
+}
+
 .k2b-ui .ai-turn-steps__thought {
   margin: 0;
   color: var(--k2b-text-muted);

package/src/styles/global.css

@@ -28,6 +28,7 @@
 @import "./utilities-markdown-editor.css";
 @import "./base-popover.css";
 @import "./effects.css";
+@import "./approvals.css";
 @import "./input.css";
 @import "./resource-search.css";
 @import "./file-chooser.css";
@@ -123,7 +124,9 @@ html:has(.cloud-app-canvas[data-layout-full-page="true"]) {
   height: 100%;
 }
 
-:root .stdlib-chart {
+/* Cloud's chart palette on every @k2b/ui surface, which sets its own palette on `.k2b-ui` (Cloud's body), so legends
+   and series filters, also in popovers, name the colors the chart draws. */
+:root :is(.k2b-ui, .stdlib-chart, .k2b-chart-legend) {
   --stdlib-chart-c1: #14b8a6;
   --stdlib-chart-c2: #f97316;
   --stdlib-chart-c3: #8b5cf6;
@@ -281,8 +284,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 +316,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 *) {
+    --k2b-workspace-radius: 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;
+  }
+}
+
 .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;