@tangle-network/ui 11.33.0 → 11.35.0

package/dist/primitives/segmented-control.js

@@ -5,14 +5,39 @@ import { cn } from "../lib/utils.js";
 import "../lib/control-presentation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 //#region src/primitives/segmented-control.tsx
-/** Width of the faded edge that marks more tabs past the strip, in px. */
-const TAB_EDGE_FADE = 24;
-const tabEdgeFade = [
-	"data-[overflow-start]:[mask-image:linear-gradient(to_right,transparent,#000_24px)]",
-	"data-[overflow-end]:[mask-image:linear-gradient(to_right,#000_calc(100%-24px),transparent)]",
-	"data-[overflow-start]:data-[overflow-end]:[mask-image:linear-gradient(to_right,transparent,#000_24px,#000_calc(100%-24px),transparent)]"
-];
+/** Size of the edge chevron, in px. The selected option is kept this far
+*  (plus the strip's own padding) from an edge so the chevron never covers it. */
+const SCROLL_CUE_SIZE = 32;
+/**
+* A chevron pinned to one edge of the scrolling strip. It is a sticky flex
+* item with a negative margin equal to its width plus the gap, so it takes no room in the
+* row (showing it never reflows the options) and stays at the visible edge
+* while the strip scrolls. A solid surface keeps it legible on any plane,
+* which an edge fade is not: a fade over the gap between two options, or over
+* a host's inline padding, shows nothing.
+*/
+function ScrollCue({ side, onPage }) {
+	const Icon = side === "start" ? ChevronLeft : ChevronRight;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		tabIndex: -1,
+		"aria-hidden": "true",
+		"data-scroll-cue": side,
+		onClick: onPage,
+		className: cn("sticky z-[1] flex shrink-0 items-center justify-center self-center rounded-full border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:text-foreground", side === "start" ? "left-0" : "right-0"),
+		style: {
+			width: SCROLL_CUE_SIZE,
+			height: SCROLL_CUE_SIZE,
+			[side === "start" ? "marginRight" : "marginLeft"]: -36
+		},
+		children: /* @__PURE__ */ jsx(Icon, {
+			className: "h-4 w-4",
+			"aria-hidden": "true"
+		})
+	});
+}
 function SegmentedControl({ value, onValueChange, options, variant = "row", className, ...rest }) {
 	if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production" && !rest["aria-label"] && !rest["aria-labelledby"]) console.warn("[SegmentedControl] role=\"radiogroup\" requires either aria-label or aria-labelledby for accessibility.");
 	const optionRefs = React.useRef(/* @__PURE__ */ new Map());
@@ -21,7 +46,7 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 		start: false,
 		end: false
 	});
-	const tabs = variant === "tabs";
+	const optionKey = options.map((o) => o.value).join("\0");
 	const measureOverflow = React.useCallback(() => {
 		const strip = stripRef.current;
 		if (!strip) return;
@@ -32,31 +57,45 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 			end
 		});
 	}, []);
