typebulb 0.10.3 → 0.10.5

package/README.md

@@ -226,7 +226,7 @@ A local `.bulb.md` can be re-imported into typebulb.com. If it has a `**server.t
 
 The agent viewer currently supports Claude Code only. `npx typebulb agent:claude` gives the user a great scratchpad experience:
 
-* a view over the Claude Code session, where assistant messages containing bulbs render as sandboxed embedded bulbs inline in the conversation, alongside KaTeX math and mermaid diagrams.
+* a view over the Claude Code session, where assistant messages containing bulbs render as sandboxed embedded bulbs inline in the conversation, alongside KaTeX math, mermaid diagrams and svg.
 * run and stop any bulb in their project.
 * promote any embedded bulb to a `.bulb.md` file in the `typebulbs/` folder.
 

package/bulbs/claude.bulb.md

@@ -820,11 +820,27 @@ function decodeHtmlEntities(s: string): string {
 // ```mermaid``` fences render to inline SVG. A parse error falls through to the
 // default code-block rendering, so an unsupported diagram degrades to readable
 // source rather than a broken message.
+// A hover-revealed copy pill for a rendered fence. Every fenced block — code, svg, mermaid, an
+// unrecognised language — flows through the fence rule below, and the thing worth copying is always
+// its raw body, so one primitive covers them all. The source rides the button's own data-src
+// (escaped going in; getAttribute auto-unescapes coming out, so multi-line bodies round-trip), which
+// decouples the delegated handler from each block's container structure. `.copyable` is the shared
+// marker the rule stamps on every block so one CSS rule can reveal the pill on hover.
+function copyButton(src: string): string {
+  return `<button class="overlay-pill copy-src" type="button" title="Copy source" data-src="${md.utils.escapeHtml(src)}">copy</button>`
+}
+
 const defaultFence: MdRenderRule = md.renderer.rules.fence
   ?? ((tokens, idx, opts, _env, self) => self.renderToken(tokens, idx, opts))
 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 +849,11 @@ 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) {
+    const safe = DOMPurify.sanitize(t.content, { USE_PROFILES: { svg: true, svgFilters: true } })
+    return `<div class="embed svg-embed copyable">${safe}${copyButton(t.content)}</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
@@ -855,10 +872,13 @@ md.renderer.rules.fence = (tokens: MdToken[], idx: number, opts: unknown, env: u
         font: 'system-ui, -apple-system, "Segoe UI", sans-serif',
         transparent: true,
       })
-      return `<div class="mermaid">${svg}</div>`
+      return `<div class="mermaid copyable">${svg}${copyButton(t.content)}</div>`
     } catch { /* fall through to a plain code block */ }
   }
-  return defaultFence(tokens, idx, opts, env, self)
+  // Every other fence (code, an unrecognised language, or a non-live svg/mermaid in a user turn) is a
+  // copyable source block: the default <pre><code> wrapped so it gets the same hover copy pill. The
+  // wrapper — not the <pre> — is the `.md` flow child now; see `.code-block` CSS for the rhythm.
+  return `<div class="code-block copyable">${defaultFence(tokens, idx, opts, env, self)}${copyButton(t.content)}</div>`
 }
 
 // Author classDef/style colors render as literal fill/stroke/color that override
@@ -885,11 +905,51 @@ 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
 // with a scheme (http, mailto, …) fall through to the default new-tab behavior.
 function onMarkdownClick(e: Event) {
+  // Per-fence copy: the source is on the button's own data-src (see copyButton), so no container walk.
+  const copyBtn = (e.target as Element | null)?.closest<HTMLButtonElement>('.copy-src')
+  if (copyBtn) {
+    e.preventDefault()
+    navigator.clipboard?.writeText(copyBtn.dataset.src ?? '')
+    copyBtn.classList.add('done')
+    copyBtn.textContent = 'copied'
+    setTimeout(() => { copyBtn.classList.remove('done'); copyBtn.textContent = 'copy' }, 1200)
+    return
+  }
   const anchor = (e.target as Element | null)?.closest('a')
   if (!anchor) return
   const href = anchor.getAttribute('href') ?? ''
@@ -904,10 +964,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 +997,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 +1882,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…']
@@ -2922,8 +2983,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,
@@ -2934,28 +2996,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. */
@@ -2980,11 +3041,11 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
   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. */
@@ -3013,6 +3074,19 @@ a.server-port:hover { color: var(--accent); text-decoration: underline; }
 }
 .overlay-pill:hover { color: var(--accent); border-color: var(--accent); }
 
+/* Per-fence copy pill (code / svg / mermaid) — one reveal rule for every copyable block, since the
+   fence rule stamps `.copyable` on each. The svg/mermaid containers are already position:relative for
+   the chop/breakout; the code-block wrapper needs it for the absolute pill. The pill is positioned
+   (absolute), so it paints over the static fence content regardless of DOM order. */
+.md .copyable { position: relative; }
+.md .copyable:hover .copy-src,
+.md .copy-src:focus-visible { opacity: 1; }
+.md .copy-src.done { color: var(--accent); border-color: var(--accent); }
+/* The wrapper carries the code block's vertical rhythm (it, not the <pre>, is the `.md` flow child
+   now, so the first/last-child margin resets land on it); the <pre> sits flush inside. */
+.md .code-block { margin: .6rem 0; }
+.md .code-block pre { margin: 0; }
+
 /* Controls (code ⇄ run, then copy, then breakout) — a centered overlay straddling the
    bulb's top edge: clear of the running bulb below, free to overlap the prose above.
    Absolute, so toggling run↔code (which resizes the bulb below) never moves it, and so
@@ -3265,7 +3339,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.3"
+    "typebulb": "^0.10.5"
   }
 }
 ```

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.3";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.5";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.3",
+  "version": "0.10.5",
   "description": "Local bulb runner CLI for Typebulb",
   "license": "MIT",
   "engines": { "node": ">=18" },