@k2b/cloud 0.21.1 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/cloud",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "description": "Application platform library for independently deployed Hono and SolidJS services behind a dynamic gateway.",
   "license": "AGPL-3.0-or-later",
   "repository": {
@@ -98,7 +98,7 @@
     "@tailwindcss/typography": "0.5.20",
     "@k2b/nessi": "0.12.1",
     "@k2b/ssr": "0.14.0",
-    "@k2b/ui": "0.11.0",
+    "@k2b/ui": "0.12.0",
     "@k2b/stdlib": "0.27.0",
     "@k2b/sync": "7.0.0",
     "@nats-io/jetstream": "3.4.0",

package/src/ssr/GlobalAnnouncements.island.tsx

@@ -1,4 +1,4 @@
-import { Button, dialogCore, MarkdownView, PanelDialog, panelDialogOptions, useLocale } from "@k2b/ui";
+import { Button, dialogCore, IconButton, MarkdownView, NoticeCard, PanelDialog, panelDialogOptions, useLocale } from "@k2b/ui";
 import { createSignal, For, onMount, Show } from "solid-js";
 import {
   ANNOUNCEMENTS_COOKIE,
@@ -21,22 +21,6 @@ const writeCookieState = (state: AnnouncementCookieState) => {
   document.cookie = `${ANNOUNCEMENTS_COOKIE}=${serializeAnnouncementCookieState(state)}; Path=/; Max-Age=${ANNOUNCEMENTS_COOKIE_MAX_AGE_SECONDS}; SameSite=Lax`;
 };
 
-const toneClass = (tone: AnnouncementDisplayEntry["tone"]) => {
-  if (tone === "success")
-    return "border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-100";
-  if (tone === "warning")
-    return "border-amber-200 bg-amber-50 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-100";
-  if (tone === "danger") return "border-red-200 bg-red-50 text-red-950 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-100";
-  return "border-blue-200 bg-blue-50 text-blue-950 dark:border-blue-900/60 dark:bg-blue-950/40 dark:text-blue-100";
-};
-
-const toneIcon = (tone: AnnouncementDisplayEntry["tone"]) => {
-  if (tone === "success") return "ti ti-circle-check";
-  if (tone === "warning") return "ti ti-alert-triangle";
-  if (tone === "danger") return "ti ti-alert-circle";
-  return "ti ti-info-circle";
-};
-
 export default function GlobalAnnouncements(props: Props) {
   const locale = useLocale();
   const t = () => platformMessages.resolve([locale()]).t;
@@ -113,27 +97,18 @@ export default function GlobalAnnouncements(props: Props) {
       <div class="flex shrink-0 flex-col gap-1">
         <For each={banners()}>
           {(banner) => (
-            <section
-              class={`flex max-h-[min(40vh,14rem)] items-start gap-2 rounded-lg border px-3 py-2 text-xs shadow-sm ${toneClass(banner.tone)}`}
-            >
-              <i class={`${toneIcon(banner.tone)} mt-0.5 shrink-0`} />
-              <div class="min-h-0 min-w-0 flex-1">
-                <p class="font-semibold">{banner.title}</p>
+            <div class="cloud-announcement">
+              <NoticeCard tone={banner.tone} title={banner.title}>
                 <MarkdownView
                   trustedHtml={banner.bodyHtml}
                   headingScale="compact"
                   class="mt-1 max-h-36 overflow-y-auto overscroll-contain pr-1 [&_p]:my-0"
                 />
-              </div>
-              <button
-                type="button"
-                class="ml-auto inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md opacity-70 hover:bg-black/5 hover:opacity-100 dark:hover:bg-white/10"
-                aria-label={t().dismissBanner}
-                onClick={() => dismissBanner(banner.version)}
-              >
-                <i class="ti ti-x" />
-              </button>
-            </section>
+              </NoticeCard>
+              <IconButton size="sm" label={t().dismissBanner} onClick={() => dismissBanner(banner.version)}>
+                <i class="ti ti-x" aria-hidden="true" />
+              </IconButton>
+            </div>
           )}
         </For>
       </div>

package/src/styles/effects.css

@@ -514,12 +514,10 @@
   display: none;
 }
 
+/* The fill without a frame comes from the shared `.md-code-block pre` rule;
+   Help keeps its own spacing and syntax colours. */
 .help-document .md-code-block pre {
   margin: 0;
-  border: 0 !important;
-  border-radius: var(--ui-radius-surface) !important;
-  background: var(--ui-surface-subtle) !important;
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 72%, transparent);
   padding: 0.875rem 1rem;
 }
 
@@ -602,15 +600,6 @@
   padding: 0;
 }
 
-.help-document :where(blockquote) {
-  margin: 1.25rem 0;
-  border: 0;
-  border-radius: var(--ui-radius-surface);
-  background: var(--ui-surface-subtle);
-  color: var(--color-zinc-600);
-  padding: 0.875rem 1rem;
-}
-
 .help-document .md-table-wrap {
   overflow: hidden;
   margin-block: 0.875rem 1.5rem;
@@ -623,13 +612,11 @@
   border-spacing: 0;
 }
 
-/* `MarkdownView` contributes its generic cell border with element specificity.
-   Keep the Help frame as the only edge owner so those cell borders cannot show
-   through the wrapper's rounded clipping corners. */
+/* Help renders inside `MarkdownView`, which draws the table's row lines. The
+   inner `.md-table-cell` owns the padding. */
 .help-document .md-table :is(th, td) {
   min-width: 0;
   height: auto;
-  border: 0;
   padding: 0;
 }
 
@@ -651,10 +638,6 @@
   word-break: normal;
 }
 