-	React.useLayoutEffect(() => {
-		if (!tabs) return;
+	const valueRef = React.useRef(value);
+	valueRef.current = value;
+	const revealSelected = React.useCallback(() => {
 		const strip = stripRef.current;
-		const option = optionRefs.current.get(value);
-		if (strip && option) {
+		const option = optionRefs.current.get(valueRef.current);
+		if (strip && option && strip.scrollWidth > strip.clientWidth) {
+			const style = getComputedStyle(strip);
+			const reserveStart = 36 + (Number.parseFloat(style.paddingLeft) || 0);
+			const reserveEnd = 36 + (Number.parseFloat(style.paddingRight) || 0);
 			const start = option.offsetLeft;
 			const end = start + option.offsetWidth;
-			if (start < strip.scrollLeft + TAB_EDGE_FADE) strip.scrollLeft = Math.max(0, start - TAB_EDGE_FADE);
-			else if (end > strip.scrollLeft + strip.clientWidth - TAB_EDGE_FADE) strip.scrollLeft = end - strip.clientWidth + TAB_EDGE_FADE;
+			if (start - reserveStart < strip.scrollLeft) strip.scrollLeft = Math.max(0, start - reserveStart);
+			else if (end + reserveEnd > strip.scrollLeft + strip.clientWidth) strip.scrollLeft = end + reserveEnd - strip.clientWidth;
 		}
 		measureOverflow();
-	}, [
-		tabs,
+	}, [measureOverflow]);
+	React.useLayoutEffect(revealSelected, [
 		value,
 		options.length,
-		measureOverflow
+		revealSelected
 	]);
 	React.useEffect(() => {
-		if (!tabs || typeof ResizeObserver === "undefined") return;
+		if (typeof ResizeObserver === "undefined") return;
 		const strip = stripRef.current;
 		if (!strip) return;
-		const observer = new ResizeObserver(measureOverflow);
+		const observer = new ResizeObserver(revealSelected);
 		observer.observe(strip);
+		for (const option of optionRefs.current.values()) observer.observe(option);
 		return () => observer.disconnect();
-	}, [tabs, measureOverflow]);
+	}, [optionKey, revealSelected]);
+	const page = (direction) => {
+		const strip = stripRef.current;
+		if (!strip) return;
+		const reduce = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		strip.scrollBy({
+			left: direction * strip.clientWidth * .75,
+			behavior: reduce ? "auto" : "smooth"
+		});
+	};
 	const hasMatch = options.some((o) => o.value === value);
 	const handleKeyDown = (e) => {
 		if (options.length === 0) return;
@@ -73,7 +112,7 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 			optionRefs.current.get(options[next].value)?.focus();
 		}
 	};
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		role: "radiogroup",
 		id: rest.id,
 		"aria-label": rest["aria-label"],
@@ -83,41 +122,51 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 		"data-overflow-end": overflow.end || void 0,
 		ref: stripRef,
 		onKeyDown: handleKeyDown,
