zidane-ui 0.0.0-stage → 9.0.2

package/dist/chat/rich-composer/composer-controls.js

@@ -0,0 +1,83 @@
+import { IconButton } from "../../components/IconButton.js";
+import { useComposerLabels } from "../composer/ComposerHostProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat/rich-composer/composer-controls.tsx
+/** Composer mode chips (shell / search / history): the meta voice on a tone, no outline. */
+const MODE_CHIP = "zg-meta inline-flex items-center gap-1 h-5 px-1.5 rounded-full leading-none select-none";
+function modeChipTone(color) {
+	return {
+		color,
+		backgroundColor: `color-mix(in srgb, ${color} 12%, transparent)`
+	};
+}
+/**
+* The + button: attach files.
+*
+* @param props - The click handler.
+*/
+function PlusButton({ onClick }) {
+	const labels = useComposerLabels();
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: "i-ph-plus",
+		label: labels.attachFile,
+		size: "lg",
+		className: "!rounded-full",
+		onClick: (event) => {
+			event.stopPropagation();
+			onClick();
+		}
+	});
+}
+/**
+* Unified Send / Stop control — one button element that never unmounts, so
+* the idle→streaming→hover-stop states crossfade in place (no layout jump;
+* constant 32×32 footprint). Three visual states, all CSS-driven via the
+* `zg-sendstop` classes in rich-composer.css:
+*
+*   - idle (`data-state="send"`) — a lit accent sphere (the daemon orb's
+*     drawing) + send glyph; asleep while the prompt is empty.
+*   - streaming (`data-state="run"`) — the same lit sphere, its glyph turned
+*     into a thin spinner ring: "the agent is working", not an alarm.
+*   - streaming + hover/focus-visible — the stop affordance surfaces: the
+*     sphere eases to the danger colour and a square stop glyph fades in.
+*
+* Clicking while streaming always stops (the hover state is a reveal, not
+* a gate — touch/keyboard users get the same action without hover).
+*
+* @param props - The run and draft state, and the handlers.
+*/
+function SendStopButton({ running, canSend, onSend, onStop }) {
+	const labels = useComposerLabels();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		disabled: !running && !canSend,
+		"data-state": running ? "run" : "send",
+		onClick: (event) => {
+			event.stopPropagation();
+			if (running) onStop?.();
+			else onSend();
+		},
+		"aria-label": running ? labels.stop : labels.sendMessage,
+		title: running ? labels.stopHint : labels.sendHint,
+		className: "zg-sendstop relative inline-flex items-center justify-center w-8 h-8 rounded-full border-0 cursor-pointer disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--zg-accent)]",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "zg-sendstop-layer zg-sendstop-send",
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx("span", { className: "i-ph-arrow-elbow-down-left text-base" })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "zg-sendstop-layer zg-sendstop-spin",
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx("span", { className: "zg-sendstop-ring" })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "zg-sendstop-layer zg-sendstop-stop",
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx("span", { className: "i-ph-stop-fill text-sm" })
+			})
+		]
+	});
+}
+//#endregion
+export { MODE_CHIP, PlusButton, SendStopButton, modeChipTone };

package/dist/chat/rich-composer/composer-extensions.d.ts

@@ -0,0 +1,40 @@
+import { ComposerCompletions, ComposerExtensionProvider } from "../headless/composer/host.js";
+import { ComposerMode } from "../headless/composer-modes.js";
+import { ComposerLabels } from "../headless/composer/labels.js";
+import { PopoverGate } from "./mention-popover.js";
+import { createSlashSuggestSource } from "./slash-completion.js";
+import { ComposerSources } from "./use-composer-sources.js";
+import { PromptGhost } from "./use-prompt-ghost.js";
+import { RefObject } from "react";
+import { ChatReferenceScope, createChatsCompletionProvider, createFilesCompletionProvider } from "zidane/chat/pure";
+import { Extensions } from "@tiptap/react";
+//#region src/chat/rich-composer/composer-extensions.d.ts
+/** Rows a completion popover shows. */
+declare const MAX_RESULTS = 8;
+/** What {@link composerExtensions} builds the editor's extensions from. */
+interface ComposerExtensionsContext {
+  /** No folder picked: its own placeholder. */
+  disabled: boolean;
+  /** The folder extension popovers complete against. */
+  folderPath: string | null;
+  /** Each provider is a popover trigger. */
+  extensionCompletionProviders: readonly ComposerExtensionProvider[];
+  /** An extension trigger's items (`ComposerHost.completions.extensionItems`). */
+  extensionItems: ComposerCompletions['extensionItems'];
+  sources: ComposerSources;
+  filesProvider: ReturnType<typeof createFilesCompletionProvider>;
+  slashSource: ReturnType<typeof createSlashSuggestSource>;
+  chatsProvider: ReturnType<typeof createChatsCompletionProvider>;
+  /** The `#` popover's scope, read and toggled in place. */
+  chatScopeRef: RefObject<ChatReferenceScope>;
+  mentionPopovers: PopoverGate;
+  promptGhost: PromptGhost;
+  modeRef: RefObject<ComposerMode>;
+  /** Re-evaluate the ghost after a gate input flipped without an edit. */
+  ghostGateChangedRef: RefObject<() => void>;
+  labels: ComposerLabels;
+}
+/** The editor's extensions. */
+declare function composerExtensions(ctx: ComposerExtensionsContext): Extensions;
+//#endregion
+export { ComposerExtensionsContext, MAX_RESULTS, composerExtensions };

