@noirmd/previewer 1.0.0

package/dist/NReditor.mjs

@@ -0,0 +1,2344 @@
+// NReditor.tsx
+import React9, { useRef as useRef6, useState as useState5 } from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import { EditorView, Decoration, ViewPlugin, lineNumbers, scrollPastEnd, keymap } from "@codemirror/view";
+
+// custom-syntax.ts
+import { StreamLanguage } from "@codemirror/language";
+import { tags as t } from "@lezer/highlight";
+var customStreamParserV2 = StreamLanguage.define({
+  startState: () => ({
+    inCodeBlock: false,
+    inDirectiveHeader: false,
+    inPropsBlock: false,
+    braceDepth: 0,
+    blockStack: [],
+    imageState: "none",
+    linkState: "none",
+    lastPropKey: "",
+    inHtmlBlock: false,
+    htmlTagName: "",
+    isClosingHtmlTag: false,
+    embeddedLang: "none"
+  }),
+  token(stream, state) {
+    if (stream.sol()) {
+      state.inDirectiveHeader = false;
+      state.imageState = "none";
+      state.linkState = "none";
+      if (state.inCodeBlock && stream.match(/^\s*```/)) {
+        state.inCodeBlock = false;
+        return "comment";
+      }
+    }
+    if (state.inHtmlBlock) {
+      stream.eatSpace();
+      if (stream.match(/^\/>/)) {
+        state.inHtmlBlock = false;
+        state.htmlTagName = "";
+        state.isClosingHtmlTag = false;
+        return "typeName";
+      }
+      if (stream.match(/^>/)) {
+        state.inHtmlBlock = false;
+        if (!state.isClosingHtmlTag && (state.htmlTagName === "script" || state.htmlTagName === "style")) {
+          state.embeddedLang = state.htmlTagName;
+        }
+        state.htmlTagName = "";
+        state.isClosingHtmlTag = false;
+        return "typeName";
+      }
+      if (stream.match(/^[a-zA-Z_:][\w-.:]*/)) return "attributeName";
+      if (stream.match(/^=/)) return "keyword";
+      if (stream.match(/^"[^"]*"/)) return "string";
+      if (stream.match(/^"[^"]*$/)) return "string";
+      if (stream.match(/^'[^']*'/)) return "string";
+      if (stream.match(/^'[^']*$/)) return "string";
+      if (stream.match(/^[^\s>]+/)) return "string";
+      if (stream.eatSpace()) return null;
+      stream.next();
+      return null;
+    }
+    if (state.embeddedLang !== "none") {
+      if (stream.match(/^<\/(script|style)\b/i)) {
+        const closeTag = stream.current().replace(/^<\//, "").toLowerCase();
+        state.embeddedLang = "none";
+        state.inHtmlBlock = true;
+        state.htmlTagName = closeTag;
+        state.isClosingHtmlTag = true;
+        return "typeName";
+      }
+      if (state.embeddedLang === "script") {
+        if (stream.match(/^\/\//)) {
+          stream.skipToEnd();
+          return "comment";
+        }
+        if (stream.match(/^\/\*/)) {
+          while (!stream.eol()) {
+            if (stream.match(/\*\//)) return "comment";
+            stream.next();
+          }
+          return "comment";
+        }
+        if (stream.match(/^["']/)) {
+          const q = stream.current();
+          while (!stream.eol()) {
+            const ch = stream.next();
+            if (ch === q && stream.string[stream.pos - 2] !== "\\") break;
+          }
+          return "string";
+        }
+        if (stream.match(/^`/)) {
+          while (!stream.eol()) {
+            if (stream.next() === "`") break;
+          }
+          return "string";
+        }
+        if (stream.match(/\b(const|let|var|function|return|if|else|for|while|do|switch|case|break|continue|new|this|class|extends|import|export|default|from|try|catch|finally|throw|async|await|typeof|instanceof|in|of|void|null|undefined|true|false)\b/)) return "keyword";
+        if (stream.match(/^\d+(\.\d+)?/)) return "number";
+        if (stream.match(/^[a-zA-Z_$][\w$]*(?=\s*\()/)) return "function";
+        if (stream.match(/^[a-zA-Z_$][\w$]*/)) return "variableName";
+        if (stream.match(/^[+\-*\/%=!<>&|^~?:]+/)) return "keyword";
+        stream.next();
+        return null;
+      }
+      if (state.embeddedLang === "style") {
+        if (stream.match(/^\/\*/)) {
+          while (!stream.eol()) {
+            if (stream.match(/\*\//)) return "comment";
+            stream.next();
+          }
+          return "comment";
+        }
+        if (stream.match(/^["']/)) {
+          const q = stream.current();
+          while (!stream.eol()) {
+            const ch = stream.next();
+            if (ch === q && stream.string[stream.pos - 2] !== "\\") break;
+          }
+          return "string";
+        }
+        if (stream.match(/^@[a-zA-Z-]+/)) return "keyword";
+        if (stream.match(/^#[0-9a-fA-F]{3,8}\b/)) return "string";
+        if (stream.match(/^\d+(\.\d+)?(px|em|rem|%|vh|vw|vmin|vmax|s|ms|deg|fr)?\b/)) return "number";
+        if (stream.match(/^[a-zA-Z-]+(?=\s*:)/)) return "propertyName";
+        if (stream.match(/^[.#][a-zA-Z][\w-]*/)) return "className";
+        if (stream.match(/\b(none|auto|inherit|initial|unset|normal|bold|italic|center|left|right|flex|grid|block|inline|relative|absolute|fixed|sticky|hidden|visible|scroll|cover|contain)\b/)) return "keyword";
+        if (stream.match(/^[a-zA-Z][\w-]*/)) return "typeName";
+        if (stream.match(/^[{}();:,]/)) return "keyword";
+        stream.next();
+        return null;
+      }
+    }
+    if (state.inCodeBlock) {
+      stream.skipToEnd();
+      return "comment";
+    }
+    if (state.inPropsBlock) {
+      stream.eatSpace();
+      if (stream.peek() === "}") {
+        stream.next();
+        state.inPropsBlock = false;
+        state.inDirectiveHeader = false;
+        state.lastPropKey = "";
+        return "keyword";
+      }
+      if (stream.match(/^\.[a-zA-Z0-9_-]+/)) return "className";
+      if (stream.match(/^#[a-zA-Z0-9_-]+/)) return "propertyName";
+      const urlKeys = /^(url|href|image|src|icon)$/i;
+      if (stream.match(/^[a-zA-Z][\w-]*(?==)/)) {
+        state.lastPropKey = stream.current();
+        return "propertyName";
+      }
+      if (stream.match(/^=/)) return "keyword";
+      if (stream.match(/^"[^"]*"|^'[^']*'/)) {
+        return urlKeys.test(state.lastPropKey) ? "url" : "string";
+      }
+      stream.next();
+      return null;
+    }
+    if (stream.sol()) {
+      let match;
+      if (match = stream.match(/^\s*(:::)\s*/)) {
+        const rest = stream.string.slice(stream.pos).trim();
+        if (rest === "") {
+          state.blockStack.pop();
+        } else {
+          const typeMatch = rest.match(/^([\w-]+)/);
+          state.blockStack.push(typeMatch ? typeMatch[1].toLowerCase() : "generic");
+        }
+        state.inDirectiveHeader = true;
+        return "keyword";
+      }
+      if (stream.match(/^\s*#[a-zA-Z][\w-]*\s*$/) && !stream.match(/^\s*#{1,6}\s/)) {
+        return "propertyName";
+      }
+      if (stream.match(/^\s*(#{1,6})\s+/)) return "heading";
+      if (stream.match(/^\s*```/)) {
+        state.inCodeBlock = true;
+        stream.skipToEnd();
+        return "comment";
+      }
+      if (stream.match(/^\s*([-*+]|\d+\.)\s+/)) return "variableName";
+      if (stream.match(/^\s*(---|___|(\*\s*){3,})\s*$/)) return "meta";
+      if (stream.match(/^\s*\[TOC\d?\]/)) return "keyword";
+    }
+    if (state.inDirectiveHeader) {
+      stream.eatSpace();
+      if (stream.match(/^[\w-]+/)) return "typeName";
+      if (stream.peek() === "{") {
+        stream.next();
+        state.inPropsBlock = true;
+        state.inDirectiveHeader = true;
+        return "keyword";
+      }
+      state.inDirectiveHeader = false;
+    }
+    const currentBlockType = state.blockStack[state.blockStack.length - 1];
+    if (currentBlockType === "raw" && !state.inDirectiveHeader) {
+      if (stream.eatSpace()) return null;
+      if (stream.match(/^<\/?[a-zA-Z0-9-]+/)) return "typeName";
+      if (stream.match(/^>/)) return "typeName";
+      if (stream.match(/^[{}]/)) return "keyword";
+      if (stream.match(/^--[a-zA-Z0-9_-]+/)) return "variableName";
+      if (stream.match(/^[a-zA-Z-]+(?=\s*:)/)) return "propertyName";
+      if (stream.match(/^var\([^)]+\)/)) return "variableName";
+      if (stream.match(/^['"`][^'"`]*['"`]/)) return "string";
+      if (stream.match(/^[#.][a-zA-Z0-9_-]+/)) return "className";
+      if (stream.match(/^:[a-zA-Z0-9_-]+/)) return "keyword";
+      if (stream.match(/\b(const|let|var|function|return|if|else|for|while)\b/)) return "keyword";
+      stream.next();
+      return null;
+    }
+    if (state.imageState === "expectUrl") {
+      state.imageState = "expectOptions";
+      if (stream.eat("(")) {
+        let parenLevel = 1;
+        while (!stream.eol() && parenLevel > 0) {
+          const next = stream.next();
+          if (next === "(") parenLevel++;
+          else if (next === ")" && stream.string[stream.pos - 2] !== "\\") parenLevel--;
+        }
+        return "url";
+      } else {
+        state.imageState = "none";
+      }
+    }
+    if (state.imageState === "expectOptions") {
+      state.imageState = "none";
+      if (stream.eat("{")) {
+        stream.eatWhile(/[^}]/);
+        stream.eat("}");
+        return "attributeName";
+      }
+    }
+    if (state.linkState === "expectUrl") {
+      state.linkState = "none";
+      if (stream.eat("(")) {
+        let parenLevel = 1;
+        while (!stream.eol() && parenLevel > 0) {
+          const next = stream.next();
+          if (next === "(") parenLevel++;
+          else if (next === ")" && stream.string[stream.pos - 2] !== "\\") parenLevel--;
+        }
+        return "url";
+      }
+    }
+    if (stream.match(/^<\/?[a-zA-Z][\w-]*(?=[>\s/]|$)/)) {
+      const raw = stream.current();
+      state.htmlTagName = raw.replace(/^<\/?/, "").toLowerCase();
+      state.isClosingHtmlTag = raw.startsWith("</");
+      state.inHtmlBlock = true;
+      return "typeName";
+    }
+    if (stream.match(/\*\*\*.+?\*\*\*/)) return "strongEmphasis";
+    if (stream.match(/\*\*.+?\*\*/)) return "strong";
+    if (stream.match(/!\[[^\]]*?\]/)) {
+      if (stream.peek() === "(") state.imageState = "expectUrl";
+      return "string";
+    }
+    if (stream.match(/\[[^\]]+?\]/)) {
+      if (stream.peek() === "(") state.linkState = "expectUrl";
+      return "string";
+    }
+    if (stream.match(/\|\[[^\]]+?\]\|/)) return "keyword";
+    if (stream.match(/`[^`]+`/)) return "comment";
+    if (stream.match(/_(.+?)_/)) return "emphasis";
+    if (stream.match(/~~(.+?)~~/)) return "strikethrough";
+    if (stream.match(/!~(.+?)~!/)) return "underline";
+    if (stream.match(/==(.+?)==/)) return "highlight";
+    if (stream.match(/!>.+?<!/)) return "comment";
+    if (stream.match(/%[^%\s]+?%[^%]+?%%/)) return "string";
+    if (stream.match(/->|<-|\|/)) return "meta";
+    stream.next();
+    return null;
+  },
+  tokenTable: {
+    heading: t.heading,
+    keyword: t.keyword,
+    typeName: t.typeName,
+    string: t.string,
+    attributeName: t.attributeName,
+    propertyName: t.propertyName,
+    className: t.className,
+    comment: t.comment,
+    variableName: t.variableName,
+    meta: t.meta,
+    strong: t.strong,
+    emphasis: t.emphasis,
+    strongEmphasis: [t.strong, t.emphasis],
+    strikethrough: t.strikethrough,
+    underline: t.special(t.emphasis),
+    highlight: t.special(t.comment),
+    url: t.url,
+    link: t.string,
+    number: t.number,
+    function: t.function(t.variableName)
+  }
+});
+
+// NReditor.tsx
+import { RangeSetBuilder } from "@codemirror/state";
+import { syntaxHighlighting, HighlightStyle, foldService, foldGutter, foldAll, unfoldAll } from "@codemirror/language";
+import { tags as t2 } from "@lezer/highlight";
+
+// useDebounce.ts
+import { useState, useEffect } from "react";
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// CustomMarkdownRenderer.tsx
+import React8, { useState as useState4, useEffect as useEffect5, useCallback as useCallback2, useMemo, useId as useId3, useRef as useRef5 } from "react";
+
+// utils.ts
+function parseCssString(cssText) {
+  if (!cssText) return {};
+  return cssText.split(";").filter(Boolean).reduce((styleObj, styleString) => {
+    const parts = styleString.split(":");
+    if (parts.length < 2) return styleObj;
+    const key = parts[0].trim().replace(/-([a-z])/g, (_, g) => g.toUpperCase());
+    const value = parts.slice(1).join(":").trim();
+    styleObj[key] = value;
+    return styleObj;
+  }, {});
+}
+function generateId(text) {
+  return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-");
+}
+function scrollToId(id) {
+  const element = document.getElementById(id);
+  if (element) {
+    element.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+}
+function extractAttributes(text) {
+  const match = text.match(/^(.*?)\s*##\{([^}]*)\}\s*$/);
+  if (!match) return { text, classes: "", id: "" };
+  const rawAttrs = match[2];
+  const cleanedText = match[1];
+  const classList = [];
+  let id = "";
+  for (const [, key, value] of rawAttrs.matchAll(/([\w-]+)="([^"]*)"/g)) {
+    if (key === "class") {
+      classList.push(...value.split(/\s+/).filter(Boolean));
+    } else if (key === "id") {
+      id = value;
+    }
+  }
+  const stripped = rawAttrs.replace(/[\w-]+="[^"]*"/g, "");
+  for (const token of stripped.split(/\s+/).filter(Boolean)) {
+    if (token.startsWith(".")) classList.push(token.slice(1));
+    else if (token.startsWith("#") && !id) id = token.slice(1);
+  }
+  return { text: cleanedText, classes: classList.join(" "), id };
+}
+var _scopeCounter = 0;
+function resetScopeCounter() {
+  _scopeCounter = 0;
+}
+function generateScopeId() {
+  return `scope-${++_scopeCounter}`;
+}
+function parseProps(propsString) {
+  const props = {};
+  if (!propsString?.trim()) return props;
+  const pairRegex = /(\w[\w-]*)=(?:"([^"]*)"|'([^']*)')/g;
+  let match;
+  while ((match = pairRegex.exec(propsString)) !== null) {
+    const key = match[1];
+    const value = match[2] ?? match[3] ?? "";
+    props[key] = value;
+  }
+  const classMatches = propsString.match(/\.([a-zA-Z0-9_!/.\-]+)/g);
+  if (classMatches) {
+    const existing = props["class"] || "";
+    const newClasses = classMatches.map((c) => c.substring(1)).join(" ");
+    props["class"] = existing ? `${existing} ${newClasses}` : newClasses;
+  }
+  const idMatch = propsString.match(/#([a-zA-Z0-9_-]+)(?=\s|}|$)/);
+  if (idMatch && !props["id"]) {
+    props["id"] = idMatch[1];
+  }
+  return props;
+}
+function parseHtmlAttrs(attrsString) {
+  const props = {};
+  if (!attrsString?.trim()) return props;
+  const pairRegex = /([a-zA-Z0-9_-]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;
+  let match;
+  while ((match = pairRegex.exec(attrsString)) !== null) {
+    let key = match[1];
+    const value = match[2] ?? match[3] ?? match[4] ?? true;
+    if (key === "class") key = "className";
+    else if (key === "for") key = "htmlFor";
+    else if (key === "tabindex") key = "tabIndex";
+    if (key === "style" && typeof value === "string") {
+      props[key] = parseCssString(value);
+    } else {
+      props[key] = value;
+    }
+  }
+  return props;
+}
+
+// parser.ts
+function parseMarkdown(markdown2) {
+  if (!markdown2) return [];
+  const lines = markdown2.split("\n");
+  const result = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    const trimmed = line.trim();
+    let match;
+    if (match = trimmed.match(/^(#{1,6})\s+(.+)$/)) {
+      const level = match[1].length;
+      const rawText = match[2];
+      const { text: text2, classes: classes2, id: customId } = extractAttributes(rawText);
+      const id2 = customId || generateId(text2.replace(/->|<-/g, ""));
+      result.push({ type: "header", level, text: text2, id: id2, classes: classes2 || void 0 });
+      i++;
+      continue;
+    }
+    if (match = trimmed.match(/^->\s*(.+?)\s*(<-|->)\s*$/)) {
+      const content = match[1];
+      const align = match[2] === "<-" ? "center" : "right";
+      result.push({ type: "paragraph", content, align });
+      i++;
+      continue;
+    }
+    if (trimmed.startsWith("```")) {
+      const fenceHeader = trimmed.slice(3).trim();
+      const titleMatch = fenceHeader.match(/title=["']([^"']*)["']/);
+      const lang = fenceHeader.replace(/title=["'][^"']*["']/, "").trim();
+      const title = titleMatch ? titleMatch[1] : void 0;
+      const content = [];
+      i++;
+      while (i < lines.length && !lines[i].trim().startsWith("```")) {
+        content.push(lines[i]);
+        i++;
+      }
+      result.push({ type: "codeblock", language: lang, title, content: content.join("\n") });
+      i++;
+      continue;
+    }
+    if (trimmed.startsWith(":::")) {
+      const rest = trimmed.slice(3).trim();
+      if (rest === "") {
+        result.push({ type: "paragraph", content: line });
+        i++;
+        continue;
+      }
+      const typeMatch = rest.match(/^([\w-]+)/);
+      const directiveType = typeMatch ? typeMatch[1] : "custom";
+      let j = i + 1;
+      let nestedLevel = 0;
+      let foundClose = false;
+      while (j < lines.length) {
+        const currentTrimmed = lines[j].trim();
+        if (currentTrimmed === ":::") {
+          if (nestedLevel === 0) {
+            foundClose = true;
+            break;
+          } else {
+            nestedLevel--;
+          }
+        } else if (currentTrimmed.startsWith(":::")) {
+          nestedLevel++;
+        }
+        j++;
+      }
+      if (foundClose) {
+        const contentLines = [];
+        for (let k = i + 1; k < j; k++) {
+          contentLines.push(lines[k]);
+        }
+        const rawContent = contentLines.join("\n");
+        const headerRest = typeMatch ? rest.slice(directiveType.length).trim() : rest;
+        let propsString = "";
+        let shortForm = "";
+        const propsBlockMatch = headerRest.match(/^\{([^]*)\}\s*$/);
+        if (propsBlockMatch) {
+          propsString = propsBlockMatch[1];
+        } else if (headerRest) {
+          shortForm = headerRest;
+        }
+        const props = parseProps(propsString);
+        if (shortForm && !props["title"]) {
+          props["title"] = shortForm;
+        }
+        const slots = splitSlots(rawContent);
+        result.push({
+          type: "directive",
+          directiveType,
+          props,
+          slots,
+          scopeId: generateScopeId()
+        });
+        i = j + 1;
+        continue;
+      } else {
+        result.push({ type: "paragraph", content: line });
+        i++;
+        continue;
+      }
+    }
+    if (match = trimmed.match(/^(.*?)!\[([^\]]*)\]\(([^)]+?)\)(?:\{([^}]+?)\})?(.*)$/)) {
+      const [, preText, alt, srcAndFloat, size, postText] = match;
+      if (preText.trim()) {
+        result.push({ type: "paragraph", content: preText.trim() });
+      }
+      let src = srcAndFloat;
+      const style = {};
+      if (src.includes("#left")) {
+        src = src.replace("#left", "");
+        style.float = "left";
+        style.margin = "0 1em 1em 0";
+      } else if (src.includes("#right")) {
+        src = src.replace("#right", "");
+        style.float = "right";
+        style.margin = "0 0 1em 1em";
+      } else if (src.includes("#center")) {
+        src = src.replace("#center", "");
+        style.display = "block";
+        style.margin = "0 auto 1em auto";
+      }
+      if (size) {
+        const [width, height] = size.split(":");
+        if (width) style.width = width.trim();
+        if (height) style.height = height.trim();
+      }
+      result.push({ type: "image", alt, src, style });
+      if (postText.trim()) {
+        result.push({ type: "paragraph", content: postText.trim() });
+      }
+      i++;
+      continue;
+    }
+    if (trimmed.includes("|") && i + 1 < lines.length && lines[i + 1].includes("---")) {
+      const tableLines = [line];
+      i++;
+      tableLines.push(lines[i]);
+      i++;
+      while (i < lines.length && lines[i].trim().includes("|")) {
+        tableLines.push(lines[i]);
+        i++;
+      }
+      result.push({ type: "table", content: tableLines.join("\n") });
+      continue;
+    }
+    if (match = trimmed.match(/^(\s*)([-*+]|\d+\.)\s+(.+)$/)) {
+      const listItems = [line];
+      i++;
+      while (i < lines.length) {
+        const nextLine = lines[i];
+        const nextTrimmed = nextLine.trim();
+        if (nextTrimmed.match(/^(\s*)([-*+]|\d+\.)\s+(.+)$/) || nextTrimmed === "" || nextLine.startsWith("  ")) {
+          listItems.push(nextLine);
+          i++;
+        } else {
+          break;
+        }
+      }
+      result.push({ type: "list", content: listItems.join("\n") });
+      continue;
+    }
+    if (trimmed.startsWith(">")) {
+      const quoteLines = [line];
+      i++;
+      while (i < lines.length && (lines[i].trim().startsWith(">") || lines[i].trim() === "")) {
+        quoteLines.push(lines[i]);
+        i++;
+      }
+      const rawQuote = quoteLines.join("\n").replace(/^>\s?/gm, "");
+      const { text: text2, classes: classes2, id: id2 } = extractAttributes(rawQuote);
+      result.push({ type: "blockquote", content: text2, classes: classes2 || void 0, id: id2 });
+      continue;
+    }
+    if (/^(---|___|(\*\s*){3,})\s*$/.test(trimmed)) {
+      result.push({ type: "hr" });
+      i++;
+      continue;
+    }
+    if (/^\[TOC\d?\]\s*$/.test(trimmed)) {
+      result.push({ type: "toc" });
+      i++;
+      continue;
+    }
+    if (trimmed === "") {
+      i++;
+      continue;
+    }
+    let tagStartMatch = trimmed.match(/^<([a-zA-Z][\w-]*)/);
+    if (tagStartMatch) {
+      const tagName = tagStartMatch[1].toLowerCase();
+      const voidElements = /* @__PURE__ */ new Set([
+        "area",
+        "base",
+        "br",
+        "col",
+        "embed",
+        "hr",
+        "img",
+        "input",
+        "link",
+        "meta",
+        "param",
+        "source",
+        "track",
+        "wbr"
+      ]);
+      const remainingText = lines.slice(i).join("\n");
+      const openTagRegex = new RegExp(`^\\s*<${tagName}\\b([^>]*?)>`, "i");
+      const openTagMatch = remainingText.match(openTagRegex);
+      if (openTagMatch) {
+        const fullOpenTag = openTagMatch[0];
+        const attrs = openTagMatch[1].replace(/\s+/g, " ").trim();
+        const isSelfClosing = fullOpenTag.endsWith("/>") || voidElements.has(tagName);
+        if (isSelfClosing) {
+          const blockText = remainingText.substring(0, openTagMatch.index + fullOpenTag.length);
+          const consumedLines = blockText.split("\n").length;
+          result.push({
+            type: "html-block",
+            tag: tagName,
+            attrs,
+            children: []
+            // No children
+          });
+          i += consumedLines;
+          continue;
+        } else {
+          let nestedLevel = 0;
+          let closeIndex = -1;
+          let closeTagLength = 0;
+          const tagRegex = new RegExp(`</?${tagName}\\b[^>]*>`, "gi");
+          tagRegex.lastIndex = openTagMatch.index + fullOpenTag.length;
+          let execMatch;
+          while ((execMatch = tagRegex.exec(remainingText)) !== null) {
+            if (execMatch[0].startsWith("</")) {
+              nestedLevel--;
+              if (nestedLevel < 0) {
+                closeIndex = execMatch.index;
+                closeTagLength = execMatch[0].length;
+                break;
+              }
+            } else {
+              if (!execMatch[0].endsWith("/>")) {
+                nestedLevel++;
+              }
+            }
+          }
+          if (closeIndex !== -1) {
+            const fullBlock = remainingText.substring(0, closeIndex + closeTagLength);
+            const consumedLines = fullBlock.split("\n").length;
+            if (tagName === "style" || tagName === "script") {
+              result.push({
+                type: "html",
+                content: fullBlock,
+                scopeId: generateScopeId()
+              });
+            } else {
+              const innerContent = remainingText.substring(openTagMatch.index + fullOpenTag.length, closeIndex);
+              result.push({
+                type: "html-block",
+                tag: tagName,
+                attrs,
+                children: parseMarkdown(innerContent)
+              });
+            }
+            i += consumedLines;
+            continue;
+          } else {
+            const blockText = remainingText.substring(0, openTagMatch.index + fullOpenTag.length);
+            const consumedLines = blockText.split("\n").length;
+            result.push({
+              type: "html-block",
+              tag: tagName,
+              attrs,
+              children: []
+            });
+            i += consumedLines;
+            continue;
+          }
+        }
+      }
+    }
+    const paragraphLines = [line];
+    i++;
+    while (i < lines.length) {
+      const nextLine = lines[i];
+      const nextTrimmed = nextLine.trim();
+      if (nextTrimmed === "" || nextTrimmed.startsWith("#") || nextTrimmed.startsWith(":::") || nextTrimmed.includes("|") || nextTrimmed.match(/^(\s*)([-*+]|\d+\.)\s+/) || nextTrimmed.startsWith(">") || nextTrimmed.startsWith("```") || nextTrimmed.startsWith("->") || nextTrimmed.match(/^<([a-zA-Z][\w-]*)\b/)) {
+        break;
+      }
+      paragraphLines.push(nextLine);
+      i++;
+    }
+    const rawParagraph = paragraphLines.join("\n").trim();
+    const { text, classes, id } = extractAttributes(rawParagraph);
+    result.push({ type: "paragraph", content: text, classes: classes || void 0, id });
+  }
+  return result;
+}
+function splitSlots(rawContent) {
+  const slots = {};
+  const lines = rawContent.split("\n");
+  let currentSlot = "default";
+  let buffer = [];
+  let nestingDepth = 0;
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed.startsWith(":::")) {
+      const rest = trimmed.slice(3).trim();
+      if (rest === "") {
+        nestingDepth = Math.max(0, nestingDepth - 1);
+      } else {
+        nestingDepth++;
+      }
+    }
+    const slotMatch = trimmed.match(/^#([\w-]+)$/);
+    if (slotMatch && nestingDepth === 0) {
+      slots[currentSlot] = buffer.join("\n").trim();
+      buffer = [];
+      currentSlot = slotMatch[1];
+    } else {
+      buffer.push(line);
+    }
+  }
+  slots[currentSlot] = buffer.join("\n").trim();
+  for (const key of Object.keys(slots)) {
+    if (!slots[key]) delete slots[key];
+  }
+  return slots;
+}
+
+// ui-components.tsx
+import { useState as useState2, useRef } from "react";
+
+// highlightSetup.ts
+import hljs from "highlight.js/lib/core";
+import javascript from "highlight.js/lib/languages/javascript";
+import typescript from "highlight.js/lib/languages/typescript";
+import python from "highlight.js/lib/languages/python";
+import css from "highlight.js/lib/languages/css";
+import xml from "highlight.js/lib/languages/xml";
+import json from "highlight.js/lib/languages/json";
+import bash from "highlight.js/lib/languages/bash";
+import sql from "highlight.js/lib/languages/sql";
+import markdown from "highlight.js/lib/languages/markdown";
+import java from "highlight.js/lib/languages/java";
+import csharp from "highlight.js/lib/languages/csharp";
+import cpp from "highlight.js/lib/languages/cpp";
+import go from "highlight.js/lib/languages/go";
+import rust from "highlight.js/lib/languages/rust";
+import php from "highlight.js/lib/languages/php";
+import ruby from "highlight.js/lib/languages/ruby";
+import swift from "highlight.js/lib/languages/swift";
+import kotlin from "highlight.js/lib/languages/kotlin";
+import dart from "highlight.js/lib/languages/dart";
+import yaml from "highlight.js/lib/languages/yaml";
+import toml from "highlight.js/lib/languages/ini";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+import diff from "highlight.js/lib/languages/diff";
+import shell from "highlight.js/lib/languages/shell";
+hljs.registerLanguage("javascript", javascript);
+hljs.registerLanguage("js", javascript);
+hljs.registerLanguage("jsx", javascript);
+hljs.registerLanguage("typescript", typescript);
+hljs.registerLanguage("ts", typescript);
+hljs.registerLanguage("tsx", typescript);
+hljs.registerLanguage("python", python);
+hljs.registerLanguage("py", python);
+hljs.registerLanguage("css", css);
+hljs.registerLanguage("html", xml);
+hljs.registerLanguage("xml", xml);
+hljs.registerLanguage("svg", xml);
+hljs.registerLanguage("json", json);
+hljs.registerLanguage("bash", bash);
+hljs.registerLanguage("sh", bash);
+hljs.registerLanguage("zsh", bash);
+hljs.registerLanguage("sql", sql);
+hljs.registerLanguage("markdown", markdown);
+hljs.registerLanguage("md", markdown);
+hljs.registerLanguage("java", java);
+hljs.registerLanguage("csharp", csharp);
+hljs.registerLanguage("cs", csharp);
+hljs.registerLanguage("cpp", cpp);
+hljs.registerLanguage("c", cpp);
+hljs.registerLanguage("go", go);
+hljs.registerLanguage("rust", rust);
+hljs.registerLanguage("rs", rust);
+hljs.registerLanguage("php", php);
+hljs.registerLanguage("ruby", ruby);
+hljs.registerLanguage("rb", ruby);
+hljs.registerLanguage("swift", swift);
+hljs.registerLanguage("kotlin", kotlin);
+hljs.registerLanguage("kt", kotlin);
+hljs.registerLanguage("dart", dart);
+hljs.registerLanguage("yaml", yaml);
+hljs.registerLanguage("yml", yaml);
+hljs.registerLanguage("toml", toml);
+hljs.registerLanguage("ini", toml);
+hljs.registerLanguage("dockerfile", dockerfile);
+hljs.registerLanguage("docker", dockerfile);
+hljs.registerLanguage("diff", diff);
+hljs.registerLanguage("shell", shell);
+var highlightSetup_default = hljs;
+
+// ui-components.tsx
+import { Dialog } from "@base-ui/react/dialog";
+import { jsx, jsxs } from "react/jsx-runtime";
+var IconRenderer = ({ iconName, extraClasses = "" }) => {
+  if (!iconName) return null;
+  const baseClass = `material-symbols-rounded !text-[1em] leading-none align-top ${extraClasses}`;
+  const isCodepoint = /^[eE][0-9a-fA-F]{3,4}$/.test(iconName);
+  if (isCodepoint) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: baseClass,
+        dangerouslySetInnerHTML: { __html: `&#x${iconName};` },
+        "aria-hidden": "true"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { className: baseClass, "aria-hidden": "true", children: iconName });
+};
+var CodeBlock = ({ code, language, title }) => {
+  const [copied, setCopied] = useState2(false);
+  const timerRef = useRef(null);
+  const lang = language?.split(/[\s{]/)[0]?.trim() || "";
+  let html;
+  try {
+    if (lang && highlightSetup_default.getLanguage(lang)) {
+      html = highlightSetup_default.highlight(code, { language: lang }).value;
+    } else {
+      html = highlightSetup_default.highlightAuto(code).value;
+    }
+  } catch {
+    html = "";
+  }
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setCopied(false), 1800);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "not-prose my-4 rounded-2xl border border-border overflow-hidden bg-background-secondary-solid/5", children: [
+    title && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-2 border-b border-border bg-background-secondary-solid/10 text-xs sm:text-sm font-mono text-text-secondary", children: [
+      /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded text-base", children: "description" }),
+      title
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-auto [&_pre]:m-0 [&_pre]:p-4 [&_pre]:text-xs sm:[&_pre]:text-sm", children: /* @__PURE__ */ jsx("pre", { className: "m-0", children: /* @__PURE__ */ jsx("code", { className: `language-${lang || "plaintext"}`, dangerouslySetInnerHTML: { __html: html } }) }) }),
+    /* @__PURE__ */ jsx("button", { className: "absolute top-2 right-2 p-1.5 rounded-lg bg-background-secondary-solid/20 hover:bg-background-secondary-solid/40 transition-colors cursor-pointer border-none text-text-secondary hover:text-text-primary", onClick: handleCopy, title: "Copy code", children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", style: { fontSize: "1rem" }, children: copied ? "check" : "content_copy" }) })
+  ] });
+};
+var defaultIcons = {
+  note: "info",
+  info: "lightbulb",
+  warning: "warning",
+  danger: "report",
+  greentext: "subdirectory_play_arrow"
+};
+var typeClasses = {
+  note: "border-info/20 bg-info/5 text-info",
+  info: "border-info/30 bg-info/10 text-info",
+  warning: "border-amber-500/30 bg-amber-500/10 text-amber-500",
+  danger: "border-danger/30 bg-danger/10 text-danger",
+  greentext: "border-success/30 bg-success/10 text-success"
+};
+var Admonition = ({ type, title, icon, className = "", style, children }) => {
+  const iconToRender = icon || defaultIcons[type] || "info";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `not-prose rounded-2xl mb-6 border shadow-xs p-4 ${typeClasses[type] || typeClasses.note} ${className}`,
+      style,
+      children: [
+        title && /* @__PURE__ */ jsxs("h5", { className: "font-bold text-base mb-2 m-0 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(IconRenderer, { iconName: iconToRender, extraClasses: "shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: title })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed opacity-90", children })
+      ]
+    }
+  );
+};
+var Details = ({
+  title,
+  icon,
+  defaultOpen = false,
+  className = "",
+  style,
+  children
+}) => {
+  const [isOpen, setIsOpen] = useState2(defaultOpen);
+  const iconToRender = icon || "play_arrow";
+  return /* @__PURE__ */ jsxs(
+    "details",
+    {
+      className: `not-prose rounded-2xl border border-border mb-4 bg-background-primary/5 ${className}`,
+      open: isOpen,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "summary",
+          {
+            className: "cursor-pointer p-4 font-bold flex items-center gap-2 list-none [&::-webkit-details-marker]:hidden hover:text-accent-primary transition-colors",
+            onClick: (e) => {
+              e.preventDefault();
+              setIsOpen((prev) => !prev);
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                IconRenderer,
+                {
+                  iconName: iconToRender,
+                  extraClasses: `transition-transform ${isOpen ? "rotate-90" : ""}`
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: title })
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 border-t border-border pt-3 text-sm leading-relaxed opacity-90 overflow-hidden min-w-0", children })
+      ]
+    }
+  );
+};
+var Modal = ({ title, isOpen, onClose, children }) => {
+  return /* @__PURE__ */ jsx(Dialog.Root, { open: isOpen, onOpenChange: (open) => {
+    if (!open) onClose();
+  }, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "fixed inset-0 z-[9999] bg-black/60" }),
+    /* @__PURE__ */ jsx(Dialog.Viewport, { className: "fixed inset-0 z-[9999] flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs(Dialog.Popup, { className: "bg-background-primary border border-border shadow-2xl rounded-3xl w-full max-w-3xl max-h-[85vh] flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-4 border-b border-border bg-background-secondary-solid/20", children: [
+        /* @__PURE__ */ jsx(Dialog.Title, { className: "text-lg font-bold !m-0", children: title }),
+        /* @__PURE__ */ jsx(Dialog.Close, { className: "w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center transition-colors cursor-pointer border-none bg-transparent", children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded text-base", children: "close" }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "p-6 overflow-auto min-h-0 text-text-primary [&_h1:first-child]:mt-0 [&_h2:first-child]:mt-0 [&_h3:first-child]:mt-0 [&_h4:first-child]:mt-0 [&_h5:first-child]:mt-0 [&_h6:first-child]:mt-0", children })
+    ] }) })
+  ] }) });
+};
+
+// renderers.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function renderInline(text) {
+  if (!text) return text;
+  const parsePart = (part, key) => {
+    let match2;
+    if (match2 = part.match(/^\|\[([^\]]+)\]\|$/)) {
+      return /* @__PURE__ */ jsx2(IconRenderer, { iconName: match2[1] }, key);
+    }
+    if (match2 = part.match(/^!~(.+?)~!$/)) {
+      const content = match2[1];
+      const parts = content.split(";");
+      let color = "currentColor";
+      let decorationStyle = "solid";
+      let type = "underline";
+      let textIndex = 0;
+      if (parts[textIndex]?.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/) || ["red", "blue", "green", "purple", "orange", "yellow", "pink"].includes(parts[textIndex])) {
+        color = parts[textIndex++];
+      }
+      if (["solid", "double", "dotted", "dashed", "wavy"].includes(parts[textIndex])) {
+        decorationStyle = parts[textIndex++];
+      }
+      if (["underline", "line-through", "overline", "both"].includes(parts[textIndex])) {
+        type = parts[textIndex] === "both" ? "underline line-through" : parts[textIndex++];
+      }
+      const innerText = parts.slice(textIndex).join(";");
+      return /* @__PURE__ */ jsx2(
+        "span",
+        {
+          style: {
+            textDecoration: `${type} ${decorationStyle} ${color}`,
+            textDecorationThickness: "auto"
+          },
+          children: renderInline(innerText)
+        },
+        key
+      );
+    }
+    if (match2 = part.match(/%([^%\s]+?)%([\s\S]+?)%%/)) {
+      return /* @__PURE__ */ jsx2("span", { style: { color: match2[1] }, children: renderInline(match2[2]) }, key);
+    }
+    if (match2 = part.match(/^!>([^<]+?)<!$/)) {
+      return /* @__PURE__ */ jsx2("span", { className: "bg-text-primary text-bg-primary px-1 rounded hover:bg-transparent transition-colors cursor-pointer", children: renderInline(match2[1]) }, key);
+    }
+    if (match2 = part.match(/^==(.+?)==$/)) {
+      return /* @__PURE__ */ jsx2("mark", { className: "bg-yellow-500/20 text-inherit px-0.5 rounded", children: renderInline(match2[1]) }, key);
+    }
+    if (match2 = part.match(/^\*\*\*(.+?)\*\*\*$/)) {
+      return /* @__PURE__ */ jsx2("strong", { children: /* @__PURE__ */ jsx2("em", { children: renderInline(match2[1]) }) }, key);
+    }
+    if (match2 = part.match(/^\*\*(.+?)\*\*$/)) {
+      return /* @__PURE__ */ jsx2("strong", { children: renderInline(match2[1]) }, key);
+    }
+    if (match2 = part.match(/^_(.+?)_$/)) {
+      return /* @__PURE__ */ jsx2("em", { children: renderInline(match2[1]) }, key);
+    }
+    if (match2 = part.match(/^~~(.+?)~~$/)) {
+      return /* @__PURE__ */ jsx2("del", { children: renderInline(match2[1]) }, key);
+    }
+    if (match2 = part.match(/^`([^`]+)`$/)) {
+      return /* @__PURE__ */ jsx2("code", { className: "text-[0.875em] font-mono bg-background-secondary/50 px-1.5 py-0.5 rounded text-text-primary", children: match2[1] }, key);
+    }
+    if (match2 = part.match(/^\[([^\]]+?)\]\(([^)]+?)\)$/)) {
+      return /* @__PURE__ */ jsx2(
+        "a",
+        {
+          href: match2[2],
+          className: "text-accent-primary underline decoration-accent-primary/40 hover:decoration-accent-primary transition-colors",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: renderInline(match2[1])
+        },
+        key
+      );
+    }
+    if (part.startsWith("<") && part.endsWith(">")) {
+      return /* @__PURE__ */ jsx2("span", { dangerouslySetInnerHTML: { __html: part } }, key);
+    }
+    return part;
+  };
+  const regex = /(\|\[[^\]]+\]\||\*\*\*.+?\*\*\*|\*\*.+?\*\*|_.+?_|~~.+?~~|`[^`]+?`|!~.+?~!|%[^%\s]+?%[\s\S]+?%%|!>.+?<!|==.+?==|\[[^\]]+?\]\([^)]+?\)|<[^>]+>)/g;
+  const elements = [];
+  let lastIndex = 0;
+  let match;
+  let keyCounter = 0;
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      elements.push(text.slice(lastIndex, match.index));
+    }
+    elements.push(parsePart(match[0], `inline-${keyCounter++}`));
+    lastIndex = regex.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    elements.push(text.slice(lastIndex));
+  }
+  return elements;
+}
+function renderTable(content) {
+  const rows = content.split("\n").filter((r) => r.trim());
+  if (rows.length < 2) return /* @__PURE__ */ jsx2("p", { children: content });
+  const parseRow = (row) => row.split("|").map((c) => c.trim()).filter(Boolean);
+  const headerCells = parseRow(rows[0]);
+  const bodyRows = rows.slice(2).map(parseRow);
+  return /* @__PURE__ */ jsx2("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs2("table", { className: "w-full text-sm sm:text-base border-collapse my-4", children: [
+    /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: headerCells.map((cell, ci) => /* @__PURE__ */ jsx2("th", { className: "border border-border px-3 py-2 bg-background-secondary-solid/10 text-left font-bold", children: renderInline(cell) }, ci)) }) }),
+    /* @__PURE__ */ jsx2("tbody", { children: bodyRows.map((cells, ri) => /* @__PURE__ */ jsx2("tr", { children: cells.map((cell, ci) => /* @__PURE__ */ jsx2("td", { className: "border border-border px-3 py-2", children: renderInline(cell) }, ci)) }, ri)) })
+  ] }) });
+}
+function renderList(content) {
+  const lines = content.split("\n");
+  const items = [];
+  for (const line of lines) {
+    if (!line.trim()) continue;
+    const match = line.match(/^(\s*)([-*+]|\d+\.)\s+(.+)$/);
+    if (match) {
+      items.push({
+        indent: match[1].length,
+        marker: match[2],
+        text: match[3]
+      });
+    }
+  }
+  if (items.length === 0) return /* @__PURE__ */ jsx2("p", { children: content });
+  const isOrdered = /^\d+\.$/.test(items[0].marker);
+  const Tag = isOrdered ? "ol" : "ul";
+  return /* @__PURE__ */ jsx2(Tag, { className: `${isOrdered ? "list-decimal" : "list-disc"} pl-6 my-3 space-y-1 text-sm sm:text-base`, children: items.map((item, index) => /* @__PURE__ */ jsx2("li", { className: "leading-relaxed", children: renderInline(item.text) }, index)) });
+}
+function extractHeaders(elements) {
+  return elements.filter((el) => el.type === "header");
+}
+
+// directives/AdmonitionDirective.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var AdmonitionDirective = ({
+  directiveType,
+  props,
+  renderSlot
+}) => {
+  return /* @__PURE__ */ jsx3(
+    Admonition,
+    {
+      type: directiveType,
+      title: props.title,
+      icon: props.icon,
+      className: props.class,
+      style: props.style ? parseCssString(props.style) : void 0,
+      children: renderSlot("default")
+    }
+  );
+};
+var AdmonitionDirective_default = AdmonitionDirective;
+
+// directives/CardDirective.tsx
+import React2, { useId } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var CardDirective = ({
+  directiveType,
+  props,
+  slots,
+  renderSlot,
+  context,
+  options = {}
+}) => {
+  const stableId = useId();
+  const { title, image, icon, class: customClass, url, target } = props;
+  const hasDescription = !!slots.description;
+  const { isSingleCard } = options;
+  const isModal = directiveType === "card-m";
+  const isLink = directiveType === "card-b";
+  const modalId = `modal-card-${props.id || stableId}`;
+  const wrapperClass = customClass || "";
+  const inlineStyles = props.style ? parseCssString(props.style) : {};
+  const description = hasDescription ? renderSlot("description") : null;
+  const content = renderSlot("content") || renderSlot("default");
+  return /* @__PURE__ */ jsxs3(React2.Fragment, { children: [
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: `flex flex-col h-full rounded-3xl transition-all relative overflow-hidden group border min-w-[18rem] w-[18rem] max-w-[20rem] ${isModal || isLink ? "cursor-pointer !border-accent-primary/10 hover:border-accent-primary/50" : "border-border"} ${wrapperClass}`,
+        style: inlineStyles,
+        onClick: isModal ? (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          context.setModals((prev) => ({ ...prev, [modalId]: true }));
+        } : isLink && url ? () => window.open(url, "_blank") : void 0,
+        role: isModal ? "button" : void 0,
+        tabIndex: isModal ? 0 : void 0,
+        onKeyDown: isModal ? (e) => {
+          if (e.key === "Enter" || e.key === " ") context.setModals((prev) => ({ ...prev, [modalId]: true }));
+        } : void 0,
+        children: [
+          image && /* @__PURE__ */ jsxs3("div", { className: `w-full ${isSingleCard ? "h-[240px]" : "h-[160px]"} overflow-hidden relative transition-all duration-500`, children: [
+            /* @__PURE__ */ jsx4("img", { src: image, alt: title || "", className: "w-full h-full object-cover !m-0" }),
+            /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 bg-gradient-to-t from-background-primary/40 to-transparent" })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: `flex flex-col flex-1 bg-background-primary/80 rounded-t-xl p-6 relative ${image ? "-mt-10" : ""} border-t border-white/5 shadow-2xl`, children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 mb-3", children: [
+              icon && /* @__PURE__ */ jsx4("div", { className: "w-10 h-10 text-[1.6em] rounded-xl bg-accent-primary/20 flex items-center justify-center shrink-0 text-accent-primary", children: /* @__PURE__ */ jsx4(IconRenderer, { iconName: icon }) }),
+              /* @__PURE__ */ jsx4("h3", { className: "text-base font-black tracking-tight leading-tight !m-0", children: title })
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex-1 flex flex-col gap-2", children: [
+              description && /* @__PURE__ */ jsx4("div", { className: "text-sm opacity-80 leading-relaxed font-medium", children: description }),
+              directiveType === "card" && content && /* @__PURE__ */ jsx4("div", { className: "mt-2", children: content })
+            ] }),
+            (isModal || isLink) && /* @__PURE__ */ jsx4("div", { className: "mt-6 flex justify-end", children: isLink && url ? /* @__PURE__ */ jsxs3(
+              "a",
+              {
+                href: url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "bg-accent-primary/20 hover:bg-accent-primary/30 px-4 py-2 rounded-xl flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest opacity-50 group-hover:opacity-100 group-hover:text-accent-primary transition-all no-underline",
+                onClick: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsx4(IconRenderer, { iconName: "open_in_new" }),
+                  " Link"
+                ]
+              }
+            ) : isModal ? /* @__PURE__ */ jsxs3("div", { className: "bg-accent-primary/20 hover:bg-accent-primary/30 px-4 py-2 cursor-pointer rounded-xl flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest opacity-50 group-hover:opacity-100 group-hover:text-accent-primary transition-all", children: [
+              /* @__PURE__ */ jsx4(IconRenderer, { iconName: "arrow_forward" }),
+              " Abrir"
+            ] }) : null })
+          ] })
+        ]
+      }
+    ),
+    isModal && /* @__PURE__ */ jsx4(
+      Modal,
+      {
+        title: title || "Detalles",
+        isOpen: !!context.modals[modalId],
+        onClose: () => context.setModals((prev) => ({ ...prev, [modalId]: false })),
+        children: /* @__PURE__ */ jsx4("div", { className: "prose prose-sm max-w-none", children: content })
+      }
+    )
+  ] });
+};
+var CardDirective_default = CardDirective;
+
+// directives/DetailsDirective.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DetailsDirective = ({
+  props,
+  renderSlot
+}) => {
+  return /* @__PURE__ */ jsx5(
+    Details,
+    {
+      title: props.title || "Details",
+      icon: props.icon,
+      defaultOpen: props.defaultOpen === "true",
+      className: props.class,
+      style: props.style ? parseCssString(props.style) : void 0,
+      children: renderSlot("default")
+    }
+  );
+};
+var DetailsDirective_default = DetailsDirective;
+
+// directives/ModalDirective.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var ModalDirective = ({
+  props,
+  renderSlot,
+  context
+}) => {
+  const stableId = useId2();
+  const modalId = `modal-${props.id || stableId}`;
+  const label = props.label || props.title || "Open";
+  const modalTitle = props.title || "Modal";
+  const customClass = props.class || "";
+  const hasSizeClass = /\btext-(xs|sm|base|lg|xl|[2-9]xl)\b/.test(customClass);
+  const sizeClass = hasSizeClass ? "" : "text-sm";
+  const hasDisplayClass = /\b(flex|inline-flex|block|inline-block|grid|inline-grid|hidden)\b/.test(customClass);
+  const displayClass = hasDisplayClass ? "" : "inline-flex";
+  const isInlineFlex = /\binline-flex\b/.test(customClass);
+  const marginClass = isInlineFlex ? "my-1 mx-1" : "my-4";
+  const btnBase = `${displayClass} items-center w-fit ${marginClass} ${sizeClass} px-4 py-2 rounded-xl font-bold no-underline gap-2 transition-all hover:scale-105 active:scale-95 border border-border bg-background-primary/5 hover:bg-background-primary/10 text-text-primary hover:text-text-primary`.replace(/\s+/g, " ");
+  const btnClass = `${btnBase} ${customClass}`.trim();
+  const positionMap = {
+    "#left": "text-left",
+    "#center": "text-center",
+    "#right": "text-right"
+  };
+  const wrapperClass = customClass.split(/\s+/).map((c) => positionMap[c] || c).join(" ");
+  const handleOpen = () => {
+    context.setModals((prev) => ({ ...prev, [modalId]: true }));
+  };
+  const handleClose = () => {
+    context.setModals((prev) => ({ ...prev, [modalId]: false }));
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: `not-prose ${wrapperClass}`.trim(), children: [
+    /* @__PURE__ */ jsxs4("button", { className: btnClass, onClick: handleOpen, children: [
+      props.icon && /* @__PURE__ */ jsx6(IconRenderer, { iconName: props.icon }),
+      label
+    ] }),
+    /* @__PURE__ */ jsx6(
+      Modal,
+      {
+        title: modalTitle,
+        isOpen: !!context.modals[modalId],
+        onClose: handleClose,
+        children: renderSlot("default")
+      }
+    )
+  ] });
+};
+var ModalDirective_default = ModalDirective;
+
+// directives/ButtonDirective.tsx
+import React4 from "react";
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var ButtonDirective = ({
+  props,
+  renderSlot
+}) => {
+  const url = props.url || props.href || "#";
+  const label = props.label;
+  const icon = props.icon || "near_me";
+  const target = props.target || "_blank";
+  const customClass = props.class || "";
+  const hasSizeClass = /\btext-(xs|sm|base|lg|xl|[2-9]xl)\b/.test(customClass);
+  const sizeClass = hasSizeClass ? "" : "text-sm";
+  const hasDisplayClass = /\b(flex|inline-flex|block|inline-block|grid|inline-grid|hidden)\b/.test(customClass);
+  const displayClass = hasDisplayClass ? "" : "inline-flex";
+  const isInline = !customClass || !/\b(flex|block|grid)\b/.test(customClass) || /\binline-flex\b/.test(customClass);
+  const marginClass = isInline ? "my-1 mx-1" : "my-4";
+  const btnBase = `${displayClass} items-center w-fit ${marginClass} ${sizeClass} px-4 py-2 rounded-xl font-bold no-underline gap-2 transition-all hover:scale-105 active:scale-95 border border-border bg-background-primary/5 hover:bg-background-primary/10 text-text-primary hover:text-text-primary`.replace(/\s+/g, " ");
+  const btnClass = `${btnBase} ${customClass}`.trim();
+  const positionMap = {
+    "#left": "flex justify-start",
+    "#center": "flex justify-center",
+    "#right": "flex justify-end"
+  };
+  const wrapperClass = customClass.split(/\s+/).map((c) => positionMap[c] || c).join(" ");
+  if (label) {
+    return /* @__PURE__ */ jsx7("div", { className: `not-prose ${wrapperClass}`.trim(), children: /* @__PURE__ */ jsxs5(
+      "a",
+      {
+        href: url,
+        target,
+        rel: "noopener noreferrer",
+        className: btnClass,
+        children: [
+          /* @__PURE__ */ jsx7(IconRenderer, { iconName: icon }),
+          label
+        ]
+      }
+    ) });
+  }
+  const slotContent = renderSlot("default");
+  const findLinks = (element) => {
+    if (!element) return [];
+    if (React4.isValidElement(element) && element.type === "a") {
+      return [element];
+    }
+    if (Array.isArray(element)) {
+      return element.flatMap(findLinks);
+    }
+    if (React4.isValidElement(element) && element.props.children) {
+      return findLinks(element.props.children);
+    }
+    return [];
+  };
+  const links = findLinks(slotContent);
+  if (links.length > 0) {
+    return /* @__PURE__ */ jsx7("div", { className: `not-prose ${wrapperClass}`.trim(), children: links.map(
+      (link, index) => React4.cloneElement(
+        link,
+        {
+          key: index,
+          className: `${link.props.className || ""} ${btnClass}`.trim(),
+          target,
+          rel: "noopener noreferrer"
+        },
+        /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx7(IconRenderer, { iconName: icon }),
+          link.props.children
+        ] })
+      )
+    ) });
+  }
+  return /* @__PURE__ */ jsx7("div", { className: `not-prose ${wrapperClass}`.trim(), children: /* @__PURE__ */ jsxs5("a", { href: url, target, rel: "noopener noreferrer", className: btnClass, children: [
+    /* @__PURE__ */ jsx7(IconRenderer, { iconName: icon }),
+    slotContent
+  ] }) });
+};
+var ButtonDirective_default = ButtonDirective;
+
+// directives/WrapperDirective.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var WrapperDirective = ({
+  props,
+  renderSlot
+}) => {
+  const className = props.class || "";
+  const id = props.id || "";
+  const inlineStyle = props.style ? parseCssString(props.style) : {};
+  const wrapperProps = {};
+  if (className) wrapperProps.className = className;
+  if (id) wrapperProps.id = id;
+  if (Object.keys(inlineStyle).length > 0) wrapperProps.style = inlineStyle;
+  for (const [key, value] of Object.entries(props)) {
+    if (key.startsWith("data-")) {
+      wrapperProps[key] = value;
+    }
+  }
+  return /* @__PURE__ */ jsx8("div", { ...wrapperProps, children: renderSlot("default") });
+};
+var WrapperDirective_default = WrapperDirective;
+
+// directives/SlideDirective.tsx
+import { useState as useState3, useEffect as useEffect2, useCallback, useRef as useRef2, useLayoutEffect } from "react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var slideCounter = 0;
+var SlideDirective = ({
+  props,
+  context,
+  slots
+}) => {
+  const rawContent = slots.default || "";
+  const lines = rawContent.split("\n").map((l) => l.trim()).filter(Boolean);
+  const elements = lines.map((line) => context.parseMarkdown(line));
+  const [current, setCurrent] = useState3(0);
+  const interval = parseInt(props.interval || "3000", 10);
+  const speed = parseInt(props.speed || "500", 10);
+  const elRefs = useRef2([]);
+  const [maxH, setMaxH] = useState3(0);
+  useLayoutEffect(() => {
+    let h = 0;
+    elRefs.current.forEach((el) => {
+      if (el) h = Math.max(h, el.offsetHeight);
+    });
+    if (h > 0) setMaxH(h);
+  }, [elements]);
+  const cycle = useCallback(() => {
+    if (elements.length <= 1) return;
+    setCurrent((prev) => (prev + 1) % elements.length);
+  }, [elements.length]);
+  useEffect2(() => {
+    if (elements.length <= 1) return;
+    const id = setInterval(cycle, interval);
+    return () => clearInterval(id);
+  }, [cycle, interval, elements.length]);
+  if (elements.length === 0) return null;
+  const rawClass = props.class || "";
+  const inlineStyle = props.style ? parseCssString(props.style) : {};
+  const textSizeMap = {
+    "text-xs": "0.75rem",
+    "text-sm": "0.875rem",
+    "text-base": "1rem",
+    "text-lg": "1.125rem",
+    "text-xl": "1.25rem",
+    "text-2xl": "1.5rem",
+    "text-3xl": "1.875rem",
+    "text-4xl": "2.25rem",
+    "text-5xl": "3rem",
+    "text-6xl": "3.75rem",
+    "text-7xl": "4.5rem",
+    "text-8xl": "6rem",
+    "text-9xl": "8rem"
+  };
+  const textSizeMatch = rawClass.match(/\btext-(xs|sm|base|lg|xl|[2-9]xl)\b/);
+  const forcedFontSize = textSizeMatch ? textSizeMap[textSizeMatch[0]] : null;
+  const scopeClass = `sld-${++slideCounter}`;
+  const className = textSizeMatch ? rawClass.replace(textSizeMatch[0], "").replace(/\s+/g, " ").trim() : rawClass;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "not-prose",
+      style: { height: maxH || "auto", position: "relative", overflow: "hidden", ...inlineStyle },
+      children: [
+        forcedFontSize && /* @__PURE__ */ jsx9("style", { children: `.${scopeClass} * { font-size: ${forcedFontSize} !important; line-height: normal !important; }` }),
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: 0,
+              transition: `transform ${speed}ms cubic-bezier(0.16, 1, 0.3, 1)`,
+              transform: `translateY(${-current * maxH}px)`
+            },
+            children: elements.map((tokens, i) => /* @__PURE__ */ jsx9(
+              "div",
+              {
+                ref: (el) => {
+                  elRefs.current[i] = el;
+                },
+                style: maxH ? { height: maxH, display: "flex", alignItems: "center", overflow: "hidden" } : { display: "flex", alignItems: "center" },
+                children: /* @__PURE__ */ jsx9("div", { className: `${scopeClass} ${className}`, style: { width: "100%" }, children: context.processAndRenderElements(tokens) })
+              },
+              i
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+var SlideDirective_default = SlideDirective;
+
+// directives/index.ts
+var directiveRegistry = {
+  // Admonitions
+  note: AdmonitionDirective_default,
+  info: AdmonitionDirective_default,
+  warning: AdmonitionDirective_default,
+  danger: AdmonitionDirective_default,
+  greentext: AdmonitionDirective_default,
+  // Cards
+  card: CardDirective_default,
+  "card-m": CardDirective_default,
+  "card-b": CardDirective_default,
+  // Interactive
+  details: DetailsDirective_default,
+  modal: ModalDirective_default,
+  button: ButtonDirective_default,
+  // Layout / generic wrappers
+  div: WrapperDirective_default,
+  style: WrapperDirective_default,
+  custom: WrapperDirective_default,
+  raw: WrapperDirective_default,
+  // Animation
+  slide: SlideDirective_default
+};
+var directives_default = directiveRegistry;
+
+// DirectiveRenderer.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var DirectiveRenderer = ({
+  element,
+  context,
+  index,
+  allElements
+}) => {
+  const { directiveType, props, slots, scopeId } = element;
+  const Component = directives_default[directiveType];
+  const renderSlot = (name) => {
+    const slotContent = slots[name];
+    if (!slotContent) return null;
+    const parsed = context.parseMarkdown(slotContent);
+    return context.processAndRenderElements(parsed);
+  };
+  const directiveProps = {
+    directiveType,
+    props,
+    slots,
+    renderSlot,
+    context,
+    index,
+    allElements
+  };
+  if (Component) {
+    return /* @__PURE__ */ jsx10(Component, { ...directiveProps }, index);
+  }
+  return /* @__PURE__ */ jsx10("div", { className: `my-4 p-4 rounded-2xl border border-border bg-background-primary/5`, children: renderSlot("default") }, index);
+};
+var DirectiveRenderer_default = DirectiveRenderer;
+
+// RawHtmlRenderer.tsx
+import { useRef as useRef4, useEffect as useEffect4 } from "react";
+
+// useTailwindCDN.ts
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+function scanTailwindCDN() {
+  const tw = window.tailwind;
+  if (tw?.scan) tw.scan();
+}
+
+// RawHtmlRenderer.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var RawHtmlRenderer = ({
+  content,
+  globalStyles,
+  wrapperClassName
+}) => {
+  const containerRef = useRef4(null);
+  useEffect4(() => {
+    if (!containerRef.current) return;
+    const scripts = containerRef.current.querySelectorAll("script");
+    scripts.forEach((oldScript) => {
+      const newScript = document.createElement("script");
+      Array.from(oldScript.attributes).forEach(
+        (attr) => newScript.setAttribute(attr.name, attr.value)
+      );
+      newScript.textContent = oldScript.textContent;
+      oldScript.parentNode?.replaceChild(newScript, oldScript);
+    });
+    scanTailwindCDN();
+  }, [content]);
+  useEffect4(() => {
+    if (!globalStyles) return;
+    const styleEl = document.createElement("style");
+    styleEl.setAttribute("data-global", "");
+    styleEl.textContent = globalStyles;
+    document.head.appendChild(styleEl);
+    return () => {
+      if (styleEl.parentNode) document.head.removeChild(styleEl);
+    };
+  }, [globalStyles]);
+  return /* @__PURE__ */ jsx11("div", { className: wrapperClassName, ref: containerRef, children: /* @__PURE__ */ jsx11("div", { dangerouslySetInnerHTML: { __html: content } }) });
+};
+var RawHtmlRenderer_default = RawHtmlRenderer;
+
+// context.tsx
+import { createContext, useContext } from "react";
+var RenderCtx = createContext(null);
+var RenderContextProvider = RenderCtx.Provider;
+
+// CustomMarkdownRenderer.tsx
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var CustomMarkdownRenderer = ({ content: initialContent }) => {
+  const [modals, setModals] = useState4({});
+  const baseId = useId3().replace(/:/g, "");
+  const articleClass = `scope-${baseId}`;
+  const contextRef = useRef5(null);
+  resetScopeCounter();
+  const allElements = useMemo(() => parseMarkdown(initialContent), [initialContent]);
+  useEffect5(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash;
+      if (hash) {
+        const parts = hash.split("#");
+        const id = parts[parts.length - 1];
+        scrollToId(id);
+      }
+    };
+    handleHashChange();
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [initialContent]);
+  const renderElement = useCallback2(
+    (element, index, _depth = 0) => {
+      switch (element.type) {
+        case "header": {
+          const HeaderTag = `h${element.level}`;
+          let text = element.text;
+          const alignCenter = text.match(/^->\s*(.+?)\s*<-\s*$/);
+          const alignRight = text.match(/^->\s*(.+?)\s*->\s*$/);
+          if (alignCenter) {
+            text = alignCenter[1];
+          } else if (alignRight) {
+            text = alignRight[1];
+          }
+          const userClasses = element.classes || "";
+          let headerClasses = `md-h${element.level}`;
+          if (alignCenter) headerClasses += " text-center";
+          if (alignRight) headerClasses += " text-right";
+          if (userClasses) headerClasses += ` ${userClasses}`;
+          return React8.createElement(
+            HeaderTag,
+            { key: index, id: element.id, className: headerClasses },
+            renderInline(text)
+          );
+        }
+        case "paragraph": {
+          const lines = element.content.split("\n");
+          const processedContent = lines.map((line, lineIndex) => {
+            const hardBreakMatch = line.match(/^(.*?)(\s{2,})$/);
+            if (hardBreakMatch) {
+              return /* @__PURE__ */ jsxs7(React8.Fragment, { children: [
+                renderInline(hardBreakMatch[1]),
+                /* @__PURE__ */ jsx12("br", {})
+              ] }, lineIndex);
+            }
+            const isLastLine = lineIndex === lines.length - 1;
+            return /* @__PURE__ */ jsxs7(React8.Fragment, { children: [
+              renderInline(line),
+              !isLastLine && " "
+            ] }, lineIndex);
+          });
+          const pUserClasses = element.classes || "";
+          let pClasses = "md-p";
+          if (pUserClasses) pClasses += ` ${pUserClasses}`;
+          if (element.align) pClasses += ` text-${element.align}`;
+          return /* @__PURE__ */ jsx12("p", { id: element.id, className: pClasses, children: processedContent }, index);
+        }
+        case "codeblock":
+          return /* @__PURE__ */ jsx12(
+            CodeBlock,
+            {
+              code: element.content,
+              language: element.language,
+              title: element.title
+            },
+            index
+          );
+        case "directive":
+          return /* @__PURE__ */ jsx12(
+            DirectiveRenderer_default,
+            {
+              element,
+              context: contextRef.current,
+              index,
+              allElements
+            },
+            index
+          );
+        case "html": {
+          let processedContent = element.content;
+          let globalStyles = "";
+          processedContent = processedContent.replace(
+            /<style(?:\s+[^>]*)?>([\s\S]*?)<\/style>/gi,
+            (_match, cssContent) => {
+              globalStyles += cssContent + "\n";
+              return "";
+            }
+          );
+          const wrapperClassName = "w-full my-4";
+          return /* @__PURE__ */ jsx12(
+            RawHtmlRenderer_default,
+            {
+              content: processedContent,
+              globalStyles: globalStyles || void 0,
+              wrapperClassName
+            },
+            index
+          );
+        }
+        case "html-block": {
+          const htmlBlock = element;
+          const props = parseHtmlAttrs(htmlBlock.attrs);
+          return React8.createElement(
+            htmlBlock.tag,
+            { key: index, ...props },
+            ...processAndRenderElements(htmlBlock.children, _depth + 1)
+          );
+        }
+        case "image":
+          return /* @__PURE__ */ jsx12(
+            "img",
+            {
+              alt: element.alt,
+              src: element.src,
+              style: element.style,
+              className: "max-w-full h-auto"
+            },
+            index
+          );
+        case "table":
+          return /* @__PURE__ */ jsx12("div", { children: renderTable(element.content) }, index);
+        case "list":
+          return /* @__PURE__ */ jsx12("div", { children: renderList(element.content) }, index);
+        case "blockquote":
+          return /* @__PURE__ */ jsx12("blockquote", { className: `border-l-4 border-accent-primary/30 pl-4 italic text-text-secondary my-4 text-sm sm:text-base${element.classes ? ` ${element.classes}` : ""}`, children: renderInline(element.content) }, index);
+        case "hr":
+          return /* @__PURE__ */ jsx12("hr", { className: "my-8 border-border" }, index);
+        case "toc":
+          return /* @__PURE__ */ jsx12("div", { children: generateToc(allElements) }, index);
+        default:
+          return null;
+      }
+    },
+    [allElements]
+  );
+  const processAndRenderElements = useCallback2(
+    (elements, depth = 0) => {
+      const result = [];
+      let i = 0;
+      while (i < elements.length) {
+        const el = elements[i];
+        if (el.type === "directive" && ["card", "card-m", "card-b"].includes(el.directiveType)) {
+          const cards = [];
+          while (i < elements.length && elements[i].type === "directive" && ["card", "card-m", "card-b"].includes(elements[i].directiveType)) {
+            cards.push(elements[i]);
+            i++;
+          }
+          if (cards.length === 1 || cards[0].props?.batch === "off") {
+            for (let c = 0; c < cards.length; c++) {
+              result.push(renderElement(cards[c], result.length, depth));
+            }
+          } else {
+            const firstCardClass = cards[0].props?.["class"] || "";
+            const justifyClasses = firstCardClass.match(/\bjustify-\S+/g) || [];
+            const wrapperJustify = justifyClasses.length > 0 ? justifyClasses.join(" ") : "";
+            result.push(
+              /* @__PURE__ */ jsx12("div", { className: `not-prose flex flex-wrap gap-6 my-6 ${wrapperJustify}`, children: cards.map((card, ci) => /* @__PURE__ */ jsx12(React8.Fragment, { children: renderElement(card, ci, depth) }, ci)) }, `card-grid-${result.length}`)
+            );
+          }
+        } else {
+          result.push(renderElement(el, result.length, depth));
+          i++;
+        }
+      }
+      return result;
+    },
+    [renderElement]
+  );
+  const generateToc = (elements) => {
+    const headers = extractHeaders(elements);
+    if (headers.length === 0) return null;
+    return /* @__PURE__ */ jsxs7("nav", { className: "not-prose my-6 p-4 rounded-2xl border border-border bg-background-primary/5", children: [
+      /* @__PURE__ */ jsx12("div", { className: "text-base font-bold mb-3", children: "Table of Contents" }),
+      /* @__PURE__ */ jsx12("ul", { className: "space-y-1 list-none p-0 m-0", children: headers.map((h, i) => {
+        if (h.type !== "header") return null;
+        const indentClass = h.level <= 2 ? "pl-0" : h.level === 3 ? "pl-4" : h.level === 4 ? "pl-8" : "pl-12";
+        return /* @__PURE__ */ jsx12("li", { className: `${indentClass} text-sm sm:text-base`, children: /* @__PURE__ */ jsx12(
+          "a",
+          {
+            href: `#${h.id}`,
+            className: "text-accent-primary hover:text-accent-primary/80 no-underline hover:underline transition-colors",
+            onClick: (e) => {
+              e.preventDefault();
+              scrollToId(h.id);
+            },
+            children: renderInline(h.text.replace(/->|<-/g, "").trim())
+          }
+        ) }, i);
+      }) })
+    ] });
+  };
+  const contextForDirectives = {
+    modals,
+    setModals,
+    articleClass,
+    allElements,
+    parseMarkdown,
+    renderElement,
+    renderInline,
+    processAndRenderElements
+  };
+  contextRef.current = contextForDirectives;
+  return /* @__PURE__ */ jsx12(RenderContextProvider, { value: contextForDirectives, children: processAndRenderElements(allElements) });
+};
+var CustomMarkdownRenderer_default = CustomMarkdownRenderer;
+
+// NReditor.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var customSyntaxHighlighting = HighlightStyle.define([
+  { tag: t2.heading, fontWeight: "bold", color: "var(--tc-heading, #e2e8f0)" },
+  { tag: t2.quote, color: "var(--tc-quote, #94a3b8)", fontStyle: "italic" },
+  { tag: t2.meta, color: "var(--tc-meta, #64748b)" },
+  { tag: t2.variableName, color: "var(--tc-variable, #38bdf8)" },
+  { tag: t2.strong, fontWeight: "bold" },
+  { tag: t2.emphasis, fontStyle: "italic" },
+  { tag: t2.strikethrough, textDecoration: "line-through" },
+  { tag: t2.link, color: "var(--tc-link, #38bdf8)" },
+  { tag: t2.url, color: "var(--tc-link, #38bdf8)" },
+  { tag: t2.comment, color: "var(--tc-comment, #64748b)" },
+  { tag: t2.keyword, color: "var(--tc-heading, #e2e8f0)", fontWeight: "bold" },
+  { tag: t2.typeName, color: "var(--tc-type, #a78bfa)" },
+  { tag: t2.string, color: "var(--tc-string, #4ade80)" },
+  { tag: t2.attributeName, color: "var(--tc-attribute, #fb923c)" },
+  { tag: t2.propertyName, color: "#0ea5e9" },
+  { tag: t2.className, color: "#f59e0b", fontStyle: "italic" },
+  { tag: t2.special(t2.emphasis), textDecoration: "underline" },
+  { tag: t2.special(t2.comment), backgroundColor: "var(--tc-highlight-bg, rgba(255,255,255,0.05))", padding: "0 2px", borderRadius: "2px" }
+]);
+var customEditorTheme = EditorView.theme({
+  "&": {
+    color: "var(--color-text-primary, #e2e8f0)",
+    backgroundColor: "transparent !important",
+    height: "100%",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "0"
+  },
+  "&.cm-focused": { outline: "none" },
+  ".cm-scroller": {
+    overflow: "auto !important",
+    flex: "1",
+    minHeight: "0",
+    WebkitOverflowScrolling: "touch"
+  },
+  ".cm-gutters": {
+    backgroundColor: "transparent !important",
+    borderRight: "1px solid var(--color-border, #334155)",
+    color: "var(--color-text-secondary, #94a3b8)",
+    opacity: 0.6,
+    border: "none"
+  },
+  ".cm-activeLineGutter": { backgroundColor: "transparent" },
+  ".cm-lineNumbers": { color: "inherit" },
+  ".cm-foldGutter": { padding: "0px", cursor: "pointer" },
+  ".cm-foldPlaceholder": {
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    border: "1px solid var(--color-border, #334155)",
+    color: "var(--tc-heading, #e2e8f0)",
+    padding: "0 6px",
+    borderRadius: "4px",
+    margin: "0 4px",
+    fontSize: "0.9em",
+    fontWeight: "bold"
+  },
+  ".dark .cm-foldPlaceholder": {
+    backgroundColor: "rgba(255, 255, 255, 0.1)"
+  },
+  ".cm-activeLine": { backgroundColor: "transparent" },
+  ".cm-cursor": { borderLeftColor: "var(--color-text-primary, #e2e8f0)" },
+  "&.cm-focused .cm-selectionBackground, .cm-selectionBackground": {
+    backgroundColor: "var(--tc-selection-bg, rgba(56, 189, 248, 0.2)) !important"
+  },
+  ".cm-blockquote-line": {
+    color: "var(--tc-blockquote-color, #94a3b8)",
+    fontStyle: "italic",
+    borderLeft: "2px solid var(--tc-blockquote-border, #334155)",
+    paddingLeft: "10px"
+  },
+  ".cm-spoiler": {
+    backgroundColor: "var(--color-text-secondary, #94a3b8)",
+    color: "var(--color-text-secondary, #94a3b8)",
+    borderRadius: "3px",
+    padding: "0 2px",
+    cursor: "pointer",
+    transition: "background-color 0.2s, color 0.2s"
+  },
+  ".cm-spoiler:hover": {
+    backgroundColor: "transparent",
+    color: "var(--color-text-primary, #e2e8f0)"
+  },
+  ".cm-admonition-bg": {
+    borderLeft: "none !important",
+    marginLeft: "0px"
+  },
+  ".cm-admonition-button": { borderLeftColor: "var(--tc-attribute, #fb923c)" },
+  ".cm-admonition-modal": { borderLeftColor: "var(--tc-variable, #38bdf8)" },
+  ".cm-admonition-warning": { borderLeftColor: "#f59e0b" },
+  ".cm-admonition-danger": { borderLeftColor: "#ef4444" },
+  ".cm-raw-block": {
+    fontFamily: "monospace",
+    backgroundColor: "rgba(0, 0, 0, 0.1)"
+  },
+  ".dark .cm-raw-block": {
+    backgroundColor: "rgba(255, 255, 255, 0.05)"
+  },
+  ".cm-admonition-depth-1": {
+    boxShadow: "inset 4px 0 0 hsl(20, 70%, 50%)",
+    backgroundColor: "hsla(20, 70%, 50%, 0.05)",
+    paddingLeft: "12px !important"
+  },
+  ".cm-admonition-depth-2": {
+    boxShadow: "inset 4px 0 0 hsl(20, 70%, 50%), inset 8px 0 0 hsl(140, 70%, 50%)",
+    backgroundColor: "hsla(140, 70%, 50%, 0.05)",
+    paddingLeft: "16px !important"
+  },
+  ".cm-admonition-depth-3": {
+    boxShadow: "inset 4px 0 0 hsl(20, 70%, 50%), inset 8px 0 0 hsl(140, 70%, 50%), inset 12px 0 0 hsl(200, 70%, 50%)",
+    backgroundColor: "hsla(200, 70%, 50%, 0.05)",
+    paddingLeft: "20px !important"
+  },
+  ".cm-admonition-depth-4": {
+    boxShadow: "inset 4px 0 0 hsl(20, 70%, 50%), inset 8px 0 0 hsl(140, 70%, 50%), inset 12px 0 0 hsl(200, 70%, 50%), inset 16px 0 0 hsl(280, 70%, 50%)",
+    backgroundColor: "hsla(280, 70%, 50%, 0.05)",
+    paddingLeft: "24px !important"
+  },
+  ".cm-admonition-depth-5": {
+    boxShadow: "inset 4px 0 0 hsl(340, 70%, 50%), inset 8px 0 0 hsl(140, 70%, 50%), inset 12px 0 0 hsl(200, 70%, 50%), inset 16px 0 0 hsl(280, 70%, 50%), inset 20px 0 0 hsl(340, 70%, 50%)",
+    backgroundColor: "hsla(340, 70%, 50%, 0.05)",
+    paddingLeft: "28px !important"
+  },
+  ".cm-panels": {
+    position: "static !important",
+    backgroundColor: "transparent !important",
+    border: "none !important"
+  },
+  ".cm-panel.cm-search": {
+    position: "fixed !important",
+    top: "20px !important",
+    right: "20px !important",
+    zIndex: 100,
+    backgroundColor: "var(--color-background-primary, #0f172a)",
+    border: "1px solid var(--color-border, #334155)",
+    borderRadius: "12px",
+    padding: "12px",
+    boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    backdropFilter: "blur(8px)",
+    minWidth: "280px"
+  },
+  ".cm-search [name=close]": {
+    position: "absolute",
+    right: "8px",
+    top: "8px",
+    cursor: "pointer",
+    opacity: 0.6,
+    border: "none",
+    background: "transparent",
+    color: "var(--color-text-primary, #e2e8f0)",
+    fontSize: "18px"
+  },
+  ".cm-search [name=close]:hover": { opacity: 1 },
+  ".cm-textfield": {
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    border: "1px solid var(--color-border, #334155)",
+    borderRadius: "6px",
+    color: "var(--color-text-primary, #e2e8f0)",
+    padding: "4px 8px",
+    outline: "none",
+    width: "100%",
+    marginBottom: "4px"
+  },
+  ".cm-textfield:focus": {
+    borderColor: "var(--color-accent-primary, #38bdf8)",
+    backgroundColor: "rgba(255, 255, 255, 0.08)"
+  },
+  ".cm-panel.cm-search input[type=checkbox]:checked": {
+    backgroundColor: "var(--color-accent-primary, #38bdf8)"
+  },
+  ".cm-panel.cm-search input[type=checkbox]": {
+    backgroundColor: "rgba(255, 255, 255, 0.08)"
+  },
+  ".cm-button": {
+    backgroundImage: "linear-gradient(135deg, var(--color-accent-primary, #38bdf8), var(--color-accent-hover, #7dd3fc))",
+    color: "var(--color-accent-text, #0f172a)",
+    border: "none",
+    borderRadius: "6px",
+    padding: "4px 10px",
+    cursor: "pointer",
+    fontSize: "0.85em",
+    fontWeight: "600",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    transition: "transform 0.1s, opacity 0.2s",
+    marginRight: "4px",
+    boxShadow: "0 4px 12px -2px rgba(0, 0, 0, 0.2)"
+  },
+  ".cm-button:hover": {
+    opacity: 0.95,
+    transform: "translateY(-1px)",
+    boxShadow: "0 6px 14px -2px rgba(0, 0, 0, 0.25)"
+  },
+  ".cm-button:active": { transform: "translateY(0)" },
+  ".cm-search label": {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    fontSize: "0.8em",
+    color: "var(--color-text-secondary, #94a3b8)",
+    marginRight: "8px",
+    cursor: "pointer"
+  },
+  ".cm-search input[type=checkbox]": {
+    cursor: "pointer",
+    accentColor: "var(--color-accent-primary, #38bdf8)"
+  }
+});
+var customFoldService = foldService.of((state, lineStart) => {
+  const line = state.doc.lineAt(lineStart);
+  const trimmed = line.text.trim();
+  const dirMatch = trimmed.match(/^:::(.+)/);
+  if (dirMatch) {
+    let stack = 1;
+    for (let i = line.number + 1; i <= state.doc.lines; i++) {
+      const nextLine = state.doc.line(i);
+      const nextText = nextLine.text.trim();
+      if (nextText.match(/^:::(.+)/)) {
+        stack++;
+      } else if (nextText === ":::") {
+        stack--;
+        if (stack === 0) {
+          return { from: line.to, to: nextLine.to };
+        }
+      }
+    }
+    return null;
+  }
+  const htmlMatch = trimmed.match(/^<([a-zA-Z][\w-]*)\b/);
+  if (htmlMatch) {
+    const tagName = htmlMatch[1].toLowerCase();
+    const voidElements = /* @__PURE__ */ new Set([
+      "area",
+      "base",
+      "br",
+      "col",
+      "embed",
+      "hr",
+      "img",
+      "input",
+      "link",
+      "meta",
+      "param",
+      "source",
+      "track",
+      "wbr"
+    ]);
+    if (voidElements.has(tagName) || trimmed.endsWith("/>")) return null;
+    let stack = 1;
+    for (let i = line.number + 1; i <= state.doc.lines; i++) {
+      const nextLine = state.doc.line(i);
+      const nextText = nextLine.text;
+      let match;
+      const tagRegex = new RegExp(`</?${tagName}\\b[^>]*>`, "gi");
+      while ((match = tagRegex.exec(nextText)) !== null) {
+        if (match[0].startsWith("</")) {
+          stack--;
+          if (stack === 0) {
+            return { from: line.to, to: nextLine.to };
+          }
+        } else {
+          if (!match[0].endsWith("/>")) {
+            stack++;
+          }
+        }
+      }
+    }
+    return null;
+  }
+  return null;
+});
+var directivePlugin = ViewPlugin.fromClass(
+  class {
+    constructor(view) {
+      this.decorations = this.getDecorations(view);
+    }
+    update(update) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = this.getDecorations(update.view);
+      }
+    }
+    getDecorations(view) {
+      const builder = new RangeSetBuilder();
+      const doc = view.state.doc;
+      const visibleRanges = view.visibleRanges;
+      if (visibleRanges.length === 0) return builder.finish();
+      const maxTo = visibleRanges[visibleRanges.length - 1].to;
+      const admonitionStack = [];
+      for (let i = 1; i <= doc.lines; i++) {
+        const line = doc.line(i);
+        if (line.from > maxTo) break;
+        const trimmedLine = line.text.trim();
+        let isClosingLine = false;
+        let closingTargetIdx = -1;
+        const match = trimmedLine.match(/^:::(.*)/);
+        if (match) {
+          const rest = match[1].trim();
+          if (rest === "") {
+            if (admonitionStack.length > 0) {
+              isClosingLine = true;
+              closingTargetIdx = admonitionStack.length - 1;
+            }
+          } else {
+            const typeMatch = rest.match(/^(\w+|\{)/);
+            const type = typeMatch && typeMatch[1] !== "{" ? typeMatch[1].toLowerCase() : "generic";
+            admonitionStack.push(type);
+          }
+        }
+        const isVisible = visibleRanges.some(
+          (r) => line.to >= r.from && line.from <= r.to
+        );
+        if (isVisible && admonitionStack.length > 0) {
+          const targetIdx = isClosingLine ? closingTargetIdx : admonitionStack.length - 1;
+          const currentType = admonitionStack[targetIdx];
+          const depth = targetIdx + 1;
+          const lineClasses = ["cm-admonition-bg"];
+          if (currentType === "raw") {
+            lineClasses.push("cm-raw-block");
+            lineClasses.push(`cm-admonition-depth-${Math.min(depth, 5)}`);
+          } else {
+            lineClasses.push(`cm-admonition-${currentType}`);
+            lineClasses.push(`cm-admonition-depth-${Math.min(depth, 5)}`);
+          }
+          builder.add(
+            line.from,
+            line.from,
+            Decoration.line({ class: lineClasses.join(" ") })
+          );
+        }
+        if (isClosingLine) {
+          admonitionStack.pop();
+        }
+      }
+      return builder.finish();
+    }
+  },
+  { decorations: (v) => v.decorations }
+);
+var blockquotePlugin = ViewPlugin.fromClass(
+  class {
+    constructor(view) {
+      this.decorations = this.getDecorations(view);
+    }
+    update(update) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = this.getDecorations(update.view);
+      }
+    }
+    getDecorations(view) {
+      const builder = new RangeSetBuilder();
+      for (const { from, to } of view.visibleRanges) {
+        for (let pos = from; pos <= to; ) {
+          const line = view.state.doc.lineAt(pos);
+          if (line.text.trim().startsWith(">")) {
+            builder.add(
+              line.from,
+              line.from,
+              Decoration.line({ class: "cm-blockquote-line" })
+            );
+          }
+          pos = line.to + 1;
+        }
+      }
+      return builder.finish();
+    }
+  },
+  { decorations: (v) => v.decorations }
+);
+var spoilerPlugin = ViewPlugin.fromClass(
+  class {
+    constructor(view) {
+      this.decorations = this.getDecorations(view);
+    }
+    update(update) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = this.getDecorations(update.view);
+      }
+    }
+    getDecorations(view) {
+      const builder = new RangeSetBuilder();
+      const spoilerRegex = /!>([\s\S]+?)<!(?=\s|$)/g;
+      const ranges = [];
+      for (const { from, to } of view.visibleRanges) {
+        const text = view.state.doc.sliceString(from, to);
+        spoilerRegex.lastIndex = 0;
+        let match;
+        while (match = spoilerRegex.exec(text)) {
+          const start = from + match.index;
+          const end = start + match[0].length;
+          const contentStart = start + 2;
+          const contentEnd = end - 2;
+          if (contentStart >= contentEnd) continue;
+          ranges.push({ from: start, to: contentStart, dec: Decoration.replace({}) });
+          ranges.push({
+            from: contentStart,
+            to: contentEnd,
+            dec: Decoration.mark({ class: "cm-spoiler" })
+          });
+          ranges.push({ from: contentEnd, to: end, dec: Decoration.replace({}) });
+        }
+      }
+      ranges.sort((a, b) => a.from - b.from || a.to - b.to);
+      for (const { from, to, dec } of ranges) builder.add(from, to, dec);
+      return builder.finish();
+    }
+  },
+  { decorations: (v) => v.decorations }
+);
+var colorTextPlugin = ViewPlugin.fromClass(
+  class {
+    constructor(view) {
+      this.decorations = this.getDecorations(view);
+    }
+    update(update) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = this.getDecorations(update.view);
+      }
+    }
+    getDecorations(view) {
+      const builder = new RangeSetBuilder();
+      const colorRegex = /%([^%\s]+?)%((?:(?!%%).)*)%%/g;
+      for (const { from, to } of view.visibleRanges) {
+        const text = view.state.doc.sliceString(from, to);
+        let match;
+        while (match = colorRegex.exec(text)) {
+          const color = match[1];
+          const startPos = from + match.index;
+          const endPos = startPos + match[0].length;
+          builder.add(
+            startPos,
+            endPos,
+            Decoration.mark({ attributes: { style: `color: ${color}` } })
+          );
+        }
+      }
+      return builder.finish();
+    }
+  },
+  { decorations: (v) => v.decorations }
+);
+var NReditor = ({
+  value,
+  onChange,
+  className,
+  debounceMs = 300,
+  tailwindCDN = false
+}) => {
+  const editorRef = useRef6(null);
+  const [isAllFolded, setIsAllFolded] = useState5(false);
+  const [editorMode, setEditorMode] = useState5("editor");
+  const debouncedContent = useDebounce(value, debounceMs);
+  const handleToggleFold = () => {
+    if (!editorRef.current) return;
+    if (isAllFolded) {
+      unfoldAll(editorRef.current);
+      setIsAllFolded(false);
+    } else {
+      foldAll(editorRef.current);
+      setIsAllFolded(true);
+    }
+  };
+  const extensions = React9.useMemo(
+    () => [
+      customStreamParserV2,
+      lineNumbers(),
+      foldGutter({
+        markerDOM: (open) => {
+          const span = document.createElement("span");
+          span.style.cursor = "pointer";
+          span.style.padding = "0 4px";
+          span.style.fontSize = "12px";
+          span.style.display = "inline-block";
+          span.style.transition = "transform 0.2s";
+          span.textContent = open ? "\u25BC" : "\u25B6";
+          return span;
+        }
+      }),
+      customFoldService,
+      customEditorTheme,
+      syntaxHighlighting(customSyntaxHighlighting),
+      EditorView.lineWrapping,
+      scrollPastEnd(),
+      keymap.of([
+        { key: "Ctrl-Shift-[", run: foldAll },
+        { key: "Ctrl-Shift-]", run: unfoldAll }
+      ]),
+      directivePlugin,
+      blockquotePlugin,
+      spoilerPlugin,
+      colorTextPlugin
+    ],
+    []
+  );
+  const modeButtons = [
+    { key: "editor", icon: "code", label: "Editor" },
+    { key: "split", icon: "vertical_split", label: "Split" },
+    { key: "preview", icon: "visibility", label: "Preview" }
+  ];
+  return /* @__PURE__ */ jsxs8("div", { className: `relative flex-1 flex flex-col min-h-0 ${className || ""}`, children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-2 py-1.5 border-b border-border/30 bg-background-secondary-solid/50 rounded-t-2xl shrink-0", children: [
+      /* @__PURE__ */ jsx13(
+        "button",
+        {
+          onClick: handleToggleFold,
+          className: "p-1 px-2 text-xs font-bold bg-background-secondary-solid border border-border rounded hover:bg-border text-accent-primary transition-colors",
+          title: isAllFolded ? "Expand all" : "Collapse all",
+          children: isAllFolded ? "\u2569" : "\u2566"
+        }
+      ),
+      /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-0.5 bg-black/10 dark:bg-white/5 rounded-lg p-0.5", children: modeButtons.map((btn) => /* @__PURE__ */ jsxs8(
+        "button",
+        {
+          onClick: () => setEditorMode(btn.key),
+          className: `flex items-center gap-1 px-2.5 py-1 text-xs rounded-md transition-colors ${editorMode === btn.key ? "bg-accent-primary/20 text-accent-primary font-semibold" : "text-text-secondary hover:text-text-primary hover:bg-white/5"}`,
+          title: btn.label,
+          children: [
+            /* @__PURE__ */ jsx13("span", { className: "material-symbols-rounded text-sm", children: btn.icon }),
+            /* @__PURE__ */ jsx13("span", { className: "hidden sm:inline", children: btn.label })
+          ]
+        },
+        btn.key
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex-1 min-h-0 flex", children: [
+      (editorMode === "editor" || editorMode === "split") && /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: `${editorMode === "split" ? "w-1/2 border-r border-border/30" : "w-full"} flex-1 flex flex-col min-h-0 min-w-0`,
+          children: /* @__PURE__ */ jsx13(
+            CodeMirror,
+            {
+              value,
+              onChange,
+              className: "flex-1 min-h-0 min-w-0",
+              height: "100%",
+              onCreateEditor: (view) => {
+                editorRef.current = view;
+              },
+              basicSetup: {
+                lineNumbers: false,
+                foldGutter: false
+              },
+              extensions
+            }
+          )
+        }
+      ),
+      (editorMode === "preview" || editorMode === "split") && /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: `${editorMode === "split" ? "w-1/2" : "w-full"} flex-1 min-h-0 overflow-auto min-w-0`,
+          children: /* @__PURE__ */ jsx13("div", { className: "nr-prose h-full shadow-xs overflow-auto p-4", children: /* @__PURE__ */ jsx13(CustomMarkdownRenderer_default, { content: debouncedContent }) })
+        }
+      )
+    ] })
+  ] });
+};
+var NReditor_default = NReditor;
+export {
+  NReditor_default as default
+};
+//# sourceMappingURL=NReditor.mjs.map