@brett_lamy/docstream 1.9.0 → 1.10.0

package/dist/styles.css

@@ -450,6 +450,200 @@
   border-radius: 12px;
 }
 
+/* StlViewer: a WebGL preview of an .stl model ({% embed url="part.stl" %}). The model takes
+   its color from `color`, so it follows the theme's primary. */
+.docstream-stl,
+.docstream-strudel {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.docstream-stl__stage {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  border: 1px solid var(--gb-border);
+  border-radius: 12px;
+  overflow: hidden;
+  color: var(--gb-primary, #6366f1);
+  background:
+    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--gb-muted, #f4f4f5) 40%, transparent), transparent 70%),
+    var(--gb-muted, #f4f4f5);
+}
+
+.docstream-stl__canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+  touch-action: none;
+}
+
+.docstream-stl__canvas:active {
+  cursor: grabbing;
+}
+
+.docstream-stl__canvas:focus-visible {
+  outline: 2px solid var(--gb-primary, #6366f1);
+  outline-offset: -2px;
+  border-radius: 12px;
+}
+
+.docstream-stl__status {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  padding: 16px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--gb-muted-foreground);
+}
+
+.docstream-stl__reset {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 3px 10px;
+  border: 1px solid var(--gb-border);
+  border-radius: 999px;
+  background: var(--gb-panel, #fff);
+  color: var(--gb-panel-foreground, inherit);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  opacity: 0.85;
+}
+
+.docstream-stl__reset:hover {
+  opacity: 1;
+  background: var(--gb-hover, var(--gb-accent));
+}
+
+.docstream-stl__caption {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 4px 12px;
+  font-size: 12px;
+  color: var(--gb-muted-foreground);
+}
+
+.docstream-stl__caption a {
+  color: inherit;
+  font-weight: 500;
+}
+
+/* StrudelPlayer: a Strudel pattern as an audio player (```strudel fences, .strudel embeds). */
+.docstream-strudel__bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--gb-border);
+  border-radius: 12px;
+  background: var(--gb-panel, #fff);
+  color: var(--gb-panel-foreground, inherit);
+}
+
+.docstream-strudel__play {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--gb-primary, #6366f1);
+  color: var(--gb-primary-foreground, #fff);
+  cursor: pointer;
+}
+
+.docstream-strudel__play:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.docstream-strudel__play:focus-visible,
+.docstream-strudel__toggle:focus-visible {
+  outline: 2px solid var(--gb-primary, #6366f1);
+  outline-offset: 2px;
+}
+
+.docstream-strudel__spin {
+  animation: docstream-strudel-spin 0.9s linear infinite;
+}
+
+@keyframes docstream-strudel-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.docstream-strudel__meta {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 0 1 auto;
+  max-width: 40%;
+}
+
+.docstream-strudel__title {
+  font-weight: 600;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.docstream-strudel__sub {
+  font-size: 12px;
+  color: var(--gb-muted-foreground);
+  font-variant-numeric: tabular-nums;
+}
+
+.docstream-strudel__roll {
+  flex: 1 1 auto;
+  min-width: 60px;
+  height: 40px;
+  color: var(--gb-primary, #6366f1);
+}
+
+.docstream-strudel__toggle {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--gb-border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--gb-muted-foreground);
+  cursor: pointer;
+}
+
+.docstream-strudel__toggle[aria-expanded="true"],
+.docstream-strudel__toggle:hover {
+  background: var(--gb-hover, var(--gb-accent));
+  color: inherit;
+}
+
+.docstream-strudel__error {
+  font-size: 12px;
+  color: var(--gb-danger, #dc2626);
+  white-space: pre-wrap;
+}
+
+.docstream-strudel__code {
+  border: 1px solid var(--gb-border);
+  border-radius: 12px;
+  background: var(--gb-code-bg);
+  color: var(--gb-code-fg);
+  padding: 12px 14px;
+  overflow-x: auto;
+  font-size: 13px;
+}
+
 .docs-content-ref {
   display: flex !important;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brett_lamy/docstream",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "GitBook-aware readonly markdown and AI stream renderer.",
   "publishConfig": {
     "access": "public"
@@ -94,6 +94,18 @@
       "import": "./dist/video/index.js",
       "default": "./dist/video/index.js"
     },
+    "./stl": {
+      "source": "./src/stl/index.ts",
+      "types": "./dist/stl/index.d.ts",
+      "import": "./dist/stl/index.js",
+      "default": "./dist/stl/index.js"
+    },
+    "./strudel": {
+      "source": "./src/strudel/index.ts",
+      "types": "./dist/strudel/index.d.ts",
+      "import": "./dist/strudel/index.js",
+      "default": "./dist/strudel/index.js"
+    },
     "./viz": {
       "source": "./src/viz/index.ts",
       "types": "./dist/viz/index.d.ts",
@@ -127,6 +139,7 @@
     "./styles.css": "./dist/styles.css"
   },
   "dependencies": {
+    "@strudel/web": "1.3.0",
     "framer-motion": "^13.1.1",
     "gpu-lexer": "^0.0.2",
     "katex": "^0.18.5",

package/src/docs/DocsRenderer.tsx

@@ -27,6 +27,8 @@ import { useSyncedTab } from "./tabs-sync"
 import { ReplayPreview } from "../replay/ReplayPreview"
 import { isReplayQaUrl } from "../replay/url"
 import { VideoEmbed } from "../video"
+import { StlViewer, isStlUrl } from "../stl"
+import { StrudelPlayer, isStrudelFile, isStrudelLanguage } from "../strudel"
 import { OpenApiOperation } from "../openapi/OpenApiOperation"
 import { Mermaid } from "./Mermaid"
 import { HighlightedCode } from "./HighlightedCode"
@@ -153,7 +155,7 @@ function codeOnlyTabs(block: Extract<Block, { type: "tabs" }>): CodeBlockNode[]
   const codes: CodeBlockNode[] = []
   for (const tab of block.tabs) {
     const only = tab.children.length === 1 ? tab.children[0] : null
-    if (!only || only.type !== "code" || only.live || only.language === "mermaid") return null
+    if (!only || only.type !== "code" || only.live || only.language === "mermaid" || isStrudelLanguage(only.language)) return null
     codes.push(only)
   }
   return codes
@@ -342,6 +344,9 @@ function BlockView({ block, liveRenderer, sourceRenderer }: { block: Block } & R
           />
         )
       }
+      if (isStrudelLanguage(block.language)) {
+        return <StrudelPlayer code={block.code} {...(block.title ? { title: block.title } : {})} />
+      }
       if (block.live && isReactLanguage(block.language) && liveRenderer) {
         const entry = block.entry ?? "/src/main.jsx"
         return liveRenderer({
@@ -419,6 +424,12 @@ function BlockView({ block, liveRenderer, sourceRenderer }: { block: Block } & R
       if (isReplayQaUrl(block.url)) {
         return <ReplayPreview source={block.url} title="Replay preview" />
       }
+      if (isStlUrl(block.url)) {
+        return <StlViewer src={resolveAsset(block.url)} {...(block.title ? { title: block.title } : {})} />
+      }
+      if (isStrudelFile(block.url)) {
+        return <StrudelPlayer src={resolveAsset(block.url)} {...(block.title ? { title: block.title } : {})} />
+      }
       const src = embedSrc(block.url)
       return src || isDirectVideo(block.url) ? (
         <VideoEmbed

package/src/env.d.ts

@@ -2,3 +2,6 @@ declare module "*.css" {
   const href: string
   export default href
 }
+
+// @strudel/web ships no types; src/strudel/engine.ts types the slice it uses.
+declare module "@strudel/web"

package/src/index.ts

@@ -88,6 +88,10 @@ export type { ReplayEvent } from "./replay/types"
 export { isReplayQaUrl, normalizeReplayEmbedUrl } from "./replay/url"
 export { VideoEmbed } from "./video"
 export type { VideoEmbedProps } from "./video"
+export { StlViewer, isStlUrl, parseStl } from "./stl"
+export type { StlMesh, StlViewerProps } from "./stl"
+export { StrudelPlayer, isStrudelFile, isStrudelLanguage } from "./strudel"
+export type { StrudelPlayerProps } from "./strudel"
 export { OpenApiOperation } from "./openapi/OpenApiOperation"
 export { createInlineDemoProject, createReactDemoFiles } from "./playground/project"
 export type {

package/src/playground/ReactCodePreview.tsx

@@ -128,6 +128,14 @@ export function useAlmostNodeServer({ files, port = 4173, run, workspaceOptions,
           },
         })
 
+        // The iframe's virtual URL only works once the host page is controlled. Do not
+        // reload the host when a reader opens its first live example.
+        await workspace.container.serverBridge.ensureServiceWorkerReady({ reloadOnFirstControl: false })
+        if (cancelled) {
+          workspace.dispose()
+          return
+        }
+
         const result = await workspace.container.run(`vite --port ${port}`, {
           env: DETACHED_SERVER_ENV,
         })

package/src/stl/StlViewer.tsx

@@ -0,0 +1,334 @@
+import { useCallback, useEffect, useRef, useState, type KeyboardEvent, type PointerEvent } from "react"
+import { parseStl, type StlMesh } from "./parse"
+
+export interface StlViewerProps {
+  /** URL of a binary or ASCII `.stl` file. */
+  src: string
+  title?: string
+  className?: string
+  /** Model color; any CSS color. Defaults to the element's `color` (the theme's primary). */
+  color?: string
+  /** Turn slowly until the reader interacts. Ignored under prefers-reduced-motion. Defaults to true. */
+  autoRotate?: boolean
+}
+
+const VERTEX = `
+attribute vec3 aPosition;
+attribute vec3 aNormal;
+uniform mat4 uModel;
+uniform mat4 uProjection;
+uniform float uDistance;
+varying vec3 vNormal;
+void main() {
+  vec4 p = uModel * vec4(aPosition, 1.0);
+  vNormal = mat3(uModel) * aNormal;
+  gl_Position = uProjection * vec4(p.xyz - vec3(0.0, 0.0, uDistance), 1.0);
+}`
+
+const FRAGMENT = `
+precision mediump float;
+uniform vec3 uColor;
+varying vec3 vNormal;
+void main() {
+  vec3 n = normalize(vNormal);
+  if (!gl_FrontFacing) n = -n;
+  float key = max(dot(n, normalize(vec3(0.45, 0.65, 0.6))), 0.0);
+  float fill = max(dot(n, normalize(vec3(-0.6, -0.2, 0.4))), 0.0);
+  float sky = 0.5 + 0.5 * n.y;
+  vec3 c = uColor * (0.28 + 0.14 * sky + 0.62 * key + 0.18 * fill);
+  float spec = pow(max(dot(n, normalize(vec3(0.45, 0.65, 0.6) + vec3(0.0, 0.0, 1.0))), 0.0), 48.0);
+  gl_FragColor = vec4(c + vec3(0.12 * spec), 1.0);
+}`
+
+const FOV = (35 * Math.PI) / 180
+const HOME = { yaw: -0.6, pitch: 0.45, zoom: 1 }
+
+type View = typeof HOME
+
+// Column-major 4×4: rotate (pitch about X, then yaw about Y) a model that was centered,
+// scaled to a unit sphere and turned Z-up → Y-up (the STL convention → the screen's).
+function modelMatrix(mesh: StlMesh, { yaw, pitch }: View): Float32Array {
+  const c = mesh.min.map((v, i) => (v + mesh.max[i]!) / 2)
+  const r = Math.hypot(...mesh.max.map((v, i) => (v - mesh.min[i]!) / 2)) || 1
+  const s = 1 / r
+  const cy = Math.cos(yaw), sy = Math.sin(yaw), cp = Math.cos(pitch), sp = Math.sin(pitch)
+  // R = Rx(pitch) · Ry(yaw) · Rx(-90°); rows of R written as columns below.
+  // Rx(-90°) maps (x, y, z) → (x, z, -y).
+  const ry = [
+    [cy, 0, sy],
+    [0, 1, 0],
+    [-sy, 0, cy],
+  ]
+  const rx = [
+    [1, 0, 0],
+    [0, cp, -sp],
+    [0, sp, cp],
+  ]
+  const up = [
+    [1, 0, 0],
+    [0, 0, 1],
+    [0, -1, 0],
+  ]
+  const mul = (a: number[][], b: number[][]) =>
+    a.map((row) => [0, 1, 2].map((j) => row[0]! * b[0]![j]! + row[1]! * b[1]![j]! + row[2]! * b[2]![j]!))
+  const R = mul(mul(rx, ry), up)
+  const m = new Float32Array(16)
+  for (let col = 0; col < 3; col++) for (let row = 0; row < 3; row++) m[col * 4 + row] = R[row]![col]! * s
+  for (let row = 0; row < 3; row++) m[12 + row] = -s * (R[row]![0]! * c[0]! + R[row]![1]! * c[1]! + R[row]![2]! * c[2]!)
+  m[15] = 1
+  return m
+}
+
+function perspective(aspect: number): Float32Array {
+  const f = 1 / Math.tan(FOV / 2), near = 0.05, far = 100
+  const m = new Float32Array(16)
+  m[0] = f / aspect
+  m[5] = f
+  m[10] = (far + near) / (near - far)
+  m[11] = -1
+  m[14] = (2 * far * near) / (near - far)
+  return m
+}
+
+// Resolve any CSS color (oklch, var(), named…) to linear-ish RGB floats via a 1×1 canvas.
+function cssColor(color: string): [number, number, number] {
+  const ctx = document.createElement("canvas").getContext("2d")
+  if (!ctx) return [0.4, 0.45, 0.95]
+  ctx.fillStyle = "#6670f2"
+  ctx.fillStyle = color
+  ctx.fillRect(0, 0, 1, 1)
+  const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data
+  return [r! / 255, g! / 255, b! / 255]
+}
+
+function compile(gl: WebGLRenderingContext, type: number, source: string): WebGLShader {
+  const shader = gl.createShader(type)!
+  gl.shaderSource(shader, source)
+  gl.compileShader(shader)
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader) ?? "shader")
+  return shader
+}
+
+function formatSize(mesh: StlMesh): string {
+  const d = mesh.max.map((v, i) => v - mesh.min[i]!)
+  const fmt = (n: number) => (n >= 100 ? n.toFixed(0) : n >= 10 ? n.toFixed(1) : n.toFixed(2))
+  return d.map(fmt).join(" × ")
+}
+
+type Status = { kind: "loading" } | { kind: "error"; message: string } | { kind: "ready"; mesh: StlMesh }
+
+/** Interactive WebGL preview of an `.stl` model: drag to orbit, pinch / ⌘-scroll or +/− to zoom, double-click to reset. */
+export function StlViewer({ src, title, className, color, autoRotate = true }: StlViewerProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const [status, setStatus] = useState<Status>({ kind: "loading" })
+  const view = useRef<View>({ ...HOME })
+  const spinning = useRef(autoRotate)
+  const draw = useRef<() => void>(() => {})
+  const drag = useRef<{ x: number; y: number; id: number } | null>(null)
+
+  useEffect(() => {
+    let live = true
+    setStatus({ kind: "loading" })
+    fetch(src)
+      .then((res) => {
+        if (!res.ok) throw new Error(`${res.status} ${res.statusText}`.trim())
+        return res.arrayBuffer()
+      })
+      .then((buf) => live && setStatus({ kind: "ready", mesh: parseStl(buf) }))
+      .catch((err: unknown) => live && setStatus({ kind: "error", message: err instanceof Error ? err.message : String(err) }))
+    return () => {
+      live = false
+    }
+  }, [src])
+
+  const mesh = status.kind === "ready" ? status.mesh : null
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas || !mesh) return
+    const gl = canvas.getContext("webgl", { antialias: true, alpha: true, premultipliedAlpha: true })
+    if (!gl) {
+      setStatus({ kind: "error", message: "WebGL is unavailable" })
+      return
+    }
+    const program = gl.createProgram()!
+    gl.attachShader(program, compile(gl, gl.VERTEX_SHADER, VERTEX))
+    gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, FRAGMENT))
+    gl.linkProgram(program)
+    gl.useProgram(program)
+    const buffer = (data: Float32Array, name: string) => {
+      const b = gl.createBuffer()
+      gl.bindBuffer(gl.ARRAY_BUFFER, b)
+      gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW)
+      const loc = gl.getAttribLocation(program, name)
+      gl.enableVertexAttribArray(loc)
+      gl.vertexAttribPointer(loc, 3, gl.FLOAT, false, 0, 0)
+      return b
+    }
+    const buffers = [buffer(mesh.positions, "aPosition"), buffer(mesh.normals, "aNormal")]
+    const uModel = gl.getUniformLocation(program, "uModel")
+    const uProjection = gl.getUniformLocation(program, "uProjection")
+    const uDistance = gl.getUniformLocation(program, "uDistance")
+    const uColor = gl.getUniformLocation(program, "uColor")
+    gl.enable(gl.DEPTH_TEST)
+
+    const resolveColor = () => cssColor(color ?? getComputedStyle(canvas).color)
+    let rgb = resolveColor()
+    let frame = 0
+    const render = () => {
+      frame = 0
+      const dpr = Math.min(window.devicePixelRatio || 1, 2)
+      const w = Math.max(1, Math.round(canvas.clientWidth * dpr))
+      const h = Math.max(1, Math.round(canvas.clientHeight * dpr))
+      if (canvas.width !== w || canvas.height !== h) {
+        canvas.width = w
+        canvas.height = h
+      }
+      gl.viewport(0, 0, w, h)
+      gl.clearColor(0, 0, 0, 0)
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
+      gl.uniformMatrix4fv(uModel, false, modelMatrix(mesh, view.current))
+      gl.uniformMatrix4fv(uProjection, false, perspective(w / h))
+      // Fit the unit sphere with a little margin, then apply zoom.
+      gl.uniform1f(uDistance, (1.12 / Math.sin(FOV / 2)) / view.current.zoom)
+      gl.uniform3fv(uColor, rgb)
+      gl.drawArrays(gl.TRIANGLES, 0, mesh.triangles * 3)
+      if (spinning.current) {
+        view.current.yaw += 0.006
+        frame = requestAnimationFrame(render)
+      }
+    }
+    draw.current = () => {
+      if (!frame) frame = requestAnimationFrame(render)
+    }
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) spinning.current = false
+    draw.current()
+    const resize = new ResizeObserver(() => draw.current())
+    resize.observe(canvas)
+    // Theme switches change `color`; redraw so the model follows.
+    const theme = new MutationObserver(() => {
+      rgb = resolveColor()
+      draw.current()
+    })
+    theme.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme", "style"] })
+    return () => {
+      cancelAnimationFrame(frame)
+      resize.disconnect()
+      theme.disconnect()
+      draw.current = () => {}
+      buffers.forEach((b) => gl.deleteBuffer(b))
+      gl.deleteProgram(program)
+    }
+  }, [mesh, color])
+
+  const stop = () => {
+    spinning.current = false
+  }
+  const update = useCallback((next: Partial<View>) => {
+    const v = view.current
+    Object.assign(v, next)
+    v.pitch = Math.max(-1.5, Math.min(1.5, v.pitch))
+    v.zoom = Math.max(0.3, Math.min(8, v.zoom))
+    draw.current()
+  }, [])
+  const reset = () => {
+    stop()
+    update({ ...HOME })
+  }
+
+  const onPointerDown = (e: PointerEvent<HTMLCanvasElement>) => {
+    stop()
+    e.currentTarget.setPointerCapture(e.pointerId)
+    drag.current = { x: e.clientX, y: e.clientY, id: e.pointerId }
+  }
+  const onPointerMove = (e: PointerEvent<HTMLCanvasElement>) => {
+    const d = drag.current
+    if (!d || d.id !== e.pointerId) return
+    const v = view.current
+    update({ yaw: v.yaw + (e.clientX - d.x) * 0.01, pitch: v.pitch + (e.clientY - d.y) * 0.01 })
+    d.x = e.clientX
+    d.y = e.clientY
+  }
+  const onPointerUp = () => {
+    drag.current = null
+  }
+  // Plain scrolling keeps scrolling the page; pinch (ctrlKey) and ⌘/Ctrl-scroll zoom.
+  const onWheel = (e: WheelEvent) => {
+    if (!e.ctrlKey && !e.metaKey) return
+    e.preventDefault()
+    stop()
+    update({ zoom: view.current.zoom * Math.exp(-e.deltaY * 0.01) })
+  }
+  const onKeyDown = (e: KeyboardEvent<HTMLCanvasElement>) => {
+    const v = view.current
+    const step = 0.15
+    const next: Record<string, Partial<View>> = {
+      ArrowLeft: { yaw: v.yaw - step },
+      ArrowRight: { yaw: v.yaw + step },
+      ArrowUp: { pitch: v.pitch - step },
+      ArrowDown: { pitch: v.pitch + step },
+      "+": { zoom: v.zoom * 1.2 },
+      "=": { zoom: v.zoom * 1.2 },
+      "-": { zoom: v.zoom / 1.2 },
+      "0": { ...HOME },
+    }
+    const change = next[e.key]
+    if (!change) return
+    e.preventDefault()
+    stop()
+    update(change)
+  }
+
+  // React attaches wheel listeners passively; zoom needs preventDefault, so bind natively.
+  const wheelRef = useRef(onWheel)
+  wheelRef.current = onWheel
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const listener = (e: WheelEvent) => wheelRef.current(e)
+    canvas.addEventListener("wheel", listener, { passive: false })
+    return () => canvas.removeEventListener("wheel", listener)
+  }, [mesh])
+
+  const label = title ?? src.split(/[?#]/)[0]!.split("/").pop() ?? "STL model"
+  return (
+    <figure className={`docstream-stl ${className ?? ""}`.trim()} data-state={status.kind}>
+      <div className="docstream-stl__stage">
+        {mesh ? (
+          <canvas
+            ref={canvasRef}
+            className="docstream-stl__canvas"
+            tabIndex={0}
+            role="img"
+            aria-label={`${label}: 3D model. Drag or use arrow keys to rotate, plus and minus to zoom, 0 to reset.`}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
+            onPointerCancel={onPointerUp}
+            onDoubleClick={reset}
+            onKeyDown={onKeyDown}
+          />
+        ) : (
+          <div className="docstream-stl__status" role={status.kind === "error" ? "alert" : "status"}>
+            {status.kind === "error" ? `Couldn't load ${label}: ${status.message}` : `Loading ${label}…`}
+          </div>
+        )}
+        {mesh && (
+          <button type="button" className="docstream-stl__reset" onClick={reset} aria-label="Reset view">
+            Reset
+          </button>
+        )}
+      </div>
+      <figcaption className="docstream-stl__caption">
+        <a href={src} target="_blank" rel="noreferrer" download>
+          {label}
+        </a>
+        {mesh && (
+          <span>
+            {mesh.triangles.toLocaleString()} triangles · {formatSize(mesh)}
+          </span>
+        )}
+      </figcaption>
+    </figure>
+  )
+}

package/src/stl/index.ts

@@ -0,0 +1,4 @@
+export { StlViewer } from "./StlViewer"
+export type { StlViewerProps } from "./StlViewer"
+export { isStlUrl, parseStl } from "./parse"
+export type { StlMesh } from "./parse"