@docubook/mdx-content 3.4.0 → 3.4.2

package/dist/index.js

@@ -1,20 +1,1246 @@
-export { AccordionMdx } from "./components/AccordionMdx";
-export { AccordionsMdx } from "./components/AccordionsMdx";
-export { ButtonMdx } from "./components/ButtonMdx";
-export { CardMdx } from "./components/CardMdx";
-export { CardsMdx } from "./components/CardsMdx";
-export { CodeBlock } from "./components/CodeBlockMdx";
-export { FileMdx, FilesMdx, FolderMdx } from "./components/FileTreeMdx";
-export { ImageMdx } from "./components/ImageMdx";
-export { KbdMdx } from "./components/KbdMdx";
-export { LinkMdx } from "./components/LinkMdx";
-export { MermaidMdx } from "./components/MermaidMdx";
-export { NoteMdx } from "./components/NoteMdx";
-export { ChangesMdx, ReleaseMdx } from "./components/ReleaseMdx";
-export { StepMdx, StepsMdx } from "./components/StepperMdx";
-export { TableMdx, TableHeaderMdx, TableBodyMdx, TableFooterMdx, TableRowMdx, TableHeadMdx, TableCellMdx, } from "./components/TableMdx";
-export { TabMdx, TabsMdx } from "./components/TabsMdx";
-export { TooltipMdx } from "./components/TooltipMdx";
-export { YoutubeMdx } from "./components/YoutubeMdx";
-export { createMdxComponents } from "./registry";
+import {
+  ButtonMdx,
+  CardsMdx,
+  ChangesMdx,
+  CodeBlock,
+  KbdMdx,
+  LinkMdx,
+  NoteMdx,
+  ReleaseMdx,
+  StepMdx,
+  StepsMdx,
+  TableBodyMdx,
+  TableCellMdx,
+  TableFooterMdx,
+  TableHeadMdx,
+  TableHeaderMdx,
+  TableMdx,
+  TableRowMdx,
+  YoutubeMdx,
+  resolveLucideIcon
+} from "./chunk-PSDC53TU.js";
+
+// src/components/AccordionMdx.tsx
+import { useContext, useId, useState } from "react";
+
+// src/utils/AccordionGroupContext.tsx
+import { createContext } from "react";
+var AccordionGroupContext = createContext(null);
+
+// src/components/AccordionMdx.tsx
+import { ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AccordionMdx({ title, icon, className, children }) {
+  const groupContext = useContext(AccordionGroupContext);
+  const [localOpen, setLocalOpen] = useState(false);
+  const panelId = useId();
+  const triggerId = `${panelId}-trigger`;
+  const isGroup = groupContext?.inGroup === true;
+  const isOpen = isGroup ? groupContext?.openTitle === title : localOpen;
+  const resolvedIcon = resolveLucideIcon(icon);
+  function onToggle() {
+    if (isGroup && groupContext) {
+      groupContext.setOpenTitle(groupContext.openTitle === title ? null : title);
+      return;
+    }
+    setLocalOpen((prev) => !prev);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `mdx-accordion ${isGroup ? "mdx-accordion-group-item" : ""} ${className ?? ""}`,
+      style: {
+        border: "1px solid hsl(var(--border-color, 210 20% 85%))",
+        borderRadius: 10,
+        overflow: "hidden",
+        background: "hsl(var(--card, 0 0% 100%))"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "mdx-accordion-header",
+            type: "button",
+            onClick: onToggle,
+            "aria-expanded": isOpen,
+            "aria-controls": panelId,
+            id: triggerId,
+            onKeyDown: (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onToggle();
+              }
+            },
+            style: {
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              gap: "0.5rem",
+              textAlign: "left",
+              border: 0,
+              cursor: "pointer",
+              background: "hsl(var(--muted, 210 20% 92%))",
+              color: "hsl(var(--foreground, 220 30% 15%))",
+              fontWeight: 600,
+              padding: "0.95rem 1rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                ChevronRight,
+                {
+                  className: "mdx-accordion-chevron",
+                  "aria-hidden": "true",
+                  size: 16,
+                  style: {
+                    transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
+                    transition: "transform 0.2s ease",
+                    flexShrink: 0,
+                    color: "hsl(var(--foreground, 220 30% 15%) / 0.74)",
+                    marginRight: "0.4rem"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "0.5rem", flex: 1 }, children: [
+                resolvedIcon ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      minWidth: "1.45rem",
+                      height: "1.45rem",
+                      color: "hsl(var(--foreground, 220 30% 15%))"
+                    },
+                    children: resolvedIcon
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx("span", { children: title })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: panelId,
+            role: "region",
+            "aria-labelledby": triggerId,
+            hidden: !isOpen,
+            className: "mdx-accordion-content",
+            style: {
+              padding: "0.75rem 0.8rem",
+              background: "hsl(var(--card, 0 0% 100%))",
+              color: "hsl(var(--card-foreground, 220 30% 15%))"
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/AccordionsMdx.tsx
+import { useMemo, useState as useState2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function AccordionsMdx({ children }) {
+  const [openTitle, setOpenTitle] = useState2(null);
+  const value = useMemo(() => ({ inGroup: true, openTitle, setOpenTitle }), [openTitle]);
+  return /* @__PURE__ */ jsx2(AccordionGroupContext.Provider, { value, children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "mdx-accordion-group",
+      style: {
+        margin: "1rem 0",
+        display: "grid",
+        gap: "0.85rem"
+      },
+      children
+    }
+  ) });
+}
+
+// src/components/CardMdx.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var baseStyle = {
+  display: "block",
+  border: "1px solid hsl(var(--border-color, 210 20% 85%))",
+  borderRadius: 14,
+  background: "hsl(var(--card, 0 0% 100%))",
+  color: "hsl(var(--foreground, 220 30% 15%))",
+  textDecoration: "none",
+  padding: "1rem",
+  minHeight: 120,
+  boxShadow: "0 0 0 rgba(0,0,0,0)",
+  transition: "border-color 0.2s ease, box-shadow 0.24s ease, transform 0.24s ease, color 0.2s ease",
+  overflow: "hidden"
+};
+function CardMdx({
+  title,
+  icon,
+  href,
+  horizontal,
+  children,
+  style,
+  className,
+  __LinkComponent,
+  ...props
+}) {
+  const resolvedIcon = resolveLucideIcon(icon);
+  const LinkComponent = __LinkComponent ?? LinkMdx;
+  const content = /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: horizontal ? "auto 1fr" : "1fr",
+        gap: horizontal ? "0.75rem" : "0.4rem",
+        alignItems: horizontal ? "flex-start" : "flex-start"
+      },
+      children: [
+        resolvedIcon ? /* @__PURE__ */ jsx3(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-card-icon": "",
+            style: {
+              display: "block",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "1rem",
+              height: "1rem",
+              color: "hsl(var(--primary, 210 81% 56%))",
+              fontSize: "2rem",
+              transition: "transform 0.2s ease, color 0.2s ease"
+            },
+            children: resolvedIcon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridAutoRows: "min-content", gap: 0 }, children: [
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                fontWeight: 700,
+                fontSize: "1.22rem",
+                lineHeight: 1.3,
+                color: "hsl(var(--foreground, 220 30% 15%))"
+              },
+              children: title
+            }
+          ),
+          children ? /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                color: "hsl(var(--muted-foreground, 220 15% 50%))",
+                fontSize: "0.96rem",
+                lineHeight: 1.42,
+                marginTop: "-0.5rem"
+              },
+              children
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+  const combinedStyle = { ...baseStyle, ...style };
+  if (href) {
+    return /* @__PURE__ */ jsx3(
+      LinkComponent,
+      {
+        href,
+        "data-card-hover": "",
+        "data-card-link": "",
+        style: combinedStyle,
+        ...className ? { className } : {},
+        ...props,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3("div", { style: combinedStyle, ...className ? { className } : {}, ...props, children: content });
+}
+
+// src/components/FileTreeMdx.tsx
+import React, {
+  useId as useId2,
+  useState as useState3
+} from "react";
+import { ChevronRight as ChevronRight2, File as FileIcon, Folder as FolderIcon, FolderOpen } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function FilesMdx({ children, style, className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className,
+      ...props,
+      role: "tree",
+      "aria-label": props["aria-label"] ?? "File tree",
+      style: {
+        border: "1px solid hsl(var(--border-color, 210 20% 85%))",
+        borderRadius: 12,
+        padding: "0.5rem",
+        margin: "1rem 0",
+        background: "hsla(var(--card, 0 0% 100%) / 0.9)",
+        backdropFilter: "blur(8px)",
+        boxShadow: "0 10px 20px rgba(0,0,0,0.05)",
+        ...style
+      },
+      children
+    }
+  );
+}
+function FolderMdx({ name, children, style, className, ...props }) {
+  const [isOpen, setIsOpen] = useState3(true);
+  const [isHovered, setIsHovered] = useState3(false);
+  const [isFocused, setIsFocused] = useState3(false);
+  const hasChildren = React.Children.count(children) > 0;
+  const groupId = useId2();
+  const handleKeyDown = (event) => {
+    if (!hasChildren) {
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      setIsOpen(true);
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      setIsOpen(false);
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setIsOpen((prev) => !prev);
+    }
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className,
+      ...props,
+      role: "treeitem",
+      "aria-expanded": hasChildren ? isOpen : void 0,
+      style: { marginLeft: "0.35rem", ...style },
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            type: "button",
+            className: "flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors duration-150",
+            onClick: () => hasChildren && setIsOpen((prev) => !prev),
+            onMouseEnter: () => setIsHovered(true),
+            onMouseLeave: () => setIsHovered(false),
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            onKeyDown: handleKeyDown,
+            "aria-label": `${isOpen ? "Collapse" : "Expand"} folder ${name}`,
+            "aria-expanded": hasChildren ? isOpen : void 0,
+            "aria-controls": hasChildren ? groupId : void 0,
+            style: {
+              cursor: hasChildren ? "pointer" : "default",
+              width: "100%",
+              border: "none",
+              textAlign: "left",
+              background: isHovered || isFocused ? "hsla(var(--muted, 210 20% 92%) / 0.45)" : "transparent"
+            },
+            children: [
+              hasChildren ? /* @__PURE__ */ jsx4(
+                ChevronRight2,
+                {
+                  className: "h-3.5 w-3.5 transition-transform duration-200",
+                  style: {
+                    transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
+                    color: isHovered || isFocused ? "hsl(var(--primary, 210 81% 56%))" : "hsl(var(--muted-foreground, 220 15% 50%))"
+                  }
+                }
+              ) : /* @__PURE__ */ jsx4("div", { className: "w-3.5" }),
+              isOpen ? /* @__PURE__ */ jsx4(
+                FolderOpen,
+                {
+                  className: "h-4 w-4",
+                  style: {
+                    color: isHovered || isFocused ? "hsl(var(--primary, 210 81% 56%))" : "hsl(var(--muted-foreground, 220 15% 50%))"
+                  }
+                }
+              ) : /* @__PURE__ */ jsx4(
+                FolderIcon,
+                {
+                  className: "h-4 w-4",
+                  style: {
+                    color: isHovered || isFocused ? "hsl(var(--primary, 210 81% 56%))" : "hsl(var(--muted-foreground, 220 15% 50%))"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  style: {
+                    fontWeight: 600,
+                    color: isHovered || isFocused ? "hsl(var(--primary, 210 81% 56%))" : "hsl(var(--foreground, 220 30% 15%))"
+                  },
+                  children: name
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && hasChildren && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            id: groupId,
+            role: "group",
+            style: {
+              marginLeft: "1rem",
+              borderLeft: "2px solid hsl(var(--border-color, 210 20% 85%))",
+              paddingLeft: "0.6rem"
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function FileMdx({ name, style, className, ...props }) {
+  const [isHovered, setIsHovered] = useState3(false);
+  const [isFocused, setIsFocused] = useState3(false);
+  const fileExtension = name.split(".").pop()?.toUpperCase();
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className,
+      ...props,
+      role: "treeitem",
+      tabIndex: 0,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "0.5rem",
+        padding: "0.33rem 0.5rem",
+        borderRadius: "0.45rem",
+        userSelect: "none",
+        background: isHovered || isFocused ? "hsla(var(--muted, 210 20% 92%) / 0.35)" : "transparent",
+        ...style
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false),
+      children: [
+        /* @__PURE__ */ jsx4(
+          FileIcon,
+          {
+            className: "h-3.5 w-3.5",
+            style: {
+              color: isHovered || isFocused ? "hsl(var(--primary, 210 81% 56%))" : "hsl(var(--muted-foreground, 220 15% 50%))"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "span",
+          {
+            style: {
+              fontFamily: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+              fontSize: "0.9rem",
+              color: "hsl(var(--foreground, 220 30% 15%))"
+            },
+            children: name
+          }
+        ),
+        (isHovered || isFocused) && fileExtension && /* @__PURE__ */ jsx4(
+          "span",
+          {
+            style: {
+              marginLeft: "auto",
+              fontSize: "0.7rem",
+              color: "hsl(var(--muted-foreground, 220 15% 50%))"
+            },
+            children: fileExtension
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ImageMdx.tsx
+import { createPortal } from "react-dom";
+import { useEffect, useId as useId3, useRef, useState as useState4 } from "react";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ImageMdx({
+  src,
+  alt = "image",
+  width = 800,
+  height = 350,
+  zoom = true,
+  style,
+  ImageComponent,
+  ...props
+}) {
+  const Image = ImageComponent ?? "img";
+  const [isOpen, setIsOpen] = useState4(false);
+  const scrollYRef = useRef(0);
+  const closeButtonRef = useRef(null);
+  const dialogId = useId3();
+  useEffect(() => {
+    if (!isOpen) return;
+    scrollYRef.current = window.scrollY;
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollYRef.current}px`;
+    document.body.style.width = "100%";
+    closeButtonRef.current?.focus();
+    const onEsc = (e) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    const onFocusTrap = (e) => {
+      if (e.key !== "Tab") return;
+      const dialog = document.getElementById(dialogId);
+      const focusable = dialog?.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (!focusable || focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    };
+    window.addEventListener("keydown", onEsc);
+    window.addEventListener("keydown", onFocusTrap);
+    return () => {
+      document.body.style.position = "";
+      document.body.style.top = "";
+      document.body.style.width = "";
+      window.scrollTo(0, scrollYRef.current);
+      window.removeEventListener("keydown", onEsc);
+      window.removeEventListener("keydown", onFocusTrap);
+    };
+  }, [dialogId, isOpen]);
+  if (!src) return null;
+  const canZoom = zoom;
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: () => canZoom && setIsOpen(true),
+        "aria-label": canZoom ? "Zoom image" : "Image",
+        style: {
+          position: "relative",
+          width: "100%",
+          border: "none",
+          background: "transparent",
+          padding: 0,
+          margin: "1rem 0",
+          cursor: canZoom ? "zoom-in" : "default"
+        },
+        children: /* @__PURE__ */ jsx5(
+          Image,
+          {
+            src,
+            alt,
+            width: typeof width === "number" ? width : parseInt(width, 10),
+            height: typeof height === "number" ? height : parseInt(height, 10),
+            style: {
+              width: "100%",
+              height: "auto",
+              borderRadius: 10,
+              objectFit: "contain",
+              ...style
+            },
+            ...props
+          }
+        )
+      }
+    ),
+    canZoom && isOpen ? /* @__PURE__ */ jsx5(Portal, { children: /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        id: dialogId,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Image preview",
+        onClick: () => setIsOpen(false),
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 99999,
+          background: "rgba(0,0,0,0.88)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "1rem"
+        },
+        children: [
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              ref: closeButtonRef,
+              type: "button",
+              "aria-label": "Close image preview",
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsOpen(false);
+              },
+              style: {
+                position: "absolute",
+                top: 16,
+                right: 16,
+                border: "1px solid rgba(255,255,255,0.24)",
+                borderRadius: 8,
+                background: "rgba(0,0,0,0.45)",
+                color: "#fff",
+                padding: "0.4rem 0.55rem",
+                cursor: "pointer"
+              },
+              children: "Close"
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              onClick: (e) => e.stopPropagation(),
+              style: {
+                maxWidth: "92vw",
+                maxHeight: "90vh",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsx5(
+                Image,
+                {
+                  src,
+                  alt,
+                  width: 1920,
+                  height: 1080,
+                  style: {
+                    width: "auto",
+                    height: "auto",
+                    maxWidth: "92vw",
+                    maxHeight: "90vh",
+                    objectFit: "contain",
+                    borderRadius: 10
+                  }
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) }) : null
+  ] });
+}
+function Portal({ children }) {
+  if (typeof window === "undefined") return null;
+  return createPortal(children, document.body);
+}
+
+// src/components/MermaidMdx.tsx
+import {
+  useId as useId4,
+  useRef as useRef2,
+  useEffect as useEffect2,
+  useState as useState5
+} from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var mermaidPromise = null;
+function getTheme() {
+  return document.documentElement.classList.contains("dark") ? "dark" : "default";
+}
+var PAN_STEP = 50;
+var ZOOM_STEP = 1.2;
+var MIN_SCALE = 0.4;
+var MAX_SCALE = 4;
+var clampScale = (scale) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale));
+var controlButtonStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 28,
+  height: 28,
+  padding: 0,
+  border: "1px solid rgba(127,127,127,0.35)",
+  borderRadius: 6,
+  background: "rgba(127,127,127,0.12)",
+  color: "currentcolor",
+  cursor: "pointer"
+};
+function ControlButton({
+  label,
+  onClick,
+  cell,
+  children
+}) {
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      onClick,
+      style: { ...controlButtonStyle, gridColumn: cell.col, gridRow: cell.row },
+      children: /* @__PURE__ */ jsx6(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          children
+        }
+      )
+    }
+  );
+}
+function MermaidMdx({ chart, id, className, panZoom = true }) {
+  const generatedId = useId4();
+  const domId = id ?? `mermaid-${generatedId.replace(/[:.]/g, "-")}`;
+  const ref = useRef2(null);
+  const chartRef = useRef2(chart);
+  const mermaidRef = useRef2(null);
+  const [error, setError] = useState5(null);
+  const [rendered, setRendered] = useState5(false);
+  const [view, setView] = useState5({ x: 0, y: 0, scale: 1 });
+  const [fullscreen, setFullscreen] = useState5(false);
+  chartRef.current = chart;
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    if (!chart) return;
+    let cancelled = false;
+    let lazyObserver = null;
+    let syncObserver = null;
+    let themeTimer = null;
+    let lastTheme = getTheme();
+    let runChain = Promise.resolve();
+    function enqueueRun(run) {
+      const next = runChain.then(() => {
+        if (cancelled || !ref.current?.isConnected) return;
+        return run();
+      });
+      runChain = next.catch(() => {
+      });
+      return next;
+    }
+    async function init() {
+      try {
+        if (!mermaidPromise) {
+          mermaidPromise = import("mermaid");
+        }
+        const mod = await mermaidPromise;
+        const mermaid = mermaidRef.current = mod.default;
+        mermaid.initialize({ startOnLoad: false, theme: getTheme() });
+        try {
+          await mermaid.parse(chart);
+        } catch {
+          if (!cancelled) setError("Invalid Mermaid syntax");
+          return;
+        }
+        if (cancelled || !ref.current) return;
+        lazyObserver = new IntersectionObserver(
+          ([entry]) => {
+            if (!entry.isIntersecting || cancelled || !ref.current) return;
+            enqueueRun(() => {
+              const node = ref.current;
+              if (!node) return Promise.resolve();
+              return mermaid.run({ nodes: [node] });
+            }).then(() => {
+              if (!cancelled) setRendered(true);
+            }).catch(() => {
+              if (!cancelled) setError("Failed to render diagram");
+            });
+            lazyObserver?.disconnect();
+          },
+          { rootMargin: "200px" }
+        );
+        lazyObserver.observe(ref.current);
+      } catch {
+        if (!cancelled) setError("Failed to load Mermaid renderer");
+      }
+    }
+    init();
+    syncObserver = new MutationObserver(() => {
+      if (themeTimer) clearTimeout(themeTimer);
+      themeTimer = setTimeout(() => {
+        if (cancelled || !mermaidRef.current || !ref.current) return;
+        if (getTheme() === lastTheme) return;
+        enqueueRun(() => {
+          const mermaid = mermaidRef.current;
+          const node = ref.current;
+          if (!mermaid || !node) return Promise.resolve();
+          lastTheme = getTheme();
+          node.textContent = chartRef.current;
+          node.removeAttribute("data-processed");
+          mermaid.initialize({ startOnLoad: false, theme: lastTheme });
+          return mermaid.run({ nodes: [node] });
+        }).catch((e) => {
+          console.warn("[mermaid] diagram render error:", e);
+        });
+      }, 200);
+    });
+    syncObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    return () => {
+      cancelled = true;
+      if (themeTimer) clearTimeout(themeTimer);
+      lazyObserver?.disconnect();
+      syncObserver?.disconnect();
+    };
+  }, []);
+  useEffect2(() => {
+    if (!fullscreen) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [fullscreen]);
+  if (!chart) return null;
+  const pan = (dx, dy) => setView((v) => ({ ...v, x: v.x + dx, y: v.y + dy }));
+  const zoom = (factor) => setView((v) => ({ ...v, scale: clampScale(v.scale * factor) }));
+  const resetView = () => setView({ x: 0, y: 0, scale: 1 });
+  const controlsActive = panZoom && rendered;
+  const handleKeyDown = (e) => {
+    if (!controlsActive || e.ctrlKey || e.metaKey || e.altKey) return;
+    const actions = {
+      ArrowUp: () => pan(0, -PAN_STEP),
+      ArrowDown: () => pan(0, PAN_STEP),
+      ArrowLeft: () => pan(-PAN_STEP, 0),
+      ArrowRight: () => pan(PAN_STEP, 0),
+      "+": () => zoom(ZOOM_STEP),
+      "=": () => zoom(ZOOM_STEP),
+      "-": () => zoom(1 / ZOOM_STEP),
+      "0": resetView,
+      ...fullscreen ? { Escape: () => setFullscreen(false) } : {}
+    };
+    const action = actions[e.key];
+    if (!action) return;
+    e.preventDefault();
+    action();
+  };
+  if (error) {
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className,
+        style: {
+          border: "1px solid hsl(var(--destructive, 0 85% 60%))",
+          borderRadius: 8,
+          padding: "0.75rem 1rem",
+          margin: "1em 0"
+        },
+        children: [
+          /* @__PURE__ */ jsx6(
+            "p",
+            {
+              style: {
+                color: "hsl(var(--destructive, 0 85% 60%))",
+                fontWeight: 600,
+                marginBottom: 8,
+                fontSize: "0.875rem"
+              },
+              children: "\u26A0\uFE0F Diagram rendering error"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "pre",
+            {
+              style: {
+                fontSize: "0.875rem",
+                whiteSpace: "pre-wrap",
+                margin: 0
+              },
+              children: chart
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: "max-w-full",
+      tabIndex: controlsActive ? 0 : void 0,
+      role: controlsActive ? "group" : void 0,
+      "aria-label": controlsActive ? "Mermaid diagram. Use arrow keys to pan, + and - to zoom, 0 to reset." : void 0,
+      onKeyDown: handleKeyDown,
+      style: {
+        ...fullscreen ? {
+          position: "fixed",
+          inset: 0,
+          zIndex: 50,
+          background: "hsl(var(--background, 0 0% 100%))",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        } : { position: "relative" },
+        ...controlsActive ? { overflow: "hidden" } : { overflowX: "auto" }
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            style: controlsActive ? {
+              transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})`,
+              transformOrigin: "center center",
+              transition: "transform 150ms ease"
+            } : void 0,
+            children: /* @__PURE__ */ jsx6(
+              "pre",
+              {
+                ref,
+                id: domId,
+                className: `mermaid not-prose${className ? ` ${className}` : ""}`,
+                style: { margin: "1em auto", width: "fit-content", maxWidth: "100%" },
+                children: chart
+              }
+            )
+          }
+        ),
+        controlsActive ? /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            role: "group",
+            "aria-label": "Pan and zoom controls",
+            style: {
+              position: "absolute",
+              bottom: 8,
+              right: 8,
+              display: "grid",
+              gridTemplateColumns: "repeat(3, 28px)",
+              gap: 4
+            },
+            children: [
+              /* @__PURE__ */ jsx6(
+                ControlButton,
+                {
+                  label: fullscreen ? "Exit full screen" : "Enter full screen",
+                  onClick: () => setFullscreen((f) => !f),
+                  cell: { col: 1, row: 1 },
+                  children: fullscreen ? /* @__PURE__ */ jsx6("path", { d: "M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3" }) : /* @__PURE__ */ jsx6("path", { d: "M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3" })
+                }
+              ),
+              /* @__PURE__ */ jsx6(ControlButton, { label: "Pan up", onClick: () => pan(0, -PAN_STEP), cell: { col: 2, row: 1 }, children: /* @__PURE__ */ jsx6("path", { d: "m18 15-6-6-6 6" }) }),
+              /* @__PURE__ */ jsxs5(ControlButton, { label: "Zoom in", onClick: () => zoom(ZOOM_STEP), cell: { col: 3, row: 1 }, children: [
+                /* @__PURE__ */ jsx6("circle", { cx: "11", cy: "11", r: "7" }),
+                /* @__PURE__ */ jsx6("path", { d: "m21 21-4-4M8 11h6M11 8v6" })
+              ] }),
+              /* @__PURE__ */ jsx6(
+                ControlButton,
+                {
+                  label: "Pan left",
+                  onClick: () => pan(-PAN_STEP, 0),
+                  cell: { col: 1, row: 2 },
+                  children: /* @__PURE__ */ jsx6("path", { d: "m15 18-6-6 6-6" })
+                }
+              ),
+              /* @__PURE__ */ jsxs5(ControlButton, { label: "Reset view", onClick: resetView, cell: { col: 2, row: 2 }, children: [
+                /* @__PURE__ */ jsx6("path", { d: "M3 12a9 9 0 1 0 2.6-6.3L3 8" }),
+                /* @__PURE__ */ jsx6("path", { d: "M3 3v5h5" })
+              ] }),
+              /* @__PURE__ */ jsx6(
+                ControlButton,
+                {
+                  label: "Pan right",
+                  onClick: () => pan(PAN_STEP, 0),
+                  cell: { col: 3, row: 2 },
+                  children: /* @__PURE__ */ jsx6("path", { d: "m9 18 6-6-6-6" })
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                ControlButton,
+                {
+                  label: "Pan down",
+                  onClick: () => pan(0, PAN_STEP),
+                  cell: { col: 2, row: 3 },
+                  children: /* @__PURE__ */ jsx6("path", { d: "m6 9 6 6 6-6" })
+                }
+              ),
+              /* @__PURE__ */ jsxs5(
+                ControlButton,
+                {
+                  label: "Zoom out",
+                  onClick: () => zoom(1 / ZOOM_STEP),
+                  cell: { col: 3, row: 3 },
+                  children: [
+                    /* @__PURE__ */ jsx6("circle", { cx: "11", cy: "11", r: "7" }),
+                    /* @__PURE__ */ jsx6("path", { d: "m21 21-4-4M8 11h6" })
+                  ]
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/TabsMdx.tsx
+import {
+  Children,
+  isValidElement,
+  useId as useId5,
+  useState as useState6
+} from "react";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function TabMdx({ children }) {
+  return /* @__PURE__ */ jsx7(Fragment2, { children });
+}
+function titleToValue(title) {
+  return title.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-_]/g, "");
+}
+function TabsMdx({ className, children }) {
+  const id = useId5();
+  const childArray = Children.toArray(children);
+  const tabItems = childArray.filter(
+    (child) => isValidElement(child) && typeof child.props.title === "string"
+  ).map((child, index) => {
+    const title = child.props.title;
+    const fallback = `tab-${index + 1}`;
+    const slug = titleToValue(title) || fallback;
+    return {
+      value: `${slug}-${index + 1}`,
+      title,
+      children: child.props.children
+    };
+  });
+  const [activeValue, setActiveValue] = useState6(tabItems[0]?.value ?? "");
+  const activeItem = tabItems.find((item) => item.value === activeValue) ?? tabItems[0];
+  return /* @__PURE__ */ jsxs6("div", { className, style: { margin: "1rem 0" }, children: [
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        role: "tablist",
+        "aria-orientation": "horizontal",
+        style: {
+          display: "flex",
+          flexWrap: "nowrap",
+          gap: "0.75rem",
+          alignItems: "center",
+          overflowX: "auto",
+          borderBottom: "1px solid hsl(var(--border-color, 210 20% 85%))"
+        },
+        children: tabItems.map((item) => {
+          const active = item.value === activeItem?.value;
+          const triggerId = `${id}-tab-${item.value}`;
+          const panelId = `${id}-panel-${item.value}`;
+          return /* @__PURE__ */ jsx7(
+            "button",
+            {
+              id: triggerId,
+              type: "button",
+              role: "tab",
+              "aria-selected": active,
+              "aria-controls": panelId,
+              tabIndex: active ? 0 : -1,
+              onClick: () => setActiveValue(item.value),
+              style: {
+                border: "none",
+                borderBottom: active ? "2px solid hsl(var(--primary, 210 81% 56%))" : "2px solid transparent",
+                background: "transparent",
+                color: active ? "hsl(var(--primary, 210 81% 56%))" : "hsl(var(--foreground, 220 30% 15%))",
+                fontSize: "0.875rem",
+                fontWeight: 600,
+                lineHeight: 1.2,
+                padding: "0.7rem 0.15rem",
+                cursor: "pointer",
+                whiteSpace: "nowrap"
+              },
+              children: item.title
+            },
+            item.value
+          );
+        })
+      }
+    ),
+    tabItems.map((item) => {
+      const active = item.value === activeItem?.value;
+      const triggerId = `${id}-tab-${item.value}`;
+      const panelId = `${id}-panel-${item.value}`;
+      return /* @__PURE__ */ jsx7(
+        "div",
+        {
+          role: "tabpanel",
+          id: panelId,
+          "aria-labelledby": triggerId,
+          hidden: !active,
+          tabIndex: 0,
+          style: {
+            marginTop: "1rem"
+          },
+          children: item.children
+        },
+        item.value
+      );
+    })
+  ] });
+}
+
+// src/components/TooltipMdx.tsx
+import { useId as useId6, useState as useState7 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function TooltipMdx({
+  text,
+  tip,
+  side = "top",
+  style,
+  className,
+  ...props
+}) {
+  const [open, setOpen] = useState7(false);
+  const id = useId6();
+  const tooltipContent = tip ?? "";
+  const triggerContent = text ?? "?";
+  const floatingPosition = side === "bottom" ? { top: "calc(100% + 8px)" } : { bottom: "calc(100% + 8px)" };
+  return /* @__PURE__ */ jsxs7(
+    "span",
+    {
+      className,
+      ...props,
+      "data-tooltip": typeof tooltipContent === "string" ? tooltipContent : "",
+      "data-tooltip-side": side,
+      style: { position: "relative", display: "inline-block", ...style },
+      onMouseEnter: () => setOpen(true),
+      onMouseLeave: () => setOpen(false),
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      children: [
+        /* @__PURE__ */ jsx8(
+          "span",
+          {
+            tabIndex: 0,
+            "aria-describedby": id,
+            style: {
+              cursor: "help",
+              color: "hsl(var(--primary, 210 81% 56%))",
+              textDecorationLine: "underline",
+              textDecorationStyle: "dotted",
+              textDecorationColor: "hsl(var(--primary, 210 81% 56%))",
+              textUnderlineOffset: "0.18em"
+            },
+            onKeyDown: (event) => {
+              if (event.key === "Escape") {
+                setOpen(false);
+              }
+            },
+            children: triggerContent
+          }
+        ),
+        open && tooltipContent ? /* @__PURE__ */ jsx8(
+          "span",
+          {
+            id,
+            role: "tooltip",
+            style: {
+              position: "absolute",
+              left: "50%",
+              transform: "translateX(-50%)",
+              ...floatingPosition,
+              border: "1px solid hsl(var(--border-color, 210 20% 85%))",
+              background: "hsl(var(--card, 0 0% 100%))",
+              color: "hsl(var(--foreground, 220 30% 15%))",
+              borderRadius: 8,
+              padding: "0.35rem 0.5rem",
+              fontSize: "0.78rem",
+              whiteSpace: "nowrap",
+              zIndex: 20
+            },
+            children: tooltipContent
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/registry/index.ts
+function createMdxComponents(customComponents = {}) {
+  return {
+    Tabs: TabsMdx,
+    Tab: TabMdx,
+    table: TableMdx,
+    thead: TableHeaderMdx,
+    tbody: TableBodyMdx,
+    tfoot: TableFooterMdx,
+    tr: TableRowMdx,
+    th: TableHeadMdx,
+    td: TableCellMdx,
+    pre: CodeBlock,
+    a: LinkMdx,
+    Link: LinkMdx,
+    Card: CardMdx,
+    Button: ButtonMdx,
+    Note: NoteMdx,
+    Steps: StepsMdx,
+    Step: StepMdx,
+    Accordion: AccordionMdx,
+    Accordions: AccordionsMdx,
+    Cards: CardsMdx,
+    Kbd: KbdMdx,
+    Release: ReleaseMdx,
+    Changes: ChangesMdx,
+    File: FileMdx,
+    Files: FilesMdx,
+    Folder: FolderMdx,
+    Image: ImageMdx,
+    img: ImageMdx,
+    Youtube: YoutubeMdx,
+    Tooltip: TooltipMdx,
+    Mermaid: MermaidMdx,
+    ...customComponents
+  };
+}
+export {
+  AccordionMdx,
+  AccordionsMdx,
+  ButtonMdx,
+  CardMdx,
+  CardsMdx,
+  ChangesMdx,
+  CodeBlock,
+  FileMdx,
+  FilesMdx,
+  FolderMdx,
+  ImageMdx,
+  KbdMdx,
+  LinkMdx,
+  MermaidMdx,
+  NoteMdx,
+  ReleaseMdx,
+  StepMdx,
+  StepsMdx,
+  TabMdx,
+  TableBodyMdx,
+  TableCellMdx,
+  TableFooterMdx,
+  TableHeadMdx,
+  TableHeaderMdx,
+  TableMdx,
+  TableRowMdx,
+  TabsMdx,
+  TooltipMdx,
+  YoutubeMdx,
+  createMdxComponents
+};
 //# sourceMappingURL=index.js.map