package/dist/chat/rich-composer/composer-extensions.js

@@ -0,0 +1,224 @@
+import { splitPath } from "../../path.js";
+import { BADGE_GLYPH, fileBadgeSpec } from "../transcript/badges.js";
+import { createMentionRenderer, projectName, suggestToMentionItems } from "./mention-popover.js";
+import Mention from "@tiptap/extension-mention";
+import Placeholder from "@tiptap/extension-placeholder";
+import StarterKit from "@tiptap/starter-kit";
+//#region src/chat/rich-composer/composer-extensions.ts
+/**
+* The rich composer's Tiptap extensions: a plain-text StarterKit, the
+* placeholder per prompt mode, and one Mention node per completion trigger
+* (`@` files, `/` skills and commands, `#` chats, each extension's
+* trigger), each with its popover (`mention-popover.ts`).
+*/
+const MentionSkill = Mention.extend({
+	name: "mentionSkill",
+	addKeyboardShortcuts() {
+		return { Backspace: () => this.editor.commands.command(({ tr, state }) => {
+			const { empty, $anchor } = state.selection;
+			const node = $anchor.nodeBefore;
+			if (!empty || node?.type.name !== this.name) return false;
+			tr.insertText(`/${node.attrs.id}`, $anchor.pos - node.nodeSize, $anchor.pos);
+			return true;
+		}) };
+	}
+});
+const MentionChat = Mention.extend({ name: "mentionChat" });
+/** Rows a completion popover shows. */
+const MAX_RESULTS = 8;
+/** The editor's extensions. */
+function composerExtensions(ctx) {
+	const { disabled, folderPath, extensionCompletionProviders, extensionItems, sources, filesProvider, slashSource, chatsProvider, chatScopeRef, mentionPopovers, promptGhost, modeRef, ghostGateChangedRef, labels } = ctx;
+	const chatScopeLabel = (scope) => scope === "project" ? labels.chatScopeProject : labels.chatScopeAll;
+	return [
+		StarterKit.configure({
+			heading: false,
+			horizontalRule: false,
+			bold: false,
+			italic: false,
+			strike: false,
+			underline: false,
+			code: false,
+			codeBlock: false,
+			blockquote: false,
+			bulletList: false,
+			orderedList: false,
+			listItem: false,
+			listKeymap: false,
+			link: false
+		}),
+		Placeholder.configure({
+			showOnlyWhenEditable: false,
+			placeholder: () => {
+				if (disabled) return labels.placeholderNoFolder;
+				if (promptGhost.painted()) return "";
+				if (modeRef.current === "shell") return labels.placeholderShell;
+				if (modeRef.current === "search") return labels.placeholderSearch;
+				return labels.placeholderChat;
+			}
+		}),
+		Mention.configure({
+			HTMLAttributes: { class: "zg-mention" },
+			renderText: ({ node }) => `@${node.attrs.id}`,
+			renderHTML: ({ node }) => {
+				const id = node.attrs.id;
+				return fileBadgeSpec(id, {
+					class: "zg-mention",
+					"data-path": id,
+					"data-kind": "file"
+				});
+			},
+			suggestion: {
+				char: "@",
+				allow: () => modeRef.current === "normal",
+				items: async ({ query }) => {
+					await sources.files.read();
+					return suggestToMentionItems(filesProvider, query, 8, (data) => {
+						const entry = data;
+						const { dir, base } = splitPath(entry.path);
+						return {
+							id: entry.path,
+							label: base,
+							...dir ? { description: dir } : {}
+						};
+					});
+				},
+				render: () => createMentionRenderer(mentionPopovers, "files", { onActiveChange: () => ghostGateChangedRef.current() })
+			}
+		}),
+		MentionSkill.configure({
+			HTMLAttributes: { class: "zg-mention zg-mention-skill" },
+			renderText: ({ node }) => `/${node.attrs.id}`,
+			renderHTML: ({ node }) => [
+				"span",
+				{
+					class: `zg-mention zg-mention-skill zg-badge ${BADGE_GLYPH.skill}`,
+					"data-kind": "skill"
+				},
+				`/${node.attrs.id}`
+			],
+			suggestion: {
+				char: "/",
+				allow: () => modeRef.current === "normal",
+				allowSpaces: true,
+				items: async ({ query, editor }) => {
+					const { doc, selection } = editor.state;
+					const text = doc.textBetween(0, doc.content.size, "\n");
+					const cursor = doc.textBetween(0, selection.from, "\n").length;
+					await sources.commands.read();
+					return slashSource.suggest(query, {
+						text,
+						cursor
+					});
+				},
+				command: ({ editor, range, props }) => {
+					const item = props;
+					if (item.kind === "command" || item.kind === "command-arg") {
+						editor.chain().focus().insertContentAt(range, [{
+							type: "text",
+							text: item.insertText ?? `/${item.id} `
+						}]).run();
+						return;
+					}
+					const insertRange = editor.view.state.selection.$to.nodeAfter?.text?.startsWith(" ") ? {
+						from: range.from,
+						to: range.to + 1
+					} : range;
+					editor.chain().focus().insertContentAt(insertRange, [{
+						type: "mentionSkill",
+						attrs: {
+							id: item.id,
+							label: item.label,
+							mentionSuggestionChar: "/"
+						}
+					}, {
+						type: "text",
+						text: " "
+					}]).run();
+				},
+				render: () => createMentionRenderer(mentionPopovers, "skills", {
+					hideWhenEmpty: true,
+					onActiveChange: () => ghostGateChangedRef.current()
+				})
+			}
+		}),
+		...extensionCompletionProviders.map((provider, idx) => Mention.extend({ name: `mentionExtension${idx}` }).configure({
+			HTMLAttributes: { class: "zg-mention zg-mention-extension" },
+			renderText: ({ node }) => node.attrs.id,
+			renderHTML: ({ node }) => [
+				"span",
+				{
+					class: `zg-mention zg-mention-extension zg-badge ${BADGE_GLYPH.extension}`,
+					"data-kind": "extension",
+					title: node.attrs.id
+				},
+				`${provider.trigger}${node.attrs.label ?? node.attrs.id}`
+			],
+			suggestion: {
+				char: provider.trigger,
+				allow: () => modeRef.current === "normal",
+				items: async ({ query, editor }) => {
+					if (folderPath === null) return [];
+					const { doc, selection } = editor.state;
+					const text = doc.textBetween(0, doc.content.size, "\n");
+					const cursor = doc.textBetween(0, selection.from, "\n").length;
+					return (await (extensionItems ? extensionItems(folderPath, provider.id, query, text, cursor) : Promise.resolve([])).catch(() => [])).map((item) => ({
+						id: item.insertText,
+						label: item.label,
+						description: item.description
+					}));
+				},
+				render: () => createMentionRenderer(mentionPopovers, "extensions", { onActiveChange: () => ghostGateChangedRef.current() })
+			}
+		})),
+		MentionChat.configure({
+			HTMLAttributes: { class: "zg-mention zg-mention-chat" },
+			renderText: ({ node }) => `#${node.attrs.id}`,
+			renderHTML: ({ node }) => {
+				const token = node.attrs.id;
+				const label = typeof node.attrs.label === "string" ? node.attrs.label : token;
+				return [
+					"span",
+					{
+						class: `zg-mention zg-mention-chat zg-badge ${BADGE_GLYPH.chat}`,
+						"data-kind": "chat",
+						title: `#${token}`
+					},
+					label
+				];
+			},
+			suggestion: {
+				char: "#",
+				allow: () => modeRef.current === "normal",
+				items: async ({ query }) => {
+					await sources.chats.read();
+					return suggestToMentionItems(chatsProvider, query, 8, (data) => ({
+						id: data.token,
+						label: data.entry.title,
+						...data.entry.projectRoot ? { description: projectName(data.entry.projectRoot) } : {},
+						meta: labels.chatMessages(data.entry.userMessageCount)
+					}));
+				},
+				render: () => createMentionRenderer(mentionPopovers, "chats", {
+					onActiveChange: () => ghostGateChangedRef.current(),
+					scopeLabel: () => chatScopeLabel(chatScopeRef.current),
+					onScopeToggle: (query) => {
+						const next = chatScopeRef.current === "project" ? "all" : "project";
+						chatScopeRef.current = next;
+						return {
+							scopeLabel: chatScopeLabel(next),
+							items: suggestToMentionItems(chatsProvider, query, 8, (data) => ({
+								id: data.token,
+								label: data.entry.title,
+								...data.entry.projectRoot ? { description: projectName(data.entry.projectRoot) } : {},
+								meta: labels.chatMessages(data.entry.userMessageCount)
+							}))
+						};
+					}
+				})
+			}
+		})
+	];
+}
+//#endregion
+export { MAX_RESULTS, composerExtensions };

