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

package/CodeHighlighter/useGrammarsReady.d.mts

@@ -0,0 +1,18 @@
+/**
+ * Gates client-side highlighting on grammar readiness. Under `CodeProviderLazy`,
+ * grammars load per-language and on demand, so a block must wait until the
+ * grammars for its scopes are registered — otherwise `parseSource` would fall
+ * back to plain text. Returning `false` keeps the block showing its fallback
+ * until the grammars land (then it highlights), instead of flashing the cold
+ * plain-text output.
+ *
+ * Readiness is derived synchronously from the shared registry each render, so it
+ * is `true` immediately when the scopes are already registered (warm — the
+ * speculative preload primed them, a sibling block loaded them, or an eager
+ * `CodeProvider` bundled them) and a warm block never holds back its highlight.
+ * When cold, it kicks off the load and re-renders once ready.
+ *
+ * @param scopes - Grammar scopes the block needs (should be memoized by the caller)
+ * @param enabled - Whether the block will highlight client-side at all
+ */
+export declare function useGrammarsReady(scopes: string[], enabled: boolean): boolean;

package/CodeHighlighter/useGrammarsReady.mjs

@@ -0,0 +1,45 @@
+'use client';
+
+import * as React from 'react';
+import { areGrammarsRegistered, ensureGrammars } from "../pipeline/parseSource/grammarCache.mjs";
+
+/**
+ * Gates client-side highlighting on grammar readiness. Under `CodeProviderLazy`,
+ * grammars load per-language and on demand, so a block must wait until the
+ * grammars for its scopes are registered — otherwise `parseSource` would fall
+ * back to plain text. Returning `false` keeps the block showing its fallback
+ * until the grammars land (then it highlights), instead of flashing the cold
+ * plain-text output.
+ *
+ * Readiness is derived synchronously from the shared registry each render, so it
+ * is `true` immediately when the scopes are already registered (warm — the
+ * speculative preload primed them, a sibling block loaded them, or an eager
+ * `CodeProvider` bundled them) and a warm block never holds back its highlight.
+ * When cold, it kicks off the load and re-renders once ready.
+ *
+ * @param scopes - Grammar scopes the block needs (should be memoized by the caller)
+ * @param enabled - Whether the block will highlight client-side at all
+ */
+export function useGrammarsReady(scopes, enabled) {
+  const [, forceUpdate] = React.useReducer(count => count + 1, 0);
+
+  // Nothing to wait for when disabled or when every scope is already registered.
+  const ready = !enabled || areGrammarsRegistered(scopes);
+  React.useEffect(() => {
+    if (ready) {
+      return undefined;
+    }
+    let cancelled = false;
+    // Fails open: a load error still flips ready so the block highlights what it
+    // can (and renders plain text for any scope that failed to register).
+    ensureGrammars(scopes).finally(() => {
+      if (!cancelled) {
+        forceUpdate();
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [ready, scopes]);
+  return ready;
+}

package/CodeHighlighter/useSpeculativeCodePreload.d.mts

@@ -0,0 +1,26 @@
+/**
+ * On first render, kick off the heavy loaders a code block is about to need, so
+ * the work is already in flight before the content mounts and awaits it. The
+ * detection is cheap and synchronous (props + manifest); the loaders are called
+ * in a mount effect, so this never blocks first paint.
+ *
+ * Calling an accessor is instant under an eager `CodeProvider` and starts a
+ * deduped fetch under `CodeProviderLazy` (the same promise the eventual consumer
+ * resolves), so this is purely a head start - no extra work and no duplicate
+ * fetch. The signals are deliberately accurate (a fully-precomputed block sets
+ * neither) so a code-free or precomputed page never prefetches a chunk it won't
+ * use.
+ */
+export declare function useSpeculativeCodePreload({
+  needsData,
+  hasTransforms
+}: {
+  /**
+   * The block will fetch code (no complete precomputed/controlled code). Also
+   * covers the multi-variant case where switching will load a not-yet-present
+   * variant - so a fully-precomputed multi-variant block correctly sets `false`.
+   */
+  needsData: boolean;
+  /** Transforms will be computed client-side (manifest declares them, not yet highlighted). */
+  hasTransforms: boolean;
+}): void;

package/CodeHighlighter/useSpeculativeCodePreload.mjs

@@ -0,0 +1,40 @@
+'use client';
+
+import * as React from 'react';
+import { useCodeContext } from "../CodeProvider/CodeContext.mjs";
+
+/**
+ * On first render, kick off the heavy loaders a code block is about to need, so
+ * the work is already in flight before the content mounts and awaits it. The
+ * detection is cheap and synchronous (props + manifest); the loaders are called
+ * in a mount effect, so this never blocks first paint.
+ *
+ * Calling an accessor is instant under an eager `CodeProvider` and starts a
+ * deduped fetch under `CodeProviderLazy` (the same promise the eventual consumer
+ * resolves), so this is purely a head start - no extra work and no duplicate
+ * fetch. The signals are deliberately accurate (a fully-precomputed block sets
+ * neither) so a code-free or precomputed page never prefetches a chunk it won't
+ * use.
+ */
+export function useSpeculativeCodePreload({
+  needsData,
+  hasTransforms
+}) {
+  const {
+    loadCodeFallbackLoader,
+    loadIsomorphicCodeVariantLoader,
+    computeHastDeltasLoader
+  } = useCodeContext();
+  React.useEffect(() => {
+    // Best-effort head start; swallow rejections (the real consumer surfaces any
+    // load error). `?.()?.catch` no-ops cleanly when no provider supplies the
+    // accessor.
+    if (needsData) {
+      loadCodeFallbackLoader?.()?.catch(() => {});
+      loadIsomorphicCodeVariantLoader?.()?.catch(() => {});
+    }
+    if (hasTransforms) {
+      computeHastDeltasLoader?.()?.catch(() => {});
+    }
+  }, [needsData, hasTransforms, loadCodeFallbackLoader, loadIsomorphicCodeVariantLoader, computeHastDeltasLoader]);
+}

package/CodeHighlighter/useSpeculativeEditingPreload.d.mts

@@ -0,0 +1,33 @@
+/**
+ * Warms ALL the live-editing dependencies a block needs — the editing engine
+ * (contentEditable + source-editing), the per-language grammars, the emphasis
+ * enhancer, and the off-main-thread worker — so they are in flight before the
+ * user edits. Mirrors {@link useSpeculativeCodePreload}: detection is cheap and
+ * synchronous, the work runs in a mount/activation effect (never blocking first
+ * paint), and each fetch is deduped page-wide with the eventual consumer.
+ *
+ * Timing follows `editActivation`:
+ * - `'eager'` (default): warms on mount once the block is `enabled` (editable).
+ * - `'interaction'`: warms only once the block is `activated` — `useEditable`
+ *   fires `onActivate` on first engagement (hover / focus / click), and
+ *   `CodeHighlighter` flips `activated`. This is the single moment that kicks off
+ *   every editing dependency, rather than each loading on its own trigger.
+ *
+ * A read-only block sets `enabled = false` and warms nothing.
+ */
+export declare function useSpeculativeEditingPreload({
+  enabled,
+  editActivation,
+  activated,
+  scopes
+}: {
+  enabled: boolean;
+  editActivation?: 'eager' | 'interaction';
+  /** Whether an `'interaction'` block has engaged yet (ignored when `'eager'`). */
+  activated?: boolean;
+  /**
+   * Grammar scopes the editable block uses, so its grammars (main thread) and the
+   * worker can be warmed for live re-highlighting (should be memoized by the caller).
+   */
+  scopes?: string[];
+}): void;

package/CodeHighlighter/useSpeculativeEditingPreload.mjs

@@ -0,0 +1,58 @@
+'use client';
+
+import * as React from 'react';
+import { useCodeContext } from "../CodeProvider/CodeContext.mjs";
+import { preloadCodeEmphasis } from "../pipeline/enhanceCodeEmphasis/enhanceCodeEmphasisLazy.mjs";
+import { ensureGrammars } from "../pipeline/parseSource/grammarCache.mjs";
+
+/**
+ * Warms ALL the live-editing dependencies a block needs — the editing engine
+ * (contentEditable + source-editing), the per-language grammars, the emphasis
+ * enhancer, and the off-main-thread worker — so they are in flight before the
+ * user edits. Mirrors {@link useSpeculativeCodePreload}: detection is cheap and
+ * synchronous, the work runs in a mount/activation effect (never blocking first
+ * paint), and each fetch is deduped page-wide with the eventual consumer.
+ *
+ * Timing follows `editActivation`:
+ * - `'eager'` (default): warms on mount once the block is `enabled` (editable).
+ * - `'interaction'`: warms only once the block is `activated` — `useEditable`
+ *   fires `onActivate` on first engagement (hover / focus / click), and
+ *   `CodeHighlighter` flips `activated`. This is the single moment that kicks off
+ *   every editing dependency, rather than each loading on its own trigger.
+ *
+ * A read-only block sets `enabled = false` and warms nothing.
+ */
+export function useSpeculativeEditingPreload({
+  enabled,
+  editActivation,
+  activated = false,
+  scopes
+}) {
+  const {
+    editingEngineLoader,
+    ensureParseSourceWorker
+  } = useCodeContext();
+
+  // In `'interaction'` mode, wait for engagement; otherwise warm on mount.
+  const shouldWarm = enabled && ((editActivation ?? 'eager') !== 'interaction' || activated);
+  React.useEffect(() => {
+    // Best-effort head start; swallow rejections (the real consumers surface any
+    // load error). `?.()?.catch` no-ops cleanly when no provider supplies the
+    // accessor.
+    if (!shouldWarm) {
+      return;
+    }
+    editingEngineLoader?.()?.catch(() => {});
+    // Warm the emphasis enhancer too, so the first live-edit re-enhancement
+    // (a synchronous render-path) runs without a flash under `CodeProviderLazy`.
+    preloadCodeEmphasis().catch(() => {});
+    if (scopes && scopes.length > 0) {
+      // Main-thread grammars for the edited file...
+      ensureGrammars(scopes).catch(() => {});
+      // ...and the (lazily-created) worker with the same grammars, so
+      // off-main-thread highlighting is ready before the first keystroke. No-op
+      // without a worker (no provider, SSR, or no `Worker`).
+      ensureParseSourceWorker?.(scopes);
+    }
+  }, [shouldWarm, editingEngineLoader, ensureParseSourceWorker, scopes]);
+}

package/CodeHighlighter/useSpeculativeGrammarPreload.d.mts

@@ -0,0 +1,23 @@
+/**
+ * On first render, start loading the grammar chunks a block is about to need for
+ * client-side highlighting, so they are in flight before `useCode` mounts and
+ * the parse runs. Mirrors {@link useSpeculativeCodePreload} /
+ * {@link useSpeculativeUseCodePreload}: detection is cheap and synchronous
+ * (`detectGrammarScopes` reads only metadata), the load runs in a mount effect
+ * (so it never blocks first paint), and `ensureGrammars` dedupes with the
+ * eventual consumer (`useGrammarsReady`) and is a no-op when warm.
+ *
+ * The signal is deliberately accurate so a block needs only its own languages: a
+ * fully-precomputed read-only block (which renders its highlighted HAST and
+ * never calls `parseSource`) sets `enabled = false` and loads no grammar at all,
+ * and a `tsx`+`css` block loads only those two grammars instead of all ten.
+ */
+export declare function useSpeculativeGrammarPreload({
+  scopes,
+  enabled
+}: {
+  /** Grammar scopes the block needs (should be memoized by the caller). */
+  scopes: string[];
+  /** Whether the block will highlight client-side (or live-edit). */
+  enabled: boolean;
+}): void;

package/CodeHighlighter/useSpeculativeGrammarPreload.mjs

@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import { ensureGrammars } from "../pipeline/parseSource/grammarCache.mjs";
+
+/**
+ * On first render, start loading the grammar chunks a block is about to need for
+ * client-side highlighting, so they are in flight before `useCode` mounts and
+ * the parse runs. Mirrors {@link useSpeculativeCodePreload} /
+ * {@link useSpeculativeUseCodePreload}: detection is cheap and synchronous
+ * (`detectGrammarScopes` reads only metadata), the load runs in a mount effect
+ * (so it never blocks first paint), and `ensureGrammars` dedupes with the
+ * eventual consumer (`useGrammarsReady`) and is a no-op when warm.
+ *
+ * The signal is deliberately accurate so a block needs only its own languages: a
+ * fully-precomputed read-only block (which renders its highlighted HAST and
+ * never calls `parseSource`) sets `enabled = false` and loads no grammar at all,
+ * and a `tsx`+`css` block loads only those two grammars instead of all ten.
+ */
+export function useSpeculativeGrammarPreload({
+  scopes,
+  enabled
+}) {
+  React.useEffect(() => {
+    // Best-effort head start; swallow rejections (the consumer surfaces any real
+    // load error, and `parseSource` degrades to plain text). No-op when warm.
+    if (enabled && scopes.length > 0) {
+      ensureGrammars(scopes).catch(() => {});
+    }
+  }, [enabled, scopes]);
+}

package/CodeHighlighter/useSpeculativeUseCodePreload.d.mts

@@ -0,0 +1,22 @@
+/**
+ * On first render, kick off the heavy `useCode` chunks a block is about to need,
+ * so they are already in flight before the content subtree mounts and
+ * `useCode`/`useTransformManagement` awaits them. Mirrors
+ * {@link useSpeculativeCodePreload} / {@link useSpeculativeEditingPreload}: the
+ * detection is cheap and synchronous, the loaders run in a mount effect (so they
+ * never block first paint), and each fetch is deduped page-wide with the eventual
+ * consumer (the speculative preload and the consumer resolve the same promise).
+ *
+ * Where `CodeContent` is itself lazily loaded, this effect fires on the same
+ * commit as the content `import()`, so the chunks download concurrently rather
+ * than waterfalling (content → discover need → fetch).
+ *
+ * Signals are deliberately accurate so a block that needs nothing prefetches
+ * nothing: a block with no transforms never pulls the transform engine (the
+ * `jsondiffpatch` applier).
+ */
+export declare function useSpeculativeUseCodePreload({
+  hasTransforms
+}: {
+  hasTransforms: boolean;
+}): void;

package/CodeHighlighter/useSpeculativeUseCodePreload.mjs

@@ -0,0 +1,41 @@
+'use client';
+
+import * as React from 'react';
+import { useCodeContext } from "../CodeProvider/CodeContext.mjs";
+import { preloadTransformEngine } from "../useCode/transformEngineCache.mjs";
+
+/**
+ * On first render, kick off the heavy `useCode` chunks a block is about to need,
+ * so they are already in flight before the content subtree mounts and
+ * `useCode`/`useTransformManagement` awaits them. Mirrors
+ * {@link useSpeculativeCodePreload} / {@link useSpeculativeEditingPreload}: the
+ * detection is cheap and synchronous, the loaders run in a mount effect (so they
+ * never block first paint), and each fetch is deduped page-wide with the eventual
+ * consumer (the speculative preload and the consumer resolve the same promise).
+ *
+ * Where `CodeContent` is itself lazily loaded, this effect fires on the same
+ * commit as the content `import()`, so the chunks download concurrently rather
+ * than waterfalling (content → discover need → fetch).
+ *
+ * Signals are deliberately accurate so a block that needs nothing prefetches
+ * nothing: a block with no transforms never pulls the transform engine (the
+ * `jsondiffpatch` applier).
+ */
+export function useSpeculativeUseCodePreload({
+  hasTransforms
+}) {
+  const {
+    transformEngineLoader
+  } = useCodeContext();
+  React.useEffect(() => {
+    // Prime the shared transform-engine cache (not just kick off the fetch), so
+    // the first transform-bearing block reads it synchronously and never flashes
+    // un-transformed files. `preloadTransformEngine` shares the provider's loader
+    // (page-wide dedup) and fails open. Runs in parallel with the lazy content
+    // import, so the cache is typically warm before `useTransformManagement` first
+    // renders. Passing the context loader keeps it deduped with the consumer.
+    if (hasTransforms) {
+      preloadTransformEngine(transformEngineLoader).catch(() => {});
+    }
+  }, [hasTransforms, transformEngineLoader]);
+}

package/CodeProvider/CodeContext.d.mts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import type { LoadCodeMeta, LoadSource, LoadVariantMeta, ParseSource, SourceTransformers, SourceEnhancers, Code, ControlledCode, LoadFallbackCodeOptions, LoadVariantOptions, Externals, VariantCode } from "../CodeHighlighter/types.mjs";
 import type { ParseSourceAsync } from "./createParseSourceWorkerClient.mjs";
 import type { PreParsedCacheEntry } from "../CodeHighlighter/CodeHighlighterContext.mjs";
+import type { EditingEngineLoader } from "../useCode/editingEngineCache.mjs";
+import type { CreateTransformedFiles } from "../useCode/TransformEngine.mjs";
 export type LoadFallbackCodeFn = (url: string, initialVariant: string, loaded: Code | undefined, options?: LoadFallbackCodeOptions) => Promise<{
   code: Code;
   processedGlobalsCode?: Array<Code>;
@@ -14,7 +16,10 @@ export type LoadVariantFn = (url: string | undefined, variantName: string, varia
 export type ParseCodeFn = (code: Code, parseSource: ParseSource) => Code;
 export type ParseControlledCodeFn = (controlledCode: ControlledCode, parseSource: ParseSource, preParsedCache?: Map<string, PreParsedCacheEntry>) => Code;
 export type ComputeHastDeltasFn = (parsedCode: Code, parseSource: ParseSource) => Promise<Code>;
-export type GetAvailableTransformsFn = (parsedCode: Code | undefined, variantName: string) => string[];
+export type LoadFallbackCodeLoader = () => Promise<LoadFallbackCodeFn>;
+export type LoadVariantLoader = () => Promise<LoadVariantFn>;
+export type ComputeHastDeltasLoader = () => Promise<ComputeHastDeltasFn>;
+export type TransformEngineLoader = () => Promise<CreateTransformedFiles>;
 /**
  * Context interface for code processing functions.
  * Provides heavy functions via context that can't be serialized across the server-client boundary.
@@ -32,7 +37,11 @@ export interface CodeContext {
   parseSourceAsync?: ParseSourceAsync;
   /** Source transformers for code transformation (e.g., TypeScript to JavaScript) */
   sourceTransformers?: SourceTransformers;
-  /** Source enhancers for modifying parsed HAST */
+  /**
+   * Explicit source enhancers for modifying parsed HAST. When omitted, the
+   * provider supplies the default emphasis enhancer (`enhanceCodeEmphasis`)
+   * eagerly, since it powers the synchronous live-editing re-enhancement path.
+   */
   sourceEnhancers?: SourceEnhancers;
   /** Function to load raw source code and dependencies */
   loadSource?: LoadSource;
@@ -40,18 +49,44 @@ export interface CodeContext {
   loadVariantMeta?: LoadVariantMeta;
   /** Function to load code metadata from a URL */
   loadCodeMeta?: LoadCodeMeta;
-  /** Heavy function: Loads fallback code with all variants and files */
-  loadCodeFallback?: LoadFallbackCodeFn;
-  /** Heavy function: Loads a specific code variant with its dependencies */
-  loadIsomorphicCodeVariant?: LoadVariantFn;
-  /** Heavy function: Parses code strings into HAST nodes */
+  /** Heavy function: Parses code strings into HAST nodes (kept eager - small, on the sync parse path) */
   parseCode?: ParseCodeFn;
-  /** Heavy function: Parses controlled code for editable demos */
+  /** Heavy function: Parses controlled code for editable demos (kept eager - sync parse path) */
   parseControlledCode?: ParseControlledCodeFn;
-  /** Heavy function: Computes HAST deltas for code transformations */
-  computeHastDeltas?: ComputeHastDeltasFn;
-  /** Heavy function: Gets available transform keys for a variant */
-  getAvailableTransforms?: GetAvailableTransformsFn;
+  /**
+   * Lazily creates the live-editing worker (off-main-thread highlighter) and
+   * registers the given grammar scopes into it, so a read-only page never spins
+   * up the worker. Called by `CodeHighlighter` on the editable signal with the
+   * block's scopes. No-op during SSR or where `Worker` is unavailable.
+   */
+  ensureParseSourceWorker?: (scopes: string[]) => void;
+  /** Lazily loads the fallback-code loader (transitively pulls the variant loader). */
+  loadCodeFallbackLoader?: LoadFallbackCodeLoader;
+  /** Lazily loads the variant loader. */
+  loadIsomorphicCodeVariantLoader?: LoadVariantLoader;
+  /** Lazily loads the transform-delta computer (pulls jsondiffpatch). */
+  computeHastDeltasLoader?: ComputeHastDeltasLoader;
+  /**
+   * Lazily loads the client-side transform applier (`createTransformedFiles` —
+   * the `applyCodeTransform` path, which pulls `jsondiffpatch`). `useTransformManagement`
+   * consumes it (warm-cached so transform swaps stay synchronous once loaded);
+   * `CodeHighlighter` preloads it when it detects a block has transforms, so a
+   * block without transforms never pulls this chunk.
+   */
+  transformEngineLoader?: TransformEngineLoader;
+  /**
+   * Lazily loads the live-editing engine module — `createEditableEngine` (the
+   * contentEditable setup + keyboard/paste/caret handlers, pulls `react-dom`)
+   * AND the edit-time source manipulation (`analyzeSource`/`shiftComments`/
+   * `toControlledCode`), co-located in one chunk. The eager `CodeProvider`
+   * resolves a bundled module instantly; `CodeProviderLazy` resolves a dynamic
+   * `import()`. `useEditable` (via `Pre`) reads `createEditableEngine` and
+   * `useSourceEditing` reads the source-editing fns from the same module;
+   * `CodeHighlighter` preloads it when it detects an editable
+   * `CodeControllerContext`, unless the block opts out with
+   * `editActivation: 'interaction'`.
+   */
+  editingEngineLoader?: EditingEngineLoader;
 }
 export declare const CodeContext: React.Context<CodeContext>;
 export declare const useCodeContext: () => CodeContext;

package/CodeProvider/CodeContext.mjs

@@ -4,6 +4,13 @@ import * as React from 'react';
 
 // Type definitions for the heavy functions we're moving to context
 
+// Lazy accessors for the heaviest functions. Each returns the function via a
+// dynamic import (deduped per page by `PreloadProvider`), so the function's
+// module - and its heavy transitive deps (e.g. jsondiffpatch) - stays out of
+// the initial client bundle. The accessor's *presence* (always defined when a
+// CodeProvider is mounted) is the synchronously-known "is provisioned" signal
+// that gates loading, replacing the previous "is the resolved fn present" check.
+
 /**
  * Context interface for code processing functions.
  * Provides heavy functions via context that can't be serialized across the server-client boundary.

package/CodeProvider/CodeProvider.d.mts

@@ -5,8 +5,10 @@ import type { LoadCodeMeta, LoadSource, LoadVariantMeta, SourceEnhancers } from
  * Designed for cases where you need to render code blocks or demos based on
  * client-side state or dynamic content loading.
  *
- * Implements the Props Context Layering pattern by providing heavy functions
- * via context that can't be serialized across the server-client boundary.
+ * The heavy functions are bundled eagerly here, so they resolve instantly with
+ * no fetch - best when a layout will definitely render code. To keep them out of
+ * the initial bundle (loaded on demand, deduped across the page), use
+ * `CodeProviderLazy` instead.
  */
 export declare function CodeProvider({
   children,

package/CodeProvider/CodeProvider.mjs

@@ -2,126 +2,64 @@
 
 import * as React from 'react';
 import { CodeContext } from "./CodeContext.mjs";
-import { enhanceCodeEmphasis } from "../pipeline/enhanceCodeEmphasis/index.mjs";
+import { useCodeProviderValue } from "./useCodeProviderValue.mjs";
+// Heavy functions: statically imported (eager). They ship in this provider's
+// chunk so its accessors resolve instantly with no fetch. Use `CodeProviderLazy`
+// to keep them out of the initial bundle instead. (The default emphasis enhancer
+// is eager in both providers - see useCodeProviderValue.)
 import { createParseSource } from "../pipeline/parseSource/parseSource.mjs";
-// Import the heavy functions
 import { loadCodeFallback } from "../pipeline/loadIsomorphicCodeVariant/loadCodeFallback.mjs";
 import { loadIsomorphicCodeVariant } from "../pipeline/loadIsomorphicCodeVariant/loadIsomorphicCodeVariant.mjs";
-import { parseCode } from "../pipeline/loadIsomorphicCodeVariant/parseCode.mjs";
-import { parseControlledCode } from "../CodeHighlighter/parseControlledCode.mjs";
-import { computeHastDeltas, getAvailableTransforms } from "../pipeline/loadIsomorphicCodeVariant/computeHastDeltas.mjs";
+import { computeHastDeltas } from "../pipeline/loadIsomorphicCodeVariant/computeHastDeltas.mjs";
+import * as EditingEngine from "../useCode/EditingEngine.mjs";
+import { createTransformedFiles } from "../useCode/TransformEngine.mjs";
+// Eager: the emphasis enhancer is bundled so the synchronous editing
+// re-enhancement path has it with no fetch (zero-latency invariant).
+import { enhanceCodeEmphasis } from "../pipeline/enhanceCodeEmphasis/index.mjs";
+
+// Eager: the Starry Night engine is bundled, so the parser is created synchronously.
 import { jsx as _jsx } from "react/jsx-runtime";
-const DEFAULT_SOURCE_ENHANCERS = [enhanceCodeEmphasis];
+const createSourceParserEager = () => createParseSource();
+
+// Eager accessors: the function is already bundled, so the accessor resolves
+// instantly. Module-level so the references are stable across renders.
+const loadCodeFallbackLoaderEager = () => Promise.resolve(loadCodeFallback);
+const loadVariantLoaderEager = () => Promise.resolve(loadIsomorphicCodeVariant);
+const computeHastDeltasLoaderEager = () => Promise.resolve(computeHastDeltas);
+const editingEngineLoaderEager = () => Promise.resolve(EditingEngine);
+const transformEngineLoaderEager = () => Promise.resolve(createTransformedFiles);
 
 /**
  * Provides client-side functions for fetching source code and highlighting it.
  * Designed for cases where you need to render code blocks or demos based on
  * client-side state or dynamic content loading.
  *
- * Implements the Props Context Layering pattern by providing heavy functions
- * via context that can't be serialized across the server-client boundary.
+ * The heavy functions are bundled eagerly here, so they resolve instantly with
+ * no fetch - best when a layout will definitely render code. To keep them out of
+ * the initial bundle (loaded on demand, deduped across the page), use
+ * `CodeProviderLazy` instead.
  */
 export function CodeProvider({
   children,
   loadCodeMeta,
   loadVariantMeta,
   loadSource,
-  sourceEnhancers = DEFAULT_SOURCE_ENHANCERS
+  sourceEnhancers
 }) {
-  const [parseSource, setParseSource] = React.useState(undefined);
-  const [parseSourceAsync, setParseSourceAsync] = React.useState(undefined);
-  const sourceParser = React.useMemo(() => {
-    // Only initialize Starry Night in the browser, not during SSR
-    if (typeof window === 'undefined') {
-      return Promise.resolve(() => {
-        throw new Error('parseSource not available during SSR');
-      });
-    }
-    return createParseSource();
-  }, []);
-  React.useEffect(() => {
-    // Update the sync version when available
-    sourceParser.then(parseSourceFn => setParseSource(() => parseSourceFn));
-  }, [sourceParser]);
-
-  // Worker for off-main-thread parsing during live editing. Lazily created
-  // once per provider, browser-only, and torn down on unmount. The worker
-  // client module is dynamically imported so the `new URL('./parseSourceWorker.ts',
-  // import.meta.url)` call (which bundlers resolve to a separate worker chunk)
-  // never runs in SSR bundles.
-  const workerRef = React.useRef(null);
-  React.useEffect(() => {
-    if (typeof window === 'undefined' || typeof Worker === 'undefined') {
-      return undefined;
-    }
-    let cancelled = false;
-    let client;
-    Promise.all([import("./createParseSourceWorkerClient.mjs"),
-    // Share the same (lazy) grammar chunk that `createParseSource()` uses,
-    // so the heavy TextMate JSON is fetched at most once per page load and
-    // then `postMessage`d into the worker.
-    import("../pipeline/parseSource/grammars.mjs")]).then(([{
-      createParseSourceWorkerClient
-    }, {
-      grammars
-    }]) => {
-      if (cancelled) {
-        return;
-      }
-      // `createParseSourceWorkerClient()` throws synchronously on browsers
-      // that expose `Worker` but reject module workers (the typeof gate
-      // above can't detect that). Treat the failure as "no async parser
-      // available" so consumers transparently fall back to the synchronous
-      // highlighter instead of leaving an unhandled rejection on the page.
-      try {
-        client = createParseSourceWorkerClient();
-      } catch {
-        return;
-      }
-      workerRef.current = client;
-      client.init(grammars).then(() => {
-        if (cancelled) {
-          return;
-        }
-        setParseSourceAsync(() => client.parseSourceAsync);
-      }).catch(() => {
-        // Worker-side init failure (e.g. `createStarryNight` rejected).
-        // Tear down so we don't leak the worker, and leave
-        // `parseSourceAsync` undefined so consumers fall back to sync.
-        if (workerRef.current === client) {
-          workerRef.current = null;
-        }
-        client?.terminate();
-        client = undefined;
-      });
-    }).catch(() => {
-      // Dynamic-import failure (network error, missing chunk). Same
-      // fallback policy: stay on the main-thread highlighter.
-    });
-    return () => {
-      cancelled = true;
-      workerRef.current = null;
-      client?.terminate();
-    };
-  }, []);
-  const context = React.useMemo(() => ({
-    sourceParser,
-    parseSource,
-    // Sync version when available
-    parseSourceAsync,
-    // Worker-backed async version when available
-    loadSource,
-    loadVariantMeta,
+  const heavy = React.useMemo(() => ({
+    loadCodeFallbackLoader: loadCodeFallbackLoaderEager,
+    loadIsomorphicCodeVariantLoader: loadVariantLoaderEager,
+    computeHastDeltasLoader: computeHastDeltasLoaderEager,
+    editingEngineLoader: editingEngineLoaderEager,
+    transformEngineLoader: transformEngineLoaderEager,
+    defaultSourceEnhancers: [enhanceCodeEmphasis]
+  }), []);
+  const context = useCodeProviderValue({
     loadCodeMeta,
-    sourceEnhancers,
-    // Provide the heavy functions
-    loadCodeFallback,
-    loadIsomorphicCodeVariant,
-    parseCode,
-    parseControlledCode,
-    computeHastDeltas,
-    getAvailableTransforms
-  }), [sourceParser, parseSource, parseSourceAsync, loadSource, loadVariantMeta, loadCodeMeta, sourceEnhancers]);
+    loadVariantMeta,
+    loadSource,
+    sourceEnhancers
+  }, heavy, createSourceParserEager);
   return /*#__PURE__*/_jsx(CodeContext.Provider, {
     value: context,
     children: children