@brett_lamy/docstream 1.0.0 → 1.1.0

package/src/index.ts

@@ -1,7 +1,40 @@
 export { PlaygroundStreamdown as GitbookStreamdown } from "./playground/PlaygroundStreamdown"
 export type { PlaygroundStreamdownProps as GitbookStreamdownProps } from "./playground/PlaygroundStreamdown"
 export { DocsRenderer, MarkdownContent } from "./docs/DocsRenderer"
-export type { LivePreviewProps, LivePreviewRenderer, SourceReferenceRenderer } from "./docs/DocsRenderer"
+export type { DocRenderOptions, LivePreviewProps, LivePreviewRenderer, SourceReferenceRenderer } from "./docs/DocsRenderer"
+export { DocPageActions } from "./docs/PageActions"
+export type { DocPageAction, DocPageActionsOptions, DocPageActionsProps } from "./docs/PageActions"
+export { CollapsibleCode } from "./docs/CollapsibleCode"
+export type { CollapsibleCodeProps } from "./docs/CollapsibleCode"
+export { CopyButton, copyText } from "./docs/copy"
+export { getSyncedTab, setSyncedTab, useSyncedTab } from "./docs/tabs-sync"
+export {
+  DemoBlock,
+  DemoFullscreen,
+  DemoViewer,
+  DocstreamDemoContext,
+  createGlobDemoResolver,
+  defaultDemoMarkdown,
+  demoComponentFrom,
+  demoFromSearch,
+  demoHref,
+  resolveDemosToMarkdown,
+  sortDemoFiles,
+  useDemoResolver,
+} from "./demo"
+export type {
+  DemoComponent,
+  DemoComponentProps,
+  DemoFile,
+  DemoFullscreenProps,
+  DemoMeta,
+  DemoResolver,
+  DemoVariant,
+  DemoViewerProps,
+  GlobDemoResolverOptions,
+  ResolveDemosOptions,
+  ResolvedDemo,
+} from "./demo"
 export { CitationSources, DocstreamRefContext, InlineReference } from "./docs/reference"
 export type { CitationPreview, CitationPreviewResolver, DocstreamRefContextValue } from "./docs/reference"
 export { ReplayEmbed, ReplayPreview } from "./replay"
@@ -45,7 +78,7 @@ export type {
   SourceProvenance,
   SourceReferenceClient,
 } from "./source"