package/dist/chat/rich-composer/composer-keys.d.ts

@@ -0,0 +1,14 @@
+import { ComposerEditorOptions } from "./use-composer-editor.js";
+import { EditorOptions } from "@tiptap/core";
+//#region src/chat/rich-composer/composer-keys.d.ts
+/**
+ * The editor's props over the composer's live options.
+ *
+ * @param latest - The composer's options as of the last commit.
+ * @param name - The textbox's accessible name.
+ */
+declare function composerEditorProps(latest: {
+  readonly current: ComposerEditorOptions;
+}, name: string): EditorOptions['editorProps'];
+//#endregion
+export { composerEditorProps };

package/dist/chat/rich-composer/composer-keys.js

@@ -0,0 +1,163 @@
+import { pastedTextFilename, shouldFoldPasteToAttachment } from "../composer/attachment-ingest.js";
+import { isCaretAtEnd, isCaretAtStart, plainTextToDocJson } from "../composer/prompt-history-nav.js";
+import { draftWireText } from "../headless/composer/draft-sync.js";
+import { caretEffectivelyAtStart, decodeHistoryEntry, encodeHistoryDraft, exitsModeOnKey, modeForTypedChar } from "../headless/composer-modes.js";
+import { plainTextWithCursor } from "./ghost-plugin.js";
+import { ghostKeyAction } from "../headless/composer/ghost-autocomplete.js";
+import { Selection } from "@tiptap/pm/state";
+//#region src/chat/rich-composer/composer-keys.ts
+/**
+* The editor's props over the composer's live options.
+*
+* @param latest - The composer's options as of the last commit.
+* @param name - The textbox's accessible name.
+*/
+function composerEditorProps(latest, name) {
+	const { editorRef, modeRef, ghostRef, historyRecallRef, ghostGateChangedRef, mentionPopovers, promptGhost } = latest.current;
+	const liveEditor = () => {
+		const ed = editorRef.current;
+		return ed && !ed.isDestroyed ? ed : null;
+	};
+	return {
+		attributes: {
+			class: "block w-full bg-transparent text-[var(--zg-text)] text-sm focus:outline-none leading-6 overflow-clip",
+			"aria-label": name
+		},
+		transformPastedHTML(html) {
+			return html.replace(/<\/?(b|strong|i|em|s|strike|del|u|code|mark)\b[^>]*>/gi, "").replace(/\sstyle="[^"]*"/gi, "");
+		},
+		handleKeyDown(view, event) {
+			if (!event.metaKey && !event.ctrlKey && !event.altKey) {
+				const bufferEmpty = view.state.doc.textContent.length === 0 && view.state.doc.content.size <= 2;
+				const entered = modeForTypedChar(event.key, modeRef.current, bufferEmpty);
+				if (entered) {
+					event.preventDefault();
+					latest.current.applyMode(entered);
+					return true;
+				}
+			}
+			if (modeRef.current !== "normal" && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey) {
+				const caretAtStart = caretEffectivelyAtStart(view.state.selection, Selection.atStart(view.state.doc).from, view.state.doc.textContent.length === 0);
+				if (exitsModeOnKey(modeRef.current, event.key, caretAtStart)) {
+					event.preventDefault();
+					if (event.key === "Escape") event.stopPropagation();
+					if (modeRef.current === "search") queueMicrotask(() => liveEditor()?.commands.clearContent(true));
+					latest.current.applyMode("normal");
+					return true;
+				}
+			}
+			if (modeRef.current === "search") {
+				if (event.key === "Enter" && !event.metaKey && !event.ctrlKey && !event.altKey) {
+					event.preventDefault();
+					latest.current.onSearchNavigate?.(event.shiftKey ? -1 : 1);
+					return true;
+				}
+				if ((event.key === "ArrowUp" || event.key === "ArrowDown") && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey) {
+					event.preventDefault();
+					latest.current.onSearchNavigate?.(event.key === "ArrowUp" ? -1 : 1);
+					return true;
+				}
+				return false;
+			}
+			if (ghostRef.current && !event.isComposing) {
+				const action = ghostKeyAction(ghostRef.current, event, plainTextWithCursor(view.state), { prompt: promptGhost.painted() !== null });
+				if (action.type === "accept") {
+					event.preventDefault();
+					view.dispatch(view.state.tr.insertText(action.insert));
+					latest.current.applyGhost(null);
+					return true;
+				}
+				if (action.type === "rotate") {
+					event.preventDefault();
+					latest.current.applyGhost({
+						...ghostRef.current,
+						index: action.index
+					});
+					return true;
+				}
+				if (action.type === "dismiss") {
+					if (action.forSuggestion) promptGhost.dismissPainted();
+					latest.current.applyGhost(null);
+					if (action.consume) {
+						event.preventDefault();
+						return true;
+					}
+				}
+			}
+			if (event.key === "Enter" && !mentionPopovers.open) {
+				event.preventDefault();
+				if (event.shiftKey) editorRef.current?.chain().focus().splitBlock().run();
+				else latest.current.send();
+				return true;
+			}
+			if ((event.key === "ArrowUp" || event.key === "ArrowDown") && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey && !mentionPopovers.open) {
+				const sessionId = latest.current.activeSessionId;
+				if (!sessionId) return false;
+				const direction = event.key === "ArrowUp" ? "up" : "down";
+				if (!(direction === "up" ? isCaretAtStart(view.state) : isCaretAtEnd(view.state))) return false;
+				const serialized = editorRef.current ? draftWireText(editorRef.current.getJSON()) : "";
+				const current = encodeHistoryDraft(modeRef.current, serialized);
+				const next = latest.current.history.cycle(sessionId, direction, current);
+				if (next !== null) {
+					event.preventDefault();
+					const recalled = decodeHistoryEntry(next);
+					latest.current.applyMode(recalled.mode);
+					const editor = editorRef.current;
+					if (editor) queueMicrotask(() => {
+						historyRecallRef.current = true;
+						try {
+							editor.commands.setContent(plainTextToDocJson(recalled.text), { emitUpdate: true });
+							editor.commands.focus(direction === "up" ? "start" : "end");
+						} finally {
+							historyRecallRef.current = false;
+						}
+						ghostGateChangedRef.current();
+					});
+					latest.current.setHistoryStatus(latest.current.history.status(sessionId));
+					return true;
+				}
+			}
+			return false;
+		},
+		handlePaste(_view, event) {
+			const insertPlain = () => {
+				const plain = event.clipboardData?.getData("text/plain") ?? "";
+				const ed = editorRef.current;
+				if (!plain || !ed) return false;
+				event.preventDefault();
+				const lines = plain.replace(/\r\n?/g, "\n").split("\n");
+				ed.chain().focus().insertContent(lines.length === 1 ? plain : lines.map((line) => ({
+					type: "paragraph",
+					...line ? { content: [{
+						type: "text",
+						text: line
+					}] } : {}
+				}))).run();
+				return true;
+			};
+			if (!latest.current.attachmentsEnabled) return insertPlain();
+			const pastedFiles = Array.from(event.clipboardData?.items ?? []).filter((item) => item.kind === "file").map((item) => item.getAsFile()).filter((file) => file !== null);
+			if (pastedFiles.length > 0) {
+				event.preventDefault();
+				latest.current.addFiles(pastedFiles);
+				return true;
+			}
+			const text = event.clipboardData?.getData("text/plain") ?? "";
+			if (text.length > 0 && shouldFoldPasteToAttachment(text)) {
+				event.preventDefault();
+				const file = new File([text], pastedTextFilename(), { type: "text/plain" });
+				latest.current.addFiles([file]);
+				return true;
+			}
+			return insertPlain();
+		},
+		handleDrop(_view, event) {
+			if (!latest.current.attachmentsEnabled) return false;
+			if (!event.dataTransfer?.files.length) return false;
+			event.preventDefault();
+			return true;
+		}
+	};
+}
+//#endregion
+export { composerEditorProps };

