@brett_lamy/docstream 0.5.5 → 0.5.7

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@brett_lamy/docstream",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "GitBook-aware readonly markdown and AI stream renderer.",
+  "publishConfig": {
+    "access": "public"
+  },
   "type": "module",
   "scripts": {
     "typecheck": "tsc -p tsconfig.json --noEmit",
@@ -71,9 +74,8 @@
   "dependencies": {
     "@brett_lamy/viz-engine": ">=0.2.0",
     "framer-motion": "^13.1.1",
-    "hast-util-to-html": "^9.0.5",
     "katex": "^0.18.5",
-    "lowlight": "^3.3.0",
+    "gpu-lexer": "^0.0.2",
     "lucide-react": "^1.17.0",
     "mermaid": "^11.15.0",
     "rrweb": "2.0.0-alpha.20",

package/src/docs/DocsRenderer.tsx

@@ -29,6 +29,8 @@ export interface LivePreviewProps {
   files: Record<string, string>
   entry: string
   title: string
+  collapsedCodeLines?: number
+  expandedCodeLines?: number
 }
 
 export type LivePreviewRenderer = (props: LivePreviewProps) => ReactNode
@@ -146,13 +148,23 @@ function BlockView({ block, liveRenderer, sourceRenderer }: { block: Block } & R
       )
     }
     case "code":
-      if (block.language === "mermaid") return <Mermaid code={block.code} />
+      if (block.language === "mermaid") {
+        return (
+          <Mermaid
+            code={block.code}
+            collapsedCodeLines={block.collapsedCodeLines}
+            expandedCodeLines={block.expandedCodeLines}
+          />
+        )
+      }
       if (block.live && isReactLanguage(block.language) && liveRenderer) {
         const entry = block.entry ?? "/src/main.jsx"
         return liveRenderer({
           files: { [entry]: block.code },
           entry,
           title: block.title ?? "Live React preview",
+          collapsedCodeLines: block.collapsedCodeLines,
+          expandedCodeLines: block.expandedCodeLines,
         })
       }
       return (

package/src/docs/HighlightedCode.tsx

@@ -1,71 +1,58 @@
-import { useMemo } from "react"
-import { common, createLowlight } from "lowlight"
-import { toHtml } from "hast-util-to-html"
+import { useEffect, useMemo, useState } from "react"
+import { parse } from "gpu-lexer"
 
-const lowlight = createLowlight(common)
+type Span = {
+  type: "plain" | "comment" | "string" | "number" | "keyword" | "type" | "function" | "constant" | "operator"
+  start: number
+  end: number
+}
 
-const LANGUAGE_ALIASES: Record<string, string> = {
-  js: "javascript",
-  jsx: "javascript",
-  sh: "bash",
-  shell: "bash",
-  ts: "typescript",
-  tsx: "typescript",
-  yml: "yaml",
+const COLORS: Record<Span["type"], string | undefined> = {
+  plain: undefined, comment: "#6B6B78", string: "#A5D6A7", number: "#F78C6C",
+  keyword: "#C792EA", type: "#FFCB6B", function: "#82AAFF", constant: "#F07178", operator: "#89DDFF",
 }
 
-function normalizeLanguage(language: string | null) {
-  if (!language) return null
-  const normalized = language.toLowerCase()
-  return LANGUAGE_ALIASES[normalized] ?? normalized
+function escapeHtml(value: string) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;")
 }
 
-function highlightedHtml(code: string, language: string | null) {
-  const normalized = normalizeLanguage(language)
-  if (normalized && lowlight.registered(normalized)) {
-    try {
-      return toHtml(lowlight.highlight(normalized, code))
-    } catch {
-      /* fall through to plain */
-    }
-  }
-  return null
+function spansToHtml(code: string, spans: Span[]) {
+  let cursor = 0
+  return spans.map((span) => {
+    const prefix = escapeHtml(code.slice(cursor, span.start))
+    const text = escapeHtml(code.slice(span.start, span.end))
+    cursor = span.end
+    const color = COLORS[span.type]
+    return `${prefix}${color ? `<span style="color:${color}">${text}</span>` : text}`
+  }).join("") + escapeHtml(code.slice(cursor))
 }
 
-export function HighlightedCode({
-  code,
-  language,
-  lineNumbers = false,
-}: {
+export function HighlightedCode({ code, language: _language, lineNumbers = false }: {
   code: string
   language: string | null
   lineNumbers?: boolean
 }) {
   const lines = useMemo(() => code.split("\n"), [code])
-  const html = useMemo(() => {
-    if (lineNumbers) {
-      return lines.map((line) => highlightedHtml(line || " ", language))
-    }
-    return highlightedHtml(code, language)
-  }, [code, language, lineNumbers, lines])
+  const [spans, setSpans] = useState<Span[] | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    setSpans(null)
+    parse(code).then((result) => { if (!cancelled) setSpans(result) }).catch(() => { if (!cancelled) setSpans([]) })
+    return () => { cancelled = true }
+  }, [code])
 
-  if (lineNumbers) {
-    return (
-      <code className="hljs">
-        {(html as Array<string | null>).map((lineHtml, index) => (
-          <span key={index} className="docs-code-line">
-            <span className="docs-code-lineno">{index + 1}</span>
-            {lineHtml === null ? (
-              <span>{lines[index]}</span>
-            ) : (
-              <span dangerouslySetInnerHTML={{ __html: lineHtml }} />
-            )}
-          </span>
-        ))}
-      </code>
-    )
-  }
+  const html = useMemo(() => spans && spans.length ? spansToHtml(code, spans) : null, [code, spans])
+  if (!lineNumbers) return html === null ? <code>{code}</code> : <code dangerouslySetInnerHTML={{ __html: html }} />
 
-  if (html === null) return <code>{code}</code>
-  return <code className="hljs" dangerouslySetInnerHTML={{ __html: html as string }} />
+  return <code>{lines.map((line, index) => {
+    const start = lines.slice(0, index).reduce((total, value) => total + value.length + 1, 0)
+    const lineSpans = spans?.filter((span) => span.start >= start && span.end <= start + line.length)
+      .map((span) => ({ ...span, start: span.start - start, end: span.end - start }))
+    const lineHtml = lineSpans?.length ? spansToHtml(line, lineSpans) : null
+    return <span key={index} className="docs-code-line">
+      <span className="docs-code-lineno">{index + 1}</span>
+      {lineHtml === null ? <span>{line}</span> : <span dangerouslySetInnerHTML={{ __html: lineHtml }} />}
+    </span>
+  })}</code>
 }

package/src/docs/Mermaid.tsx

@@ -1,11 +1,26 @@
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useId, useRef, useState, type CSSProperties } from "react"
+import { HighlightedCode } from "./HighlightedCode"
 
 let seq = 0
 
-export function Mermaid({ code }: { code: string }) {
+export interface MermaidProps {
+  code: string
+  collapsedCodeLines?: number
+  expandedCodeLines?: number
+}
+
+function positiveLineCount(value: number | undefined, fallback: number): number {
+  return value !== undefined && Number.isFinite(value) && value > 0 ? Math.floor(value) : fallback
+}
+
+export function Mermaid({ code, collapsedCodeLines = 3, expandedCodeLines = 30 }: MermaidProps) {
   const [svg, setSvg] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
+  const [codeExpanded, setCodeExpanded] = useState(false)
   const idRef = useRef(`mermaid-${++seq}`)
+  const codePanelId = useId()
+  const collapsedLines = positiveLineCount(collapsedCodeLines, 3)
+  const expandedLines = Math.max(collapsedLines, positiveLineCount(expandedCodeLines, 30))
 
   useEffect(() => {
     let cancelled = false
@@ -23,15 +38,35 @@ export function Mermaid({ code }: { code: string }) {
     }
   }, [code])
 
-  if (error) {
-    return (
-      <pre className="docs-mermaid-error">
-        mermaid error: {error}
-        {"\n"}
-        {code}
-      </pre>
-    )
-  }
-  if (!svg) return <div className="docs-mermaid">Rendering diagram…</div>
-  return <div className="docs-mermaid" dangerouslySetInnerHTML={{ __html: svg }} />
+  return (
+    <section className="docs-mermaid-preview" data-docstream-mermaid="">
+      {error ? (
+        <pre className="docs-mermaid-error">mermaid error: {error}</pre>
+      ) : svg ? (
+        <div className="docs-mermaid" dangerouslySetInnerHTML={{ __html: svg }} />
+      ) : (
+        <div className="docs-mermaid">Rendering diagram…</div>
+      )}
+      <div className="docs-react-demo-code docs-mermaid-code">
+        <pre
+          id={codePanelId}
+          className={codeExpanded ? "docs-react-demo-code-body docs-react-demo-code-body-expanded" : "docs-react-demo-code-body"}
+          style={{
+            "--docs-react-demo-code-lines": codeExpanded ? expandedLines : collapsedLines,
+          } as CSSProperties}
+        >
+          <HighlightedCode code={code} language="mermaid" lineNumbers />
+        </pre>
+        <button
+          type="button"
+          className="docs-react-demo-code-toggle"
+          aria-controls={codePanelId}
+          aria-expanded={codeExpanded}
+          onClick={() => setCodeExpanded((value) => !value)}
+        >
+          {codeExpanded ? "Hide Code" : "View Code"}
+        </button>
+      </div>
+    </section>
+  )
 }

package/src/gitbook/ast.ts

@@ -68,6 +68,10 @@ export interface CodeBlockNode {
   live?: boolean
   /** Project-relative entry file used by a live preview. */
   entry?: string | null
+  /** Source lines visible before an expandable code preview is opened. */
+  collapsedCodeLines?: number
+  /** Maximum source lines visible before expanded code scrolls. */
+  expandedCodeLines?: number
 }
 
 export interface HintNode {

package/src/gitbook/parse.ts

@@ -71,6 +71,12 @@ function booleanAttr(attrs: Record<string, string>, key: string): boolean | unde
   return attrs[key] !== "false"
 }
 
+function positiveNumberAttr(attrs: Record<string, string>, key: string): number | undefined {
+  if (!(key in attrs)) return undefined
+  const value = Number(attrs[key])
+  return Number.isFinite(value) && value > 0 ? Math.floor(value) : undefined
+}
+
 interface TemplateTag {
   name: string
   attrs: Record<string, string>
@@ -447,6 +453,12 @@ export function parseBlocks(lines: string[]): Block[] {
         code: code.join("\n"),
         ...(booleanAttr(attrs, "live") === undefined ? {} : { live: booleanAttr(attrs, "live") }),
         ...(attrs.entry ? { entry: attrs.entry } : {}),
+        ...(positiveNumberAttr(attrs, "collapsedCodeLines") === undefined
+          ? {}
+          : { collapsedCodeLines: positiveNumberAttr(attrs, "collapsedCodeLines") }),
+        ...(positiveNumberAttr(attrs, "expandedCodeLines") === undefined
+          ? {}
+          : { expandedCodeLines: positiveNumberAttr(attrs, "expandedCodeLines") }),
       })
       continue
     }

package/src/gitbook/serialize.ts

@@ -39,6 +39,8 @@ function serializeBlock(b: Block): string {
         !b.lineNumbers ? `lineNumbers="false"` : "",
         b.live ? `live="true"` : "",
         b.entry ? `entry="${b.entry}"` : "",
+        b.collapsedCodeLines ? `collapsedCodeLines="${b.collapsedCodeLines}"` : "",
+        b.expandedCodeLines ? `expandedCodeLines="${b.expandedCodeLines}"` : "",
       ].filter(Boolean)
       const info = [b.language ?? "", ...attrs].filter(Boolean).join(" ")
       return `\`\`\`${info}\n${b.code}\n\`\`\``

package/src/playground/PlaygroundStreamdown.tsx

@@ -29,8 +29,14 @@ export function PlaygroundStreamdown({
     () => parseMarkdown(isStreaming ? trimPartialInlineToken(content) : content),
     [content, isStreaming]
   )
-  const liveRenderer: LivePreviewRenderer = ({ files, entry, title }) => (
-    <ReactCodePreview files={files} entry={entry} title={title} />
+  const liveRenderer: LivePreviewRenderer = ({ files, entry, title, collapsedCodeLines, expandedCodeLines }) => (
+    <ReactCodePreview
+      files={files}
+      entry={entry}
+      title={title}
+      collapsedCodeLines={collapsedCodeLines}
+      expandedCodeLines={expandedCodeLines}
+    />
   )
 
   return (

package/src/styles.css

@@ -123,15 +123,29 @@
   padding-left: 1.5em;
 }
 
-.docs-article .docs-tasklist {
+.docs-tasklist {
   list-style: none;
   padding-left: 0.2em;
 }
 
-.docs-article .docs-tasklist li {
+.docs-tasklist li {
   display: flex;
   gap: 8px;
-  align-items: baseline;
+  align-items: flex-start;
+}
+
+.docs-tasklist li > input {
+  flex: 0 0 auto;
+  margin-top: 0.45em;
+}
+
+.docs-tasklist .docs-blocks-inline {
+  flex: 1;
+  min-width: 0;
+}
+
+.docs-tasklist .docs-blocks-inline > p:first-child {
+  margin: 0;
 }
 
 .docs-article blockquote {
@@ -549,12 +563,16 @@
   margin-top: 4px;
 }
 
+.docs-mermaid-preview {
+  border: 1px solid var(--gb-border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
 .docs-mermaid {
   display: flex;
   justify-content: center;
   padding: 16px;
-  border: 1px solid var(--gb-border);
-  border-radius: 12px;
   background: var(--background, #ffffff);
 }
 
@@ -563,14 +581,17 @@
 }
 
 .docs-mermaid-error {
+  margin: 0;
   font-size: 12px;
   color: var(--gb-danger);
-  border: 1px solid var(--gb-border);
-  border-radius: 8px;
   padding: 10px;
   white-space: pre-wrap;
 }
 
+.docs-mermaid-code {
+  border-top: 1px solid var(--gb-border);
+}
+
 .docs-inline-img {
   display: inline-block;
   vertical-align: middle;