@soroush.tech/markdown 1.2.1 → 1.2.2

package/README.md

@@ -7,27 +7,27 @@
 
 ## 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.
+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)
+![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:
+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 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.
+- **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.
+- **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
 
@@ -61,7 +61,7 @@ export function App() {
     <ThemeProvider>
       <Preview>
         {
-          '# Hello\n\nRendered through your **theme** — tables, `code`, and [links](https://soroush.tech) included.'
+          '# Hello\n\nRendered through your **theme** - tables, `code`, and [links](https://soroush.tech) included.'
         }
       </Preview>
     </ThemeProvider>
@@ -73,7 +73,7 @@ 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:
+The `Editor` works standalone via `value`/`onChange` - no `Control` needed:
 
 ```tsx
 import { useState } from 'react'
@@ -81,7 +81,7 @@ 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.')
+  const [value, setValue] = useState('# Start writing\n\nJust the source editor - no preview.')
 
   return (
     <ThemeProvider>
@@ -117,26 +117,26 @@ function MarkdownField() {
 }
 ```
 
-There is intentionally **no Edit·Split·Preview switch** — which panes to show, and when, is your call.
+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`. |
+| `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.                |
+| `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).
+`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.
+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
+### 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.
+`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'
@@ -152,12 +152,12 @@ const theme = createTheme(baseTheme, {
   },
 })
 
-// <ThemeProvider theme={theme}> … </ThemeProvider>
+// <ThemeProvider theme={theme}> ... </ThemeProvider>
 ```
 
-### Customize the components — target the markdown parts
+### 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`:
+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, {
@@ -168,11 +168,11 @@ const theme = createTheme(baseTheme, {
 })
 ```
 
-The overrides are fully typed — importing the package registers the slots on the theme automatically.
+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`.
+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
 

package/dist/CodeBlock.d.cts

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

package/dist/CodeBlock.d.mts

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

package/dist/Control.cjs

@@ -6,7 +6,7 @@ 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
+* 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 }) {

package/dist/Control.d.cts

@@ -5,12 +5,12 @@ interface ControlProps {
   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`, … */
+  /** 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
+ * 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;

package/dist/Control.d.mts

@@ -5,12 +5,12 @@ interface ControlProps {
   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`, … */
+  /** 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
+ * 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;

package/dist/Control.mjs

@@ -5,7 +5,7 @@ import { jsx } from "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
+* 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 }) {

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, maxRows, 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");

package/dist/Editor.d.cts

@@ -1,9 +1,9 @@
 import { TextInputColor, TextInputSize, TextInputTextColor, TextInputVariant } from "@soroush.tech/design-system/TextInput";
 //#region src/Editor/Editor.d.ts
 interface EditorProps {
-  /** Standalone source value — used when rendered outside a `Control`. Ignored inside one. */
+  /** 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. */
+  /** Standalone change handler - used when rendered outside a `Control`. Ignored inside one. */
   onChange?: (value: string) => void;
   /** Placeholder shown while the source is empty. */
   placeholder?: string;
@@ -11,18 +11,18 @@ interface EditorProps {
   minRows?: number;
   /**
    * Maximum rows before the auto-grow textarea stops growing and scrolls
-   * internally — keeps its border box visible inside height-bound panes.
+   * internally - keeps its border box visible inside height-bound panes.
    */
   maxRows?: number;
-  /** Visual style of the source input — forwarded to `TextInput`. Default: `'default'`. */
+  /** Visual style of the source input - forwarded to `TextInput`. Default: `'default'`. */
   variant?: TextInputVariant;
-  /** Focus/active border colour — forwarded to `TextInput`. */
+  /** Focus/active border colour - forwarded to `TextInput`. */
   color?: TextInputColor;
-  /** Text colour of the typed source — forwarded to `TextInput`. Default: `'initial'`. */
+  /** Text colour of the typed source - forwarded to `TextInput`. Default: `'initial'`. */
   textColor?: TextInputTextColor;
-  /** Padding/font-size density — forwarded to `TextInput`. */
+  /** Padding/font-size density - forwarded to `TextInput`. */
   size?: TextInputSize;
-  /** Native `name` on the textarea — set it for native `<form>` submission / FormData. */
+  /** Native `name` on the textarea - set it for native `<form>` submission / FormData. */
   name?: string;
   /** `id` for label association. Falls back to the enclosing `FormControl`. */
   id?: string;

package/dist/Editor.d.mts

@@ -1,9 +1,9 @@
 import { TextInputColor, TextInputSize, TextInputTextColor, TextInputVariant } from "@soroush.tech/design-system/TextInput";
 //#region src/Editor/Editor.d.ts
 interface EditorProps {
-  /** Standalone source value — used when rendered outside a `Control`. Ignored inside one. */
+  /** 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. */
+  /** Standalone change handler - used when rendered outside a `Control`. Ignored inside one. */
   onChange?: (value: string) => void;
   /** Placeholder shown while the source is empty. */
   placeholder?: string;
@@ -11,18 +11,18 @@ interface EditorProps {
   minRows?: number;
   /**
    * Maximum rows before the auto-grow textarea stops growing and scrolls
-   * internally — keeps its border box visible inside height-bound panes.
+   * internally - keeps its border box visible inside height-bound panes.
    */
   maxRows?: number;
-  /** Visual style of the source input — forwarded to `TextInput`. Default: `'default'`. */
+  /** Visual style of the source input - forwarded to `TextInput`. Default: `'default'`. */
   variant?: TextInputVariant;
-  /** Focus/active border colour — forwarded to `TextInput`. */
+  /** Focus/active border colour - forwarded to `TextInput`. */
   color?: TextInputColor;
-  /** Text colour of the typed source — forwarded to `TextInput`. Default: `'initial'`. */
+  /** Text colour of the typed source - forwarded to `TextInput`. Default: `'initial'`. */
   textColor?: TextInputTextColor;
-  /** Padding/font-size density — forwarded to `TextInput`. */
+  /** Padding/font-size density - forwarded to `TextInput`. */
   size?: TextInputSize;
-  /** Native `name` on the textarea — set it for native `<form>` submission / FormData. */
+  /** Native `name` on the textarea - set it for native `<form>` submission / FormData. */
   name?: string;
   /** `id` for label association. Falls back to the enclosing `FormControl`. */
   id?: string;

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, maxRows, 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");

package/dist/{LiveEdit-KDKu7Yvn.mjs → LiveEdit-CaMZLJCs.mjs}

@@ -1,5 +1,5 @@
 import { MarkdownContext } from "./MarkdownContext.mjs";
-import { t as Preview } from "./Preview-nvh2sGBQ.mjs";
+import { t as Preview } from "./Preview-BFyaPHjw.mjs";
 import { useContext, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { styled } from "@soroush.tech/design-system";
@@ -17,7 +17,7 @@ const processor = unified().use(rehypeParse, { fragment: true }).use(rehypeRemar
 });
 /**
 * 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) —
+* 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) {
@@ -33,7 +33,7 @@ const FENCE = /^[ \t]{0,3}(`{3,}|~{3,})/;
 * 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
+* 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.
@@ -47,7 +47,7 @@ const nextFence = (line, fence) => {
 };
 /**
 * Splits markdown into top-level blocks separated by blank lines, keeping
-* fenced code blocks whole — blank lines inside a ``` / ~~~ fence never split.
+* 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.
 */
@@ -118,7 +118,7 @@ const toBlocks = (value) => {
 	}];
 };
 /**
-* One contentEditable block. The preview element is created once per mount —
+* 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.
@@ -147,15 +147,15 @@ function EditableBlock({ index, source, isEditable, placeholder, slotProps, onEd
 }
 /**
 * A preview you write on directly: the document renders exactly like
-* `Preview`, split into blocks, and every block is `contentEditable` — no
+* `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 —
+* 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 }) {
+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;

package/dist/{LiveEdit-DmM35H99.cjs → LiveEdit-CbRkmd43.cjs}

@@ -1,4 +1,4 @@
-const require_Preview = require("./Preview-YtIipm0z.cjs");
+const require_Preview = require("./Preview-CnMWUtU2.cjs");
 const require_MarkdownContext = require("./MarkdownContext.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -20,7 +20,7 @@ const processor = (0, require("unified").unified)().use(rehype_parse.default, {
 });
 /**
 * 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) —
+* 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) {
@@ -36,7 +36,7 @@ const FENCE = /^[ \t]{0,3}(`{3,}|~{3,})/;
 * 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
+* 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.
@@ -50,7 +50,7 @@ const nextFence = (line, fence) => {
 };
 /**
 * Splits markdown into top-level blocks separated by blank lines, keeping
-* fenced code blocks whole — blank lines inside a ``` / ~~~ fence never split.
+* 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.
 */
@@ -121,7 +121,7 @@ const toBlocks = (value) => {
 	}];
 };
 /**
-* One contentEditable block. The preview element is created once per mount —
+* 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.
@@ -150,15 +150,15 @@ function EditableBlock({ index, source, isEditable, placeholder, slotProps, onEd
 }
 /**
 * A preview you write on directly: the document renders exactly like
-* `Preview`, split into blocks, and every block is `contentEditable` — no
+* `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 —
+* 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 }) {
+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;

package/dist/LiveEdit.cjs

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

package/dist/LiveEdit.d.cts

@@ -1,9 +1,9 @@
-import { r as PreviewSlotProps } from "./index-CxdJ1SgP.cjs";
+import { r as PreviewSlotProps } from "./index-TT9-Qjsh.cjs";
 //#region src/LiveEdit/LiveEdit.d.ts
 interface LiveEditProps {
-  /** Standalone source value — used when rendered outside a `Control`. Ignored inside one. */
+  /** 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. */
+  /** 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;
@@ -12,11 +12,11 @@ interface LiveEditProps {
 }
 /**
  * A preview you write on directly: the document renders exactly like
- * `Preview`, split into blocks, and every block is `contentEditable` — no
+ * `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 —
+ * 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.
  */

package/dist/LiveEdit.d.mts

@@ -1,9 +1,9 @@
-import { r as PreviewSlotProps } from "./index-CPWcFD6T.mjs";
+import { r as PreviewSlotProps } from "./index-CBKWWR5Q.mjs";
 //#region src/LiveEdit/LiveEdit.d.ts
 interface LiveEditProps {
-  /** Standalone source value — used when rendered outside a `Control`. Ignored inside one. */
+  /** 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. */
+  /** 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;
@@ -12,11 +12,11 @@ interface LiveEditProps {
 }
 /**
  * A preview you write on directly: the document renders exactly like
- * `Preview`, split into blocks, and every block is `contentEditable` — no
+ * `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 —
+ * 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.
  */

package/dist/LiveEdit.mjs

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

package/dist/MarkdownContext.d.cts

@@ -1,2 +1,2 @@
-import { i as useMarkdownContext, n as MarkdownContextValue, r as MarkdownSelection, t as MarkdownContext } from "./index-rGZIhUgj.cjs";
+import { i as useMarkdownContext, n as MarkdownContextValue, r as MarkdownSelection, t as MarkdownContext } from "./index-Cre2ivJn.cjs";
 export { MarkdownContext, MarkdownContextValue, MarkdownSelection, useMarkdownContext };

package/dist/MarkdownContext.d.mts

@@ -1,2 +1,2 @@
-import { i as useMarkdownContext, n as MarkdownContextValue, r as MarkdownSelection, t as MarkdownContext } from "./index-rGZIhUgj.mjs";
+import { i as useMarkdownContext, n as MarkdownContextValue, r as MarkdownSelection, t as MarkdownContext } from "./index-Cre2ivJn.mjs";
 export { MarkdownContext, MarkdownContextValue, MarkdownSelection, useMarkdownContext };

package/dist/{Mermaid-BclI9A7e.mjs → Mermaid-B7vDwGQG.mjs}

@@ -21,7 +21,7 @@ const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 * (bottom-right: a pan d-pad around a reset, plus zoom in/out) and an expand control
 * (top-right) that opens the diagram in a fullscreen dialog. Drag-to-pan and wheel-to-zoom
 * work too. Only the diagram layer clips; the controls sit above it, so a short diagram never
-* hides them. Everything is a CSS transform — no dependency.
+* hides them. Everything is a CSS transform - no dependency.
 */
 function DiagramViewer({ svg, expandable = true, fill = false }) {
 	const [scale, setScale] = useState(1);
@@ -198,8 +198,8 @@ async function toSvg(id, chart, theme) {
 	return svg;
 }
 /**
-* Renders a mermaid diagram. Until the client renders the SVG — and if the source is
-* invalid — it falls back to the diagram source in a `CodeBlock`, so server output and
+* Renders a mermaid diagram. Until the client renders the SVG - and if the source is
+* invalid - it falls back to the diagram source in a `CodeBlock`, so server output and
 * no-JS readers still show something useful and hydration stays stable.
 */
 function Mermaid({ chart, diagram }) {

package/dist/{Mermaid-DqP2Q0bt.cjs → Mermaid-CkUan4z-.cjs}

@@ -21,7 +21,7 @@ const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 * (bottom-right: a pan d-pad around a reset, plus zoom in/out) and an expand control
 * (top-right) that opens the diagram in a fullscreen dialog. Drag-to-pan and wheel-to-zoom
 * work too. Only the diagram layer clips; the controls sit above it, so a short diagram never
-* hides them. Everything is a CSS transform — no dependency.
+* hides them. Everything is a CSS transform - no dependency.
 */
 function DiagramViewer({ svg, expandable = true, fill = false }) {
 	const [scale, setScale] = (0, react.useState)(1);
@@ -198,8 +198,8 @@ async function toSvg(id, chart, theme) {
 	return svg;
 }
 /**
-* Renders a mermaid diagram. Until the client renders the SVG — and if the source is
-* invalid — it falls back to the diagram source in a `CodeBlock`, so server output and
+* Renders a mermaid diagram. Until the client renders the SVG - and if the source is
+* invalid - it falls back to the diagram source in a `CodeBlock`, so server output and
 * no-JS readers still show something useful and hydration stays stable.
 */
 function Mermaid({ chart, diagram }) {

package/dist/Mermaid.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Mermaid = require("./Mermaid-DqP2Q0bt.cjs");
+const require_Mermaid = require("./Mermaid-CkUan4z-.cjs");
 exports.Mermaid = require_Mermaid.Mermaid;

package/dist/Mermaid.d.cts

@@ -1,2 +1,2 @@
-import { n as Mermaid, r as MermaidProps, t as DiagramProps } from "./index-BO0LyUUG.cjs";
+import { n as Mermaid, r as MermaidProps, t as DiagramProps } from "./index-Bd3yPDn_.cjs";
 export { DiagramProps, Mermaid, MermaidProps };

package/dist/Mermaid.d.mts

@@ -1,2 +1,2 @@
-import { n as Mermaid, r as MermaidProps, t as DiagramProps } from "./index-BO0LyUUG.mjs";
+import { n as Mermaid, r as MermaidProps, t as DiagramProps } from "./index-Bd3yPDn_.mjs";
 export { DiagramProps, Mermaid, MermaidProps };

package/dist/Mermaid.mjs

@@ -1,2 +1,2 @@
-import { t as Mermaid } from "./Mermaid-BclI9A7e.mjs";
+import { t as Mermaid } from "./Mermaid-B7vDwGQG.mjs";
 export { Mermaid };

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

@@ -1,5 +1,5 @@
 import { r as CodeBlock } from "./CodeBlock-CVlrvVPP.mjs";
-import { t as Mermaid } from "./Mermaid-BclI9A7e.mjs";
+import { t as Mermaid } from "./Mermaid-B7vDwGQG.mjs";
 import { createContext, isValidElement, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Typography } from "@soroush.tech/design-system/Typography";

package/dist/{Preview-YtIipm0z.cjs → Preview-CnMWUtU2.cjs}

@@ -21,7 +21,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 //#endregion
 const require_CodeBlock = require("./CodeBlock-Cymx1ZAY.cjs");
-const require_Mermaid = require("./Mermaid-DqP2Q0bt.cjs");
+const require_Mermaid = require("./Mermaid-CkUan4z-.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_design_system_Typography = require("@soroush.tech/design-system/Typography");

package/dist/Preview.cjs

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

package/dist/Preview.d.cts

@@ -1,2 +1,2 @@
-import { n as PreviewProps, r as PreviewSlotProps, t as Preview } from "./index-CxdJ1SgP.cjs";
+import { n as PreviewProps, r as PreviewSlotProps, t as Preview } from "./index-TT9-Qjsh.cjs";
 export { Preview, PreviewProps, PreviewSlotProps };

package/dist/Preview.d.mts

@@ -1,2 +1,2 @@
-import { n as PreviewProps, r as PreviewSlotProps, t as Preview } from "./index-CPWcFD6T.mjs";
+import { n as PreviewProps, r as PreviewSlotProps, t as Preview } from "./index-CBKWWR5Q.mjs";
 export { Preview, PreviewProps, PreviewSlotProps };

package/dist/Preview.mjs

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

package/dist/{Toolbar-C0SNI-JK.mjs → Toolbar-BoEuAIiw.mjs}

@@ -42,7 +42,7 @@ function groupToolbarActions(actions) {
 //#region src/const.ts
 const LIST_MARKER = /^(?:- \[[ xX]\] |- |\d+\. )/;
 /**
-* Every formatting action the toolbar exposes — one per markdown feature the `Markdown`
+* Every formatting action the toolbar exposes - one per markdown feature the `Markdown`
 * renderer supports (GFM + the component map in `Markdown.Preview`). Data-driven so the
 * toolbar and the transform logic stay in sync.
 */
@@ -186,7 +186,7 @@ const CODE_LANGUAGES = [
 		value: "md"
 	}
 ];
-/** Inline `code` — rendered next to the code-block select so both code controls sit together. */
+/** Inline `code` - rendered next to the code-block select so both code controls sit together. */
 const INLINE_CODE_ACTION = {
 	id: "inline-code",
 	label: "Code",
@@ -218,7 +218,7 @@ const headingAction = (level) => ({
 	family: HEADING_MARKER,
 	toggle: false
 });
-/** Every heading level the `Markdown` renderer supports (h1–h6) — offered via the toolbar select. */
+/** Every heading level the `Markdown` renderer supports (h1-h6) - offered via the toolbar select. */
 const HEADING_ACTIONS = [
 	1,
 	2,

package/dist/{Toolbar-Ba3l-oBU.cjs → Toolbar-CRlLqvj9.cjs}

@@ -42,7 +42,7 @@ function groupToolbarActions(actions) {
 //#region src/const.ts
 const LIST_MARKER = /^(?:- \[[ xX]\] |- |\d+\. )/;
 /**
-* Every formatting action the toolbar exposes — one per markdown feature the `Markdown`
+* Every formatting action the toolbar exposes - one per markdown feature the `Markdown`
 * renderer supports (GFM + the component map in `Markdown.Preview`). Data-driven so the
 * toolbar and the transform logic stay in sync.
 */
@@ -186,7 +186,7 @@ const CODE_LANGUAGES = [
 		value: "md"
 	}
 ];
-/** Inline `code` — rendered next to the code-block select so both code controls sit together. */
+/** Inline `code` - rendered next to the code-block select so both code controls sit together. */
 const INLINE_CODE_ACTION = {
 	id: "inline-code",
 	label: "Code",
@@ -218,7 +218,7 @@ const headingAction = (level) => ({
 	family: HEADING_MARKER,
 	toggle: false
 });
-/** Every heading level the `Markdown` renderer supports (h1–h6) — offered via the toolbar select. */
+/** Every heading level the `Markdown` renderer supports (h1-h6) - offered via the toolbar select. */
 const HEADING_ACTIONS = [
 	1,
 	2,

package/dist/Toolbar.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Toolbar = require("./Toolbar-Ba3l-oBU.cjs");
+const require_Toolbar = require("./Toolbar-CRlLqvj9.cjs");
 exports.TablePicker = require_Toolbar.TablePicker;
 exports.Toolbar = require_Toolbar.Toolbar;

package/dist/Toolbar.mjs

@@ -1,2 +1,2 @@
-import { n as TablePicker, t as Toolbar } from "./Toolbar-C0SNI-JK.mjs";
+import { n as TablePicker, t as Toolbar } from "./Toolbar-BoEuAIiw.mjs";
 export { TablePicker, Toolbar };

package/dist/{index-BO0LyUUG.d.cts → index-Bd3yPDn_.d.cts}

@@ -4,22 +4,22 @@ interface DiagramViewerProps {
   svg: string;
   /** Show the expand-to-fullscreen control and dialog. Off for the nested (in-dialog) viewer. */
   expandable?: boolean;
-  /** Fill the parent's height — used by the viewer inside the fullscreen dialog. */
+  /** Fill the parent's height - used by the viewer inside the fullscreen dialog. */
   fill?: boolean;
 }
 //#endregion
 //#region src/Mermaid/Mermaid.d.ts
-/** DiagramViewer props a consumer may set — `svg` and `fill` are managed internally. */
+/** DiagramViewer props a consumer may set - `svg` and `fill` are managed internally. */
 type DiagramProps = Omit<DiagramViewerProps, 'svg' | 'fill'>;
 interface MermaidProps {
-  /** The mermaid diagram source — the body of a ` ```mermaid ` fenced block. */
+  /** The mermaid diagram source - the body of a ` ```mermaid ` fenced block. */
   chart: string;
   /** Props forwarded to the diagram's zoom/pan viewer (e.g. `expandable`). */
   diagram?: DiagramProps;
 }
 /**
- * Renders a mermaid diagram. Until the client renders the SVG — and if the source is
- * invalid — it falls back to the diagram source in a `CodeBlock`, so server output and
+ * Renders a mermaid diagram. Until the client renders the SVG - and if the source is
+ * invalid - it falls back to the diagram source in a `CodeBlock`, so server output and
  * no-JS readers still show something useful and hydration stays stable.
  */
 declare function Mermaid({ chart, diagram }: Readonly<MermaidProps>): import("react").JSX.Element;

package/dist/{index-BO0LyUUG.d.mts → index-Bd3yPDn_.d.mts}

@@ -4,22 +4,22 @@ interface DiagramViewerProps {
   svg: string;
   /** Show the expand-to-fullscreen control and dialog. Off for the nested (in-dialog) viewer. */
   expandable?: boolean;
-  /** Fill the parent's height — used by the viewer inside the fullscreen dialog. */
+  /** Fill the parent's height - used by the viewer inside the fullscreen dialog. */
   fill?: boolean;
 }
 //#endregion
 //#region src/Mermaid/Mermaid.d.ts
-/** DiagramViewer props a consumer may set — `svg` and `fill` are managed internally. */
+/** DiagramViewer props a consumer may set - `svg` and `fill` are managed internally. */
 type DiagramProps = Omit<DiagramViewerProps, 'svg' | 'fill'>;
 interface MermaidProps {
-  /** The mermaid diagram source — the body of a ` ```mermaid ` fenced block. */
+  /** The mermaid diagram source - the body of a ` ```mermaid ` fenced block. */
   chart: string;
   /** Props forwarded to the diagram's zoom/pan viewer (e.g. `expandable`). */
   diagram?: DiagramProps;
 }
 /**
- * Renders a mermaid diagram. Until the client renders the SVG — and if the source is
- * invalid — it falls back to the diagram source in a `CodeBlock`, so server output and
+ * Renders a mermaid diagram. Until the client renders the SVG - and if the source is
+ * invalid - it falls back to the diagram source in a `CodeBlock`, so server output and
  * no-JS readers still show something useful and hydration stays stable.
  */
 declare function Mermaid({ chart, diagram }: Readonly<MermaidProps>): import("react").JSX.Element;

package/dist/{index-CPWcFD6T.d.mts → index-CBKWWR5Q.d.mts}

@@ -1,5 +1,5 @@
-import { a as CodeBlockProps } from "./index-BtMTBOcM.mjs";
-import { r as MermaidProps } from "./index-BO0LyUUG.mjs";
+import { a as CodeBlockProps } from "./index-D1rI6OgO.mjs";
+import { r as MermaidProps } from "./index-Bd3yPDn_.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";
@@ -10,7 +10,7 @@ import { TableBodyProps, TableCellProps, TableHeadProps, TableProps, TableRowPro
 //#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' } }}`.
+ * Keyed by markdown element - e.g. `slotProps={{ p: { color: 'primary' }, h1: { variant: 'h2' } }}`.
  */
 interface PreviewSlotProps {
   h1?: TypographyProps;
@@ -38,7 +38,7 @@ interface PreviewSlotProps {
   thead?: TableHeadProps;
   tbody?: TableBodyProps;
   tr?: TableRowProps;
-  /** Props for a ` ```mermaid ` fence's `Mermaid` renderer — including `diagram` (viewer) props. */
+  /** Props for a ` ```mermaid ` fence's `Mermaid` renderer - including `diagram` (viewer) props. */
   mermaid?: Omit<MermaidProps, 'chart'>;
 }
 interface PreviewProps {

package/dist/{index-rGZIhUgj.d.mts → index-Cre2ivJn.d.cts}

@@ -1,13 +1,13 @@
 import { IconName } from "@soroush.tech/design-system/Icon";
 //#region src/const.d.ts
-/** How a text label is rendered — mirrors the mark it inserts. */
+/** How a text label is rendered - mirrors the mark it inserts. */
 type ToolbarLabelEmphasis = 'bold' | 'italic' | 'strike';
 /** Shared presentation for a toolbar control. */
 interface BaseAction {
   id: string;
   /** Text label shown when no `icon` is set. */
   label: string;
-  /** Accessible name — always the control's aria-label. */
+  /** Accessible name - always the control's aria-label. */
   ariaLabel: string;
   /** Registry icon shown instead of the text label. */
   icon?: IconName;
@@ -16,7 +16,7 @@ interface BaseAction {
   /** Consecutive actions sharing a group id render as one joined button cluster. */
   group?: string;
 }
-/** Wraps the selection (or a placeholder) in a leading/trailing marker — bold, links, code blocks. */
+/** Wraps the selection (or a placeholder) in a leading/trailing marker - bold, links, code blocks. */
 interface WrapAction extends BaseAction {
   kind: 'wrap';
   prefix: string;
@@ -25,14 +25,14 @@ interface WrapAction extends BaseAction {
   /** Block-level fence (e.g. code block): separated by newlines and never toggled off. */
   block?: boolean;
 }
-/** Prepends a marker to every line the selection touches — headings, quotes, lists. */
+/** Prepends a marker to every line the selection touches - headings, quotes, lists. */
 interface LinePrefixAction extends BaseAction {
   kind: 'linePrefix';
   linePrefix: string;
   /**
    * Line-start pattern for a family of mutually-exclusive markers (e.g. all list types). When
    * set, applying the action strips any matching marker first, then toggles its own off or
-   * replaces a sibling's — so the list/ordered/task buttons swap and toggle instead of stacking.
+   * replaces a sibling's - so the list/ordered/task buttons swap and toggle instead of stacking.
    */
   family?: RegExp;
   /**
@@ -42,7 +42,7 @@ interface LinePrefixAction extends BaseAction {
    */
   toggle?: boolean;
 }
-/** Inserts a standalone snippet at the caret, ignoring the selection — tables, rules. */
+/** Inserts a standalone snippet at the caret, ignoring the selection - tables, rules. */
 interface InsertAction extends BaseAction {
   kind: 'insert';
   snippet: string;
@@ -62,11 +62,11 @@ interface MarkdownContextValue {
   onChange: (value: string) => void;
   /** Applies a toolbar action at the last remembered selection and queues the caret to restore. */
   dispatch: (action: ToolbarAction) => void;
-  /** Records the current textarea selection — the Editor calls this on select/blur. */
+  /** Records the current textarea selection - the Editor calls this on select/blur. */
   rememberSelection: (selection: MarkdownSelection) => void;
   /** Queues a selection to restore after the next value change (e.g. after Tab). */
   queueSelection: (selection: MarkdownSelection) => void;
-  /** Returns and clears the queued selection — the Editor's effect calls this to restore focus. */
+  /** Returns and clears the queued selection - the Editor's effect calls this to restore focus. */
   takeQueuedSelection: () => MarkdownSelection | null;
 }
 declare const MarkdownContext: import("react").Context<MarkdownContextValue | null>;

package/dist/{index-rGZIhUgj.d.cts → index-Cre2ivJn.d.mts}

@@ -1,13 +1,13 @@
 import { IconName } from "@soroush.tech/design-system/Icon";
 //#region src/const.d.ts
-/** How a text label is rendered — mirrors the mark it inserts. */
+/** How a text label is rendered - mirrors the mark it inserts. */
 type ToolbarLabelEmphasis = 'bold' | 'italic' | 'strike';
 /** Shared presentation for a toolbar control. */
 interface BaseAction {
   id: string;
   /** Text label shown when no `icon` is set. */
   label: string;
-  /** Accessible name — always the control's aria-label. */
+  /** Accessible name - always the control's aria-label. */
   ariaLabel: string;
   /** Registry icon shown instead of the text label. */
   icon?: IconName;
@@ -16,7 +16,7 @@ interface BaseAction {
   /** Consecutive actions sharing a group id render as one joined button cluster. */
   group?: string;
 }
-/** Wraps the selection (or a placeholder) in a leading/trailing marker — bold, links, code blocks. */
+/** Wraps the selection (or a placeholder) in a leading/trailing marker - bold, links, code blocks. */
 interface WrapAction extends BaseAction {
   kind: 'wrap';
   prefix: string;
@@ -25,14 +25,14 @@ interface WrapAction extends BaseAction {
   /** Block-level fence (e.g. code block): separated by newlines and never toggled off. */
   block?: boolean;
 }
-/** Prepends a marker to every line the selection touches — headings, quotes, lists. */
+/** Prepends a marker to every line the selection touches - headings, quotes, lists. */
 interface LinePrefixAction extends BaseAction {
   kind: 'linePrefix';
   linePrefix: string;
   /**
    * Line-start pattern for a family of mutually-exclusive markers (e.g. all list types). When
    * set, applying the action strips any matching marker first, then toggles its own off or
-   * replaces a sibling's — so the list/ordered/task buttons swap and toggle instead of stacking.
+   * replaces a sibling's - so the list/ordered/task buttons swap and toggle instead of stacking.
    */
   family?: RegExp;
   /**
@@ -42,7 +42,7 @@ interface LinePrefixAction extends BaseAction {
    */
   toggle?: boolean;
 }
-/** Inserts a standalone snippet at the caret, ignoring the selection — tables, rules. */
+/** Inserts a standalone snippet at the caret, ignoring the selection - tables, rules. */
 interface InsertAction extends BaseAction {
   kind: 'insert';
   snippet: string;
@@ -62,11 +62,11 @@ interface MarkdownContextValue {
   onChange: (value: string) => void;
   /** Applies a toolbar action at the last remembered selection and queues the caret to restore. */
   dispatch: (action: ToolbarAction) => void;
-  /** Records the current textarea selection — the Editor calls this on select/blur. */
+  /** Records the current textarea selection - the Editor calls this on select/blur. */
   rememberSelection: (selection: MarkdownSelection) => void;
   /** Queues a selection to restore after the next value change (e.g. after Tab). */
   queueSelection: (selection: MarkdownSelection) => void;
-  /** Returns and clears the queued selection — the Editor's effect calls this to restore focus. */
+  /** Returns and clears the queued selection - the Editor's effect calls this to restore focus. */
   takeQueuedSelection: () => MarkdownSelection | null;
 }
 declare const MarkdownContext: import("react").Context<MarkdownContextValue | null>;

package/dist/{index-BtMTBOcM.d.cts → index-D1rI6OgO.d.cts}

@@ -12,14 +12,14 @@ declare function CodeBlock({ children, ...rest }: Readonly<CodeBlockProps>): imp
 //#endregion
 //#region src/CodeBlock/CodeBlock.data.d.ts
 /**
- * Syntax-highlighting tokens for `CodeBlock` — mapped onto highlight.js token classes.
+ * Syntax-highlighting tokens for `CodeBlock` - mapped onto highlight.js token classes.
  * Not part of design-system's own scales; `../index.ts` augments
  * `@soroush.tech/design-system/theme` so `theme.syntax` is available wherever this
  * package is imported. Merge one of the presets below into your theme via
  * `createTheme(baseTheme, { syntax: syntaxDark })`, or supply your own.
  */
 interface ThemeSyntax {
-  /** Default code text — plain identifiers, operators, punctuation. */
+  /** Default code text - plain identifiers, operators, punctuation. */
   base: string;
   /** Keywords, built-ins, types, literals, selector tags. */
   keyword: string;
@@ -33,11 +33,11 @@ interface ThemeSyntax {
   constant: string;
   /** Type and class names. */
   type: string;
-  /** Comments and quotes — rendered dimmed and italic. */
+  /** Comments and quotes - rendered dimmed and italic. */
   comment: string;
   /** Markup tags/names, meta, variables, deletions. */
   tag: string;
-  /** Font family for the code surface — independent of `theme.fonts.mono`. */
+  /** Font family for the code surface - independent of `theme.fonts.mono`. */
   font: string;
 }
 /** Matched to the JetBrains "Islands Dark" editor scheme. */

package/dist/{index-BtMTBOcM.d.mts → index-D1rI6OgO.d.mts}

@@ -12,14 +12,14 @@ declare function CodeBlock({ children, ...rest }: Readonly<CodeBlockProps>): imp
 //#endregion
 //#region src/CodeBlock/CodeBlock.data.d.ts
 /**
- * Syntax-highlighting tokens for `CodeBlock` — mapped onto highlight.js token classes.
+ * Syntax-highlighting tokens for `CodeBlock` - mapped onto highlight.js token classes.
  * Not part of design-system's own scales; `../index.ts` augments
  * `@soroush.tech/design-system/theme` so `theme.syntax` is available wherever this
  * package is imported. Merge one of the presets below into your theme via
  * `createTheme(baseTheme, { syntax: syntaxDark })`, or supply your own.
  */
 interface ThemeSyntax {
-  /** Default code text — plain identifiers, operators, punctuation. */
+  /** Default code text - plain identifiers, operators, punctuation. */
   base: string;
   /** Keywords, built-ins, types, literals, selector tags. */
   keyword: string;
@@ -33,11 +33,11 @@ interface ThemeSyntax {
   constant: string;
   /** Type and class names. */
   type: string;
-  /** Comments and quotes — rendered dimmed and italic. */
+  /** Comments and quotes - rendered dimmed and italic. */
   comment: string;
   /** Markup tags/names, meta, variables, deletions. */
   tag: string;
-  /** Font family for the code surface — independent of `theme.fonts.mono`. */
+  /** Font family for the code surface - independent of `theme.fonts.mono`. */
   font: string;
 }
 /** Matched to the JetBrains "Islands Dark" editor scheme. */

package/dist/{index-CxdJ1SgP.d.cts → index-TT9-Qjsh.d.cts}

@@ -1,5 +1,5 @@
-import { a as CodeBlockProps } from "./index-BtMTBOcM.cjs";
-import { r as MermaidProps } from "./index-BO0LyUUG.cjs";
+import { a as CodeBlockProps } from "./index-D1rI6OgO.cjs";
+import { r as MermaidProps } from "./index-Bd3yPDn_.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";
@@ -10,7 +10,7 @@ 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' } }}`.
+ * Keyed by markdown element - e.g. `slotProps={{ p: { color: 'primary' }, h1: { variant: 'h2' } }}`.
  */
 interface PreviewSlotProps {
   h1?: TypographyProps;
@@ -38,7 +38,7 @@ interface PreviewSlotProps {
   thead?: TableHeadProps;
   tbody?: TableBodyProps;
   tr?: TableRowProps;
-  /** Props for a ` ```mermaid ` fence's `Mermaid` renderer — including `diagram` (viewer) props. */
+  /** Props for a ` ```mermaid ` fence's `Mermaid` renderer - including `diagram` (viewer) props. */
   mermaid?: Omit<MermaidProps, 'chart'>;
 }
 interface PreviewProps {

package/dist/index.cjs

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Preview = require("./Preview-YtIipm0z.cjs");
+const require_Preview = require("./Preview-CnMWUtU2.cjs");
 const require_MarkdownContext = require("./MarkdownContext.cjs");
 const require_Control = require("./Control.cjs");
-const require_Toolbar = require("./Toolbar-Ba3l-oBU.cjs");
+const require_Toolbar = require("./Toolbar-CRlLqvj9.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-DmM35H99.cjs");
+const require_Mermaid = require("./Mermaid-CkUan4z-.cjs");
+const require_LiveEdit = require("./LiveEdit-CbRkmd43.cjs");
 exports.CodeBlock = require_CodeBlock.CodeBlock;
 exports.Control = require_Control.Control;
 exports.Editor = require_Editor.Editor;

package/dist/index.d.cts

@@ -1,16 +1,16 @@
-import { a as CodeBlockProps, i as CodeBlock, n as syntaxDark, r as syntaxLight, t as ThemeSyntax } from "./index-BtMTBOcM.cjs";
+import { a as CodeBlockProps, i as CodeBlock, n as syntaxDark, r as syntaxLight, t as ThemeSyntax } from "./index-D1rI6OgO.cjs";
 import { Control, ControlProps } from "./Control.cjs";
 import { Editor, EditorProps } from "./Editor.cjs";
-import { n as Mermaid, r as MermaidProps, t as DiagramProps } from "./index-BO0LyUUG.cjs";
-import { n as PreviewProps, r as PreviewSlotProps, t as Preview } from "./index-CxdJ1SgP.cjs";
+import { n as Mermaid, r as MermaidProps, t as DiagramProps } from "./index-Bd3yPDn_.cjs";
+import { n as PreviewProps, r as PreviewSlotProps, t as Preview } from "./index-TT9-Qjsh.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 { i as useMarkdownContext, n as MarkdownContextValue, r as MarkdownSelection, t as MarkdownContext } from "./index-Cre2ivJn.cjs";
 import { TablePicker, TablePickerProps, Toolbar } from "./Toolbar.cjs";
 //#region src/index.d.ts
 /**
  * Per-theme overrides for the `Mermaid` renderer, merged over (and winning against) its default
  * mermaid `themeVariables`. Common variables are listed for autocomplete; any other mermaid theme
- * variable is accepted. Set via `theme.mermaid` (e.g. `createTheme(baseTheme, { mermaid: … })`).
+ * variable is accepted. Set via `theme.mermaid` (e.g. `createTheme(baseTheme, { mermaid: ... })`).
  */
 interface MermaidThemeVariables {
   darkMode?: boolean;
@@ -41,7 +41,7 @@ declare module '@soroush.tech/design-system/theme' {
     /** Per-theme overrides for the `Mermaid` renderer's mermaid `themeVariables`. */
     mermaid?: MermaidThemeVariables;
     /**
-     * Syntax-highlighting tokens for `CodeBlock` — see `syntaxDark`/`syntaxLight`. Optional
+     * Syntax-highlighting tokens for `CodeBlock` - see `syntaxDark`/`syntaxLight`. Optional
      * only so `design-system`'s own `baseTheme` literal still satisfies `Theme` in this
      * monorepo's source-consuming builds; `CodeBlock` requires it in practice (no fallback).
      */

package/dist/index.d.mts

@@ -1,16 +1,16 @@
-import { a as CodeBlockProps, i as CodeBlock, n as syntaxDark, r as syntaxLight, t as ThemeSyntax } from "./index-BtMTBOcM.mjs";
+import { a as CodeBlockProps, i as CodeBlock, n as syntaxDark, r as syntaxLight, t as ThemeSyntax } from "./index-D1rI6OgO.mjs";
 import { Control, ControlProps } from "./Control.mjs";
 import { Editor, EditorProps } from "./Editor.mjs";
-import { n as Mermaid, r as MermaidProps, t as DiagramProps } from "./index-BO0LyUUG.mjs";
-import { n as PreviewProps, r as PreviewSlotProps, t as Preview } from "./index-CPWcFD6T.mjs";
+import { n as Mermaid, r as MermaidProps, t as DiagramProps } from "./index-Bd3yPDn_.mjs";
+import { n as PreviewProps, r as PreviewSlotProps, t as Preview } from "./index-CBKWWR5Q.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 { i as useMarkdownContext, n as MarkdownContextValue, r as MarkdownSelection, t as MarkdownContext } from "./index-Cre2ivJn.mjs";
 import { TablePicker, TablePickerProps, Toolbar } from "./Toolbar.mjs";
 //#region src/index.d.ts
 /**
  * Per-theme overrides for the `Mermaid` renderer, merged over (and winning against) its default
  * mermaid `themeVariables`. Common variables are listed for autocomplete; any other mermaid theme
- * variable is accepted. Set via `theme.mermaid` (e.g. `createTheme(baseTheme, { mermaid: … })`).
+ * variable is accepted. Set via `theme.mermaid` (e.g. `createTheme(baseTheme, { mermaid: ... })`).
  */
 interface MermaidThemeVariables {
   darkMode?: boolean;
@@ -41,7 +41,7 @@ declare module '@soroush.tech/design-system/theme' {
     /** Per-theme overrides for the `Mermaid` renderer's mermaid `themeVariables`. */
     mermaid?: MermaidThemeVariables;
     /**
-     * Syntax-highlighting tokens for `CodeBlock` — see `syntaxDark`/`syntaxLight`. Optional
+     * Syntax-highlighting tokens for `CodeBlock` - see `syntaxDark`/`syntaxLight`. Optional
      * only so `design-system`'s own `baseTheme` literal still satisfies `Theme` in this
      * monorepo's source-consuming builds; `CodeBlock` requires it in practice (no fallback).
      */

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import { MarkdownContext, useMarkdownContext } from "./MarkdownContext.mjs";
 import { Control } from "./Control.mjs";
-import { n as TablePicker, t as Toolbar } from "./Toolbar-C0SNI-JK.mjs";
+import { n as TablePicker, t as Toolbar } from "./Toolbar-BoEuAIiw.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-nvh2sGBQ.mjs";
-import { t as LiveEdit } from "./LiveEdit-KDKu7Yvn.mjs";
+import { t as Mermaid } from "./Mermaid-B7vDwGQG.mjs";
+import { t as Preview } from "./Preview-BFyaPHjw.mjs";
+import { t as LiveEdit } from "./LiveEdit-CaMZLJCs.mjs";
 export { CodeBlock, Control, Editor, LiveEdit, MarkdownContext, Mermaid, Preview, TablePicker, Toolbar, syntaxDark, syntaxLight, useMarkdownContext };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@soroush.tech/markdown",
-  "version": "1.2.1",
-  "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.",
+  "version": "1.2.2",
+  "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",
     "editor",
@@ -67,7 +67,7 @@
   "peerDependencies": {
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "@soroush.tech/design-system": "^1.3.2"
+    "@soroush.tech/design-system": "^1.3.3"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.5.8",
@@ -85,9 +85,9 @@
     "tsdown": "^0.22.14",
     "typescript": "~7.0.2",
     "vitest": "^4.1.10",
+    "@soroush.tech/design-system": "1.3.3",
     "@soroush.tech/eslint-config": "0.0.0",
-    "@soroush.tech/hooks": "0.1.0",
-    "@soroush.tech/design-system": "1.3.2"
+    "@soroush.tech/hooks": "0.1.0"
   },
   "scripts": {
     "build": "tsdown",