@unfold-mdx/react 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+import { SentenceDiff } from './diff/index.js';
+export { sentenceDiff, tokenize, tokenizeCodeLine, tokenizeLines } from './diff/index.js';
+import { C as CodeLineDiff } from './codeDiff-BVwZfdt9.js';
+export { a as CodeToken, c as codeDiff } from './codeDiff-BVwZfdt9.js';
+import * as React from 'react';
+import React__default from 'react';
+import { ShikiHighlighter } from './shiki/index.js';
+
+interface DepthProps {
+    selectedIndex?: number;
+    defaultIndex?: number;
+    onChange?: (i: number) => void;
+    orientation?: "horizontal" | "vertical";
+    ratio?: number;
+    show?: "both" | "prose" | "code";
+    indicators?: boolean;
+    buttonVariant?: "text" | "arrow" | "chevron" | "minimal";
+    animate?: boolean;
+    highlight?: boolean;
+    highlighter?: ShikiHighlighter;
+    children: React__default.ReactNode;
+}
+declare function Depth({ selectedIndex, defaultIndex, onChange, orientation, ratio, show, indicators, buttonVariant, animate, highlight, highlighter, children, }: DepthProps): React__default.JSX.Element;
+
+interface DepthLevelProps {
+    label: string;
+    children: React__default.ReactNode;
+    [key: string]: any;
+}
+/**
+ * DepthLevel acts as a slot component to hold a level's label and prose snapshot.
+ *
+ * - Inside <Depth> (after mounting/hydration), it is parsed and not rendered directly.
+ * - Outside <Depth> (or during SSR / before hydration), it falls back to rendering
+ *   its children wrapped in a container with a data-depth-level attribute.
+ */
+declare function DepthLevel({ label, children, ...props }: DepthLevelProps): React__default.JSX.Element;
+declare namespace DepthLevel {
+    var unfoldType: string;
+}
+
+interface DepthCodeProps extends React__default.HTMLAttributes<HTMLPreElement> {
+    lang?: string;
+    label?: string;
+    children: string;
+}
+declare function DepthCode({ lang, label, children, ...rest }: DepthCodeProps): React__default.JSX.Element;
+declare namespace DepthCode {
+    var unfoldType: string;
+}
+
+interface DepthPaneProps {
+    show: "both" | "prose" | "code";
+    proseDiff: SentenceDiff[];
+    codeDiff: CodeLineDiff[];
+    justEntered: boolean;
+    animate: boolean;
+    codeLang?: string;
+    codeText?: string;
+    highlighter?: ShikiHighlighter;
+    highlight?: boolean;
+}
+declare function DepthPane({ show, proseDiff, codeDiff, justEntered, animate, codeLang, codeText, highlighter, highlight, }: DepthPaneProps): React.JSX.Element;
+
+export { CodeLineDiff, Depth, DepthCode, type DepthCodeProps, DepthLevel, type DepthLevelProps, DepthPane, type DepthProps, SentenceDiff };

package/dist/index.js

