@docubook/mdx-content 3.4.0 → 3.4.2

package/dist/chunk-PSDC53TU.js

@@ -0,0 +1,1056 @@
+// src/components/LinkMdx.tsx
+import { jsx } from "react/jsx-runtime";
+function LinkMdx({ href, rel, target, ...props }) {
+  if (!href) return null;
+  const external = /^https?:\/\//.test(href);
+  const computedTarget = target ?? (external ? "_blank" : void 0);
+  const computedRel = rel ?? (external ? "noopener noreferrer" : void 0);
+  return /* @__PURE__ */ jsx("a", { href, target: computedTarget, rel: computedRel, ...props });
+}
+
+// src/utils/Icon.tsx
+import * as LucideIcons from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DEFAULT_ICON_SIZE = 20;
+function resolveLucideIcon(icon) {
+  const normalized = typeof icon === "string" ? icon.trim() : icon;
+  if (!normalized || !Object.hasOwn(LucideIcons, normalized)) {
+    return void 0;
+  }
+  const IconComponent = LucideIcons[normalized];
+  return /* @__PURE__ */ jsx2(IconComponent, { size: DEFAULT_ICON_SIZE });
+}
+
+// src/components/ButtonMdx.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var baseStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "0.375rem",
+  borderRadius: 10,
+  border: "1px solid hsl(var(--border-color, 210 20% 85%))",
+  background: "hsl(var(--card, 0 0% 100%))",
+  color: "hsl(var(--foreground, 220 30% 15%))",
+  textDecoration: "none",
+  fontWeight: 600,
+  fontSize: "0.9rem",
+  lineHeight: 1,
+  padding: "0.65rem 0.85rem",
+  cursor: "pointer"
+};
+var variantStyles = {
+  primary: {
+    background: "hsl(var(--accent, 200 100% 40%))",
+    borderColor: "hsl(var(--accent, 200 100% 40%))",
+    color: "#ffffff"
+  },
+  secondary: {
+    background: "hsl(var(--muted, 210 20% 92%))",
+    color: "hsl(var(--foreground, 220 30% 15%))"
+  },
+  ghost: {
+    background: "transparent",
+    borderColor: "transparent",
+    color: "hsl(var(--foreground, 220 30% 15%))"
+  }
+};
+var sizeStyles = {
+  sm: { padding: "0.45rem 0.6rem", fontSize: "0.8rem" },
+  md: { padding: "0.65rem 0.85rem", fontSize: "0.9rem" },
+  lg: { padding: "0.8rem 1rem", fontSize: "0.96rem" }
+};
+function ButtonMdx({
+  href,
+  variant,
+  size = "md",
+  icon,
+  text,
+  style,
+  children,
+  target,
+  __LinkComponent,
+  ...props
+}) {
+  const resolvedVariant = variant ?? "secondary";
+  const mergedStyle = {
+    ...baseStyle,
+    ...variantStyles[resolvedVariant],
+    ...sizeStyles[size],
+    ...style
+  };
+  const resolvedIcon = resolveLucideIcon(icon);
+  const LinkComponent = __LinkComponent ?? LinkMdx;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    resolvedIcon ? /* @__PURE__ */ jsx3(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: { display: "inline-flex", alignItems: "center", justifyContent: "center" },
+        children: resolvedIcon
+      }
+    ) : null,
+    text ?? children
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx3(LinkComponent, { href, target, style: mergedStyle, children: content });
+  }
+  return /* @__PURE__ */ jsx3("button", { type: props.type ?? "button", ...props, style: mergedStyle, children: content });
+}
+
+// src/components/CardsMdx.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function CardsMdx({ cols = 2, children, style }) {
+  const columnCount = Math.max(1, Math.min(4, cols));
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: "docubook-card-group",
+      style: {
+        "--docubook-card-group-template": `repeat(${columnCount}, minmax(240px, 1fr))`,
+        ...style
+      },
+      children
+    }
+  );
+}
+
+// src/components/CodeBlockMdx.tsx
+import { isValidElement } from "react";
+import {
+  SiJavascript,
+  SiTypescript,
+  SiReact,
+  SiPython,
+  SiGo,
+  SiPhp,
+  SiRuby,
+  SiSwift,
+  SiKotlin,
+  SiHtml5,
+  SiCss,
+  SiSass,
+  SiPostgresql,
+  SiGraphql,
+  SiYaml,
+  SiToml,
+  SiDocker,
+  SiNginx,
+  SiGit,
+  SiGnubash,
+  SiMarkdown
+} from "react-icons/si";
+import { FaJava, FaCode, FaRegFileAlt } from "react-icons/fa";
+import { TbJson } from "react-icons/tb";
+
+// src/utils/CopyButton.tsx
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function CopyButton({ content }) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef(null);
+  const statusId = useId();
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  async function onCopy() {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => setCopied(false), 1600);
+    } catch {
+      setCopied(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      onClick: onCopy,
+      "aria-label": copied ? "Copied" : "Copy code",
+      "aria-describedby": statusId,
+      style: {
+        position: "relative",
+        border: "1px solid hsl(var(--border-color, 210 20% 85%))",
+        borderRadius: 8,
+        background: "hsl(var(--card, 0 0% 100%))",
+        color: "hsl(var(--foreground, 220 30% 15%))",
+        fontSize: "0.78rem",
+        padding: "0.35rem 0.55rem",
+        cursor: "copy"
+      },
+      children: [
+        copied ? "Copied" : "Copy",
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            id: statusId,
+            "aria-live": "polite",
+            style: { position: "absolute", left: -9999, top: "auto" },
+            children: copied ? "Code copied to clipboard" : "Ready to copy code"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/utils/ExpandableCode.tsx
+import { useEffect as useEffect2, useState as useState2, useRef as useRef2 } from "react";
+import { Ellipsis } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_VISIBLE_LINES = 20;
+var FALLBACK_LINE_HEIGHT_PX = 24;
+function ExpandableCode({
+  isExpandable,
+  totalLines,
+  preContent,
+  preProps,
+  className
+}) {
+  const [isOpen, setIsOpen] = useState2(false);
+  const [collapsedMaxHeight, setCollapsedMaxHeight] = useState2(
+    `${DEFAULT_VISIBLE_LINES * FALLBACK_LINE_HEIGHT_PX}px`
+  );
+  const preRef = useRef2(null);
+  const shouldShow = isExpandable && totalLines > DEFAULT_VISIBLE_LINES;
+  const isCollapsed = shouldShow && !isOpen;
+  useEffect2(() => {
+    const pre = preRef.current;
+    if (!pre) return;
+    const calculateCollapsedHeight = () => {
+      const styles = window.getComputedStyle(pre);
+      const paddingTop = Number.parseFloat(styles.paddingTop) || 0;
+      const paddingBottom = Number.parseFloat(styles.paddingBottom) || 0;
+      const contentHeight = Math.max(pre.scrollHeight - paddingTop - paddingBottom, 0);
+      if (totalLines > 0 && contentHeight > 0) {
+        const lineHeight2 = contentHeight / totalLines;
+        setCollapsedMaxHeight(
+          `${DEFAULT_VISIBLE_LINES * lineHeight2 + paddingTop + paddingBottom}px`
+        );
+        return;
+      }
+      let lineHeight = Number.parseFloat(styles.lineHeight);
+      if (!Number.isFinite(lineHeight) || lineHeight === 0) {
+        const fontSize = Number.parseFloat(styles.fontSize);
+        lineHeight = Number.isFinite(fontSize) ? fontSize * 1.5 : FALLBACK_LINE_HEIGHT_PX;
+      }
+      setCollapsedMaxHeight(`${DEFAULT_VISIBLE_LINES * lineHeight + paddingTop + paddingBottom}px`);
+    };
+    const frame = requestAnimationFrame(calculateCollapsedHeight);
+    const timeout = window.setTimeout(calculateCollapsedHeight, 50);
+    window.addEventListener("resize", calculateCollapsedHeight);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.clearTimeout(timeout);
+      window.removeEventListener("resize", calculateCollapsedHeight);
+    };
+  }, [preContent, totalLines]);
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx6("div", { className: "mdx-expandable-code-container", children: /* @__PURE__ */ jsx6(
+      "pre",
+      {
+        ref: preRef,
+        ...preProps,
+        className: `${className || ""} mdx-expandable-code`,
+        style: {
+          margin: 0,
+          padding: "0.9rem",
+          overflowX: "auto",
+          minWidth: "100%",
+          maxHeight: isCollapsed ? collapsedMaxHeight : "none",
+          overflowY: isCollapsed ? "hidden" : "visible",
+          transition: "max-height 0.3s ease",
+          scrollbarWidth: "thin"
+        },
+        children: preContent
+      }
+    ) }),
+    shouldShow && /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: "code-block-expandable-footer",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "0.6rem",
+          background: "hsl(var(--muted, 210 20% 92%))",
+          borderTop: "1px solid hsl(var(--border-color, 210 20% 85%))"
+        },
+        children: /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            className: "code-block-expandable-toggle",
+            onClick: () => setIsOpen(!isOpen),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              padding: "0.4rem 0.8rem",
+              border: "1px solid hsl(var(--border-color, 210 20% 85%))",
+              borderRadius: 6,
+              background: "hsl(var(--background, 210 40% 98%))",
+              color: "hsl(var(--foreground, 220 30% 15%))",
+              fontSize: "0.85rem",
+              fontWeight: 500,
+              cursor: "pointer",
+              transition: "all 0.2s ease",
+              fontFamily: "inherit"
+            },
+            children: [
+              /* @__PURE__ */ jsx6(
+                Ellipsis,
+                {
+                  size: 16,
+                  style: {
+                    transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+                    transition: "transform 0.2s ease"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx6("span", { children: isOpen ? "Collapse" : `See all ${totalLines} lines` })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/CodeBlockMdx.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function getLanguage(className = "") {
+  const match = className.match(/language-(\w+)/);
+  return match ? match[1] : "text";
+}
+function resolveLanguage(preClassName, dataLanguage, children) {
+  if (typeof dataLanguage === "string" && dataLanguage.trim().length > 0) {
+    return dataLanguage.trim().toLowerCase();
+  }
+  const languageFromPre = getLanguage(preClassName ?? "");
+  if (languageFromPre !== "text") return languageFromPre;
+  if (isValidElement(children)) {
+    const childProps = children.props;
+    if (typeof childProps.className === "string") {
+      const languageFromCode = getLanguage(childProps.className);
+      if (languageFromCode !== "text") return languageFromCode;
+    }
+  }
+  return "text";
+}
+function getLanguageIcon(language) {
+  const normalized = language.toLowerCase();
+  const iconProps = { size: 14 };
+  const map = {
+    gitignore: /* @__PURE__ */ jsx7(SiGit, { ...iconProps }),
+    docker: /* @__PURE__ */ jsx7(SiDocker, { ...iconProps }),
+    dockerfile: /* @__PURE__ */ jsx7(SiDocker, { ...iconProps }),
+    nginx: /* @__PURE__ */ jsx7(SiNginx, { ...iconProps }),
+    sql: /* @__PURE__ */ jsx7(SiPostgresql, { ...iconProps }),
+    graphql: /* @__PURE__ */ jsx7(SiGraphql, { ...iconProps }),
+    yaml: /* @__PURE__ */ jsx7(SiYaml, { ...iconProps }),
+    yml: /* @__PURE__ */ jsx7(SiYaml, { ...iconProps }),
+    toml: /* @__PURE__ */ jsx7(SiToml, { ...iconProps }),
+    json: /* @__PURE__ */ jsx7(TbJson, { ...iconProps }),
+    md: /* @__PURE__ */ jsx7(SiMarkdown, { ...iconProps }),
+    markdown: /* @__PURE__ */ jsx7(SiMarkdown, { ...iconProps }),
+    bash: /* @__PURE__ */ jsx7(SiGnubash, { ...iconProps }),
+    sh: /* @__PURE__ */ jsx7(SiGnubash, { ...iconProps }),
+    shell: /* @__PURE__ */ jsx7(SiGnubash, { ...iconProps }),
+    swift: /* @__PURE__ */ jsx7(SiSwift, { ...iconProps }),
+    kotlin: /* @__PURE__ */ jsx7(SiKotlin, { ...iconProps }),
+    kt: /* @__PURE__ */ jsx7(SiKotlin, { ...iconProps }),
+    kts: /* @__PURE__ */ jsx7(SiKotlin, { ...iconProps }),
+    rb: /* @__PURE__ */ jsx7(SiRuby, { ...iconProps }),
+    ruby: /* @__PURE__ */ jsx7(SiRuby, { ...iconProps }),
+    php: /* @__PURE__ */ jsx7(SiPhp, { ...iconProps }),
+    go: /* @__PURE__ */ jsx7(SiGo, { ...iconProps }),
+    py: /* @__PURE__ */ jsx7(SiPython, { ...iconProps }),
+    python: /* @__PURE__ */ jsx7(SiPython, { ...iconProps }),
+    java: /* @__PURE__ */ jsx7(FaJava, { ...iconProps }),
+    tsx: /* @__PURE__ */ jsx7(SiReact, { ...iconProps }),
+    typescript: /* @__PURE__ */ jsx7(SiTypescript, { ...iconProps }),
+    ts: /* @__PURE__ */ jsx7(SiTypescript, { ...iconProps }),
+    jsx: /* @__PURE__ */ jsx7(SiReact, { ...iconProps }),
+    js: /* @__PURE__ */ jsx7(SiJavascript, { ...iconProps }),
+    javascript: /* @__PURE__ */ jsx7(SiJavascript, { ...iconProps }),
+    html: /* @__PURE__ */ jsx7(SiHtml5, { ...iconProps }),
+    css: /* @__PURE__ */ jsx7(SiCss, { ...iconProps }),
+    scss: /* @__PURE__ */ jsx7(SiSass, { ...iconProps }),
+    sass: /* @__PURE__ */ jsx7(SiSass, { ...iconProps }),
+    text: /* @__PURE__ */ jsx7(FaRegFileAlt, { ...iconProps }),
+    plaintext: /* @__PURE__ */ jsx7(FaRegFileAlt, { ...iconProps })
+  };
+  return map[normalized] || /* @__PURE__ */ jsx7(FaCode, { ...iconProps });
+}
+function countCodeLines(raw) {
+  let normalized = raw.replace(/\r\n/g, "\n");
+  if (normalized.startsWith("\n")) normalized = normalized.slice(1);
+  if (normalized.endsWith("\n")) normalized = normalized.slice(0, -1);
+  if (normalized.length === 0) return 0;
+  return normalized.split("\n").length;
+}
+function CodeBlock({ children, raw, ...rest }) {
+  const {
+    className,
+    "data-title": title,
+    "data-language": dataLanguage,
+    "data-expandable": isExpandable,
+    "data-expandable-lines": totalLinesStr,
+    ...props
+  } = rest;
+  const language = resolveLanguage(
+    typeof className === "string" ? className : void 0,
+    dataLanguage,
+    children
+  );
+  const totalLinesFromMeta = parseInt(totalLinesStr, 10) || 0;
+  const totalLinesFromRaw = raw ? countCodeLines(raw) : 0;
+  const totalLines = totalLinesFromRaw || totalLinesFromMeta;
+  const hasExpandableClass = typeof className === "string" && className.split(" ").includes("mdx-expandable-code");
+  const shouldExpand = isExpandable === "true" || hasExpandableClass;
+  const preProps = {
+    ...props,
+    "data-expandable": isExpandable,
+    "data-expandable-lines": totalLinesStr
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "code-block-container not-prose",
+      style: {
+        position: "relative",
+        margin: "1.5rem 0",
+        border: "1px solid hsl(var(--border-color, 210 20% 85%))",
+        overflow: "hidden",
+        fontSize: "0.875rem",
+        borderRadius: "0.75rem"
+      },
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: "code-block-header",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "0.75rem",
+              background: "hsl(var(--muted, 210 20% 92%))",
+              padding: "0.5rem 1rem",
+              borderBottom: "1px solid hsl(var(--border-color, 210 20% 85%))",
+              color: "hsl(var(--muted-foreground, 220 15% 50%))",
+              fontFamily: "monospace",
+              fontSize: "0.8rem"
+            },
+            children: [
+              /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    fontSize: "0.78rem",
+                    color: "hsl(var(--muted-foreground, 220 15% 50%))"
+                  },
+                  children: [
+                    getLanguageIcon(language),
+                    /* @__PURE__ */ jsx7("span", { children: title || language })
+                  ]
+                }
+              ),
+              raw ? /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  className: "code-block-actions",
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    marginLeft: "auto"
+                  },
+                  children: /* @__PURE__ */ jsx7(
+                    "div",
+                    {
+                      style: {
+                        color: "hsl(var(--muted-foreground, 220 15% 50%))",
+                        transition: "color 0.2s ease-in-out"
+                      },
+                      children: /* @__PURE__ */ jsx7(CopyButton, { content: raw })
+                    }
+                  )
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: "code-block-body",
+            style: {
+              overflowY: "visible",
+              backgroundColor: "hsl(var(--background, 210 40% 98%))",
+              willChange: "transform",
+              borderBottom: "none"
+            },
+            children: /* @__PURE__ */ jsx7(
+              ExpandableCode,
+              {
+                isExpandable: shouldExpand,
+                totalLines,
+                preContent: children,
+                preProps,
+                className
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/KbdMdx.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var wrapperStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "1px solid hsl(var(--border-color, 210 20% 85%))",
+  borderBottomWidth: 2,
+  borderRadius: 8,
+  background: "hsl(var(--muted, 210 20% 92%))",
+  color: "hsl(var(--foreground, 220 30% 15%))",
+  minWidth: "1.9rem",
+  height: "1.7rem",
+  padding: "0 0.45rem",
+  fontSize: "0.8rem",
+  fontWeight: 600,
+  lineHeight: 1
+};
+var aliases = {
+  cmd: "Win",
+  command: "Win",
+  ctrl: "Ctrl",
+  control: "Ctrl",
+  alt: "Alt",
+  option: "Alt",
+  shift: "Shift",
+  tab: "Tab",
+  enter: "Enter",
+  return: "Enter",
+  delete: "Del",
+  del: "Del",
+  escape: "Esc",
+  esc: "Esc",
+  space: "Space",
+  up: "\u2191",
+  down: "\u2193",
+  left: "\u2190",
+  right: "\u2192"
+};
+var macSymbols = {
+  cmd: "\u2318",
+  command: "\u2318",
+  ctrl: "\u2303",
+  control: "\u2303",
+  alt: "\u2325",
+  option: "\u2325",
+  shift: "\u21E7",
+  tab: "\u21E5",
+  enter: "\u23CE",
+  return: "\u23CE",
+  delete: "\u232B",
+  del: "\u232B",
+  escape: "\u238B",
+  esc: "\u238B",
+  space: "\u2423",
+  up: "\u2191",
+  down: "\u2193",
+  left: "\u2190",
+  right: "\u2192"
+};
+function normalize(show, type) {
+  const token = (show || "").toLowerCase();
+  const label = aliases[token] || show || "Key";
+  if (type === "mac") {
+    return macSymbols[token] || label;
+  }
+  return label;
+}
+function KbdMdx({ show, type = "window", style }) {
+  const label = normalize(show, type);
+  const isLetter = /^[a-zA-Z]$/.test(show);
+  const display = isLetter ? show.toUpperCase() : label;
+  return /* @__PURE__ */ jsx8("kbd", { style: { ...wrapperStyle, ...style }, children: display });
+}
+
+// src/components/NoteMdx.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var palette = {
+  danger: {
+    border: "hsl(var(--destructive, 0 85% 60%))",
+    bg: "hsl(var(--destructive, 0 85% 60%) / 0.16)",
+    text: "hsl(var(--foreground, 220 30% 15%))",
+    header: "hsl(var(--destructive, 0 85% 60%))",
+    content: "hsl(var(--destructive, 0 85% 60%) / 0.75)",
+    defaultIcon: "Siren"
+  },
+  warning: {
+    border: "hsl(36 100% 56%)",
+    bg: "rgba(249, 115, 22, 0.14)",
+    text: "hsl(24 100% 18%)",
+    header: "hsl(36 100% 56%)",
+    content: "hsl(36 100% 56% / 0.75)",
+    defaultIcon: "AlertTriangle"
+  },
+  success: {
+    border: "hsl(145 63% 42%)",
+    bg: "hsl(145 63% 42% / 0.16)",
+    text: "hsl(var(--foreground, 220 30% 15%))",
+    header: "hsl(145 63% 42%)",
+    content: "hsl(145 63% 42% / 0.75)",
+    defaultIcon: "CheckCircle2"
+  },
+  info: {
+    border: "hsl(var(--primary, 210 81% 56%))",
+    bg: "hsl(var(--primary, 210 81% 56%) / 0.16)",
+    text: "hsl(var(--foreground, 220 30% 15%))",
+    header: "hsl(var(--primary, 210 81% 56%))",
+    content: "hsl(var(--primary, 210 81% 56%) / 0.75)",
+    defaultIcon: "Info"
+  },
+  tip: {
+    border: "hsl(137 50% 35%)",
+    bg: "hsl(137 50% 35% / 0.16)",
+    text: "hsl(var(--foreground, 220 30% 15%))",
+    header: "hsl(137 50% 35%)",
+    content: "hsl(137 50% 35% / 0.75)",
+    defaultIcon: "Lightbulb"
+  }
+};
+function NoteMdx({
+  type = "info",
+  title,
+  icon,
+  children,
+  style,
+  className,
+  ...props
+}) {
+  const safeType = Object.hasOwn(palette, type) ? type : "info";
+  const token = palette[safeType];
+  if (!token) return null;
+  const normalizedTitle = typeof title === "string" ? title.trim() : title;
+  const resolvedIcon = resolveLucideIcon(icon || token.defaultIcon);
+  const fallbackTitle = normalizedTitle || type.charAt(0).toUpperCase() + type.slice(1);
+  return /* @__PURE__ */ jsxs5(
+    "aside",
+    {
+      role: "note",
+      className,
+      ...props,
+      style: {
+        border: "1px solid transparent",
+        borderLeft: `4px solid ${token.border}`,
+        borderRadius: 10,
+        background: token.bg,
+        color: token.text,
+        padding: "0.5rem 1rem",
+        margin: "1rem 0",
+        boxShadow: "0 1px 2px rgba(15, 23, 42, 0.08)",
+        ...style
+      },
+      children: [
+        fallbackTitle || resolvedIcon ? /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              fontWeight: 700,
+              marginBottom: "0.35rem",
+              color: token.header
+            },
+            children: [
+              resolvedIcon ? /* @__PURE__ */ jsx9(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 20,
+                    height: 20,
+                    color: token.header
+                  },
+                  children: resolvedIcon
+                }
+              ) : null,
+              /* @__PURE__ */ jsx9("span", { style: { color: token.header }, children: fallbackTitle })
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx9("div", { style: { color: token.content, lineHeight: 1.5 }, children })
+      ]
+    }
+  );
+}
+
+// src/components/ReleaseMdx.tsx
+import {
+  AlertTriangle,
+  PlusCircle,
+  RefreshCw,
+  Wrench,
+  Zap,
+  XCircle
+} from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var changeConfig = {
+  added: { label: "Added", color: "#14b8a6", icon: PlusCircle },
+  changed: { label: "Changed", color: "#f59e0b", icon: RefreshCw },
+  fixed: { label: "Fixed", color: "#ef4444", icon: Wrench },
+  improved: { label: "Improved", color: "#3b82f6", icon: Zap },
+  deprecated: { label: "Deprecated", color: "#f97316", icon: AlertTriangle },
+  removed: { label: "Removed", color: "#ec4899", icon: XCircle }
+};
+function ReleaseMdx({ version, date, title, children, style }) {
+  const formattedDate = date ? new Date(date).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  }) : void 0;
+  const displayVersion = version.startsWith("v") ? version : `v${version}`;
+  return /* @__PURE__ */ jsxs6(
+    "section",
+    {
+      style: {
+        border: "1px solid hsl(var(--border-color, 210 20% 85%))",
+        borderRadius: 12,
+        padding: "1rem",
+        margin: "1rem 0",
+        background: "hsl(var(--card, 0 0% 100%))",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: "0.6rem", alignItems: "center", marginBottom: "0.5rem" }, children: [
+          /* @__PURE__ */ jsx10("span", { style: { fontWeight: 700, color: "hsl(var(--accent, 200 100% 40%))" }, children: displayVersion }),
+          formattedDate ? /* @__PURE__ */ jsx10("span", { style: { color: "hsl(var(--muted-foreground, 220 15% 50%))" }, children: formattedDate }) : null
+        ] }),
+        /* @__PURE__ */ jsx10("h3", { style: { margin: 0 }, children: title }),
+        /* @__PURE__ */ jsx10("div", { style: { marginTop: "0.75rem" }, children })
+      ]
+    }
+  );
+}
+function ChangesMdx({ type = "changed", children }) {
+  const config = changeConfig[type] || changeConfig.changed;
+  const Icon = config.icon;
+  return /* @__PURE__ */ jsxs6("div", { style: { margin: "0.75rem 0" }, children: [
+    /* @__PURE__ */ jsxs6(
+      "span",
+      {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "0.35rem",
+          borderRadius: 999,
+          padding: "0.2rem 0.55rem",
+          fontSize: "0.8rem",
+          fontWeight: 700,
+          color: config.color,
+          background: `${config.color}1f`
+        },
+        children: [
+          /* @__PURE__ */ jsx10(Icon, { size: 13, "aria-hidden": "true" }),
+          config.label
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx10("div", { style: { marginTop: "0.45rem" }, children })
+  ] });
+}
+
+// src/components/StepperMdx.tsx
+import {
+  Children,
+  cloneElement,
+  isValidElement as isValidElement2
+} from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function StepsMdx({ children, style, className, ...props }) {
+  const items = Children.toArray(children);
+  return /* @__PURE__ */ jsxs7(
+    "ol",
+    {
+      className,
+      ...props,
+      style: {
+        listStyle: "none",
+        position: "relative",
+        margin: "1.2rem 0",
+        padding: 0,
+        display: "grid",
+        gap: 0,
+        ...style
+      },
+      children: [
+        items.map((child, index) => {
+          if (!isValidElement2(child)) {
+            return child;
+          }
+          const item = child;
+          return cloneElement(item, {
+            stepNumber: index + 1
+          });
+        }),
+        items.length > 1 ? /* @__PURE__ */ jsx11(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              left: "1.05rem",
+              top: "0.8rem",
+              bottom: "0.8rem",
+              width: 1,
+              background: "hsl(var(--border-color, 210 20% 85%))",
+              pointerEvents: "none"
+            }
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function StepMdx({ title, children, style, className, ...props }) {
+  const { stepNumber, ...liProps } = props;
+  return /* @__PURE__ */ jsxs7(
+    "li",
+    {
+      className,
+      ...liProps,
+      style: {
+        position: "relative",
+        zIndex: 1,
+        width: "100%",
+        minWidth: 0,
+        boxSizing: "border-box",
+        marginLeft: "0.25rem",
+        paddingLeft: "2.6rem",
+        paddingBottom: "1.15rem",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx11(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: stepNumber && stepNumber >= 10 ? "1.9rem" : "1.6rem",
+              height: "1.6rem",
+              borderRadius: 10,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "0.82rem",
+              fontWeight: 600,
+              color: "hsl(var(--muted-foreground, 220 15% 50%))",
+              background: "hsl(var(--muted, 210 12% 92%))",
+              border: "1px solid hsl(var(--border-color, 210 20% 85%))"
+            },
+            children: stepNumber ?? "-"
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              fontWeight: 700,
+              fontSize: "1.02rem",
+              lineHeight: 1.35,
+              marginBottom: children ? "0.55rem" : 0,
+              color: "hsl(var(--foreground, 220 30% 15%))"
+            },
+            children: title
+          }
+        ),
+        children ? /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              color: "hsl(var(--muted-foreground, 220 15% 50%))",
+              display: "flow-root",
+              width: "100%",
+              minWidth: 0,
+              maxWidth: "100%",
+              overflowX: "auto",
+              overflowY: "hidden"
+            },
+            children
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/TableMdx.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var tableShellStyle = {
+  position: "relative",
+  width: "100%",
+  overflowX: "auto",
+  overflowY: "hidden",
+  border: "1px solid hsl(var(--border-color, 210 20% 85%))",
+  borderRadius: 10,
+  margin: "1rem 0"
+};
+var cellBaseStyle = {
+  padding: "0.6rem 0.75rem",
+  verticalAlign: "middle",
+  borderBottom: "1px solid hsl(var(--border-color, 210 20% 85%))"
+};
+function TableMdx({ style, ...props }) {
+  return /* @__PURE__ */ jsx12("div", { style: { ...tableShellStyle }, children: /* @__PURE__ */ jsx12(
+    "table",
+    {
+      ...props,
+      style: {
+        width: "100%",
+        fontSize: "0.925rem",
+        borderCollapse: "collapse",
+        margin: 0,
+        ...style
+      }
+    }
+  ) });
+}
+function TableHeaderMdx(props) {
+  return /* @__PURE__ */ jsx12(
+    "thead",
+    {
+      ...props,
+      style: {
+        background: "hsl(var(--muted, 210 20% 92%))",
+        ...props.style
+      }
+    }
+  );
+}
+function TableBodyMdx(props) {
+  return /* @__PURE__ */ jsx12("tbody", { ...props });
+}
+function TableFooterMdx(props) {
+  return /* @__PURE__ */ jsx12(
+    "tfoot",
+    {
+      ...props,
+      style: {
+        background: "hsl(var(--muted, 210 20% 92%))",
+        borderTop: "1px solid hsl(var(--border-color, 210 20% 85%))",
+        ...props.style
+      }
+    }
+  );
+}
+function TableRowMdx(props) {
+  return /* @__PURE__ */ jsx12("tr", { ...props });
+}
+function TableHeadMdx(props) {
+  return /* @__PURE__ */ jsx12(
+    "th",
+    {
+      scope: props.scope ?? "col",
+      ...props,
+      style: {
+        ...cellBaseStyle,
+        textAlign: "left",
+        color: "hsl(var(--muted-foreground, 220 15% 50%))",
+        fontWeight: 600,
+        ...props.style
+      }
+    }
+  );
+}
+function TableCellMdx(props) {
+  return /* @__PURE__ */ jsx12("td", { ...props, style: { ...cellBaseStyle, ...props.style } });
+}
+
+// src/components/YoutubeMdx.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function YoutubeMdx({ videoId, title = "YouTube video" }) {
+  const src = `https://www.youtube-nocookie.com/embed/${videoId}`;
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: "100%",
+        paddingBottom: "56.25%",
+        height: 0,
+        overflow: "hidden",
+        background: "#000",
+        borderRadius: 8,
+        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.2)",
+        margin: "1rem 0"
+      },
+      children: /* @__PURE__ */ jsx13(
+        "iframe",
+        {
+          src,
+          title,
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+          allowFullScreen: true,
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            border: "none",
+            borderRadius: 8
+          }
+        }
+      )
+    }
+  );
+}
+
+export {
+  resolveLucideIcon,
+  LinkMdx,
+  ButtonMdx,
+  CardsMdx,
+  CodeBlock,
+  KbdMdx,
+  NoteMdx,
+  ReleaseMdx,
+  ChangesMdx,
+  StepsMdx,
+  StepMdx,
+  TableMdx,
+  TableHeaderMdx,
+  TableBodyMdx,
+  TableFooterMdx,
+  TableRowMdx,
+  TableHeadMdx,
+  TableCellMdx,
+  YoutubeMdx
+};
+//# sourceMappingURL=chunk-PSDC53TU.js.map