-		onScroll: tabs ? measureOverflow : void 0,
-		className: cn("flex gap-1", variant === "row" && "flex-wrap items-center rounded-lg border border-[var(--field-border)] bg-[var(--well)] p-1", variant === "tabs" && ["relative flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", tabEdgeFade], className),
-		children: options.map((option, i) => {
-			const active = option.value === value;
-			const focusable = active || !hasMatch && i === 0;
-			return /* @__PURE__ */ jsxs("button", {
-				ref: (el) => {
-					if (el) optionRefs.current.set(option.value, el);
-					else optionRefs.current.delete(option.value);
-				},
-				type: "button",
-				role: "radio",
-				"aria-checked": active,
-				"data-testid": option.testId,
-				tabIndex: focusable ? 0 : -1,
-				onClick: () => {
-					if (!active) onValueChange(option.value);
-				},
-				className: cn("relative inline-flex items-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,background-color,border-color,box-shadow]", variant === "row" && [
-					"rounded-md border border-transparent px-3 py-1.5",
-					focusRing,
-					"hover:bg-[var(--ix-hover-bg)] active:bg-[var(--ix-sel-bg)]",
-					"aria-pressed:bg-[var(--ix-sel-bg)] aria-pressed:text-[var(--accent-text)] aria-pressed:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-checked:bg-[var(--ix-sel-bg)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-[current=page]:bg-[var(--ix-sel-bg)] aria-[current=page]:text-[var(--accent-text)] aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=on]:bg-[var(--ix-sel-bg)] data-[state=on]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=active]:bg-[var(--ix-sel-bg)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]"
-				], variant === "tabs" && [
-					"shrink-0 rounded-none border-b-2 border-transparent -mb-px px-4 py-2",
-					"pointer-coarse:min-h-11",
-					focusRingInset,
-					"hover:shadow-[inset_0_-2px_0_hsl(var(--hsl-ring)/0.4)] data-[state=active]:bg-[hsl(var(--hsl-ring)/0.07)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_-2px_0_var(--ix-sel-ring)] aria-checked:bg-[hsl(var(--hsl-ring)/0.07)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_-2px_0_var(--ix-sel-ring)]"
-				], active ? "text-[var(--accent-text)]" : "text-muted-foreground hover:text-foreground"),
-				children: [/* @__PURE__ */ jsx("span", { children: option.label }), option.adornment && /* @__PURE__ */ jsx("span", {
-					className: cn("text-xs", active ? "text-[var(--accent-text)]/80" : "text-muted-foreground"),
-					children: option.adornment
-				})]
-			}, option.value);
-		})
+		onScroll: measureOverflow,
+		className: cn("relative flex gap-1", variant === "row" && "flex-wrap items-center rounded-lg border border-[var(--field-border)] bg-[var(--well)] p-1", variant === "tabs" && "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", className),
+		children: [
+			overflow.start && /* @__PURE__ */ jsx(ScrollCue, {
+				side: "start",
+				onPage: () => page(-1)
+			}),
+			options.map((option, i) => {
+				const active = option.value === value;
+				const focusable = active || !hasMatch && i === 0;
+				return /* @__PURE__ */ jsxs("button", {
+					ref: (el) => {
+						if (el) optionRefs.current.set(option.value, el);
+						else optionRefs.current.delete(option.value);
+					},
+					type: "button",
+					role: "radio",
+					"aria-checked": active,
+					"data-testid": option.testId,
+					tabIndex: focusable ? 0 : -1,
+					onClick: () => {
+						if (!active) onValueChange(option.value);
+					},
+					className: cn("relative inline-flex items-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,background-color,border-color,box-shadow]", variant === "row" && [
+						"rounded-md border border-transparent px-3 py-1.5",
+						focusRing,
+						"hover:bg-[var(--ix-hover-bg)] active:bg-[var(--ix-sel-bg)]",
+						"aria-pressed:bg-[var(--ix-sel-bg)] aria-pressed:text-[var(--accent-text)] aria-pressed:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-checked:bg-[var(--ix-sel-bg)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-[current=page]:bg-[var(--ix-sel-bg)] aria-[current=page]:text-[var(--accent-text)] aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=on]:bg-[var(--ix-sel-bg)] data-[state=on]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=active]:bg-[var(--ix-sel-bg)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]"
+					], variant === "tabs" && [
+						"shrink-0 rounded-none border-b-2 border-transparent -mb-px px-4 py-2",
+						"pointer-coarse:min-h-11",
+						focusRingInset,
+						"hover:shadow-[inset_0_-2px_0_hsl(var(--hsl-ring)/0.4)] data-[state=active]:bg-[hsl(var(--hsl-ring)/0.07)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_-2px_0_var(--ix-sel-ring)] aria-checked:bg-[hsl(var(--hsl-ring)/0.07)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_-2px_0_var(--ix-sel-ring)]"
+					], active ? "text-[var(--accent-text)]" : "text-muted-foreground hover:text-foreground"),
+					children: [/* @__PURE__ */ jsx("span", { children: option.label }), option.adornment && /* @__PURE__ */ jsx("span", {
+						className: cn("text-xs", active ? "text-[var(--accent-text)]/80" : "text-muted-foreground"),
+						children: option.adornment
+					})]
+				}, option.value);
+			}),
+			overflow.end && /* @__PURE__ */ jsx(ScrollCue, {
+				side: "end",
+				onPage: () => page(1)
+			})
+		]
 	});
 }
 //#endregion

package/dist/run/inline-thinking-item.d.ts