-.help-document .md-table thead {
-  background: var(--ui-surface-subtle);
-}
-
 .help-document .md-table thead .md-table-cell {
   color: var(--color-zinc-700);
   font-size: 0.75rem;
@@ -672,7 +655,8 @@
   font-weight: 400;
 }
 
-.help-document .md-table-cell :where(code) {
+/* Element specificity, so it outranks MarkdownView's inline-code fill. */
+.help-document .md-table-cell code {
   border-radius: 0;
   background: transparent;
   color: inherit;
@@ -681,18 +665,10 @@
   padding: 0;
 }
 
-.dark .help-document .md-table thead {
-  background: var(--ui-surface-subtle);
-}
-
 .dark .help-document .md-table thead .md-table-cell {
   color: var(--color-zinc-200);
 }
 
-.dark .help-document :where(blockquote) {
-  color: var(--color-zinc-400);
-}
-
 .help-document :where(hr) {
   height: 0;
   margin-block: 2rem;

package/src/styles/global.css

@@ -294,6 +294,11 @@ solid-island {
     border-radius: 0; border: 0; border-bottom: 1px solid var(--ui-border);
     box-shadow: none !important;
   }
+  /* Toasts at the top edge of a phone start below the header instead of
+     covering its menu and search buttons. */
+  :root:has(.cloud-app-canvas .layout-header) {
+    --k2b-toast-offset-top: 2.875rem;
+  }
 
 }
 

package/src/styles/tokens.css

@@ -7,6 +7,9 @@
   --ui-surface-subtle: rgb(248 248 248 / 0.96);
   --ui-surface-muted: rgb(243 244 243 / 0.96);
   --ui-surface-raised: rgb(255 255 255 / 0.99);
+  /* Dimmed text stays at WCAG AA on the muted surfaces it often sits on, such
+     as dialog section groups, not only on the plain surface. */
+  --ui-text-dimmed: color-mix(in srgb, var(--color-zinc-500) 80%, var(--color-zinc-600));
   --ui-border: rgb(218 220 219 / 0.68);
   --ui-border-strong: rgb(207 210 208 / 0.9);
   --ui-hover: rgb(239 240 239 / 0.9);
@@ -135,6 +138,7 @@
   --ui-surface-subtle: color-mix(in srgb, var(--ui-surface) 68%, var(--ui-surface-muted));
   --ui-surface-muted: #20242a;
   --ui-surface-raised: #181d24;
+  --ui-text-dimmed: color-mix(in srgb, var(--color-zinc-500) 40%, var(--color-zinc-400));
   --ui-border: #29313a;
   --ui-border-strong: #3a4552;
   --ui-hover: #252c35;
@@ -222,7 +226,7 @@
 }
 
 @utility text-dimmed {
-  @apply text-zinc-500 dark:text-zinc-500;
+  color: var(--ui-text-dimmed);
 }
 
 @utility text-label {

package/src/styles/utilities-feedback.css

@@ -224,11 +224,21 @@
   }
 }
 
-#ui-toast-container > div {
-  border: 1px solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-surface);
-  background: var(--ui-surface-raised);
-  box-shadow: var(--ui-shadow-float) !important;
+/* Operator banners: a NoticeCard with its close button in the top corner. */
+.k2b-ui .cloud-announcement {
+  position: relative;
+}
+.k2b-ui .cloud-announcement .k2b-notice-card__content {
+  padding-right: 1.75rem;
+}
+.k2b-ui .cloud-announcement .k2b-content-markdown {
+  font-size: inherit;
+  line-height: inherit;
+}
+.k2b-ui .cloud-announcement > .k2b-icon-button {
+  position: absolute;
+  top: 0.4375rem;
+  right: 0.4375rem;
 }
 
 /* Approval prose follows the surrounding review fields, not document typography. */

package/src/styles/utilities-layout.css

@@ -22,6 +22,10 @@
   background: var(--ui-surface);
   /* Shared surface depth stays consistent with the Layout header. */
   box-shadow: var(--ui-shadow-surface);