@@ -0,0 +1,378 @@
+import {
+  codeDiff,
+  sentenceDiff,
+  tokenize,
+  tokenizeCodeLine,
+  tokenizeLines
+} from "./chunk-OX5XKYQT.js";
+
+// src/components/Depth.tsx
+import React, { useState, useEffect, useMemo, useRef } from "react";
+
+// src/context/DepthContext.tsx
+import { createContext } from "react";
+var DepthContext = createContext(null);
+
+// src/components/DepthLevel.tsx
+import { jsx } from "react/jsx-runtime";
+function DepthLevel({ label, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-depth-level": true, ...props, children });
+}
+DepthLevel.unfoldType = "level";
+
+// src/components/DepthCode.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function DepthCode({ lang, label, children, ...rest }) {
+  return /* @__PURE__ */ jsx2("pre", { "data-lang": lang, ...rest, children: /* @__PURE__ */ jsx2("code", { children }) });
+}
+DepthCode.unfoldType = "code";
+
+// src/components/DepthPane.tsx
+import { useSyncExternalStore } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var noopSubscribe = () => () => {
+};
+function DepthPane({
+  show,
+  proseDiff,
+  codeDiff: codeDiff2,
+  justEntered,
+  animate,
+  codeLang,
+  codeText,
+  highlighter,
+  highlight = true
+}) {
+  const showProse = show === "both" || show === "prose";
+  const showCode = show === "both" || show === "code";
+  const enterState = animate && justEntered ? "true" : void 0;
+  const getStatus = (itemKind) => {
+    if (!highlight || itemKind === "equal") return "equal";
+    return "added";
+  };
+  useSyncExternalStore(
+    highlighter?.subscribe ?? noopSubscribe,
+    () => highlighter?.getSnapshot() ?? 0,
+    () => highlighter?.getSnapshot() ?? 0
+  );
+  let finalCodeDiff = codeDiff2;
+  if (highlighter && codeText !== void 0 && codeLang !== void 0) {
+    const highlighted = highlighter.highlight(codeText, codeLang, codeDiff2);
+    if (highlighted) {
+      finalCodeDiff = highlighted;
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-unfold-panes": true, children: [
+    showProse && /* @__PURE__ */ jsx3("div", { "data-unfold-pane": "prose", "aria-live": "polite", children: proseDiff.filter((item) => item.kind !== "removed").map((item, index) => {
+      const status = getStatus(item.kind);
+      const sentenceText = item.kind === "modified" ? item.after : item.sentence;
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          "data-sentence": status,
+          "data-enter": status === "added" ? enterState : void 0,
+          children: [
+            sentenceText,
+            " "
+          ]
+        },
+        `prose-${index}`
+      );
+    }) }),
+    showCode && /* @__PURE__ */ jsx3("div", { "data-unfold-pane": "code", "aria-live": "polite", children: /* @__PURE__ */ jsx3("pre", { "data-lang": codeLang, children: /* @__PURE__ */ jsx3("code", { children: finalCodeDiff.map((lineDiff, lineIndex) => {
+      const lineText = lineDiff.tokens ? lineDiff.tokens.map((t) => t.text).join("") : lineDiff.line || "";
+      const isWhitespaceOnly = lineText.trim() === "";
+      const lineStatus = isWhitespaceOnly ? "equal" : getStatus(lineDiff.kind);
+      if (lineDiff.kind === "equal" && !lineDiff.tokens) {
+        return /* @__PURE__ */ jsxs("span", { "data-code-line": "equal", children: [
+          lineDiff.line,
+          "\n"
+        ] }, `line-${lineIndex}`);
+      }
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          "data-code-line": lineStatus,
+          "data-enter": lineStatus === "added" ? enterState : void 0,
+          children: [
+            lineDiff.tokens?.map((token, tokenIndex) => {
+              const tokenStatus = getStatus(token.kind);
+              return /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  "data-code-token": isWhitespaceOnly ? "equal" : tokenStatus,
+                  style: token.color ? { color: token.color } : void 0,
+                  children: token.text
+                },
+                `token-${tokenIndex}`
+              );
+            }),
+            "\n"
+          ]
+        },
+        `line-${lineIndex}`
+      );
+    }) }) }) })
+  ] });
+}
+
+// src/components/controls/Controls.tsx
+import { useContext } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var BUTTON_LABELS = {
+  text: { prev: "Prev", next: "Next" },
+  arrow: { prev: "\u2190 Prev", next: "Next \u2192" },
+  chevron: { prev: "\u2039 Prev", next: "Next \u203A" },
+  minimal: { prev: "\u2039", next: "\u203A" }
+};
+function Controls({ buttonVariant, indicators }) {
+  const context = useContext(DepthContext);
+  if (!context) return null;
+  const { selectedIndex, totalSteps, advance, back, goTo, labels } = context;
+  const isFirst = selectedIndex === 0;
+  const isLast = selectedIndex === totalSteps - 1;
+  const btnText = BUTTON_LABELS[buttonVariant] || BUTTON_LABELS.text;
+  return /* @__PURE__ */ jsxs2("div", { "data-unfold-controls": true, "data-button-variant": buttonVariant, children: [
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        "data-unfold-prev": true,
+        "aria-disabled": isFirst ? "true" : "false",
+        "aria-label": !isFirst ? `Go back to step: ${labels[selectedIndex - 1]}` : void 0,
+        onClick: back,
+        children: btnText.prev
+      }
+    ),
+    indicators && /* @__PURE__ */ jsx4("div", { "data-unfold-indicators": true, role: "tablist", children: Array.from({ length: totalSteps }).map((_, i) => /* @__PURE__ */ jsx4(
+      "button",
+      {
+        role: "tab",
+        "aria-selected": i === selectedIndex,
+        "data-unfold-dot": true,
+        "data-active": i === selectedIndex ? "true" : void 0,
+        "aria-label": `Go to step: ${labels[i] || i + 1}`,
+        onClick: () => goTo(i)
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        "data-unfold-next": true,
+        "aria-disabled": isLast ? "true" : "false",
+        "aria-label": !isLast ? `Advance to step: ${labels[selectedIndex + 1]}` : void 0,
+        onClick: advance,
+        children: btnText.next
+      }
+    )
+  ] });
+}
+
+// src/components/Depth.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function getTextContent(node) {
+  if (node === null || node === void 0) {
+    return "";
+  }
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(getTextContent).join("");
+  }
+  if (React.isValidElement(node)) {
+    return getTextContent(node.props.children);
+  }
+  return "";
+}
+function Depth({
+  selectedIndex,
+  defaultIndex,
+  onChange,
+  orientation = "horizontal",
+  ratio = 0.5,
+  show = "both",
+  indicators = false,
+  buttonVariant = "text",
+  animate = true,
+  highlight = true,
+  highlighter,
+  children
+}) {
+  const isControlled = selectedIndex !== void 0 && onChange !== void 0;
+  const [internalIndex, setInternalIndex] = useState(defaultIndex ?? 0);
+  const currentIndex = isControlled ? selectedIndex : internalIndex;
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  const parsedChildren = useMemo(() => {
+    const proseLevels = [];
+    const codeLevels = [];
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child)) {
+        const type = child.type?.unfoldType || child.type;
+        if (type === "level" || type === DepthLevel) {
+          proseLevels.push({
+            label: child.props.label || "",
+            text: getTextContent(child.props.children)
+          });
+        } else if (type === "code" || type === DepthCode) {
+          codeLevels.push({
+            lang: child.props.lang || "",
+            label: child.props.label || "",
+            text: getTextContent(child.props.children)
+          });
+        }
+      }
+    });
+    return { proseLevels, codeLevels };
+  }, [children]);
+  const proseDiffTable = useMemo(() => {
+    const table = [];
+    if (parsedChildren.proseLevels.length > 0) {
+      table.push(sentenceDiff("", parsedChildren.proseLevels[0].text));
+      for (let i = 1; i < parsedChildren.proseLevels.length; i++) {
+        table.push(sentenceDiff(parsedChildren.proseLevels[i - 1].text, parsedChildren.proseLevels[i].text));
+      }
+    }
+    return table;
+  }, [parsedChildren.proseLevels]);
+  const codeDiffTable = useMemo(() => {
+    const table = [];
+    if (parsedChildren.codeLevels.length > 0) {
+      table.push(codeDiff("", parsedChildren.codeLevels[0].text));
+      for (let i = 1; i < parsedChildren.codeLevels.length; i++) {
+        table.push(codeDiff(parsedChildren.codeLevels[i - 1].text, parsedChildren.codeLevels[i].text));
+      }
+    }
+    return table;
+  }, [parsedChildren.codeLevels]);
+  const [justEntered, setJustEntered] = useState(false);
+  const prevIndexRef = useRef(null);
+  useEffect(() => {
+    if (prevIndexRef.current !== null && currentIndex !== prevIndexRef.current) {
+      setJustEntered(true);
+    }
+    prevIndexRef.current = currentIndex;
+  }, [currentIndex]);
+  useEffect(() => {
+    if (justEntered) {
+      const animFrameId = requestAnimationFrame(() => {
+        setJustEntered(false);
+      });
+      return () => cancelAnimationFrame(animFrameId);
+    }
+  }, [justEntered]);
+  const totalSteps = Math.max(parsedChildren.proseLevels.length, parsedChildren.codeLevels.length, 1);
+  const goTo = (index) => {
+    if (index >= 0 && index < totalSteps) {
+      if (!isControlled) {
+        setInternalIndex(index);
+      }
+      onChange?.(index);
+    }
+  };
+  const handleBack = () => goTo(currentIndex - 1);
+  const handleNext = () => goTo(currentIndex + 1);
+  const maxLabels = Math.max(parsedChildren.proseLevels.length, parsedChildren.codeLevels.length);
+  const labels = Array.from({ length: maxLabels }).map((_, i) => {
+    return parsedChildren.proseLevels[i]?.label || parsedChildren.codeLevels[i]?.label || `Step ${i + 1}`;
+  });
+  const contextValue = {
+    selectedIndex: currentIndex,
+    totalSteps,
+    labels,
+    show,
+    orientation,
+    goTo,
+    advance: handleNext,
+    back: handleBack
+  };
+  if (!isMounted) {
+    const defaultLastIndex = totalSteps - 1;
+    let proseCount = 0;
+    let codeCount = 0;
+    const maxProse = parsedChildren.proseLevels.length;
+    const maxCode = parsedChildren.codeLevels.length;
+    return /* @__PURE__ */ jsx5(DepthContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx5(
+      "div",
+      {
+        "data-unfold-root": true,
+        "data-orientation": orientation,
+        "data-show": show,
+        style: { "--unfold-ratio": ratio },
+        "data-level": defaultLastIndex,
+        "data-total-levels": totalSteps,
+        role: "region",
+        "aria-label": labels[defaultLastIndex],
+        children: React.Children.map(children, (child) => {
+          if (React.isValidElement(child)) {
+            const type = child.type?.unfoldType || child.type;
+            if (type === "level" || type === DepthLevel) {
+              const isDeepest = proseCount === Math.max(0, maxProse - 1);
+              proseCount++;
+              return React.cloneElement(child, {
+                "data-unfold-active": isDeepest ? "true" : void 0
+              });
+            } else if (type === "code" || type === DepthCode) {
+              const isDeepest = codeCount === Math.max(0, maxCode - 1);
+              codeCount++;
+              return React.cloneElement(child, {
+                "data-unfold-active": isDeepest ? "true" : void 0
+              });
+            }
+          }
+          return child;
+        })
+      }
+    ) });
+  }
+  const clampedProseIndex = Math.min(currentIndex, proseDiffTable.length - 1);
+  const clampedCodeIndex = Math.min(currentIndex, codeDiffTable.length - 1);
+  const currentProseDiff = clampedProseIndex >= 0 ? proseDiffTable[clampedProseIndex] : [];
+  const currentCodeDiff = clampedCodeIndex >= 0 ? codeDiffTable[clampedCodeIndex] : [];
+  const currentCodeLang = clampedCodeIndex >= 0 ? parsedChildren.codeLevels[clampedCodeIndex]?.lang : void 0;
+  const currentCodeText = clampedCodeIndex >= 0 ? parsedChildren.codeLevels[clampedCodeIndex]?.text : void 0;
+  return /* @__PURE__ */ jsx5(DepthContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-unfold-root": true,
+      "data-orientation": orientation,
+      "data-show": show,
+      style: { "--unfold-ratio": ratio },
+      "data-level": currentIndex,
+      "data-total-levels": totalSteps,
+      role: "region",
+      "aria-label": labels[currentIndex],
+      children: [
+        /* @__PURE__ */ jsx5(
+          DepthPane,
+          {
+            show,
+            proseDiff: currentProseDiff,
+            codeDiff: currentCodeDiff,
+            justEntered,
+            animate,
+            codeLang: currentCodeLang,
+            codeText: currentCodeText,
+            highlighter,
+            highlight
+          }
+        ),
+        /* @__PURE__ */ jsx5(Controls, { buttonVariant, indicators })
+      ]
+    }
+  ) });
+}
+export {
+  Depth,
+  DepthCode,
+  DepthLevel,
+  DepthPane,
+  codeDiff,
+  sentenceDiff,
+  tokenize,
+  tokenizeCodeLine,
+  tokenizeLines
+};

