@tangle-network/ui 11.32.2 → 11.34.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @tangle-network/ui
 
+## 11.34.0
+
+### Minor Changes
+
+- d81b6ec: The rich Markdown editor writes back the file's own bytes. Opening a file and leaving it reports no change; an edit changes only the edited span, keeping list markers, emphasis delimiters, escapes, setext headings, reference links and blank lines as written. Blocks the editor has no node for (GFM tables, raw HTML, images, task lists, link definitions) are shown read-only and kept verbatim, so opening Edit no longer flattens a table into one paragraph.
+  
+  `DocumentEditorPane` and `FileArtifactPane`'s `editor` option take `dirty`, so a host that tracks unsaved edits itself drives the save state and the Save button. The pane shows one save state at 14px ("Unsaved changes", "Saving…" or "Saved"), shows Save only while there is something to save, and saves on Ctrl+S / Cmd+S.
+
+### Patch Changes
+
+- 0b915b2: Markdown tables contain their copy control's screen-reader status line. The card is now `relative`, so a table deep inside a scrolling panel no longer stretches the page past the viewport and lets a wheel scroll the whole app away.
+- 2d96408: InlineThinkingItem previews reasoning as plain text (no `**` or `#` marks), and takes `openWhileActive` (default true) so a product can keep a live reasoning row closed until the reader opens it. Adds `plainTextFromMarkdown` to the utils.
+
+## 11.33.0
+
+### Minor Changes
+
+- 03c7da0: Surface ladder and one interaction language.
+  
+  Brand: Hospitality gets a stepped ladder (light page 91.6, white cards with a two-layer shadow, raised 95.6; dark page 16.9, card 31.1, raised 37.9 with a top highlight, popover 42.0), field wells that are always the opposite step from their parent, a 3:1 `--field-border`, darker muted text, and status fills retuned for its planes (success, warning, danger, neutral). Dark accent text (#b2dbc2) and the dark destructive red (0 80% 88%) are lifted so they keep 4.5:1 on the lighter raised and popover planes. New tokens `--hsl-raised`, `--hsl-raised-2`, `--well-page`, `--well-card`, `--well-raised`, `--well-raised-2`, `--well`, `--field-border`, `--shadow-raised`, `--shadow-well` and `--edge-highlight` default to the plain spine, so other themes look as before. Shared `--ix-hover`, `--ix-hover-border`, `--ix-press`, `--ix-after`, `--ix-sel-ring`, `--ix-sel-bg` and `--ix-hover-bg` derive from `--hsl-ring`. A `[data-slot="card"]` rule re-declares `--card` and `--well` per card level.
+  
+  UI: new `ixControl`, `ixControlAfter`, `ixControlSoft`, `ixField`, `ixSelected`, `ixTabUnderline` and `ixRow` (exported from `@tangle-network/ui/utils`) give hover, press, after-click and selected states in the focus ring hue; the keyboard focus glow is unchanged. Button, Input, Textarea, `focusFieldWithin`, SelectTrigger/Item/Content, DropdownMenu content and items, Card, SegmentedControl and TabsTrigger apply them. Card renders `data-slot="card"` with `--edge-highlight` + `--shadow-card`, gains `interactive`, and CardDescription clamps at two lines. Select and DropdownMenu content paint the popover level. See docs/surfaces-and-states.md.
+
 ## 11.32.2
 
 ### Patch Changes

package/dist/editor/document-editor-pane.d.ts

@@ -12,6 +12,12 @@ export interface DocumentEditorPaneProps extends Omit<ArtifactPaneProps, "childr
   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;
@@ -33,5 +39,5 @@ export interface DocumentEditorPaneProps extends Omit<ArtifactPaneProps, "childr
  * DocumentEditorPane — reusable markdown document surface with preview/edit
  * modes and optional collaborative editing backed by Yjs/Hocuspocus.
  */
-export declare function DocumentEditorPane({ eyebrow, title, subtitle, meta, headerActions, footer, className, contentClassName, headerClassName, hideTitleBlock, tabs, toolbar, markdown, savedMarkdown, urlTransform, mode, defaultMode, onModeChange, backend, placeholder, autoFocus, readOnly, onChange, onSave, saving, saveLabel, previewClassName, editorClassName, collaboration }: DocumentEditorPaneProps): import("react").JSX.Element;
+export declare function DocumentEditorPane({ eyebrow, title, subtitle, meta, headerActions, footer, className, contentClassName, headerClassName, hideTitleBlock, tabs, toolbar, markdown, savedMarkdown, dirty, urlTransform, mode, defaultMode, onModeChange, backend, placeholder, autoFocus, readOnly, onChange, onSave, saving, saveLabel, previewClassName, editorClassName, collaboration }: DocumentEditorPaneProps): import("react").JSX.Element;
 //#endregion

package/dist/editor/document-editor-pane.js

@@ -79,13 +79,24 @@ function CollaborativeDocumentSurface({ markdown, placeholder, autoFocus, readOn
 * DocumentEditorPane — reusable markdown document surface with preview/edit
 * modes and optional collaborative editing backed by Yjs/Hocuspocus.
 */
-function DocumentEditorPane({ eyebrow, title, subtitle, meta, headerActions, footer, className, contentClassName, headerClassName, hideTitleBlock, tabs, toolbar, markdown = "", savedMarkdown, urlTransform, mode, defaultMode = "preview", onModeChange, backend = "local", placeholder = "Start writing...", autoFocus = false, readOnly = false, onChange, onSave, saving = false, saveLabel = "Save changes", previewClassName, editorClassName, collaboration }) {
+function DocumentEditorPane({ eyebrow, title, subtitle, meta, headerActions, footer, className, contentClassName, headerClassName, hideTitleBlock, tabs, toolbar, markdown = "", savedMarkdown, dirty, urlTransform, mode, defaultMode = "preview", onModeChange, backend = "local", placeholder = "Start writing...", autoFocus = false, readOnly = false, onChange, onSave, saving = false, saveLabel = "Save changes", previewClassName, editorClassName, collaboration }) {
 	const [draft, setDraft] = useState(markdown);
 	const [uncontrolledMode, setUncontrolledMode] = useState(defaultMode);
 	const activeMode = mode ?? uncontrolledMode;
 	const isCollaborative = backend === "collaborative" && Boolean(collaboration);
-	const isDirty = normalizeMarkdown(draft) !== normalizeMarkdown(savedMarkdown ?? markdown);
-	const saveStateLabel = readOnly ? "Read only" : isCollaborative ? isDirty ? "Snapshot pending" : "Live document current" : isDirty ? "Unsaved changes" : "Saved";
+	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" : saving ? "Saving…" : isDirty ? "Unsaved changes" : "Saved";
+	const save = () => {
+		if (canSave) onSave?.(draft);
+	};
+	const handleKeyDown = (event) => {
+		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);
 	}, [markdown]);
@@ -117,23 +128,26 @@ function DocumentEditorPane({ eyebrow, title, subtitle, meta, headerActions, foo
 				children: [/* @__PURE__ */ jsx(PencilLine, { className: "h-3.5 w-3.5" }), isCollaborative ? "Live edit" : "Edit"]
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground",
+			className: "flex flex-wrap items-center gap-2 text-sm text-muted-foreground",
 			children: [
 				toolbar,
-				/* @__PURE__ */ jsx("span", {
+				isCollaborative && /* @__PURE__ */ jsx("span", {
 					className: "rounded-full border border-border bg-card px-2.5 py-1 font-medium",
-					children: isCollaborative ? "Live document" : "Local draft"
+					children: "Live document"
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "rounded-full border border-border bg-background px-2.5 py-1",
+					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"),
 					children: saveStateLabel
 				}),
-				onSave && !readOnly && /* @__PURE__ */ jsxs("button", {
+				onSave && !readOnly && (isDirty || saving) && /* @__PURE__ */ jsxs("button", {
 					type: "button",
-					onClick: () => void onSave(draft),
-					disabled: saving || !isDirty,
-					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", focusRing),
-					children: [/* @__PURE__ */ jsx(Save, { className: "h-3.5 w-3.5" }), saving ? "Saving..." : saveLabel]
+					onClick: save,
+					disabled: !canSave,
+					title: "Save changes (Ctrl+S)",
+					className: cn("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),
+					children: [/* @__PURE__ */ jsx(Save, { className: "h-4 w-4" }), saveLabel]
 				})
 			]
 		})]
@@ -169,6 +183,7 @@ function DocumentEditorPane({ eyebrow, title, subtitle, meta, headerActions, foo
 	return /* @__PURE__ */ jsx(Tabs, {
 		value: activeMode,
 		onValueChange: (nextValue) => setMode(nextValue),
+		onKeyDown: handleKeyDown,
 		className: "h-full",
 		children: /* @__PURE__ */ jsxs(ArtifactPane, {
 			eyebrow,

package/dist/editor/markdown-document-editor.js

@@ -4,7 +4,8 @@ import { loadDocumentEditorPeers } from "./editor-peers.js";
 import { retryableLazyEditor } from "./editor-lazy.js";
 import { EditorLoadingPlaceholder } from "./editor-loading.js";
 import { EditorToolbar } from "./editor-toolbar.js";
-import { htmlToMarkdown, markdownToHtml, normalizeMarkdown } from "./markdown-conversion.js";
+import { normalizeMarkdown } from "./markdown-conversion.js";
+import { SourceMarkdownSession, createSourceMarkdownExtensions } from "./source-markdown-editor.js";
 import { Suspense, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/editor/markdown-document-editor.tsx
@@ -12,15 +13,28 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 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.
 */
 function createMarkdownDocumentEditor(peers) {
 	const { EditorContent, useEditor } = peers.react;
 	const StarterKit = peers.starterKit.default;
+	const sourceExtensions = createSourceMarkdownExtensions(peers.react);
 	return function MarkdownDocumentEditor({ value = "", placeholder = "Start writing...", readOnly = false, autoFocus = false, className, contentClassName, onChange, onReady }) {
-		const initialHtml = useMemo(() => markdownToHtml(value), []);
-		const lastAppliedMarkdownRef = useRef(normalizeMarkdown(value));
+		const sessionRef = useRef(null);
+		if (!sessionRef.current) sessionRef.current = new SourceMarkdownSession(peers.react, value);
+		const initialHtml = useMemo(() => sessionRef.current.html, []);
+		const lastMarkdownRef = useRef(value);
+		const onChangeRef = useRef(onChange);
+		onChangeRef.current = onChange;
 		const editor = useEditor({
-			extensions: [StarterKit.configure({ codeBlock: { HTMLAttributes: { class: "hljs" } } })],
+			extensions: [StarterKit.configure({
+				codeBlock: { HTMLAttributes: { class: "hljs" } },
+				underline: false
+			}), ...sourceExtensions],
 			content: initialHtml,
 			editable: !readOnly,
 			autofocus: autoFocus,
@@ -29,23 +43,27 @@ function createMarkdownDocumentEditor(peers) {
 				"data-placeholder": placeholder
 			} },
 			onUpdate: ({ editor: currentEditor }) => {
-				const nextMarkdown = normalizeMarkdown(htmlToMarkdown(currentEditor.getHTML()));
-				lastAppliedMarkdownRef.current = nextMarkdown;
-				onChange?.(nextMarkdown, currentEditor);
+				const nextMarkdown = sessionRef.current.serialize(currentEditor.state.doc);
+				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);
+			editor?.setEditable(!readOnly, false);
 		}, [editor, readOnly]);
 		useEffect(() => {
 			if (!editor) return;
-			const normalizedValue = normalizeMarkdown(value);
-			if (normalizedValue === lastAppliedMarkdownRef.current) return;
-			editor.commands.setContent(markdownToHtml(value), { emitUpdate: false });
-			lastAppliedMarkdownRef.current = normalizedValue;
+			if (normalizeMarkdown(value) === normalizeMarkdown(lastMarkdownRef.current)) return;
+			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 /* @__PURE__ */ jsxs("div", {
 			className: cn("flex min-h-[14rem] w-full flex-col overflow-hidden rounded-lg border border-border bg-background", className),

package/dist/editor/source-markdown-editor.js

@@ -0,0 +1,256 @@
+import { BLOCK_ID_ATTRIBUTE, SOURCE_KIND_ATTRIBUTE, SOURCE_RAW_ATTRIBUTE, asReadOnlyDocument, blockHtml, blockMarkdown, createBlockMerger, parseSourceMarkdown, serializeSourceMarkdown, withReadOnlyBlocks } from "./source-markdown.js";
+import { marked } from "marked";
+//#region src/editor/source-markdown-editor.ts
+/** Name of the read-only node that holds a block's raw Markdown. */
+const SOURCE_NODE = "markdownSource";
+/** Top-level node types that can carry a block id. */
+const BLOCK_TYPES = [
+	"paragraph",
+	"heading",
+	"bulletList",
+	"orderedList",
+	"blockquote",
+	"codeBlock",
+	"horizontalRule",
+	SOURCE_NODE
+];
+const CAPTIONS = {
+	table: "Table",
+	html: "HTML",
+	image: "Image",
+	checklist: "Checklist",
+	definition: "Link definition",
+	markdown: "Markdown",
+	paragraph: "Markdown",
+	heading: "Markdown",
+	code: "Markdown",
+	blockquote: "Markdown",
+	list: "Markdown",
+	hr: "Markdown"
+};
+function inlineText(tokens) {
+	return (tokens ?? []).map((token) => {
+		switch (token.type) {
+			case "image": return token.text;
+			case "br": return " ";
+			case "html": return "";
+			default: {
+				const children = token.tokens;
+				return children ? inlineText(children) : token.text ?? "";
+			}
+		}
+	}).join("");
+}
+function tablePreview(raw) {
+	const table = marked.lexer(raw, { gfm: true }).find((token) => token.type === "table");
+	if (!table) return null;
+	const cell = (tag, value) => [
+		tag,
+		{},
+		inlineText(value.tokens)
+	];
+	return [
+		"table",
+		{},
+		[
+			"thead",
+			{},
+			[
+				"tr",
+				{},
+				...table.header.map((value) => cell("th", value))
+			]
+		],
+		[
+			"tbody",
+			{},
+			...table.rows.map((row) => [
+				"tr",
+				{},
+				...row.map((value) => cell("td", value))
+			])
+		]
+	];
+}
+function sourcePreview(raw, kind) {
+	const caption = [
+		"p",
+		{ class: "not-prose m-0 mb-2 text-sm text-muted-foreground" },
+		`${CAPTIONS[kind] ?? "Markdown"} kept exactly as written. Edit it in the Markdown source.`
+	];
+	const table = kind === "table" ? tablePreview(raw) : null;
+	if (table) return [caption, [
+		"div",
+		{ class: "overflow-x-auto" },
+		table
+	]];
+	return [caption, [
+		"pre",
+		{ class: "m-0 whitespace-pre-wrap" },
+		[
+			"code",
+			{},
+			raw
+		]
+	]];
+}
+/** The read-only source node and the block-id attribute, built from the loaded tiptap. */
+function createSourceMarkdownExtensions(core) {
+	return [core.Node.create({
+		name: SOURCE_NODE,
+		group: "block",
+		atom: true,
+		selectable: true,
+		draggable: false,
+		addAttributes() {
+			return {
+				raw: {
+					default: "",
+					parseHTML: (element) => element.getAttribute("data-md-raw") ?? "",
+					renderHTML: (attributes) => ({ [SOURCE_RAW_ATTRIBUTE]: attributes.raw })
+				},
+				kind: {
+					default: "markdown",
+					parseHTML: (element) => element.getAttribute("data-md-kind") ?? "markdown",
+					renderHTML: (attributes) => ({ [SOURCE_KIND_ATTRIBUTE]: attributes.kind })
+				}
+			};
+		},
+		parseHTML() {
+			return [{ tag: `div[${SOURCE_RAW_ATTRIBUTE}]` }];
+		},
+		renderHTML({ node, HTMLAttributes }) {
+			return [
+				"div",
+				core.mergeAttributes(HTMLAttributes, { class: "my-3 rounded-lg border border-dashed border-border bg-muted/40 p-3" }),
+				...sourcePreview(String(node.attrs.raw ?? ""), node.attrs.kind)
+			];
+		}
+	}), core.Extension.create({
+		name: "markdownSourceBlockId",
+		addGlobalAttributes() {
+			return [{
+				types: BLOCK_TYPES,
+				attributes: { mdBlock: {
+					default: null,
+					keepOnSplit: false,
+					parseHTML: (element) => element.getAttribute(BLOCK_ID_ATTRIBUTE),
+					renderHTML: (attributes) => attributes.mdBlock ? { [BLOCK_ID_ATTRIBUTE]: attributes.mdBlock } : {}
+				} }
+			}];
+		}
+	})];
+}
+function blockIdOf(node) {
+	const id = node.attrs.mdBlock;
+	return typeof id === "string" && id ? id : null;
+}
+function isEmptyParagraph(node) {
+	return node.type.name === "paragraph" && node.content.size === 0;
+}
+function withoutBlockIds(value) {
+	if (Array.isArray(value)) return value.map(withoutBlockIds);
+	if (!value || typeof value !== "object") return value;
+	const out = {};
+	for (const [key, entry] of Object.entries(value)) {
+		if (key === "mdBlock") continue;
+		out[key] = withoutBlockIds(entry);
+	}
+	return out;
+}
+/**
+* One open file in the rich editor: its source blocks, the nodes they were
+* first parsed into, and the Markdown written back for the current document.
+*/
+var SourceMarkdownSession = class {
+	source;
+	core;
+	markdown;
+	initial = /* @__PURE__ */ new Map();
+	mergers = /* @__PURE__ */ new Map();
+	constructor(core, markdown) {
+		this.core = core;
+		this.markdown = markdown;
+		this.source = parseSourceMarkdown(markdown);
+	}
+	get html() {
+		return this.source.html;
+	}
+	/**
+	* Records the nodes the editor parsed. A block the editor document does not
+	* hold as exactly one top-level node (dropped, split, or merged by the
+	* schema) is shown read-only instead, so no source byte can be lost.
+	*/
+	attach(editor) {
+		for (let attempt = 0; attempt < 3; attempt++) {
+			const unmapped = this.capture(editor.state.doc);
+			if (unmapped.size === 0) return;
+			this.source = attempt < 2 ? withReadOnlyBlocks(this.source, unmapped) : asReadOnlyDocument(this.markdown);
+			editor.commands.setContent(this.source.html, { emitUpdate: false });
+		}
+		this.capture(editor.state.doc);
+	}
+	capture(doc) {
+		this.initial.clear();
+		this.mergers.clear();
+		const unmapped = /* @__PURE__ */ new Set();
+		let previous = null;
+		doc.forEach((node, _offset, index) => {
+			const id = blockIdOf(node);
+			if (id && this.source.byId.has(id)) {
+				if (this.initial.has(id)) unmapped.add(id);
+				else this.initial.set(id, node);
+				previous = id;
+				return;
+			}
+			if (index === doc.childCount - 1 && isEmptyParagraph(node)) return;
+			const owner = previous ?? this.source.blocks[0]?.id;
+			if (owner) unmapped.add(owner);
+		});
+		for (const block of this.source.blocks) if (!this.initial.has(block.id)) unmapped.add(block.id);
+		return unmapped;
+	}
+	toMarkdown(node, raw) {
+		const fragment = node.type.schema.topNodeType.create(null, node).content;
+		return blockMarkdown(this.core.getHTMLFromFragment(fragment, node.type.schema), raw);
+	}
+	reparses(markdown, node, schema) {
+		const html = blockHtml(markdown, this.source.links);
+		if (html === null) return false;
+		const parsed = this.core.createDocument(html, schema);
+		const nodes = [];
+		parsed.forEach((child) => {
+			if (!isEmptyParagraph(child)) nodes.push(child);
+		});
+		return nodes.length === 1 && JSON.stringify(withoutBlockIds(nodes[0].toJSON())) === JSON.stringify(withoutBlockIds(node.toJSON()));
+	}
+	mergerFor(id, initial, raw) {
+		let merge = this.mergers.get(id);
+		if (!merge) {
+			merge = createBlockMerger(raw, this.toMarkdown(initial, raw));
+			this.mergers.set(id, merge);
+		}
+		return merge;
+	}
+	/** The file's Markdown for `doc`: original bytes wherever the reader changed nothing. */
+	serialize(doc) {
+		const nodes = [];
+		doc.forEach((node) => {
+			const id = blockIdOf(node);
+			const block = id ? this.source.byId.get(id) : void 0;
+			const initial = id ? this.initial.get(id) : void 0;
+			const raw = node.type.name === "markdownSource" ? String(node.attrs.raw ?? "") : null;
+			nodes.push({
+				block: initial ? block : void 0,
+				unchanged: Boolean(initial?.eq(node)),
+				sameType: initial?.type === node.type,
+				markdown: () => raw ?? this.toMarkdown(node, block?.raw ?? ""),
+				merge: (edited) => initial && block ? this.mergerFor(block.id, initial, block.raw)(edited) : null,
+				reparses: (markdown) => this.reparses(markdown, node, node.type.schema)
+			});
+		});
+		return serializeSourceMarkdown(this.source, nodes);
+	}
+};
+//#endregion
+export { SOURCE_NODE, SourceMarkdownSession, createSourceMarkdownExtensions };