@openspecui/web 3.5.2 → 3.6.0

package/dist-ssg/server/entry-server.js

@@ -38436,13 +38436,6 @@ function writeLocalStorage(layout, key = getLocalStorageKey()) {
 		localStorage.setItem(key, JSON.stringify(layout));
 	} catch {}
 }
-function collapseProjectDetailLocation(location) {
-	const tabId = pathToTabId(location.pathname);
-	if (!tabId) return location;
-	if (location.pathname === tabId) return location;
-	if (tabId === "/changes" || tabId === "/specs" || tabId === "/archive") return parseHref(tabId, location.state);
-	return location;
-}
 var carryActiveOnMovePlugin = ({ prevState, nextState, event }) => {
 	if (event.type !== "MOVE_TAB") return nextState;
 	const sourceArea = prevState.bottomTabs.includes(event.tabId) ? "bottom" : "main";
@@ -39078,8 +39071,6 @@ var NavController = class {
 		}
 		this.state = normalizeState({
 			...this.state,
-			mainLocation: collapseProjectDetailLocation(this.state.mainLocation),
-			bottomLocation: collapseProjectDetailLocation(this.state.bottomLocation),
 			updatedAt: 0
 		});
 		this.normalizeUrl();
@@ -50003,6 +49994,15 @@ async function getSpec(id) {
 	return snapshotSpecToSpec(snapSpec);
 }
 /**
+* Get raw spec content (markdown)
+*/
+async function getSpecRaw(id) {
+	const snapshot = await loadSnapshot();
+	if (!snapshot) return null;
+	const spec = snapshot.specs.find((s) => s.id === id);
+	return spec?.content ?? spec?.sourceContent ?? null;
+}
+/**
 * Get all changes metadata
 */
 async function getChanges() {
@@ -52924,6 +52924,12 @@ function useSpecSubscription(id) {
 		onError: callbacks.onError
 	}), () => getSpec(id), [id], getSpecSubscriptionCacheKey(id));
 }
+function useSpecRawSubscription(id) {
+	return useSubscription((callbacks) => trpcClient.spec.subscribeRaw.subscribe({ id }, {
+		onData: callbacks.onData,
+		onError: callbacks.onError
+	}), () => getSpecRaw(id), [id], `spec.subscribeRaw:${id}`);
+}
 function useChangesSubscription() {
 	return useSubscription((callbacks) => trpcClient.change.subscribe.subscribe(void 0, {
 		onData: callbacks.onData,
@@ -55415,6 +55421,42 @@ function useManualReconnect() {
 	}, []);
 }
 //#endregion
+//#region src/components/badge.tsx
+var toneClassNames = {
+	primary: "bg-primary text-primary-foreground",
+	subtle: "border border-primary/35 bg-primary/10 text-primary",
+	muted: "border border-border bg-muted text-muted-foreground",
+	custom: ""
+};
+var sizeClassNames$1 = {
+	dot: "h-1.5 w-1.5 min-w-0 p-0",
+	xs: "h-4 min-w-4 px-1 text-[10px] leading-none",
+	sm: "h-5 min-w-5 px-1.5 text-[11px] leading-none"
+};
+var shapeClassNames = {
+	pill: "rounded-full",
+	box: "rounded"
+};
+function Badge({ tone = "primary", size = "xs", shape = "pill", className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		"data-ui-badge": "true",
+		className: cn$1("inline-flex shrink-0 items-center justify-center gap-0.5 whitespace-nowrap font-semibold", toneClassNames[tone], sizeClassNames$1[size], shapeClassNames[shape], className),
+		...props
+	});
+}
+function formatCountBadgeValue(count, max = 99) {
+	return count > max ? `${max}+` : String(count);
+}
+function CountBadge({ count, max = 99, hideWhenZero = false, title, ...props }) {
+	if (hideWhenZero && count <= 0) return null;
+	const value = formatCountBadgeValue(count, max);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+		title,
+		...props,
+		children: value
+	});
+}
+//#endregion
 //#region ../core/src/pty-protocol.ts
 var PositiveInt = numberType().int().positive();
 var PtyPlatformSchema = enumType([
@@ -68448,11 +68490,11 @@ function assertPath$1(path2) {
 function removeUrlParams(url) {
 	return url.split("?")[0].split("#")[0];
 }
-function escapeRegExp(string) {
+function escapeRegExp$1(string) {
 	return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 function replaceAll$1(str, find, replace) {
-	return str.replace(new RegExp(escapeRegExp(find), "g"), replace);
+	return str.replace(new RegExp(escapeRegExp$1(find), "g"), replace);
 }
 function normalizeStringPosix(path2, allowAboveRoot) {
 	let res = "";
@@ -94427,10 +94469,10 @@ function NotificationEntryButton({ className, badgeClassName, iconClassName }) {
 			"aria-label": label,
 			title: label,
 			"data-notification-entry-button": "true",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bell, { className: cn$1("h-4 w-4", iconClassName) }), unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-				className: cn$1("bg-primary ring-background text-primary-foreground absolute -right-1.5 -top-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] leading-4 ring-2", badgeClassName),
-				"aria-hidden": "true",
-				children: unreadCount > 99 ? "99+" : unreadCount
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bell, { className: cn$1("h-4 w-4", iconClassName) }), unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CountBadge, {
+				count: unreadCount,
+				className: cn$1("ring-background absolute -right-1.5 -top-1.5 ring-2", badgeClassName),
+				"aria-hidden": "true"
 			})]
 		})
 	});
@@ -126159,12 +126201,15 @@ var { codeToHtml, codeToHast, codeToTokens, codeToTokensBase, codeToTokensWithTh
 * Simple markdown renderer with GFM support and shiki code highlighting.
 * For full markdown viewing with ToC, use MarkdownViewer instead.
 */
-function MarkdownContent({ children, className = "", components }) {
+function MarkdownContent({ children, className = "", components, inlineTextAnnotations = [], blockAnnotations = [] }) {
+	const blockAnnotationByOffset = (0, import_react.useMemo)(() => new Map(blockAnnotations.map((annotation) => [createBlockAnnotationKey$1(annotation), annotation])), [blockAnnotations]);
+	const annotationComponents = (0, import_react.useMemo)(() => createAnnotationComponents(inlineTextAnnotations, blockAnnotationByOffset), [inlineTextAnnotations, blockAnnotationByOffset]);
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 		className: `markdown-content ${className}`,
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Markdown, {
 			remarkPlugins: [remarkGfm],
 			components: {
+				...annotationComponents,
 				code: CodeBlock,
 				pre: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }),
 				...components
@@ -126173,6 +126218,156 @@ function MarkdownContent({ children, className = "", components }) {
 		})
 	});
 }
+function renderInlineAnnotatedChildren(children, annotations) {
+	if (annotations.length === 0) return children;
+	if (typeof children === "string" || typeof children === "number") return renderInlineAnnotatedText(String(children), annotations);
+	if (Array.isArray(children)) return children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: renderInlineAnnotatedChildren(child, annotations) }, `inline-node-${index}`));
+	return children;
+}
+function renderInlineAnnotatedText(text, annotations) {
+	const pattern = createInlineAnnotationPattern(annotations);
+	if (!pattern) return text;
+	const annotationByText = new Map(annotations.map((annotation) => [annotation.text, annotation]));
+	const nodes = [];
+	let lastIndex = 0;
+	for (const match of text.matchAll(pattern)) {
+		const matchText = match[0];
+		const start = match.index ?? 0;
+		const annotation = annotationByText.get(matchText);
+		if (!annotation) continue;
+		if (start > lastIndex) nodes.push(text.slice(lastIndex, start));
+		nodes.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: annotation.className,
+			...annotation.dataAttributes,
+			children: matchText
+		}, `inline-annotation-${start}-${matchText}`));
+		lastIndex = start + matchText.length;
+	}
+	if (lastIndex === 0) return text;
+	if (lastIndex < text.length) nodes.push(text.slice(lastIndex));
+	return nodes;
+}
+function createInlineAnnotationPattern(annotations) {
+	const terms = Array.from(new Set(annotations.map((annotation) => annotation.text.trim()))).filter(Boolean).sort((left, right) => right.length - left.length);
+	if (terms.length === 0) return void 0;
+	return new RegExp(`\\b(${terms.map(escapeRegExp).join("|")})\\b`, "g");
+}
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function getMarkdownNodeSourceStartOffset(node) {
+	if (!node || typeof node !== "object" || !("position" in node)) return void 0;
+	const position = node.position;
+	if (!position || typeof position !== "object" || !("start" in position)) return void 0;
+	const start = position.start;
+	if (!start || typeof start !== "object" || !("offset" in start)) return void 0;
+	const offset = start.offset;
+	return typeof offset === "number" ? offset : void 0;
+}
+function getBlockAnnotation(node, annotationByOffset, sourceKind) {
+	const sourceStartOffset = getMarkdownNodeSourceStartOffset(node);
+	if (sourceStartOffset === void 0) return void 0;
+	return (sourceKind ? annotationByOffset.get(createBlockAnnotationKey$1({
+		sourceStartOffset,
+		sourceKind
+	})) : void 0) ?? annotationByOffset.get(createBlockAnnotationKey$1({ sourceStartOffset }));
+}
+function createBlockAnnotationKey$1(annotation) {
+	return `${annotation.sourceStartOffset}:${annotation.sourceKind ?? "*"}`;
+}
+function mergeClassName(...classNames) {
+	return classNames.filter(Boolean).join(" ") || void 0;
+}
+function createAnnotationComponents(inlineAnnotations, blockAnnotationByOffset) {
+	if (inlineAnnotations.length === 0 && blockAnnotationByOffset.size === 0) return {};
+	const render = (children) => renderInlineAnnotatedChildren(children, inlineAnnotations);
+	return {
+		p: ({ children, node, ...props }) => {
+			const annotation = getBlockAnnotation(node, blockAnnotationByOffset, "paragraph");
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				...props,
+				...annotation?.dataAttributes,
+				className: mergeClassName(props.className, annotation?.className),
+				children: render(children)
+			});
+		},
+		ul: ({ children, node, ...props }) => {
+			const annotation = getBlockAnnotation(node, blockAnnotationByOffset, "list");
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+				...props,
+				...annotation?.dataAttributes,
+				className: mergeClassName(props.className, annotation?.className),
+				children
+			});
+		},
+		ol: ({ children, node, ...props }) => {
+			const annotation = getBlockAnnotation(node, blockAnnotationByOffset, "list");
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", {
+				...props,
+				...annotation?.dataAttributes,
+				className: mergeClassName(props.className, annotation?.className),
+				children
+			});
+		},
+		li: ({ children, node, className, ...props }) => {
+			const annotation = getBlockAnnotation(node, blockAnnotationByOffset, "listItem");
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", {
+				...props,
+				...annotation?.dataAttributes,
+				className: mergeClassName(className, annotation?.className),
+				children: render(children)
+			});
+		},
+		strong: ({ children, node, ...props }) => {
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", {
+				...props,
+				children: render(children)
+			});
+		},
+		em: ({ children, node, ...props }) => {
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", {
+				...props,
+				children: render(children)
+			});
+		},
+		a: ({ children, node, ...props }) => {
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+				...props,
+				children: render(children)
+			});
+		},
+		blockquote: ({ children, node, ...props }) => {
+			const annotation = getBlockAnnotation(node, blockAnnotationByOffset, "blockquote");
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("blockquote", {
+				...props,
+				...annotation?.dataAttributes,
+				className: mergeClassName(props.className, annotation?.className),
+				children
+			});
+		},
+		table: ({ children, node, ...props }) => {
+			const annotation = getBlockAnnotation(node, blockAnnotationByOffset, "table");
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", {
+				...props,
+				...annotation?.dataAttributes,
+				className: mergeClassName(props.className, annotation?.className),
+				children
+			});
+		},
+		th: ({ children, node, ...props }) => {
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+				...props,
+				children: render(children)
+			});
+		},
+		td: ({ children, node, ...props }) => {
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+				...props,
+				children: render(children)
+			});
+		}
+	};
+}
 /** Shared code block component with shiki syntax highlighting */
 function CodeBlock({ children, className }) {
 	const [html, setHtml] = (0, import_react.useState)(null);
@@ -126276,32 +126471,38 @@ function Toc({ items, defaultCollapsed = true, className = "" }) {
 	const tree = (0, import_react.useMemo)(() => buildTocTree(items), [items]);
 	if (items.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: `hidden ${className}` });
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", {
-		className: `toc-root scrollbar-none sticky top-0 z-10 max-h-[calc(100cqh-3rem)] self-start overflow-y-auto ${className}`,
+		className: `toc-root sticky top-0 z-10 h-10 w-full min-w-0 max-w-full self-start ${className}`,
 		children: [
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: tocStyles }),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "toc-narrow border-border bg-background overflow-hidden rounded border",
+				className: "toc-narrow border-border bg-background/60 overflow-hidden rounded border backdrop-blur-sm",
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
 					onClick: () => setCollapsed(!collapsed),
