@k2b/cloud 0.27.0 → 0.28.0

package/src/styles/effects.css

@@ -112,7 +112,7 @@
 }
 
 .assistant-markdown-block :where(.md-table-wrap) {
-  margin-block: 1.125rem;
+  margin-block: calc(1.125rem - var(--md-table-bleed)) 1.125rem;
 }
 
 .assistant-markdown-block :where(hr) {
@@ -155,19 +155,6 @@
   margin-block: 0.25rem;
 }
 
-.assistant-markdown-block :where(a) {
-  @apply text-blue-600 underline underline-offset-2 dark:text-blue-300;
-}
-
-.assistant-markdown-block :where(a.md-link-widget) {
-  color: inherit;
-  text-decoration: none;
-}
-
-.assistant-markdown-block :where(a.md-link-widget:hover) {
-  color: var(--ui-app-accent-text);
-}
-
 .assistant-markdown-block :where(code) {
   @apply rounded bg-zinc-100 px-1 py-0.5 text-[0.85em] text-primary dark:bg-zinc-900;
 }
@@ -669,9 +656,10 @@
   padding: 0;
 }
 
+/* The shared wrapper clips without becoming a scroll box, so scrolling a cell
+   into view cannot shift the table under its column bands. */
 .help-document .md-table-wrap {
-  overflow: hidden;
-  margin-block: 0.875rem 1.5rem;
+  margin-block: calc(0.875rem - var(--md-table-bleed)) 1.5rem;
 }
 
 .help-document .md-table-wrap > .md-table {
@@ -701,7 +689,8 @@
   background: transparent;
   box-shadow: none;
   overflow-wrap: break-word;
-  padding: 0.65rem 0.75rem;
+  /* The row fill and column band reach as far past the text on every side. */
+  padding: var(--md-table-bleed);
   font-size: 0.78rem;
   line-height: 1.45;
   word-break: normal;
@@ -894,3 +883,12 @@ dialog:has(.launchpad-panel)::backdrop {
     linear-gradient(180deg, var(--rim-top-hover), var(--rim-bottom-hover)) border-box;
   color: var(--glyph-hover);
 }
+
+/* Response details: one quiet label/value list per section, one type size, no grid lines. */
+.k2b-ui .ai-response-info__rows { display: grid; gap: 0.375rem; margin: 0; font-size: 0.8125rem; }
+.k2b-ui .ai-response-info__rows > div { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 1.5rem; }
+.k2b-ui .ai-response-info__rows dt { display: flex; min-width: 0; flex-direction: column; color: var(--k2b-text-muted); }
+.k2b-ui .ai-response-info__rows dt > span { font-size: 0.75rem; }
+.k2b-ui .ai-response-info__rows dd { min-width: 0; margin: 0; overflow: hidden; color: var(--k2b-text); text-align: end; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.k2b-ui .ai-response-info__tools { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--k2b-text-secondary); }
+.k2b-ui .ai-response-info__tools > li { display: inline-flex; align-items: center; gap: 0.375rem; }

package/src/styles/tokens.css

@@ -198,6 +198,7 @@
      it to the active app appearance. */
   --k2b-app-workspace-active: var(--ui-app-accent-text);
   --k2b-detail-panel-accent: var(--ui-app-accent-text);
+  --k2b-link-accent: var(--ui-app-accent-text);
 }
 
 .dark :is(.cloud-app-canvas, .app-accent-scope) {
@@ -205,6 +206,7 @@
   --ui-app-accent-border: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
   --k2b-app-workspace-active: var(--ui-app-accent-text);
   --k2b-detail-panel-accent: var(--ui-app-accent-text);
+  --k2b-link-accent: var(--ui-app-accent-text);
 }
 
 @utility slider-track-colors {

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

@@ -410,49 +410,14 @@
   @apply bg-zinc-200/60 dark:bg-zinc-700/50 rounded-sm;
 }
 
-/* Links — color + underline, both width-safe */
+/* Links — the rendered web link's thin accent underline, width-safe */
 .md-link {
-  @apply text-blue-600 dark:text-blue-400 underline;
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: color-mix(in srgb, var(--k2b-link-accent) 55%, transparent);
   text-underline-offset: 2px;
 }
 
-/* Rendered links use one anchor for their complete visible hit area. */
-.md-link-widget {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.125rem;
-  color: inherit;
-  font-weight: 600;
-  text-decoration: none;
-  transition: color 150ms ease;
-}
-
-.md-link-widget:hover {
-  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);
-  outline-offset: var(--k2b-focus-offset);
-}
-
-.md-link-icon {
-  opacity: 0.7;
-  transition: opacity 150ms ease;
-}
-
-.md-link-widget:hover .md-link-icon,
-.md-link-widget:focus-visible .md-link-icon {
-  opacity: 1;
-}
-
 /* Blockquote — color + inset box-shadow for the left bar (box-shadow
    doesn't affect layout, unlike border-left or padding-left). The bar
    sits visually outside the text column edge so prose stays aligned. */

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

@@ -1,9 +1,14 @@
 /* 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
+   separators, and the outer text 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.
 
+   The table bleeds `--md-table-bleed` past the prose on both sides, and every
+   cell pads its text by the same amount. So the outer text stays flush, the
+   columns sit twice the bleed apart, and the header line, row lines, row hover
+   and column band all share one width: text plus the bleed on every side.
+
    Three-layer markup:
      <div class="md-table-wrap">      ← horizontal scroll owner
        <table class="md-table">       ← table layout
@@ -11,16 +16,17 @@
            <span class="md-table-cell">  ← content + alignment owner */
 
 .md-table-wrap {
+  --md-table-bleed: 0.5rem;
   overflow: clip;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  /* The header cell's top padding takes the place of a top margin. */
+  margin: 0 calc(-1 * var(--md-table-bleed)) 0.5rem;
 }
 
 /* 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;
+  margin-block: calc(1em - var(--md-table-bleed)) 1em;
 }
 
 .md-table {
@@ -70,7 +76,7 @@
   gap: 0.35rem;
   box-sizing: border-box;
   min-height: 2rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.5rem var(--md-table-bleed, 0.5rem);
   border: 0;
   border-radius: 0;
   background: transparent;
@@ -88,21 +94,10 @@
 }
 
 .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 {
@@ -147,7 +142,9 @@
   }
 
   /* A cell-sized pseudo-element can span the table vertically without
-     changing its layout. The scroll wrapper clips it to the table frame. */
+     changing its layout. The scroll wrapper clips it to the table frame, so
+     the band, like the row, reaches the bleed above the header text and
+     below the last row. */
   .md-table :is(th, td)::after {
     content: "";
     position: absolute;