package/dist/chat/rich-composer/ghost-plugin.d.ts

@@ -0,0 +1,26 @@
+import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
+//#region src/chat/rich-composer/ghost-plugin.d.ts
+/**
+ * Plain-text buffer + caret offset for the provider context. Both fields
+ * come from the SAME `textBetween` mapping (`\n` block separator, leaf
+ * nodes — mentions — contribute nothing), so the offsets always align
+ * even when the doc holds mention chips. This deliberately differs from
+ * `getText()` (which serializes mentions via their `renderText`): the
+ * ghost completes the whitespace-delimited token ENDING at the caret, so
+ * a consistent text/cursor pair matters more than mention fidelity.
+ */
+declare function plainTextWithCursor(state: EditorState): {
+  text: string;
+  cursor: number;
+};
+/**
+ * Plugin state is just the display string (or null). The host pushes it
+ * via `setMeta` after reconciling its `InlineGhost` snapshot; any doc
+ * change WITHOUT an accompanying meta clears the decoration — the host's
+ * transaction listener re-derives and re-pushes within the same JS turn
+ * (before paint), so per-keystroke reconciliation stays blink-free.
+ */
+declare const ghostTextPluginKey: PluginKey<string | null>;
+declare function createGhostTextPlugin(): Plugin<string | null>;
+//#endregion
+export { createGhostTextPlugin, ghostTextPluginKey, plainTextWithCursor };

