@mui/internal-docs-infra 0.11.1-canary.9 → 0.11.1

package/useCode/useCodeUtils.mjs

@@ -1,233 +1,306 @@
-import { applyCodeTransform } from "../pipeline/loadIsomorphicCodeVariant/applyCodeTransform.mjs";
 /**
  * Pure function to get available transforms from effective code data.
- * Only includes transforms that have actual deltas (file changes), not just filename changes.
+ *
+ * Variant-level `transforms` is a manifest produced by `splitTransformsForEmbed`
+ * (or by the legacy `Transforms` shape with deltas, for back-compat). Only
+ * entries that produced a real source delta are reported here — rename-only
+ * entries (manifest entries with `hasDelta: false`, kept around so the
+ * runtime can still apply the rename based on user preference) are filtered
+ * out so the transform toggle stays hidden when nothing meaningful changes.
  *
  * @param effectiveCode - The effective code object containing all variants
  * @param selectedVariantKey - The currently selected variant key
- * @returns Array of available transform keys that have deltas
+ * @returns Array of available transform keys (toggle-visible only)
  */
 export function getAvailableTransforms(effectiveCode, selectedVariantKey) {
-  const transforms = new Set();
-  if (effectiveCode && selectedVariantKey) {
-    const variantCode = effectiveCode[selectedVariantKey];
-    if (variantCode && typeof variantCode === 'object') {
-      // Check main variant transforms
-      if ('transforms' in variantCode && variantCode.transforms) {
-        Object.keys(variantCode.transforms).forEach(transformKey => {
-          const transformData = variantCode.transforms[transformKey];
-          // Only include transforms that have actual deltas (file changes)
-          // Check if delta exists and is not empty
-          if (transformData && typeof transformData === 'object' && 'delta' in transformData) {
-            const delta = transformData.delta;
-            // Check if delta has meaningful content (not just an empty object)
-            const hasContent = delta && typeof delta === 'object' && Object.keys(delta).length > 0;
-            if (hasContent) {
-              transforms.add(transformKey);
-            }
-          }
-        });
-      }
-
-      // Check extraFiles for transforms with deltas
-      if ('extraFiles' in variantCode && variantCode.extraFiles) {
-        Object.values(variantCode.extraFiles).forEach(fileData => {
-          if (fileData && typeof fileData === 'object' && 'transforms' in fileData && fileData.transforms) {
-            Object.keys(fileData.transforms).forEach(transformKey => {
-              const transformData = fileData.transforms[transformKey];
-              // Only include transforms that have actual deltas (file changes)
-              // Check if delta exists and is not empty
-              if (transformData && typeof transformData === 'object' && 'delta' in transformData) {
-                const delta = transformData.delta;
-                // Check if delta has meaningful content (not just an empty object)
-                const hasContent = delta && typeof delta === 'object' && Object.keys(delta).length > 0;
-                if (hasContent) {
-                  transforms.add(transformKey);
-                }
-              }
-            });
-          }
-        });
-      }
-    }
-  }
-  return Array.from(transforms);
+  return collectTransformKeys(effectiveCode, selectedVariantKey, {
+    onlyWithDelta: true
+  });
 }
 
 /**
- * Pure helper function to apply transform to a source file.
+ * Like `getAvailableTransforms` but also includes rename-only entries
+ * (manifest entries with `hasDelta: false`). Used by the transform
+ * resolution path so a stored preference can still apply a rename even
+ * when its toggle is hidden because no actual delta exists.
  *
- * @param source - The source code to transform
- * @param fileName - The filename for the source
- * @param transforms - Available transforms for this source
- * @param selectedTransform - The transform to apply
- * @returns Object with transformed source and name
+ * @param effectiveCode - The effective code object containing all variants
+ * @param selectedVariantKey - The currently selected variant key
+ * @returns Array of all applicable transform keys
  */
