@soroush.tech/markdown 0.1.0 → 1.1.0

package/README.md

@@ -1,9 +1,9 @@
-[![npm version](https://img.shields.io/npm/v/@soroush.tech/markdown.svg)](https://www.npmjs.com/package/@soroush.tech/markdown)
-[![npm downloads](https://img.shields.io/npm/dm/@soroush.tech/markdown.svg)](https://www.npmjs.com/package/@soroush.tech/markdown)
+[![npm version](https://img.shields.io/npm/v/@soroush.tech/markdown.svg?cacheSeconds=86400)](https://www.npmjs.com/package/@soroush.tech/markdown)
+[![npm downloads](https://img.shields.io/npm/dm/@soroush.tech/markdown.svg?cacheSeconds=86400)](https://www.npmjs.com/package/@soroush.tech/markdown)
 [![coverage](https://codecov.io/gh/soroush-tech/core/branch/main/graph/badge.svg?flag=markdown)](https://app.codecov.io/gh/soroush-tech/core?flags%5B0%5D=markdown)
-[![unpacked size](https://img.shields.io/npm/unpacked-size/@soroush.tech/markdown.svg)](https://www.npmjs.com/package/@soroush.tech/markdown)
-[![types included](https://img.shields.io/npm/types/@soroush.tech/markdown.svg)](https://www.npmjs.com/package/@soroush.tech/markdown)
-[![license](https://img.shields.io/npm/l/@soroush.tech/markdown.svg)](./LICENSE)
+[![unpacked size](https://img.shields.io/npm/unpacked-size/@soroush.tech/markdown.svg?cacheSeconds=86400)](https://www.npmjs.com/package/@soroush.tech/markdown)
+[![types included](https://img.shields.io/npm/types/@soroush.tech/markdown.svg?cacheSeconds=86400)](https://www.npmjs.com/package/@soroush.tech/markdown)
+[![license](https://img.shields.io/npm/l/@soroush.tech/markdown.svg?cacheSeconds=86400)](./LICENSE)
 
 ## A **headless markdown editor and preview**.
 

package/dist/Editor.cjs

@@ -26,7 +26,7 @@ const noop = () => {};
 * driven by context (so the `Toolbar` can act on it); on its own it is a plain controlled field
 * via `value`/`onChange`.
 */
-function Editor({ value: valueProp, onChange: onChangeProp, placeholder = "Write your article in Markdown…", minRows = 16, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint = true }) {
+function Editor({ value: valueProp, onChange: onChangeProp, placeholder = "Write your article in Markdown…", minRows = 16, maxRows, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint = true }) {
 	const context = (0, react.useContext)(require_MarkdownContext.MarkdownContext);
 	const theme = (0, _soroush_tech_design_system_theme.useTheme)();
 	const textColor = textColorProp ?? (0, _soroush_tech_design_system_theme.themeDefault)(theme, "textColor", "initial");
@@ -106,6 +106,7 @@ function Editor({ value: valueProp, onChange: onChangeProp, placeholder = "Write
 			required,
 			disabled,
 			minRows,
+			maxRows,
 			value,
 			placeholder,
 			onChange: (event) => onChange(event.target.value),

package/dist/Editor.d.cts

@@ -9,6 +9,11 @@ interface EditorProps {
   placeholder?: string;
   /** Minimum visible rows of the source textarea. Default: `16`. */
   minRows?: number;
+  /**
+   * Maximum rows before the auto-grow textarea stops growing and scrolls
+   * internally — keeps its border box visible inside height-bound panes.
+   */
+  maxRows?: number;
   /** Visual style of the source input — forwarded to `TextInput`. Default: `'default'`. */
   variant?: TextInputVariant;
   /** Focus/active border colour — forwarded to `TextInput`. */
@@ -35,6 +40,6 @@ interface EditorProps {
  * driven by context (so the `Toolbar` can act on it); on its own it is a plain controlled field
  * via `value`/`onChange`.
  */
-declare function Editor({ value: valueProp, onChange: onChangeProp, placeholder, minRows, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint }: Readonly<EditorProps>): import("react").JSX.Element;
+declare function Editor({ value: valueProp, onChange: onChangeProp, placeholder, minRows, maxRows, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint }: Readonly<EditorProps>): import("react").JSX.Element;
 //#endregion
 export { Editor, EditorProps };

package/dist/Editor.d.mts

@@ -9,6 +9,11 @@ interface EditorProps {
   placeholder?: string;
   /** Minimum visible rows of the source textarea. Default: `16`. */
   minRows?: number;
+  /**
+   * Maximum rows before the auto-grow textarea stops growing and scrolls
+   * internally — keeps its border box visible inside height-bound panes.
+   */
+  maxRows?: number;
   /** Visual style of the source input — forwarded to `TextInput`. Default: `'default'`. */
   variant?: TextInputVariant;
   /** Focus/active border colour — forwarded to `TextInput`. */
@@ -35,6 +40,6 @@ interface EditorProps {
  * driven by context (so the `Toolbar` can act on it); on its own it is a plain controlled field
  * via `value`/`onChange`.
  */
-declare function Editor({ value: valueProp, onChange: onChangeProp, placeholder, minRows, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint }: Readonly<EditorProps>): import("react").JSX.Element;
+declare function Editor({ value: valueProp, onChange: onChangeProp, placeholder, minRows, maxRows, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint }: Readonly<EditorProps>): import("react").JSX.Element;
 //#endregion
 export { Editor, EditorProps };

package/dist/Editor.mjs

@@ -25,7 +25,7 @@ const noop = () => {};
 * driven by context (so the `Toolbar` can act on it); on its own it is a plain controlled field
 * via `value`/`onChange`.
 */
-function Editor({ value: valueProp, onChange: onChangeProp, placeholder = "Write your article in Markdown…", minRows = 16, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint = true }) {
+function Editor({ value: valueProp, onChange: onChangeProp, placeholder = "Write your article in Markdown…", minRows = 16, maxRows, variant, color, textColor: textColorProp, size, name, id, error, required, disabled, showShortcutHint = true }) {
 	const context = useContext(MarkdownContext);
 	const theme = useTheme();
 	const textColor = textColorProp ?? themeDefault(theme, "textColor", "initial");
@@ -105,6 +105,7 @@ function Editor({ value: valueProp, onChange: onChangeProp, placeholder = "Write
 			required,
 			disabled,
 			minRows,
+			maxRows,
 			value,
 			placeholder,
 			onChange: (event) => onChange(event.target.value),

package/dist/LiveEdit-DyBGqI3s.cjs

@@ -0,0 +1,219 @@
+const require_Preview = require("./Preview-CQ0z3gzx.cjs");
+const require_MarkdownContext = require("./MarkdownContext.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_design_system = require("@soroush.tech/design-system");
+let _soroush_tech_design_system_View = require("@soroush.tech/design-system/View");
+let remark_gfm = require("remark-gfm");
+remark_gfm = require_Preview.__toESM(remark_gfm, 1);
+let rehype_parse = require("rehype-parse");
+rehype_parse = require_Preview.__toESM(rehype_parse, 1);
+let rehype_remark = require("rehype-remark");
+rehype_remark = require_Preview.__toESM(rehype_remark, 1);
+let remark_stringify = require("remark-stringify");
+remark_stringify = require_Preview.__toESM(remark_stringify, 1);
+//#region src/utils/blockToMarkdown.ts
+const processor = (0, require("unified").unified)().use(rehype_parse.default, { fragment: true }).use(rehype_remark.default).use(remark_gfm.default).use(remark_stringify.default, {
+	bullet: "-",
+	fence: "`",
+	rule: "-"
+});
+/**
+* Serializes an edited block's live DOM back to markdown. The preview renders
+* non-content UI inside a block (the code-copy control, decorative SVGs) —
+* those are stripped from a clone first so only real content round-trips.
+*/
+function blockToMarkdown(element) {
+	const clone = element.cloneNode(true);
+	for (const junk of clone.querySelectorAll(".code-copy, button, svg")) junk.remove();
+	return String(processor.processSync(clone.innerHTML)).trimEnd();
+}
+//#endregion
+//#region src/utils/splitBlocks.ts
+const FENCE = /^[ \t]{0,3}(`{3,}|~{3,})/;
+/**
+* The fence state after `line`: unchanged when the line carries no marker, the
+* marker itself when one opens a block, and `null` when one closes it.
+*
+* A closing marker must use the same character, be at least as long, and carry
+* nothing after it. The info string is what separates the two roles — a
+* ```` ```ts ```` line inside an open ```` ``` ```` block opens nothing and closes
+* nothing, it is content. Without that check the block would end early and its
+* remaining blank lines would split it into further blocks.
+*/
+const nextFence = (line, fence) => {
+	const match = FENCE.exec(line);
+	if (!match) return fence;
+	const [matched, marker] = match;
+	if (fence === null) return marker;
+	return line.slice(matched.length).trim() === "" && marker.startsWith(fence[0]) && marker.length >= fence.length ? null : fence;
+};
+/**
+* Splits markdown into top-level blocks separated by blank lines, keeping
+* fenced code blocks whole — blank lines inside a ``` / ~~~ fence never split.
+* Offsets index the original string, so an edited block's source can be
+* spliced back losslessly.
+*/
+function splitBlocks(value) {
+	const blocks = [];
+	let blockStart = -1;
+	let blockEnd = -1;
+	let fence = null;
+	let offset = 0;
+	for (const line of value.split("\n")) {
+		const isBlank = line.trim() === "";
+		if (blockStart >= 0 && isBlank && fence === null) {
+			blocks.push({
+				source: value.slice(blockStart, blockEnd),
+				start: blockStart,
+				end: blockEnd
+			});
+			blockStart = -1;
+		} else if (!isBlank || fence !== null) {
+			if (blockStart < 0) blockStart = offset;
+			blockEnd = offset + line.length;
+			fence = nextFence(line, fence);
+		}
+		offset += line.length + 1;
+	}
+	if (blockStart >= 0) blocks.push({
+		source: value.slice(blockStart, blockEnd),
+		start: blockStart,
+		end: blockEnd
+	});
+	return blocks;
+}
+//#endregion
+//#region src/LiveEdit/LiveEdit.tsx
+const LiveEditRoot = (0, _soroush_tech_design_system.styled)(_soroush_tech_design_system_View.View, {
+	name: "MarkdownLiveEdit",
+	label: "MarkdownLiveEdit"
+})({
+	minWidth: 0,
+	maxWidth: "100%",
+	overflowWrap: "break-word"
+});
+const LiveEditBlock = (0, _soroush_tech_design_system.styled)(_soroush_tech_design_system_View.View, {
+	name: "MarkdownLiveEdit",
+	slot: "block",
+	label: "MarkdownLiveEditBlock"
+})(({ theme }) => ({
+	cursor: "text",
+	borderRadius: theme?.radii?.sm,
+	"&:hover, &:focus-within, &:focus": {
+		outline: `${theme?.borderWidths?.thin} dashed ${theme?.border?.primary}`,
+		outlineOffset: "2px"
+	},
+	"&:empty::before": {
+		content: "attr(data-placeholder)",
+		color: theme?.text?.secondary
+	}
+}));
+const MERMAID_FENCE = /^\s{0,3}(?:`{3,}|~{3,})\s*mermaid\b/;
+const noop = () => {};
+/** An empty document still needs one editable block to type into. */
+const toBlocks = (value) => {
+	const blocks = splitBlocks(value);
+	return blocks.length > 0 ? blocks : [{
+		source: "",
+		start: 0,
+		end: value.length
+	}];
+};
+/**
+* One contentEditable block. The preview element is created once per mount —
+* while the browser owns the DOM during typing, React must never reconcile
+* the subtree under the caret. The parent remounts the block (source-derived
+* key) whenever its markdown actually changes.
+*/
+function EditableBlock({ index, source, isEditable, placeholder, slotProps, onEdit, onDone }) {
+	const [content] = (0, react.useState)(() => source === "" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Preview.Preview, {
+		slotProps,
+		children: source
+	}));
+	const handleKeyDown = (event) => {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		event.currentTarget.blur();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveEditBlock, {
+		"aria-label": "Edit block",
+		tabIndex: isEditable ? 0 : void 0,
+		contentEditable: isEditable,
+		suppressContentEditableWarning: true,
+		"data-placeholder": source === "" ? placeholder : void 0,
+		onInput: (event) => onEdit(index, event.currentTarget),
+		onBlur: onDone,
+		onKeyDown: handleKeyDown,
+		children: content
+	});
+}
+/**
+* A preview you write on directly: the document renders exactly like
+* `Preview`, split into blocks, and every block is `contentEditable` — no
+* textarea. While a block is being typed in, the browser owns its DOM; each
+* input serializes that block back to markdown and splices it into `value`,
+* so `onChange` stays live and untouched blocks keep their exact source.
+* Blur (or Escape) re-splits the document. Mermaid blocks are read-only —
+* a diagram has no text to edit in place. Inside a `Control` it is driven by
+* context; standalone it is a plain controlled component.
+*/
+function LiveEdit({ value: valueProp, onChange: onChangeProp, placeholder = "Click to start writing…", slotProps }) {
+	const context = (0, react.useContext)(require_MarkdownContext.MarkdownContext);
+	const value = context?.value ?? valueProp ?? "";
+	const onChange = context?.onChange ?? onChangeProp ?? noop;
+	const [blocks, setBlocks] = (0, react.useState)(() => toBlocks(value));
+	const [generation, setGeneration] = (0, react.useState)(0);
+	const offsetsRef = (0, react.useRef)(null);
+	const getOffsets = () => {
+		if (offsetsRef.current?.generation !== generation) offsetsRef.current = {
+			generation,
+			offsets: blocks.map(({ start, end }) => ({
+				start,
+				end
+			}))
+		};
+		return offsetsRef.current.offsets;
+	};
+	const resplit = (next) => {
+		setBlocks(toBlocks(next));
+		setGeneration((current) => current + 1);
+	};
+	const syncedValueRef = (0, react.useRef)(value);
+	if (value !== syncedValueRef.current) {
+		syncedValueRef.current = value;
+		resplit(value);
+	}
+	const handleEdit = (index, element) => {
+		const markdown = blockToMarkdown(element);
+		const offsets = getOffsets();
+		const block = offsets[index];
+		const current = syncedValueRef.current;
+		const next = current.slice(0, block.start) + markdown + current.slice(block.end);
+		const delta = markdown.length - (block.end - block.start);
+		block.end = block.start + markdown.length;
+		for (const later of offsets.slice(index + 1)) {
+			later.start += delta;
+			later.end += delta;
+		}
+		syncedValueRef.current = next;
+		onChange(next);
+	};
+	const handleDone = () => resplit(syncedValueRef.current);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveEditRoot, { children: blocks.map((block, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditableBlock, {
+		index,
+		source: block.source,
+		isEditable: !MERMAID_FENCE.test(block.source),
+		placeholder,
+		slotProps,
+		onEdit: handleEdit,
+		onDone: handleDone
+	}, `${generation}:${index}`)) });
+}
+//#endregion
+Object.defineProperty(exports, "LiveEdit", {
+	enumerable: true,
+	get: function() {
+		return LiveEdit;
+	}
+});

package/dist/LiveEdit-KDKu7Yvn.mjs

@@ -0,0 +1,211 @@
+import { MarkdownContext } from "./MarkdownContext.mjs";
+import { t as Preview } from "./Preview-nvh2sGBQ.mjs";
+import { useContext, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { styled } from "@soroush.tech/design-system";
+import { View } from "@soroush.tech/design-system/View";
+import remarkGfm from "remark-gfm";
+import rehypeParse from "rehype-parse";
+import rehypeRemark from "rehype-remark";
+import remarkStringify from "remark-stringify";
+import { unified } from "unified";
+//#region src/utils/blockToMarkdown.ts
+const processor = unified().use(rehypeParse, { fragment: true }).use(rehypeRemark).use(remarkGfm).use(remarkStringify, {
+	bullet: "-",
+	fence: "`",
+	rule: "-"
+});
+/**
+* Serializes an edited block's live DOM back to markdown. The preview renders
+* non-content UI inside a block (the code-copy control, decorative SVGs) —
+* those are stripped from a clone first so only real content round-trips.
+*/
+function blockToMarkdown(element) {
+	const clone = element.cloneNode(true);
+	for (const junk of clone.querySelectorAll(".code-copy, button, svg")) junk.remove();
+	return String(processor.processSync(clone.innerHTML)).trimEnd();
+}
+//#endregion
+//#region src/utils/splitBlocks.ts
+const FENCE = /^[ \t]{0,3}(`{3,}|~{3,})/;
+/**
+* The fence state after `line`: unchanged when the line carries no marker, the
+* marker itself when one opens a block, and `null` when one closes it.
+*
+* A closing marker must use the same character, be at least as long, and carry
+* nothing after it. The info string is what separates the two roles — a
+* ```` ```ts ```` line inside an open ```` ``` ```` block opens nothing and closes
+* nothing, it is content. Without that check the block would end early and its
+* remaining blank lines would split it into further blocks.
+*/
+const nextFence = (line, fence) => {
+	const match = FENCE.exec(line);
+	if (!match) return fence;
+	const [matched, marker] = match;
+	if (fence === null) return marker;
+	return line.slice(matched.length).trim() === "" && marker.startsWith(fence[0]) && marker.length >= fence.length ? null : fence;
+};
+/**
+* Splits markdown into top-level blocks separated by blank lines, keeping
+* fenced code blocks whole — blank lines inside a ``` / ~~~ fence never split.
+* Offsets index the original string, so an edited block's source can be
+* spliced back losslessly.
+*/
+function splitBlocks(value) {
+	const blocks = [];
+	let blockStart = -1;
+	let blockEnd = -1;
+	let fence = null;
+	let offset = 0;
+	for (const line of value.split("\n")) {
+		const isBlank = line.trim() === "";
+		if (blockStart >= 0 && isBlank && fence === null) {
+			blocks.push({
+				source: value.slice(blockStart, blockEnd),
+				start: blockStart,
+				end: blockEnd
+			});
+			blockStart = -1;
+		} else if (!isBlank || fence !== null) {
+			if (blockStart < 0) blockStart = offset;
+			blockEnd = offset + line.length;
+			fence = nextFence(line, fence);
+		}
+		offset += line.length + 1;
+	}
+	if (blockStart >= 0) blocks.push({
+		source: value.slice(blockStart, blockEnd),
+		start: blockStart,
+		end: blockEnd
+	});
+	return blocks;
+}
+//#endregion
+//#region src/LiveEdit/LiveEdit.tsx
+const LiveEditRoot = styled(View, {
+	name: "MarkdownLiveEdit",
+	label: "MarkdownLiveEdit"
+})({
+	minWidth: 0,
+	maxWidth: "100%",
+	overflowWrap: "break-word"
+});
+const LiveEditBlock = styled(View, {
+	name: "MarkdownLiveEdit",
+	slot: "block",
+	label: "MarkdownLiveEditBlock"
+})(({ theme }) => ({
+	cursor: "text",
+	borderRadius: theme?.radii?.sm,
+	"&:hover, &:focus-within, &:focus": {
+		outline: `${theme?.borderWidths?.thin} dashed ${theme?.border?.primary}`,
+		outlineOffset: "2px"
+	},
+	"&:empty::before": {
+		content: "attr(data-placeholder)",
+		color: theme?.text?.secondary
+	}
+}));
+const MERMAID_FENCE = /^\s{0,3}(?:`{3,}|~{3,})\s*mermaid\b/;
+const noop = () => {};
+/** An empty document still needs one editable block to type into. */
+const toBlocks = (value) => {
+	const blocks = splitBlocks(value);
+	return blocks.length > 0 ? blocks : [{
+		source: "",
+		start: 0,
+		end: value.length
+	}];
+};
+/**
+* One contentEditable block. The preview element is created once per mount —
+* while the browser owns the DOM during typing, React must never reconcile
+* the subtree under the caret. The parent remounts the block (source-derived
+* key) whenever its markdown actually changes.
+*/
+function EditableBlock({ index, source, isEditable, placeholder, slotProps, onEdit, onDone }) {
+	const [content] = useState(() => source === "" ? null : /* @__PURE__ */ jsx(Preview, {
+		slotProps,
+		children: source
+	}));
+	const handleKeyDown = (event) => {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		event.currentTarget.blur();
+	};
+	return /* @__PURE__ */ jsx(LiveEditBlock, {
+		"aria-label": "Edit block",
+		tabIndex: isEditable ? 0 : void 0,
+		contentEditable: isEditable,
+		suppressContentEditableWarning: true,
+		"data-placeholder": source === "" ? placeholder : void 0,
+		onInput: (event) => onEdit(index, event.currentTarget),
+		onBlur: onDone,
+		onKeyDown: handleKeyDown,
+		children: content
+	});
+}
+/**
+* A preview you write on directly: the document renders exactly like
+* `Preview`, split into blocks, and every block is `contentEditable` — no
+* textarea. While a block is being typed in, the browser owns its DOM; each
+* input serializes that block back to markdown and splices it into `value`,
+* so `onChange` stays live and untouched blocks keep their exact source.
+* Blur (or Escape) re-splits the document. Mermaid blocks are read-only —
+* a diagram has no text to edit in place. Inside a `Control` it is driven by
+* context; standalone it is a plain controlled component.
+*/
+function LiveEdit({ value: valueProp, onChange: onChangeProp, placeholder = "Click to start writing…", slotProps }) {
+	const context = useContext(MarkdownContext);
+	const value = context?.value ?? valueProp ?? "";
+	const onChange = context?.onChange ?? onChangeProp ?? noop;
+	const [blocks, setBlocks] = useState(() => toBlocks(value));
+	const [generation, setGeneration] = useState(0);
+	const offsetsRef = useRef(null);
+	const getOffsets = () => {
+		if (offsetsRef.current?.generation !== generation) offsetsRef.current = {
+			generation,
+			offsets: blocks.map(({ start, end }) => ({
+				start,
+				end
+			}))
+		};
+		return offsetsRef.current.offsets;
+	};
+	const resplit = (next) => {
+		setBlocks(toBlocks(next));
+		setGeneration((current) => current + 1);
+	};
+	const syncedValueRef = useRef(value);
+	if (value !== syncedValueRef.current) {
+		syncedValueRef.current = value;
+		resplit(value);
+	}
+	const handleEdit = (index, element) => {
+		const markdown = blockToMarkdown(element);
+		const offsets = getOffsets();
+		const block = offsets[index];
+		const current = syncedValueRef.current;
+		const next = current.slice(0, block.start) + markdown + current.slice(block.end);
+		const delta = markdown.length - (block.end - block.start);
+		block.end = block.start + markdown.length;
+		for (const later of offsets.slice(index + 1)) {
+			later.start += delta;
+			later.end += delta;
+		}
+		syncedValueRef.current = next;
+		onChange(next);
+	};
+	const handleDone = () => resplit(syncedValueRef.current);
+	return /* @__PURE__ */ jsx(LiveEditRoot, { children: blocks.map((block, index) => /* @__PURE__ */ jsx(EditableBlock, {
+		index,
+		source: block.source,
+		isEditable: !MERMAID_FENCE.test(block.source),
+		placeholder,
+		slotProps,
+		onEdit: handleEdit,
+		onDone: handleDone
+	}, `${generation}:${index}`)) });
+}
+//#endregion
+export { LiveEdit as t };

package/dist/LiveEdit.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_LiveEdit = require("./LiveEdit-DyBGqI3s.cjs");
+exports.LiveEdit = require_LiveEdit.LiveEdit;

package/dist/LiveEdit.d.cts

@@ -0,0 +1,25 @@
+import { r as PreviewSlotProps } from "./index-CxdJ1SgP.cjs";
+//#region src/LiveEdit/LiveEdit.d.ts
+interface LiveEditProps {
+  /** Standalone source value — used when rendered outside a `Control`. Ignored inside one. */
+  value?: string;
+  /** Standalone change handler — used when rendered outside a `Control`. Ignored inside one. */
+  onChange?: (value: string) => void;
+  /** Shown inside the (empty) document's first block until something is typed. */
+  placeholder?: string;
+  /** Per-element prop overrides forwarded to every block's preview. */
+  slotProps?: PreviewSlotProps;
+}
+/**
+ * A preview you write on directly: the document renders exactly like
+ * `Preview`, split into blocks, and every block is `contentEditable` — no
+ * textarea. While a block is being typed in, the browser owns its DOM; each
+ * input serializes that block back to markdown and splices it into `value`,
+ * so `onChange` stays live and untouched blocks keep their exact source.
+ * Blur (or Escape) re-splits the document. Mermaid blocks are read-only —
+ * a diagram has no text to edit in place. Inside a `Control` it is driven by
+ * context; standalone it is a plain controlled component.
+ */
+declare function LiveEdit({ value: valueProp, onChange: onChangeProp, placeholder, slotProps }: Readonly<LiveEditProps>): import("react").JSX.Element;
+//#endregion
+export { LiveEdit, LiveEditProps };

package/dist/LiveEdit.d.mts

@@ -0,0 +1,25 @@
+import { r as PreviewSlotProps } from "./index-CPWcFD6T.mjs";
+//#region src/LiveEdit/LiveEdit.d.ts
+interface LiveEditProps {
+  /** Standalone source value — used when rendered outside a `Control`. Ignored inside one. */
+  value?: string;
+  /** Standalone change handler — used when rendered outside a `Control`. Ignored inside one. */
+  onChange?: (value: string) => void;
+  /** Shown inside the (empty) document's first block until something is typed. */
+  placeholder?: string;
+  /** Per-element prop overrides forwarded to every block's preview. */
+  slotProps?: PreviewSlotProps;
+}
+/**
+ * A preview you write on directly: the document renders exactly like
+ * `Preview`, split into blocks, and every block is `contentEditable` — no
+ * textarea. While a block is being typed in, the browser owns its DOM; each
+ * input serializes that block back to markdown and splices it into `value`,
+ * so `onChange` stays live and untouched blocks keep their exact source.
+ * Blur (or Escape) re-splits the document. Mermaid blocks are read-only —
+ * a diagram has no text to edit in place. Inside a `Control` it is driven by
+ * context; standalone it is a plain controlled component.
+ */
+declare function LiveEdit({ value: valueProp, onChange: onChangeProp, placeholder, slotProps }: Readonly<LiveEditProps>): import("react").JSX.Element;
+//#endregion
+export { LiveEdit, LiveEditProps };

package/dist/LiveEdit.mjs

@@ -0,0 +1,2 @@
+import { t as LiveEdit } from "./LiveEdit-KDKu7Yvn.mjs";
+export { LiveEdit };

package/dist/{Preview-BVT70uXa.cjs → Preview-CQ0z3gzx.cjs}

@@ -26,6 +26,7 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_design_system_Typography = require("@soroush.tech/design-system/Typography");
 let _soroush_tech_design_system = require("@soroush.tech/design-system");
+let _soroush_tech_design_system_View = require("@soroush.tech/design-system/View");
 let react_markdown = require("react-markdown");
 react_markdown = __toESM(react_markdown, 1);
 let remark_gfm = require("remark-gfm");
@@ -37,7 +38,6 @@ let _soroush_tech_design_system_Checkbox = require("@soroush.tech/design-system/
 let _soroush_tech_design_system_Image = require("@soroush.tech/design-system/Image");
 let _soroush_tech_design_system_Link = require("@soroush.tech/design-system/Link");
 let _soroush_tech_design_system_Table = require("@soroush.tech/design-system/Table");
-let _soroush_tech_design_system_View = require("@soroush.tech/design-system/View");
 function mermaidSource(children) {
 	return (Array.isArray(children) ? children.join("") : String(children ?? "")).replace(/\n$/, "");
 }
@@ -190,6 +190,7 @@ const components = {
 		const isBlock = classes.includes("language-");
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Typography.Typography, {
 			as: "code",
+			className,
 			color: "initial",
 			variant: "inherit",
 			fontFamily: "mono",
@@ -274,3 +275,9 @@ Object.defineProperty(exports, "Preview", {
 		return Preview;
 	}
 });
+Object.defineProperty(exports, "__toESM", {
+	enumerable: true,
+	get: function() {
+		return __toESM;
+	}
+});

package/dist/{Preview-C1CwRDj5.mjs → Preview-nvh2sGBQ.mjs}

@@ -4,6 +4,7 @@ import { createContext, isValidElement, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Typography } from "@soroush.tech/design-system/Typography";
 import { styled } from "@soroush.tech/design-system";
+import { View } from "@soroush.tech/design-system/View";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
@@ -12,7 +13,6 @@ import { Checkbox } from "@soroush.tech/design-system/Checkbox";
 import { Image } from "@soroush.tech/design-system/Image";
 import { Link } from "@soroush.tech/design-system/Link";
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@soroush.tech/design-system/Table";
-import { View } from "@soroush.tech/design-system/View";
 function mermaidSource(children) {
 	return (Array.isArray(children) ? children.join("") : String(children ?? "")).replace(/\n$/, "");
 }
@@ -165,6 +165,7 @@ const components = {
 		const isBlock = classes.includes("language-");
 		return /* @__PURE__ */ jsx(Typography, {
 			as: "code",
+			className,
 			color: "initial",
 			variant: "inherit",
 			fontFamily: "mono",

package/dist/Preview.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Preview = require("./Preview-BVT70uXa.cjs");
+const require_Preview = require("./Preview-CQ0z3gzx.cjs");
 exports.Preview = require_Preview.Preview;

package/dist/Preview.d.cts

@@ -1,53 +1,2 @@
-import { a as CodeBlockProps } from "./index-BtMTBOcM.cjs";
-import { r as MermaidProps } from "./index-BO0LyUUG.cjs";
-import { ViewProps } from "@soroush.tech/design-system/View";
-import { QuoteProps } from "@soroush.tech/design-system/Quote";
-import { CheckboxProps } from "@soroush.tech/design-system/Checkbox";
-import { ImageProps } from "@soroush.tech/design-system/Image";
-import { LinkProps } from "@soroush.tech/design-system/Link";
-import { TableBodyProps, TableCellProps, TableHeadProps, TableProps, TableRowProps } from "@soroush.tech/design-system/Table";
-import { TypographyProps } from "@soroush.tech/design-system/Typography";
-//#region src/Preview/Preview.d.ts
-/**
- * Per-element prop overrides, merged over the design-system defaults (the caller's props win).
- * Keyed by markdown element — e.g. `slotProps={{ p: { color: 'primary' }, h1: { variant: 'h2' } }}`.
- */
-interface PreviewSlotProps {
-  h1?: TypographyProps;
-  h2?: TypographyProps;
-  h3?: TypographyProps;
-  h4?: TypographyProps;
-  h5?: TypographyProps;
-  h6?: TypographyProps;
-  p?: TypographyProps;
-  strong?: TypographyProps;
-  em?: TypographyProps;
-  li?: TypographyProps;
-  code?: TypographyProps;
-  a?: LinkProps;
-  ul?: ViewProps;
-  ol?: ViewProps;
-  hr?: ViewProps;
-  blockquote?: QuoteProps;
-  img?: ImageProps;
-  th?: TableCellProps;
-  td?: TableCellProps;
-  pre?: CodeBlockProps;
-  input?: CheckboxProps;
-  table?: TableProps;
-  thead?: TableHeadProps;
-  tbody?: TableBodyProps;
-  tr?: TableRowProps;
-  /** Props for a ` ```mermaid ` fence's `Mermaid` renderer — including `diagram` (viewer) props. */
-  mermaid?: Omit<MermaidProps, 'chart'>;
-}
-interface PreviewProps {
-  /** The markdown source to render. */
-  children: string;
-  /** Per-element prop overrides, merged over the defaults. */
-  slotProps?: PreviewSlotProps;
-}
-/** Renders a markdown string with every element mapped to a design-system primitive. */
-declare function Preview({ children, slotProps }: Readonly<PreviewProps>): import("react").JSX.Element;
-//#endregion
+import { n as PreviewProps, r as PreviewSlotProps, t as Preview } from "./index-CxdJ1SgP.cjs";
 export { Preview, PreviewProps, PreviewSlotProps };

package/dist/Preview.d.mts

@@ -1,53 +1,2 @@
-import { a as CodeBlockProps } from "./index-BtMTBOcM.mjs";
-import { r as MermaidProps } from "./index-BO0LyUUG.mjs";
-import { TypographyProps } from "@soroush.tech/design-system/Typography";
-import { QuoteProps } from "@soroush.tech/design-system/Quote";
-import { CheckboxProps } from "@soroush.tech/design-system/Checkbox";
-import { ImageProps } from "@soroush.tech/design-system/Image";
-import { LinkProps } from "@soroush.tech/design-system/Link";
-import { TableBodyProps, TableCellProps, TableHeadProps, TableProps, TableRowProps } from "@soroush.tech/design-system/Table";
-import { ViewProps } from "@soroush.tech/design-system/View";
-//#region src/Preview/Preview.d.ts
-/**
- * Per-element prop overrides, merged over the design-system defaults (the caller's props win).
- * Keyed by markdown element — e.g. `slotProps={{ p: { color: 'primary' }, h1: { variant: 'h2' } }}`.
- */
-interface PreviewSlotProps {
-  h1?: TypographyProps;
-  h2?: TypographyProps;
-  h3?: TypographyProps;
-  h4?: TypographyProps;
-  h5?: TypographyProps;
-  h6?: TypographyProps;
-  p?: TypographyProps;
-  strong?: TypographyProps;
-  em?: TypographyProps;
-  li?: TypographyProps;
-  code?: TypographyProps;
-  a?: LinkProps;
-  ul?: ViewProps;
-  ol?: ViewProps;
-  hr?: ViewProps;
-  blockquote?: QuoteProps;
-  img?: ImageProps;
-  th?: TableCellProps;
-  td?: TableCellProps;
-  pre?: CodeBlockProps;
-  input?: CheckboxProps;
-  table?: TableProps;
-  thead?: TableHeadProps;
-  tbody?: TableBodyProps;
-  tr?: TableRowProps;
-  /** Props for a ` ```mermaid ` fence's `Mermaid` renderer — including `diagram` (viewer) props. */
-  mermaid?: Omit<MermaidProps, 'chart'>;
-}
-interface PreviewProps {
-  /** The markdown source to render. */
-  children: string;
-  /** Per-element prop overrides, merged over the defaults. */
-  slotProps?: PreviewSlotProps;
-}
-/** Renders a markdown string with every element mapped to a design-system primitive. */
-declare function Preview({ children, slotProps }: Readonly<PreviewProps>): import("react").JSX.Element;
-//#endregion
+import { n as PreviewProps, r as PreviewSlotProps, t as Preview } from "./index-CPWcFD6T.mjs";
 export { Preview, PreviewProps, PreviewSlotProps };

package/dist/Preview.mjs

@@ -1,2 +1,2 @@
-import { t as Preview } from "./Preview-C1CwRDj5.mjs";
+import { t as Preview } from "./Preview-nvh2sGBQ.mjs";
 export { Preview };

package/dist/index-CPWcFD6T.d.mts

@@ -0,0 +1,53 @@
+import { a as CodeBlockProps } from "./index-BtMTBOcM.mjs";
+import { r as MermaidProps } from "./index-BO0LyUUG.mjs";
+import { TypographyProps } from "@soroush.tech/design-system/Typography";
+import { ViewProps } from "@soroush.tech/design-system/View";
+import { QuoteProps } from "@soroush.tech/design-system/Quote";
+import { CheckboxProps } from "@soroush.tech/design-system/Checkbox";
+import { ImageProps } from "@soroush.tech/design-system/Image";
+import { LinkProps } from "@soroush.tech/design-system/Link";
+import { TableBodyProps, TableCellProps, TableHeadProps, TableProps, TableRowProps } from "@soroush.tech/design-system/Table";
+//#region src/Preview/Preview.d.ts
+/**
+ * Per-element prop overrides, merged over the design-system defaults (the caller's props win).
+ * Keyed by markdown element — e.g. `slotProps={{ p: { color: 'primary' }, h1: { variant: 'h2' } }}`.
+ */
+interface PreviewSlotProps {
+  h1?: TypographyProps;
+  h2?: TypographyProps;
+  h3?: TypographyProps;
+  h4?: TypographyProps;
+  h5?: TypographyProps;
+  h6?: TypographyProps;
+  p?: TypographyProps;
+  strong?: TypographyProps;
+  em?: TypographyProps;
+  li?: TypographyProps;
+  code?: TypographyProps;
+  a?: LinkProps;
+  ul?: ViewProps;
+  ol?: ViewProps;
+  hr?: ViewProps;
+  blockquote?: QuoteProps;
+  img?: ImageProps;
+  th?: TableCellProps;
+  td?: TableCellProps;
+  pre?: CodeBlockProps;
+  input?: CheckboxProps;
+  table?: TableProps;
+  thead?: TableHeadProps;
+  tbody?: TableBodyProps;
+  tr?: TableRowProps;
+  /** Props for a ` ```mermaid ` fence's `Mermaid` renderer — including `diagram` (viewer) props. */
+  mermaid?: Omit<MermaidProps, 'chart'>;
+}
+interface PreviewProps {
+  /** The markdown source to render. */
+  children: string;
+  /** Per-element prop overrides, merged over the defaults. */
+  slotProps?: PreviewSlotProps;
+}
+/** Renders a markdown string with every element mapped to a design-system primitive. */
+declare function Preview({ children, slotProps }: Readonly<PreviewProps>): import("react").JSX.Element;
+//#endregion
+export { PreviewProps as n, PreviewSlotProps as r, Preview as t };

package/dist/index-CxdJ1SgP.d.cts

@@ -0,0 +1,53 @@
+import { a as CodeBlockProps } from "./index-BtMTBOcM.cjs";
+import { r as MermaidProps } from "./index-BO0LyUUG.cjs";
+import { ViewProps } from "@soroush.tech/design-system/View";
+import { QuoteProps } from "@soroush.tech/design-system/Quote";
+import { CheckboxProps } from "@soroush.tech/design-system/Checkbox";
+import { ImageProps } from "@soroush.tech/design-system/Image";
+import { LinkProps } from "@soroush.tech/design-system/Link";
+import { TableBodyProps, TableCellProps, TableHeadProps, TableProps, TableRowProps } from "@soroush.tech/design-system/Table";
+import { TypographyProps } from "@soroush.tech/design-system/Typography";
+//#region src/Preview/Preview.d.ts
+/**
+ * Per-element prop overrides, merged over the design-system defaults (the caller's props win).
+ * Keyed by markdown element — e.g. `slotProps={{ p: { color: 'primary' }, h1: { variant: 'h2' } }}`.
+ */
+interface PreviewSlotProps {
+  h1?: TypographyProps;
+  h2?: TypographyProps;
+  h3?: TypographyProps;
+  h4?: TypographyProps;
+  h5?: TypographyProps;
+  h6?: TypographyProps;
+  p?: TypographyProps;
+  strong?: TypographyProps;
+  em?: TypographyProps;
+  li?: TypographyProps;
+  code?: TypographyProps;
+  a?: LinkProps;
+  ul?: ViewProps;
+  ol?: ViewProps;
+  hr?: ViewProps;
+  blockquote?: QuoteProps;
+  img?: ImageProps;
+  th?: TableCellProps;
+  td?: TableCellProps;
+  pre?: CodeBlockProps;
+  input?: CheckboxProps;
+  table?: TableProps;
+  thead?: TableHeadProps;
+  tbody?: TableBodyProps;
+  tr?: TableRowProps;
+  /** Props for a ` ```mermaid ` fence's `Mermaid` renderer — including `diagram` (viewer) props. */
+  mermaid?: Omit<MermaidProps, 'chart'>;
+}
+interface PreviewProps {
+  /** The markdown source to render. */
+  children: string;
+  /** Per-element prop overrides, merged over the defaults. */
+  slotProps?: PreviewSlotProps;
+}
+/** Renders a markdown string with every element mapped to a design-system primitive. */
+declare function Preview({ children, slotProps }: Readonly<PreviewProps>): import("react").JSX.Element;
+//#endregion
+export { PreviewProps as n, PreviewSlotProps as r, Preview as t };

package/dist/index.cjs

@@ -1,14 +1,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Preview = require("./Preview-BVT70uXa.cjs");
+const require_Preview = require("./Preview-CQ0z3gzx.cjs");
 const require_MarkdownContext = require("./MarkdownContext.cjs");
 const require_Control = require("./Control.cjs");
 const require_Toolbar = require("./Toolbar-Ba3l-oBU.cjs");
 const require_Editor = require("./Editor.cjs");
 const require_CodeBlock = require("./CodeBlock-Cymx1ZAY.cjs");
 const require_Mermaid = require("./Mermaid-DqP2Q0bt.cjs");
+const require_LiveEdit = require("./LiveEdit-DyBGqI3s.cjs");
 exports.CodeBlock = require_CodeBlock.CodeBlock;
 exports.Control = require_Control.Control;
 exports.Editor = require_Editor.Editor;
+exports.LiveEdit = require_LiveEdit.LiveEdit;
 exports.MarkdownContext = require_MarkdownContext.MarkdownContext;
 exports.Mermaid = require_Mermaid.Mermaid;
 exports.Preview = require_Preview.Preview;

package/dist/index.d.cts

@@ -1,9 +1,10 @@
 import { a as CodeBlockProps, i as CodeBlock, n as syntaxDark, r as syntaxLight, t as ThemeSyntax } from "./index-BtMTBOcM.cjs";
 import { Control, ControlProps } from "./Control.cjs";
 import { Editor, EditorProps } from "./Editor.cjs";
-import { i as useMarkdownContext, n as MarkdownContextValue, r as MarkdownSelection, t as MarkdownContext } from "./index-rGZIhUgj.cjs";
 import { n as Mermaid, r as MermaidProps, t as DiagramProps } from "./index-BO0LyUUG.cjs";
-import { Preview, PreviewProps, PreviewSlotProps } from "./Preview.cjs";
+import { n as PreviewProps, r as PreviewSlotProps, t as Preview } from "./index-CxdJ1SgP.cjs";
+import { LiveEdit, LiveEditProps } from "./LiveEdit.cjs";
+import { i as useMarkdownContext, n as MarkdownContextValue, r as MarkdownSelection, t as MarkdownContext } from "./index-rGZIhUgj.cjs";
 import { TablePicker, TablePickerProps, Toolbar } from "./Toolbar.cjs";
 //#region src/index.d.ts
 /**
@@ -31,6 +32,7 @@ interface MermaidThemeVariables {
 declare module '@soroush.tech/design-system/theme' {
   interface ThemeComponents {
     MarkdownEditor?: import('@soroush.tech/design-system/theme').ComponentConfig;
+    MarkdownLiveEdit?: import('@soroush.tech/design-system/theme').ComponentConfig<Record<string, unknown>, 'root' | 'block'>;
     MarkdownPreview?: import('@soroush.tech/design-system/theme').ComponentConfig;
     MarkdownToolbar?: import('@soroush.tech/design-system/theme').ComponentConfig<Record<string, unknown>, 'root' | 'strike' | 'tablePickerCell'>;
     CodeBlock?: import('@soroush.tech/design-system/theme').ComponentConfig<Record<string, unknown>, 'root' | 'surface'>;
@@ -47,4 +49,4 @@ declare module '@soroush.tech/design-system/theme' {
   }
 }
 //#endregion
-export { CodeBlock, CodeBlockProps, Control, ControlProps, DiagramProps, Editor, EditorProps, MarkdownContext, MarkdownContextValue, MarkdownSelection, Mermaid, MermaidProps, MermaidThemeVariables, Preview, PreviewProps, PreviewSlotProps, TablePicker, TablePickerProps, ThemeSyntax, Toolbar, syntaxDark, syntaxLight, useMarkdownContext };
+export { CodeBlock, CodeBlockProps, Control, ControlProps, DiagramProps, Editor, EditorProps, LiveEdit, LiveEditProps, MarkdownContext, MarkdownContextValue, MarkdownSelection, Mermaid, MermaidProps, MermaidThemeVariables, Preview, PreviewProps, PreviewSlotProps, TablePicker, TablePickerProps, ThemeSyntax, Toolbar, syntaxDark, syntaxLight, useMarkdownContext };

package/dist/index.d.mts

@@ -1,9 +1,10 @@
 import { a as CodeBlockProps, i as CodeBlock, n as syntaxDark, r as syntaxLight, t as ThemeSyntax } from "./index-BtMTBOcM.mjs";
 import { Control, ControlProps } from "./Control.mjs";
 import { Editor, EditorProps } from "./Editor.mjs";
-import { i as useMarkdownContext, n as MarkdownContextValue, r as MarkdownSelection, t as MarkdownContext } from "./index-rGZIhUgj.mjs";
 import { n as Mermaid, r as MermaidProps, t as DiagramProps } from "./index-BO0LyUUG.mjs";
-import { Preview, PreviewProps, PreviewSlotProps } from "./Preview.mjs";
+import { n as PreviewProps, r as PreviewSlotProps, t as Preview } from "./index-CPWcFD6T.mjs";
+import { LiveEdit, LiveEditProps } from "./LiveEdit.mjs";
+import { i as useMarkdownContext, n as MarkdownContextValue, r as MarkdownSelection, t as MarkdownContext } from "./index-rGZIhUgj.mjs";
 import { TablePicker, TablePickerProps, Toolbar } from "./Toolbar.mjs";
 //#region src/index.d.ts
 /**
@@ -31,6 +32,7 @@ interface MermaidThemeVariables {
 declare module '@soroush.tech/design-system/theme' {
   interface ThemeComponents {
     MarkdownEditor?: import('@soroush.tech/design-system/theme').ComponentConfig;
+    MarkdownLiveEdit?: import('@soroush.tech/design-system/theme').ComponentConfig<Record<string, unknown>, 'root' | 'block'>;
     MarkdownPreview?: import('@soroush.tech/design-system/theme').ComponentConfig;
     MarkdownToolbar?: import('@soroush.tech/design-system/theme').ComponentConfig<Record<string, unknown>, 'root' | 'strike' | 'tablePickerCell'>;
     CodeBlock?: import('@soroush.tech/design-system/theme').ComponentConfig<Record<string, unknown>, 'root' | 'surface'>;
@@ -47,4 +49,4 @@ declare module '@soroush.tech/design-system/theme' {
   }
 }
 //#endregion
-export { CodeBlock, CodeBlockProps, Control, ControlProps, DiagramProps, Editor, EditorProps, MarkdownContext, MarkdownContextValue, MarkdownSelection, Mermaid, MermaidProps, MermaidThemeVariables, Preview, PreviewProps, PreviewSlotProps, TablePicker, TablePickerProps, ThemeSyntax, Toolbar, syntaxDark, syntaxLight, useMarkdownContext };
+export { CodeBlock, CodeBlockProps, Control, ControlProps, DiagramProps, Editor, EditorProps, LiveEdit, LiveEditProps, MarkdownContext, MarkdownContextValue, MarkdownSelection, Mermaid, MermaidProps, MermaidThemeVariables, Preview, PreviewProps, PreviewSlotProps, TablePicker, TablePickerProps, ThemeSyntax, Toolbar, syntaxDark, syntaxLight, useMarkdownContext };

package/dist/index.mjs

@@ -4,5 +4,6 @@ import { n as TablePicker, t as Toolbar } from "./Toolbar-C0SNI-JK.mjs";
 import { Editor } from "./Editor.mjs";
 import { n as syntaxLight, r as CodeBlock, t as syntaxDark } from "./CodeBlock-CVlrvVPP.mjs";
 import { t as Mermaid } from "./Mermaid-BclI9A7e.mjs";
-import { t as Preview } from "./Preview-C1CwRDj5.mjs";
-export { CodeBlock, Control, Editor, MarkdownContext, Mermaid, Preview, TablePicker, Toolbar, syntaxDark, syntaxLight, useMarkdownContext };
+import { t as Preview } from "./Preview-nvh2sGBQ.mjs";
+import { t as LiveEdit } from "./LiveEdit-KDKu7Yvn.mjs";
+export { CodeBlock, Control, Editor, LiveEdit, MarkdownContext, Mermaid, Preview, TablePicker, Toolbar, syntaxDark, syntaxLight, useMarkdownContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soroush.tech/markdown",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "description": "Headless, composable markdown editor + renderer for @soroush.tech/design-system — Control, Toolbar, Editor, and Preview built on react-markdown, remark-gfm, and rehype-highlight.",
   "keywords": [
     "markdown",
@@ -58,12 +58,16 @@
     "mermaid": "^11.4.0",
     "react-markdown": "^10.1.0",
     "rehype-highlight": "^7.0.2",
-    "remark-gfm": "^4.0.1"
+    "rehype-parse": "^9.0.1",
+    "rehype-remark": "^10.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-stringify": "^11.0.0",
+    "unified": "^11.0.5"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@soroush.tech/design-system": "^1.0.0"
+    "@soroush.tech/design-system": "^1.1.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.5.0",
@@ -86,9 +90,9 @@
     "tsdown": "^0.22.7",
     "typescript": "~6.0.3",
     "vitest": "^4.1.10",
-    "@soroush.tech/hooks": "0.1.0",
+    "@soroush.tech/design-system": "1.1.0",
     "@soroush.tech/eslint-config": "0.0.0",
-    "@soroush.tech/design-system": "1.0.0"
+    "@soroush.tech/hooks": "0.1.0"
   },
   "scripts": {
     "build": "tsdown",