@soroush.tech/markdown 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Masoud Soroush <https://soroush.tech>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,179 @@
+[![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)
+[![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)
+
+## A **headless markdown editor and preview**.
+
+Compose a toolbar, a source editor, and a live preview however your UI needs — and every element is styled by your theme. The renderer works standalone too, turning any markdown string into themed components, with support for tables, task lists, strikethrough, autolinks, syntax-highlighted code, and mermaid diagrams.
+
+![The Preview renderer output — a heading, a formatted paragraph, a task list, a blockquote, a code block, a table, and a mermaid sequence diagram, all as themed components](https://raw.githubusercontent.com/soroush-tech/core/main/packages/markdown/src/assets/demo.png)
+
+## Why headless?
+
+Most markdown editors hand you a fixed widget — a bordered box with a toolbar bolted on top and an Edit/Preview toggle you can't move. This one gives you the **pieces** instead:
+
+- **You own the layout.** Put the preview beside the editor, below it, in a modal, or drop it entirely — the parts don't care.
+- **You own the state.** The value is yours (`useState`, a form, a store); the editor just reads and writes it.
+- **It looks like your app.** Output is themed components — `Typography`, `Link`, `Table`, and its own `CodeBlock` — not unstyled HTML, so it inherits your theme with zero extra CSS.
+
+## Features
+
+- **GitHub-Flavored Markdown** — tables, task lists, strikethrough, and autolinks.
+- **Syntax-highlighted code** — fenced blocks are highlighted automatically; unknown languages degrade gracefully.
+- **Mermaid diagrams** — a ` ```mermaid ` fence renders as a themed diagram with built-in zoom and pan controls, loaded lazily on the client and falling back to the source until it does.
+- **A real editing surface** — Tab-to-indent, selection tracking, caret restoration, formatting buttons, heading and code-language selects, a hover-grid table picker, and a diagram picker that inserts starter templates for 23 mermaid diagram types.
+- **Composable parts** — `Control`, `Toolbar`, `Editor`, and `Preview`, coordinated through React context.
+- **Themeable to the slot** — restyle the editor, toolbar, and preview through your theme, no forking required.
+- **Typed and SSR-safe** — first-class TypeScript, 100% test coverage, no browser globals at module scope.
+
+## Install
+
+```sh
+# npm
+npm install @soroush.tech/markdown @soroush.tech/design-system
+```
+
+```sh
+# pnpm
+pnpm add @soroush.tech/markdown @soroush.tech/design-system
+```
+
+```sh
+# yarn
+yarn add @soroush.tech/markdown @soroush.tech/design-system
+```
+
+> **Requires the design system.** This package renders through `@soroush.tech/design-system`, so its components must live inside that library's `ThemeProvider`. If you aren't already using the design system, [start there first](https://www.npmjs.com/package/@soroush.tech/design-system).
+
+## Quick start
+
+Wrap your app in the design system's `ThemeProvider` once, then render markdown anywhere inside it:
+
+```tsx
+import { ThemeProvider } from '@soroush.tech/design-system/theme'
+import { Preview } from '@soroush.tech/markdown'
+
+export function App() {
+  return (
+    <ThemeProvider>
+      <Preview>
+        {
+          '# Hello\n\nRendered through your **theme** — tables, `code`, and [links](https://soroush.tech) included.'
+        }
+      </Preview>
+    </ThemeProvider>
+  )
+}
+```
+
+That's the whole renderer. To let people _write_ markdown, add the editing parts.
+
+## Editor
+
+The `Editor` works standalone via `value`/`onChange` — no `Control` needed:
+
+```tsx
+import { useState } from 'react'
+import { Editor } from '@soroush.tech/markdown'
+import { ThemeProvider } from '@soroush.tech/design-system/theme'
+
+function MarkdownField() {
+  const [value, setValue] = useState('# Start writing\n\nJust the source editor — no preview.')
+
+  return (
+    <ThemeProvider>
+      <Editor value={value} onChange={setValue} />
+    </ThemeProvider>
+  )
+}
+```
+
+## A full editor and preview in a split screen
+
+Everything inside `Control` shares one value and selection, so you arrange the panes freely. Here's a toolbar above a side-by-side source and live preview:
+
+```tsx
+import { useState } from 'react'
+import { Control, Toolbar, Editor, Preview } from '@soroush.tech/markdown'
+import { Flex } from '@soroush.tech/design-system/Flex'
+
+function MarkdownField() {
+  const [value, setValue] = useState(
+    '# Start writing\n\nType on the left, watch it render on the right. →'
+  )
+
+  return (
+    <Control value={value} onChange={setValue}>
+      <Toolbar />
+      <Flex gap={4}>
+        <Editor />
+        <Preview>{value}</Preview>
+      </Flex>
+    </Control>
+  )
+}
+```
+
+There is intentionally **no Edit·Split·Preview switch** — which panes to show, and when, is your call.
+
+## The parts
+
+| Part      | Role                                                                              |
+| --------- | --------------------------------------------------------------------------------- |
+| `Control` | Headless provider — owns the `value`/selection state. Takes `value` + `onChange`. |
+| `Toolbar` | Formatting buttons, heading/code-language selects, and the table picker.          |
+| `Editor`  | The source `<textarea>` — Tab-to-indent, selection, caret restore.                |
+| `Preview` | Renders a markdown string (its child) to themed components.                       |
+
+`Toolbar` and `Editor` must be rendered inside `Control`; `Preview` works anywhere. Import each directly from the package — there is no `Markdown.*` namespace. Full prop references live in the [source on GitHub](https://github.com/soroush-tech/core/tree/main/packages/markdown/src).
+
+## Customizing the look
+
+Everything is styled through the design system's theme, and there are two levels to reach for — a shared theme for the whole look, and per-component slots for the markdown parts specifically.
+
+### Customize the theme — restyle everything
+
+`Preview` renders design-system components that read theme tokens, so your theme already governs how markdown looks. Build one with `createTheme` — palette, spacing, type scale, radii — and pass it to `ThemeProvider`; the markdown output changes along with the rest of your UI, no markdown-specific setup. See the [design system's theming guide](https://www.npmjs.com/package/@soroush.tech/design-system) for the full token set.
+
+```tsx
+import { ThemeProvider, createTheme, baseTheme } from '@soroush.tech/design-system/theme'
+
+const theme = createTheme(baseTheme, {
+  palette: {
+    primary: {
+      main: '#7C3AED',
+      light: '#A78BFA',
+      dark: '#5B21B6',
+      contrastText: '#FFFFFF',
+    },
+  },
+})
+
+// <ThemeProvider theme={theme}> … </ThemeProvider>
+```
+
+### Customize the components — target the markdown parts
+
+For tweaks specific to the editor, toolbar, or preview, this package registers three themeable slots under `theme.components` — `MarkdownEditor`, `MarkdownPreview`, and `MarkdownToolbar`:
+
+```tsx
+const theme = createTheme(baseTheme, {
+  components: {
+    MarkdownPreview: { styleOverrides: { root: { maxWidth: '72ch' } } },
+    MarkdownToolbar: { styleOverrides: { root: { gap: 4 } } },
+  },
+})
+```
+
+The overrides are fully typed — importing the package registers the slots on the theme automatically.
+
+## Building your own parts
+
+Need a custom control or a word count? `useMarkdownContext()` exposes the same value, selection, and `dispatch` the built-in parts use — call it from any component inside `Control`.
+
+## License
+
+[MIT](./LICENSE) © [Soroush Tech](https://soroush.tech)

package/dist/CodeBlock-CVlrvVPP.mjs

@@ -0,0 +1,159 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@soroush.tech/design-system/Button";
+import { Icon } from "@soroush.tech/design-system/Icon";
+import { styled } from "@soroush.tech/design-system";
+import { View } from "@soroush.tech/design-system/View";
+//#region ../hooks/src/useCopyToClipboard.ts
+/** How long the "copied" confirmation stays true before reverting, in ms. */
+const COPIED_RESET_MS = 2e3;
+/**
+* Copy-to-clipboard with a transient `copied` flag. Guards the unavailable
+* clipboard API and rejected writes so the caller never throws or gets stuck.
+*/
+function useCopyToClipboard(resetMs = COPIED_RESET_MS) {
+	const [copied, setCopied] = useState(false);
+	const timerRef = useRef(null);
+	useEffect(() => () => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+	}, []);
+	return {
+		copied,
+		copy: useCallback((text) => {
+			if (!navigator.clipboard?.writeText) return;
+			navigator.clipboard.writeText(text).then(() => {
+				if (timerRef.current) clearTimeout(timerRef.current);
+				setCopied(true);
+				timerRef.current = setTimeout(() => {
+					setCopied(false);
+					timerRef.current = null;
+				}, resetMs);
+			}).catch(() => {
+				console.error("Clipboard write failed; leave `copied` in its idle state.");
+			});
+		}, [resetMs])
+	};
+}
+//#endregion
+//#region src/CodeBlock/CodeBlock.tsx
+const syntaxStyles = ({ theme }) => ({
+	color: theme.syntax.base,
+	fontFamily: theme.syntax.font,
+	"& .hljs-comment, & .hljs-quote, & .hljs-doctag, & .hljs-meta.prompt_": {
+		color: theme.syntax.comment,
+		fontStyle: "italic"
+	},
+	"& .hljs-keyword, & .hljs-built_in, & .hljs-literal, & .hljs-selector-tag, & .hljs-selector-pseudo, & .hljs-selector-attr": { color: theme.syntax.keyword },
+	"& .hljs-type, & .hljs-title.class_": { color: theme.syntax.type },
+	"& .hljs-string, & .hljs-regexp, & .hljs-char, & .hljs-meta .hljs-string, & .hljs-addition": { color: theme.syntax.string },
+	"& .hljs-number, & .hljs-symbol, & .hljs-bullet, & .hljs-link": { color: theme.syntax.number },
+	"& .hljs-variable.constant_, & .hljs-property": { color: theme.syntax.constant },
+	"& .hljs-title, & .hljs-section, & .hljs-attr, & .hljs-attribute, & .hljs-selector-id": { color: theme.syntax.title },
+	"& .hljs-tag, & .hljs-name, & .hljs-meta, & .hljs-variable, & .hljs-selector-class, & .hljs-deletion": { color: theme.syntax.tag },
+	"& .hljs-emphasis": { fontStyle: "italic" },
+	"& .hljs-strong": { fontWeight: "bold" }
+});
+const CodeSurface = styled(View, {
+	name: "CodeBlock",
+	slot: "surface",
+	label: "CodeSurface"
+})(syntaxStyles);
+const Wrapper = styled(View, {
+	name: "CodeBlock",
+	label: "CodeBlock"
+})({
+	display: "grid",
+	gridTemplateColumns: "minmax(0, 1fr)",
+	"& .code-copy": {
+		opacity: 0,
+		transition: "opacity 120ms ease"
+	},
+	"&:hover .code-copy, &:focus-within .code-copy": { opacity: 1 },
+	"@media (hover: none)": { "& .code-copy": { opacity: 1 } }
+});
+/**
+* Fenced-code block: a horizontally scrollable, syntax-highlighted surface with a
+* copy-to-clipboard button that sticks to the top-right while the block is in view.
+*/
+function CodeBlock({ children, ...rest }) {
+	const surfaceRef = useRef(null);
+	const { copied, copy } = useCopyToClipboard();
+	const handleCopy = () => {
+		const raw = surfaceRef.current.textContent;
+		let end = raw.length;
+		while (end > 0 && raw[end - 1] === "\n") end--;
+		const text = raw.slice(0, end);
+		if (text) copy(text);
+	};
+	return /* @__PURE__ */ jsxs(Wrapper, {
+		my: 2,
+		position: "relative",
+		...rest,
+		children: [/* @__PURE__ */ jsx(View, {
+			position: "absolute",
+			top: "8px",
+			right: "8px",
+			zIndex: 1,
+			bg: "paper",
+			borderRadius: "sm",
+			className: "code-copy",
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outlined",
+				color: "default",
+				size: "sm",
+				borderRadius: "sm",
+				onClick: handleCopy,
+				"aria-label": copied ? "Copied" : "Copy code",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: copied ? "check" : "content_copy",
+					color: copied ? "success" : "primary",
+					size: "1.1rem"
+				})
+			})
+		}), /* @__PURE__ */ jsx(CodeSurface, {
+			as: "pre",
+			tabIndex: 0,
+			ref: surfaceRef,
+			bg: "terminal",
+			p: 3,
+			borderRadius: "md",
+			borderColor: "light",
+			borderWidth: "thin",
+			maxWidth: "100%",
+			overflow: "auto",
+			children
+		})]
+	});
+}
+//#endregion
+//#region src/CodeBlock/CodeBlock.data.ts
+const font = "'JetBrains Mono Variable', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace";
+/** Matched to the JetBrains "Islands Dark" editor scheme. */
+const syntaxDark = {
+	base: "#BBBBBB",
+	keyword: "#CF8E6D",
+	string: "#6AAB73",
+	number: "#2AACB8",
+	title: "#6BA9FA",
+	constant: "#C77DBB",
+	type: "#2AACB8",
+	comment: "#919191",
+	tag: "#D5B778",
+	font
+};
+/** Matched to the JetBrains "Islands Light" editor scheme. */
+const syntaxLight = {
+	base: "#080808",
+	keyword: "#0033B3",
+	string: "#067D17",
+	number: "#1750EB",
+	title: "#00627A",
+	constant: "#871094",
+	type: "#007E8A",
+	comment: "#8C8C8C",
+	tag: "#008077",
+	font
+};
+//#endregion
+export { syntaxLight as n, CodeBlock as r, syntaxDark as t };

package/dist/CodeBlock-Cymx1ZAY.cjs

@@ -0,0 +1,176 @@
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_design_system_Button = require("@soroush.tech/design-system/Button");
+let _soroush_tech_design_system_Icon = require("@soroush.tech/design-system/Icon");
+let _soroush_tech_design_system = require("@soroush.tech/design-system");
+let _soroush_tech_design_system_View = require("@soroush.tech/design-system/View");
+//#region ../hooks/src/useCopyToClipboard.ts
+/** How long the "copied" confirmation stays true before reverting, in ms. */
+const COPIED_RESET_MS = 2e3;
+/**
+* Copy-to-clipboard with a transient `copied` flag. Guards the unavailable
+* clipboard API and rejected writes so the caller never throws or gets stuck.
+*/
+function useCopyToClipboard(resetMs = COPIED_RESET_MS) {
+	const [copied, setCopied] = (0, react.useState)(false);
+	const timerRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => () => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+	}, []);
+	return {
+		copied,
+		copy: (0, react.useCallback)((text) => {
+			if (!navigator.clipboard?.writeText) return;
+			navigator.clipboard.writeText(text).then(() => {
+				if (timerRef.current) clearTimeout(timerRef.current);
+				setCopied(true);
+				timerRef.current = setTimeout(() => {
+					setCopied(false);
+					timerRef.current = null;
+				}, resetMs);
+			}).catch(() => {
+				console.error("Clipboard write failed; leave `copied` in its idle state.");
+			});
+		}, [resetMs])
+	};
+}
+//#endregion
+//#region src/CodeBlock/CodeBlock.tsx
+const syntaxStyles = ({ theme }) => ({
+	color: theme.syntax.base,
+	fontFamily: theme.syntax.font,
+	"& .hljs-comment, & .hljs-quote, & .hljs-doctag, & .hljs-meta.prompt_": {
+		color: theme.syntax.comment,
+		fontStyle: "italic"
+	},
+	"& .hljs-keyword, & .hljs-built_in, & .hljs-literal, & .hljs-selector-tag, & .hljs-selector-pseudo, & .hljs-selector-attr": { color: theme.syntax.keyword },
+	"& .hljs-type, & .hljs-title.class_": { color: theme.syntax.type },
+	"& .hljs-string, & .hljs-regexp, & .hljs-char, & .hljs-meta .hljs-string, & .hljs-addition": { color: theme.syntax.string },
+	"& .hljs-number, & .hljs-symbol, & .hljs-bullet, & .hljs-link": { color: theme.syntax.number },
+	"& .hljs-variable.constant_, & .hljs-property": { color: theme.syntax.constant },
+	"& .hljs-title, & .hljs-section, & .hljs-attr, & .hljs-attribute, & .hljs-selector-id": { color: theme.syntax.title },
+	"& .hljs-tag, & .hljs-name, & .hljs-meta, & .hljs-variable, & .hljs-selector-class, & .hljs-deletion": { color: theme.syntax.tag },
+	"& .hljs-emphasis": { fontStyle: "italic" },
+	"& .hljs-strong": { fontWeight: "bold" }
+});
+const CodeSurface = (0, _soroush_tech_design_system.styled)(_soroush_tech_design_system_View.View, {
+	name: "CodeBlock",
+	slot: "surface",
+	label: "CodeSurface"
+})(syntaxStyles);
+const Wrapper = (0, _soroush_tech_design_system.styled)(_soroush_tech_design_system_View.View, {
+	name: "CodeBlock",
+	label: "CodeBlock"
+})({
+	display: "grid",
+	gridTemplateColumns: "minmax(0, 1fr)",
+	"& .code-copy": {
+		opacity: 0,
+		transition: "opacity 120ms ease"
+	},
+	"&:hover .code-copy, &:focus-within .code-copy": { opacity: 1 },
+	"@media (hover: none)": { "& .code-copy": { opacity: 1 } }
+});
+/**
+* Fenced-code block: a horizontally scrollable, syntax-highlighted surface with a
+* copy-to-clipboard button that sticks to the top-right while the block is in view.
+*/
+function CodeBlock({ children, ...rest }) {
+	const surfaceRef = (0, react.useRef)(null);
+	const { copied, copy } = useCopyToClipboard();
+	const handleCopy = () => {
+		const raw = surfaceRef.current.textContent;
+		let end = raw.length;
+		while (end > 0 && raw[end - 1] === "\n") end--;
+		const text = raw.slice(0, end);
+		if (text) copy(text);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, {
+		my: 2,
+		position: "relative",
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_View.View, {
+			position: "absolute",
+			top: "8px",
+			right: "8px",
+			zIndex: 1,
+			bg: "paper",
+			borderRadius: "sm",
+			className: "code-copy",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Button.Button, {
+				type: "button",
+				variant: "outlined",
+				color: "default",
+				size: "sm",
+				borderRadius: "sm",
+				onClick: handleCopy,
+				"aria-label": copied ? "Copied" : "Copy code",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_soroush_tech_design_system_Icon.Icon, {
+					name: copied ? "check" : "content_copy",
+					color: copied ? "success" : "primary",
+					size: "1.1rem"
+				})
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeSurface, {
+			as: "pre",
+			tabIndex: 0,
+			ref: surfaceRef,
+			bg: "terminal",
+			p: 3,
+			borderRadius: "md",
+			borderColor: "light",
+			borderWidth: "thin",
+			maxWidth: "100%",
+			overflow: "auto",
+			children
+		})]
+	});
+}
+//#endregion
+//#region src/CodeBlock/CodeBlock.data.ts
+const font = "'JetBrains Mono Variable', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace";
+/** Matched to the JetBrains "Islands Dark" editor scheme. */
+const syntaxDark = {
+	base: "#BBBBBB",
+	keyword: "#CF8E6D",
+	string: "#6AAB73",
+	number: "#2AACB8",
+	title: "#6BA9FA",
+	constant: "#C77DBB",
+	type: "#2AACB8",
+	comment: "#919191",
+	tag: "#D5B778",
+	font
+};
+/** Matched to the JetBrains "Islands Light" editor scheme. */
+const syntaxLight = {
+	base: "#080808",
+	keyword: "#0033B3",
+	string: "#067D17",
+	number: "#1750EB",
+	title: "#00627A",
+	constant: "#871094",
+	type: "#007E8A",
+	comment: "#8C8C8C",
+	tag: "#008077",
+	font
+};
+//#endregion
+Object.defineProperty(exports, "CodeBlock", {
+	enumerable: true,
+	get: function() {
+		return CodeBlock;
+	}
+});
+Object.defineProperty(exports, "syntaxDark", {
+	enumerable: true,
+	get: function() {
+		return syntaxDark;
+	}
+});
+Object.defineProperty(exports, "syntaxLight", {
+	enumerable: true,
+	get: function() {
+		return syntaxLight;
+	}
+});

package/dist/CodeBlock.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_CodeBlock = require("./CodeBlock-Cymx1ZAY.cjs");
+exports.CodeBlock = require_CodeBlock.CodeBlock;
+exports.syntaxDark = require_CodeBlock.syntaxDark;
+exports.syntaxLight = require_CodeBlock.syntaxLight;

package/dist/CodeBlock.d.cts

@@ -0,0 +1,2 @@
+import { a as CodeBlockProps, i as CodeBlock, n as syntaxDark, r as syntaxLight, t as ThemeSyntax } from "./index-BtMTBOcM.cjs";
+export { CodeBlock, CodeBlockProps, ThemeSyntax, syntaxDark, syntaxLight };

package/dist/CodeBlock.d.mts

@@ -0,0 +1,2 @@
+import { a as CodeBlockProps, i as CodeBlock, n as syntaxDark, r as syntaxLight, t as ThemeSyntax } from "./index-BtMTBOcM.mjs";
+export { CodeBlock, CodeBlockProps, ThemeSyntax, syntaxDark, syntaxLight };

package/dist/CodeBlock.mjs

@@ -0,0 +1,2 @@
+import { n as syntaxLight, r as CodeBlock, t as syntaxDark } from "./CodeBlock-CVlrvVPP.mjs";
+export { CodeBlock, syntaxDark, syntaxLight };

package/dist/Control.cjs

@@ -0,0 +1,61 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_applyAction = require("./applyAction-BDkgYhOd.cjs");
+const require_MarkdownContext = require("./MarkdownContext.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Control/Control.tsx
+/**
+* The headless root of the Markdown compound: owns the shared value/selection state and exposes
+* it (plus a `dispatch` for toolbar actions) via context. It renders no UI of its own — the
+* consumer arranges the parts and decides which panes to show.
+*/
+function Control({ value, onChange, children }) {
+	const lastSelectionRef = (0, react.useRef)(null);
+	const pendingSelectionRef = (0, react.useRef)(null);
+	const context = (0, react.useMemo)(() => {
+		const dispatch = (action) => {
+			const { start, end } = lastSelectionRef.current ?? {
+				start: value.length,
+				end: value.length
+			};
+			const next = require_applyAction.applyAction(action, {
+				value,
+				selectionStart: start,
+				selectionEnd: end
+			});
+			const selection = {
+				start: next.selectionStart,
+				end: next.selectionEnd
+			};
+			pendingSelectionRef.current = selection;
+			lastSelectionRef.current = selection;
+			onChange(next.value);
+		};
+		const rememberSelection = (selection) => {
+			lastSelectionRef.current = selection;
+		};
+		const queueSelection = (selection) => {
+			pendingSelectionRef.current = selection;
+			lastSelectionRef.current = selection;
+		};
+		const takeQueuedSelection = () => {
+			const selection = pendingSelectionRef.current;
+			pendingSelectionRef.current = null;
+			return selection;
+		};
+		return {
+			value,
+			onChange,
+			dispatch,
+			rememberSelection,
+			queueSelection,
+			takeQueuedSelection
+		};
+	}, [value, onChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MarkdownContext.MarkdownContext.Provider, {
+		value: context,
+		children
+	});
+}
+//#endregion
+exports.Control = Control;

package/dist/Control.d.cts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+//#region src/Control/Control.d.ts
+interface ControlProps {
+  /** Current markdown source (controlled). */
+  value: string;
+  /** Called with the next source on edit or a toolbar action. */
+  onChange: (value: string) => void;
+  /** The composed parts — `Markdown.Toolbar`, `Markdown.Editor`, `Markdown.Preview`, … */
+  children: ReactNode;
+}
+/**
+ * The headless root of the Markdown compound: owns the shared value/selection state and exposes
+ * it (plus a `dispatch` for toolbar actions) via context. It renders no UI of its own — the
+ * consumer arranges the parts and decides which panes to show.
+ */
+declare function Control({ value, onChange, children }: Readonly<ControlProps>): import("react").JSX.Element;
+//#endregion
+export { Control, ControlProps };

package/dist/Control.d.mts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+//#region src/Control/Control.d.ts
+interface ControlProps {
+  /** Current markdown source (controlled). */
+  value: string;
+  /** Called with the next source on edit or a toolbar action. */
+  onChange: (value: string) => void;
+  /** The composed parts — `Markdown.Toolbar`, `Markdown.Editor`, `Markdown.Preview`, … */
+  children: ReactNode;
+}
+/**
+ * The headless root of the Markdown compound: owns the shared value/selection state and exposes
+ * it (plus a `dispatch` for toolbar actions) via context. It renders no UI of its own — the
+ * consumer arranges the parts and decides which panes to show.
+ */
+declare function Control({ value, onChange, children }: Readonly<ControlProps>): import("react").JSX.Element;
+//#endregion
+export { Control, ControlProps };