package/dist/shiki/index.cjs

@@ -0,0 +1,125 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/shiki/index.ts
+var shiki_exports = {};
+__export(shiki_exports, {
+  createShikiHighlighter: () => createShikiHighlighter
+});
+module.exports = __toCommonJS(shiki_exports);
+var import_shiki = require("shiki");
+function mergeTokens(diffTokens, syntaxTokens) {
+  const chars = [];
+  for (const dt of diffTokens) {
+    for (const char of dt.text) {
+      chars.push({ char, kind: dt.kind });
+    }
+  }
+  let charIdx = 0;
+  for (const st of syntaxTokens) {
+    const len = st.content.length;
+    for (let i = 0; i < len; i++) {
+      if (charIdx < chars.length) {
+        chars[charIdx].color = st.color;
+      }
+      charIdx++;
+    }
+  }
+  const merged = [];
+  if (chars.length === 0) return merged;
+  let currentKind = chars[0].kind;
+  let currentColor = chars[0].color;
+  let currentText = chars[0].char;
+  for (let i = 1; i < chars.length; i++) {
+    const c = chars[i];
+    if (c.kind === currentKind && c.color === currentColor) {
+      currentText += c.char;
+    } else {
+      merged.push({ kind: currentKind, color: currentColor, text: currentText });
+      currentKind = c.kind;
+      currentColor = c.color;
+      currentText = c.char;
+    }
+  }
+  merged.push({ kind: currentKind, color: currentColor, text: currentText });
+  return merged;
+}
+function createShikiHighlighter(options = {}) {
+  let highlighter = null;
+  let isReady = false;
+  let tick = 0;
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => {
+    tick++;
+    listeners.forEach((fn) => fn());
+  };
+  const defaultTheme = options.theme || "vitesse-dark";
+  const defaultLangs = options.langs || ["javascript", "typescript", "jsx", "tsx", "css", "html", "json", "markdown"];
+  (0, import_shiki.getHighlighter)({
+    themes: [defaultTheme],
+    langs: defaultLangs
+  }).then((h) => {
+    highlighter = h;
+    isReady = true;
+    notify();
+  }).catch((err) => {
+    console.error("[unfold-mdx] Failed to initialize Shiki highlighter:", err);
+  });
+  return {
+    subscribe: (onStoreChange) => {
+      listeners.add(onStoreChange);
+      return () => {
+        listeners.delete(onStoreChange);
+      };
+    },
+    getSnapshot: () => tick,
+    highlight: (code, lang, diffLines) => {
+      if (!isReady || !highlighter) {
+        return void 0;
+      }
+      let syntaxLines;
+      try {
+        syntaxLines = highlighter.codeToTokensBase(code, {
+          lang,
+          theme: defaultTheme
+        });
+      } catch (e) {
+        return void 0;
+      }
+      return diffLines.map((lineDiff, i) => {
+        const syntaxTokens = syntaxLines[i] || [];
+        let diffTokens;
+        if (lineDiff.kind === "equal" && !lineDiff.tokens) {
+          diffTokens = [{ kind: "equal", text: lineDiff.line }];
+        } else {
+          diffTokens = lineDiff.tokens || [];
+        }
+        const mergedTokens = mergeTokens(diffTokens, syntaxTokens);
+        return {
+          ...lineDiff,
+          tokens: mergedTokens
+        };
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createShikiHighlighter
+});

package/dist/shiki/index.d.cts

@@ -0,0 +1,14 @@
+import { C as CodeLineDiff } from '../codeDiff-BVwZfdt9.cjs';
+
+interface ShikiAdapterOptions {
+    theme?: string;
+    langs?: string[];
+}
+interface ShikiHighlighter {
+    subscribe: (onStoreChange: () => void) => () => void;
+    getSnapshot: () => number;
+    highlight: (code: string, lang: string, diffLines: CodeLineDiff[]) => CodeLineDiff[] | undefined;
+}
+declare function createShikiHighlighter(options?: ShikiAdapterOptions): ShikiHighlighter;
+
+export { type ShikiAdapterOptions, type ShikiHighlighter, createShikiHighlighter };

package/dist/shiki/index.d.ts

@@ -0,0 +1,14 @@
+import { C as CodeLineDiff } from '../codeDiff-BVwZfdt9.js';
+
+interface ShikiAdapterOptions {
+    theme?: string;
+    langs?: string[];
+}
+interface ShikiHighlighter {
+    subscribe: (onStoreChange: () => void) => () => void;
+    getSnapshot: () => number;
+    highlight: (code: string, lang: string, diffLines: CodeLineDiff[]) => CodeLineDiff[] | undefined;
+}
+declare function createShikiHighlighter(options?: ShikiAdapterOptions): ShikiHighlighter;
+
+export { type ShikiAdapterOptions, type ShikiHighlighter, createShikiHighlighter };

package/dist/shiki/index.js

@@ -0,0 +1,100 @@
+// src/shiki/index.ts
+import { getHighlighter } from "shiki";
+function mergeTokens(diffTokens, syntaxTokens) {
+  const chars = [];
+  for (const dt of diffTokens) {
+    for (const char of dt.text) {
+      chars.push({ char, kind: dt.kind });
+    }
+  }
+  let charIdx = 0;
+  for (const st of syntaxTokens) {
+    const len = st.content.length;
+    for (let i = 0; i < len; i++) {
+      if (charIdx < chars.length) {
+        chars[charIdx].color = st.color;
+      }
+      charIdx++;
+    }
+  }
+  const merged = [];
+  if (chars.length === 0) return merged;
+  let currentKind = chars[0].kind;
+  let currentColor = chars[0].color;
+  let currentText = chars[0].char;
+  for (let i = 1; i < chars.length; i++) {
+    const c = chars[i];
+    if (c.kind === currentKind && c.color === currentColor) {
+      currentText += c.char;
+    } else {
+      merged.push({ kind: currentKind, color: currentColor, text: currentText });
+      currentKind = c.kind;
+      currentColor = c.color;
+      currentText = c.char;
+    }
+  }
+  merged.push({ kind: currentKind, color: currentColor, text: currentText });
+  return merged;
+}
+function createShikiHighlighter(options = {}) {
+  let highlighter = null;
+  let isReady = false;
+  let tick = 0;
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => {
+    tick++;
+    listeners.forEach((fn) => fn());
+  };
+  const defaultTheme = options.theme || "vitesse-dark";
+  const defaultLangs = options.langs || ["javascript", "typescript", "jsx", "tsx", "css", "html", "json", "markdown"];
+  getHighlighter({
+    themes: [defaultTheme],
+    langs: defaultLangs
+  }).then((h) => {
+    highlighter = h;
+    isReady = true;
+    notify();
+  }).catch((err) => {
+    console.error("[unfold-mdx] Failed to initialize Shiki highlighter:", err);
+  });
+  return {
+    subscribe: (onStoreChange) => {
+      listeners.add(onStoreChange);
+      return () => {
+        listeners.delete(onStoreChange);
+      };
+    },
+    getSnapshot: () => tick,
+    highlight: (code, lang, diffLines) => {
+      if (!isReady || !highlighter) {
+        return void 0;
+      }
+      let syntaxLines;
+      try {
+        syntaxLines = highlighter.codeToTokensBase(code, {
+          lang,
+          theme: defaultTheme
+        });
+      } catch (e) {
+        return void 0;
+      }
+      return diffLines.map((lineDiff, i) => {
+        const syntaxTokens = syntaxLines[i] || [];
+        let diffTokens;
+        if (lineDiff.kind === "equal" && !lineDiff.tokens) {
+          diffTokens = [{ kind: "equal", text: lineDiff.line }];
+        } else {
+          diffTokens = lineDiff.tokens || [];
+        }
+        const mergedTokens = mergeTokens(diffTokens, syntaxTokens);
+        return {
+          ...lineDiff,
+          tokens: mergedTokens
+        };
+      });
+    }
+  };
+}
+export {
+  createShikiHighlighter
+};