@unfold-mdx/react 0.0.1

package/dist/index.cjs

@@ -0,0 +1,626 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Depth: () => Depth,
+  DepthCode: () => DepthCode,
+  DepthLevel: () => DepthLevel,
+  DepthPane: () => DepthPane,
+  codeDiff: () => codeDiff,
+  sentenceDiff: () => sentenceDiff,
+  tokenize: () => tokenize,
+  tokenizeCodeLine: () => tokenizeCodeLine,
+  tokenizeLines: () => tokenizeLines
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/diff/tokenize.ts
+function tokenize(text) {
+  if (!text) {
+    return [];
+  }
+  const splitRegex = /(?<=(?:(?<!\.)\.(?!\.)|[!?]))(?=\s|$)/;
+  return text.split(splitRegex).map((token) => token.trim()).filter((token) => token.length > 0);
+}
+
+// src/diff/sentenceDiff.ts
+var import_diff_match_patch = require("diff-match-patch");
+function sentenceDiff(prev, next) {
+  const prevSentences = tokenize(prev);
+  const nextSentences = tokenize(next);
+  const sentenceToChar = /* @__PURE__ */ new Map();
+  const charToSentence = [];
+  function getCharForSentence(sentence) {
+    let char = sentenceToChar.get(sentence);
+    if (char === void 0) {
+      const code = charToSentence.length;
+      char = String.fromCharCode(code);
+      sentenceToChar.set(sentence, char);
+      charToSentence.push(sentence);
+    }
+    return char;
+  }
+  const prevChars = prevSentences.map(getCharForSentence).join("");
+  const nextChars = nextSentences.map(getCharForSentence).join("");
+  const dmp = new import_diff_match_patch.diff_match_patch();
+  const diffs = dmp.diff_main(prevChars, nextChars);
+  dmp.diff_cleanupSemantic(diffs);
+  const result = [];
+  let i = 0;
+  while (i < diffs.length) {
+    const [op, text] = diffs[i];
+    if (op === 0) {
+      for (let j = 0; j < text.length; j++) {
+        result.push({
+          kind: "equal",
+          sentence: charToSentence[text.charCodeAt(j)]
+        });
+      }
+      i++;
+    } else if (op === -1 && i + 1 < diffs.length && diffs[i + 1][0] === 1) {
+      const deleteText = text;
+      const insertText = diffs[i + 1][1];
+      const deleteLen = deleteText.length;
+      const insertLen = insertText.length;
+      const minLen = Math.min(deleteLen, insertLen);
+      for (let j = 0; j < minLen; j++) {
+        result.push({
+          kind: "modified",
+          before: charToSentence[deleteText.charCodeAt(j)],
+          after: charToSentence[insertText.charCodeAt(j)]
+        });
+      }
+      for (let j = minLen; j < deleteLen; j++) {
+        result.push({
+          kind: "removed",
+          sentence: charToSentence[deleteText.charCodeAt(j)]
+        });
+      }
+      for (let j = minLen; j < insertLen; j++) {
+        result.push({
+          kind: "added",
+          sentence: charToSentence[insertText.charCodeAt(j)]
+        });
+      }
+      i += 2;
+    } else if (op === -1) {
+      for (let j = 0; j < text.length; j++) {
+        result.push({
+          kind: "removed",
+          sentence: charToSentence[text.charCodeAt(j)]
+        });
+      }
+      i++;
+    } else if (op === 1) {
+      for (let j = 0; j < text.length; j++) {
+        result.push({
+          kind: "added",
+          sentence: charToSentence[text.charCodeAt(j)]
+        });
+      }
+      i++;
+    }
+  }
+  return result;
+}
+
+// src/diff/codeTokenize.ts
+function tokenizeLines(code) {
+  if (code === "") return [];
+  return code.split(/\r?\n/);
+}
+function tokenizeCodeLine(line) {
+  if (line === "") return [];
+  const regex = /([a-zA-Z0-9_]+|\s+|[^a-zA-Z0-9_\s])/g;
+  const tokens = [];
+  let match;
+  while ((match = regex.exec(line)) !== null) {
+    if (match[0].length > 0) {
+      tokens.push(match[0]);
+    }
+  }
+  return tokens;
+}
+
+// src/diff/codeDiff.ts
+var import_diff_match_patch2 = require("diff-match-patch");
+function codeDiff(prev, next) {
+  if (prev === "" && next !== "") {
+    return tokenizeLines(next).map((line) => ({
+      kind: "added",
+      tokens: tokenizeCodeLine(line).map((t) => ({ kind: "added", text: t }))
+    }));
+  }
+  const prevLines = tokenizeLines(prev);
+  const nextLines = tokenizeLines(next);
+  const lineToChar = /* @__PURE__ */ new Map();
+  const charToLine = [];
+  function getCharForLine(line) {
+    let char = lineToChar.get(line);
+    if (char === void 0) {
+      const code = charToLine.length;
+      char = String.fromCharCode(code);
+      lineToChar.set(line, char);
+      charToLine.push(line);
+    }
+    return char;
+  }
+  const prevChars = prevLines.map(getCharForLine).join("");
+  const nextChars = nextLines.map(getCharForLine).join("");
+  const dmp = new import_diff_match_patch2.diff_match_patch();
+  const diffs = dmp.diff_main(prevChars, nextChars);
+  dmp.diff_cleanupSemantic(diffs);
+  const result = [];
+  let i = 0;
+  while (i < diffs.length) {
+    const [op, text] = diffs[i];
+    if (op === 0) {
+      for (let j = 0; j < text.length; j++) {
+        result.push({
+          kind: "equal",
+          line: charToLine[text.charCodeAt(j)]
+        });
+      }
+      i++;
+    } else if (op === -1 && i + 1 < diffs.length && diffs[i + 1][0] === 1) {
+      const deleteText = text;
+      const insertText = diffs[i + 1][1];
+      const deleteLen = deleteText.length;
+      const insertLen = insertText.length;
+      const minLen = Math.min(deleteLen, insertLen);
+      for (let j = 0; j < minLen; j++) {
+        let getCharForToken2 = function(tok) {
+          let char = tokenToChar.get(tok);
+          if (char === void 0) {
+            const code = charToToken.length;
+            char = String.fromCharCode(code);
+            tokenToChar.set(tok, char);
+            charToToken.push(tok);
+          }
+          return char;
+        };
+        var getCharForToken = getCharForToken2;
+        const prevLine = charToLine[deleteText.charCodeAt(j)];
+        const nextLine = charToLine[insertText.charCodeAt(j)];
+        const prevTokens = tokenizeCodeLine(prevLine);
+        const nextTokens = tokenizeCodeLine(nextLine);
+        const tokenToChar = /* @__PURE__ */ new Map();
+        const charToToken = [];
+        const prevTokChars = prevTokens.map(getCharForToken2).join("");
+        const nextTokChars = nextTokens.map(getCharForToken2).join("");
+        const tokDiffs = dmp.diff_main(prevTokChars, nextTokChars);
+        dmp.diff_cleanupSemantic(tokDiffs);
+        const tokens = [];
+        for (let k = 0; k < tokDiffs.length; k++) {
+          const [tokOp, tokText] = tokDiffs[k];
+          if (tokOp === 0) {
+            for (let c = 0; c < tokText.length; c++) {
+              tokens.push({ kind: "equal", text: charToToken[tokText.charCodeAt(c)] });
+            }
+          } else if (tokOp === 1) {
+            for (let c = 0; c < tokText.length; c++) {
+              tokens.push({ kind: "added", text: charToToken[tokText.charCodeAt(c)] });
+            }
+          }
+        }
+        result.push({ kind: "changed", tokens });
+      }
+      for (let j = minLen; j < insertLen; j++) {
+        const line = charToLine[insertText.charCodeAt(j)];
+        const tokens = tokenizeCodeLine(line).map((t) => ({ kind: "added", text: t }));
+        result.push({ kind: "added", tokens });
+      }
+      i += 2;
+    } else if (op === -1) {
+      i++;
+    } else if (op === 1) {
+      for (let j = 0; j < text.length; j++) {
+        const line = charToLine[text.charCodeAt(j)];
+        const tokens = tokenizeCodeLine(line).map((t) => ({ kind: "added", text: t }));
+        result.push({ kind: "added", tokens });
+      }
+      i++;
+    }
+  }
+  return result;
+}
+
+// src/components/Depth.tsx
+var import_react4 = __toESM(require("react"), 1);
+
+// src/context/DepthContext.tsx
+var import_react = require("react");
+var DepthContext = (0, import_react.createContext)(null);
+
+// src/components/DepthLevel.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function DepthLevel({ label, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-depth-level": true, ...props, children });
+}
+DepthLevel.unfoldType = "level";
+
+// src/components/DepthCode.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function DepthCode({ lang, label, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { "data-lang": lang, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { children }) });
+}
+DepthCode.unfoldType = "code";
+
+// src/components/DepthPane.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("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";
+  };
+  (0, import_react2.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__ */ (0, import_jsx_runtime3.jsxs)("div", { "data-unfold-panes": true, children: [
+    showProse && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)(
+        "span",
+        {
+          "data-sentence": status,
+          "data-enter": status === "added" ? enterState : void 0,
+          children: [
+            sentenceText,
+            " "
+          ]
+        },
+        `prose-${index}`
+      );
+    }) }),
+    showCode && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-unfold-pane": "code", "aria-live": "polite", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { "data-lang": codeLang, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)("span", { "data-code-line": "equal", children: [
+          lineDiff.line,
+          "\n"
+        ] }, `line-${lineIndex}`);
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(
+                "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
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("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 = (0, import_react3.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__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-unfold-controls": true, "data-button-variant": buttonVariant, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "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__ */ (0, import_jsx_runtime4.jsx)("div", { "data-unfold-indicators": true, role: "tablist", children: Array.from({ length: totalSteps }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "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__ */ (0, import_jsx_runtime4.jsx)(
+      "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
+var import_jsx_runtime5 = require("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 (import_react4.default.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] = (0, import_react4.useState)(defaultIndex ?? 0);
+  const currentIndex = isControlled ? selectedIndex : internalIndex;
+  const [isMounted, setIsMounted] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    setIsMounted(true);
+  }, []);
+  const parsedChildren = (0, import_react4.useMemo)(() => {
+    const proseLevels = [];
+    const codeLevels = [];
+    import_react4.default.Children.forEach(children, (child) => {
+      if (import_react4.default.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 = (0, import_react4.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 = (0, import_react4.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] = (0, import_react4.useState)(false);
+  const prevIndexRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (prevIndexRef.current !== null && currentIndex !== prevIndexRef.current) {
+      setJustEntered(true);
+    }
+    prevIndexRef.current = currentIndex;
+  }, [currentIndex]);
+  (0, import_react4.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__ */ (0, import_jsx_runtime5.jsx)(DepthContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "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: import_react4.default.Children.map(children, (child) => {
+          if (import_react4.default.isValidElement(child)) {
+            const type = child.type?.unfoldType || child.type;
+            if (type === "level" || type === DepthLevel) {
+              const isDeepest = proseCount === Math.max(0, maxProse - 1);
+              proseCount++;
+              return import_react4.default.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 import_react4.default.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__ */ (0, import_jsx_runtime5.jsx)(DepthContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "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__ */ (0, import_jsx_runtime5.jsx)(
+          DepthPane,
+          {
+            show,
+            proseDiff: currentProseDiff,
+            codeDiff: currentCodeDiff,
+            justEntered,
+            animate,
+            codeLang: currentCodeLang,
+            codeText: currentCodeText,
+            highlighter,
+            highlight
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Controls, { buttonVariant, indicators })
+      ]
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Depth,
+  DepthCode,
+  DepthLevel,
+  DepthPane,
+  codeDiff,
+  sentenceDiff,
+  tokenize,
+  tokenizeCodeLine,
+  tokenizeLines
+});

package/dist/index.d.cts

@@ -0,0 +1,65 @@
+import { SentenceDiff } from './diff/index.cjs';
+export { sentenceDiff, tokenize, tokenizeCodeLine, tokenizeLines } from './diff/index.cjs';
+import { C as CodeLineDiff } from './codeDiff-BVwZfdt9.cjs';
+export { a as CodeToken, c as codeDiff } from './codeDiff-BVwZfdt9.cjs';
+import * as React from 'react';
+import React__default from 'react';
+import { ShikiHighlighter } from './shiki/index.cjs';
+
+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 };