@brett_lamy/docstream 1.7.0 → 1.9.0

package/src/docs/properties.css

@@ -0,0 +1,28 @@
+.docs-document-properties {
+  color: var(--muted-foreground, #787878);
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  margin-block: 0 20px;
+}
+.docs-document-properties > summary { display: flex; align-items: center; gap: 6px; width: fit-content; padding-block: 5px; cursor: pointer; list-style: none; user-select: none; }
+.docs-document-properties > summary::-webkit-details-marker { display: none; }
+.docs-document-properties[open] > summary > svg { transform: rotate(90deg); }
+.docs-properties-count { font-variant-numeric: tabular-nums; opacity: .65; margin-left: 2px; }
+.docs-properties-list { margin: 6px 0; }
+.docs-property-row { display: grid; grid-template-columns: minmax(80px, 130px) minmax(0, 1fr) 22px; align-items: start; gap: 10px; padding-block: 6px; border-bottom: 1px solid var(--border, #e8e8e8); }
+.docs-property-row dt { padding-block: 3px; overflow-wrap: anywhere; }
+.docs-property-row dd { margin: 0; min-width: 0; color: var(--foreground, #242424); }
+.docs-property-value { display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding-block: 3px; }
+.docs-document-properties :is(input:not([type="checkbox"]), textarea) { box-sizing: border-box; width: 100%; min-width: 0; padding: 3px 5px; color: var(--foreground, #242424); font: inherit; line-height: inherit; background: transparent; border: 0; border-radius: 4px; }
+.docs-document-properties textarea { resize: vertical; }
+.docs-document-properties input[type="checkbox"] { accent-color: var(--primary, #a87900); margin: 6px 0; }
+.docs-document-properties :is(input, textarea, button, summary):focus-visible { outline: 2px solid var(--primary, #a87900); outline-offset: 2px; }
+.docs-document-properties button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: inherit; background: transparent; border: 0; border-radius: 4px; font: inherit; cursor: pointer; }
+.docs-property-remove { padding: 6px 3px; opacity: 0; }
+.docs-property-row:hover .docs-property-remove, .docs-property-remove:focus-visible { opacity: 1; }
+.docs-property-add { display: flex; align-items: center; gap: 8px; margin-block: 8px 0; padding: 3px 0; }
+.docs-property-add input { max-width: 240px; }
+.docs-property-add button { padding: 3px 6px; }
+.docs-properties-error { color: var(--destructive, #bc3030); font-size: 12px; overflow-wrap: anywhere; }
+.docs-properties-error pre { white-space: pre-wrap; }

package/src/docs/tasks.css

@@ -0,0 +1,13 @@
+.docs-task-control { position: relative; display: inline-flex; width: 21px; height: 21px; flex: 0 0 21px; vertical-align: text-bottom; color: var(--muted-foreground, #7a7a7a); }
+.docs-task-control .docs-task-checkbox { position: absolute; inset: 0; box-sizing: border-box; appearance: none; margin: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; box-shadow: none; }
+.docs-task-checkbox:focus-visible { outline: 2px solid var(--primary, #a87900); outline-offset: 3px; }
+.docs-task-state-icon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
+.docs-task-control[data-task-state="verified"], .docs-task-control[data-task-state="in-progress"], .docs-task-control[data-task-state="implemented"] { color: var(--primary, #a87900); }
+.docs-task-control[data-task-state="blocked"], .docs-task-control[data-task-state="refuted"] { color: var(--destructive, #bd3d36); }
+.docs-task-state-menu { position: fixed; z-index: 10000; box-sizing: border-box; width: 284px; max-height: calc(100vh - 16px); overflow: auto; padding: 5px; border: 1px solid var(--border, #dedede); border-radius: 10px; background: var(--popover, #fff); color: var(--popover-foreground, #222); box-shadow: 0 8px 32px #0003, 0 1px 3px #0001; font-size: 13px; line-height: 1.4; }
+.docs-task-state-menu > button { display: grid; grid-template-columns: 20px minmax(0, 1fr) 14px; align-items: center; gap: 9px; width: 100%; min-height: 35px; padding: 7px 8px; border: 0; border-radius: 5px; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; outline: none; }
+.docs-task-state-menu > button:hover, .docs-task-state-menu > button:focus { color: var(--accent-foreground, #222); background: var(--accent, #eee); }
+.docs-task-state-menu > button > svg:first-child { color: var(--muted-foreground, #777); }
+.docs-task-state-menu > button[aria-checked="true"] > svg { color: var(--primary, #a87900); }
+.docs-task-tooltip { position: fixed; z-index: 10001; transform: translate(-50%, -100%); border-radius: 5px; padding: 4px 8px; color: #fff; background: #303030; box-shadow: 0 2px 8px #0002; font: 12px/1.4 system-ui, sans-serif; white-space: nowrap; pointer-events: none; }
+.docs-tasklist li > .docs-task-control { margin-top: 2px; }

package/src/gitbook/ast.ts

@@ -433,6 +433,8 @@ export interface ListItemNode extends ContainerSpacing {
   type: "listItem"
   children: Block[]
   checked?: boolean // present only in task lists
+  /** Extended task state. Omitted for ordinary `[ ]` / `[x]` items for backwards compatibility. */
+  state?: TaskState
   /** The item's marker as written (`*`, `3.`), when it isn't the one its list's pattern gives it. */
   marker?: string
   /** Spaces between the marker and the content (default 1). */
@@ -443,6 +445,8 @@ export interface ListItemNode extends ContainerSpacing {
   checkMark?: "X"
 }
 
+export type TaskState = "pending" | "in-progress" | "implemented" | "blocked" | "parked" | "refuted" | "verified" | "cancelled"
+
 export interface ListNode extends BlockSpacing {
   type: "list"
   ordered: boolean
@@ -563,9 +567,21 @@ export type Block =
   | DefinitionNode
   | RawNode
 
+/** YAML frontmatter, kept separately from the document body. Comments, key order and quoting survive edits. */
+export interface DocumentPropertiesNode {
+  /** YAML between the delimiters, using the document's normalized line endings. */
+  yaml: string
+  /** Opening delimiter as written (including an optional BOM). Defaults to `---`. */
+  opening?: string
+  /** Closing delimiter as written (`---` or `...`). Defaults to `---`. */
+  closing?: string
+}
+
 export interface DocumentNode {
   type: "doc"
   children: Block[]
+  /** First-party document properties from YAML frontmatter. */
+  properties?: DocumentPropertiesNode
   /** Footnote citation definitions, in definition order. */
   citations?: CitationDef[]
   /** Blank lines before the trailing footnote definitions (default 1). */

package/src/gitbook/index.ts

@@ -1,6 +1,9 @@
 // Pure GitBook markdown engine (no React, no mermaid/streamdown). Safe to import
 // in non-DOM environments such as a server-side AI agent or a Cloudflare Worker.
 export type * from "./ast"
+export { TASK_STATES, getTaskState, taskMarker, taskStateFromMarker } from "./tasks"
+export { readDocumentProperties, removeDocumentProperty, setDocumentProperty } from "./properties"
+export type { DocumentPropertyValue, ParsedDocumentProperties } from "./properties"
 export { escapeAttr, unescapeAttr } from "./attrs"
 export { closesFence, demoBody, fenceOpener, fenceTracker, parseDemoVariants, parseMarkdown, parseBlocks, trimPartialInlineToken } from "./parse"
 export { fenceFor, serializeBlocks, serializeDemoFile, serializeMarkdown } from "./serialize"

package/src/gitbook/parse.ts

@@ -36,6 +36,7 @@ import type {
 import { TAG_ATTRS, parseAttrs } from "./attrs"
 import { containerTags, defaultDelimiterRow, definitionLine, delimiterAlign, fenceInfo, figureMarkdown, serializeBlocks, type TaggedNode } from "./serialize"
 import { footnoteDefinitions, normalizeLabel, parseInline, plainText, refDefinitions } from "./inline"
+import { taskStateFromMarker } from "./tasks"
 
 // Minimal HTML-inline → markdown-inline bridge for HTML table cells.
 function htmlToInlineMd(html: string): string {
@@ -256,7 +257,15 @@ export function footnoteLine(id: string, url: string, label?: string): string {
 export function parseMarkdown(src: string): DocumentNode {
   // Windows line endings throughout come back as such; mixed ones stay in the lines as written.
   const crlf = src.includes("\r\n") && !/(^|[^\r])\n/.test(src)
-  const lines = src.split(crlf || !src.includes("\r\n") ? /\r?\n/ : "\n")
+  let lines = src.split(crlf || !src.includes("\r\n") ? /\r?\n/ : "\n")
+  let properties: DocumentNode["properties"]
+  if (/^\uFEFF?---[ \t]*$/.test(lines[0])) {
+    const closing = lines.findIndex((line, index) => index > 0 && /^(?:---|\.\.\.)[ \t]*$/.test(line))
+    if (closing > 0) {
+      properties = { yaml: lines.slice(1, closing).join("\n"), opening: lines[0], closing: lines[closing] }
+      lines = lines.slice(closing + 1)
+    }
+  }
   refDefinitions.clear()
   footnoteDefinitions.clear()
   const fences = fenceTracker()
@@ -289,6 +298,7 @@ export function parseMarkdown(src: string): DocumentNode {
   const trailing = group <= last
   const { blocks, end } = parseBody(trailing ? lines.slice(0, group) : lines)
   const doc: DocumentNode = { type: "doc", children: blocks }
+  if (properties) doc.properties = properties
   if (footnoteDefinitions.size) {
     doc.citations = [...footnoteDefinitions.entries()].map(([id, d]) => ({ id, ...d }))
   }
@@ -1117,10 +1127,10 @@ function parseList(lines: string[], start: number): ParsedList {
     let content = m[4]
     let checked: boolean | undefined
     let checkMark: string | undefined
-    const taskMatch = content.match(/^\[([ xX])\]\s+(.*)$/)
+    const taskMatch = content.match(/^\[([ xX~?bd!\-])\]\s+(.*)$/)
     if (taskMatch) {
       list.task = true
-      checked = taskMatch[1] !== " "
+      checked = /[xX]/.test(taskMatch[1])
       checkMark = taskMatch[1]
       content = taskMatch[2]
     }
@@ -1158,6 +1168,8 @@ function parseList(lines: string[], start: number): ParsedList {
     const para: Block = { type: "paragraph", children: parseInline(content) }
     const children: Block[] = body.length ? [para, ...parseBlocks(body)] : [para]
     const item: ListItemNode = checked === undefined ? { type: "listItem", children } : { type: "listItem", children, checked }
+    const state = checkMark === undefined ? undefined : taskStateFromMarker(checkMark)
+    if (state && state !== "pending" && state !== "verified") item.state = state
     const expected = ordered ? `${(list.start ?? 1) + items.length}${list.delimiter ?? "."}` : (list.bullet ?? "-")
     if (m[2] !== expected) item.marker = m[2]
     if (m[3].length !== 1) item.pad = m[3].length

package/src/gitbook/properties.ts

@@ -0,0 +1,49 @@
+import { isMap, isScalar, parseDocument } from "yaml"
+import type { DocumentPropertiesNode } from "./ast"
+
+export type DocumentPropertyValue = string | number | boolean | null | DocumentPropertyValue[] | { [key: string]: DocumentPropertyValue }
+export interface ParsedDocumentProperties {
+  values: Record<string, DocumentPropertyValue>
+  error?: string
+}
+
+/** Read properties without throwing on an incomplete or invalid document. YAML is never executed. */
+export function readDocumentProperties(properties: DocumentPropertiesNode): ParsedDocumentProperties {
+  try {
+    const doc = parseDocument(properties.yaml)
+    if (doc.errors.length) return { values: {}, error: doc.errors[0].message }
+    if (doc.contents && !isMap(doc.contents)) return { values: {}, error: "Document properties must be a YAML mapping." }
+    const values = (doc.toJS({ maxAliasCount: 100 }) ?? {}) as Record<string, DocumentPropertyValue>
+    // Cyclic aliases can be preserved as YAML, but cannot be represented by editable JSON-like values.
+    JSON.stringify(values)
+    return { values }
+  } catch (error) {
+    return { values: {}, error: error instanceof Error ? error.message : String(error) }
+  }
+}
+
+/** Change one property while retaining the other keys, comments, scalar styles and frontmatter delimiters. */
+export function setDocumentProperty(properties: DocumentPropertiesNode, key: string, value: DocumentPropertyValue): DocumentPropertiesNode {
+  const doc = parseDocument(properties.yaml)
+  const parsed = readDocumentProperties(properties)
+  if (parsed.error) throw new Error(parsed.error)
+  const previous = doc.get(key, true)
+  const range = isScalar(previous) ? previous.range : undefined
+  doc.set(key, value)
+  const yaml = doc.toString().replace(/\n$/, "")
+  const next = parseDocument(yaml).get(key, true)
+  // A scalar edit is a source-range patch, leaving every other byte (including flow-list spacing) alone.
+  if (range && isScalar(next) && next.range) {
+    return { ...properties, yaml: properties.yaml.slice(0, range[0]) + yaml.slice(next.range[0], next.range[1]) + properties.yaml.slice(range[1]) }
+  }
+  return { ...properties, yaml }
+}
+
+/** Remove one property; the frontmatter remains available for adding more. */
+export function removeDocumentProperty(properties: DocumentPropertiesNode, key: string): DocumentPropertiesNode {
+  const doc = parseDocument(properties.yaml)
+  const parsed = readDocumentProperties(properties)
+  if (parsed.error) throw new Error(parsed.error)
+  doc.delete(key)
+  return { ...properties, yaml: doc.toString().replace(/\n$/, "") }
+}

package/src/gitbook/serialize.ts

@@ -27,6 +27,7 @@ import { attr } from "./attrs"
 import { normalizeLabel, serializeInline, serializeReference, withDocumentDefinitions } from "./inline"
 import { plainText } from "./inline"
 import { parseBlocks } from "./parse"
+import { taskMarker } from "./tasks"
 
 /** A `{% tag %}…{% endtag %}` container, block or item. */
 export type TaggedNode = HintNode | TabsNode | TabNode | StepperNode | StepNode | ColumnsNode | ColumnNode | UpdatesNode | UpdateNode
@@ -114,7 +115,9 @@ export function serializeMarkdown(doc: DocumentNode): string {
   documentCitations = citations
   try {
     return withDocumentDefinitions(defs, () => {
-      let out = doc.children.map((b, k) => `${blankLines(b, k ? 1 : 0)}${serializeBlock(b)}\n`).join("")
+      const properties = doc.properties
+      let out = properties ? `${properties.opening ?? "---"}\n${properties.yaml}${properties.yaml ? "\n" : ""}${properties.closing ?? "---"}\n` : ""
+      out += doc.children.map((b, k) => `${blankLines(b, k ? 1 : 0)}${serializeBlock(b)}\n`).join("")
       // Footnote definitions not placed in the document end it, as a group.
       const trailing = (doc.citations ?? []).filter((c) => !placed.has(c.id))
       if (trailing.length) {
@@ -537,7 +540,7 @@ function inlineToHtml(nodes: Inline[]): string {
 
 function serializeListItem(item: ListItemNode, list: ListNode, idx: number): string {
   const marker = item.marker ?? (list.ordered ? `${(list.start ?? 1) + idx}${list.delimiter ?? "."}` : (list.bullet ?? "-"))
-  const check = list.task ? `[${item.checked ? (item.checkMark ?? "x") : " "}] ` : ""
+  const check = list.task ? `[${taskMarker(item)}] ` : ""
   const [first, ...rest] = item.children
   const firstText = first?.type === "paragraph" ? serializeInline(first.children) : first ? serializeBlock(first) : ""
   const restText = rest.length ? "\n" + indent(serializeBlocks(rest), " ".repeat(item.indent ?? 2)) : ""

package/src/gitbook/tasks.ts

@@ -0,0 +1,25 @@
+import type { ListItemNode, TaskState } from "./ast"
+
+export const TASK_STATES: ReadonlyArray<{ id: TaskState; marker: string; label: string }> = [
+  { id: "pending", marker: " ", label: "Pending" },
+  { id: "in-progress", marker: "~", label: "In progress" },
+  { id: "implemented", marker: "?", label: "Implemented · evidence needed" },
+  { id: "blocked", marker: "b", label: "Blocked" },
+  { id: "parked", marker: "d", label: "Parked · verification debt" },
+  { id: "refuted", marker: "!", label: "Refuted" },
+  { id: "verified", marker: "x", label: "Verified" },
+  { id: "cancelled", marker: "-", label: "Cancelled" },
+]
+
+export function taskStateFromMarker(marker: string): TaskState | undefined {
+  return TASK_STATES.find((state) => state.marker === (marker === "X" ? "x" : marker))?.id
+}
+
+export function getTaskState(item: Pick<ListItemNode, "state" | "checked">): TaskState {
+  return item.state ?? (item.checked ? "verified" : "pending")
+}
+
+/** Explicit state wins; untouched uppercase `[X]` tasks retain their spelling. */
+export function taskMarker(item: Pick<ListItemNode, "state" | "checked" | "checkMark">): string {
+  return item.state ? TASK_STATES.find((state) => state.id === item.state)?.marker ?? " " : item.checked ? item.checkMark ?? "x" : " "
+}

package/src/index.ts

@@ -3,6 +3,13 @@
 export { GitbookStreamdown } from "./streamdown"
 export type { GitbookStreamdownProps } from "./streamdown"
 export { DocsRenderer, MarkdownContent } from "./docs/DocsRenderer"
+export { TaskCheckbox, TASK_STATE_ICONS } from "./docs/TaskCheckbox"
+export type { TaskCheckboxProps, TaskStateChangeHandler } from "./docs/TaskCheckbox"
+export { TASK_STATES, getTaskState, taskMarker, taskStateFromMarker } from "./gitbook/tasks"
+export { DocumentProperties } from "./docs/DocumentProperties"
+export type { DocumentPropertiesProps } from "./docs/DocumentProperties"
+export { readDocumentProperties, removeDocumentProperty, setDocumentProperty } from "./gitbook/properties"
+export type { DocumentPropertyValue, ParsedDocumentProperties } from "./gitbook/properties"
 export type { DocRenderOptions, LivePreviewProps, LivePreviewRenderer, SourceReferenceRenderer } from "./docs/DocsRenderer"
 export { DocPageActions } from "./docs/PageActions"
 export type { DocPageAction, DocPageActionsOptions, DocPageActionsProps } from "./docs/PageActions"

package/src/streamdown.tsx

@@ -35,6 +35,8 @@ export function GitbookStreamdown({
   demoDependencies,
   demoVFS,
   pageActions,
+  documentProperties,
+  onTaskStateChange,
 }: GitbookStreamdownProps) {
   const content = markdown ?? children ?? ""
   const gitbookDoc = useMemo(
@@ -59,6 +61,8 @@ export function GitbookStreamdown({
         demoDependencies={demoDependencies}
         demoVFS={demoVFS}
         pageActions={isStreaming ? false : pageActions}
+        documentProperties={documentProperties}
+        onTaskStateChange={onTaskStateChange}
       />
     </div>
   )

package/src/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;
   }