typebulb 0.11.0 → 0.11.2

package/dist/agents/claude/index.html

@@ -1,2 +1,2 @@
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css">
-<div id="app"></div>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css">
+<div id="app"></div>

package/dist/agents/claude/styles.css

@@ -549,6 +549,11 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
 }
 .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; }
 
 /* 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
@@ -566,7 +571,10 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
    mermaid SVG is transparent so a bg backs it, the bulb iframe is opaque so it occludes the stripe. */
 .md .mermaid {
   width: var(--lane-w);
-  margin: .6rem 0;
+  /* Vertical gap must be >= the box-shadow spread (1rem below): a smaller gap lets the bg ring
+     paint over the half-line of prose above/below — the trap the opaque bulb embed dodges by
+     having no shadow, which the transparent mermaid can't. */
+  margin: 1rem 0;
   margin-left: var(--lane-ml);
   margin-right: auto;
   position: relative;
@@ -596,15 +604,52 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
 .md .svg-embed { justify-content: center; }
 .md .svg-embed svg { max-width: 100%; height: auto; }
 
+/* Markdown tables: chop in-column (the `.embed` rule below) and `safe center` — a table that fits its
+   box centres, and one that overflows falls back to left so it scrolls from its first column rather than
+   clipping. Centring holds in both modes: a small in-column table sits centred in the prose column, a
+   spread one centred in the lane. The scroll lives on the inner `.table-scroll`, not the `.embed`
+   wrapper, so a horizontal scrollbar rides above the chop's bottom padding instead of flush against the
+   next line (a scrollbar sits at its own container's bottom edge). It's the centred flex child, capped at
+   the box so it shrinks-to-fit and scrolls only what overflows; `max-width:100%` + the overflow-induced
+   0 min-width let it shrink below the table's natural width. `spread` widens the wrapper to the lane (the
+   mermaid geometry) for a table fitTableEmbeds found too wide for the column. The opaque `.embed`
+   padding/z-index still occludes the turn stripe the spread crosses — no box-shadow needed. */
+.md .table-embed { justify-content: safe center; }
+.md .table-embed .table-scroll { overflow-x: auto; max-width: 100%; }
+/* max-content keeps the table at its natural (unwrapped) width so it overflows `.table-scroll` and earns
+   a scrollbar, rather than wrapping its cells to fit — the bar is the point, and it now rides inside the
+   chop padding. */
+/* Two ceilings work together so a prose-heavy table neither scrolls forever nor squashes to mush:
+   - per-column (the cell `max-width` — in an auto-layout table every cell in a column shares one width,
+     so a cell cap *is* a column cap): no single column hogs; long text wraps at a readable measure.
+   - whole-table (`max-width: var(--lane-w)`): the table never grows past the lane, so when columns don't
+     all fit, the browser's auto-layout *shares* the lane among them — wrapping each to its slice rather
+     than scrolling. It only scrolls once even longest-word-only columns can't fit the lane (genuinely too
+     many columns). `width: max-content` is still the *preferred* width, so a small table stays natural
+     and a wide one spreads; the lane cap just bounds the worst case. The floor lever (a per-cell
+     `min-width`) — turn squash into scroll past some readable minimum — is deliberately left off until a
+     real table needs it. `word-break: normal` resets the global `.md { word-break: break-word }` (which
+     behaves like overflow-wrap:anywhere): left inherited, that global lets the lane cap squeeze a column
+     below its longest word and snap it mid-character ("status" → "statu·s"). Reset to word-boundary
+     wrapping so each column floors at its longest whole word and a too-tight table scrolls instead of
+     shattering text; a pathological no-space token (a long URL) then scrolls rather than breaking. */
+.md .table-embed table { margin: 0; width: max-content; max-width: var(--lane-w); }
+.md .table-embed th, .md .table-embed td { max-width: 40ch; word-break: normal; }
+.md .table-embed.spread {
+  width: var(--lane-w);
+  margin-left: var(--lane-ml);
+  margin-right: auto;
+}
+
 /* ````bulb```` embeds: a sandboxed nested app. createBulbFrame owns the iframe (auto-height,
    borderless). No frame of our own — like the mermaid/svg embeds, it sits in the flow rather
    than in a box, so it reads as part of the transcript; the rounded clip just tidies the corners
-   of a bulb that paints its own background. `inline` (default) keeps it in the prose column and
+   of a bulb that paints its own background. `fit` (default) keeps it in the prose column and
    caps its height (below); `spread` adds full-lane breakout + spacing from the shared rule above.
    position:relative anchors the controls overlay in BOTH modes (spread re-declares it for the
    z-index lift). .err is the compile-failure fallback; .bulb-err-strip is a runtime-error strip
    under a live embed (both monospace, muted red). */
-/* The stripe-chop, shared by every opaque in-column visual artifact (the inline bulb and a raw
+/* The stripe-chop, shared by every opaque in-column visual artifact (the fit bulb and a raw
    `svg` — each opts in by carrying `.embed`). An opaque bg over position:relative + z-index:0
    paints above .bubble::before; a -1rem left extension reaches the stripe in the gutter without a
    full breakout (padding-left:1rem keeps the content in the prose column, and the box's right edge
@@ -628,7 +673,7 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
 /* Inline (default): cap the embed's height so a tall bulb doesn't run away down the transcript.
    Past the cap the embed scrolls internally (its own overflow, set by the host↔embed protocol —
    the iframe element can't scroll its srcdoc from out here). spread removes the cap. */
-.md .bulb-embed.inline iframe { max-height: 80dvh; }
+.md .bulb-embed.fit iframe { max-height: 80dvh; }
 /* The frame host is a layout-less wrapper (domeleon owns the node; we parent the live iframe into
    it once) — display:contents lifts the iframe to be a flex child of .bulb-embed, so the sizing and
    spread-breakout rules target it directly, exactly as when it was appended as a direct child. The