@readme/markdown 15.2.1 → 15.4.0

package/README.md

@@ -99,6 +99,7 @@ Extends [`CompileOptions`](https://mdxjs.com/packages/mdx/#compileoptions)
 - **`safeMode`** (`boolean`, optional)—extract script tags from `HTMLBlock`s
 - **`components`** (`Record<string, string>`, optional)—an object of tag names to mdx.
 - **`copyButtons`** (`Boolean`, optional) — add a copy button to code blocks
+- **`hardBreaks`** (`boolean`, optional)—render every newline as a `<br>`. `mdxish` defaults to `true`
 
 ### `RunOpts`
 

package/components/TailwindStyle/index.tsx

@@ -14,9 +14,11 @@ const traverse = (node: Node, callback: (element: Node) => void) => {
 interface Props {
   children: React.ReactNode;
   darkModeDataAttribute?: string | null;
+  /** See the matching param on `tailwindCompiler` in `utils/tailwind-compiler.ts`. */
+  darkModeRootSelector?: string | null;
 }
 
-const TailwindStyle = ({ children, darkModeDataAttribute }: Props) => {
+const TailwindStyle = ({ children, darkModeDataAttribute, darkModeRootSelector }: Props) => {
   const [stylesheet, setStylesheet] = useState('');
   const classesSet = useRef(new Set<string>());
   const ref = useRef<HTMLStyleElement>(null);
@@ -43,6 +45,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }: Props) => {
       const sheet = await tailwindCompiler(classes, {
         prefix: `.${tailwindPrefix}`,
         darkModeDataAttribute,
+        darkModeRootSelector,
       });
       /* @note: don't insert an empty stylesheet */
       if (sheet.css.match(/^@layer utilities;/m)) return;
@@ -51,7 +54,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }: Props) => {
     };
 
     run();
-  }, [classes, darkModeDataAttribute]);
+  }, [classes, darkModeDataAttribute, darkModeRootSelector]);
 
   /*
    * @note: execute once on load

package/dist/components/TailwindStyle/index.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 interface Props {
     children: React.ReactNode;
     darkModeDataAttribute?: string | null;
+    /** See the matching param on `tailwindCompiler` in `utils/tailwind-compiler.ts`. */
+    darkModeRootSelector?: string | null;
 }
-declare const TailwindStyle: ({ children, darkModeDataAttribute }: Props) => React.JSX.Element;
+declare const TailwindStyle: ({ children, darkModeDataAttribute, darkModeRootSelector }: Props) => React.JSX.Element;
 export default TailwindStyle;

package/dist/lib/mdxish.d.ts

@@ -3,6 +3,15 @@ import type { Root } from 'hast';
 import type { Root as MdastRoot } from 'mdast';
 export interface MdxishOpts {
     components?: CustomComponents;
+    /**
+     * Whether a single newline (\n) renders as a `<br>`. Defaults to `true`, matching legacy rdmd.
+     * Turn it off for CommonMark semantics, where only a blank line breaks — what content
+     * soft-wrapped to a line-length limit (OpenAPI descriptions, linted markdown) expects.
+     *
+     * Only applies to `mdxish()`; `mdxishAstProcessor` never hard-breaks its MDAST.
+     * There's no use for it right now but it can be revisited if needed.
+     */
+    hardBreaks?: boolean;
     newEditorTypes?: boolean;
     /**
      * When enabled, the pipeline ignores all expression syntax `{...}`.

package/dist/main.js

@@ -12675,7 +12675,7 @@ async function loadStylesheet(id, base) {
 async function loadModule() {
     throw new Error('The browser build does not support plugins or config files.');
 }
-async function createCompiler({ darkModeDataAttribute }) {
+async function createCompiler({ darkModeDataAttribute, darkModeRootSelector, }) {
     let css = `
 @layer theme, base, components, utilities;
 
@@ -12683,9 +12683,12 @@ async function createCompiler({ darkModeDataAttribute }) {
 @import "tailwindcss/utilities.css" layer(utilities);
 `;
     if (darkModeDataAttribute) {
+        // Anchors `dark:` to `darkModeRootSelector`'s own attribute instead of any ancestor's,
+        // when supplied — see the `darkModeRootSelector` param doc below for why there's no default.
+        const root = darkModeRootSelector || '';
         css += `
 
-@custom-variant dark (&:where([${darkModeDataAttribute}=dark], [${darkModeDataAttribute}=dark] *));`;
+@custom-variant dark (&:where(${root}[${darkModeDataAttribute}=dark], ${root}[${darkModeDataAttribute}=dark] *));`;
     }
     return Hu(css, {
         base: '/',
@@ -12693,8 +12696,8 @@ async function createCompiler({ darkModeDataAttribute }) {
         loadModule,
     });
 }
-async function tailwindCompiler(classes, { prefix, darkModeDataAttribute }) {
-    const compiler = await createCompiler({ darkModeDataAttribute });
+async function tailwindCompiler(classes, { prefix, darkModeDataAttribute, darkModeRootSelector, }) {
+    const compiler = await createCompiler({ darkModeDataAttribute, darkModeRootSelector });
     const css = compiler.build(Array.from(classes));
     return lib_postcss([postcss_prefix_selector_default()({ prefix })]).process(css, { from: undefined });
 }
@@ -12709,7 +12712,7 @@ const traverse = (node, callback) => {
         traverse(child, callback);
     });
 };
-const TailwindStyle = ({ children, darkModeDataAttribute }) => {
+const TailwindStyle = ({ children, darkModeDataAttribute, darkModeRootSelector }) => {
     const [stylesheet, setStylesheet] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)('');
     const classesSet = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useRef)(new Set());
     const ref = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useRef)(null);
@@ -12733,6 +12736,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
             const sheet = await tailwindCompiler(classes, {
                 prefix: `.${tailwindPrefix}`,
                 darkModeDataAttribute,
+                darkModeRootSelector,
             });
             /* @note: don't insert an empty stylesheet */
             if (sheet.css.match(/^@layer utilities;/m))
@@ -12740,7 +12744,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
             setStylesheet(sheet.css);
         };
         run();