@@ -4,8 +4,14 @@ export interface InlineThinkingItemProps {
   part: ReasoningPart;
   defaultOpen?: boolean;
   autoCollapse?: boolean;
+  /**
+   * Open the row while the model is still thinking. A product that keeps
+   * deliberation out of the reader's way passes false: the row stays as
+   * `defaultOpen` left it, with its one-line preview, until the reader opens it.
+   */
+  openWhileActive?: boolean;
   className?: string;
   contentClassName?: string;
 }
-export declare const InlineThinkingItem: import("react").MemoExoticComponent<({ part, defaultOpen, autoCollapse, className, contentClassName }: InlineThinkingItemProps) => import("react").JSX.Element>;
+export declare const InlineThinkingItem: import("react").MemoExoticComponent<({ part, defaultOpen, autoCollapse, openWhileActive, className, contentClassName }: InlineThinkingItemProps) => import("react").JSX.Element>;
 //#endregion

package/dist/run/inline-thinking-item.js

@@ -1,5 +1,5 @@
 import { TextShimmer } from "../primitives/text-shimmer.js";
-import { truncateText } from "../utils/format.js";
+import { plainTextFromMarkdown, truncateText } from "../utils/format.js";
 import { ExpandableContent } from "./expandable-content.js";
 import { RunRowShell } from "./run-row-shell.js";
 import { Markdown } from "../markdown/markdown.js";
@@ -7,18 +7,18 @@ import { memo, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Brain } from "lucide-react";
 //#region src/run/inline-thinking-item.tsx