-					className: `text-foreground flex w-full items-center gap-2 px-3 py-2 ${collapsed ? "" : "border-border border-b"}`,
+					className: `text-foreground flex w-full min-w-0 items-center gap-2 px-3 py-2 ${collapsed ? "" : "border-border border-b"}`,
 					"aria-label": collapsed ? "Show table of contents" : "Hide table of contents",
 					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(List, { className: "h-4 w-4" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(List, { className: "h-4 w-4 shrink-0" }),
 						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-							className: "text-sm",
+							className: "min-w-0 truncate text-sm",
 							children: "Contents"
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { className: `ml-auto h-4 w-4 transition-transform ${collapsed ? "" : "rotate-180"}` })
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { className: `ml-auto h-4 w-4 shrink-0 transition-transform ${collapsed ? "" : "rotate-180"}` })
 					]
-				}), !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TocTree, { nodes: tree })]
+				}), !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "toc-scroll toc-narrow-scroll scrollbar-thin scrollbar-track-transparent min-h-0 overflow-y-auto overscroll-contain p-2",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TocTree, { nodes: tree })
+				})]
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("nav", {
-				className: "toc-wide flex flex-col",
+				className: "toc-wide min-w-0 max-w-full flex-col overflow-hidden",
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "text-muted-foreground flex items-center gap-2 px-3 py-2 text-xs font-medium uppercase tracking-wide",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(List, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "On this page" })]
+					className: "text-muted-foreground flex min-w-0 items-center gap-2 px-3 py-2 text-xs font-medium uppercase tracking-wide",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(List, { className: "h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "min-w-0 truncate",
+						children: "On this page"
+					})]
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					className: "scrollbar-thin scrollbar-track-transparent min-h-0 flex-1 overflow-y-auto p-2",
+					className: "toc-scroll toc-wide-scroll scrollbar-thin scrollbar-track-transparent min-h-0 flex-1 overflow-y-auto overscroll-contain p-2",
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TocTree, { nodes: tree })
 				})]
 			})