-    }, [classes, darkModeDataAttribute]);
+    }, [classes, darkModeDataAttribute, darkModeRootSelector]);
     /*
      * @note: execute once on load
      */
@@ -75799,6 +75803,7 @@ var allCSS2RNProps = __webpack_unused_export__ = flatten([allProps, CSS2RNProps]
 
 
 
+
 /**
  * Extract word boundaries from camelCase strings (e.g., "borderWidth" -> ["border", "width"])
  */
@@ -75878,10 +75883,43 @@ const CUSTOM_PROP_BOUNDARIES = [
  */
 const RUNTIME_COMPONENT_TAGS = new Set(['Variable', 'variable', 'html-block', 'rdme-pin']);
 /**
- * Standard HTML tags that should never be treated as custom components.
- * Uses the html-tags package, converted to a Set<string> for efficient lookups.
+ * Elements that are not actually standard HTML tags, or those that we intentionally
+ * don't want to treat as one & is mute to check with. These include:
+ * - SVG/MathML descendants
+ * - Namespaced foreign content
+ * - `image`, which the HTML tree builder rewrites to `img`
+ * Most of these are bundled in parse5's `TAG_NAMES` set, but we can also add a few more.
  */
-const STANDARD_HTML_TAGS = new Set(html_tags_namespaceObject);
+const NON_STANDARD_TAGS = new Set([
+    'annotation-xml',
+    'desc',
+    'foreignObject',
+    'image',
+    'malignmark',
+    'mglyph',
+    'mi',
+    'mn',
+    'mo',
+    'ms',
+    'mtext',
+]);
+/**
+ * Standard HTML tags list.
+ * A use case of this is to differentiate custom components tag vs standard HTML tags.
+ *
+ * Unioned from:
+ * - `html-tags`: All modern spec HTML elements
+ * - parse5's `TAG_NAMES`: Elements the HTML tree-construction algorithm has to special-case
+ *   This includes obsolete tags that are still rendered by browsers.
+ * - NON_STANDARD_TAGS: We've had to filter because currently parse5's `TAG_NAMES` set over-enumerates
+ *   tags that are not actually standard HTML tags. It also allows custom tags to be filtered out.
+ */
+const STANDARD_HTML_TAGS = new Set([
+    ...html_tags_namespaceObject,
+    ...Object.values(TAG_NAMES),
+    'acronym', // Obselete tag not included either of the above sources. Add here if we have missed any.
+    'blink',
+].filter(tag => !NON_STANDARD_TAGS.has(tag)));
 /**
  * Table structural tags. Blank lines inside these carry deliberate meaning for
  * `mdxishTables` (e.g. splitting cell content into paragraphs, or deciding
@@ -105351,8 +105389,11 @@ var variable_default = /*#__PURE__*/__webpack_require__.n(variable_);
 const HTML_TAG_RE = /<\/?([a-zA-Z][a-zA-Z0-9-]*)((?:[^>"']*(?:"[^"]*"|'[^']*'))*[^>"']*)>/g;
 /** Matches an HTML element from its opening tag to the matching closing tag. */
 const HTML_ELEMENT_BLOCK_RE = /<([a-zA-Z][a-zA-Z0-9-]*)[\s>][\s\S]*?<\/\1>/g;
+const NEWLINE_RE = /\n/g;
 /** Matches a newline with surrounding horizontal whitespace. */
 const NEWLINE_WITH_WHITESPACE_RE = /[^\S\n]*\n[^\S\n]*/g;
+/** Matches a run of two or more newlines (a blank line) with surrounding horizontal whitespace. */
+const BLANK_LINE_RE = /[^\S\n]*\n(?:[^\S\n]*\n)+[^\S\n]*/g;
 /** Matches a closing block-level tag followed by non-tag text or by a newline then non-blank content. */
 const CLOSE_BLOCK_TAG_BOUNDARY_RE = /<\/([a-zA-Z][a-zA-Z0-9-]*)>\s*(?:(?!<)(\S)|\n([^\n]))/g;
 /** Strips HTML open/close tags. Used to detect non-tag inner text content. */
@@ -105422,7 +105463,6 @@ const EMPTY_CODE_PLACEHOLDER = {
 
 
 
-
 /**
  * Wraps a node in a "pinned" container if sidebar: true is set.
  */
@@ -105457,16 +105497,13 @@ const textToBlock = (text) => [{ children: textToInline(text), type: 'paragraph'
  */
 const ensureLeadingBreaks = (text) => text.replace(/^\n+/, match => '<br>'.repeat(match.length));
 /** Preprocesses magic block body content before parsing. */
-const preprocessBody = (text) => {
-    return ensureLeadingBreaks(text);
-};
+const preprocessBody = (text, hardBreaks) => (hardBreaks ? ensureLeadingBreaks(text) : text);
 const bodyExtensions = mdxishExtensions(FEATURES.magicBlockBody);
 /** Markdown parser */
 const contentParser = unified()
     .data('micromarkExtensions', bodyExtensions.micromarkExtensions)
     .data('fromMarkdownExtensions', bodyExtensions.fromMarkdownExtensions)
     .use(remarkParse)
-    .use(hard_breaks)
     .use(remarkGfm)
     .use(normalize_malformed_md_syntax);
 /**
@@ -105563,17 +105600,21 @@ const processMarkdownInHtmlString = (html) => {
 /**
  * Separate a closing block-level tag from the content that follows it.
  *
- * Each \n in the original text becomes a <br> tag to preserve spacing, then a
- * blank line (\n\n) is appended so CommonMark ends the HTML block and parses
- * the following content as markdown.
+ * A blank line (\n\n) is appended so CommonMark ends the HTML block and parses the
+ * following content as markdown; with hard breaks each \n also becomes a <br> to keep its spacing.
  */
-const separateBlockTagFromContent = (match, tag, inlineChar, nextLineChar) => {
+const separateBlockTagFromContent = (hardBreaks, match, tag, inlineChar, nextLineChar) => {
     if (!BLOCK_LEVEL_TAGS.has(tag.toLowerCase()))
         return match;
-    const newlineCount = (match.match(/\n/g) ?? []).length;
+    const newlineCount = hardBreaks ? (match.match(NEWLINE_RE) ?? []).length : 0;
     const breaks = '<br>'.repeat(newlineCount);
     return `</${tag}>${breaks}\n\n${inlineChar || nextLineChar}`;
 };
+/**
+ * Newlines inside an HTML block become <br> so CommonMark doesn't end the block on a blank
+ * line. Without hard breaks only blank lines break, but they still have to be replaced.
+ */
+const collapseHtmlBlockNewlines = (html, hardBreaks) => html.replace(hardBreaks ? NEWLINE_WITH_WHITESPACE_RE : BLANK_LINE_RE, '<br>');
 /** Escape a leading (possibly indented) `-`/`*`/`+` so cells don't become bullet lists. */
 const escapeLeadingListMarkers = (text) => text.replace(/^([ \t]*)([-*+])(?=[ \t]|$)/gm, '$1\\$2');
 /**
@@ -105581,15 +105622,13 @@ const escapeLeadingListMarkers = (text) => text.replace(/^([ \t]*)([-*+])(?=[ \t
  * so `<ul><li>_text_</li></ul>` won't convert underscores to emphasis.
  * We parse first, then visit html nodes and process their text content.
  */
-const parseTableCell = (text) => {
+const parseTableCell = (text, hardBreaks) => {
     if (!text.trim())
         return [{ type: 'text', value: '' }];
-    // Convert \n (and surrounding whitespace) to <br> inside HTML blocks so
-    // CommonMark doesn't split them on blank lines.
     const escaped = processBackslashEscapes(text);
     const normalized = escaped
-        .replace(HTML_ELEMENT_BLOCK_RE, match => match.replace(NEWLINE_WITH_WHITESPACE_RE, '<br>'))
-        .replace(CLOSE_BLOCK_TAG_BOUNDARY_RE, separateBlockTagFromContent);
+        .replace(HTML_ELEMENT_BLOCK_RE, match => collapseHtmlBlockNewlines(match, hardBreaks))
+        .replace(CLOSE_BLOCK_TAG_BOUNDARY_RE, (match, tag, inlineChar, nextLineChar) => separateBlockTagFromContent(hardBreaks, match, tag, inlineChar, nextLineChar));
     const processed = escapeLeadingListMarkers(normalized);
     const tree = contentParser.runSync(contentParser.parse(processed));
     // Process markdown inside HTML blocks that have non-tag inner text (e.g. `<div>**x**`
@@ -105638,7 +105677,7 @@ const parseApiHeaderTitle = (text) => {
  * Transform a magicBlock node into final MDAST nodes.
  */
 function transformMagicBlock(blockType, data, rawValue, options = {}) {
-    const { compatibilityMode = false, safeMode = false } = options;
+    const { compatibilityMode = false, hardBreaks = true, safeMode = false } = options;
     // Handle empty data by returning placeholder nodes for known block types
     // This allows the editor to show appropriate placeholder UI instead of nothing
     if (Object.keys(data).length < 1) {
@@ -105777,7 +105816,7 @@ function transformMagicBlock(blockType, data, rawValue, options = {}) {
                 });
             }
             if (hasBody) {
-                const bodyBlocks = parseBlock(preprocessBody(calloutJson.body || ''));
+                const bodyBlocks = parseBlock(preprocessBody(calloutJson.body || '', hardBreaks));
                 children.push(...bodyBlocks);
             }
             const calloutElement = {
@@ -105809,12 +105848,12 @@ function transformMagicBlock(blockType, data, rawValue, options = {}) {
                 mapped[rowIndex][colIndex] = v;
                 return mapped;
             }, []);
-            const tokenizeCell = compatibilityMode
-                ? textToBlock
-                : parseTableCell;
+            const tokenizeCell = compatibilityMode ? textToBlock : (text) => parseTableCell(text, hardBreaks);
             const tableChildren = Array.from({ length: rows + 1 }, (_, y) => ({
                 children: Array.from({ length: cols }, (__, x) => ({
-                    children: sparseData[y]?.[x] ? tokenizeCell(preprocessBody(sparseData[y][x])) : [{ type: 'text', value: '' }],
+                    children: sparseData[y]?.[x]
+                        ? tokenizeCell(preprocessBody(sparseData[y][x], hardBreaks))
+                        : [{ type: 'text', value: '' }],
                     type: y === 0 ? 'tableHead' : 'tableCell',
                 })),
                 type: 'tableRow',
@@ -107690,7 +107729,7 @@ function preprocessContent(content, opts) {
     return processSnakeCaseComponent(result, { knownComponents });
 }
 function mdxishAstProcessor(mdContent, opts = {}) {
-    const { components: userComponents = {}, newEditorTypes = false, safeMode = false, useTailwind } = opts;
+    const { components: userComponents = {}, hardBreaks: enableHardBreaks = true, newEditorTypes = false, safeMode = false, useTailwind, } = opts;
     const components = {
         ...loadComponents(),
         ...userComponents,
@@ -107719,7 +107758,7 @@ function mdxishAstProcessor(mdContent, opts = {}) {
         // The next few transformers must appear after mdxishMdxComponentBlocks
         // so nodes produced by the inline re-parse of component bodies
         // (e.g. code/image/embed inside <Tabs>) get visited too
-        .use(magic_block_transformer)
+        .use(magic_block_transformer, { hardBreaks: enableHardBreaks })
         .use(transform_images, { isMdxish: true })
         .use(defaultTransformers)
         .use(newEditorTypes ? inline_mdx_blocks : undefined) // Merge inline html components (e.g. <Anchor>) into MDAST nodes
@@ -107776,7 +107815,7 @@ function mdxishMdastToMd(mdast) {
  * @see .claude/context/MDXish/Processor Overview.md
  */
 function mdxish(mdContent, opts = {}) {
-    const { components: userComponents = {}, safeMode = false, variables } = opts;
+    const { components: userComponents = {}, hardBreaks: enableHardBreaks = true, safeMode = false, variables } = opts;
     const components = {
         ...loadComponents(),
         ...userComponents,
@@ -107788,7 +107827,7 @@ function mdxish(mdContent, opts = {}) {
     const { processor, parserReadyContent } = mdxishAstProcessor(contentWithoutComments, opts);
     processor
         .use(safeMode ? undefined : evaluate_exports) // Evaluate `export const/function` and stash scope on file.data.mdxishScope
-        .use(hard_breaks) // Must precede evaluateExpressions to avoid splitting the \n in an evaluated template literal into a <br> node
+        .use(enableHardBreaks ? hard_breaks : undefined) // Must precede evaluateExpressions to avoid splitting the \n in an evaluated template literal into a <br> node
         .use(safeMode ? undefined : evaluate_expressions) // Evaluate self-contained MDX expressions (e.g. `{1+1}`)
         .use(safeMode ? undefined : evaluate_style_block_expressions) // Evaluate `<style>{`...`}</style>` template literals into plain CSS
         .use(variables_code, { variables }) // Resolve <<...>> and {user.*} inside code and inline code nodes

package/dist/main.node.js

@@ -25260,7 +25260,7 @@ async function loadStylesheet(id, base) {
 async function loadModule() {
     throw new Error('The browser build does not support plugins or config files.');
 }
-async function createCompiler({ darkModeDataAttribute }) {
+async function createCompiler({ darkModeDataAttribute, darkModeRootSelector, }) {
     let css = `
 @layer theme, base, components, utilities;
 
@@ -25268,9 +25268,12 @@ async function createCompiler({ darkModeDataAttribute }) {
 @import "tailwindcss/utilities.css" layer(utilities);
 `;
     if (darkModeDataAttribute) {
+        // Anchors `dark:` to `darkModeRootSelector`'s own attribute instead of any ancestor's,
+        // when supplied — see the `darkModeRootSelector` param doc below for why there's no default.
+        const root = darkModeRootSelector || '';
         css += `
 
-@custom-variant dark (&:where([${darkModeDataAttribute}=dark], [${darkModeDataAttribute}=dark] *));`;
+@custom-variant dark (&:where(${root}[${darkModeDataAttribute}=dark], ${root}[${darkModeDataAttribute}=dark] *));`;
     }
     return Hu(css, {
         base: '/',
@@ -25278,8 +25281,8 @@ async function createCompiler({ darkModeDataAttribute }) {
         loadModule,
     });
 }
-async function tailwindCompiler(classes, { prefix, darkModeDataAttribute }) {
-    const compiler = await createCompiler({ darkModeDataAttribute });
+async function tailwindCompiler(classes, { prefix, darkModeDataAttribute, darkModeRootSelector, }) {
+    const compiler = await createCompiler({ darkModeDataAttribute, darkModeRootSelector });
     const css = compiler.build(Array.from(classes));
     return lib_postcss([postcss_prefix_selector_default()({ prefix })]).process(css, { from: undefined });
 }
@@ -25294,7 +25297,7 @@ const traverse = (node, callback) => {
         traverse(child, callback);
     });
 };
-const TailwindStyle = ({ children, darkModeDataAttribute }) => {
+const TailwindStyle = ({ children, darkModeDataAttribute, darkModeRootSelector }) => {
     const [stylesheet, setStylesheet] = (0,external_react_.useState)('');
     const classesSet = (0,external_react_.useRef)(new Set());
     const ref = (0,external_react_.useRef)(null);
@@ -25318,6 +25321,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
             const sheet = await tailwindCompiler(classes, {
                 prefix: `.${tailwindPrefix}`,
                 darkModeDataAttribute,
+                darkModeRootSelector,
             });
             /* @note: don't insert an empty stylesheet */
             if (sheet.css.match(/^@layer utilities;/m))
@@ -25325,7 +25329,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
             setStylesheet(sheet.css);
         };
         run();
-    }, [classes, darkModeDataAttribute]);
+    }, [classes, darkModeDataAttribute, darkModeRootSelector]);
     /*
      * @note: execute once on load
      */
@@ -95982,6 +95986,7 @@ var allCSS2RNProps = __webpack_unused_export__ = flatten([allProps, CSS2RNProps]
 
 
 
+
 /**
  * Extract word boundaries from camelCase strings (e.g., "borderWidth" -> ["border", "width"])
  */
@@ -96061,10 +96066,43 @@ const CUSTOM_PROP_BOUNDARIES = [
  */
 const RUNTIME_COMPONENT_TAGS = new Set(['Variable', 'variable', 'html-block', 'rdme-pin']);
 /**
- * Standard HTML tags that should never be treated as custom components.
- * Uses the html-tags package, converted to a Set<string> for efficient lookups.
+ * Elements that are not actually standard HTML tags, or those that we intentionally
+ * don't want to treat as one & is mute to check with. These include:
+ * - SVG/MathML descendants
+ * - Namespaced foreign content
+ * - `image`, which the HTML tree builder rewrites to `img`
+ * Most of these are bundled in parse5's `TAG_NAMES` set, but we can also add a few more.
  */
-const STANDARD_HTML_TAGS = new Set(html_tags_namespaceObject);
+const NON_STANDARD_TAGS = new Set([
+    'annotation-xml',
+    'desc',
+    'foreignObject',
+    'image',
+    'malignmark',
+    'mglyph',
+    'mi',
+    'mn',
+    'mo',
+    'ms',
+    'mtext',
+]);
+/**
+ * Standard HTML tags list.
+ * A use case of this is to differentiate custom components tag vs standard HTML tags.
+ *
+ * Unioned from:
+ * - `html-tags`: All modern spec HTML elements
+ * - parse5's `TAG_NAMES`: Elements the HTML tree-construction algorithm has to special-case
+ *   This includes obsolete tags that are still rendered by browsers.
+ * - NON_STANDARD_TAGS: We've had to filter because currently parse5's `TAG_NAMES` set over-enumerates
+ *   tags that are not actually standard HTML tags. It also allows custom tags to be filtered out.
+ */
+const STANDARD_HTML_TAGS = new Set([
+    ...html_tags_namespaceObject,
+    ...Object.values(TAG_NAMES),
+    'acronym', // Obselete tag not included either of the above sources. Add here if we have missed any.
+    'blink',
+].filter(tag => !NON_STANDARD_TAGS.has(tag)));
 /**
  * Table structural tags. Blank lines inside these carry deliberate meaning for
  * `mdxishTables` (e.g. splitting cell content into paragraphs, or deciding
@@ -125534,8 +125572,11 @@ var variable_dist_default = /*#__PURE__*/__webpack_require__.n(variable_dist);
 const HTML_TAG_RE = /<\/?([a-zA-Z][a-zA-Z0-9-]*)((?:[^>"']*(?:"[^"]*"|'[^']*'))*[^>"']*)>/g;
 /** Matches an HTML element from its opening tag to the matching closing tag. */
 const HTML_ELEMENT_BLOCK_RE = /<([a-zA-Z][a-zA-Z0-9-]*)[\s>][\s\S]*?<\/\1>/g;
+const NEWLINE_RE = /\n/g;
 /** Matches a newline with surrounding horizontal whitespace. */
 const NEWLINE_WITH_WHITESPACE_RE = /[^\S\n]*\n[^\S\n]*/g;
+/** Matches a run of two or more newlines (a blank line) with surrounding horizontal whitespace. */
+const BLANK_LINE_RE = /[^\S\n]*\n(?:[^\S\n]*\n)+[^\S\n]*/g;
 /** Matches a closing block-level tag followed by non-tag text or by a newline then non-blank content. */
 const CLOSE_BLOCK_TAG_BOUNDARY_RE = /<\/([a-zA-Z][a-zA-Z0-9-]*)>\s*(?:(?!<)(\S)|\n([^\n]))/g;
 /** Strips HTML open/close tags. Used to detect non-tag inner text content. */
@@ -125605,7 +125646,6 @@ const EMPTY_CODE_PLACEHOLDER = {
 
 
 
-
 /**
  * Wraps a node in a "pinned" container if sidebar: true is set.
  */
@@ -125640,16 +125680,13 @@ const textToBlock = (text) => [{ children: textToInline(text), type: 'paragraph'
  */
 const ensureLeadingBreaks = (text) => text.replace(/^\n+/, match => '<br>'.repeat(match.length));
 /** Preprocesses magic block body content before parsing. */
-const preprocessBody = (text) => {
-    return ensureLeadingBreaks(text);
-};
+const preprocessBody = (text, hardBreaks) => (hardBreaks ? ensureLeadingBreaks(text) : text);
 const bodyExtensions = mdxishExtensions(FEATURES.magicBlockBody);
 /** Markdown parser */
 const contentParser = unified()
     .data('micromarkExtensions', bodyExtensions.micromarkExtensions)
     .data('fromMarkdownExtensions', bodyExtensions.fromMarkdownExtensions)
     .use(remarkParse)
-    .use(hard_breaks)
     .use(remarkGfm)
     .use(normalize_malformed_md_syntax);
 /**
@@ -125746,17 +125783,21 @@ const processMarkdownInHtmlString = (html) => {
 /**
  * Separate a closing block-level tag from the content that follows it.
  *
- * Each \n in the original text becomes a <br> tag to preserve spacing, then a
- * blank line (\n\n) is appended so CommonMark ends the HTML block and parses
- * the following content as markdown.
+ * A blank line (\n\n) is appended so CommonMark ends the HTML block and parses the
+ * following content as markdown; with hard breaks each \n also becomes a <br> to keep its spacing.
  */
-const separateBlockTagFromContent = (match, tag, inlineChar, nextLineChar) => {
+const separateBlockTagFromContent = (hardBreaks, match, tag, inlineChar, nextLineChar) => {
     if (!BLOCK_LEVEL_TAGS.has(tag.toLowerCase()))
         return match;
-    const newlineCount = (match.match(/\n/g) ?? []).length;
+    const newlineCount = hardBreaks ? (match.match(NEWLINE_RE) ?? []).length : 0;
     const breaks = '<br>'.repeat(newlineCount);
     return `</${tag}>${breaks}\n\n${inlineChar || nextLineChar}`;
 };
+/**
+ * Newlines inside an HTML block become <br> so CommonMark doesn't end the block on a blank
+ * line. Without hard breaks only blank lines break, but they still have to be replaced.
+ */
+const collapseHtmlBlockNewlines = (html, hardBreaks) => html.replace(hardBreaks ? NEWLINE_WITH_WHITESPACE_RE : BLANK_LINE_RE, '<br>');
 /** Escape a leading (possibly indented) `-`/`*`/`+` so cells don't become bullet lists. */
 const escapeLeadingListMarkers = (text) => text.replace(/^([ \t]*)([-*+])(?=[ \t]|$)/gm, '$1\\$2');
 /**
@@ -125764,15 +125805,13 @@ const escapeLeadingListMarkers = (text) => text.replace(/^([ \t]*)([-*+])(?=[ \t
  * so `<ul><li>_text_</li></ul>` won't convert underscores to emphasis.
  * We parse first, then visit html nodes and process their text content.
  */
-const parseTableCell = (text) => {
+const parseTableCell = (text, hardBreaks) => {
     if (!text.trim())
         return [{ type: 'text', value: '' }];
-    // Convert \n (and surrounding whitespace) to <br> inside HTML blocks so
-    // CommonMark doesn't split them on blank lines.
     const escaped = processBackslashEscapes(text);
     const normalized = escaped
-        .replace(HTML_ELEMENT_BLOCK_RE, match => match.replace(NEWLINE_WITH_WHITESPACE_RE, '<br>'))
-        .replace(CLOSE_BLOCK_TAG_BOUNDARY_RE, separateBlockTagFromContent);
+        .replace(HTML_ELEMENT_BLOCK_RE, match => collapseHtmlBlockNewlines(match, hardBreaks))
+        .replace(CLOSE_BLOCK_TAG_BOUNDARY_RE, (match, tag, inlineChar, nextLineChar) => separateBlockTagFromContent(hardBreaks, match, tag, inlineChar, nextLineChar));
     const processed = escapeLeadingListMarkers(normalized);
     const tree = contentParser.runSync(contentParser.parse(processed));
     // Process markdown inside HTML blocks that have non-tag inner text (e.g. `<div>**x**`
@@ -125821,7 +125860,7 @@ const parseApiHeaderTitle = (text) => {
  * Transform a magicBlock node into final MDAST nodes.
  */
 function transformMagicBlock(blockType, data, rawValue, options = {}) {
-    const { compatibilityMode = false, safeMode = false } = options;
+    const { compatibilityMode = false, hardBreaks = true, safeMode = false } = options;
     // Handle empty data by returning placeholder nodes for known block types
     // This allows the editor to show appropriate placeholder UI instead of nothing
     if (Object.keys(data).length < 1) {
@@ -125960,7 +125999,7 @@ function transformMagicBlock(blockType, data, rawValue, options = {}) {
                 });
             }
             if (hasBody) {
-                const bodyBlocks = parseBlock(preprocessBody(calloutJson.body || ''));
+                const bodyBlocks = parseBlock(preprocessBody(calloutJson.body || '', hardBreaks));
                 children.push(...bodyBlocks);
             }
             const calloutElement = {
@@ -125992,12 +126031,12 @@ function transformMagicBlock(blockType, data, rawValue, options = {}) {
                 mapped[rowIndex][colIndex] = v;
                 return mapped;
             }, []);
-            const tokenizeCell = compatibilityMode
-                ? textToBlock
-                : parseTableCell;
+            const tokenizeCell = compatibilityMode ? textToBlock : (text) => parseTableCell(text, hardBreaks);
             const tableChildren = Array.from({ length: rows + 1 }, (_, y) => ({
                 children: Array.from({ length: cols }, (__, x) => ({
-                    children: sparseData[y]?.[x] ? tokenizeCell(preprocessBody(sparseData[y][x])) : [{ type: 'text', value: '' }],
+                    children: sparseData[y]?.[x]
+                        ? tokenizeCell(preprocessBody(sparseData[y][x], hardBreaks))
+                        : [{ type: 'text', value: '' }],
                     type: y === 0 ? 'tableHead' : 'tableCell',
                 })),
                 type: 'tableRow',
@@ -127873,7 +127912,7 @@ function preprocessContent(content, opts) {
     return processSnakeCaseComponent(result, { knownComponents });
 }
 function mdxishAstProcessor(mdContent, opts = {}) {
-    const { components: userComponents = {}, newEditorTypes = false, safeMode = false, useTailwind } = opts;
+    const { components: userComponents = {}, hardBreaks: enableHardBreaks = true, newEditorTypes = false, safeMode = false, useTailwind, } = opts;
     const components = {
         ...loadComponents(),
         ...userComponents,
@@ -127902,7 +127941,7 @@ function mdxishAstProcessor(mdContent, opts = {}) {
         // The next few transformers must appear after mdxishMdxComponentBlocks
         // so nodes produced by the inline re-parse of component bodies
         // (e.g. code/image/embed inside <Tabs>) get visited too
-        .use(magic_block_transformer)
+        .use(magic_block_transformer, { hardBreaks: enableHardBreaks })
         .use(transform_images, { isMdxish: true })
         .use(defaultTransformers)
         .use(newEditorTypes ? inline_mdx_blocks : undefined) // Merge inline html components (e.g. <Anchor>) into MDAST nodes
@@ -127959,7 +127998,7 @@ function mdxishMdastToMd(mdast) {
  * @see .claude/context/MDXish/Processor Overview.md
  */
 function mdxish(mdContent, opts = {}) {
-    const { components: userComponents = {}, safeMode = false, variables } = opts;
+    const { components: userComponents = {}, hardBreaks: enableHardBreaks = true, safeMode = false, variables } = opts;
     const components = {
         ...loadComponents(),
         ...userComponents,
@@ -127971,7 +128010,7 @@ function mdxish(mdContent, opts = {}) {
     const { processor, parserReadyContent } = mdxishAstProcessor(contentWithoutComments, opts);
     processor
         .use(safeMode ? undefined : evaluate_exports) // Evaluate `export const/function` and stash scope on file.data.mdxishScope
-        .use(hard_breaks) // Must precede evaluateExpressions to avoid splitting the \n in an evaluated template literal into a <br> node
+        .use(enableHardBreaks ? hard_breaks : undefined) // Must precede evaluateExpressions to avoid splitting the \n in an evaluated template literal into a <br> node
         .use(safeMode ? undefined : evaluate_expressions) // Evaluate self-contained MDX expressions (e.g. `{1+1}`)
         .use(safeMode ? undefined : evaluate_style_block_expressions) // Evaluate `<style>{`...`}</style>` template literals into plain CSS
         .use(variables_code, { variables }) // Resolve <<...>> and {user.*} inside code and inline code nodes