typebulb 0.11.7 → 0.11.8

package/dist/agents/claude/styles.css

@@ -1,14 +1,22 @@
 :root {
   /* Light is the default; data-theme="dark" is set by the host (typebulb.com
-     or the typebulb CLI, sourced from prefers-color-scheme). */
+     or the typebulb CLI, sourced from prefers-color-scheme).
+     GRAY RAMP — every gray rides ONE neutral tint (R=G=B), like the main app's
+      bg1–bg5 ramp. Lightness may step; the HUE never changes. The bug to avoid is a
+      gray in a *different* tint (a cool/blue panel beside a neutral one), not the
+      number of steps. App chrome (statusbar, picker, modals) sits on the fixed
+      --panel. Document panels — code, callouts, tables, user bubbles, open tools —
+      paint --veil instead: a translucent neutral that matches --panel when alone on
+      the page but COMPOUNDS when panels nest (a code block in a callout, a panel in a
+      user bubble), so every depth separates on its own — no level-counting, no cap. */
   --bg: rgb(255, 255, 255);
   --fg: rgb(28, 28, 30);
-  --muted: rgb(96, 98, 106);
-  --panel: rgb(248, 249, 251);
-  --border: rgb(224, 224, 228);
+  --muted: rgb(96, 96, 100);
+  --panel: rgb(242, 242, 242);
+  --border: rgb(221, 221, 221);
   --accent: rgb(58, 125, 232);
-  --user-bg: rgb(243, 243, 245);
-  --tool-bg: rgb(245, 246, 248);
+  --veil: rgba(0, 0, 0, 0.05);      /* one shade step; alpha-stacks as panels nest */
+  --tool-bg: var(--panel);
   --err: rgb(206, 60, 60);
   --diff-add: rgb(40, 140, 70);
   --fold-marker: rgb(24, 145, 72);
@@ -19,16 +27,17 @@
 }
 
 html[data-theme="dark"] {
-  --bg: rgb(20, 20, 22);
-  --fg: rgb(232, 232, 236);
-  --muted: rgb(150, 152, 160);
-  --panel: rgb(30, 30, 32);
-  --border: rgb(54, 54, 60);
+  /* Neutral ramp, same tint as the main app: page 18 → surface 32 → border 52. */
+  --bg: rgb(18, 19, 20);
+  --fg: rgb(232, 232, 232);
+  --muted: rgb(150, 150, 150);
+  --panel: rgb(32, 32, 32);
+  --border: rgb(52, 52, 52);
   --accent: rgb(122, 162, 250);
-  --user-bg: rgb(40, 40, 44);
-  --tool-bg: rgb(30, 31, 36);
-  --err: rgb(240, 120, 120);
-  --diff-add: rgb(120, 210, 140);
+  --veil: rgba(255, 255, 255, 0.06);
+  --tool-bg: var(--panel);
+  --err: rgb(230, 60, 60);
+  --diff-add: rgb(100, 210, 130);
   --fold-marker: rgb(0, 255, 0);
   color-scheme: dark;
 }
@@ -442,7 +451,7 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
   margin: 0 auto;
 }
 .bubble.user {
-  background: var(--user-bg);
+  background: var(--veil);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: .7rem .9rem;
@@ -521,20 +530,23 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
   opacity: .5;
 }
 .md pre {
-  background: var(--tool-bg);
+  background: var(--veil);
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: .7rem .85rem;
   overflow-x: auto;
 }
+/* A pasted image (server renders an <img> from a base64 block, see blockToMarkdown) is capped to the
+   column and never blows the layout — height follows the width. */
+.md img { max-width: 100%; height: auto; border-radius: 6px; }
 /* Blockquote: left bar + faint tint + muted text — a quiet "quoted" callout. The bar
    is mixed toward --border so it stays distinct from the bright turn stripe in the
    gutter, and the tint is light enough not to read as a code/output panel. */
 .md blockquote {
   margin: .5rem 0;
   padding: .35rem .85rem;
-  border-left: 3px solid color-mix(in srgb, var(--accent) 50%, var(--border));
-  background: color-mix(in srgb, var(--accent) 6%, transparent);
+  border-left: 3px solid var(--border);
+  background: var(--veil);
   border-radius: 0 6px 6px 0;
   color: var(--muted);
 }