-export { parseMarkdown, parseBlocks, trimPartialInlineToken } from "./gitbook/parse"
+export { parseDemoVariants, parseMarkdown, parseBlocks, trimPartialInlineToken } from "./gitbook/parse"
 export { serializeBlocks, serializeMarkdown } from "./gitbook/serialize"
 export {
   footnoteDefinitions,

package/src/playground/PlaygroundStreamdown.tsx

@@ -1,11 +1,12 @@
 import { useMemo } from "react"
 
-import { DocsRenderer, type LivePreviewRenderer } from "../docs/DocsRenderer"
+import { DocsRenderer, type DocRenderOptions, type LivePreviewRenderer, type SourceReferenceRenderer } from "../docs/DocsRenderer"
 import { parseMarkdown, trimPartialInlineToken } from "../gitbook/parse"
 import { ReactCodePreview } from "./ReactCodePreview"
 
-export interface PlaygroundStreamdownProps {
+export interface PlaygroundStreamdownProps extends DocRenderOptions {
   children?: string
+  sourceRenderer?: SourceReferenceRenderer
   className?: string
   isAnimating?: boolean
   isStreaming?: boolean
@@ -23,6 +24,9 @@ export function PlaygroundStreamdown({
   isAnimating,
   isStreaming = false,
   markdown,
+  sourceRenderer,
+  demoResolver,
+  pageActions,
 }: PlaygroundStreamdownProps) {
   const content = markdown ?? children ?? ""
   const doc = useMemo(
@@ -46,7 +50,14 @@ export function PlaygroundStreamdown({
       data-docstream=""
       data-streaming={isStreaming ? "" : undefined}
     >
-      <DocsRenderer doc={doc} liveRenderer={liveRenderer} />
+      <DocsRenderer
+        doc={doc}
+        markdown={content}
+        liveRenderer={liveRenderer}
+        sourceRenderer={sourceRenderer}
+        demoResolver={demoResolver}
+        pageActions={isStreaming ? false : pageActions}
+      />
     </div>
   )
 }

package/src/playground/ReactCodePreview.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useId, useMemo, useState, type CSSProperties, type ReactNode } from "react"
-import { HighlightedCode } from "../docs/HighlightedCode"
+import { useEffect, useMemo, useState, type CSSProperties, type ReactNode } from "react"
+import { CollapsibleCode } from "../docs/CollapsibleCode"
 import {
   createAlmostNodeWorkspace,
   createReactDemoFiles,
@@ -65,10 +65,6 @@ 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
@@ -112,18 +108,11 @@ export function ReactDemo({
   const [state, setState] = useState<PreviewState>(inline ? "ready" : 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(
     () => codeProp ?? sourceText(files, displayedCodeFile),
     [codeProp, displayedCodeFile, files],
   )
-  const collapsedLines = positiveLineCount(collapsedCodeLines, 3)
-  const expandedLines = Math.max(
-    collapsedLines,
-    positiveLineCount(expandedCodeLines, 30),
-  )
 
   useEffect(() => {
     if (inline) return
@@ -228,30 +217,12 @@ export function ReactDemo({
         </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={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>
+        <CollapsibleCode
+          code={code}
+          language={language ?? sourceLanguage(displayedCodeFile)}
+          collapsedLines={collapsedCodeLines}
+          expandedLines={expandedCodeLines}
+        />
       ) : null}
     </section>
   )

package/src/streamdown.tsx

@@ -1,14 +1,21 @@
 import { useMemo } from "react"
-import { DocsRenderer } from "./docs/DocsRenderer"
+import { DocsRenderer, type DocRenderOptions, type LivePreviewRenderer, type SourceReferenceRenderer } from "./docs/DocsRenderer"
 import { parseMarkdown, trimPartialInlineToken } from "./gitbook/parse"
 
 // Re-exported so markdown-only consumers of ./streamdown can wire chip
 // click handling without importing the heavy root entry.
 export { CitationSources, DocstreamRefContext, InlineReference } from "./docs/reference"
+export { DocPageActions } from "./docs/PageActions"
+export type { DocPageAction, DocPageActionsOptions, DocPageActionsProps } from "./docs/PageActions"
+export type { DocRenderOptions } from "./docs/DocsRenderer"
+export { DocstreamDemoContext, DemoFullscreen, DemoViewer } from "./demo"
+export type { DemoFile, DemoMeta, DemoResolver, DemoVariant } from "./demo"
 export type { CitationPreview, CitationPreviewResolver, DocstreamRefContextValue } from "./docs/reference"
 
-export interface GitbookStreamdownProps {
+export interface GitbookStreamdownProps extends DocRenderOptions {
   children?: string
+  liveRenderer?: LivePreviewRenderer
+  sourceRenderer?: SourceReferenceRenderer
   className?: string
   isAnimating?: boolean
   isStreaming?: boolean
@@ -21,6 +28,10 @@ export function GitbookStreamdown({
   isAnimating,
   isStreaming = false,
   markdown,
+  liveRenderer,
+  sourceRenderer,
+  demoResolver,
+  pageActions,
 }: GitbookStreamdownProps) {
   const content = markdown ?? children ?? ""
   const gitbookDoc = useMemo(
@@ -35,7 +46,14 @@ export function GitbookStreamdown({
       data-docstream=""
       data-streaming={isStreaming ? "" : undefined}
     >
-      <DocsRenderer doc={gitbookDoc} />
+      <DocsRenderer
+        doc={gitbookDoc}
+        markdown={content}
+        liveRenderer={liveRenderer}
+        sourceRenderer={sourceRenderer}
+        demoResolver={demoResolver}
+        pageActions={isStreaming ? false : pageActions}
+      />
     </div>
   )
 }