+  /* A paper card inside a dialog section group paints its own surface, so its
+     fields return to the muted well instead of the group's white one. */
+  --k2b-field-surface: initial;
+  --k2b-field-hover: initial;
 }
 
 @utility dialog-panel {

package/src/styles/utilities-markdown-editor.css

@@ -431,6 +431,12 @@
   color: var(--ui-app-accent-text);
 }
 
+/* The brackets, weight and icon already mark the widget as a link, so it
+   keeps no underline inside MarkdownView, the same as in Assistant chat. */
+.k2b-ui .k2b-content-markdown a.md-link-widget {
+  text-decoration: none;
+}
+
 .md-link-widget:focus-visible {
   border-radius: 0.125rem;
   outline: var(--k2b-focus-width) solid var(--ui-app-accent-border);
@@ -464,7 +470,20 @@
   @apply bg-zinc-200/40 dark:bg-zinc-800;
 }
 
-.md-code-block pre,
+/* Rendered code blocks match MarkdownView: a fill without a frame that
+   follows `--k2b-field-surface`, so it stays visible on a tinted group. The
+   transparent border keeps the edge visible in forced colours. The rendered
+   wrapper shares the editor's line class, so it drops the line fill. */
+.md-code-block:has(> pre) {
+  background: transparent;
+}
+
+.md-code-block pre {
+  border: 1px solid transparent !important;
+  border-radius: var(--ui-radius-control) !important;
+  background: var(--k2b-field-surface, var(--ui-surface-muted)) !important;
+}
+
 .md-mermaid-block,
 .md-katex-block {
   border: 1px solid rgb(228 228 231 / 0.72) !important;
@@ -479,7 +498,6 @@
   padding: 0.75rem;
 }
 
-.dark .md-code-block pre,
 .dark .md-mermaid-block,
 .dark .md-katex-block {
   border-color: rgb(63 63 70 / 0.72) !important;

package/src/styles/utilities-markdown-table.css

@@ -1,7 +1,8 @@
-/* Markdown tables use the same quiet visual language as DataTable: one
-   contained surface, one header band, and hairline row separators. Used by
-   both the server-side `marked` renderer and the CodeMirror table widget so
-   read-mode and edit-mode look identical.
+/* Markdown tables use the same hairline language as @k2b/ui MarkdownView:
+   no frame or header fill, a stronger line under the header, hairline row
+   separators, and the outer columns flush with the prose. Used by both the
+   server-side `marked` renderer and the CodeMirror table widget so read-mode
+   and edit-mode look identical.
 
    Three-layer markup:
      <div class="md-table-wrap">      ← horizontal scroll owner
@@ -13,10 +14,13 @@
   overflow: clip;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
-  border: 1px solid var(--ui-border);
-  border-radius: var(--ui-radius-surface);
-  background: var(--ui-surface);
-  box-shadow: var(--ui-shadow-surface);
+}
+
+/* Inside MarkdownView a table takes the same block spacing as its own
+   tables, so two tables in a row do not read as one. Hosts such as Help keep
+   their own spacing. */
+:where(.k2b-ui .k2b-content-markdown) .md-table-wrap {
+  margin-block: 1em;
 }
 
 .md-table {
@@ -39,12 +43,8 @@
   border: 0;
 }
 
-.md-table thead {
-  background: var(--ui-data-header);
-}
-
 .md-table thead tr {
-  border-bottom: 1px solid var(--ui-data-divider);
+  border-bottom: 1px solid var(--ui-border-strong);
 }
 
 .md-table tbody tr:not(:last-child) {
@@ -87,12 +87,29 @@
   color: inherit;
 }
 
-/* Headers inherit the single shared band instead of drawing per-cell fills. */
 .md-table thead .md-table-cell {
+  padding-top: 0;
   background: transparent;
   font-weight: 600;
 }
 
+.md-table th:first-child > .md-table-cell,
+.md-table td:first-child > .md-table-cell {
+  padding-left: 0;
+}
+
+.md-table th:last-child > .md-table-cell,
+.md-table td:last-child > .md-table-cell {
+  padding-right: 0;
+}
+
+/* Inside MarkdownView the span stays the only padding owner. */
+.k2b-ui .k2b-content-markdown .md-table th,
+.k2b-ui .k2b-content-markdown .md-table td {
+  padding: 0;
+  font-size: inherit;
+}
+
 .dark .md-table thead .md-table-cell {
   background: transparent;
 }
@@ -109,9 +126,10 @@
   justify-content: center;
 }
 
-/* Summary rows use the same quiet band as a DataTable footer. */
-.md-table tbody tr.md-table-total-row {
-  background: var(--ui-data-header);
+/* A summary row sits under the same stronger line as the header. The line is
+   on the cells, so it also wins over a row separator or MarkdownView's. */
+.k2b-ui .md-table tbody tr.md-table-total-row > td {
+  border-top: 1px solid var(--ui-border-strong);
 }
 
 .md-table tbody tr.md-table-total-row .md-table-cell {