@@ -126312,7 +126513,7 @@ function Toc({ items, defaultCollapsed = true, className = "" }) {
 * Find the nearest scrollable ancestor element.
 */
 function findScrollableParent(element) {
-	return element.closest(".toc-root");
+	return element.closest(".toc-scroll") ?? element.closest(".toc-root");
 }
 /**
 * Scroll element into view within its scrollable container using scrollTo.
@@ -126374,10 +126575,18 @@ function TocTree({ nodes, depth = 0 }) {
 var tocStyles = String.raw`
   /* Default: narrow mode (collapsible) */
   .toc-narrow {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    max-height: min(20rem, calc(100cqh - 2rem), calc(100svh - 2rem));
+    max-width: 100%;
+    min-width: 0;
+  }
+  .toc-narrow-scroll {
+    max-height: min(18rem, calc(100cqh - 5rem), calc(100svh - 5rem));
   }
   .toc-wide {
     display: none;
+    max-height: min(calc(100cqh - 3rem), calc(100svh - 3rem));
   }
 
   /* Wide container: show sidebar mode */
@@ -126386,7 +126595,19 @@ var tocStyles = String.raw`
       display: none;
     }
     .toc-wide {
-      display: block;
+      display: flex;
+    }
+  }
+
+  @supports not (height: 100cqh) {
+    .toc-narrow {
+      max-height: min(20rem, calc(100svh - 2rem));
+    }
+    .toc-narrow-scroll {
+      max-height: min(18rem, calc(100svh - 5rem));
+    }
+    .toc-wide {
+      max-height: calc(100svh - 3rem);
     }
   }
 
@@ -126582,26 +126803,41 @@ function useSectionTimeline() {
 *
 * 嵌套时自动检测父级 Context，只渲染内容不显示 ToC sidebar。
 */
-function MarkdownViewer({ markdown, className = "", onReady, collectToc = true }) {
+function MarkdownViewer({ markdown, className = "", onReady, collectToc = true, headingTransform, inlineTextAnnotations, blockAnnotations }) {
 	const isNested = !!useTocContext();
 	if (!collectToc) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlainMarkdownViewer, {
 		markdown,
-		className
+		className,
+		headingTransform,
+		inlineTextAnnotations,
+		blockAnnotations
 	});
 	if (isNested) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NestedMarkdownViewer, {
 		markdown,
-		className
+		className,
+		headingTransform,
+		inlineTextAnnotations,
+		blockAnnotations
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RootMarkdownViewer, {
 		markdown,
 		className,
-		onReady
+		onReady,
+		headingTransform,
+		inlineTextAnnotations,
+		blockAnnotations
 	});
 }
-function PlainMarkdownViewer({ markdown, className = "" }) {
-	if (typeof markdown === "string") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownContent, {
+function PlainMarkdownViewer({ markdown, className = "", headingTransform, inlineTextAnnotations, blockAnnotations }) {
+	if (typeof markdown === "string") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StringMarkdownContent, {
+		markdown,
 		className,
-		children: markdown
+		collector: new TocCollector(),
+		levelOffset: 0,
+		headingTransform,
+		inlineTextAnnotations,
+		blockAnnotations,
+		collectToc: false
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlainBuilderMarkdownContent, {
 		builder: markdown,
@@ -126644,7 +126880,7 @@ function PlainBuilderMarkdownContent({ builder, className }) {
 		children: builder(components)
 	});
 }
-function RootMarkdownViewer({ markdown, className, onReady }) {
+function RootMarkdownViewer({ markdown, className, onReady, headingTransform, inlineTextAnnotations, blockAnnotations }) {
 	const [tocItems, setTocItems] = (0, import_react.useState)([]);
 	const collectorRef = (0, import_react.useRef)(null);
 	const readyCalledRef = (0, import_react.useRef)(false);
@@ -126666,7 +126902,10 @@ function RootMarkdownViewer({ markdown, className, onReady }) {
 	const content = typeof markdown === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StringMarkdownContent, {
 		markdown,
 		collector,
-		levelOffset: 0
+		levelOffset: 0,
+		headingTransform,
+		inlineTextAnnotations,
+		blockAnnotations
 	}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BuilderMarkdownContent, {
 		builder: markdown,
 		collector,
@@ -126679,27 +126918,30 @@ function RootMarkdownViewer({ markdown, className, onReady }) {
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: `@container-[size] h-full ${className}`,
 			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: viewerStyles }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MarkdownContainer, {
-				className: "viewer-scroll viewer-layout gap-6",
+				className: "viewer-scroll toc-page-layout viewer-layout gap-6",
 				timelineScope,
 				enableHashNavigation: true,
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toc, {
 					items: tocItems,
-					className: "viewer-toc"
+					className: "toc-page-sidebar viewer-toc"
 				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-					className: "viewer-content min-w-0",
+					className: "toc-page-content viewer-content min-w-0",
 					children: content
 				})]
 			})]
 		})
 	});
 }
-function NestedMarkdownViewer({ markdown, className }) {
+function NestedMarkdownViewer({ markdown, className, headingTransform, inlineTextAnnotations, blockAnnotations }) {
 	const { collector, levelOffset } = useTocContext();
 	return typeof markdown === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StringMarkdownContent, {
 		markdown,
 		className,
 		collector,
-		levelOffset
+		levelOffset,
+		headingTransform,
+		inlineTextAnnotations,
+		blockAnnotations
 	}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BuilderMarkdownContent, {
 		builder: markdown,
 		className,
@@ -126707,21 +126949,33 @@ function NestedMarkdownViewer({ markdown, className }) {
 		levelOffset
 	});
 }
-function StringMarkdownContent({ markdown, collector, levelOffset, className }) {
+function StringMarkdownContent({ markdown, collector, levelOffset, className, headingTransform, inlineTextAnnotations, blockAnnotations, collectToc = true }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownContent, {
 		className,
 		components: (0, import_react.useMemo)(() => {
 			const createHeading = (level) => {
-				return function Heading({ children }) {
+				return function Heading({ children, node }) {
 					const text = extractTextFromChildren(children);
 					const sectionTimelineIndex = useSectionTimeline();
+					const sourceRange = getMarkdownNodeSourceRange(node);
 					const adjustedLevel = Math.min(level + levelOffset, 6);
-					const registration = sectionTimelineIndex === null ? collector.add(text, adjustedLevel) : collector.bindSectionHeading(sectionTimelineIndex, text, adjustedLevel);
+					const transform = headingTransform?.({
+						sourceLevel: level,
+						level: adjustedLevel,
+						text,
+						...sourceRange.start !== void 0 ? { sourceStartOffset: sourceRange.start } : {},
+						...sourceRange.end !== void 0 ? { sourceEndOffset: sourceRange.end } : {}
+					});
+					const tocLabel = transform?.tocLabel ?? text;
+					const registration = collectToc === false ? collector.add(tocLabel, adjustedLevel, transform?.id) : sectionTimelineIndex === null ? collector.add(tocLabel, adjustedLevel, transform?.id) : collector.bindSectionHeading(sectionTimelineIndex, tocLabel, adjustedLevel, transform?.id);
 					return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeadingElement, {
 						level: adjustedLevel,
 						id: registration.id,
 						timelineIndex: registration.timelineIndex,
-						bindTimeline: registration.binding === "heading",
+						bindTimeline: collectToc !== false && registration.binding === "heading",
+						className: transform?.className,
+						dataAttributes: transform?.dataAttributes,
+						suffix: transform?.suffix,
 						children
 					});
 				};
@@ -126734,19 +126988,27 @@ function StringMarkdownContent({ markdown, collector, levelOffset, className })
 				h5: createHeading(5),
 				h6: createHeading(6)
 			};
-		}, [collector, levelOffset]),
+		}, [
+			collector,
+			levelOffset,
+			headingTransform,
+			collectToc
+		]),
+		inlineTextAnnotations,
+		blockAnnotations,
 		children: markdown
 	});
 }
 function BuilderMarkdownContent({ builder, collector, levelOffset, className }) {
 	const components = (0, import_react.useMemo)(() => {
 		const createHeading = (level) => {
-			return function Heading({ id: fixedId, className, children }) {
+			return function Heading({ id: fixedId, className, children, tocLabel }) {
 				const currentLevelOffset = useTocContext()?.levelOffset ?? levelOffset;
 				const sectionTimelineIndex = useSectionTimeline();
 				const text = extractTextFromChildren(children);
+				const label = tocLabel ?? text;
 				const adjustedLevel = Math.min(level + currentLevelOffset, 6);
-				const registration = sectionTimelineIndex === null ? collector.add(text, adjustedLevel, fixedId) : collector.bindSectionHeading(sectionTimelineIndex, text, adjustedLevel, fixedId);
+				const registration = sectionTimelineIndex === null ? collector.add(label, adjustedLevel, fixedId) : collector.bindSectionHeading(sectionTimelineIndex, label, adjustedLevel, fixedId);
 				return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeadingElement, {
 					level: adjustedLevel,
 					id: registration.id,
@@ -126793,44 +127055,74 @@ function SectionElement({ timelineIndex, children, className }) {
 		children
 	});
 }
-function HeadingElement({ level, id, timelineIndex, bindTimeline = false, children, className }) {
+function HeadingElement({ level, id, timelineIndex, bindTimeline = false, children, suffix, className, dataAttributes }) {
 	const style = bindTimeline && timelineIndex !== void 0 ? { viewTimelineName: `--toc-${timelineIndex}` } : void 0;
 	switch (level) {
-		case 1: return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+		case 1: return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h1", {
 			id,
 			className,
 			style,
-			children
+			...dataAttributes,
+			children: [
+				children,
+				suffix ? " " : null,
+				suffix
+			]
 		});
-		case 2: return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+		case 2: return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", {
 			id,
 			className,
 			style,
-			children
+			...dataAttributes,
+			children: [
+				children,
+				suffix ? " " : null,
+				suffix
+			]
 		});
-		case 3: return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+		case 3: return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", {
 			id,
 			className,
 			style,
-			children
+			...dataAttributes,
+			children: [
+				children,
+				suffix ? " " : null,
+				suffix
+			]
 		});
-		case 4: return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", {
+		case 4: return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h4", {
 			id,
 			className,
 			style,
-			children
+			...dataAttributes,
+			children: [
+				children,
+				suffix ? " " : null,
+				suffix
+			]
 		});
-		case 5: return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", {
+		case 5: return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h5", {
 			id,
 			className,
 			style,
-			children
+			...dataAttributes,
+			children: [
+				children,
+				suffix ? " " : null,
+				suffix
+			]
 		});
-		case 6: return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", {
+		case 6: return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h6", {
 			id,
 			className,
 			style,
-			children
+			...dataAttributes,
+			children: [
+				children,
+				suffix ? " " : null,
+				suffix
+			]
 		});
 	}
 }
@@ -126866,6 +127158,24 @@ function extractTextFromChildren(children) {
 	if (typeof children === "object" && "props" in children) return extractTextFromChildren(children.props?.children);
 	return "";
 }
+function getMarkdownNodeSourceRange(node) {
+	if (!node || typeof node !== "object" || !("position" in node)) return {};
+	const position = node.position;
+	if (!position || typeof position !== "object") return {};
+	const start = readMarkdownNodeOffset(position, "start");
+	const end = readMarkdownNodeOffset(position, "end");
+	return {
+		...start !== void 0 ? { start } : {},
+		...end !== void 0 ? { end } : {}
+	};
+}
+function readMarkdownNodeOffset(position, key) {
+	if (!(key in position)) return void 0;
+	const point = position[key];
+	if (!point || typeof point !== "object" || !("offset" in point)) return void 0;
+	const offset = point.offset;
+	return typeof offset === "number" ? offset : void 0;
+}
 /** 比较两个 TocItem 数组是否相等 */
 function arraysEqual(a, b) {
 	if (a.length !== b.length) return false;
@@ -126873,28 +127183,7 @@ function arraysEqual(a, b) {
 }
 /** CSS for container queries layout */
 var viewerStyles = String.raw`
-  /* Container query based layout */
-  .viewer-layout {
-    display: block;
-  }
-  .viewer-toc {
-    margin-bottom: 1rem;
-  }
-
-  /* Wide container: grid layout with ToC on right */
-  @container (min-width: 768px) {
-    .viewer-layout {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) 180px;
-    }
-    .viewer-toc {
-      order: 2;
-      margin-bottom: 0;
-    }
-    .viewer-content {
-      order: 1;
-    }
-  }
+  /* MarkdownViewer keeps layout hooks local; shared ToC geometry lives in index.css. */
 `;
 //#endregion
 //#region src/components/tabs.tsx
@@ -146263,8 +146552,11 @@ function ChangeList() {
 									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 										className: "flex flex-col items-end gap-1 text-right text-sm",
 										children: [
-											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-												className: `rounded border px-1.5 py-0.5 text-[11px] font-medium ${phase.toneClass}`,
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+												tone: "custom",
+												size: "sm",
+												shape: "box",
+												className: `border ${phase.toneClass}`,
 												children: phase.label
 											}),
 											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -149673,7 +149965,7 @@ function Switch({ checked, onCheckedChange, ariaLabel, id, name, required, disab
 		className: cn$1("inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-transparent p-0.5 outline-none transition-colors", "focus-visible:ring-primary focus-visible:ring-1", checked ? "border-primary bg-primary" : "bg-muted-foreground/30 hover:bg-muted-foreground/40", disabled && "cursor-not-allowed opacity-50", readOnly && !disabled && "cursor-default", className),
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 			"aria-hidden": "true",
-			className: cn$1("pointer-events-none block h-5 w-5 rounded-full bg-white shadow-sm transition-transform", checked ? "translate-x-5" : "translate-x-0", thumbClassName)
+			className: cn$1("pointer-events-none block h-5 w-5 rounded-full bg-white transition-transform", checked ? "translate-x-5" : "translate-x-0", thumbClassName)
 		})
 	})] });
 }
@@ -152672,8 +152964,11 @@ function DiffStat({ diff, className = "" }) {
 }
 function GitFilesBadge({ files }) {
 	if (files <= 0) return null;
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-		className: "inline-flex items-center rounded border border-zinc-500/35 bg-zinc-500/10 px-[0.15rem] py-0 font-mono text-[10px] text-zinc-700 dark:border-zinc-300/40 dark:bg-zinc-300/15 dark:text-zinc-100",
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge, {
+		tone: "custom",
+		size: "xs",
+		shape: "box",
+		className: "h-auto min-w-0 border border-zinc-500/35 bg-zinc-500/10 px-[0.15rem] py-0 font-mono text-[10px] font-normal text-zinc-700 dark:border-zinc-300/40 dark:bg-zinc-300/15 dark:text-zinc-100",
 		children: [files, "f"]
 	});
 }
@@ -153161,8 +153456,11 @@ function Dashboard() {
 								className: "text-xs font-semibold",
 								children: schema.schemaName
 							})
-						}), schema.readyToArchive > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-							className: "text-muted-foreground rounded border px-1 py-0.5 text-[10px]",
+						}), schema.readyToArchive > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge, {
+							tone: "custom",
+							size: "xs",
+							shape: "box",
+							className: "text-muted-foreground border",
 							children: ["archive-ready ", schema.readyToArchive]
 						}) : null]
 					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
@@ -153458,8 +153756,11 @@ function Dashboard() {
 							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 								className: "shrink-0 text-right text-sm",
 								children: [
-									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-										className: `rounded border px-1.5 py-0.5 text-[11px] font-medium ${phase.toneClass}`,
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+										tone: "custom",
+										size: "sm",
+										shape: "box",
+										className: `border ${phase.toneClass}`,
 										children: phase.label
 									}),
 									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -153909,6 +154210,1129 @@ function SpecList() {
 	});
 }
 //#endregion
+//#region ../core/src/markdown-facts.ts
+function toMarkdownFactKind(type) {
+	switch (type) {
+		case "root":
+		case "heading":
+		case "paragraph":
+		case "list":
+		case "listItem":
+		case "blockquote":
+		case "table":
+		case "tableRow":
+		case "tableCell":
+		case "code":
+		case "thematicBreak":
+		case "html":
+		case "definition":
+		case "footnoteDefinition": return type;
+		default: return "unknown";
+	}
+}
+function parseMarkdownFacts(sourceMarkdown) {
+	const root = fromMarkdown(sourceMarkdown, {
+		extensions: [gfm()],
+		mdastExtensions: [gfmFromMarkdown()]
+	});
+	const facts = [];
+	const nodeIdByNode = /* @__PURE__ */ new Map();
+	const visit = (node, parentId) => {
+		const fact = createFact(node, sourceMarkdown, facts.length, parentId);
+		facts.push(fact);
+		nodeIdByNode.set(node, fact.id);
+		if (isParentNode(node)) for (const child of node.children) {
+			if (!isSupportedNode(child)) continue;
+			visit(child, fact.id);
+			const childId = nodeIdByNode.get(child);
+			if (childId) fact.children.push(childId);
+		}
+	};
+	visit(root);
+	return {
+		sourceMarkdown,
+		rootId: "md-1",
+		facts
+	};
+}
+function createFact(node, sourceMarkdown, index, parentId) {
+	const base = {
+		id: `md-${index + 1}`,
+		kind: toMarkdownFactKind(node.type),
+		mdastType: node.type,
+		text: getNodeText(node),
+		children: [],
+		range: toSourceRange(sourceMarkdown, node.position),
+		...parentId ? { parentId } : {}
+	};
+	switch (node.type) {
+		case "heading": return {
+			...base,
+			depth: node.depth
+		};
+		case "list": return {
+			...base,
+			ordered: Boolean(node.ordered)
+		};
+		case "listItem": return {
+			...base,
+			...typeof node.checked === "boolean" ? { checked: node.checked } : {}
+		};
+		case "code": return {
+			...base,
+			text: node.value,
+			value: node.value,
+			...node.lang ? { language: node.lang } : {}
+		};
+		case "html": return {
+			...base,
+			value: node.value
+		};
+		default: return base;
+	}
+}
+function toSourceRange(sourceMarkdown, position) {
+	if (!position) return void 0;
+	const startOffset = position.start.offset;
+	const endOffset = position.end.offset;
+	const rawMarkdown = typeof startOffset === "number" && typeof endOffset === "number" ? sourceMarkdown.slice(startOffset, endOffset) : "";
+	return {
+		start: {
+			line: position.start.line,
+			column: position.start.column,
+			...typeof startOffset === "number" ? { offset: startOffset } : {}
+		},
+		end: {
+			line: position.end.line,
+			column: position.end.column,
+			...typeof endOffset === "number" ? { offset: endOffset } : {}
+		},
+		rawMarkdown
+	};
+}
+function getNodeText(node) {
+	if (node.type === "code" || node.type === "html") return node.value;
+	return toString$1(node, {
+		includeHtml: true,
+		includeImageAlt: true
+	}).trim();
+}
+function isParentNode(node) {
+	return Array.isArray(node.children);
+}
+function isSupportedNode(node) {
+	switch (node.type) {
+		case "blockquote":
+		case "code":
+		case "definition":
+		case "footnoteDefinition":
+		case "heading":
+		case "html":
+		case "list":
+		case "listItem":
+		case "paragraph":
+		case "table":
+		case "tableRow":
+		case "tableCell":
+		case "thematicBreak": return true;
+		default: return isParentNode(node);
+	}
+}
+//#endregion
+//#region ../core/src/markdown-reading.ts
+function createMarkdownReadingDocument(sourceMarkdown, plugins = []) {
+	return createMarkdownReadingDocumentFromFacts(parseMarkdownFacts(sourceMarkdown), plugins);
+}
+function createMarkdownReadingDocumentFromFacts(factsDocument, plugins = []) {
+	const lookup = createLookup(factsDocument);
+	const annotations = [];
+	for (const rule of plugins.flatMap((plugin) => plugin.annotationRules ?? [])) {
+		const context = createAnnotationContext(lookup, annotations);
+		for (const input of rule.annotate(context)) annotations.push({
+			id: `${rule.id}:${annotations.length + 1}`,
+			ruleId: rule.id,
+			kind: input.kind,
+			targetFactId: input.targetFactId,
+			...input.sourceSpan ? { sourceSpan: input.sourceSpan } : {},
+			...input.textSpan ? { textSpan: input.textSpan } : {},
+			confidence: input.confidence,
+			...input.metadata ? { metadata: input.metadata } : {}
+		});
+	}
+	const projections = {};
+	for (const rule of plugins.flatMap((plugin) => plugin.projectionRules ?? [])) {
+		const context = createProjectionContext(lookup, annotations, projections);
+		const output = rule.project(context);
+		if (output !== void 0) projections[rule.id] = output;
+	}
+	return {
+		...factsDocument,
+		annotations,
+		projections
+	};
+}
+function getMarkdownFactSpan(fact) {
+	const start = fact.range?.start.offset;
+	const end = fact.range?.end.offset;
+	if (typeof start !== "number" || typeof end !== "number") return void 0;
+	return {
+		start,
+		end
+	};
+}
+function trimMarkdownSlice(sourceMarkdown, start, end) {
+	return sourceMarkdown.slice(start, Math.max(start, end)).trim();
+}
+function getMarkdownHeadingFacts(document) {
+	return document.facts.filter((fact) => fact.kind === "heading" && typeof fact.depth === "number");
+}
+function getMarkdownHeadingEnd(headings, index, sourceLength) {
+	const heading = headings[index];
+	if (!heading) return sourceLength;
+	const headingDepth = heading.depth ?? 6;
+	for (let i = index + 1; i < headings.length; i++) {
+		const next = headings[i];
+		if (next && (next.depth ?? 6) <= headingDepth) return getMarkdownFactSpan(next)?.start ?? sourceLength;
+	}
+	return sourceLength;
+}
+function getMarkdownAnnotationsForFact(annotations, factId, kind) {
+	return annotations.filter((annotation) => annotation.targetFactId === factId && (!kind || annotation.kind === kind));
+}
+function getMarkdownAnnotation(annotations, factId, kind) {
+	return annotations.find((annotation) => annotation.targetFactId === factId && annotation.kind === kind);
+}
+function buildMarkdownParentMap(facts) {
+	const factById = new Map(facts.map((fact) => [fact.id, fact]));
+	const parentById = /* @__PURE__ */ new Map();
+	for (const fact of facts) {
+		if (!fact.parentId) continue;
+		const parent = factById.get(fact.parentId);
+		if (parent) parentById.set(fact.id, parent);
+	}
+	return parentById;
+}
+function createLookup(document) {
+	return {
+		sourceMarkdown: document.sourceMarkdown,
+		rootId: document.rootId,
+		facts: document.facts,
+		factById: new Map(document.facts.map((fact) => [fact.id, fact])),
+		parentById: buildMarkdownParentMap(document.facts)
+	};
+}
+function createAnnotationContext(lookup, previousAnnotations) {
+	return {
+		...lookup,
+		previousAnnotations,
+		getAnnotationsForFact: (factId, kind) => getMarkdownAnnotationsForFact(previousAnnotations, factId, kind),
+		getAnnotation: (factId, kind) => getMarkdownAnnotation(previousAnnotations, factId, kind)
+	};
+}
+function createProjectionContext(lookup, annotations, projections) {
+	return {
+		...lookup,
+		annotations,
+		projections,
+		getAnnotationsForFact: (factId, kind) => getMarkdownAnnotationsForFact(annotations, factId, kind),
+		getAnnotation: (factId, kind) => getMarkdownAnnotation(annotations, factId, kind)
+	};
+}
+//#endregion
+//#region ../core/src/openspec-annotations.ts
+var OPEN_SPEC_ANNOTATION_RULES = {
+	documentTitle: "openspec.heading.document-title.v2",
+	purposeSection: "openspec.heading.purpose-section.v2",
+	requirementsSection: "openspec.heading.requirements-section.v2",
+	requirementPrefix: "openspec.heading.requirement-prefix.v2",
+	requirementUnderSection: "openspec.heading.requirement-under-section.v2",
+	requirementCapabilityPrefix: "openspec.heading.capability-prefix.v2",
+	requirementCapabilityText: "openspec.heading.capability-text.v2",
+	scenarioPrefix: "openspec.heading.scenario-prefix.v2",
+	scenarioExamplePrefix: "openspec.heading.example-prefix.v2",
+	scenarioStepHeading: "openspec.heading.step-backed-scenario.v2",
+	scenarioStep: "openspec.list-item.scenario-step.v2",
+	keyword: "openspec.inline.keyword.v2"
+};
+var REQUIREMENT_PREFIX_PATTERN = /^(?:Requirement|Capability):\s*/i;
+var SCENARIO_PREFIX_PATTERN = /^(?:Scenario|Example):\s*/i;
+var SCENARIO_STEP_KEYWORDS = [
+	"GIVEN",
+	"WHEN",
+	"THEN",
+	"AND",
+	"BUT"
+];
+var REQUIREMENT_KEYWORD_PATTERN = new RegExp(`\\b(${[
+	"SHALL",
+	"MUST",
+	"SHOULD",
+	"MAY"
+].join("|")})\\b`, "g");
+var SCENARIO_STEP_PATTERN = new RegExp(`^\\s*(?:[-*+]\\s+)?(?:\\[[ xX]\\]\\s+)?(?:\\*\\*)?(${SCENARIO_STEP_KEYWORDS.join("|")})\\b(?:\\*\\*)?\\s*:?\\s*(.+?)\\s*$`, "i");
+var REQUIREMENT_SECTION_TERMS = [
+	"requirement",
+	"specification",
+	"capability",
+	"capabilities"
+];
+var PURPOSE_SECTION_TERMS = [
+	"purpose",
+	"overview",
+	"objective",
+	"goal",
+	"goals"
+];
+var REQUIREMENT_BODY_SIGNAL_PATTERN = /\b(SHALL|MUST|SHOULD|MAY|CAN|WILL)\b/i;
+var NON_SCENARIO_HEADING_PATTERN = /^(notes?|details?|rationale|reason|migration|examples?|open questions?)$/i;
+var builtinOpenSpecReadingPlugin = {
+	id: "openspec.builtin-reading.v2",
+	annotationRules: [
+		{
+			id: OPEN_SPEC_ANNOTATION_RULES.documentTitle,
+			annotate(context) {
+				return context.facts.flatMap((fact) => {
+					if (fact.kind !== "heading" || fact.depth !== 1) return [];
+					return [{
+						kind: "document-title",
+						targetFactId: fact.id,
+						confidence: "strong",
+						metadata: { title: fact.text }
+					}];
+				});
+			}
+		},
+		{
+			id: OPEN_SPEC_ANNOTATION_RULES.purposeSection,
+			annotate(context) {
+				return context.facts.flatMap((fact) => {
+					if (fact.kind !== "heading" || fact.depth !== 2) return [];
+					if (!matchesAnyTerm(fact.text, PURPOSE_SECTION_TERMS)) return [];
+					return [{
+						kind: "purpose-section",
+						targetFactId: fact.id,
+						confidence: isExactTerm(fact.text, ["Purpose", "Overview"]) ? "strong" : "weak",
+						metadata: { title: fact.text }
+					}];
+				});
+			}
+		},
+		{
+			id: OPEN_SPEC_ANNOTATION_RULES.requirementsSection,
+			annotate(context) {
+				return context.facts.flatMap((fact) => {
+					if (fact.kind !== "heading" || fact.depth !== 2) return [];
+					if (!matchesAnyTerm(fact.text, REQUIREMENT_SECTION_TERMS)) return [];
+					return [{
+						kind: "requirements-section",
+						targetFactId: fact.id,
+						confidence: fact.text.toLowerCase().includes("requirement") ? "strong" : "weak",
+						metadata: { title: fact.text }
+					}];
+				});
+			}
+		},
+		{
+			id: OPEN_SPEC_ANNOTATION_RULES.requirementPrefix,
+			annotate(context) {
+				return context.facts.flatMap((fact) => {
+					if (fact.kind !== "heading" || fact.depth !== 3) return [];
+					if (!/^Requirement:\s*/i.test(fact.text)) return [];
+					return [createRequirementAnnotation(fact, "strong")];
+				});
+			}
+		},
+		{
+			id: OPEN_SPEC_ANNOTATION_RULES.requirementCapabilityPrefix,
+			annotate(context) {
+				return context.facts.flatMap((fact) => {
+					if (fact.kind !== "heading" || fact.depth !== 3) return [];
+					if (!/^Capability:\s*/i.test(fact.text)) return [];
+					return [createRequirementAnnotation(fact, "weak")];
+				});
+			}
+		},
+		{
+			id: OPEN_SPEC_ANNOTATION_RULES.requirementUnderSection,
+			annotate(context) {
+				return getRequirementSections(context).flatMap((section) => {
+					return getChildHeadings(context, section, 3).flatMap((fact) => {
+						if (context.getAnnotation(fact.id, "requirement")) return [];
+						if (REQUIREMENT_PREFIX_PATTERN.test(fact.text)) return [];
+						if (!hasRequirementBodySignals(context, fact, section.end)) return [];
+						return [{
+							kind: "requirement",
+							targetFactId: fact.id,
+							confidence: "weak",
+							metadata: { title: fact.text }
+						}];
+					});
+				});
+			}
+		},
+		{
+			id: OPEN_SPEC_ANNOTATION_RULES.requirementCapabilityText,
+			annotate(context) {
+				return getRequirementSections(context).flatMap((section) => {
+					return getChildHeadings(context, section, 3).flatMap((fact) => {
+						if (context.getAnnotation(fact.id, "requirement")) return [];
+						if (!matchesAnyTerm(fact.text, [
+							"capability",
+							"feature",
+							"behavior"
+						])) return [];
+						return [{
+							kind: "requirement",
+							targetFactId: fact.id,
+							confidence: "weak",
+							metadata: { title: stripRequirementPrefix(fact.text) || fact.text }
+						}];
+					});
+				});
+			}
+		},
+		{
+			id: OPEN_SPEC_ANNOTATION_RULES.scenarioPrefix,
+			annotate(context) {
+				return getRequirementHeadings(context).flatMap((requirement) => {
+					return getNestedHeadings(context, requirement).flatMap((fact) => {
+						if (fact.depth !== 4 || !/^Scenario:\s*/i.test(fact.text)) return [];
+						return [createScenarioAnnotation(fact, "strong")];
+					});
+				});
+			}
+		},
+		{
+			id: OPEN_SPEC_ANNOTATION_RULES.scenarioExamplePrefix,
+			annotate(context) {
+				return getRequirementHeadings(context).flatMap((requirement) => {
+					return getNestedHeadings(context, requirement).flatMap((fact) => {
+						if (fact.depth !== 4 || !/^Example:\s*/i.test(fact.text)) return [];
+						return [createScenarioAnnotation(fact, "weak")];
+					});
+				});
+			}
+		},
+		{
+			id: OPEN_SPEC_ANNOTATION_RULES.scenarioStepHeading,
+			annotate(context) {
+				return getRequirementHeadings(context).flatMap((requirement) => {
+					return getNestedHeadings(context, requirement).flatMap((fact) => {
+						if (fact.depth !== 4) return [];
+						if (context.getAnnotation(fact.id, "scenario")) return [];
+						if (NON_SCENARIO_HEADING_PATTERN.test(fact.text)) return [];
+						if (!hasScenarioStepSignals(context, fact)) return [];
+						return [{
+							kind: "scenario",
+							targetFactId: fact.id,
+							confidence: "weak",
+							metadata: { title: stripScenarioPrefix(fact.text) || fact.text }
+						}];
+					});
+				});
+			}
+		},
+		{
+			id: OPEN_SPEC_ANNOTATION_RULES.scenarioStep,
+			annotate(context) {
+				const scenarioSections = getScenarioSections(context);
+				return context.facts.flatMap((fact) => {
+					if (fact.kind !== "listItem") return [];
+					if (!isWithinAnySection(fact, scenarioSections)) return [];
+					const metadata = parseScenarioStepFact(fact);
+					if (!metadata) return [];
+					return [{
+						kind: "scenario-step",
+						targetFactId: fact.id,
+						confidence: "strong",
+						metadata
+					}];
+				});
+			}
+		},
+		{
+			id: OPEN_SPEC_ANNOTATION_RULES.keyword,
+			annotate(context) {
+				const scenarioKeywordAnnotations = context.previousAnnotations.flatMap((annotation) => {
+					if (annotation.kind !== "scenario-step") return [];
+					const fact = context.factById.get(annotation.targetFactId);
+					if (!fact) return [];
+					return findScenarioStepKeyword(fact, readAnnotationKeyword(annotation.metadata));
+				});
+				const requirementKeywordAnnotations = context.facts.flatMap((fact) => {
+					if (!canAnnotateInlineKeywords(fact)) return [];
+					return findRequirementKeywords(fact);
+				});
+				return [...scenarioKeywordAnnotations, ...requirementKeywordAnnotations];
+			}
+		}
+	]
+};
+function createRequirementAnnotation(fact, confidence) {
+	return {
+		kind: "requirement",
+		targetFactId: fact.id,
+		confidence,
+		metadata: { title: stripRequirementPrefix(fact.text) || fact.text }
+	};
+}
+function createScenarioAnnotation(fact, confidence) {
+	return {
+		kind: "scenario",
+		targetFactId: fact.id,
+		confidence,
+		metadata: { title: stripScenarioPrefix(fact.text) || "Scenario" }
+	};
+}
+function matchesAnyTerm(text, terms) {
+	const normalized = text.toLowerCase();
+	return terms.some((term) => normalized.includes(term));
+}
+function isExactTerm(text, terms) {
+	const normalized = text.trim().toLowerCase();
+	return terms.some((term) => normalized === term.toLowerCase());
+}
+function stripRequirementPrefix(text) {
+	return text.replace(REQUIREMENT_PREFIX_PATTERN, "").trim();
+}
+function stripScenarioPrefix(text) {
+	return text.replace(SCENARIO_PREFIX_PATTERN, "").trim();
+}
+function getHeadingSections(context) {
+	const headings = getMarkdownHeadingFacts(context);
+	return headings.reduce((sections, fact, index) => {
+		const span = getMarkdownFactSpan(fact);
+		if (!span) return sections;
+		sections.push({
+			fact,
+			start: span.start,
+			end: getMarkdownHeadingEnd(headings, index, context.sourceMarkdown.length)
+		});
+		return sections;
+	}, []);
+}
+function getRequirementSections(context) {
+	return getHeadingSections(context).filter((section) => context.getAnnotation(section.fact.id, "requirements-section"));
+}
+function getChildHeadings(context, section, depth) {
+	return getMarkdownHeadingFacts(context).filter((fact) => {
+		if (fact.depth !== depth) return false;
+		const span = getMarkdownFactSpan(fact);
+		return !!span && span.start > section.start && span.start < section.end;
+	});
+}
+function getRequirementHeadings(context) {
+	return getMarkdownHeadingFacts(context).filter((fact) => context.getAnnotation(fact.id, "requirement"));
+}
+function getNestedHeadings(context, parentHeading) {
+	const headings = getMarkdownHeadingFacts(context);
+	const parentIndex = headings.findIndex((fact) => fact.id === parentHeading.id);
+	const parentSpan = getMarkdownFactSpan(parentHeading);
+	if (parentIndex < 0 || !parentSpan) return [];
+	const end = getMarkdownHeadingEnd(headings, parentIndex, context.sourceMarkdown.length);
+	return headings.filter((fact) => {
+		const span = getMarkdownFactSpan(fact);
+		return !!span && span.start > parentSpan.start && span.start < end;
+	});
+}
+function getScenarioSections(context) {
+	const headings = getMarkdownHeadingFacts(context);
+	return getHeadingSections(context).filter((section) => {
+		if (!context.getAnnotation(section.fact.id, "scenario")) return false;
+		if (NON_SCENARIO_HEADING_PATTERN.test(section.fact.text)) return false;
+		return headings.findIndex((fact) => fact.id === section.fact.id) >= 0;
+	});
+}
+function hasRequirementBodySignals(context, requirementHeading, sectionEnd) {
+	const span = getMarkdownFactSpan(requirementHeading);
+	if (!span) return false;
+	const headings = getMarkdownHeadingFacts(context);
+	const index = headings.findIndex((fact) => fact.id === requirementHeading.id);
+	const end = index >= 0 ? getMarkdownHeadingEnd(headings, index, sectionEnd) : sectionEnd;
+	const body = context.sourceMarkdown.slice(span.end, Math.min(end, sectionEnd));
+	return REQUIREMENT_BODY_SIGNAL_PATTERN.test(body);
+}
+function hasScenarioStepSignals(context, scenarioHeading) {
+	const span = getMarkdownFactSpan(scenarioHeading);
+	if (!span) return false;
+	const headings = getMarkdownHeadingFacts(context);
+	const index = headings.findIndex((fact) => fact.id === scenarioHeading.id);
+	const end = index >= 0 ? getMarkdownHeadingEnd(headings, index, context.sourceMarkdown.length) : context.sourceMarkdown.length;
+	return context.sourceMarkdown.slice(span.end, end).split("\n").some((line) => SCENARIO_STEP_PATTERN.test(line));
+}
+function isWithinAnySection(fact, sections) {
+	const span = getMarkdownFactSpan(fact);
+	if (!span) return false;
+	return sections.some((section) => span.start > section.start && span.start < section.end);
+}
+function parseScenarioStepFact(fact) {
+	const rawMarkdown = fact.range?.rawMarkdown.trim() || fact.text;
+	const match = rawMarkdown.match(SCENARIO_STEP_PATTERN) ?? fact.text.match(SCENARIO_STEP_PATTERN);
+	if (!match) return void 0;
+	return {
+		keyword: match[1].toUpperCase(),
+		contentMarkdown: match[2].trim(),
+		rawMarkdown
+	};
+}
+function canAnnotateInlineKeywords(fact) {
+	return fact.kind === "paragraph" || fact.kind === "listItem" || fact.kind === "heading" || fact.kind === "tableCell";
+}
+function findScenarioStepKeyword(fact, keyword) {
+	if (!isScenarioStepKeywordValue(keyword)) return [];
+	const match = fact.text.match(new RegExp(`^\\s*(${SCENARIO_STEP_KEYWORDS.join("|")})\\b`, "i"));
+	if (!match) return [];
+	const text = match[1];
+	const textStart = match.index ?? 0;
+	const sourceSpan = findSourceSpanForFactText(fact, text);
+	return [{
+		kind: "keyword",
+		targetFactId: fact.id,
+		...sourceSpan ? { sourceSpan } : {},
+		textSpan: {
+			start: textStart,
+			end: textStart + text.length
+		},
+		confidence: "strong",
+		metadata: {
+			keyword,
+			keywordText: text,
+			keywordRole: "scenario-step"
+		}
+	}];
+}
+function findRequirementKeywords(fact) {
+	const span = getMarkdownFactSpan(fact);
+	const text = fact.text;
+	if (!span || !text) return [];
+	return Array.from(text.matchAll(REQUIREMENT_KEYWORD_PATTERN), (match) => {
+		const keyword = match[1].toUpperCase();
+		const textStart = match.index;
+		const textEnd = textStart + match[1].length;
+		const sourceSpan = findSourceSpanForFactText(fact, match[1], textStart);
+		return {
+			kind: "keyword",
+			targetFactId: fact.id,
+			...sourceSpan ? { sourceSpan } : {},
+			textSpan: {
+				start: textStart,
+				end: textEnd
+			},
+			confidence: "strong",
+			metadata: {
+				keyword,
+				keywordText: match[1],
+				keywordRole: isScenarioStepKeyword$1(keyword) ? "scenario-step" : "requirement-modal"
+			}
+		};
+	});
+}
+function isScenarioStepKeywordValue(value) {
+	return typeof value === "string" && SCENARIO_STEP_KEYWORDS.some((stepKeyword) => stepKeyword === value);
+}
+function isScenarioStepKeyword$1(keyword) {
+	return SCENARIO_STEP_KEYWORDS.some((stepKeyword) => stepKeyword === keyword);
+}
+function readAnnotationKeyword(metadata) {
+	return metadata && "keyword" in metadata ? metadata.keyword : void 0;
+}
+function findSourceSpanForFactText(fact, text, textStart = 0) {
+	const factSpan = getMarkdownFactSpan(fact);
+	const rawMarkdown = fact.range?.rawMarkdown;
+	if (!factSpan || !rawMarkdown) return void 0;
+	const rawStart = rawMarkdown.indexOf(text, Math.min(textStart, rawMarkdown.length));
+	const index = rawStart >= 0 ? rawStart : rawMarkdown.indexOf(text);
+	if (index < 0) return void 0;
+	const start = factSpan.start + index;
+	return {
+		start,
+		end: start + text.length
+	};
+}
+//#endregion
+//#region ../core/src/openspec-projection.ts
+var OPEN_SPEC_SPEC_PROJECTION_ID = "openspec.projection.spec.v2";
+var OPEN_SPEC_READING_SECTIONS_PROJECTION_ID = "openspec.projection.reading-sections.v2";
+function createOpenSpecReadingPlugin(options) {
+	return {
+		...builtinOpenSpecReadingPlugin,
+		id: "openspec.builtin-reading-with-projections.v2",
+		projectionRules: [createOpenSpecReadingSectionsProjectionRule(), createOpenSpecSpecProjectionRule(options)]
+	};
+}
+function projectOpenSpecMarkdown(sourceMarkdown, options, plugins = [createOpenSpecReadingPlugin(options)]) {
+	return toProjectedOpenSpecDocument(createMarkdownReadingDocument(sourceMarkdown, plugins));
+}
+function getOpenSpecProjectionAnnotation(annotations, factId, kind) {
+	return annotations.find((annotation) => annotation.targetFactId === factId && annotation.kind === kind);
+}
+function createOpenSpecReadingSectionsProjectionRule() {
+	return {
+		id: OPEN_SPEC_READING_SECTIONS_PROJECTION_ID,
+		project(context) {
+			return {
+				sections: collectSpecSections(toOpenSpecProjectionContext(context)),
+				requirements: collectRequirementBlocks(toOpenSpecProjectionContext(context))
+			};
+		}
+	};
+}
+function createOpenSpecSpecProjectionRule(options) {
+	return {
+		id: OPEN_SPEC_SPEC_PROJECTION_ID,
+		project(context) {
+			return projectOpenSpecContextToSpec(toOpenSpecProjectionContext(context), options);
+		}
+	};
+}
+function projectOpenSpecContextToSpec(context, options) {
+	const name = context.annotations.find((annotation) => annotation.kind === "document-title")?.metadata?.title || options.specId;
+	const overviewSection = collectSpecSections(context).find((section) => section.kind === "overview");
+	const overview = overviewSection ? trimMarkdownSlice(context.sourceMarkdown, getContentStartAfterHeading(context, overviewSection.factId, overviewSection.start), overviewSection.end) : "";
+	const requirements = collectRequirementBlocks(context).map((requirement) => projectRequirement(context, requirement));
+	return {
+		id: options.specId,
+		name: name || options.specId,
+		overview: overview.trim(),
+		requirements,
+		metadata: {
+			version: "1.0.0",
+			format: "openspec"
+		}
+	};
+}
+function createRequirementText(title, bodyMarkdown, scenarioText) {
+	return [
+		title,
+		bodyMarkdown,
+		scenarioText
+	].filter((part) => part.trim()).join("\n\n");
+}
+function collectSpecSections(context) {
+	const headings = getMarkdownHeadingFacts(context);
+	return headings.reduce((sections, fact, index) => {
+		if (fact.depth !== 2) return sections;
+		const span = getFactSpan(fact);
+		if (!span) return sections;
+		sections.push({
+			id: fact.id,
+			title: fact.text,
+			kind: getSectionKind(context.annotations, fact.id),
+			factId: fact.id,
+			start: span.start,
+			end: getMarkdownHeadingEnd(headings, index, context.sourceMarkdown.length)
+		});
+		return sections;
+	}, []);
+}
+function collectRequirementBlocks(context) {
+	const headings = getMarkdownHeadingFacts(context);
+	let reqIndex = 0;
+	return headings.reduce((requirements, fact, index) => {
+		const annotation = getOpenSpecProjectionAnnotation(context.annotations, fact.id, "requirement");
+		if (!annotation) return requirements;
+		const span = getFactSpan(fact);
+		if (!span) return requirements;
+		reqIndex++;
+		const end = getMarkdownHeadingEnd(headings, index, context.sourceMarkdown.length);
+		const title = annotation.metadata?.title?.trim() || fact.text;
+		requirements.push({
+			id: `req-${reqIndex}`,
+			title,
+			factId: fact.id,
+			start: span.start,
+			end,
+			scenarios: collectScenarioBlocks(context, headings, fact, end)
+		});
+		return requirements;
+	}, []);
+}
+function collectScenarioBlocks(context, headings, requirementFact, requirementEnd) {
+	const requirementSpan = getFactSpan(requirementFact);
+	if (!requirementSpan) return [];
+	return headings.reduce((scenarios, fact, index) => {
+		const annotation = getOpenSpecProjectionAnnotation(context.annotations, fact.id, "scenario");
+		if (!annotation) return scenarios;
+		const span = getFactSpan(fact);
+		if (!span || span.start <= requirementSpan.start || span.start >= requirementEnd) return scenarios;
+		scenarios.push({
+			title: annotation.metadata?.title?.trim() || fact.text,
+			factId: fact.id,
+			start: span.start,
+			end: Math.min(getScenarioEnd(context, headings, index, requirementEnd), requirementEnd)
+		});
+		return scenarios;
+	}, []);
+}
+function getScenarioEnd(context, headings, scenarioIndex, requirementEnd) {
+	for (let i = scenarioIndex + 1; i < headings.length; i++) {
+		const next = headings[i];
+		const nextSpan = getFactSpan(next);
+		if (!nextSpan || nextSpan.start >= requirementEnd) return requirementEnd;
+		if ((next.depth ?? 6) <= 3 || getOpenSpecProjectionAnnotation(context.annotations, next.id, "scenario")) return nextSpan.start;
+	}
+	return requirementEnd;
+}
+function getContentStartAfterHeading(context, factId, fallback) {
+	const fact = context.factById.get(factId);
+	return fact ? getFactSpan(fact)?.end ?? fallback : fallback;
+}
+function projectScenario(context, scenario) {
+	const bodyMarkdown = trimMarkdownSlice(context.sourceMarkdown, getContentStartAfterHeading(context, scenario.factId, scenario.start), scenario.end);
+	const rawText = [scenario.title, bodyMarkdown].filter((part) => part.trim()).join("\n");
+	return {
+		title: scenario.title,
+		bodyMarkdown,
+		rawText,
+		steps: getScenarioStepsFromAnnotations(context, scenario)
+	};
+}
+function getScenarioStepsFromAnnotations(context, scenario) {
+	return context.annotations.reduce((steps, annotation) => {
+		if (annotation.kind !== "scenario-step") return steps;
+		const fact = context.factById.get(annotation.targetFactId);
+		const span = fact ? getFactSpan(fact) : void 0;
+		if (!span || span.start <= scenario.start || span.start >= scenario.end) return steps;
+		const keyword = annotation.metadata?.keyword;
+		const contentMarkdown = annotation.metadata?.contentMarkdown;
+		const rawText = annotation.metadata?.rawMarkdown;
+		if (!isScenarioStepKeyword(keyword) || !contentMarkdown || !rawText) return steps;
+		steps.push({
+			keyword,
+			contentMarkdown,
+			rawText
+		});
+		return steps;
+	}, []);
+}
+function isScenarioStepKeyword(value) {
+	return value === "GIVEN" || value === "WHEN" || value === "THEN" || value === "AND" || value === "BUT";
+}
+function projectRequirement(context, requirement) {
+	const bodyEnd = requirement.scenarios.map((scenario) => scenario.start).sort((left, right) => left - right)[0] ?? requirement.end;
+	const bodyMarkdown = trimMarkdownSlice(context.sourceMarkdown, getContentStartAfterHeading(context, requirement.factId, requirement.start), bodyEnd);
+	const scenarios = requirement.scenarios.map((scenario) => projectScenario(context, scenario));
+	const scenarioText = scenarios.map((scenario) => scenario.rawText).join("\n\n");
+	return {
+		id: requirement.id,
+		title: requirement.title,
+		bodyMarkdown,
+		text: createRequirementText(requirement.title, bodyMarkdown, scenarioText),
+		scenarios
+	};
+}
+function getFactSpan(fact) {
+	return getMarkdownFactSpan(fact);
+}
+function getSectionKind(annotations, factId) {
+	if (getOpenSpecProjectionAnnotation(annotations, factId, "purpose-section")) return "overview";
+	if (getOpenSpecProjectionAnnotation(annotations, factId, "requirements-section")) return "requirements";
+	return "other";
+}
+function toOpenSpecProjectionContext(context) {
+	return {
+		sourceMarkdown: context.sourceMarkdown,
+		facts: context.facts,
+		factById: context.factById,
+		annotations: context.annotations.filter(isOpenSpecAnnotation)
+	};
+}
+function toProjectedOpenSpecDocument(document) {
+	return {
+		...document,
+		annotations: document.annotations.filter(isOpenSpecAnnotation)
+	};
+}
+function isOpenSpecAnnotation(annotation) {
+	return annotation.kind === "document-title" || annotation.kind === "purpose-section" || annotation.kind === "requirements-section" || annotation.kind === "requirement" || annotation.kind === "scenario" || annotation.kind === "scenario-step" || annotation.kind === "keyword";
+}
+//#endregion
+//#region src/components/spec-markdown-document.tsx
+var OPENSPEC_PREFIXES = {
+	requirement: /^(?:Requirement|Capability):\s*/i,
+	scenario: /^(?:Scenario|Example):\s*/i
+};
+var OPENSPEC_INLINE_KEYWORD_CLASS = "openspec-inline-keyword";
+var OPENSPEC_SCENARIO_STEP_CLASS = "spec-scenario-step";
+var OPENSPEC_BLOCK_FACT_KINDS = new Set([
+	"paragraph",
+	"list",
+	"listItem",
+	"blockquote",
+	"table"
+]);
+function stripPrefix(text, prefix) {
+	return text.replace(prefix, "").trim();
+}
+function describeOpenSpecHeading(sourceLevel, text) {
+	if (sourceLevel === 1) return {
+		kind: "spec",
+		id: slugify(text) || "spec",
+		title: text,
+		tocLabel: text
+	};
+	if (sourceLevel === 2) return {
+		kind: "section",
+		id: slugify(text) || "section",
+		title: text,
+		tocLabel: text
+	};
+	if (sourceLevel === 3 && OPENSPEC_PREFIXES.requirement.test(text)) {
+		const title = stripPrefix(text, OPENSPEC_PREFIXES.requirement);
+		return {
+			kind: "requirement",
+			id: `requirement-${slugify(title) || "item"}`,
+			title,
+			tocLabel: title
+		};
+	}
+	if (sourceLevel === 4 && OPENSPEC_PREFIXES.scenario.test(text)) {
+		const title = stripPrefix(text, OPENSPEC_PREFIXES.scenario);
+		return {
+			kind: "scenario",
+			id: `scenario-${slugify(title) || "item"}`,
+			title,
+			tocLabel: title
+		};
+	}
+}
+function describeAnnotatedOpenSpecHeading(document, headingFact, sourceLevel, text) {
+	if (!headingFact) return describeOpenSpecHeading(sourceLevel, text);
+	const readingProjection = document.projections[OPEN_SPEC_READING_SECTIONS_PROJECTION_ID];
+	if (sourceLevel === 2) {
+		const section = readingProjection?.sections.find((section) => section.factId === headingFact.id);
+		return {
+			kind: "section",
+			id: slugify(text) || "section",
+			title: text,
+			tocLabel: text,
+			...section ? { sectionKind: section.kind } : {}
+		};
+	}
+	const requirement = getOpenSpecProjectionAnnotation(document.annotations, headingFact.id, "requirement");
+	if (requirement) {
+		const title = requirement.metadata?.title?.trim() || text;
+		const requirementIndex = readingProjection?.requirements.findIndex((block) => block.factId === headingFact.id) ?? -1;
+		return {
+			kind: "requirement",
+			id: `requirement-${slugify(title) || "item"}`,
+			title,
+			tocLabel: title,
+			label: requirementIndex >= 0 ? formatRequirementLabel(requirementIndex + 1) : "Requirement"
+		};
+	}
+	const scenario = getOpenSpecProjectionAnnotation(document.annotations, headingFact.id, "scenario");
+	if (scenario) {
+		const title = scenario.metadata?.title?.trim() || text;
+		return {
+			kind: "scenario",
+			id: `scenario-${slugify(title) || "item"}`,
+			title,
+			tocLabel: title,
+			label: "Scenario"
+		};
+	}
+	return describeOpenSpecHeading(sourceLevel, text);
+}
+function createAnnotatedHeadingTransform(document, requirementCount) {
+	const headingByStartOffset = /* @__PURE__ */ new Map();
+	for (const fact of document.facts) {
+		if (fact.kind !== "heading" || typeof fact.depth !== "number") continue;
+		const span = getMarkdownFactSpan(fact);
+		if (span) headingByStartOffset.set(span.start, fact);
+	}
+	return ({ sourceLevel, text, sourceStartOffset }) => {
+		const heading = describeAnnotatedOpenSpecHeading(document, sourceStartOffset === void 0 ? void 0 : headingByStartOffset.get(sourceStartOffset), sourceLevel, text);
+		if (!heading) return void 0;
+		return {
+			id: heading.id,
+			tocLabel: heading.tocLabel,
+			className: createHeadingClassName(heading, requirementCount),
+			suffix: createHeadingSuffix(heading, requirementCount),
+			dataAttributes: {
+				"data-openspec-kind": heading.kind,
+				"data-openspec-title": heading.title,
+				...heading.label ? { "data-openspec-label": heading.label } : {},
+				...heading.sectionKind ? { "data-openspec-section-kind": heading.sectionKind } : {}
+			}
+		};
+	};
+}
+function createHeadingClassName(heading, requirementCount) {
+	if (heading.kind !== "section" || heading.title !== "Requirements") return void 0;
+	if (requirementCount === void 0) return void 0;
+	return "openspec-heading-with-chip";
+}
+function createHeadingSuffix(heading, requirementCount) {
+	if (heading.kind !== "section" || heading.title !== "Requirements") return void 0;
+	if (requirementCount === void 0) return void 0;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CountBadge, {
+		count: requirementCount,
+		tone: "subtle",
+		size: "sm",
+		shape: "box",
+		className: "openspec-heading-chip",
+		"aria-label": String(requirementCount),
+		title: `${requirementCount} requirements`
+	});
+}
+/**
+* Renders the processed spec Markdown as the visual source while attaching
+* OpenSpec structure metadata for styling, anchors, and ToC alignment.
+*/
+function SpecMarkdownDocument({ markdown, spec, requirementCount, className = "" }) {
+	const resolvedRequirementCount = requirementCount ?? spec?.requirements.length;
+	const document = (0, import_react.useMemo)(() => projectOpenSpecMarkdown(markdown, { specId: spec?.id ?? "inline" }), [markdown, spec?.id]);
+	const headingTransform = (0, import_react.useMemo)(() => createAnnotatedHeadingTransform(document, resolvedRequirementCount), [document, resolvedRequirementCount]);
+	const inlineTextAnnotations = (0, import_react.useMemo)(() => createOpenSpecInlineTextAnnotations(document), [document]);
+	const blockAnnotations = (0, import_react.useMemo)(() => createOpenSpecBlockAnnotations(document), [document]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownViewer, {
+		className: `spec-markdown-document spec-reading-document ${className}`,
+		markdown,
+		headingTransform,
+		inlineTextAnnotations,
+		blockAnnotations
+	});
+}
+function createOpenSpecBlockAnnotations(document) {
+	const factById = new Map(document.facts.map((fact) => [fact.id, fact]));
+	const annotationByOffset = /* @__PURE__ */ new Map();
+	const readingProjection = document.projections[OPEN_SPEC_READING_SECTIONS_PROJECTION_ID];
+	if (readingProjection) {
+		for (const section of readingProjection.sections) {
+			if (section.kind !== "overview") continue;
+			addRangeBlockAnnotations(document, annotationByOffset, {
+				start: getFactEnd(factById, section.factId, section.start),
+				end: section.end,
+				dataAttributes: {
+					"data-openspec-zone": "purpose",
+					"data-openspec-section-kind": section.kind,
+					"data-openspec-section-title": section.title
+				}
+			});
+		}
+		const requirementsSection = readingProjection.sections.find((section) => section.kind === "requirements");
+		if (requirementsSection) {
+			const firstRequirementStart = readingProjection.requirements.map((requirement) => requirement.start).sort((left, right) => left - right)[0];
+			addRangeBlockAnnotations(document, annotationByOffset, {
+				start: getFactEnd(factById, requirementsSection.factId, requirementsSection.start),
+				end: firstRequirementStart ?? requirementsSection.end,
+				dataAttributes: {
+					"data-openspec-zone": "requirements-intro",
+					"data-openspec-section-kind": requirementsSection.kind,
+					"data-openspec-section-title": requirementsSection.title
+				}
+			});
+		}
+		for (const [index, requirement] of readingProjection.requirements.entries()) {
+			const requirementLabel = formatRequirementLabel(index + 1);
+			const firstScenarioStart = requirement.scenarios.map((scenario) => scenario.start).sort((left, right) => left - right)[0];
+			const requirementData = {
+				"data-openspec-requirement-id": requirement.id,
+				"data-openspec-requirement-label": requirementLabel,
+				"data-openspec-requirement-title": requirement.title
+			};
+			addRangeBlockAnnotations(document, annotationByOffset, {
+				start: getFactEnd(factById, requirement.factId, requirement.start),
+				end: firstScenarioStart ?? requirement.end,
+				dataAttributes: {
+					"data-openspec-zone": "requirement-body",
+					...requirementData
+				}
+			});
+			for (const scenario of requirement.scenarios) addRangeBlockAnnotations(document, annotationByOffset, {
+				start: getFactEnd(factById, scenario.factId, scenario.start),
+				end: scenario.end,
+				dataAttributes: {
+					"data-openspec-zone": "scenario-body",
+					...requirementData,
+					"data-openspec-scenario-title": scenario.title
+				}
+			});
+		}
+	}
+	for (const annotation of document.annotations) {
+		if (annotation.kind !== "scenario-step") continue;
+		const fact = factById.get(annotation.targetFactId);
+		const span = fact ? getMarkdownFactSpan(fact) : void 0;
+		if (!fact || !span) continue;
+		const keyword = annotation.metadata?.keyword;
+		upsertBlockAnnotation(annotationByOffset, {
+			sourceStartOffset: span.start,
+			sourceKind: fact.mdastType,
+			className: OPENSPEC_SCENARIO_STEP_CLASS,
+			dataAttributes: {
+				"data-openspec-kind": "scenario-step",
+				...keyword ? { "data-openspec-step-keyword": keyword } : {}
+			}
+		});
+	}
+	return Array.from(annotationByOffset.values());
+}
+function addRangeBlockAnnotations(document, annotationByOffset, range) {
+	for (const fact of document.facts) {
+		if (!OPENSPEC_BLOCK_FACT_KINDS.has(fact.kind)) continue;
+		const span = getMarkdownFactSpan(fact);
+		if (!span || span.start < range.start || span.start >= range.end) continue;
+		upsertBlockAnnotation(annotationByOffset, {
+			sourceStartOffset: span.start,
+			sourceKind: fact.mdastType,
+			dataAttributes: {
+				"data-openspec-block-kind": fact.kind,
+				...range.dataAttributes
+			}
+		});
+	}
+}
+function upsertBlockAnnotation(annotationByOffset, annotation) {
+	const key = createBlockAnnotationKey(annotation);
+	const previous = annotationByOffset.get(key);
+	if (!previous) {
+		annotationByOffset.set(key, annotation);
+		return;
+	}
+	annotationByOffset.set(key, {
+		sourceStartOffset: annotation.sourceStartOffset,
+		sourceKind: annotation.sourceKind,
+		className: [previous.className, annotation.className].filter(Boolean).join(" ") || void 0,
+		dataAttributes: {
+			...previous.dataAttributes,
+			...annotation.dataAttributes
+		}
+	});
+}
+function createBlockAnnotationKey(annotation) {
+	return `${annotation.sourceStartOffset}:${annotation.sourceKind ?? "*"}`;
+}
+function getFactEnd(factById, factId, fallback) {
+	const fact = factById.get(factId);
+	return fact ? getMarkdownFactSpan(fact)?.end ?? fallback : fallback;
+}
+function formatRequirementLabel(index) {
+	return `REQ-${String(index).padStart(2, "0")}`;
+}
+function createOpenSpecInlineTextAnnotations(document) {
+	const terms = /* @__PURE__ */ new Map();
+	for (const annotation of document.annotations) {
+		if (annotation.kind !== "keyword") continue;
+		const { keyword, keywordText, keywordRole } = annotation.metadata ?? {};
+		const text = keywordText ?? keyword;
+		if (!keyword || !text) continue;
+		terms.set(text, {
+			text,
+			className: OPENSPEC_INLINE_KEYWORD_CLASS,
+			dataAttributes: createOpenSpecKeywordDataAttributes(keyword, keywordRole)
+		});
+	}
+	return Array.from(terms.values());
+}
+function createOpenSpecKeywordDataAttributes(keyword, keywordRole) {
+	return {
+		"data-openspec-keyword": keyword,
+		...keywordRole ? { "data-openspec-keyword-role": keywordRole } : {}
+	};
+}
+//#endregion
 //#region src/routes/spec-view.tsx
 function SpecView() {
 	const { specId } = useParams({ from: "/specs/$specId" });
@@ -153918,8 +155342,9 @@ function SpecView() {
 		entityId: specId
 	}), [specId]);
 	const { data: spec, isLoading } = useSpecSubscription(specId);
+	const { data: rawMarkdown, isLoading: isRawLoading } = useSpecRawSubscription(specId);
 	const validation = null;
-	if (isLoading && !spec) {
+	if (isLoading && !spec || isRawLoading && !rawMarkdown) {
 		if (handoff) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "flex min-h-0 flex-1 flex-col gap-6 p-4",
 			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -153961,10 +155386,11 @@ function SpecView() {
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpecContent, {
 		spec,
+		rawMarkdown: rawMarkdown ?? "",
 		validation
 	});
 }
-function SpecContent({ spec, validation }) {
+function SpecContent({ spec, rawMarkdown, validation }) {
 	const headerRef = (0, import_react.useRef)(null);
 	const sharedDescriptor = (0, import_react.useMemo)(() => ({
 		family: "specs",
@@ -154002,56 +155428,11 @@ function SpecContent({ spec, validation }) {
 				})]
 			}),
 			validation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ValidationStatus, { validation }),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownViewer, {
-				className: "vt-detail-content min-h-0 flex-1",
-				markdown: ({ H1, H2, Section }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: "space-y-6",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
-						id: "overview",
-						children: "Overview"
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-						className: "bg-muted/30 mt-2 rounded-lg p-4",
-						children: spec.overview ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownViewer, { markdown: spec.overview }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-							className: "text-muted-foreground",
-							children: "No overview"
-						})
-					})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(H1, {
-						id: "requirements",
-						children: [
-							"Requirements (",
-							spec.requirements.length,
-							")"
-						]
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "mt-3 space-y-4",
-						children: [spec.requirements.map((req) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, {
-							className: "border-border rounded-lg border p-4",
-							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, {
-								className: "text-base",
-								id: `req-${req.id}`,
-								children: req.text
-							}), req.scenarios.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-								className: "mt-3",
-								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-									className: "text-muted-foreground mb-2 text-sm font-medium",
-									children: [
-										"Scenarios (",
-										req.scenarios.length,
-										")"
-									]
-								}), req.scenarios.map((scenario, i) => {
-									return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-										className: "bg-muted/50 rounded-md p-3",
-										children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownViewer, { markdown: scenario.rawText.replace(/^---\n?/, "").replace(/\n?---$/, "").trim() })
-									}, i);
-								})]
-							})]
-						}, req.id)), spec.requirements.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-							className: "text-muted-foreground",
-							children: "No requirements defined"
-						})]
-					})] })]
-				})
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpecMarkdownDocument, {
+				markdown: rawMarkdown,
+				spec,
+				requirementCount: spec.requirements.length,
+				className: "vt-detail-content min-h-0 flex-1"
 			})
 		]
 	});