typebulb 0.10.4 → 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,6 +820,16 @@ 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) => {
@@ -840,7 +850,8 @@ md.renderer.rules.fence = (tokens: MdToken[], idx: number, opts: unknown, env: u
   // 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' && live) {
-    return `<div class="embed svg-embed">${DOMPurify.sanitize(t.content, { USE_PROFILES: { svg: true, svgFilters: true } })}</div>`
+    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' && live) {
     try {
@@ -861,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
@@ -926,6 +940,16 @@ function fitSvgEmbeds(root: Element) {
 // 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') ?? ''
@@ -3050,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
@@ -3302,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.4"
+    "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.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:
+`);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.4",
+  "version": "0.10.5",
   "description": "Local bulb runner CLI for Typebulb",
   "license": "MIT",
   "engines": { "node": ">=18" },