@readme/markdown 15.4.0 → 15.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.node.js CHANGED
@@ -19045,7 +19045,7 @@ module.exports = function () {
19045
19045
 
19046
19046
  /***/ },
19047
19047
 
19048
- /***/ 5814
19048
+ /***/ 8719
19049
19049
  (module, __webpack_exports__, __webpack_require__) {
19050
19050
 
19051
19051
  "use strict";
@@ -19186,6 +19186,63 @@ __webpack_require__.d(util_types_namespaceObject, {
19186
19186
  // EXTERNAL MODULE: external "react"
19187
19187
  var external_react_ = __webpack_require__(4953);
19188
19188
  var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
19189
+ ;// ./hooks/useRestartAnimatedImages/index.tsx
19190
+
19191
+ /**
19192
+ * GIF is the one extension that implies animation. `.webp` and `.png` (the extension an APNG
19193
+ * ships under) are overwhelmingly static, so matching them would reload far more images than
19194
+ * it rewinds; telling those apart needs the bytes, not the URL.
19195
+ */
19196
+ const ANIMATED_IMAGE_SRC = /\.gif(\?|#|$)/i;
19197
+ const restartAnimatedImages = (root) => {
19198
+ root?.querySelectorAll('img').forEach(img => {
19199
+ if (!ANIMATED_IMAGE_SRC.test(img.src))
19200
+ return;
19201
+ const { src } = img;
19202
+ // There's no seek API for animated images; reassigning `src` is the only reset
19203
+ img.src = '';
19204
+ img.src = src;
19205
+ });
19206
+ };
19207
+ const useRestartAfterFirstPaint = (revealKey, restart) => {
19208
+ const isFirstRender = (0,external_react_.useRef)(true);
19209
+ const latestRestart = (0,external_react_.useRef)(restart);
19210
+ latestRestart.current = restart;
19211
+ (0,external_react_.useEffect)(() => {
19212
+ if (isFirstRender.current) {
19213
+ isFirstRender.current = false;
19214
+ return;
19215
+ }
19216
+ latestRestart.current();
19217
+ }, [revealKey]);
19218
+ };
19219
+ /**
19220
+ * Restarts GIF playback inside the panel that just became active.
19221
+ *
19222
+ * Tabs keep every panel mounted, so an <img> is never re-created and a GIF is
19223
+ * shown mid-loop (or frozen on its last frame) when its tab is re-selected.
19224
+ *
19225
+ * @returns a ref to attach to each panel element, indexed by tab.
19226
+ */
19227
+ function useRestartAnimatedImages(activeIndex) {
19228
+ const panelRefs = (0,external_react_.useRef)([]);
19229
+ useRestartAfterFirstPaint(activeIndex, () => restartAnimatedImages(panelRefs.current[activeIndex]));
19230
+ return panelRefs;
19231
+ }
19232
+ /**
19233
+ * Restarts GIF playback inside an element that has just been revealed after being hidden —
19234
+ * a collapsed <details>, whose images have been animating out of sight since page load.
19235
+ */
19236
+ function useRestartAnimatedImagesOnReveal(isRevealed) {
19237
+ const contentRef = (0,external_react_.useRef)(null);
19238
+ useRestartAfterFirstPaint(isRevealed, () => {
19239
+ // Rewinding content the reader just hid would be wasted work
19240
+ if (isRevealed)
19241
+ restartAnimatedImages(contentRef.current);
19242
+ });
19243
+ return contentRef;
19244
+ }
19245
+
19189
19246
  ;// ./components/Icon/index.tsx
19190
19247
 
19191
19248
  /** @see https://docs-v5.fontawesome.com/web/reference-icons */
@@ -19210,14 +19267,16 @@ const Icon = ({ className, faClassName, icon, iconColor }) => {
19210
19267
 
19211
19268
 
19212
19269
 
19270
+
19213
19271
  const Accordion = ({ children, icon, iconColor, title }) => {
19214
19272
  const [isOpen, setIsOpen] = (0,external_react_.useState)(false);
19273
+ const contentRef = useRestartAnimatedImagesOnReveal(isOpen);
19215
19274
  return (external_react_default().createElement("details", { className: "Accordion", onToggle: () => setIsOpen(!isOpen) },
19216
19275
  external_react_default().createElement("summary", { className: "Accordion-title" },
19217
19276
  external_react_default().createElement("i", { className: `Accordion-toggleIcon${isOpen ? '_opened' : ''} fa fa-regular fa-chevron-right` }),
19218
19277
  icon && external_react_default().createElement(components_Icon, { className: "Accordion-icon", icon: icon, iconColor: iconColor }),
19219
19278
  title),
19220
- external_react_default().createElement("div", { className: "Accordion-content" }, children)));
19279
+ external_react_default().createElement("div", { ref: contentRef, className: "Accordion-content" }, children)));
19221
19280
  };
19222
19281
  /* harmony default export */ const components_Accordion = (Accordion);
19223
19282
 
@@ -25080,11 +25139,13 @@ function TableOfContents({ children }) {
25080
25139
 
25081
25140
 
25082
25141
 
25142
+
25083
25143
  const Tab = ({ children }) => {
25084
25144
  return external_react_default().createElement("div", { className: "TabContent" }, children);
25085
25145
  };
25086
25146
  const Tabs = ({ children }) => {
25087
25147
  const [activeTab, setActiveTab] = (0,external_react_.useState)(0);
25148
+ const panelRefs = useRestartAnimatedImages(activeTab);
25088
25149
  // React passes `children` as a single element when there's only one child, so normalize.
25089
25150
  const tabs = external_react_default().Children.toArray(children);
25090
25151
  return (external_react_default().createElement("div", { className: "TabGroup" },
@@ -25092,7 +25153,9 @@ const Tabs = ({ children }) => {
25092
25153
  external_react_default().createElement("nav", { className: "TabGroup-nav" }, tabs.map((tab, index) => (external_react_default().createElement("button", { key: tab.key, className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, onClick: () => setActiveTab(index) },
25093
25154
  tab.props.icon && (external_react_default().createElement(components_Icon, { className: "TabGroup-icon", icon: tab.props.icon, iconColor: tab.props.iconColor })),
25094
25155
  tab.props.title))))),
25095
- external_react_default().createElement("section", null, tabs.map((tab, index) => (external_react_default().createElement("div", { key: tab.key, hidden: index !== activeTab }, tab))))));
25156
+ external_react_default().createElement("section", null, tabs.map((tab, index) => (external_react_default().createElement("div", { key: tab.key, ref: el => {
25157
+ panelRefs.current[index] = el;
25158
+ }, hidden: index !== activeTab }, tab))))));
25096
25159
  };
25097
25160
  /* harmony default export */ const components_Tabs = (Tabs);
25098
25161
 
@@ -96573,6 +96636,10 @@ function syntax_createTokenize(mode) {
96573
96636
  effects.consume(code);
96574
96637
  return inBraceExpr;
96575
96638
  }
96639
+ // A raw `<` can't sit in an opening tag (quotes/braces are handled above);
96640
+ // bailing bounds each attempt to the next `<` instead of rescanning the line.
96641
+ if (code === codes.lessThan)
96642
+ return nok(code);
96576
96643
  effects.consume(code);
96577
96644
  return afterOpenTagName;
96578
96645
  }
@@ -121779,7 +121846,7 @@ const listMarkerRegex = /^(?:[*+-]|\d+[.)])(?:([\r\n]| {1,3})|$)/;
121779
121846
  * with their checkbox intact (for example, `- [ ]`) instead of dropping it