@@ -545,17 +557,31 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
   font-size: .88em;
 }
 .md :not(pre) > code {
-  background: var(--tool-bg);
+  background: var(--veil);
   padding: .1em .35em;
   border-radius: 5px;
 }
 .md table { border-collapse: collapse; }
 .md th, .md td { border: 1px solid var(--border); padding: .3rem .55rem; }
 /* A faint header band breaks the grid's monotony and gives the table a head/body structure — tonal
-   (`--panel`, the same neutral the pills use), never a hue, so it reads as structure not opinion and
-   follows the host light/dark theme. The header text stays `--fg`: weight + the fill carry it, a tint
-   would be the opinionated bit. Left-align headers to sit with the body cells. */
-.md th { background: var(--panel); font-weight: 600; text-align: left; }
+   (`--veil`, the document-panel shade), never a hue, so it reads as structure not opinion and follows
+   the host light/dark theme. As a panel the veil steps one shade above the table's container, so the
+   header still reads when the table sits inside a bubble or callout. The header text stays `--fg`:
+   weight + the fill carry it, a tint would be the opinionated bit. Left-align to the body cells. */
+.md th { background: var(--veil); font-weight: 600; text-align: left; }
+/* Disclosure (<details>/<summary>) from the safe-HTML allowlist (markdown.ts): a quiet --veil container,
+   subtler than a code block — assistant prose sits directly on the page, so a fill stands out; keep it
+   restrained and let the border define it. Summary is the clickable caret row (native marker), accent
+   on hover like a link. */
+.md details {
+  margin: .5rem 0;
+  padding: .35rem .7rem;
+  background: var(--veil);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+.md summary { cursor: pointer; font-weight: 600; }
+.md summary:hover { color: var(--accent); }
 
 /* The full-lane breakout geometry, defined ONCE and shared by the two breakouts (the mermaid
    embed and a spread bulb). `100%` in --lane-ml resolves against each user's own containing block
@@ -845,16 +871,16 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
   padding: .6rem .8rem;
   font-family: ui-monospace, monospace;
   font-size: .85em;
-  color: color-mix(in srgb, #e23 70%, var(--fg));
+  color: color-mix(in srgb, var(--err) 70%, var(--fg));
   white-space: pre-wrap;
 }
 .md .bulb-err-strip {
   padding: .45rem .7rem;
   border-top: 1px solid var(--border);
-  background: color-mix(in srgb, #e23 8%, var(--bg));
+  background: color-mix(in srgb, var(--err) 8%, var(--bg));
   font-family: ui-monospace, monospace;
   font-size: .8em;
-  color: color-mix(in srgb, #e23 75%, var(--fg));
+  color: color-mix(in srgb, var(--err) 75%, var(--fg));
   white-space: pre-wrap;
 }
 
@@ -877,7 +903,7 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
 }
 .tool.open {
   margin-top: .55rem;
-  background: var(--tool-bg);
+  background: var(--veil);
   border: 1px solid var(--border);
   border-radius: 8px;
 }
@@ -963,13 +989,15 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
   overflow: auto;
 }
 .tool-out { color: var(--muted); }
+/* The band carries the add/remove signal; text stays --fg so it's readable. Colouring the text the same
+   hue as its fill (red-on-red) is what washes a diff out — the band alone is the convention. */
 .diff-old {
-  background: color-mix(in srgb, var(--err) 14%, transparent);
-  color: var(--err);
+  background: color-mix(in srgb, var(--err) 24%, transparent);
+  color: var(--fg);
 }
 .diff-new {
-  background: color-mix(in srgb, var(--diff-add) 16%, transparent);
-  color: var(--diff-add);
+  background: color-mix(in srgb, var(--diff-add) 24%, transparent);
+  color: var(--fg);
 }
 
 /* Path link: plain accent, underline only on hover. skip-ink:none so the