typebulb 0.10.2 → 0.10.4

package/README.md

@@ -123,7 +123,7 @@ typebulb skill                 Print this README as an Agent Skill on stdout
 typebulb check [file.bulb.md]  Type-check a bulb without running it
 typebulb predict [file]        Report the capability a bulb probably needs, without running it
 typebulb models                List AI models for tb.ai, filtered by your .env API keys
-typebulb logs [file|pid]       Print a running bulb's captured console (-f follow, -n N tail)
+typebulb logs [file|pid]       Print a running bulb's captured console (no arg: list running servers; -f follow, -n N tail)
 typebulb stop [file|pid]       Stop a running bulb (no arg: list this project's running servers)
 typebulb trust [file]          Remember a bulb as trusted (no arg: list trusted bulbs)
 typebulb untrust <file>        Forget a bulb's trust (back to sandboxed)

package/bulbs/claude.bulb.md

@@ -825,6 +825,12 @@ const defaultFence: MdRenderRule = md.renderer.rules.fence
 md.renderer.rules.fence = (tokens: MdToken[], idx: number, opts: unknown, env: unknown, self: MdRenderer) => {
   const t = tokens[idx]
   const lang = (t.info ?? '').trim().toLowerCase()
+  // Live embeds (svg, mermaid) are an assistant medium — they render only in assistant turns. In a
+  // user turn (env.userMessage, set by userMarkdown) they fall through to a plain source code block:
+  // the svg chop and the mermaid lane-breakout both assume the transparent assistant flow and clash
+  // with the opaque, padded, rounded user card, and a user's pasted/quoted markup reads better as its
+  // literal source anyway. KaTeX/@mentions/links still render in user turns (those aren't gated here).
+  const live = !(env as { userMessage?: boolean })?.userMessage
   // Note: no `bulb` case here. Live embeds are split out of the text before markdown runs
   // (splitBulbSegments → BulbEmbed), so a ````bulb```` fence reaching markdown is illustrative
   // source — it falls through to defaultFence like any other unrecognised fence.
@@ -833,10 +839,10 @@ md.renderer.rules.fence = (tokens: MdToken[], idx: number, opts: unknown, env: u
   // it goes through DOMPurify's svg profile first — geometry survives, the script
   // surface is stripped. Lets the agent draw anything (smiley, plot from an
   // equation) without an iframe, since it's static markup, not executed code.
-  if (lang === 'svg') {
-    return `<div class="svg-embed">${DOMPurify.sanitize(t.content, { USE_PROFILES: { svg: true, svgFilters: true } })}</div>`
+  if (lang === 'svg' && live) {
+    return `<div class="embed svg-embed">${DOMPurify.sanitize(t.content, { USE_PROFILES: { svg: true, svgFilters: true } })}</div>`
   }
-  if (lang === 'mermaid') {
+  if (lang === 'mermaid' && live) {
     try {
       // The library's internal theme vars share names with the bulb's (--fg/--bg/
       // --muted/--border/--accent), so passing var(--fg) here would emit a
@@ -885,6 +891,36 @@ function themeMermaidNodes(root: Element) {
   }
 }
 
+// Fit each raw ```svg``` embed to its content. A raw <svg> with only a viewBox has NO intrinsic size,
+// so it defaults to width:100% and stretches to fill the column — which both makes the container's
+// justify-content:center moot (where the art sits *inside* the viewBox is all that positions it, so a
+// drawing parked off-centre in an oversized box reads as left/right-aligned) and blows a small drawing
+// up to a column-wide wall. Two coupled steps fix both: (1) tighten the viewBox to the content's bbox,
+// then (2) set the display width to that bbox's user-unit extent as px (1 unit ≈ 1px), capped by the
+// CSS max-width:100%. Now it renders small when small (and the now-narrower svg actually centres), and
+// a genuinely large drawing still caps at the column. getBBox is geometry-only — it ignores stroke,
+// which paints up to half its width *outside* the geometry — so the viewBox is padded by the largest
+// painted half-stroke (clipping depends on stroke width, not drawing size; a fixed % loses to a thick
+// stroke on a small drawing). The +1 is a hairline guard for anti-aliasing / curve overshoot; pad is 0
+// when nothing strokes (fills never overflow). Skips a node that isn't measurable (zero-area, or laid
+// out inside a collapsed turn → getBBox throws / returns 0), leaving it as authored.
+function fitSvgEmbeds(root: Element) {
+  for (const svg of root.querySelectorAll<SVGSVGElement>('.svg-embed svg')) {
+    try {
+      const b = svg.getBBox()
+      if (!b.width || !b.height) continue
+      let half = 0
+      for (const el of svg.querySelectorAll<SVGElement>('*')) {
+        const cs = getComputedStyle(el)                      // computed, so it catches attribute, CSS, and inherited widths
+        if (cs.stroke && cs.stroke !== 'none') half = Math.max(half, parseFloat(cs.strokeWidth) / 2)
+      }
+      const pad = half ? half + 1 : 0
+      svg.setAttribute('viewBox', `${b.x - pad} ${b.y - pad} ${b.width + pad * 2} ${b.height + pad * 2}`)
+      svg.style.width = `${b.width + pad * 2}px`              // natural size (units≈px); max-width:100% caps it, height:auto keeps ratio
+    } catch { /* not laid out / unmeasurable — leave the authored viewBox */ }
+  }
+}
+
 // A relative-path link in assistant markdown is a local file citation (optionally
 // with a #Lnnn line anchor): open it in the editor, not the browser — the bulb is
 // served from the project root, so the browser would GET the path and 404. Links
@@ -904,10 +940,11 @@ function onMarkdownClick(e: Event) {
 // Render markdown into the element via innerHTML. The click handler is bound natively here, not via
 // domeleon's `onClick`: the anchors are raw innerHTML the vdom never sees, so a delegated handler
 // wouldn't fire. onMarkdownClick is a stable ref, so re-mounts don't stack duplicate listeners.
-const renderMarkdown = (text: string) => (el: Element) => {
+const renderMarkdown = (text: string, env?: { userMessage?: boolean }) => (el: Element) => {
   try {
-    el.innerHTML = md.render(text)
+    el.innerHTML = md.render(text, env)
     themeMermaidNodes(el)
+    fitSvgEmbeds(el)
   } catch {
     ;(el as HTMLElement).textContent = text
   }
@@ -936,7 +973,7 @@ const atMentionLink = (m: string): string => {
 const userMarkdown = (msg: Msg) => {
   const segs = msg.segments ?? [msg.text]
   const src = segs.join('\n\n---\n\n').replace(AT_MENTION, atMentionLink)
-  return renderMarkdown(src)
+  return renderMarkdown(src, { userMessage: true })
 }
 
 // Split an assistant message into ordered markdown chunks and live ````bulb```` sources, using
@@ -1821,7 +1858,7 @@ class BulbEmbed extends Component {
   }
 
   view() {
-    const cls = ['bulb-embed', this.spread ? 'spread' : 'inline', this.showingCode ? 'code-open' : '', this.#compileError ? 'err' : '']
+    const cls = ['embed', 'bulb-embed', this.spread ? 'spread' : 'inline', this.showingCode ? 'code-open' : '', this.#compileError ? 'err' : '']
     const inner =
       this.#compileError ? [`bulb: ${this.#compileError}`]
       : !this.#frame ? ['compiling bulb…']
@@ -2745,10 +2782,11 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
   flex: 1;
   overflow-y: auto;
   /* Content runs under the overlaid statusbar rather than stopping above it.
-     Left padding is larger to clear the turn stripe in the left gutter; the
-     bottom is larger still to clear the overlaid statusbar pills (~2.1rem:
+     Gutters are symmetric: the turn stripe is absolutely positioned, so it claims no layout
+     width and the left gutter needs no extra room for it (see Invariants). The bottom is
+     larger to clear the overlaid statusbar pills (~2.1rem:
      .4rem inset + 1.7rem pill) so the last line isn't hidden behind them. */
-  padding: 1.25rem 1.25rem 2.5rem 2.25rem;
+  padding: 1.25rem 1.75rem 2.5rem 1.75rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -2800,10 +2838,15 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
   /* Offsets subtract --border-w: absolute positioning anchors to the
      padding-edge (inside the border), so a user bubble's 1px border would
      otherwise shave 1px off each stripe edge. */
+  /* Stripe hugs the column (1rem into the left gutter); absolute, so it consumes no layout width —
+     which is why the gutters can be symmetric (no asymmetric padding needed to "make room"), and
+     thus why breakouts need no nudge. - var(--border-w): a user bubble's 1px border pushes the
+     padding edge (the abs-pos anchor) 1px right, so without it that stripe sits 1px right of the
+     assistant bubbles' — compensate. */
   left: calc(-1rem - var(--border-w));
   top: calc(-.5rem - var(--border-w));
   bottom: calc(-.5rem - var(--border-w));
-  width: 2px;
+  width: 1px;
   background: var(--turn-color, transparent);
 }
 /* Clip stripe at turn boundaries. A user bubble always starts a turn → no
@@ -2875,20 +2918,24 @@ 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; }
 
-/* Full-lane breakout — a mermaid diagram (the whole element) and a SPREAD bulb's iframe step
-   out of the narrow prose column to the transcript width so wide content (a flowchart, a data
-   table) gets room instead of being squeezed. The bulb's *wrapper* never breaks out — only
-   its iframe does (see `.bulb-embed.spread > iframe` below), so the wrapper and the controls
-   anchored to it stay put in the prose column; the geometry here is the shared lane the iframe
-   reuses. Same lane width, same off-centre nudge (the messages gutter is 1rem wider on the left
-   for the turn stripe, so a plain centre would sit right-of-centre). position + z-index:0 lift
-   the box above the turn stripe (.bubble::before) the breakout crosses — it's later in tree order
-   — but below later-in-tree pills; the mermaid SVG is transparent so a bg backs it, the bulb's
-   iframe is opaque so it occludes the stripe itself. */
+/* 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
+   (prose width) at point of use, so both centre on the column axis — which is the viewport centre,
+   since the gutters are symmetric. One home so the geometry can't drift between the two (the bug
+   that let an off-centre nudge survive in one rule after being removed from the other). */
+.md { --lane-w: calc(100vw - 2rem); --lane-ml: calc((100% - var(--lane-w)) / 2); }
+
+/* Full-lane breakout — the mermaid embed (whole element) and a SPREAD bulb's iframe step out of
+   the prose column to the transcript width so wide content gets room. Both use --lane-w/--lane-ml
+   and extend symmetrically from the column, which is viewport-centred (symmetric gutters), so
+   neither needs an off-centre nudge (see Invariants in Specs-Bulbs/Claude-Bulb/Claude-Bulb.md). A
+   bulb's *wrapper* never breaks out — only its inner surface does — so the wrapper and its controls
+   stay at prose-right. position + z-index:0 lift the box over the turn stripe it crosses; the
+   mermaid SVG is transparent so a bg backs it, the bulb iframe is opaque so it occludes the stripe. */
 .md .mermaid {
-  width: calc(100vw - 2rem);
+  width: var(--lane-w);
   margin: .6rem 0;
-  margin-left: calc((100% - (100vw - 2rem)) / 2 - .5rem);
+  margin-left: var(--lane-ml);
   margin-right: auto;
   position: relative;
   z-index: 0;
@@ -2912,8 +2959,9 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
 .md .mermaid svg { max-width: none; height: auto; flex: 0 0 auto; }
 
 /* Raw ```svg``` embeds: no breakout — these are drawings (smiley, plot), not wide
-   diagrams, so keep them in the prose column, centred and capped at its width. */
-.md .svg-embed { margin: .6rem 0; display: flex; justify-content: center; }
+   diagrams, so keep them in the prose column, centred and capped at its width. They
+   share the `.embed` stripe-chop below (a drawing earns its own row like a bulb). */
+.md .svg-embed { justify-content: center; }
 .md .svg-embed svg { max-width: 100%; height: auto; }
 
 /* ````bulb```` embeds: a sandboxed nested app. createBulbFrame owns the iframe (auto-height,
@@ -2924,28 +2972,27 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
    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). */
-.md .bulb-embed {
+/* The stripe-chop, shared by every opaque in-column visual artifact (the inline 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
+   stays at prose-right, so a bulb's controls anchored there don't move). The vertical gap is opaque
+   padding, not margin: it occludes the stripe top and bottom so the cut is flush with the prose (no
+   stub in a transparent gap), symmetric above/below to separate the artifact from surrounding text.
+   margin top/bottom are zeroed — and the abutting prose margins too (below) — so the gap butts the
+   text. Mermaid is NOT on this path: it's transparent and breaks out, occluding via box-shadow.
+   Per-artifact layout (flex direction, centring) lives on .bulb-embed / .svg-embed. */
+.md .embed {
   display: flex;
-  flex-direction: column;
   position: relative;
   z-index: 0;
-  /* Always cut the turn stripe, both modes: an opaque bg over position:relative + z-index:0
-     paints above .bubble::before, and a -1rem left extension reaches the stripe in the gutter
-     without a full breakout (padding-left:1rem keeps the content in the prose column; the box's
-     right edge stays at prose-right, so the controls anchored there don't move). In spread mode the
-     iframe's own breakout covers the stripe too. */
   background: var(--bg);
-  margin-left: -1rem;
-  padding-left: 1rem;
-  /* Symmetric vertical gap as opaque padding, not margin: it occludes the stripe top and bottom
-     so it's cut flush with the prose (no stub in a transparent gap), and is the same amount above
-     and below to separate the bulb from surrounding text. margin top/bottom are zeroed — and the
-     abutting prose margins too (below) — so the gap butts against the text. */
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 1.1rem;
-  padding-bottom: 1.1rem;
+  margin: 0 0 0 -1rem;
+  padding: 1.1rem 0 1.1rem 1rem;
 }
+/* A bulb stacks its controls/frame/code vertically; in spread mode the inner iframe's own
+   breakout covers the stripe too (the wrapper still chops in column). */
+.md .bulb-embed { flex-direction: column; }
 /* 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. */
@@ -2956,26 +3003,25 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
    code toggle hides it via .code-open rather than unmounting, so the bulb keeps its state. */
 .bulb-frame { display: contents; }
 .md .bulb-embed.code-open .bulb-frame { display: none; }
-/* Spread: the inner surface — the live iframe OR the code view behind the toggle, whichever is
-   shown — breaks out to the full lane, while the wrapper stays in the prose column (so the
-   controls anchored to it hold at prose-right, not the lane's hard-right edge). Spread is an
-   embed-level state, so both surfaces honour it. Same lane geometry as `.mermaid` above; 100%
-   here resolves against the prose-width wrapper. `width !important` beats createBulbFrame's
-   inline `width:100%` on the iframe (harmless on the code view, which has no inline width); both
-   are opaque, so position/z-index:0 lift them over the turn stripe they now cross. */
+/* Spread: the inner surface (live iframe, or the code view behind the toggle) breaks out to the
+   lane while the wrapper stays in the prose column, so the controls hold at prose-right. Shares the
+   --lane-* geometry; centred on the column axis so toggling spread doesn't shift a column-fitting
+   bulb sideways. `width !important` beats createBulbFrame's inline width:100% on the iframe
+   (harmless on the code view, which has none); both opaque, so position/z-index:0 lift them over
+   the turn stripe they now cross. */
 .md .bulb-embed.spread iframe,
 .md .bulb-embed.spread > .bulb-code {
-  width: calc(100vw - 2rem) !important;
-  margin-left: calc((100% - (100vw - 2rem)) / 2 - .5rem);
+  width: var(--lane-w) !important;
+  margin-left: var(--lane-ml);
   margin-right: auto;
   position: relative;
   z-index: 0;
 }
-/* Kill the transparent margin between the bulb and the prose it abuts (top and bottom):
-   the bulb's own opaque padding is the gap, and a leftover prose margin would let the
+/* Kill the transparent margin between an embed and the prose it abuts (top and bottom):
+   the embed's own opaque padding is the gap, and a leftover prose margin would let the
    turn stripe show through it as a stub past the last/next line of text. */
-.md :has(+ .bulb-embed) { margin-bottom: 0; }
-.md .bulb-embed + * { margin-top: 0; }
+.md :has(+ .embed) { margin-bottom: 0; }
+.md .embed + * { margin-top: 0; }
 /* The rounded clip lives on the inner surfaces, not the embed (whose padding is now the
    gap), so the bulb's own card — the iframe, or the code view behind the toggle — is
    what carries the corners. */
@@ -3256,7 +3302,7 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
     "beautiful-mermaid": "^1.1.3",
     "dompurify": "^3.2.6",
     "highlight.js": "^11.10.0",
-    "typebulb": "^0.10.2"
+    "typebulb": "^0.10.4"
   }
 }
 ```

package/dist/index.js

@@ -668,6 +668,6 @@ ${r.trim()}
 `)}catch(f){console.error("Compile error:",f)}}),F=vt({bulbPath:r,emitter:u}),n){let{name:f,serveDir:b}=n;L=Fn({dir:b,onChange:()=>{console.log(`Local package '${f}' changed. Browser reloading...
 `),a.emit("reload")}})}}e.open&&await it(g);let _=async()=>{console.log(`
 Shutting down...`),h.close(),F?.(),L?.(),i(),await qt(process.pid);let u=ve.join(ve.dirname(r),".typebulb","server.mjs");await Bn.rm(u,{force:!0}).catch(()=>{}),process.exit(0)};process.on("SIGINT",_),process.on("SIGTERM",_)}import*as Un from"path";import{EventEmitter as Mo}from"events";async function Wn(r,e,t,n,s){let o=ge(t),i=!1,a=async()=>{let{bulb:c,config:l}=await W(r);i||(mt(o,r,c.server),i=!0),await Nt(c.server,s,n,l.dependencies)};if(console.log(`Running ${Un.basename(r)}...`),await a(),e){console.log(`Watching for changes...
-`);let c=new Mo;c.on("reload",async()=>{try{console.log("Re-running..."),await a()}catch(l){console.error("Error:",l)}}),vt({bulbPath:r,emitter:c})}}var Jn="0.10.2";async function jo(){let r=ur(process.argv.slice(2));if(r.version&&(console.log(`typebulb ${Jn}`),process.exit(0)),r.help&&(pr(),process.exit(0)),r.subcommand==="logs"){await _n(r.file||void 0,{follow:r.follow,lines:r.lines});return}if(r.subcommand==="stop"){await Cn(r.file||void 0);return}if(r.subcommand==="skill"){await Pn(Jn);return}if(r.subcommand==="models"){await wn(r.mode);return}if(r.subcommand==="agent"){if(!r.agentTarget){await gn();return}me(r.agentTarget)||(console.error(`Unknown agent '${r.agentTarget}'. Known: ${Wt().join(", ")}.`),process.exit(1));let l=await zt(process.cwd(),r.agentTarget);if(l){console.log(`Viewer '${r.agentTarget}' is already running for this project:
+`);let c=new Mo;c.on("reload",async()=>{try{console.log("Re-running..."),await a()}catch(l){console.error("Error:",l)}}),vt({bulbPath:r,emitter:c})}}var Jn="0.10.4";async function jo(){let r=ur(process.argv.slice(2));if(r.version&&(console.log(`typebulb ${Jn}`),process.exit(0)),r.help&&(pr(),process.exit(0)),r.subcommand==="logs"){await _n(r.file||void 0,{follow:r.follow,lines:r.lines});return}if(r.subcommand==="stop"){await Cn(r.file||void 0);return}if(r.subcommand==="skill"){await Pn(Jn);return}if(r.subcommand==="models"){await wn(r.mode);return}if(r.subcommand==="agent"){if(!r.agentTarget){await gn();return}me(r.agentTarget)||(console.error(`Unknown agent '${r.agentTarget}'. Known: ${Wt().join(", ")}.`),process.exit(1));let l=await zt(process.cwd(),r.agentTarget);if(l){console.log(`Viewer '${r.agentTarget}' is already running for this project:
   ${l.url}`),r.open&&await it(l.url);return}r.file=r.agentTarget,r.subcommand="run"}if(r.subcommand==="trust"||r.subcommand==="untrust"){await on(r.file||void 0,r.subcommand==="trust");return}let e,t=!1;if(!r.file||r.file==="."){let l=await Hr(process.cwd());l||(console.error("No .bulb.md file found in current directory"),process.exit(1)),e=l}else e=q.resolve(r.file);if(!await Vn.access(e).then(()=>!0,()=>!1)){let l=r.agentTarget?me(r.file):void 0;l?(e=l,t=!0):Wt().includes(r.file)?(console.error(`To open the ${r.file} agent viewer, run: npx typebulb agent:${r.file}`),process.exit(1)):(console.error(`File not found: ${e}`),process.exit(1))}e.endsWith(".bulb.md")||(console.error("File must have .bulb.md extension"),process.exit(1));let s=r.file&&r.file!=="."?r.file:q.relative(process.cwd(),e)||q.basename(e),o=`npx typebulb --trust ${s.includes(" ")?`"${s}"`:s}`;if(r.subcommand==="predict"){await sn(e,o);return}if(t)r.trust=!r.noTrust,r.trust&&console.log("trust: granted (built-in bulb)");else{let l=!r.noTrust&&ot(e);l&&!r.trust&&console.log("trust: granted from memory (run `typebulb untrust` to revoke)"),r.trust=r.noTrust?!1:r.trust||l}let i;try{i=await W(e)}catch{}let a;if(r.local){i&&!(r.local.name in(i.config.dependencies??{}))&&(console.error(`--replace: '${r.local.name}' is not a dependency in this bulb's config.json; nothing to replace.`),process.exit(1)),i&&(!i.bulb.code||r.server)&&console.warn("warning: --replace has no effect in server mode (the override is client-only).");try{a=await lr(r.local)}catch(l){console.error(l instanceof Error?l.message:String(l)),process.exit(1)}console.log(`replace: ${a.name} \u2192 ${q.relative(process.cwd(),a.dir)||"."}`)}if(r.subcommand==="check"){await nn(e,a);return}let c=t?process.cwd():q.dirname(e);if(i&&i.bulb.server&&(!i.bulb.code||r.server)){r.trust||(console.error(`This bulb runs server-side Node code (server.ts), which --trust must authorize:
   ${o}`),process.exit(1)),await Wn(e,r.watch,r.mode,a,c);return}await Ln(e,r,o,a,c)}jo().catch(r=>{console.error("Error:",r.message),process.exit(1)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typebulb",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Local bulb runner CLI for Typebulb",
   "license": "MIT",
   "engines": { "node": ">=18" },