@brett_lamy/docstream 0.5.6 → 0.6.0

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@brett_lamy/docstream",
-  "version": "0.5.6",
+  "version": "0.6.0",
   "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/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/reference.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useId, useState, type ReactNode } from "react"
-import { ArrowUpRight, AtSign, Globe, Hash } from "lucide-react"
+import { ArrowUpRight, AtSign, FolderGit2, Globe, Hash } from "lucide-react"
 
 import type { CitationDef, ReferenceNode } from "../gitbook/ast"
 
@@ -112,7 +112,7 @@ export function InlineReference({ node }: { node: ReferenceNode }) {
     )
   }
 
-  const Icon = node.kind === "mention" ? AtSign : Hash
+  const Icon = node.kind === "mention" ? AtSign : node.kind === "codebase" ? FolderGit2 : Hash
   return (
     <button
       type="button"

package/src/gitbook/ast.ts

@@ -23,7 +23,7 @@ export interface InlineImageNode {
   link?: string
 }
 
-export type ReferenceKind = "mention" | "tag" | "citation"
+export type ReferenceKind = "mention" | "tag" | "codebase" | "citation"
 
 /**
  * Inline reference chip: `@mention`, `#tag`, or footnote-style citation `[^id]`.

package/src/gitbook/inline.ts

@@ -10,8 +10,13 @@ export const refDefinitions = new Map<string, string>()
 // parseMarkdown and consumed here to resolve [^id] markers.
 export const footnoteDefinitions = new Map<string, { url: string; label?: string }>()
 
-// @mention / #tag body: letter/underscore start, then word chars, dots, dashes.
+// @mention / #tag / $codebase body: letter/underscore start, then word chars, dots,
+// dashes. Codebase ids may also carry `/` (`$org/repo`). A letter start keeps prices
+// like $5 plain text.
 const REFERENCE_BODY_RE = /^[@#]([A-Za-z_][\w.-]*)/
+const CODEBASE_BODY_RE = /^\$([A-Za-z_][\w.\/-]*)/
+const SIGIL_KIND = { "@": "mention", "#": "tag", $: "codebase" } as const
+const KIND_SIGIL = { mention: "@", tag: "#", codebase: "$" } as const
 // Chips are only recognized at start-of-input or after whitespace/open brackets,
 // so brett@replay.io and C# stay plain text.
 const isReferenceBoundary = (prev: string | undefined) =>
@@ -131,14 +136,14 @@ export function parseInline(src: string, marks: Marks = {}): Inline[] {
       continue
     }
 
-    // @mention / #tag chips, only at a word boundary
-    if ((rest[0] === "@" || rest[0] === "#") && isReferenceBoundary(src[i - 1])) {
-      const m = rest.match(REFERENCE_BODY_RE)
+    // @mention / #tag / $codebase chips, only at a word boundary
+    if ((rest[0] === "@" || rest[0] === "#" || rest[0] === "$") && isReferenceBoundary(src[i - 1])) {
+      const m = rest.match(rest[0] === "$" ? CODEBASE_BODY_RE : REFERENCE_BODY_RE)
       if (m) {
-        const id = m[1].replace(/[.-]+$/, "")
+        const id = m[1].replace(/[./-]+$/, "")
         if (id) {
           flush()
-          out.push({ type: "reference", kind: rest[0] === "@" ? "mention" : "tag", id })
+          out.push({ type: "reference", kind: SIGIL_KIND[rest[0] as "@" | "#" | "$"], id })
           i += 1 + id.length
           continue
         }
@@ -200,14 +205,14 @@ export function parseInline(src: string, marks: Marks = {}): Inline[] {
 const escapeText = (t: string) =>
   t
     .replace(/([*_~`[\]\\])/g, "\\$1")
-    // Escape @/# only at a chip boundary so emails/C# survive untouched.
+    // Escape @/#/$ only at a chip boundary so emails/C#/$5 survive untouched.
     // Note: node-local — a boundary formed across adjacent inline nodes
     // (previous node ending in whitespace) is not caught; rare, accepted.
-    .replace(/(^|[\s([{])([@#])(?=[A-Za-z_])/g, "$1\\$2")
+    .replace(/(^|[\s([{])([@#$])(?=[A-Za-z_])/g, "$1\\$2")
 
 export function serializeReference(n: ReferenceNode): string {
   if (n.kind === "citation") return `[^${n.id}]`
-  return `${n.kind === "mention" ? "@" : "#"}${n.id}`
+  return `${KIND_SIGIL[n.kind]}${n.id}`
 }
 
 function serializeImage(n: InlineImageNode): string {

package/src/styles.css

@@ -1073,6 +1073,16 @@
   color: var(--gb-accent-foreground);
 }
 
+.docs-ref-codebase {
+  border: 1px solid rgba(34, 197, 94, 0.45);
+  background: rgba(34, 197, 94, 0.1);
+  color: rgb(74, 222, 128);
+}
+
+.docs-ref-codebase:hover {
+  background: rgba(34, 197, 94, 0.18);
+}
+
 .docs-cite-wrap {
   position: relative;
   display: inline-block;