Renders a full-featured documentation viewer with a collapsible sidebar navigation, AI-powered search, sticky section navigation, and pluggable content/skeleton renderers for markdown and embed document types. ## Key Components ### Exports - **`DocViewer`** — Main component wrapping `DocViewerContent`; accepts `DocViewerProps` and wires document tree state, scroll spy, link resolution, and search into a `PageLayout` shell - **`DEFAULT_DOC_VIEWER_PALETTE`** — Shared ODS color token map for the viewer chrome (background, text, border, card); intentionally uniform across knowledge-base and data-room surfaces ### Props (`DocViewerProps`) | Prop | Type | Description | |---|---|---| | `sourceId` | `DocSourceId` | Registry source identifier, threaded into API calls and link resolution | | `renderContent` | `fn` | Caller-supplied renderer for doc body (markdown, PDF, Figma, Sheets, etc.) | | `renderSkeleton` | `fn` | Returns a typed loading skeleton based on `documentType` | | `chatSource` | `string` | Server-side platform identifier for RAG search; never pass user input | | `baseRoute` | `string` | Root path for URL navigation | | `shell` | `boolean` | When `false`, omits the `
` wrapper if the host layout already provides it | | `structureEndpoint` | `string?` | Override for doc tree API (defaults to `/api/docs/sources/${sourceId}/structure`) | | `contentEndpoint` | `string?` | Override for doc content API | | `searchEndpoint` | `string?` | Override for RAG search endpoint | | `resolveLinkEndpoint` | `string?` | Override for internal link resolver (prop → runtime → `/api/docs/resolve-link`) | | `backButton` | `object \| false` | Back-button config; pass `false` to hide | ### Internal Hooks - **`useDocumentTree`** — Fetches structure + content, manages `selectedPath`, `expandedNodes`, navigation - **`useScrollSpy`** — Tracks active section for sticky nav highlighting - **`useDocNavigation`** — Context-based in-page navigation - **`useDocsResolveLink`** — Async internal link resolver pipeline - **`useDocSearch`** — RAG search bar state and navigation callbacks ## Usage Example ```typescript import { DocViewer } from "@openframe/lib" import { renderDocContent } from "./my-renderer" import { renderDocSkeleton } from "./my-skeleton" export default function DocsPage({ params }: { params: { path: string[] } }) { return ( renderDocContent(content, handlers) } renderSkeleton={(documentType) => renderDocSkeleton(documentType) } backButton={{ label: "Back to home", href: "/" }} /> ) } ``` **Source:** [`doc-viewer.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/doc-viewer.tsx)