@brett_lamy/docstream 0.3.7 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brett_lamy/docstream",
-  "version": "0.3.7",
+  "version": "0.4.0",
   "description": "GitBook-aware readonly markdown and AI stream renderer.",
   "type": "module",
   "scripts": {

package/src/playground/ReactCodePreview.tsx

@@ -1,7 +1,10 @@
-import { useEffect, useState, type CSSProperties } from "react"
+import { useEffect, useId, useMemo, useState, type CSSProperties } from "react"
+import { HighlightedCode } from "../docs/HighlightedCode"
 import {
   createAlmostNodeWorkspace,
   createReactDemoFiles,
+  normalizeAlmostNodeFiles,
+  normalizeAlmostNodePath,
   type AlmostNodeFiles,
   type AlmostNodeWorkspace,
   type AlmostNodeWorkspaceOptions,
@@ -16,6 +19,12 @@ export interface ReactDemoProps {
   port?: number
   /** Height of the embedded preview. */
   height?: number | string
+  /** Source file displayed below the preview. Defaults to the entry file. */
+  codeFile?: string
+  /** Number of source lines visible while the code preview is collapsed. Defaults to 3. */
+  collapsedCodeLines?: number
+  /** Maximum visible source lines before expanded code scrolls. Defaults to 30. */
+  expandedCodeLines?: number
   /** Label shown above the preview. */
   title?: string
   /** Start the runtime on mount (default true). */
@@ -43,12 +52,33 @@ function frameHeight(height: number | string): CSSProperties {
   return { height: typeof height === "number" ? `${height}px` : height }
 }
 
+function positiveLineCount(value: number, fallback: number): number {
+  return Number.isFinite(value) && value > 0 ? Math.floor(value) : fallback
+}
+
+function sourceLanguage(path: string): string | null {
+  const extension = path.split(".").pop()?.toLowerCase()
+  return extension && extension !== path ? extension : null
+}
+
+function sourceText(files: AlmostNodeFiles, requestedPath: string): string | null {
+  const normalizedPath = normalizeAlmostNodePath(requestedPath)
+  const file = normalizeAlmostNodeFiles(files).find(
+    (candidate) => normalizeAlmostNodePath(candidate.path) === normalizedPath,
+  )
+  if (!file) return null
+  return typeof file.content === "string" ? file.content : new TextDecoder().decode(file.content)
+}
+
 /** Render a multi-file React/JSX/TSX project through almost-node's Vite server. */
 export function ReactDemo({
   files,
   entry = "/src/main.jsx",
   port = 4173,
   height = 360,
+  codeFile,
+  collapsedCodeLines = 3,
+  expandedCodeLines = 30,
   title = "Live React preview",
   autoStart = true,
   sandbox = "allow-scripts allow-same-origin allow-forms allow-modals",
@@ -61,6 +91,18 @@ export function ReactDemo({
   const [state, setState] = useState<PreviewState>(autoStart ? "starting" : "idle")
   const [url, setUrl] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
+  const [codeExpanded, setCodeExpanded] = useState(false)
+  const codePanelId = useId()
+  const displayedCodeFile = codeFile ?? entry
+  const code = useMemo(
+    () => sourceText(files, displayedCodeFile),
+    [displayedCodeFile, files],
+  )
+  const collapsedLines = positiveLineCount(collapsedCodeLines, 3)
+  const expandedLines = Math.max(
+    collapsedLines,
+    positiveLineCount(expandedCodeLines, 30),
+  )
 
   useEffect(() => {
     if (!run) {
@@ -158,6 +200,32 @@ export function ReactDemo({
           {running ? "Starting almost-node…" : "Run the demo to open its virtual filesystem."}
         </div>
       )}
+      {code !== null ? (
+        <div className="docs-react-demo-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={sourceLanguage(displayedCodeFile)}
+              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>
+      ) : null}
     </section>
   )
 }

package/src/styles.css

@@ -775,27 +775,36 @@
 .hljs-comment,
 .hljs-quote,
 .hljs-meta {
-  color: var(--gb-muted-foreground);
+  color: var(--gb-muted-foreground, #71717a);
 }
 
 .hljs-operator,
 .hljs-punctuation {
-  color: var(--gb-code-fg);
+  color: var(--gb-code-fg, #18181b);
 }
 
 .hljs-deletion {
-  color: var(--gb-danger);
+  color: var(--gb-danger, #ef4444);
 }
 
 .hljs-addition {
-  color: var(--gb-success);
+  color: var(--gb-success, #22c55e);
 }
 
 .docs-react-demo {
+  --docs-react-demo-panel: var(--gb-panel, var(--card, #ffffff));
+  --docs-react-demo-foreground: var(--gb-panel-foreground, var(--card-foreground, #18181b));
+  --docs-react-demo-muted-foreground: var(--gb-muted-foreground, var(--muted-foreground, #71717a));
+  --docs-react-demo-border: var(--gb-border, var(--border, #e4e4e7));
+  --docs-react-demo-accent: var(--gb-accent, var(--accent, #f4f4f5));
+  --docs-react-demo-primary: var(--gb-primary, var(--primary, #4f46e5));
+  --docs-react-demo-code-bg: var(--gb-code-bg, rgba(128, 128, 128, 0.13));
+  --docs-react-demo-success: var(--gb-success, #22c55e);
+  --docs-react-demo-danger: var(--gb-danger, #ef4444);
   overflow: hidden;
-  border: 1px solid var(--gb-border);
+  border: 1px solid var(--docs-react-demo-border);
   border-radius: 12px;
-  background: var(--gb-panel);
+  background: var(--docs-react-demo-panel);
 }
 
 .docs-react-demo-header {
@@ -804,33 +813,33 @@
   gap: 10px;
   min-height: 42px;
   padding: 8px 12px;
-  border-bottom: 1px solid var(--gb-border);
-  color: var(--gb-panel-foreground);
+  border-bottom: 1px solid var(--docs-react-demo-border);
+  color: var(--docs-react-demo-foreground);
   font-size: 13px;
   font-weight: 550;
 }
 
 .docs-react-demo-status {
   margin-left: auto;
-  color: var(--gb-muted-foreground);
+  color: var(--docs-react-demo-muted-foreground);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
 
 .docs-react-demo-status-ready {
-  color: var(--gb-success);
+  color: var(--docs-react-demo-success);
 }
 
 .docs-react-demo-status-error {
-  color: var(--gb-danger);
+  color: var(--docs-react-demo-danger);
 }
 
 .docs-react-demo-run {
-  border: 1px solid var(--gb-border);
+  border: 1px solid var(--docs-react-demo-border);
   border-radius: 6px;
   padding: 4px 9px;
-  color: var(--gb-panel-foreground);
+  color: var(--docs-react-demo-foreground);
   font-size: 12px;
   cursor: pointer;
 }
@@ -860,7 +869,87 @@
   min-height: 100px;
   overflow: auto;
   padding: 14px;
-  color: var(--gb-danger);
-  background: var(--gb-code-bg);
+  color: var(--docs-react-demo-danger);
+  background: var(--docs-react-demo-code-bg);
   white-space: pre-wrap;
 }
+
+.docs-react-demo-code {
+  position: relative;
+  border-top: 1px solid var(--docs-react-demo-border);
+  background: var(--docs-react-demo-code-bg);
+}
+
+.docs-react-demo-code-body {
+  --docs-react-demo-code-line-height: 1.6rem;
+  max-height: calc(var(--docs-react-demo-code-lines) * var(--docs-react-demo-code-line-height));
+  margin: 0;
+  overflow: hidden;
+  padding: 1.15rem 1rem 2.4rem;
+  font-size: 0.875rem;
+  line-height: var(--docs-react-demo-code-line-height);
+  tab-size: 2;
+}
+
+.docs-react-demo-code-body::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 4.5rem;
+  background: linear-gradient(to bottom, transparent, var(--docs-react-demo-panel));
+  content: "";
+  pointer-events: none;
+}
+
+.docs-react-demo-code-body-expanded {
+  overflow: auto;
+  padding-bottom: 3.25rem;
+}
+
+.docs-react-demo-code-body-expanded::after {
+  display: none;
+}
+
+.docs-react-demo-code-body > code {
+  display: block;
+  min-width: max-content;
+  padding: 0;
+  background: transparent;
+}
+
+.docs-react-demo-code-body:not(.docs-react-demo-code-body-expanded) > code {
+  max-height: calc(var(--docs-react-demo-code-lines) * var(--docs-react-demo-code-line-height));
+  overflow: hidden;
+}
+
+.docs-react-demo-code-body .docs-code-line {
+  min-height: var(--docs-react-demo-code-line-height);
+}
+
+.docs-react-demo-code-toggle {
+  position: absolute;
+  bottom: 0.85rem;
+  left: 50%;
+  z-index: 1;
+  transform: translateX(-50%);
+  border: 1px solid var(--docs-react-demo-border);
+  border-radius: 0.65rem;
+  padding: 0.45rem 0.85rem;
+  color: var(--docs-react-demo-foreground);
+  background: var(--docs-react-demo-panel);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.docs-react-demo-code-toggle:hover {
+  background: var(--docs-react-demo-accent);
+}
+
+.docs-react-demo-code-toggle:focus-visible {
+  outline: 2px solid var(--docs-react-demo-primary);
+  outline-offset: 2px;
+}