-export function applyTransformToSource(source, fileName, transforms, selectedTransform) {
-  if (!transforms?.[selectedTransform]) {
-    return {
-      transformedSource: source,
-      transformedName: fileName
-    };
+export function getApplicableTransforms(effectiveCode, selectedVariantKey) {
+  return collectTransformKeys(effectiveCode, selectedVariantKey, {
+    onlyWithDelta: false
+  });
+}
+function collectTransformKeys(effectiveCode, selectedVariantKey, {
+  onlyWithDelta
+}) {
+  const transforms = new Set();
+  if (!effectiveCode || !selectedVariantKey) {
+    return [];
+  }
+  const variantCode = effectiveCode[selectedVariantKey];
+  if (!variantCode || typeof variantCode !== 'object') {
+    return [];
   }
-  try {
-    // Get transform data
-    const transformData = transforms[selectedTransform];
-    if (!transformData || typeof transformData !== 'object' || !('delta' in transformData)) {
-      return {
-        transformedSource: source,
-        transformedName: fileName
-      };
+  const add = entries => {
+    if (!entries) {
+      return;
     }
-
-    // Check if delta has meaningful content
-    const delta = transformData.delta;
-    const hasContent = delta && typeof delta === 'object' && Object.keys(delta).length > 0;
-    if (!hasContent) {
-      return {
-        transformedSource: source,
-        transformedName: fileName
-      };
+    for (const [transformKey, entry] of Object.entries(entries)) {
+      if (!entry) {
+        continue;
+      }
+      if (!onlyWithDelta) {
+        transforms.add(transformKey);
+        continue;
+      }
+      const inlineDelta = !!entry.delta && typeof entry.delta === 'object' && Object.keys(entry.delta).length > 0;
+      if (entry.hasDelta || inlineDelta) {
+        transforms.add(transformKey);
+      }
+    }
+  };
+  if ('transforms' in variantCode) {
+    add(variantCode.transforms);
+  }
+  if ('extraFiles' in variantCode && variantCode.extraFiles) {
+    for (const fileData of Object.values(variantCode.extraFiles)) {
+      if (fileData && typeof fileData === 'object' && 'transforms' in fileData) {
+        add(fileData.transforms);
+      }
     }
-
-    // Apply transform
-    const result = applyCodeTransform(source, transforms, selectedTransform);
-    const transformedName = transformData.fileName || fileName;
-    return {
-      transformedSource: result,
-      transformedName
-    };
-  } catch (error) {
-    console.error(`Transform failed for ${fileName}:`, error);
-    return {
-      transformedSource: source,
-      transformedName: fileName
-    };
   }
+  return Array.from(transforms);
 }
 
 /**
- * Pure function to create transformed files from a variant and selected transform.
+ * Determines whether applying `transformKey` to `variant` would introduce
+ * `.collapse` placeholders into the rendered hast tree — i.e. whether the
+ * swap is layout-affecting and must run through the coordinated barrier.
+ *
+ * Reads the precomputed `hasCollapse` / `hasCollapseInFocus` flags
+ * stored on each transform entry by the pipeline (`diffHast` sets them
+ * directly, `splitTransformsForEmbed` propagates them onto the
+ * manifest). No tree walking or delta decompression happens at runtime.
+ *
+ * The `mode` option controls *which* file's transform entry is consulted:
  *
- * @param selectedVariant - The currently selected variant
- * @param selectedTransform - The transform to apply
- * @returns Object with transformed files and filename mapping, or undefined if no transform
+ *   - `'selected'` (default) — Consults only the transform map for the
+ *     file identified by `selectedFileName` (or `variant.transforms`
+ *     when `selectedFileName === variant.fileName`). When
+ *     `selectedFileName` is omitted, treats the variant's main file
+ *     (`variant.fileName`) as the selection.
+ *   - `'all'` — Iterates every transform map on the variant
+ *     (`variant.transforms` + each `extraFiles[*].transforms`) and
+ *     returns `true` if any one has `hasCollapse: true`. Useful for
+ *     callers that render multiple files simultaneously and need to
+ *     coordinate a swap whenever *any* file would shift.
+ *   - `'focus'` — Like `'selected'`, but consults
+ *     `hasCollapseInFocus` instead of `hasCollapse` whenever
+ *     `expanded === false`. Lets consumers skip the coordinated
+ *     barrier for transforms whose `.collapse` insertion lands
+ *     outside the initially-visible region of a collapsed code block.
+ *
+ * Falls back to a conservative phase 1 classification for legacy
+ * payloads that carry `hasDelta: true` without the precomputed flag —
+ * i.e. transforms produced by an older build that predates
+ * `hasCollapse`, or constructed by a direct caller bypassing the
+ * pipeline. For `hasCollapseInFocus`, entries that lack the field fall
+ * back to the value of `hasCollapse` (matching the embed-side default).
+ *
+ * Returns `false` when every consulted entry has `hasCollapse: false`
+ * (or `hasCollapseInFocus: false` in focus mode while collapsed), is
+ * rename-only, is absent, or the variant is `null`.
+ *
+ * @param variant - The variant whose transforms to inspect.
+ * @param transformKey - The transform key to classify, or `null`.
+ * @param opts - Optional mode + selected-file + expanded context.
  */
-export function createTransformedFiles(selectedVariant, selectedTransform) {
-  // Only create transformed files when there's actually a transform selected
-  if (!selectedVariant || !selectedTransform) {
-    return undefined;
+export function transformHasCollapsePlaceholder(variant, transformKey, opts) {
+  if (!variant || !transformKey) {
+    return false;
+  }
+  const mode = opts?.mode ?? 'selected';
+  const expanded = opts?.expanded ?? false;
+  // `'selected'`/`'focus'` default to the variant's main file when no
+  // selection is supplied. This lines up with the runtime's "render
+  // the main file by default" behavior.
+  let selectedFileName = opts?.selectedFileName;
+  if (selectedFileName === undefined && mode !== 'all' && 'fileName' in variant) {
+    selectedFileName = variant.fileName;
   }
-  const files = [];
-  const filenameMap = {};
-
-  // First, check if any file has a meaningful transform delta for the selected transform
-  const variantTransforms = 'transforms' in selectedVariant ? selectedVariant.transforms : undefined;
-  let hasAnyMeaningfulTransform = false;
 
-  // Check main file for meaningful transform
-  if (selectedVariant.fileName && variantTransforms?.[selectedTransform]?.delta) {
-    const delta = variantTransforms[selectedTransform].delta;
-    if (delta && Object.keys(delta).length > 0) {
-      hasAnyMeaningfulTransform = true;
+  // In focus mode while collapsed, the relevant precomputed flag is
+  // the focus-scoped one. Everywhere else we still consult plain
+  // `hasCollapse`. The `useFocusFlag` decision is taken once up front
+  // so the per-entry checks stay branch-free.
+  const useFocusFlag = mode === 'focus' && !expanded;
+  const checkEntry = entry => {
+    if (!entry) {
+      return false;
     }
-  }
+    if (useFocusFlag) {
+      // Prefer the focus-scoped flag; legacy payloads (no
+      // `hasCollapseInFocus` field) fall through to `hasCollapse`
+      // which itself falls back to the conservative phase 1
+      // classification below.
+      if (entry.hasCollapseInFocus === true) {
+        return true;
+      }
+      if (entry.hasCollapseInFocus === false) {
+        return false;
+      }
+    }
+    if (entry.hasCollapse === true) {
+      return true;
+    }
+    // Legacy fallback: an older payload carries `hasDelta: true` with
+    // neither an inline delta nor the precomputed flag. Classify
+    // conservatively as phase 1 so the swap stays layout-stable.
+    if (entry.hasCollapse === undefined && entry.hasDelta && !entry.delta) {
+      return true;
+    }
+    return false;
+  };
 
-  // Check extraFiles for meaningful transforms
-  if (!hasAnyMeaningfulTransform && selectedVariant.extraFiles) {
-    Object.values(selectedVariant.extraFiles).forEach(fileData => {
-      if (fileData && typeof fileData === 'object' && 'transforms' in fileData) {
-        const transformData = fileData.transforms?.[selectedTransform];
-        if (transformData?.delta && Object.keys(transformData.delta).length > 0) {
-          hasAnyMeaningfulTransform = true;
+  // `'all'` mode walks every transform map on the variant.
+  if (mode === 'all') {
+    if ('transforms' in variant && variant.transforms) {
+      if (checkEntry(variant.transforms[transformKey])) {
+        return true;
+      }
+    }
+    if ('extraFiles' in variant && variant.extraFiles) {
+      for (const file of Object.values(variant.extraFiles)) {
+        if (file && typeof file === 'object' && 'transforms' in file && file.transforms) {
+          if (checkEntry(file.transforms[transformKey])) {
+            return true;
+          }
         }
       }
-    });
+    }
+    return false;
   }
 
-  // If no file has a meaningful transform, return empty result
-  if (!hasAnyMeaningfulTransform) {
-    return {
-      files: [],
-      filenameMap: {}
-    };
+  // `'selected'` / `'focus'` consult only the chosen file's transforms.
+  // Main file is identified by `variant.fileName`; everything else is
+  // looked up under `extraFiles`. `selectedFileName` is guaranteed to
+  // be defined here (the default above falls back to `variant.fileName`).
+  if (selectedFileName === undefined) {
+    return false;
   }
-
-  // Process main file if we have a fileName and source
-  if (selectedVariant.fileName && selectedVariant.source) {
-    const {
-      transformedSource: mainSource,
-      transformedName: mainName
-    } = applyTransformToSource(selectedVariant.source, selectedVariant.fileName, variantTransforms, selectedTransform);
-    const fileName = selectedVariant.fileName;
-    filenameMap[fileName] = mainName;
-    files.push({
-      name: mainName,
-      originalName: fileName,
-      source: mainSource
-    });
+  if ('fileName' in variant && selectedFileName === variant.fileName) {
+    if ('transforms' in variant && variant.transforms) {
+      return checkEntry(variant.transforms[transformKey]);
+    }
+    return false;
   }
+  if ('extraFiles' in variant && variant.extraFiles) {
+    const file = variant.extraFiles[selectedFileName];
+    if (file && typeof file === 'object' && 'transforms' in file && file.transforms) {
+      return checkEntry(file.transforms[transformKey]);
+    }
+  }
+  return false;
+}
 
-  // Process extra files
-  if (selectedVariant.extraFiles) {
-    Object.entries(selectedVariant.extraFiles).forEach(([extraFileName, fileData]) => {
-      let source;
-      let transforms;
-
-      // Handle different extraFile structures
-      if (typeof fileData === 'string') {
-        source = fileData;
-        transforms = undefined; // Don't inherit variant transforms for simple string files
-      } else if (fileData && typeof fileData === 'object' && 'source' in fileData) {
-        source = fileData.source;
-        transforms = fileData.transforms; // Only use explicit transforms for this file
-      } else {
-        return; // Skip invalid entries
-      }
+/**
+ * Description of a single transform entry that carries
+ * `hasCollapseInFocus: true`. Returned by
+ * `findCollapseInFocusTransforms` so callers can produce actionable
+ * error messages without re-walking the variant tree.
+ */
 
-      // Skip if source is undefined
-      if (!source) {
-        return;
+/**
+ * Walk every variant on `effectiveCode` and collect transform entries
+ * whose precomputed `hasCollapseInFocus` flag is `true` — i.e. the
+ * collapse placeholder introduced by the transform lands inside the
+ * focus region that is visible while the surrounding code block is
+ * un-expanded.
+ *
+ * Used by `useCode`'s `strictCollapseInFocus` option to throw with a
+ * pointer to the offending variant/file/transform so the demo author
+ * can narrow the `@focus` region (or the transform's edit range) until
+ * the placeholder lands outside the visible window.
+ *
+ * Walks main files (`variant.transforms`) and `extraFiles[*].transforms`.
+ * Returns an empty array when no entry has the flag set.
+ */
+export function findCollapseInFocusTransforms(effectiveCode) {
+  const offenders = [];
+  const collectFromMap = (variantName, fileName, transforms) => {
+    if (!transforms) {
+      return;
+    }
+    for (const [transformKey, entry] of Object.entries(transforms)) {
+      if (entry?.hasCollapseInFocus === true) {
+        offenders.push({
+          variantName,
+          fileName,
+          transformKey
+        });
       }
-
-      // Apply transforms if available, otherwise use original source
-      let transformedSource = source;
-      let transformedName = extraFileName;
-      if (transforms?.[selectedTransform]) {
-        try {
-          const transformData = transforms[selectedTransform];
-          if (transformData && typeof transformData === 'object' && 'delta' in transformData) {
-            // Only apply transform if there's a meaningful delta
-            const hasTransformDelta = transformData.delta && Object.keys(transformData.delta).length > 0;
-            if (hasTransformDelta) {
-              transformedSource = applyCodeTransform(source, transforms, selectedTransform);
-              transformedName = transformData.fileName || extraFileName;
-            }
-          }
-        } catch (error) {
-          console.error(`Transform failed for ${extraFileName}:`, error);
-          // Continue with original source if transform fails
+    }
+  };
+  for (const [variantName, variant] of Object.entries(effectiveCode)) {
+    if (!variant || typeof variant !== 'object') {
+      continue;
+    }
+    if ('transforms' in variant && variant.transforms) {
+      const fileName = 'fileName' in variant && variant.fileName || '<main>';
+      collectFromMap(variantName, fileName, variant.transforms);
+    }
+    if ('extraFiles' in variant && variant.extraFiles) {
+      for (const [fileName, file] of Object.entries(variant.extraFiles)) {
+        if (file && typeof file === 'object' && 'transforms' in file) {
+          collectFromMap(variantName, fileName, file.transforms);
         }
       }
+    }
+  }
+  return offenders;
+}
 
-      // Only update filenameMap and add to files if this doesn't conflict with existing files
-      // If a file already exists with the target name, skip this transformation to preserve original files
-      const existingFile = files.find(f => f.name === transformedName);
-      if (!existingFile) {
-        filenameMap[extraFileName] = transformedName;
-        files.push({
-          name: transformedName,
-          originalName: extraFileName,
-          source: transformedSource
-        });
-      } else {
-        // If there's a conflict, skip this file with a warning
-        console.warn(`Transform conflict: ${extraFileName} would transform to ${transformedName} but that name is already taken. Skipping this file.`);
-      }
-    });
+/**
+ * Decide whether the rendered `<Pre>` should emit highlighted spans on
+ * this render. Three gates compose:
+ *
+ * 1. `highlightReady` — the render-side readiness gate published by
+ *    `CodeHighlighterClient`. `false` while the highlight trigger
+ *    (`hydration` / `idle` / `visible`) hasn't fired yet *or* the
+ *    sync `parseCode` pass hasn't resolved. The precomputed HAST on
+ *    the published `code` would render highlighted spans on first
+ *    paint otherwise — defeating the deferred trigger. Treated as
+ *    `true` when undefined so legacy/test consumers without a
+ *    surrounding context default to rendering highlighted.
+ * 2. `deferHighlight` — the narrower pipeline-level signal published
+ *    while the incoming variant's parse / transform deltas are still
+ *    in flight. Always wins: if the tree isn't ready, highlighting
+ *    can't happen.
+ * 3. `pendingBootstrap` — set while a stored-preference variant swap
+ *    is queued behind the initial mount. Suppresses the *outgoing*
+ *    tree's highlighting so we don't burn cycles painting spans the
+ *    user is about to swap away from.
+ *
+ * The bootstrap gate is skipped when `highlightAfter === 'init'`:
+ * - the precomputed HAST already carries the spans (no "wasted work"),
+ *   and
+ * - leaving it on causes the *incoming* variant to render as plain
+ *   text for the render between `pendingBootstrap` flipping and the
+ *   bootstrap commit landing, producing a visible flash of unhighlighted
+ *   code on first-paint variant swaps.
+ */
+export function shouldHighlightForRender(args) {
+  if (args.deferHighlight) {
+    return false;
   }
-  return {
-    files,
-    filenameMap
-  };
+  if (args.highlightReady === false) {
+    return false;
+  }
+  if (args.highlightAfter === 'init') {
+    return true;
+  }
+  return !args.pendingBootstrap;
 }

package/useCode/useCopyFunctionality.d.mts

@@ -1,11 +1,20 @@
 import * as React from 'react';
 import { type UseCopierOpts } from "../useCopier/index.mjs";
-import type { VariantCode, VariantSource } from "../CodeHighlighter/types.mjs";
+import type { Fallbacks, VariantCode, VariantSource } from "../CodeHighlighter/types.mjs";
+import type { FallbackNode } from "../CodeHighlighter/fallbackFormat.mjs";
+import { type MarkdownFile } from "./generateVariantMarkdown.mjs";
 import type { TransformedFiles } from "./useCodeUtils.mjs";
 interface UseCopyFunctionalityProps {
   selectedFile: VariantSource | null;
   selectedVariant: VariantCode | null;
   transformedFiles: TransformedFiles | undefined;
+  /**
+   * Per-file fallbacks for the selected variant (keyed by file name). Used as
+   * the DEFLATE dictionary to decode `hastCompressed` sources back to text.
+   */
+  fallbacks?: Fallbacks;
+  /** Fallback for the single selected file (the dictionary for `selectedFile`). */
+  selectedFileFallback?: FallbackNode[];
   /** Title used as the heading for the Markdown copy. */
   title?: string;
   copyOpts?: UseCopierOpts;
@@ -18,6 +27,7 @@ export interface UseCopyFunctionalityResult {
    */
   copyMarkdown: (event: React.MouseEvent<Element>) => Promise<void>;
 }
+export declare function collectVariantFiles(selectedVariant: VariantCode | null, transformedFiles: TransformedFiles | undefined, fallbacks?: Fallbacks): MarkdownFile[];
 /**
  * Hook for managing copy-to-clipboard functionality
  */
@@ -25,6 +35,8 @@ export declare function useCopyFunctionality({
   selectedFile,
   selectedVariant,
   transformedFiles,
+  fallbacks,
+  selectedFileFallback,
   title,
   copyOpts
 }: UseCopyFunctionalityProps): UseCopyFunctionalityResult;

package/useCode/useCopyFunctionality.mjs

@@ -2,24 +2,52 @@ import * as React from 'react';
 import { stringOrHastToString } from "../pipeline/hastUtils/index.mjs";
 import { useCopier } from "../useCopier/index.mjs";
 import { generateVariantMarkdown } from "./generateVariantMarkdown.mjs";
-function collectVariantFiles(selectedVariant, transformedFiles) {
+export function collectVariantFiles(selectedVariant, transformedFiles, fallbacks) {
   if (!selectedVariant) {
     return [];
   }
 
+  // Resolve per-file DEFLATE dictionaries from both places a fallback can
+  // arrive (mirrors `resolvedFallbacks` in `useFileNavigation`): the passed
+  // `fallbacks` (hoisted from a `ContentLoading` component) and the variant's
+  // own per-file `fallback` fields (kept on `Code` when not stripped — e.g. the
+  // standalone `useCode`/`useDemo` path with no `CodeHighlighter` context, so
+  // `context?.fallbacks` is undefined). Without this merge, copy-as-markdown
+  // throws on a `hastCompressed` source whose dictionary lives on the
+  // `VariantCode`. The variant copy wins so the full text — the dictionary
+  // `hastCompressed` needs — is used when a `fallbackCollapsed` block hoisted
+  // only the visible window.
+  const resolvedFallbacks = {
+    ...fallbacks
+  };
+  if (selectedVariant.fileName && selectedVariant.fallback) {
+    resolvedFallbacks[selectedVariant.fileName] = selectedVariant.fallback;
+  }
+  for (const [name, fileData] of Object.entries(selectedVariant.extraFiles || {})) {
+    if (typeof fileData === 'object' && fileData?.fallback) {
+      resolvedFallbacks[name] = fileData.fallback;
+    }
+  }
+
   // When a transform has produced files, prefer them so the copied snippet
-  // matches what the user is currently viewing.
+  // matches what the user is currently viewing. Files the transform actually
+  // rewrote are live HAST (already decoded), but files it left untouched are
+  // passed through as their ORIGINAL source, which may still be `hastCompressed`
+  // and needs its dictionary — resolved here by `originalName`.
   if (transformedFiles && transformedFiles.files.length > 0) {
     return transformedFiles.files.map(file => ({
       name: file.name,
-      source: stringOrHastToString(file.source)
+      source: stringOrHastToString(file.source, resolvedFallbacks[file.originalName])
     }));
   }
   const files = [];
   if (selectedVariant.fileName && selectedVariant.source !== undefined) {
     files.push({
       name: selectedVariant.fileName,
-      source: stringOrHastToString(selectedVariant.source)
+      // `resolvedFallbacks` is the active variant's per-file dictionary map, so
+      // it decodes a `hastCompressed` source in both the hoisted and the
+      // on-`VariantCode` cases.
+      source: stringOrHastToString(selectedVariant.source, resolvedFallbacks[selectedVariant.fileName])
     });
   }
   if (selectedVariant.extraFiles) {
@@ -32,7 +60,7 @@ function collectVariantFiles(selectedVariant, transformedFiles) {
       } else if (fileData && typeof fileData === 'object' && fileData.source !== undefined) {
         files.push({
           name,
-          source: stringOrHastToString(fileData.source)
+          source: stringOrHastToString(fileData.source, resolvedFallbacks[name])
         });
       }
     }
@@ -47,6 +75,8 @@ export function useCopyFunctionality({
   selectedFile,
   selectedVariant,
   transformedFiles,
+  fallbacks,
+  selectedFileFallback,
   title,
   copyOpts
 }) {
@@ -54,10 +84,10 @@ export function useCopyFunctionality({
     if (!selectedFile) {
       return undefined;
     }
-    return stringOrHastToString(selectedFile);
-  }, [selectedFile]);
+    return stringOrHastToString(selectedFile, selectedFileFallback);
+  }, [selectedFile, selectedFileFallback]);
   const variantToMarkdown = React.useCallback(() => {
-    const files = collectVariantFiles(selectedVariant, transformedFiles);
+    const files = collectVariantFiles(selectedVariant, transformedFiles, fallbacks);
     if (files.length === 0) {
       return undefined;
     }
@@ -65,7 +95,7 @@ export function useCopyFunctionality({
       title,
       files
     });
-  }, [selectedVariant, transformedFiles, title]);
+  }, [selectedVariant, transformedFiles, fallbacks, title]);
   const {
     copy
   } = useCopier(sourceFileToText, copyOpts);

package/useCode/useEditable.browser.mjs

@@ -1,7 +1,15 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
+import { describe, it, expect, vi, afterEach, beforeAll } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
 import { userEvent } from 'vitest/browser';
-import { useEditable } from "./useEditable.mjs";
+import { useEditable, preloadEditableEngine } from "./useEditable.mjs";
+
+// `useEditable` loads its heavy runtime (the `EditableEngine` chunk) on demand
+// and only applies `contentEditable` once it resolves. Warm that load once so
+// the synchronous assertions below see `contentEditable` applied within `act`,
+// mirroring the warmed module cache a real page reaches after its first block.
+beforeAll(async () => {
+  await preloadEditableEngine();
+});
 
 /**
  * Places the caret at a given character offset inside `element` and waits