@brett_lamy/docstream 0.5.2 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brett_lamy/docstream",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "GitBook-aware readonly markdown and AI stream renderer.",
   "type": "module",
   "scripts": {
@@ -70,6 +70,7 @@
   },
   "dependencies": {
     "@brett_lamy/viz-engine": ">=0.2.0",
+    "framer-motion": "^13.1.1",
     "hast-util-to-html": "^9.0.5",
     "lowlight": "^3.3.0",
     "lucide-react": "^1.17.0",

package/src/docs/DocsRenderer.tsx

@@ -1,4 +1,5 @@
 import { useState, type ReactNode } from "react"
+import { LayoutGroup, motion } from "framer-motion"
 import {
   AlertTriangle,
   CheckCircle2,
@@ -92,18 +93,30 @@ function Tabs({ block, liveRenderer, sourceRenderer }: { block: Extract<Block, {
   const [active, setActive] = useState(0)
   return (
     <div className="docs-tabs">
-      <div className="docs-tabs-header">
-        {block.tabs.map((t, i) => (
-          <button
-            key={i}
-            className={i === active ? "docs-tab-active" : ""}
-            onClick={() => setActive(i)}
-          >
-            {t.title}
-          </button>
-        ))}
-      </div>
-      <div className="docs-tabs-body">
+      <LayoutGroup>
+        <div className="docs-tabs-header" role="tablist" aria-label="Content tabs">
+          {block.tabs.map((t, i) => (
+            <button
+              key={i}
+              type="button"
+              role="tab"
+              aria-selected={i === active}
+              className={i === active ? "docs-tab-active" : ""}
+              onClick={() => setActive(i)}
+            >
+              {i === active ? (
+                <motion.span
+                  className="docs-tab-indicator"
+                  layoutId="docs-tab-indicator"
+                  transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
+                />
+              ) : null}
+              <span className="docs-tab-label">{t.title}</span>
+            </button>
+          ))}
+        </div>
+      </LayoutGroup>
+      <div className="docs-tabs-body" role="tabpanel">
         <Blocks blocks={block.tabs[active]?.children ?? []} liveRenderer={liveRenderer} sourceRenderer={sourceRenderer} />
       </div>
     </div>

package/src/gitbook/parse.ts

@@ -225,7 +225,7 @@ export function parseBlocks(lines: string[]): Block[] {
         const code = inner.find((b) => b.type === "code")
         if (code && code.type === "code") {
           code.title = tag.attrs.title ?? null
-          code.lineNumbers = tag.attrs.lineNumbers === "true"
+          code.lineNumbers = booleanAttr(tag.attrs, "lineNumbers") ?? booleanAttr(tag.attrs, "showLineNumbers") ?? true
           code.live = tag.attrs.live === "true"
           code.entry = tag.attrs.entry ?? null
           blocks.push(code)
@@ -428,13 +428,14 @@ export function parseBlocks(lines: string[]): Block[] {
     }
 
     // fenced code (``` or ~~~)
-    const fence = trimmed.match(/^(`{3,}|~{3,})(\S*)\s*$/)
+    const fence = trimmed.match(/^(`{3,}|~{3,})([^\s`]*)?(?:\s+(.*?))?\s*$/)
     if (fence) {
       flushParagraph()
       const marker = fence[1][0]
+      const attrs = parseAttrs(fence[3])
       const code: string[] = []
       i++
-      while (i < lines.length && !lines[i].trim().startsWith(marker.repeat(3))) {
+      while (i < lines.length && !lines[i].trim().startsWith(fence[1])) {
         code.push(lines[i])
         i++
       }
@@ -442,9 +443,11 @@ export function parseBlocks(lines: string[]): Block[] {
       blocks.push({
         type: "code",
         language: fence[2] || null,
-        title: null,
-        lineNumbers: false,
+        title: attrs.title ?? null,
+        lineNumbers: booleanAttr(attrs, "lineNumbers") ?? booleanAttr(attrs, "showLineNumbers") ?? true,
         code: code.join("\n"),
+        ...(booleanAttr(attrs, "live") === undefined ? {} : { live: booleanAttr(attrs, "live") }),
+        ...(attrs.entry ? { entry: attrs.entry } : {}),
       })
       continue
     }
@@ -459,7 +462,7 @@ export function parseBlocks(lines: string[]): Block[] {
         code.push(lines[i].slice(4))
         i++
       }
-      blocks.push({ type: "code", language: null, title: null, lineNumbers: false, code: code.join("\n") })
+      blocks.push({ type: "code", language: null, title: null, lineNumbers: true, code: code.join("\n") })
       continue
     }
 

package/src/gitbook/serialize.ts

@@ -34,18 +34,14 @@ function serializeBlock(b: Block): string {
     }
 
     case "code": {
-      const fence = "```" + (b.language ?? "")
-      const body = `${fence}\n${b.code}\n\`\`\``
-      if (b.title || b.lineNumbers || b.live || b.entry) {
-        const attrs = [
-          b.title ? ` title="${b.title}"` : "",
-          b.lineNumbers ? ` lineNumbers="true"` : "",
-          b.live ? ` live="true"` : "",
-          b.entry ? ` entry="${b.entry}"` : "",
-        ].join("")
-        return `{% code${attrs} %}\n${body}\n{% endcode %}`
-      }
-      return body
+      const attrs = [
+        b.title ? `title="${b.title}"` : "",
+        !b.lineNumbers ? `lineNumbers="false"` : "",
+        b.live ? `live="true"` : "",
+        b.entry ? `entry="${b.entry}"` : "",
+      ].filter(Boolean)
+      const info = [b.language ?? "", ...attrs].filter(Boolean).join(" ")
+      return `\`\`\`${info}\n${b.code}\n\`\`\``
     }
 
     case "hint":

package/src/styles.css

@@ -176,6 +176,7 @@
 
 .docs-hint {
   display: flex;
+  align-items: center;
   gap: 12px;
   padding: 14px 16px;
   border-radius: 12px;
@@ -186,7 +187,6 @@
   width: 18px;
   height: 18px;
   flex-shrink: 0;
-  margin-top: 3px;
 }
 
 .docs-hint > div {
@@ -194,6 +194,14 @@
   min-width: 0;
 }
 
+.docs-hint > div > :first-child {
+  margin-top: 0;
+}
+
+.docs-hint > div > :last-child {
+  margin-bottom: 0;
+}
+
 .docs-hint-info {
   border-color: var(--gb-info-border);
   background: var(--gb-info-bg);
@@ -234,31 +242,77 @@
   border: 1px solid var(--gb-border);
   border-radius: 12px;
   overflow: hidden;
+  background: var(--gb-panel);
 }
 
 .docs-tabs-header {
   display: flex;
+  width: fit-content;
+  max-width: calc(100% - 24px);
   gap: 2px;
-  padding: 6px 8px 0;
+  margin: 10px auto 0;
+  padding: 4px;
+  overflow-x: auto;
+  border: 1px solid var(--gb-border);
+  border-radius: 999px;
   background: var(--gb-muted);
-  border-bottom: 1px solid var(--gb-border);
 }
 
 .docs-tabs-header button {
+  position: relative;
+  z-index: 0;
+  flex: 0 0 auto;
+  border: 0;
+  border-radius: 999px;
   padding: 7px 14px;
+  background: transparent;
+  font: inherit;
   font-size: 13.5px;
-  border-radius: 8px 8px 0 0;
+  line-height: 1.25;
   color: var(--gb-muted-foreground);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: color 160ms ease;
 }
 
 .docs-tabs-header .docs-tab-active {
-  background: var(--background, #ffffff);
-  color: var(--foreground, #18181b);
-  font-weight: 500;
+  color: var(--gb-panel-foreground);
+  font-weight: 600;
+}
+
+.docs-tabs-header button:hover:not(.docs-tab-active) {
+  color: var(--gb-panel-foreground);
+}
+
+.docs-tabs-header button:focus-visible {
+  outline: 2px solid var(--gb-primary);
+  outline-offset: 2px;
+}
+
+.docs-tab-indicator {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border: 1px solid var(--gb-border);
+  border-radius: inherit;
+  background: var(--gb-panel);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 6px rgba(15, 23, 42, 0.06);
+}
+
+.docs-tab-label {
+  position: relative;
 }
 
 .docs-tabs-body {
+  margin-top: 10px;
   padding: 14px 16px;
+  border-top: 1px solid var(--gb-border);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .docs-tabs-header button {
+    transition: none;
+  }
 }
 
 .docs-expandable {