package/dist/chat/rich-composer/ghost-plugin.js

@@ -0,0 +1,57 @@
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+//#region src/chat/rich-composer/ghost-plugin.ts
+/**
+* Plain-text buffer + caret offset for the provider context. Both fields
+* come from the SAME `textBetween` mapping (`\n` block separator, leaf
+* nodes — mentions — contribute nothing), so the offsets always align
+* even when the doc holds mention chips. This deliberately differs from
+* `getText()` (which serializes mentions via their `renderText`): the
+* ghost completes the whitespace-delimited token ENDING at the caret, so
+* a consistent text/cursor pair matters more than mention fidelity.
+*/
+function plainTextWithCursor(state) {
+	const doc = state.doc;
+	return {
+		text: doc.textBetween(0, doc.content.size, "\n"),
+		cursor: doc.textBetween(0, state.selection.from, "\n").length
+	};
+}
+/**
+* Plugin state is just the display string (or null). The host pushes it
+* via `setMeta` after reconciling its `InlineGhost` snapshot; any doc
+* change WITHOUT an accompanying meta clears the decoration — the host's
+* transaction listener re-derives and re-pushes within the same JS turn
+* (before paint), so per-keystroke reconciliation stays blink-free.
+*/
+const ghostTextPluginKey = new PluginKey("zg-ghost-text");
+function createGhostTextPlugin() {
+	return new Plugin({
+		key: ghostTextPluginKey,
+		state: {
+			init: () => null,
+			apply(tr, prev) {
+				const meta = tr.getMeta(ghostTextPluginKey);
+				if (meta !== void 0) return meta;
+				return tr.docChanged ? null : prev;
+			}
+		},
+		props: { decorations(state) {
+			const text = ghostTextPluginKey.getState(state);
+			if (!text || !state.selection.empty) return null;
+			const widget = Decoration.widget(state.selection.head, () => {
+				const span = document.createElement("span");
+				span.className = "zg-ghost-suffix";
+				span.setAttribute("aria-hidden", "true");
+				span.textContent = text;
+				return span;
+			}, {
+				side: 1,
+				key: `zg-ghost:${text}`
+			});
+			return DecorationSet.create(state.doc, [widget]);
+		} }
+	});
+}
+//#endregion
+export { createGhostTextPlugin, ghostTextPluginKey, plainTextWithCursor };

package/dist/chat/rich-composer/index.d.ts

@@ -0,0 +1,3 @@
+import { RichComposer, RichComposerProps } from "./RichComposer.js";
+import { PlusButton, PlusButtonProps, SendStopButton, SendStopButtonProps } from "./composer-controls.js";
+export { PlusButton, type PlusButtonProps, RichComposer, type RichComposerProps, SendStopButton, type SendStopButtonProps };

package/dist/chat/rich-composer/index.js

@@ -0,0 +1,3 @@
+import { PlusButton, SendStopButton } from "./composer-controls.js";
+import { RichComposer } from "./RichComposer.js";
+export { PlusButton, RichComposer, SendStopButton };