121780
121847
  * We can add more adjustments if needed
121781
121848
  */
121782
- const compile_list_item_listItem = (node, parent, state, info) => {
121849
+ const compile_list_item_listItem = ((node, parent, state, info) => {
121783
121850
  const head = node.children[0];
121784
121851
  const isCheckbox = typeof node.checked === 'boolean' && head && head.type === 'paragraph';
121785
121852
  if (!isCheckbox) {
@@ -121803,15 +121870,47 @@ const compile_list_item_listItem = (node, parent, state, info) => {
121803
121870
  return `${marker}${actualSeparator}${checkbox}`;
121804
121871
  });
121805
121872
  return value;
121806
- };
121873
+ });
121807
121874
  /* harmony default export */ const list_item = (compile_list_item_listItem);
121808
121875
 
121809
121876
  ;// ./processor/compile/plain.ts
121810
121877
  const plain_plain = (node) => node.value;
121811
121878
  /* harmony default export */ const compile_plain = (plain_plain);
121812
121879
 
121880
+ ;// ./processor/compile/table-cell-block-markers.ts
121881
+ const CELL_START_BLOCK_MARKER = /^(?:[-+](?=\s|$)|#{1,6}(?=\s|$)|>)/;
121882
+ const BR_HTML = /^\s*<br\s*\/?>\s*$/i;
121883
+ const isLineBreak = (node) => {
121884
+ if (node.type === 'break')
121885
+ return true;
121886
+ if (node.type === 'html')
121887
+ return BR_HTML.test(node.value);
121888
+ return node.type === 'mdxJsxTextElement' && 'name' in node && node.name?.toLowerCase() === 'br';
121889
+ };
121890
+ const followsLineBreak = (node, parent) => {
121891
+ const siblings = (parent?.children ?? []);
121892
+ const previous = siblings[siblings.indexOf(node) - 1];
121893
+ return !!previous && isLineBreak(previous);
121894
+ };
121895
+ /**
121896
+ * Re-escapes a leading block marker (`-`, `+`, `#`, `>`) at the start of a table cell, or
121897
+ * after a `<br />` within one.
121898
+ *
121899
+ * A cell is serialized mid-line, so the `atBreak` patterns that escape these characters
121900
+ * never fire and an author's `| \- one |` round trips to `| - one |` (RM-17203). Cells are
121901
+ * serialized as `containerPhrasing(cell, { before: '|' })`, so `|` marks the cell start.
121902
+ */
121903
+ const escapeCellStartBlockMarker = (serialized, node, parent, state, info) => {
121904
+ if (serialized.startsWith('\\') || !CELL_START_BLOCK_MARKER.test(serialized))
121905
+ return serialized;
121906
+ if (!state.stack.includes('tableCell') || !(info.before === '|' || followsLineBreak(node, parent)))
121907
+ return serialized;
121908
+ return `\\${serialized}`;
121909
+ };
121910
+
121813
121911
  ;// ./processor/compile/text.ts
121814
121912
 
121913
+
121815
121914
  // A `_` flanked by word characters can never open or close emphasis under
121816
121915
  // CommonMark's flanking rules, so the escape mdast-util-to-markdown adds to
121817
121916
  // intraword underscores is unnecessary and only produces noisy `\_` diffs.
@@ -121819,9 +121918,10 @@ const plain_plain = (node) => node.value;
121819
121918
  const INTRAWORD_UNDERSCORE_ESCAPE = /(?<=[\p{L}\p{N}_])\\_(?=[\p{L}\p{N}_]|\\_)/gu;
121820
121919
  const compile_text_text = (node, parent, state, info) => {
121821
121920
  const serialized = handle.text(node, parent, state, info);
121822
- return serialized.replace(INTRAWORD_UNDERSCORE_ESCAPE, '_');
121921
+ return escapeCellStartBlockMarker(serialized, node, parent, state, info);
121823
121922
  };
121824
- /* harmony default export */ const compile_text = (compile_text_text);
121923
+ const mdxishText = (node, parent, state, info) => compile_text_text(node, parent, state, info).replace(INTRAWORD_UNDERSCORE_ESCAPE, '_');
121924
+ /* harmony default export */ const compile_text = (mdxishText);
121825
121925
 
121826
121926
  ;// ./processor/compile/index.ts
121827
121927
 
@@ -121853,6 +121953,7 @@ function compilers(mdxish = false) {
121853
121953
  html: compile_compatibility,
121854
121954
  i: compile_compatibility,
121855
121955
  plain: compile_plain,
121956
+ text: compile_text_text,
121856
121957
  yaml: compile_compatibility,
121857
121958
  // needed only for mdxish
121858
121959
  ...(mdxish && { list: compile_list }),
@@ -123921,13 +124022,14 @@ function restoreCodeBlocks(content, protectedCode) {
123921
124022
  *
123922
124023
  * The attribute portion skips over quoted strings (`"..."` and `'...'`) so that
123923
124024
  * a `/>` inside an attribute value (e.g. `title="use /> here"`) does not cause
123924
- * a premature match.
124025
+ * a premature match, and stops at an unquoted `<` so a stray `<x` in prose
124026
+ * doesn't scan to the end of the document (quadratic).
123925
124027
  *
123926
124028
  * Only matches lowercase tag names to avoid interfering with PascalCase
123927
124029
  * JSX custom components (e.g. `<MyComponent />`), which are handled
123928
124030
  * separately by components/mdx-blocks.
123929
124031
  */
123930
- const SELF_CLOSING_TAG_RE = /<([a-z][a-z0-9-]*)((?:\s+(?:[^>"']*(?:"[^"]*"|'[^']*'))*[^>"']*)?)?\s*\/>/g;
124032
+ const SELF_CLOSING_TAG_RE = /<([a-z][a-z0-9-]*)((?:\s+(?:[^<>"']*(?:"[^"]*"|'[^']*'))*[^<>"']*)?)?\s*\/>/g;
123931
124033
  /**
123932
124034
  * String-level preprocessor that converts self-closing non-void HTML tags
123933
124035
  * into explicitly closed tags.
@@ -124592,8 +124694,9 @@ function terminateHtmlFlowBlocks(content) {
124592
124694
 
124593
124695
 
124594
124696
 
124595
- // Matches a JSX attribute expression (e.g. `key={i}`) anywhere in a string. */
124596
- const NESTED_ATTR_EXPRESSION_RE = /[\w-]+\s*=\s*\{/;
124697
+ // Matches a JSX attribute expression (e.g. `key={i}`) anywhere in a string. One name
124698
+ // char suffices for existence — `[\w-]+` backtracked quadratically over huge attributes.
124699
+ const NESTED_ATTR_EXPRESSION_RE = /[\w-]\s*=\s*\{/;
124597
124700
  // Name shape mirrors `componentTagPattern`; the lookbehind skips the inner tag
124598
124701
  // of a legacy `<<VARIABLE>>`.
124599
124702
  const NESTED_COMPONENT_TAG_RE = /(?<!<)<([A-Z][A-Za-z0-9_]*)[\s/>]/g;
@@ -124892,150 +124995,6 @@ const mdxishMdxComponentBlocks = (opts = {}) => (tree, file) => {
124892
124995
  };
124893
124996
  /* harmony default export */ const mdx_blocks = (mdxishMdxComponentBlocks);
124894
124997
 
124895
- ;// ./processor/transform/mdxish/components/self-closing-blocks.ts
124896
-
124897
-
124898
- /**
124899
- * Tags to process as self-closing blocks.
124900
- * These components use simple string attributes (no JSX expressions like `data={[...]}`).
124901
- * Components with JSX expression attributes should NOT be added here as parseAttributes
124902
- * cannot handle them correctly.
124903
- */
124904
- const SELF_CLOSING_BLOCK_TAGS = new Set(['Embed', 'Recipe']);
124905
- // Regex to match self-closing PascalCase tags (handles multi-line)
124906
- const selfClosingTagPattern = /^<([A-Z][A-Za-z0-9_]*)([\s\S]*?)\/>$/;
124907
- /**
124908
- * Try to convert a paragraph node containing a self-closing JSX component into an mdxJsxFlowElement.
124909
- * Returns the new node if conversion succeeded, or null if the node doesn't match.
124910
- */
124911
- const tryConvertToMdxNode = (node) => {
124912
- if (node.children.length !== 1)
124913
- return null;
124914
- const child = node.children[0];
124915
- if (child.type !== 'html')
124916
- return null;
124917
- const value = child.value?.trim();
124918
- if (!value)
124919
- return null;
124920
- const match = value.match(selfClosingTagPattern);
124921
- if (!match)
124922
- return null;
124923
- const [, tag, attrString] = match;
124924
- if (!SELF_CLOSING_BLOCK_TAGS.has(tag))
124925
- return null;
124926
- return {
124927
- type: 'mdxJsxFlowElement',
124928
- name: tag,
124929
- attributes: parseAttributes(attrString),
124930
- children: [],
124931
- position: node.position,
124932
- };
124933
- };
124934
- /**
124935
- * Transform paragraph-wrapped self-closing JSX components into mdxJsxFlowElement nodes.
124936
- *
124937
- * CommonMark wraps multi-line JSX in paragraphs when the opening tag isn't complete
124938
- * on one line. This plugin detects these structures and unwraps them for components
124939
- * in the SELF_CLOSING_BLOCK_TAGS allowlist.
124940
- *
124941
- * Input structure:
124942
- * ```
124943
- * paragraph > html: "<Embed\n typeOfEmbed=\"youtube\"\n/>"
124944
- * ```
124945
- *
124946
- * Output structure:
124947
- * ```
124948
- * mdxJsxFlowElement: { name: "Embed", attributes: [...], children: [] }
124949
- * ```
124950
- */
124951
- const mdxishSelfClosingBlocks = () => tree => {
124952
- visit(tree, 'paragraph', (node, index, parent) => {
124953
- if (index === undefined || !parent)
124954
- return;
124955
- const mdxNode = tryConvertToMdxNode(node);
124956
- if (mdxNode) {
124957
- parent.children.splice(index, 1, mdxNode);
124958
- }
124959
- });
124960
- };
124961
- /* harmony default export */ const self_closing_blocks = (mdxishSelfClosingBlocks);
124962
-
124963
- ;// ./processor/transform/mdxish/components/snake-case-components.ts
124964
-
124965
-
124966
- /**
124967
- * Replaces snake_case component names with valid HTML placeholders.
124968
- * Required because remark-parse rejects tags with underscores.
124969
- * Example: `<Snake_case />` → `<MDXishSnakeCase0 />`
124970
- *
124971
- * Code blocks and inline code are protected and will not be transformed.
124972
- *
124973
- * @param content - The markdown content to process
124974
- * @param options - Options including knownComponents to filter by
124975
- */
124976
- function processSnakeCaseComponent(content, options = {}) {
124977
- const { knownComponents } = options;
124978
- // Early exit if no potential snake_case components
124979
- if (!/[A-Z][A-Za-z0-9]*_[A-Za-z0-9_]*/.test(content)) {
124980
- return { content, mapping: {} };
124981
- }
124982
- // Step 1: Extract code blocks to protect them from transformation
124983
- const { protectedCode, protectedContent } = protectCodeBlocks(content);
124984
- // Find the highest existing placeholder number to avoid collisions
124985
- // e.g., if content has <MDXishSnakeCase0 />, start counter from 1
124986
- const placeholderPattern = /MDXishSnakeCase(\d+)/g;
124987
- let startCounter = 0;
124988
- let placeholderMatch;
124989
- while ((placeholderMatch = placeholderPattern.exec(content)) !== null) {
124990
- const num = parseInt(placeholderMatch[1], 10);
124991
- if (num >= startCounter) {
124992
- startCounter = num + 1;
124993
- }
124994
- }
124995
- const mapping = {};
124996
- const reverseMap = new Map();
124997
- let counter = startCounter;
124998
- // Step 2: Transform snake_case components in non-code content
124999
- const processedContent = protectedContent.replace(componentTagPattern, (match, tagName, attrs, selfClosing) => {
125000
- if (!tagName.includes('_')) {
125001
- return match;
125002
- }
125003
- const isClosing = tagName.startsWith('/');
125004
- const cleanTagName = isClosing ? tagName.slice(1) : tagName;
125005
- // Only transform if it's a known component (or if no filter is provided)
125006
- if (knownComponents && !knownComponents.has(cleanTagName)) {
125007
- return match;
125008
- }
125009
- let placeholder = reverseMap.get(cleanTagName);
125010
- if (!placeholder) {
125011
- // eslint-disable-next-line no-plusplus
125012
- placeholder = `MDXishSnakeCase${counter++}`;
125013
- mapping[placeholder] = cleanTagName;
125014
- reverseMap.set(cleanTagName, placeholder);
125015
- }
125016
- const processedTagName = isClosing ? `/${placeholder}` : placeholder;
125017
- return `<${processedTagName}${attrs}${selfClosing}>`;
125018
- });
125019
- // Step 3: Restore code blocks (untouched)
125020
- const finalContent = restoreCodeBlocks(processedContent, protectedCode);
125021
- return {
125022
- content: finalContent,
125023
- mapping,
125024
- };
125025
- }
125026
- /**
125027
- * Restores placeholder name to original snake_case name.
125028
- * Uses case-insensitive matching since HTML parsers normalize to lowercase.
125029
- */
125030
- function restoreSnakeCase(placeholderName, mapping) {
125031
- if (mapping[placeholderName]) {
125032
- return mapping[placeholderName];
125033
- }
125034
- const lowerName = placeholderName.toLowerCase();
125035
- const matchingKey = Object.keys(mapping).find(key => key.toLowerCase() === lowerName);
125036
- return matchingKey ? mapping[matchingKey] : placeholderName;
125037
- }
125038
-
125039
124998
  ;// ./processor/transform/mdxish/resolve-esm-imports.ts
125040
124999
 
125041
125000
  // We provide React as a default module so that components can use hooks
@@ -125220,6 +125179,54 @@ const containsJsxNode = (value) => {
125220
125179
  return true;
125221
125180
  return Object.values(value).some(containsJsxNode);
125222
125181
  };
125182
+ /** Read the component name off a JSX element name node (`Foo`, `Foo.Bar`, `foo:Bar`). */
125183
+ const jsxElementName = (name) => {
125184
+ if (name === null || typeof name !== 'object')
125185
+ return undefined;
125186
+ const node = name;
125187
+ if (node.type === 'JSXIdentifier')
125188
+ return typeof node.name === 'string' ? node.name : undefined;
125189
+ // `<Foo.Bar/>` and `<foo:Bar/>` resolve through their leftmost part.
125190
+ if (node.type === 'JSXMemberExpression')
125191
+ return jsxElementName(node.object);
125192
+ if (node.type === 'JSXNamespacedName')
125193
+ return jsxElementName(node.namespace);
125194
+ return undefined;
125195
+ };
125196
+ /**
125197
+ * Collect the capitalized names an expression uses as JSX tags. Parsed rather than pattern
125198
+ * matched: `{count < Max ? <Foo/> : <Bar/>}` puts a capitalized name straight after a `<` without
125199
+ * it being a tag, and only the parser can tell the two apart. Unparseable input yields nothing —
125200
+ * evaluation is about to throw on it anyway.
125201
+ */
125202
+ const jsxComponentNames = (expression) => {
125203
+ let program;
125204
+ try {
125205
+ program = parseExpression(expression);
125206
+ }
125207
+ catch {
125208
+ return [];
125209
+ }
125210
+ const names = new Set();
125211
+ const walk = (value) => {
125212
+ if (Array.isArray(value)) {
125213
+ value.forEach(walk);
125214
+ return;
125215
+ }
125216
+ if (value === null || typeof value !== 'object')
125217
+ return;
125218
+ const node = value;
125219
+ if (node.type === 'JSXOpeningElement') {
125220
+ const name = jsxElementName(node.name);
125221
+ // Lowercase tags compile to a string type, never a variable reference.
125222
+ if (name && /^[A-Z]/.test(name))
125223
+ names.add(name);
125224
+ }
125225
+ Object.values(node).forEach(walk);
125226
+ };
125227
+ walk(program);
125228
+ return Array.from(names);
125229
+ };
125223
125230
  /** Convert a program's JSX into `React.createElement` calls and evaluate it. `scope` must provide `React`. */
125224
125231
  const evalJsxProgram = (program, scope) => {
125225
125232
  buildJsx(program, { runtime: 'classic', pragma: 'React.createElement', pragmaFrag: 'React.Fragment' });
@@ -125425,6 +125432,28 @@ function reactElementToHast(node) {
125425
125432
 
125426
125433
 
125427
125434
 
125435
+
125436
+
125437
+
125438
+
125439
+ /**
125440
+ * Bind the components a given expression actually uses as tags. Scoped per expression on purpose:
125441
+ * binding the whole hash would shadow same-named globals (a `math` component would break
125442
+ * `{Math.max(1, 2)}`) and pad `evaluate`'s `new Function` parameter list. Resolution defers to
125443
+ * `getComponentName` so an expression and a plain tag always reach the same component.
125444
+ */
125445
+ const componentScope = (expression, components) => {
125446
+ const scope = {};
125447
+ jsxComponentNames(expression).forEach(name => {
125448
+ // `getComponentName` normalizes the tag, never the key, so it can't match `<MyBlock/>` to a
125449
+ // `my_block` entry; compare the key's PascalCase form for that direction.
125450
+ const tagName = getComponentName(name, components) ?? Object.keys(components).find(k => toPascalCase(k) === name);
125451
+ if (!tagName)
125452
+ return;
125453
+ scope[name] = (props) => external_react_default().createElement(tagName, props);
125454
+ });
125455
+ return scope;
125456
+ };
125428
125457
  /**
125429
125458
  * We divide the result of an expression into two categories:
125430
125459
  * 1. Renderable values: HTML, JSX, e.g. .map() returning JSX
@@ -125435,6 +125464,17 @@ const isRenderable = (value) => {
125435
125464
  return true;
125436
125465
  return Array.isArray(value) && value.some(isRenderable);
125437
125466
  };
125467
+ /**
125468
+ * Whether an expression evaluated to block-level content. Components count as block-level
125469
+ * unless they're on the inline list, matching the assumption the rest of the component
125470
+ * pipeline makes.
125471
+ */
125472
+ const isBlockResult = (children) => children.some(child => {
125473
+ if (child.type !== 'element' && child.type !== 'mdx-jsx')
125474
+ return false;
125475
+ const { tagName } = child;
125476
+ return !STANDARD_HTML_TAGS.has(tagName.toLowerCase()) && !INLINE_COMPONENT_TAGS.has(tagName);
125477
+ });
125438
125478
  /** Turn a non-renderable evaluation result into a text node. */
125439
125479
  const createTextNode = (result, position) => {
125440
125480
  if (result === null || result === undefined)
@@ -125446,13 +125486,22 @@ const createTextNode = (result, position) => {
125446
125486
  /**
125447
125487
  * AST transformer to evaluate MDX expressions.
125448
125488
  * Replaces mdxFlowExpression and mdxTextExpression nodes with their evaluated values.
125449
- * Self-contained expressions resolve directly (e.g. `{1+1}`); expressions that
125450
- * reference identifiers can resolve if those identifiers were introduced by an
125451
- * earlier `export const/function` (collected onto `file.data.mdxishScope`).
125452
- * Anything else falls through to the error branch and is kept as literal `{...}` text.
125453
- */
125454
- const evaluateExpressions = () => (tree, file) => {
125455
- const scope = { ...(file.data.mdxishScope), React: (external_react_default()) };
125489
+ * Self-contained expressions resolve directly (e.g. `{1+1}`); expressions that reference
125490
+ * identifiers can resolve if those identifiers are a custom component, the `user` variables
125491
+ * object, or were introduced by an earlier `export const/function` (collected onto
125492
+ * `file.data.mdxishScope`). Anything else falls through to the error branch and is kept as
125493
+ * literal `{...}` text.
125494
+ */
125495
+ const evaluateExpressions = ({ components, variables } = {}) => (tree, file) => {
125496
+ const baseScope = {
125497
+ // `User` matches the fallback the MDX path binds in `run.tsx`. Only when variables were
125498
+ // supplied: the proxy never throws, so an unconditional bind would resolve `user.*` on
125499
+ // surfaces that render without them instead of leaving literal text.
125500
+ ...(variables ? { user: user(variables) } : {}),
125501
+ // In-document exports win, matching `renderMdxish`.
125502
+ ...file.data.mdxishScope,
125503
+ React: (external_react_default()),
125504
+ };
125456
125505
  visit(tree, ['mdxFlowExpression', 'mdxTextExpression'], (node, index, parent) => {
125457
125506
  if (!parent || index === null || index === undefined)
125458
125507
  return;
@@ -125462,6 +125511,7 @@ const evaluateExpressions = () => (tree, file) => {
125462
125511
  if (!expression)
125463
125512
  return;
125464
125513
  try {
125514
+ const scope = { ...componentScope(expression, components ?? {}), ...baseScope };
125465
125515
  const result = evalExpression(expression, scope);
125466
125516
  if (isRenderable(result)) {
125467
125517
  // Stash hast built straight from the React tree; `mdxExpressionHandler` emits it and it
@@ -125482,6 +125532,22 @@ const evaluateExpressions = () => (tree, file) => {
125482
125532
  parent.children.splice(index, 1, { type: 'text', value: `{${processed}}`, position });
125483
125533
  }
125484
125534
  });
125535
+ // A text expression is parsed inside a paragraph, but its result can be block content: a
125536
+ // `<Tabs>` renders a `<div>`, and a browser closes the `<p>` before it, so the DOM it builds
125537
+ // no longer matches what was rendered and hydration fails. Lift the expression out when
125538
+ // that's all the paragraph holds.
125539
+ visit(tree, 'paragraph', (node, index, parent) => {
125540
+ if (!parent || index === null || index === undefined)
125541
+ return;
125542
+ const meaningful = node.children.filter(child => !(child.type === 'text' && !child.value.trim()));
125543
+ const [only] = meaningful;
125544
+ if (meaningful.length !== 1 || only.type !== 'mdxTextExpression')
125545
+ return;
125546
+ const hChildren = only.data?.hChildren;
125547
+ if (!hChildren || !isBlockResult(hChildren))
125548
+ return;
125549
+ parent.children.splice(index, 1, only);
125550
+ });
125485
125551
  return tree;
125486
125552
  };
125487
125553
  /* harmony default export */ const evaluate_expressions = (evaluateExpressions);
@@ -127289,45 +127355,6 @@ const resolveDeferredAttributeExpressionProps = () => (tree, file) => {
127289
127355
  };
127290
127356
  /* harmony default export */ const resolve_deferred_attribute_expression_props = (resolveDeferredAttributeExpressionProps);
127291
127357
 
127292
- ;// ./processor/transform/mdxish/restore-snake-case-component-name.ts
127293
-
127294
-
127295
- /**
127296
- * Restores snake_case component names from placeholders after parsing.
127297
- * Runs after mdxishComponentBlocks converts HTML nodes to mdxJsxFlowElement.
127298
- */
127299
- const restoreSnakeCaseComponentNames = (options) => {
127300
- const { mapping } = options;
127301
- return tree => {
127302
- if (!mapping || Object.keys(mapping).length === 0) {
127303
- return tree;
127304
- }
127305
- visit(tree, 'mdxJsxFlowElement', (node) => {
127306
- if (node.name) {
127307
- node.name = restoreSnakeCase(node.name, mapping);
127308
- }
127309
- });
127310
- // Pre-compile regex patterns for better performance
127311
- const regexPatterns = Object.entries(mapping).map(([placeholder, original]) => ({
127312
- regex: new RegExp(`(<\\/?)(${placeholder})(\\s|\\/?>)`, 'gi'),
127313
- original,
127314
- }));
127315
- visit(tree, 'html', (node) => {
127316
- if (node.value) {
127317
- let newValue = node.value;
127318
- regexPatterns.forEach(({ regex, original }) => {
127319
- newValue = newValue.replace(regex, `$1${original}$3`);
127320
- });
127321
- if (newValue !== node.value) {
127322
- node.value = newValue;
127323
- }
127324
- }
127325
- });
127326
- return tree;
127327
- };
127328
- };
127329
- /* harmony default export */ const restore_snake_case_component_name = (restoreSnakeCaseComponentNames);
127330
-
127331
127358
  ;// ./processor/transform/mdxish/retain-boolean-attributes.ts
127332
127359
 
127333
127360
  // Private Use Area character (U+E000) which is extremely unlikely to appear in real content.
@@ -127869,9 +127896,6 @@ function loadComponents() {
127869
127896
 
127870
127897
 
127871
127898
 
127872
-
127873
-
127874
-
127875
127899
 
127876
127900
 
127877
127901
 
@@ -127893,10 +127917,8 @@ const defaultTransformers = [
127893
127917
  * 5. Terminate HTML flow blocks so subsequent content isn't swallowed
127894
127918
  * 6. Close invalid "self-closing" HTML tags (e.g., `<i />` → `<i></i>`)
127895
127919
  * 7. Normalize compact ATX headings (e.g., `#Heading` → `# Heading`)
127896
- * 8. Replace snake_case component names with parser-safe placeholders
127897
127920
  */
127898
- function preprocessContent(content, opts) {
127899
- const { knownComponents } = opts;
127921
+ function preprocessContent(content) {
127900
127922
  // Runs first so `jsxTable` sees a literal `</table>` (and the HTML-line
127901
127923
  // classification in `terminateHtmlFlowBlocks` is accurate)
127902
127924
  let result = normalizeClosingTagWhitespace(content);
@@ -127909,7 +127931,7 @@ function preprocessContent(content, opts) {
127909
127931
  result = terminateHtmlFlowBlocks(result);
127910
127932
  result = closeSelfClosingHtmlTags(result);
127911
127933
  result = normalizeCompactHeadings(result);
127912
- return processSnakeCaseComponent(result, { knownComponents });
127934
+ return result;
127913
127935
  }
127914
127936
  function mdxishAstProcessor(mdContent, opts = {}) {
127915
127937
  const { components: userComponents = {}, hardBreaks: enableHardBreaks = true, newEditorTypes = false, safeMode = false, useTailwind, } = opts;
@@ -127917,9 +127939,7 @@ function mdxishAstProcessor(mdContent, opts = {}) {
127917
127939
  ...loadComponents(),
127918
127940
  ...userComponents,
127919
127941
  };
127920
- // Build set of known component names for snake_case filtering
127921
- const knownComponents = new Set(Object.keys(components));
127922
- const { content: parserReadyContent, mapping: snakeCaseMapping } = preprocessContent(mdContent, { knownComponents });
127942
+ const parserReadyContent = preprocessContent(mdContent);
127923
127943
  // Create string map for tailwind transformer
127924
127944
  const tempComponentsMap = Object.entries(components).reduce((acc, [key, value]) => {
127925
127945
  acc[key] = String(value);
@@ -127932,10 +127952,8 @@ function mdxishAstProcessor(mdContent, opts = {}) {
127932
127952
  .use(remarkParse)
127933
127953
  .use(remarkFrontmatter)
127934
127954
  .use(normalize_malformed_md_syntax)
127935
- .use(self_closing_blocks)
127936
127955
  .use(mdx_blocks, { safeMode })
127937
127956
  .use(inline_html, { safeMode })
127938
- .use(restore_snake_case_component_name, { mapping: snakeCaseMapping })
127939
127957
  .use(mdxish_tables)
127940
127958
  .use(mdxish_html_blocks) // Convert every <HTMLBlock> shape → html-block
127941
127959
  // The next few transformers must appear after mdxishMdxComponentBlocks
@@ -128011,7 +128029,7 @@ function mdxish(mdContent, opts = {}) {
128011
128029
  processor
128012
128030
  .use(safeMode ? undefined : evaluate_exports) // Evaluate `export const/function` and stash scope on file.data.mdxishScope
128013
128031
  .use(enableHardBreaks ? hard_breaks : undefined) // Must precede evaluateExpressions to avoid splitting the \n in an evaluated template literal into a <br> node
128014
- .use(safeMode ? undefined : evaluate_expressions) // Evaluate self-contained MDX expressions (e.g. `{1+1}`)
128032
+ .use(safeMode ? undefined : evaluate_expressions, { components, variables }) // Evaluate self-contained MDX expressions (e.g. `{1+1}`)
128015
128033
  .use(safeMode ? undefined : evaluate_style_block_expressions) // Evaluate `<style>{`...`}</style>` template literals into plain CSS
128016
128034
  .use(variables_code, { variables }) // Resolve <<...>> and {user.*} inside code and inline code nodes
128017
128035
  .use(remarkRehype, { allowDangerousHtml: true, handlers: mdxComponentHandlers })
@@ -129057,7 +129075,7 @@ module.exports = /*#__PURE__*/JSON.parse('{"*":["about","acceptCharset","accessK
129057
129075
  /******/ // startup
129058
129076
  /******/ // Load entry module and return exports
129059
129077
  /******/ // This entry module used 'module' so it can't be inlined
129060
- /******/ let __webpack_exports__ = __webpack_require__(5814);
129078
+ /******/ let __webpack_exports__ = __webpack_require__(8719);
129061
129079
  /******/ module.exports = __webpack_exports__;
129062
129080
  /******/
129063
129081
  /******/ })()