-const InlineThinkingItem = memo(({ part, defaultOpen = false, autoCollapse = true, className, contentClassName }) => {
+const InlineThinkingItem = memo(({ part, defaultOpen = false, autoCollapse = true, openWhileActive = true, className, contentClassName }) => {
 	const [open, setOpen] = useState(defaultOpen);
 	const autoCollapsedRef = useRef(false);
 	const startTime = part.time?.start;
 	const endTime = part.time?.end;
 	const durationMs = startTime != null && endTime != null ? endTime - startTime : void 0;
 	const isActive = startTime != null && endTime == null;
-	const preview = part.text ? truncateText(part.text, 120) : void 0;
+	const preview = part.text ? truncateText(plainTextFromMarkdown(part.text), 120) : void 0;
 	useEffect(() => {
 		if (isActive) {
 			autoCollapsedRef.current = false;
-			setOpen(true);
+			if (openWhileActive) setOpen(true);
 			return;
 		}
 		if (autoCollapse && !autoCollapsedRef.current && durationMs != null) {
@@ -31,7 +31,8 @@ const InlineThinkingItem = memo(({ part, defaultOpen = false, autoCollapse = tru
 	}, [
 		autoCollapse,
 		durationMs,
-		isActive
+		isActive,
+		openWhileActive
 	]);
 	return /* @__PURE__ */ jsx(RunRowShell, {
 		icon: /* @__PURE__ */ jsx(Brain, { className: "h-3.5 w-3.5" }),

package/dist/utils/format.d.ts

@@ -1,6 +1,12 @@
 //#region src/utils/format.d.ts
 /** Format a duration in milliseconds to a human-readable string. */
 export declare function formatDuration(ms: number): string;
+/**
+ * Markdown read as plain text, for a one-line preview: code fences, emphasis,
+ * headings, list and quote markers, and link syntax are removed, so a preview
+ * never shows `**` or `#`. Underscores inside words (`snake_case`) are kept.
+ */
+export declare function plainTextFromMarkdown(text: string): string;
 /** Truncate text to `max` characters, appending "..." if truncated. */
 export declare function truncateText(text: string, max: number): string;
 /**

package/dist/utils/format.js

@@ -8,6 +8,14 @@ function formatDuration(ms) {
 	const remaining = seconds % 60;
 	return remaining > 0 ? `${minutes}m ${remaining}s` : `${minutes}m`;
 }
+/**
+* Markdown read as plain text, for a one-line preview: code fences, emphasis,
+* headings, list and quote markers, and link syntax are removed, so a preview
+* never shows `**` or `#`. Underscores inside words (`snake_case`) are kept.
+*/
+function plainTextFromMarkdown(text) {
+	return text.replace(/```[^\n]*\n?([\s\S]*?)```/g, "$1").replace(/`([^`]*)`/g, "$1").replace(/!?\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/^[ \t]{0,3}(?:#{1,6}[ \t]+|>[ \t]?|[-*+][ \t]+|\d+[.)][ \t]+)/gm, "").replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g, "$2").replace(/(^|[^\w*])\*(?=\S)([^*\n]*?\S)\*(?![\w*])/g, "$1$2").replace(/(^|[^\w])_(?=\S)([^_\n]*?\S)_(?!\w)/g, "$1$2").replace(/~~(?=\S)([\s\S]*?\S)~~/g, "$1");
+}
 /** Truncate text to `max` characters, appending "..." if truncated. */
 function truncateText(text, max) {
 	const cleaned = text.replace(/\s+/g, " ").trim();
@@ -51,4 +59,4 @@ function formatBytes(bytes) {
 	return `${gb < 10 ? gb.toFixed(2) : gb.toFixed(1)} GB`;
 }
 //#endregion
-export { formatBytes, formatDuration, formatUptime, truncateText };
+export { formatBytes, formatDuration, formatUptime, plainTextFromMarkdown, truncateText };

package/dist/utils.d.ts

@@ -1,8 +1,8 @@
 import { copyText } from "./utils/copy-text.js";
-import { formatBytes, formatDuration, formatUptime, truncateText } from "./utils/format.js";
+import { formatBytes, formatDuration, formatUptime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
 import { timeAgo } from "./utils/time-ago.js";
 import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
 import { cn } from "./lib/utils.js";
 import { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset } from "./lib/focus.js";
 import { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline } from "./lib/interaction.js";
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, timeAgo, truncateText };
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };

package/dist/utils.js

@@ -2,7 +2,7 @@ import { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, i
 import { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset } from "./lib/focus.js";
 import { cn } from "./lib/utils.js";
 import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
-import { formatBytes, formatDuration, formatUptime, truncateText } from "./utils/format.js";
+import { formatBytes, formatDuration, formatUptime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
 import { copyText } from "./utils/copy-text.js";
 import { timeAgo } from "./utils/time-ago.js";
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, timeAgo, truncateText };
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.33.0",
+  "version": "11.35.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -150,7 +150,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.23.0",
+    "@tangle-network/brand": "^1.24.2",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/editor/document-editor-pane.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type ReactNode, useEffect, useMemo, useState } from "react";
+import { type KeyboardEvent, type ReactNode, useEffect, useMemo, useState } from "react";
 import type { UrlTransform } from "react-markdown";
 import { PencilLine, Save, Users, Wifi, WifiOff } from "lucide-react";
 import { Markdown } from "../markdown/markdown";
@@ -39,6 +39,12 @@ export interface DocumentEditorPaneProps
   markdown?: string;
   /** Persisted baseline when the host controls the current markdown draft. */
   savedMarkdown?: string;
+  /**
+   * Whether the draft has unsaved edits, when the host tracks that itself
+   * (for example against the file's full bytes, frontmatter included). It
+   * takes precedence over comparing the draft with `savedMarkdown`.
+   */
+  dirty?: boolean;
   /** Transform Markdown links and images through the shared URL policy. */
   urlTransform?: UrlTransform;
   mode?: DocumentEditorMode;
@@ -194,6 +200,7 @@ export function DocumentEditorPane({
   toolbar,
   markdown = "",
   savedMarkdown,
+  dirty,
   urlTransform,
   mode,
   defaultMode = "preview",
@@ -215,16 +222,32 @@ export function DocumentEditorPane({
     useState<DocumentEditorMode>(defaultMode);
   const activeMode = mode ?? uncontrolledMode;
   const isCollaborative = backend === "collaborative" && Boolean(collaboration);
-  const isDirty = normalizeMarkdown(draft) !== normalizeMarkdown(savedMarkdown ?? markdown);
+  const isDirty = dirty ?? normalizeMarkdown(draft) !== normalizeMarkdown(savedMarkdown ?? markdown);
+  const canSave = Boolean(onSave) && !readOnly && isDirty && !saving;
   const saveStateLabel = readOnly
     ? "Read only"
     : isCollaborative
       ? isDirty
         ? "Snapshot pending"
         : "Live document current"
-      : isDirty
-        ? "Unsaved changes"
-        : "Saved";
+      : saving
+        ? "Saving…"
+        : isDirty
+          ? "Unsaved changes"
+          : "Saved";
+
+  const save = () => {
+    if (canSave) void onSave?.(draft);
+  };
+
+  // Ctrl+S / Cmd+S saves from anywhere in the pane, the editor included.
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!onSave || readOnly) return;
+    if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+    if (event.key.toLowerCase() !== "s") return;
+    event.preventDefault();
+    save();
+  };
 
   useEffect(() => {
     setDraft(markdown);
@@ -271,26 +294,40 @@ export function DocumentEditorPane({
         </TabsTrigger>
       </TabsList>
 
-      <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+      {/* One save state: the status says whether the draft is saved, and the
+          Save button exists only while there is something to save. */}
+      <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
         {toolbar}
-        <span className="rounded-full border border-border bg-card px-2.5 py-1 font-medium">
-          {isCollaborative ? "Live document" : "Local draft"}
-        </span>
-        <span className="rounded-full border border-border bg-background px-2.5 py-1">
+        {isCollaborative && (
+          <span className="rounded-full border border-border bg-card px-2.5 py-1 font-medium">
+            Live document
+          </span>
+        )}
+        <span
+          role="status"
+          aria-live="polite"
+          className={cn(
+            "rounded-full border px-2.5 py-1",
+            isDirty && !readOnly
+              ? "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]"
+              : "border-border bg-background",
+          )}
+        >
           {saveStateLabel}
         </span>
-        {onSave && !readOnly && (
+        {onSave && !readOnly && (isDirty || saving) && (
           <button
             type="button"
-            onClick={() => void onSave(draft)}
-            disabled={saving || !isDirty}
+            onClick={save}
+            disabled={!canSave}
+            title="Save changes (Ctrl+S)"
             className={cn(
-              "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-border bg-card px-3 py-1.5 text-xs font-semibold text-foreground transition-colors hover:border-[var(--border-strong)] hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+              "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-primary bg-primary px-3 py-1.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50",
               focusRing,
             )}
           >
-            <Save className="h-3.5 w-3.5" />
-            {saving ? "Saving..." : saveLabel}
+            <Save className="h-4 w-4" />
+            {saveLabel}
           </button>
         )}
       </div>
@@ -341,6 +378,7 @@ export function DocumentEditorPane({
     <Tabs
       value={activeMode}
       onValueChange={(nextValue) => setMode(nextValue as DocumentEditorMode)}
+      onKeyDown={handleKeyDown}
       className="h-full"
     >
       <ArtifactPane

package/src/editor/markdown-document-editor.tsx

@@ -7,11 +7,8 @@ import { retryableLazyEditor } from "./editor-lazy";
 import { EditorLoadingPlaceholder } from "./editor-loading";
 import { type DocumentEditorPeers, loadDocumentEditorPeers } from "./editor-peers";
 import { EditorToolbar } from "./editor-toolbar";
-import {
-  htmlToMarkdown,
-  markdownToHtml,
-  normalizeMarkdown,
-} from "./markdown-conversion";
+import { normalizeMarkdown } from "./markdown-conversion";
+import { createSourceMarkdownExtensions, SourceMarkdownSession } from "./source-markdown-editor";
 
 export interface MarkdownDocumentEditorProps {
   value?: string;
@@ -28,12 +25,18 @@ export interface MarkdownDocumentEditorProps {
  * Builds the local markdown editor against loaded tiptap namespaces. The
  * peers arrive as an argument so that this module reaches them through
  * type-only imports, which a bundler erases.
+ *
+ * The editor writes back the file's own bytes wherever the reader changed
+ * nothing (see `source-markdown.ts`): opening a file and leaving it reports no
+ * change, and an edit changes only the edited span. Blocks it cannot represent,
+ * such as tables, are shown read-only and kept verbatim.
  */
 export function createMarkdownDocumentEditor(
   peers: DocumentEditorPeers,
 ): ComponentType<MarkdownDocumentEditorProps> {
   const { EditorContent, useEditor } = peers.react;
   const StarterKit = peers.starterKit.default;
+  const sourceExtensions = createSourceMarkdownExtensions(peers.react);
 
   return function MarkdownDocumentEditor({
     value = "",
@@ -45,8 +48,13 @@ export function createMarkdownDocumentEditor(
     onChange,
     onReady,
   }: MarkdownDocumentEditorProps) {
-    const initialHtml = useMemo(() => markdownToHtml(value), []);
-    const lastAppliedMarkdownRef = useRef(normalizeMarkdown(value));
+    const sessionRef = useRef<SourceMarkdownSession | null>(null);
+    if (!sessionRef.current) sessionRef.current = new SourceMarkdownSession(peers.react, value);
+    const initialHtml = useMemo(() => sessionRef.current!.html, []);
+    // The Markdown last written by this editor or applied from `value`.
+    const lastMarkdownRef = useRef(value);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
 
     const editor = useEditor({
       extensions: [
@@ -56,7 +64,10 @@ export function createMarkdownDocumentEditor(
               class: "hljs",
             },
           },
+          // Markdown has no underline, so an underline could not be saved.
+          underline: false,
         }),
+        ...sourceExtensions,
       ],
       content: initialHtml,
       editable: !readOnly,
@@ -73,33 +84,37 @@ export function createMarkdownDocumentEditor(
         },
       },
       onUpdate: ({ editor: currentEditor }) => {
-        const nextMarkdown = normalizeMarkdown(htmlToMarkdown(currentEditor.getHTML()));
-        lastAppliedMarkdownRef.current = nextMarkdown;
-        onChange?.(nextMarkdown, currentEditor);
+        const nextMarkdown = sessionRef.current!.serialize(currentEditor.state.doc);
+        // A transaction that changes no Markdown (a selection, a trailing empty
+        // paragraph) is not an edit.
+        if (nextMarkdown === lastMarkdownRef.current) return;
+        lastMarkdownRef.current = nextMarkdown;
+        onChangeRef.current?.(nextMarkdown, currentEditor);
       },
       onCreate: ({ editor: currentEditor }) => {
+        sessionRef.current!.attach(currentEditor);
         onReady?.(currentEditor);
       },
     });
 
     useEffect(() => {
-      if (editor) {
-        editor.setEditable(!readOnly);
-      }
+      // No update event: toggling read-only is not an edit.
+      editor?.setEditable(!readOnly, false);
     }, [editor, readOnly]);
 
     useEffect(() => {
       if (!editor) {
         return;
       }
-
-      const normalizedValue = normalizeMarkdown(value);
-      if (normalizedValue === lastAppliedMarkdownRef.current) {
+      if (normalizeMarkdown(value) === normalizeMarkdown(lastMarkdownRef.current)) {
         return;
       }
 
-      editor.commands.setContent(markdownToHtml(value), { emitUpdate: false });
-      lastAppliedMarkdownRef.current = normalizedValue;
+      const session = new SourceMarkdownSession(peers.react, value);
+      sessionRef.current = session;
+      editor.commands.setContent(session.html, { emitUpdate: false });
+      session.attach(editor);
+      lastMarkdownRef.current = value;
     }, [editor, value]);
 
     return (