@brett_lamy/docstream 1.7.0 → 1.9.0

package/dist/streamdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"streamdown.d.ts","sourceRoot":"","sources":["../src/streamdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,gBAAgB,EAAE,KAAK,mBAAmB,EAAE,KAAK,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAKjI,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AACnG,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAE,oBAAoB,EAAE,2BAA2B,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACtG,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAA;AACtH,YAAY,EAAE,eAAe,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAA;AAE1G,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,cAAc,CAAC,EAAE,uBAAuB,CAAA;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,WAAmB,EACnB,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,OAAO,EACP,WAAW,GACZ,EAAE,sBAAsB,+BA2BxB"}
+{"version":3,"file":"streamdown.d.ts","sourceRoot":"","sources":["../src/streamdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,gBAAgB,EAAE,KAAK,mBAAmB,EAAE,KAAK,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAKjI,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AACnG,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAE,oBAAoB,EAAE,2BAA2B,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACtG,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,QAAQ,CAAA;AACtH,YAAY,EAAE,eAAe,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAA;AAE1G,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,mBAAmB,CAAA;IAClC,cAAc,CAAC,EAAE,uBAAuB,CAAA;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,WAAmB,EACnB,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,iBAAiB,GAClB,EAAE,sBAAsB,+BA6BxB"}

package/dist/streamdown.js

@@ -7,9 +7,9 @@ import { parseMarkdown, trimPartialInlineToken } from "./gitbook/parse.js";
 export { CitationSources, DocstreamRefContext, InlineReference } from "./docs/reference.js";
 export { DocPageActions } from "./docs/PageActions.js";
 export { DocstreamDemoContext, DocstreamDemoRuntimeContext, DemoFullscreen, DemoViewer } from "./demo/index.js";
-export function GitbookStreamdown({ children, className, isAnimating, isStreaming = false, markdown, liveRenderer, sourceRenderer, demoResolver, demoRuntime, demoDependencies, demoVFS, pageActions, }) {
+export function GitbookStreamdown({ children, className, isAnimating, isStreaming = false, markdown, liveRenderer, sourceRenderer, demoResolver, demoRuntime, demoDependencies, demoVFS, pageActions, documentProperties, onTaskStateChange, }) {
     const content = markdown ?? children ?? "";
     const gitbookDoc = useMemo(() => parseMarkdown(isStreaming ? trimPartialInlineToken(content) : content), [content, isStreaming]);
-    return (_jsx("div", { "aria-busy": isAnimating ?? isStreaming, className: className, "data-docstream": "", "data-streaming": isStreaming ? "" : undefined, children: _jsx(DocsRenderer, { doc: gitbookDoc, markdown: content, liveRenderer: liveRenderer, sourceRenderer: sourceRenderer, demoResolver: demoResolver, demoRuntime: demoRuntime, demoDependencies: demoDependencies, demoVFS: demoVFS, pageActions: isStreaming ? false : pageActions }) }));
+    return (_jsx("div", { "aria-busy": isAnimating ?? isStreaming, className: className, "data-docstream": "", "data-streaming": isStreaming ? "" : undefined, children: _jsx(DocsRenderer, { doc: gitbookDoc, markdown: content, liveRenderer: liveRenderer, sourceRenderer: sourceRenderer, demoResolver: demoResolver, demoRuntime: demoRuntime, demoDependencies: demoDependencies, demoVFS: demoVFS, pageActions: isStreaming ? false : pageActions, documentProperties: documentProperties, onTaskStateChange: onTaskStateChange }) }));
 }
 //# sourceMappingURL=streamdown.js.map

package/dist/streamdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"streamdown.js","sourceRoot":"","sources":["../src/streamdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,YAAY,EAAiF,MAAM,qBAAqB,CAAA;AACjI,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAEvE,uEAAuE;AACvE,yDAAyD;AACzD,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAGnD,OAAO,EAAE,oBAAoB,EAAE,2BAA2B,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AActG,MAAM,UAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,WAAW,GAAG,KAAK,EACnB,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,OAAO,EACP,WAAW,GACY;IACvB,MAAM,OAAO,GAAG,QAAQ,IAAI,QAAQ,IAAI,EAAE,CAAA;IAC1C,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EAC5E,CAAC,OAAO,EAAE,WAAW,CAAC,CACvB,CAAA;IAED,OAAO,CACL,2BACa,WAAW,IAAI,WAAW,EACrC,SAAS,EAAE,SAAS,oBACL,EAAE,oBACD,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YAE5C,KAAC,YAAY,IACX,GAAG,EAAE,UAAU,EACf,QAAQ,EAAE,OAAO,EACjB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,GAC9C,GACE,CACP,CAAA;AACH,CAAC"}
+{"version":3,"file":"streamdown.js","sourceRoot":"","sources":["../src/streamdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,YAAY,EAAiF,MAAM,qBAAqB,CAAA;AACjI,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAA;AAEvE,uEAAuE;AACvE,yDAAyD;AACzD,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAGnD,OAAO,EAAE,oBAAoB,EAAE,2BAA2B,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AActG,MAAM,UAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,WAAW,GAAG,KAAK,EACnB,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,iBAAiB,GACM;IACvB,MAAM,OAAO,GAAG,QAAQ,IAAI,QAAQ,IAAI,EAAE,CAAA;IAC1C,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EAC5E,CAAC,OAAO,EAAE,WAAW,CAAC,CACvB,CAAA;IAED,OAAO,CACL,2BACa,WAAW,IAAI,WAAW,EACrC,SAAS,EAAE,SAAS,oBACL,EAAE,oBACD,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YAE5C,KAAC,YAAY,IACX,GAAG,EAAE,UAAU,EACf,QAAQ,EAAE,OAAO,EACjB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,EAC9C,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,iBAAiB,GACpC,GACE,CACP,CAAA;AACH,CAAC"}

package/dist/styles.css

@@ -1,3 +1,5 @@
+@import "./docs/properties.css";
+@import "./docs/tasks.css";
 
 [data-docstream],
 .docs-article {
@@ -2064,13 +2066,76 @@
 .docs-demo-files {
   flex-shrink: 0;
   box-sizing: border-box;
-  width: 188px;
+  /* --docs-demo-files-w is set (px) once the reader drags the handle; 188px until then. */
+  width: var(--docs-demo-files-w, 188px);
   padding: 8px;
   overflow-y: auto;
   border-right: 1px solid var(--gb-border);
   background: var(--gb-muted);
 }
 
+/* The drag handle between the file list and the source: zero layout width, with a wider hit area
+   and the same grip as the preview handle straddling the divider. */
+.docs-demo-files-handle {
+  position: relative;
+  z-index: 2;
+  flex: 0 0 0;
+  width: 0;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.docs-demo-files-handle::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -5px;
+  width: 10px;
+  content: "";
+}
+
+.docs-demo-files-handle::after {
+  position: absolute;
+  top: 50%;
+  left: -2.5px;
+  width: 5px;
+  height: 40px;
+  margin-top: -20px;
+  border-radius: 3px;
+  background: var(--gb-stage-dot);
+  content: "";
+  opacity: 0;
+  transition: opacity 150ms ease, background 150ms ease, height 200ms ease, margin 200ms ease;
+}
+
+.docs-demo-code:hover .docs-demo-files-handle::after {
+  opacity: 1;
+}
+
+.docs-demo-files-handle:hover::after,
+.docs-demo-files-handle:focus-visible::after,
+.docs-demo-files-handle[data-dragging]::after {
+  height: 56px;
+  margin-top: -28px;
+  background: var(--gb-primary);
+  opacity: 1;
+}
+
+.docs-demo-files-handle:focus-visible {
+  outline: none;
+}
+
+.docs-demo-files-handle:focus-visible::before {
+  outline: 2px solid var(--gb-primary);
+  outline-offset: -1px;
+  border-radius: 2px;
+}
+
+.docs-demo-code[data-dragging] {
+  cursor: col-resize;
+  user-select: none;
+}
+
 .docs-demo-files-h {
   padding: 6px 8px 8px;
   color: var(--gb-muted-foreground);
@@ -2143,18 +2208,174 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 5px 6px 5px 14px;
+  padding: 5px 6px 5px 8px;
   border-bottom: 1px solid var(--gb-border);
   color: var(--gb-muted-foreground);
   font: 12px/1 var(--docs-demo-mono);
 }
 
-.docs-demo-source-path {
+/* Breadcrumb path: one button per segment. The list is clipped to the header; the fit logic in
+   PathBreadcrumb collapses the middle to a "…" before that matters. */
+.docs-demo-crumbs {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.docs-demo-crumbs > .docs-demo-crumbs-list {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  white-space: nowrap;
+}
+
+.docs-demo-crumbs > .docs-demo-crumbs-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.docs-demo-crumbs-list > .docs-demo-crumb-item {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.docs-demo-crumbs-list > .docs-demo-crumb-item[data-last] {
+  flex: 0 1 auto;
+}
+
+.docs-demo-crumb-sep {
+  flex-shrink: 0;
+  color: var(--gb-muted-foreground);
+  opacity: 0.7;
+}
+
+.docs-demo-crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  box-sizing: border-box;
+  height: 24px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--gb-muted-foreground);
+  font: inherit;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.docs-demo-crumb svg {
+  flex-shrink: 0;
+}
+
+.docs-demo-crumb-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.docs-demo-crumb:hover,
+.docs-demo-crumb[aria-expanded="true"] {
+  background: var(--gb-hover);
+  color: var(--gb-panel-foreground);
+}
+
+.docs-demo-crumb[data-current] {
+  color: var(--gb-panel-foreground);
+  font-weight: 600;
+}
+
+.docs-demo-crumb[data-current] svg {
+  color: var(--gb-primary);
+}
+
+.docs-demo-crumb:focus-visible {
+  outline: 2px solid var(--gb-primary);
+  outline-offset: -2px;
+}
+
+/* The sibling / hidden-segment menu. Portalled next to the docs root (so it isn't clipped by the
+   viewer) and fixed under its trigger; --crumb-x / --crumb-y are set from the trigger's rect. */
+.docs-demo-crumb-menu {
+  position: fixed;
+  top: var(--crumb-y, 0);
+  left: var(--crumb-x, 0);
+  z-index: 60;
+  box-sizing: border-box;
+  min-width: 160px;
+  max-width: min(320px, calc(100vw - 16px));
+  max-height: min(320px, calc(100vh - 16px));
+  padding: 4px;
+  overflow-y: auto;
+  border: 1px solid var(--gb-border);
+  border-radius: 10px;
+  background: var(--gb-panel);
+  box-shadow: var(--gb-menu-shadow);
+  color: var(--gb-panel-foreground);
+  font: 12.5px/1.3 var(--docs-demo-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+}
+
+.docs-demo-crumb-option {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.docs-demo-crumb-option svg {
+  flex-shrink: 0;
+  color: var(--gb-muted-foreground);
+}
+
+.docs-demo-crumb-option:hover,
+.docs-demo-crumb-option:focus-visible {
+  outline: none;
+  background: var(--gb-hover);
+}
+
+.docs-demo-crumb-option[data-current] {
+  color: var(--gb-primary);
+  font-weight: 600;
+}
+
+.docs-demo-crumb-option[data-current] svg {
+  color: var(--gb-primary);
+}
+
+.docs-demo-crumb-option-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.docs-demo-crumb-option .docs-demo-crumb-check {
+  margin-left: auto;
+}
+
 .docs-demo-source-body {
   flex: 1;
   min-height: 0;
@@ -2195,7 +2416,8 @@
   }
 
   .docs-demo-files-h,
-  .docs-demo-dir {
+  .docs-demo-dir,
+  .docs-demo-files-handle {
     display: none;
   }
 
@@ -2338,6 +2560,8 @@
   }
 
   .docs-demo-handle::after,
+  .docs-demo-files-handle::after,
+  .docs-demo-crumb,
   .docs-page-actions-more svg {
     transition: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brett_lamy/docstream",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "GitBook-aware readonly markdown and AI stream renderer.",
   "publishConfig": {
     "access": "public"
@@ -38,6 +38,20 @@
       "import": "./dist/gitbook/index.js",
       "default": "./dist/gitbook/index.js"
     },
+    "./properties": {
+      "source": "./src/docs/DocumentProperties.tsx",
+      "types": "./dist/docs/DocumentProperties.d.ts",
+      "import": "./dist/docs/DocumentProperties.js",
+      "default": "./dist/docs/DocumentProperties.js"
+    },
+    "./properties/styles.css": "./dist/docs/properties.css",
+    "./tasks": {
+      "source": "./src/docs/TaskCheckbox.tsx",
+      "types": "./dist/docs/TaskCheckbox.d.ts",
+      "import": "./dist/docs/TaskCheckbox.js",
+      "default": "./dist/docs/TaskCheckbox.js"
+    },
+    "./tasks/styles.css": "./dist/docs/tasks.css",
     "./streamdown": {
       "source": "./src/streamdown.tsx",
       "types": "./dist/streamdown.d.ts",

package/src/demo/DemoViewer.tsx

@@ -35,9 +35,10 @@ import { CollapsibleCode } from "../docs/CollapsibleCode"
 import { HighlightedCode } from "../docs/HighlightedCode"
 import { CopyButton } from "../docs/copy"
 import { PillTabs, Segmented, rovingKeyDown } from "../docs/controls"
-import { useDemoResolver, useDemoRuntime } from "./context"
+import { DocstreamDemoContext, useDemoResolver, useDemoRuntime } from "./context"
 import { createDocstreamClipboard, type DemoSourceSnapshot, type DocstreamClipboard } from "./clipboard"
 import { CopyDemoButton } from "./copy-demo"
+import { PathBreadcrumb } from "./PathBreadcrumb"
 import { languageForPath } from "./glob"
 import { useDemoVFSContext, useDemoVFSEntry, type DemoVFS } from "./vfs"
 import { cssToSurface, surfaceStyle, surfaceToCss } from "./surface"
@@ -455,6 +456,22 @@ function fileTree(files: DemoFile[]): TreeRow[] {
   return rows
 }
 
+export const FILES_DEFAULT_WIDTH = 188
+export const FILES_MIN_WIDTH = 140
+/** The file list never takes more than this share of the viewer, so the source pane can't collapse. */
+export const FILES_MAX_SHARE = 0.6
+
+/** The widest the file list may be inside a viewer `container` px wide (never below the minimum). */
+export function filesMaxWidth(container: number): number {
+  return Math.max(FILES_MIN_WIDTH, Math.floor(container * FILES_MAX_SHARE))
+}
+
+/** Clamp a file list width to [min, 60% of the viewer]. An unmeasured viewer (0) only enforces the minimum. */
+export function clampFilesWidth(width: number, container: number): number {
+  const max = container > 0 ? filesMaxWidth(container) : Infinity
+  return Math.round(Math.min(max, Math.max(FILES_MIN_WIDTH, width)))
+}
+
 function CodeView({ src, files, height, id }: { src: string; files: DemoFile[]; height: string; id: string }) {
   const [active, setActive] = useState(files[0]?.path ?? "")
   useEffect(() => {
@@ -465,8 +482,67 @@ function CodeView({ src, files, height, id }: { src: string; files: DemoFile[];
   const paths = files.map((f) => f.path)
   const tabId = (path: string) => `${id}-file-${paths.indexOf(path)}`
   const panelId = `${id}-source`
+
+  // The file list width is the user's choice (null: the default). It lives here, so it survives file switches.
+  const code = useRef<HTMLDivElement | null>(null)
+  const [chosen, setChosen] = useState<number | null>(null)
+  const [container, setContainer] = useState(0)
+  const [dragging, setDragging] = useState(false)
+  useEffect(() => {
+    const el = code.current
+    if (!el || typeof ResizeObserver === "undefined") return
+    const observer = new ResizeObserver(() => setContainer(Math.round(el.getBoundingClientRect().width)))
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+  const width = clampFilesWidth(chosen ?? FILES_DEFAULT_WIDTH, container)
+  const max = container > 0 ? filesMaxWidth(container) : undefined
+
+  const startDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const el = code.current
+    if (!el || event.button !== 0) return
+    event.preventDefault()
+    const handle = event.currentTarget
+    const pointer = event.pointerId
+    try {
+      handle.setPointerCapture(pointer)
+    } catch {
+      /* not capturable (synthetic event): the window listeners still follow the drag */
+    }
+    const left = el.getBoundingClientRect().left
+    setDragging(true)
+    const move = (ev: PointerEvent) => setChosen(clampFilesWidth(ev.clientX - left, el.getBoundingClientRect().width))
+    const up = () => {
+      setDragging(false)
+      if (handle.hasPointerCapture?.(pointer)) handle.releasePointerCapture(pointer)
+      window.removeEventListener("pointermove", move)
+      window.removeEventListener("pointerup", up)
+      window.removeEventListener("pointercancel", up)
+    }
+    window.addEventListener("pointermove", move)
+    window.addEventListener("pointerup", up)
+    window.addEventListener("pointercancel", up)
+  }
+
+  const onResizeKey = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    const step = event.shiftKey ? 50 : 10
+    let next: number | undefined
+    if (event.key === "ArrowLeft") next = width - step
+    else if (event.key === "ArrowRight") next = width + step
+    else if (event.key === "Home") next = FILES_MIN_WIDTH
+    else if (event.key === "End") next = max ?? width
+    if (next === undefined) return
+    event.preventDefault()
+    setChosen(clampFilesWidth(next, container))
+  }
+
   return (
-    <div className="docs-demo-code" style={{ height }}>
+    <div
+      ref={code}
+      className="docs-demo-code"
+      style={{ height, ...(chosen === null ? null : { "--docs-demo-files-w": `${width}px` }) } as CSSProperties}
+      data-dragging={dragging || undefined}
+    >
       <div
         className="docs-demo-files"
         role="tablist"
@@ -502,9 +578,25 @@ function CodeView({ src, files, height, id }: { src: string; files: DemoFile[];
           ),
         )}
       </div>
+      <div
+        className="docs-demo-files-handle"
+        role="separator"
+        tabIndex={0}
+        aria-orientation="vertical"
+        aria-label="Resize file list"
+        aria-controls={panelId}
+        aria-valuemin={FILES_MIN_WIDTH}
+        aria-valuemax={max}
+        aria-valuenow={width}
+        aria-valuetext={`${width} pixels wide`}
+        data-dragging={dragging || undefined}
+        onPointerDown={startDrag}
+        onKeyDown={onResizeKey}
+        onDoubleClick={() => setChosen(null)}
+      />
       <div className="docs-demo-source" role="tabpanel" id={panelId} aria-labelledby={file ? tabId(file.path) : undefined}>
         <div className="docs-demo-source-h">
-          <span className="docs-demo-source-path">{src && file ? `${src}/${file.path}` : file?.path}</span>
+          {file ? <PathBreadcrumb src={src} path={file.path} paths={paths} onSelect={setActive} /> : <span className="docs-demo-crumbs" />}
           {file ? <CopyButton text={file.content} label={`Copy ${file.path}`} /> : null}
         </div>
         <div className="docs-demo-source-body" tabIndex={0} aria-label={file ? `${file.path} source` : undefined}>
@@ -954,7 +1046,9 @@ export function DemoFullscreen({ src, resolver: override, variant, className, st
   if (!resolver) return <DemoError message={`No demo resolver for ${src}`} />
   return (
     <div className={className ? `docs-demo-fullscreen ${className}` : "docs-demo-fullscreen"} style={style} data-demo-src={src}>
-      <DemoCanvas src={src} preview={{ kind: "component", component }} variant={chosen} bleed={metaValue?.bleed} look={metaValue} />
+      <DocstreamDemoContext.Provider value={resolver}>
+        <DemoCanvas src={src} preview={{ kind: "component", component }} variant={chosen} bleed={metaValue?.bleed} look={metaValue} />
+      </DocstreamDemoContext.Provider>
     </div>
   )
 }