@mintlify/msft-sdk 1.1.10 → 1.1.12

package/dist/components/content-components/image.js

@@ -0,0 +1,80 @@
+import { jsxs as d, Fragment as u, jsx as l } from "react/jsx-runtime";
+import { useState as f, useRef as o, useEffect as r } from "react";
+import { cn as v } from "../../utils/cn.js";
+function w({ isOpen: e, onClose: n, src: i, alt: m }) {
+  const c = o(null), a = o(null);
+  return r(() => {
+    var t;
+    return e ? (a.current = document.activeElement, document.body.style.overflow = "hidden") : (document.body.style.overflow = "unset", (t = a.current) == null || t.focus()), () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [e]), r(() => {
+    const t = (s) => {
+      s.key === "Escape" && n();
+    };
+    return e && window.addEventListener("keydown", t), () => {
+      window.removeEventListener("keydown", t);
+    };
+  }, [e, n]), e ? /* @__PURE__ */ l(
+    "div",
+    {
+      className: "mint:fixed mint:inset-0 mint:flex mint:items-center mint:justify-center mint:p-4 mint:bg-black/80 mint:backdrop-blur-sm",
+      onClick: n,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Expanded image view",
+      style: { zIndex: 9999 },
+      children: /* @__PURE__ */ l(
+        "div",
+        {
+          ref: c,
+          className: "mint:relative mint:max-w-[95vw] mint:max-h-[95vh] mint:flex mint:items-center mint:justify-center",
+          onClick: (t) => t.stopPropagation(),
+          children: /* @__PURE__ */ l(
+            "img",
+            {
+              src: i,
+              alt: m,
+              className: "mint:max-w-full mint:max-h-[95vh] mint:object-contain mint:rounded-lg"
+            }
+          )
+        }
+      )
+    }
+  ) : null;
+}
+function g(e) {
+  const [n, i] = f(!1);
+  return /* @__PURE__ */ d(u, { children: [
+    /* @__PURE__ */ l(
+      "img",
+      {
+        ...e,
+        className: v(
+          "mint:max-w-full mint:h-auto mint:object-contain mint:cursor-zoom-in mint:rounded-lg",
+          e.className
+        ),
+        onClick: () => i(!0),
+        onKeyDown: (m) => {
+          (m.key === "Enter" || m.key === " ") && (m.preventDefault(), i(!0));
+        },
+        tabIndex: 0,
+        role: "button",
+        "aria-label": `${e.alt || "Image"} - Click to enlarge`
+      }
+    ),
+    e.src && /* @__PURE__ */ l(
+      w,
+      {
+        isOpen: n,
+        onClose: () => i(!1),
+        src: e.src,
+        alt: e.alt || ""
+      }
+    )
+  ] });
+}
+export {
+  g as Image
+};
+//# sourceMappingURL=image.js.map

package/dist/components/content-components/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sources":["../../../src/components/content-components/image.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\ninterface ImageModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  src: string;\n  alt: string;\n}\n\nfunction ImageModal({ isOpen, onClose, src, alt }: ImageModalProps) {\n  const modalRef = useRef<HTMLDivElement>(null);\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (isOpen) {\n      previousActiveElement.current = document.activeElement as HTMLElement;\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"unset\";\n      previousActiveElement.current?.focus();\n    }\n\n    return () => {\n      document.body.style.overflow = \"unset\";\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    if (isOpen) {\n      window.addEventListener(\"keydown\", handleEscape);\n    }\n\n    return () => {\n      window.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  if (!isOpen) return null;\n\n  return (\n    <div\n      className=\"mint:fixed mint:inset-0 mint:flex mint:items-center mint:justify-center mint:p-4 mint:bg-black/80 mint:backdrop-blur-sm\"\n      onClick={onClose}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Expanded image view\"\n      style={{ zIndex: 9999 }}\n    >\n      <div\n        ref={modalRef}\n        className=\"mint:relative mint:max-w-[95vw] mint:max-h-[95vh] mint:flex mint:items-center mint:justify-center\"\n        onClick={(e) => e.stopPropagation()}\n      >\n        <img\n          src={src}\n          alt={alt}\n          className=\"mint:max-w-full mint:max-h-[95vh] mint:object-contain mint:rounded-lg\"\n        />\n      </div>\n    </div>\n  );\n}\n\nexport function Image(props: React.ImgHTMLAttributes<HTMLImageElement>) {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  return (\n    <>\n      <img\n        {...props}\n        className={cn(\n          \"mint:max-w-full mint:h-auto mint:object-contain mint:cursor-zoom-in mint:rounded-lg\",\n          props.className\n        )}\n        onClick={() => setIsModalOpen(true)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            setIsModalOpen(true);\n          }\n        }}\n        tabIndex={0}\n        role=\"button\"\n        aria-label={`${props.alt || \"Image\"} - Click to enlarge`}\n      />\n      {props.src && (\n        <ImageModal\n          isOpen={isModalOpen}\n          onClose={() => setIsModalOpen(false)}\n          src={props.src}\n          alt={props.alt || \"\"}\n        />\n      )}\n    </>\n  );\n}\n"],"names":["ImageModal","isOpen","onClose","src","alt","modalRef","useRef","previousActiveElement","useEffect","_a","handleEscape","e","jsx","Image","props","isModalOpen","setIsModalOpen","useState","jsxs","Fragment","cn"],"mappings":";;;AAUA,SAASA,EAAW,EAAE,QAAAC,GAAQ,SAAAC,GAAS,KAAAC,GAAK,KAAAC,KAAwB;AAClE,QAAMC,IAAWC,EAAuB,IAAI,GACtCC,IAAwBD,EAA2B,IAAI;AAgC7D,SA9BAE,EAAU,MAAM;;AACd,WAAIP,KACFM,EAAsB,UAAU,SAAS,eACzC,SAAS,KAAK,MAAM,WAAW,aAE/B,SAAS,KAAK,MAAM,WAAW,UAC/BE,IAAAF,EAAsB,YAAtB,QAAAE,EAA+B,UAG1B,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAACR,CAAM,CAAC,GAEXO,EAAU,MAAM;AACd,UAAME,IAAe,CAACC,MAAqB;AACzC,MAAIA,EAAE,QAAQ,YACZT,EAAA;AAAA,IAEJ;AAEA,WAAID,KACF,OAAO,iBAAiB,WAAWS,CAAY,GAG1C,MAAM;AACX,aAAO,oBAAoB,WAAWA,CAAY;AAAA,IACpD;AAAA,EACF,GAAG,CAACT,GAAQC,CAAO,CAAC,GAEfD,IAGH,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAASV;AAAA,MACT,MAAK;AAAA,MACL,cAAW;AAAA,MACX,cAAW;AAAA,MACX,OAAO,EAAE,QAAQ,KAAA;AAAA,MAEjB,UAAA,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKP;AAAA,UACL,WAAU;AAAA,UACV,SAAS,CAACM,MAAMA,EAAE,gBAAA;AAAA,UAElB,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAAT;AAAA,cACA,KAAAC;AAAA,cACA,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,IArBgB;AAwBtB;AAEO,SAASS,EAAMC,GAAkD;AACtE,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK;AAEpD,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAP;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGE;AAAA,QACJ,WAAWM;AAAA,UACT;AAAA,UACAN,EAAM;AAAA,QAAA;AAAA,QAER,SAAS,MAAME,EAAe,EAAI;AAAA,QAClC,WAAW,CAACL,MAAM;AAChB,WAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFK,EAAe,EAAI;AAAA,QAEvB;AAAA,QACA,UAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY,GAAGF,EAAM,OAAO,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpCA,EAAM,OACL,gBAAAF;AAAA,MAACZ;AAAA,MAAA;AAAA,QACC,QAAQe;AAAA,QACR,SAAS,MAAMC,EAAe,EAAK;AAAA,QACnC,KAAKF,EAAM;AAAA,QACX,KAAKA,EAAM,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACpB,GAEJ;AAEJ;"}

package/dist/components/content-components/param-name.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 function i({ children: n }) {
-  return /* @__PURE__ */ m("span", { className: "mint:not-prose mint:inline-block mint:mt-2 mint:mr-1 mint:px-1.5 mint:py-0.5 mint:text-sm mint:font-semibold mint:font-mono mint:rounded mint:bg-gray-100 mint:dark:bg-[#2d2d2d]", children: n });
+  return /* @__PURE__ */ m("span", { className: "not-prose mint:inline-block mint:mt-2 mint:mr-1 mint:px-1.5 mint:py-0.5 mint:text-sm mint:font-semibold mint:font-mono mint:rounded mint:bg-gray-100 mint:dark:bg-[#2d2d2d]", children: n });
 }
 export {
   i as ParamName

package/dist/components/content-components/param-name.js.map

@@ -1 +1 @@
-{"version":3,"file":"param-name.js","sources":["../../../src/components/content-components/param-name.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\ninterface ParamNameProps {\n  children: React.ReactNode;\n}\n\nexport function ParamName({ children }: ParamNameProps) {\n  return (\n    <span className=\"mint:not-prose mint:inline-block mint:mt-2 mint:mr-1 mint:px-1.5 mint:py-0.5 mint:text-sm mint:font-semibold mint:font-mono mint:rounded mint:bg-gray-100 mint:dark:bg-[#2d2d2d]\">\n      {children}\n    </span>\n  );\n}\n"],"names":["ParamName","children","jsx"],"mappings":";AAKO,SAASA,EAAU,EAAE,UAAAC,KAA4B;AACtD,SACE,gBAAAC,EAAC,QAAA,EAAK,WAAU,oLACb,UAAAD,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"param-name.js","sources":["../../../src/components/content-components/param-name.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\ninterface ParamNameProps {\n  children: React.ReactNode;\n}\n\nexport function ParamName({ children }: ParamNameProps) {\n  return (\n    <span className=\"not-prose mint:inline-block mint:mt-2 mint:mr-1 mint:px-1.5 mint:py-0.5 mint:text-sm mint:font-semibold mint:font-mono mint:rounded mint:bg-gray-100 mint:dark:bg-[#2d2d2d]\">\n      {children}\n    </span>\n  );\n}\n"],"names":["ParamName","children","jsx"],"mappings":";AAKO,SAASA,EAAU,EAAE,UAAAC,KAA4B;AACtD,SACE,gBAAAC,EAAC,QAAA,EAAK,WAAU,+KACb,UAAAD,EAAA,CACH;AAEJ;"}

package/dist/components/content-components/zone-pivots/zone-pivot-selector.js

@@ -1,13 +1,13 @@
-import { jsx as d } from "react/jsx-runtime";
-import { useRef as w } from "react";
+import { jsx as r, jsxs as w } from "react/jsx-runtime";
+import { useRef as p } from "react";
 import { useZonePivotContext as u } from "./zone-pivot-context.js";
-import { cn as p } from "../../../utils/cn.js";
-function P({
+import { cn as k } from "../../../utils/cn.js";
+function g({
   group: e,
   className: h
 }) {
-  var l;
-  const { activePivots: b, setActivePivot: s } = u(), m = w(null), c = (l = e.pivots.find((t) => b.has(t.id))) == null ? void 0 : l.id, v = e.pivots.findIndex((t) => t.id === c), x = (t) => {
+  var c;
+  const { activePivots: b, setActivePivot: d } = u(), m = p(null), l = (c = e.pivots.find((t) => b.has(t.id))) == null ? void 0 : c.id, v = e.pivots.findIndex((t) => t.id === l), x = (t) => {
     var f;
     const { key: i } = t, n = v;
     let o = n;
@@ -29,16 +29,16 @@ function P({
       default:
         return;
     }
-    const r = e.pivots[o];
-    if (r) {
-      s(e.id, r.id);
+    const s = e.pivots[o];
+    if (s) {
+      d(e.id, s.id);
       const a = (f = m.current) == null ? void 0 : f.querySelector(
-        `[data-pivot-id="${r.id}"]`
+        `[data-pivot-id="${s.id}"]`
       );
       a == null || a.focus();
     }
   };
-  return /* @__PURE__ */ d("div", { className: h, "data-zone-pivot-group": e.id, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ r("div", { className: h, "data-zone-pivot-group": e.id, children: /* @__PURE__ */ r(
     "div",
     {
       ref: m,
@@ -46,8 +46,8 @@ function P({
       "aria-label": e.prompt,
       className: "mint:inline-flex mint:items-center mint:gap-1 mint:p-1 mint:bg-gray-100 mint:rounded-lg mint:dark:bg-white/5",
       children: e.pivots.map((t) => {
-        const i = t.id === c;
-        return /* @__PURE__ */ d(
+        const i = t.id === l;
+        return /* @__PURE__ */ w(
           "button",
           {
             id: `tab-${e.id}-${t.id}`,
@@ -57,13 +57,16 @@ function P({
             "aria-selected": i,
             "aria-controls": `panel-${e.id}-${t.id}`,
             tabIndex: i ? 0 : -1,
-            onClick: () => s(e.id, t.id),
+            onClick: () => d(e.id, t.id),
             onKeyDown: x,
-            className: p(
-              "mint:relative mint:px-3 mint:py-1.5 mint:text-sm mint:font-medium mint:rounded-md mint:bg-transparent mint:border-none mint:cursor-pointer mint:transition-all mint:duration-150 mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#3b82f6] mint:focus-visible:outline-offset-2",
-              i ? "mint:bg-white mint:text-[#141414] mint:shadow-sm mint:dark:bg-white/10 mint:dark:text-white" : "mint:text-gray-600 mint:hover:text-[#141414] mint:hover:bg-white/50 mint:dark:text-gray-400 mint:dark:hover:text-white mint:dark:hover:bg-white/10"
+            className: k(
+              "mint:relative mint:px-3 mint:py-1.5 mint:text-sm mint:rounded-md mint:bg-transparent mint:border-none mint:cursor-pointer mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#3b82f6] mint:focus-visible:outline-offset-2",
+              i ? "mint:bg-white mint:text-[#141414] mint:shadow-sm mint:dark:bg-white/10 mint:dark:text-white mint:font-semibold" : "mint:text-gray-600 mint:hover:text-[#141414] mint:hover:bg-white/50 mint:dark:text-gray-400 mint:dark:hover:text-white mint:dark:hover:bg-white/10 mint:font-medium"
             ),
-            children: t.title
+            children: [
+              /* @__PURE__ */ r("span", { className: "mint:invisible mint:font-semibold mint:block mint:h-0 mint:overflow-hidden", "aria-hidden": "true", children: t.title }),
+              /* @__PURE__ */ r("span", { className: "mint:block", children: t.title })
+            ]
           },
           t.id
         );
@@ -72,6 +75,6 @@ function P({
   ) });
 }
 export {
-  P as ZonePivotSelector
+  g as ZonePivotSelector
 };
 //# sourceMappingURL=zone-pivot-selector.js.map

package/dist/components/content-components/zone-pivots/zone-pivot-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"zone-pivot-selector.js","sources":["../../../../src/components/content-components/zone-pivots/zone-pivot-selector.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { useZonePivotContext } from \"./zone-pivot-context\";\nimport type { ZonePivotGroup } from \"../../../types/page\";\nimport { cn } from \"../../../utils/cn\";\n\nexport interface ZonePivotSelectorProps {\n  group: ZonePivotGroup;\n  className?: string;\n}\n\nexport function ZonePivotSelector({\n  group,\n  className,\n}: ZonePivotSelectorProps) {\n  const { activePivots, setActivePivot } = useZonePivotContext();\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const selectedPivotId = group.pivots.find((p) => activePivots.has(p.id))?.id;\n  const selectedIndex = group.pivots.findIndex((p) => p.id === selectedPivotId);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    const { key } = event;\n    const currentIndex = selectedIndex;\n    let nextIndex = currentIndex;\n\n    switch (key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        event.preventDefault();\n        nextIndex =\n          currentIndex > 0 ? currentIndex - 1 : group.pivots.length - 1;\n        break;\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        event.preventDefault();\n        nextIndex =\n          currentIndex < group.pivots.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case \"Home\":\n        event.preventDefault();\n        nextIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        nextIndex = group.pivots.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    const nextPivot = group.pivots[nextIndex];\n    if (nextPivot) {\n      setActivePivot(group.id, nextPivot.id);\n      const button = tabListRef.current?.querySelector(\n        `[data-pivot-id=\"${nextPivot.id}\"]`\n      ) as HTMLButtonElement;\n      button?.focus();\n    }\n  };\n\n  return (\n    <div className={className} data-zone-pivot-group={group.id}>\n      <div\n        ref={tabListRef}\n        role=\"tablist\"\n        aria-label={group.prompt}\n        className=\"mint:inline-flex mint:items-center mint:gap-1 mint:p-1 mint:bg-gray-100 mint:rounded-lg mint:dark:bg-white/5\"\n      >\n        {group.pivots.map((pivot) => {\n          const isSelected = pivot.id === selectedPivotId;\n          return (\n            <button\n              key={pivot.id}\n              id={`tab-${group.id}-${pivot.id}`}\n              role=\"tab\"\n              type=\"button\"\n              data-pivot-id={pivot.id}\n              aria-selected={isSelected}\n              aria-controls={`panel-${group.id}-${pivot.id}`}\n              tabIndex={isSelected ? 0 : -1}\n              onClick={() => setActivePivot(group.id, pivot.id)}\n              onKeyDown={handleKeyDown}\n              className={cn(\n                \"mint:relative mint:px-3 mint:py-1.5 mint:text-sm mint:font-medium mint:rounded-md mint:bg-transparent mint:border-none mint:cursor-pointer mint:transition-all mint:duration-150 mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#3b82f6] mint:focus-visible:outline-offset-2\",\n                isSelected\n                  ? \"mint:bg-white mint:text-[#141414] mint:shadow-sm mint:dark:bg-white/10 mint:dark:text-white\"\n                  : \"mint:text-gray-600 mint:hover:text-[#141414] mint:hover:bg-white/50 mint:dark:text-gray-400 mint:dark:hover:text-white mint:dark:hover:bg-white/10\"\n              )}\n            >\n              {pivot.title}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"names":["ZonePivotSelector","group","className","activePivots","setActivePivot","useZonePivotContext","tabListRef","useRef","selectedPivotId","_a","p","selectedIndex","handleKeyDown","event","key","currentIndex","nextIndex","nextPivot","button","jsx","pivot","isSelected","cn"],"mappings":";;;;AAUO,SAASA,EAAkB;AAAA,EAChC,OAAAC;AAAA,EACA,WAAAC;AACF,GAA2B;;AACzB,QAAM,EAAE,cAAAC,GAAc,gBAAAC,EAAA,IAAmBC,EAAA,GACnCC,IAAaC,EAAuB,IAAI,GAExCC,KAAkBC,IAAAR,EAAM,OAAO,KAAK,CAACS,MAAMP,EAAa,IAAIO,EAAE,EAAE,CAAC,MAA/C,gBAAAD,EAAkD,IACpEE,IAAgBV,EAAM,OAAO,UAAU,CAACS,MAAMA,EAAE,OAAOF,CAAe,GAEtEI,IAAgB,CAACC,MAAkD;;AACvE,UAAM,EAAE,KAAAC,MAAQD,GACVE,IAAeJ;AACrB,QAAIK,IAAYD;AAEhB,YAAQD,GAAA;AAAA,MACN,KAAK;AAAA,MACL,KAAK;AACH,QAAAD,EAAM,eAAA,GACNG,IACED,IAAe,IAAIA,IAAe,IAAId,EAAM,OAAO,SAAS;AAC9D;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,QAAAY,EAAM,eAAA,GACNG,IACED,IAAed,EAAM,OAAO,SAAS,IAAIc,IAAe,IAAI;AAC9D;AAAA,MACF,KAAK;AACH,QAAAF,EAAM,eAAA,GACNG,IAAY;AACZ;AAAA,MACF,KAAK;AACH,QAAAH,EAAM,eAAA,GACNG,IAAYf,EAAM,OAAO,SAAS;AAClC;AAAA,MACF;AACE;AAAA,IAAA;AAGJ,UAAMgB,IAAYhB,EAAM,OAAOe,CAAS;AACxC,QAAIC,GAAW;AACb,MAAAb,EAAeH,EAAM,IAAIgB,EAAU,EAAE;AACrC,YAAMC,KAAST,IAAAH,EAAW,YAAX,gBAAAG,EAAoB;AAAA,QACjC,mBAAmBQ,EAAU,EAAE;AAAA;AAEjC,MAAAC,KAAA,QAAAA,EAAQ;AAAA,IACV;AAAA,EACF;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAAjB,GAAsB,yBAAuBD,EAAM,IACtD,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKb;AAAA,MACL,MAAK;AAAA,MACL,cAAYL,EAAM;AAAA,MAClB,WAAU;AAAA,MAET,UAAAA,EAAM,OAAO,IAAI,CAACmB,MAAU;AAC3B,cAAMC,IAAaD,EAAM,OAAOZ;AAChC,eACE,gBAAAW;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,IAAI,OAAOlB,EAAM,EAAE,IAAImB,EAAM,EAAE;AAAA,YAC/B,MAAK;AAAA,YACL,MAAK;AAAA,YACL,iBAAeA,EAAM;AAAA,YACrB,iBAAeC;AAAA,YACf,iBAAe,SAASpB,EAAM,EAAE,IAAImB,EAAM,EAAE;AAAA,YAC5C,UAAUC,IAAa,IAAI;AAAA,YAC3B,SAAS,MAAMjB,EAAeH,EAAM,IAAImB,EAAM,EAAE;AAAA,YAChD,WAAWR;AAAA,YACX,WAAWU;AAAA,cACT;AAAA,cACAD,IACI,gGACA;AAAA,YAAA;AAAA,YAGL,UAAAD,EAAM;AAAA,UAAA;AAAA,UAjBFA,EAAM;AAAA,QAAA;AAAA,MAoBjB,CAAC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}
+{"version":3,"file":"zone-pivot-selector.js","sources":["../../../../src/components/content-components/zone-pivots/zone-pivot-selector.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { useZonePivotContext } from \"./zone-pivot-context\";\nimport type { ZonePivotGroup } from \"../../../types/page\";\nimport { cn } from \"../../../utils/cn\";\n\nexport interface ZonePivotSelectorProps {\n  group: ZonePivotGroup;\n  className?: string;\n}\n\nexport function ZonePivotSelector({\n  group,\n  className,\n}: ZonePivotSelectorProps) {\n  const { activePivots, setActivePivot } = useZonePivotContext();\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const selectedPivotId = group.pivots.find((p) => activePivots.has(p.id))?.id;\n  const selectedIndex = group.pivots.findIndex((p) => p.id === selectedPivotId);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    const { key } = event;\n    const currentIndex = selectedIndex;\n    let nextIndex = currentIndex;\n\n    switch (key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        event.preventDefault();\n        nextIndex =\n          currentIndex > 0 ? currentIndex - 1 : group.pivots.length - 1;\n        break;\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        event.preventDefault();\n        nextIndex =\n          currentIndex < group.pivots.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case \"Home\":\n        event.preventDefault();\n        nextIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        nextIndex = group.pivots.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    const nextPivot = group.pivots[nextIndex];\n    if (nextPivot) {\n      setActivePivot(group.id, nextPivot.id);\n      const button = tabListRef.current?.querySelector(\n        `[data-pivot-id=\"${nextPivot.id}\"]`\n      ) as HTMLButtonElement;\n      button?.focus();\n    }\n  };\n\n  return (\n    <div className={className} data-zone-pivot-group={group.id}>\n      <div\n        ref={tabListRef}\n        role=\"tablist\"\n        aria-label={group.prompt}\n        className=\"mint:inline-flex mint:items-center mint:gap-1 mint:p-1 mint:bg-gray-100 mint:rounded-lg mint:dark:bg-white/5\"\n      >\n        {group.pivots.map((pivot) => {\n          const isSelected = pivot.id === selectedPivotId;\n          return (\n            <button\n              key={pivot.id}\n              id={`tab-${group.id}-${pivot.id}`}\n              role=\"tab\"\n              type=\"button\"\n              data-pivot-id={pivot.id}\n              aria-selected={isSelected}\n              aria-controls={`panel-${group.id}-${pivot.id}`}\n              tabIndex={isSelected ? 0 : -1}\n              onClick={() => setActivePivot(group.id, pivot.id)}\n              onKeyDown={handleKeyDown}\n              className={cn(\n                \"mint:relative mint:px-3 mint:py-1.5 mint:text-sm mint:rounded-md mint:bg-transparent mint:border-none mint:cursor-pointer mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#3b82f6] mint:focus-visible:outline-offset-2\",\n                isSelected\n                  ? \"mint:bg-white mint:text-[#141414] mint:shadow-sm mint:dark:bg-white/10 mint:dark:text-white mint:font-semibold\"\n                  : \"mint:text-gray-600 mint:hover:text-[#141414] mint:hover:bg-white/50 mint:dark:text-gray-400 mint:dark:hover:text-white mint:dark:hover:bg-white/10 mint:font-medium\"\n              )}\n            >\n              <span className=\"mint:invisible mint:font-semibold mint:block mint:h-0 mint:overflow-hidden\" aria-hidden=\"true\">\n                {pivot.title}\n              </span>\n              <span className=\"mint:block\">{pivot.title}</span>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"names":["ZonePivotSelector","group","className","activePivots","setActivePivot","useZonePivotContext","tabListRef","useRef","selectedPivotId","_a","p","selectedIndex","handleKeyDown","event","key","currentIndex","nextIndex","nextPivot","button","jsx","pivot","isSelected","jsxs","cn"],"mappings":";;;;AAUO,SAASA,EAAkB;AAAA,EAChC,OAAAC;AAAA,EACA,WAAAC;AACF,GAA2B;;AACzB,QAAM,EAAE,cAAAC,GAAc,gBAAAC,EAAA,IAAmBC,EAAA,GACnCC,IAAaC,EAAuB,IAAI,GAExCC,KAAkBC,IAAAR,EAAM,OAAO,KAAK,CAACS,MAAMP,EAAa,IAAIO,EAAE,EAAE,CAAC,MAA/C,gBAAAD,EAAkD,IACpEE,IAAgBV,EAAM,OAAO,UAAU,CAACS,MAAMA,EAAE,OAAOF,CAAe,GAEtEI,IAAgB,CAACC,MAAkD;;AACvE,UAAM,EAAE,KAAAC,MAAQD,GACVE,IAAeJ;AACrB,QAAIK,IAAYD;AAEhB,YAAQD,GAAA;AAAA,MACN,KAAK;AAAA,MACL,KAAK;AACH,QAAAD,EAAM,eAAA,GACNG,IACED,IAAe,IAAIA,IAAe,IAAId,EAAM,OAAO,SAAS;AAC9D;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,QAAAY,EAAM,eAAA,GACNG,IACED,IAAed,EAAM,OAAO,SAAS,IAAIc,IAAe,IAAI;AAC9D;AAAA,MACF,KAAK;AACH,QAAAF,EAAM,eAAA,GACNG,IAAY;AACZ;AAAA,MACF,KAAK;AACH,QAAAH,EAAM,eAAA,GACNG,IAAYf,EAAM,OAAO,SAAS;AAClC;AAAA,MACF;AACE;AAAA,IAAA;AAGJ,UAAMgB,IAAYhB,EAAM,OAAOe,CAAS;AACxC,QAAIC,GAAW;AACb,MAAAb,EAAeH,EAAM,IAAIgB,EAAU,EAAE;AACrC,YAAMC,KAAST,IAAAH,EAAW,YAAX,gBAAAG,EAAoB;AAAA,QACjC,mBAAmBQ,EAAU,EAAE;AAAA;AAEjC,MAAAC,KAAA,QAAAA,EAAQ;AAAA,IACV;AAAA,EACF;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAAjB,GAAsB,yBAAuBD,EAAM,IACtD,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKb;AAAA,MACL,MAAK;AAAA,MACL,cAAYL,EAAM;AAAA,MAClB,WAAU;AAAA,MAET,UAAAA,EAAM,OAAO,IAAI,CAACmB,MAAU;AAC3B,cAAMC,IAAaD,EAAM,OAAOZ;AAChC,eACE,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,IAAI,OAAOrB,EAAM,EAAE,IAAImB,EAAM,EAAE;AAAA,YAC/B,MAAK;AAAA,YACL,MAAK;AAAA,YACL,iBAAeA,EAAM;AAAA,YACrB,iBAAeC;AAAA,YACf,iBAAe,SAASpB,EAAM,EAAE,IAAImB,EAAM,EAAE;AAAA,YAC5C,UAAUC,IAAa,IAAI;AAAA,YAC3B,SAAS,MAAMjB,EAAeH,EAAM,IAAImB,EAAM,EAAE;AAAA,YAChD,WAAWR;AAAA,YACX,WAAWW;AAAA,cACT;AAAA,cACAF,IACI,mHACA;AAAA,YAAA;AAAA,YAGN,UAAA;AAAA,cAAA,gBAAAF,EAAC,UAAK,WAAU,8EAA6E,eAAY,QACtG,YAAM,OACT;AAAA,cACA,gBAAAA,EAAC,QAAA,EAAK,WAAU,cAAc,YAAM,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UApBrCC,EAAM;AAAA,QAAA;AAAA,MAuBjB,CAAC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}

package/dist/components/docsLayout.js

@@ -0,0 +1,60 @@
+import { jsx as i, jsxs as u } from "react/jsx-runtime";
+import { NavTree as b } from "./nav-tree/index.js";
+import { ComponentsProvider as p } from "../context/components-context.js";
+import { cn as l } from "../utils/cn.js";
+/* empty css            */
+const y = ({
+  navTree: t,
+  children: m,
+  activeHref: e,
+  activeId: r,
+  theme: a = "light",
+  className: o = "",
+  bottomLinks: d,
+  LinkComponent: f,
+  localization: s,
+  telemetry: v,
+  showSidebar: c = !0,
+  sidebarClassName: h
+}) => {
+  const n = a === "dark" ? "dark" : "light", x = { ...{
+    sidebarAriaLabel: "Sidebar navigation"
+  }, ...s };
+  return /* @__PURE__ */ i(p, { LinkComponent: f, children: /* @__PURE__ */ i(
+    "div",
+    {
+      className: l(
+        "mint:flex mint:min-h-0 mint:flex-1",
+        n === "dark" && "dark",
+        o
+      ),
+      children: /* @__PURE__ */ u("div", { className: "mint:isolate mint:flex mint:flex-row mint:flex-nowrap mint:w-full mint:h-full mint:overflow-hidden mint:bg-[#f0f0f0] mint:dark:bg-[#0f0f0f]", children: [
+        c && t && /* @__PURE__ */ i(
+          "aside",
+          {
+            "aria-label": x.sidebarAriaLabel,
+            className: l(
+              "mint:flex mint:flex-col mint:shrink-0 mint:w-58 mint:h-full mint:[&_ul]:pl-2",
+              h ?? "mint:max-lg:hidden"
+            ),
+            children: /* @__PURE__ */ i(
+              b,
+              {
+                navTree: t,
+                activeId: r ?? e,
+                activeHref: e,
+                theme: n,
+                bottomLinks: d
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ i("div", { className: "mint:flex mint:flex-1 mint:flex-col mint:min-w-0 mint:h-full mint:overflow-hidden mint:rounded-tl-[var(--borderRadiusXXLarge,1.5rem)]", children: m })
+      ] })
+    }
+  ) });
+};
+export {
+  y as DocsLayout
+};
+//# sourceMappingURL=docsLayout.js.map

package/dist/components/docsLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"docsLayout.js","sources":["../../src/components/docsLayout.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { NavTreeData } from \"../types\";\nimport type { BottomLinkConfig } from \"./nav-tree\";\nimport type { LinkComponent } from \"../types\";\nimport { NavTree } from \"./nav-tree\";\nimport { ComponentsProvider } from \"../context/components-context\";\nimport { cn } from \"../utils/cn\";\nimport \"../styles.css\";\n\n/**\n * Localization strings for DocsLayout\n */\nexport interface DocsLayoutLocalization {\n  /** Aria label for the sidebar navigation. Default: \"Sidebar navigation\" */\n  sidebarAriaLabel?: string;\n}\n\n/**\n * Telemetry configuration for DocsLayout\n */\nexport interface DocsLayoutTelemetry {\n  /** Activity name for bottom link clicks */\n  bottomLinkActivity?: string;\n  /** Phase for bottom link clicks (e.g., \"Start\", \"Complete\") */\n  bottomLinkPhase?: string;\n}\n\n/**\n * Props for the DocsLayout component\n */\nexport interface DocsLayoutProps {\n  /** Navigation tree data structure */\n  navTree: NavTreeData;\n\n  /** The main content to render in the layout */\n  children: ReactNode;\n\n  /** Currently active href for navigation highlighting */\n  activeHref?: string;\n\n  /** Currently active ID for navigation highlighting */\n  activeId?: string;\n\n  /** Theme for the layout */\n  theme?: \"light\" | \"dark\";\n\n  /** Additional CSS classes for the outer container */\n  className?: string;\n\n  /** Bottom links configuration (e.g., blog, GitHub, feedback) */\n  bottomLinks?: BottomLinkConfig[];\n\n  /** Custom Link component for navigation (e.g., React Router Link, Next.js Link) */\n  LinkComponent?: LinkComponent;\n\n  /** Localization strings */\n  localization?: DocsLayoutLocalization;\n\n  /** Telemetry configuration */\n  telemetry?: DocsLayoutTelemetry;\n\n  /** Whether to show the sidebar. Default: true */\n  showSidebar?: boolean;\n\n  /** Custom className for the sidebar to control responsive behavior.\n   * Default: \"mint:max-lg:hidden\" (hidden below lg breakpoint) */\n  sidebarClassName?: string;\n}\n\n/**\n * DocsLayout component provides a complete documentation layout with sidebar navigation\n * and main content area. It's designed to be scalable, customizable, and tree-shakable.\n *\n * @example\n * ```tsx\n * <DocsLayout\n *   navTree={{ items: [...] }}\n *   activeHref=\"/docs/getting-started\"\n *   theme=\"dark\"\n *   bottomLinks={[\n *     { href: \"https://blog.com\", label: \"Blog\", icon: BlogIcon }\n *   ]}\n *   LinkComponent={Link}\n * >\n *   <YourPageContent />\n * </DocsLayout>\n * ```\n */\nexport const DocsLayout = ({\n  navTree,\n  children,\n  activeHref,\n  activeId,\n  theme = \"light\",\n  className = \"\",\n  bottomLinks,\n  LinkComponent,\n  localization,\n  telemetry,\n  showSidebar = true,\n  sidebarClassName,\n}: DocsLayoutProps) => {\n  const resolvedTheme = theme === \"dark\" ? \"dark\" : \"light\";\n\n  // Default localization\n  const defaultLocalization: Required<DocsLayoutLocalization> = {\n    sidebarAriaLabel: \"Sidebar navigation\",\n  };\n\n  const loc = { ...defaultLocalization, ...localization };\n\n  return (\n    <ComponentsProvider LinkComponent={LinkComponent}>\n      <div\n        className={cn(\n          \"mint:flex mint:min-h-0 mint:flex-1\",\n          resolvedTheme === \"dark\" && \"dark\",\n          className\n        )}\n      >\n        <div className=\"mint:isolate mint:flex mint:flex-row mint:flex-nowrap mint:w-full mint:h-full mint:overflow-hidden mint:bg-[#f0f0f0] mint:dark:bg-[#0f0f0f]\">\n          {showSidebar && navTree && (\n            <aside\n              aria-label={loc.sidebarAriaLabel}\n              className={cn(\n                \"mint:flex mint:flex-col mint:shrink-0 mint:w-58 mint:h-full mint:[&_ul]:pl-2\",\n                sidebarClassName ?? \"mint:max-lg:hidden\"\n              )}\n            >\n              <NavTree\n                navTree={navTree}\n                activeId={activeId ?? activeHref}\n                activeHref={activeHref}\n                theme={resolvedTheme}\n                bottomLinks={bottomLinks}\n              />\n            </aside>\n          )}\n\n          <div className=\"mint:flex mint:flex-1 mint:flex-col mint:min-w-0 mint:h-full mint:overflow-hidden mint:rounded-tl-[var(--borderRadiusXXLarge,1.5rem)]\">\n            {children}\n          </div>\n        </div>\n      </div>\n    </ComponentsProvider>\n  );\n};\n"],"names":["DocsLayout","navTree","children","activeHref","activeId","theme","className","bottomLinks","LinkComponent","localization","telemetry","showSidebar","sidebarClassName","resolvedTheme","loc","jsx","ComponentsProvider","cn","jsxs","NavTree"],"mappings":";;;;;AAwFO,MAAMA,IAAa,CAAC;AAAA,EACzB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,kBAAAC;AACF,MAAuB;AACrB,QAAMC,IAAgBR,MAAU,SAAS,SAAS,SAO5CS,IAAM,EAAE,GAJgD;AAAA,IAC5D,kBAAkB;AAAA,EAAA,GAGkB,GAAGL,EAAA;AAEzC,SACE,gBAAAM,EAACC,KAAmB,eAAAR,GAClB,UAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWE;AAAA,QACT;AAAA,QACAJ,MAAkB,UAAU;AAAA,QAC5BP;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,+IACZ,UAAA;AAAA,QAAAP,KAAeV,KACd,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,cAAYD,EAAI;AAAA,YAChB,WAAWG;AAAA,cACT;AAAA,cACAL,KAAoB;AAAA,YAAA;AAAA,YAGtB,UAAA,gBAAAG;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,SAAAlB;AAAA,gBACA,UAAUG,KAAYD;AAAA,gBACtB,YAAAA;AAAA,gBACA,OAAOU;AAAA,gBACP,aAAAN;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAIJ,gBAAAQ,EAAC,OAAA,EAAI,WAAU,yIACZ,UAAAb,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/docsPage.js

@@ -0,0 +1,128 @@
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import { MDXRenderer as N } from "./mdx-renderer.js";
+import { TableOfContents as P } from "./toc/index.js";
+import { PivotAwareTOC as T } from "./toc/pivot-aware-toc.js";
+import { TextAlignLeftFilled as C } from "@fluentui/react-icons";
+import { PageContextMenu as z } from "./page-context-menu.js";
+import { ComponentsProvider as L } from "../context/components-context.js";
+import { cn as o } from "../utils/cn.js";
+/* empty css            */
+import { ZonePivotProvider as j } from "./content-components/zone-pivots/zone-pivot-context.js";
+import { ZonePivotSelector as F } from "./content-components/zone-pivots/zone-pivot-selector.js";
+function B({
+  payload: i,
+  toc: m,
+  navTree: O,
+  activeHref: E,
+  theme: f,
+  className: h = "",
+  pathname: a,
+  markdownContent: b,
+  allPages: x,
+  baseUrl: g,
+  bottomLinks: y,
+  LinkComponent: w,
+  localization: p,
+  telemetry: A,
+  contextMenu: n
+}) {
+  var s, d;
+  const v = i.serializedContent, r = ((s = i.mdxExtracts) == null ? void 0 : s.zonePivotGroups) || [], l = (d = i.mdxExtracts) == null ? void 0 : d.pivotTocItems, k = !i.title, u = { ...{
+    onThisPage: "On this page",
+    loading: "Loading...",
+    errorTitle: "Error",
+    errorMessage: "Something went wrong",
+    notFoundTitle: "Page not found",
+    notFoundMessage: "The page you're looking for doesn't exist"
+  }, ...p };
+  return /* @__PURE__ */ t(L, { LinkComponent: w, children: /* @__PURE__ */ t(
+    "div",
+    {
+      className: o(
+        f === "dark" && "dark",
+        h,
+        "mint:flex mint:flex-col mint:flex-1 mint:min-h-0 mint:h-full mint:overflow-hidden"
+      ),
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          id: "page-container",
+          className: "mint:bg-[#f0f0f0] mint:dark:bg-[#0f0f0f] mint:flex-1 mint:min-h-0 mint:h-full mint:flex mint:flex-col mint:overflow-hidden",
+          children: /* @__PURE__ */ t(
+            "div",
+            {
+              id: "page-wrapper",
+              className: "mint:flex mint:rounded-tl-2xl mint:flex-1 mint:min-h-0 mint:h-full mint:overflow-hidden",
+              children: /* @__PURE__ */ t(
+                "div",
+                {
+                  id: "main-content",
+                  className: o(
+                    "mint:flex-1 mint:p-8 mint:overflow-y-auto mint:overflow-x-hidden mint:rounded-tl-2xl mint:bg-white mint:dark:bg-[#1f1f1f] [scrollbar-gutter:stable] mint:overscroll-contain mint:lg:px-16 mint:lg:pt-12 [scrollbar-width:thin] [scrollbar-color:rgba(0,0,0,0.2)_transparent] dark:[scrollbar-color:rgba(255,255,255,0.2)_transparent] mint:[&::-webkit-scrollbar]:w-1 mint:[&::-webkit-scrollbar-track]:bg-transparent mint:[&::-webkit-scrollbar-thumb]:bg-black/20 mint:dark:[&::-webkit-scrollbar-thumb]:bg-white/20 mint:[&::-webkit-scrollbar-thumb]:rounded mint:[&::-webkit-scrollbar-thumb:hover]:bg-black/30 mint:dark:[&::-webkit-scrollbar-thumb:hover]:bg-white/30"
+                  ),
+                  children: /* @__PURE__ */ t(j, { groups: r, children: /* @__PURE__ */ e("div", { className: "mint:flex mint:flex-row-reverse mint:gap-12 mint:justify-center mint:mx-auto mint:w-full", children: [
+                    m && m.length > 0 && /* @__PURE__ */ t("aside", { className: "mint:w-64 mint:shrink-0 mint:ml-8 mint:max-xl:hidden mint:xl:block", children: /* @__PURE__ */ e("div", { className: "mint:sticky mint:top-2 mint:p-2 mint:pb-6 mint:max-h-[calc(100vh-3.5rem)] mint:overflow-y-auto", children: [
+                      /* @__PURE__ */ e("div", { className: "mint:flex mint:items-center mint:gap-2 mint:mb-4", children: [
+                        /* @__PURE__ */ t(C, { className: "mint:w-4 mint:h-4 mint:text-[#4b5563] mint:dark:text-[#9ca3af]" }),
+                        /* @__PURE__ */ t("h2", { className: "mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white", children: u.onThisPage })
+                      ] }),
+                      l && Object.keys(l).length > 0 ? /* @__PURE__ */ t(
+                        T,
+                        {
+                          baseToc: m,
+                          pivotTocItems: l
+                        }
+                      ) : /* @__PURE__ */ t(P, { toc: m })
+                    ] }) }),
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: o(
+                          "mint:w-full mint:overflow-x-visible mint:max-w-[42rem]",
+                          k && "!mint:max-w-none"
+                        ),
+                        children: [
+                          i.title && /* @__PURE__ */ t("header", { className: "mint:mb-8", children: /* @__PURE__ */ e("div", { className: "mint:mb-4", children: [
+                            /* @__PURE__ */ e("div", { className: "mint:flex mint:flex-col mint:gap-2 mint:items-start mint:sm:flex-row mint:sm:items-center mint:sm:gap-4", children: [
+                              /* @__PURE__ */ t("h1", { className: "mint:text-[1.875rem] mint:font-bold mint:text-[#141414] mint:dark:text-white mint:m-0 mint:leading-[1.2]", children: i.title }),
+                              a && /* @__PURE__ */ t(
+                                z,
+                                {
+                                  className: "mint:ml-auto mint:max-sm:ml-0",
+                                  pathname: a,
+                                  markdownContent: b,
+                                  allPages: x,
+                                  baseUrl: g,
+                                  onCopyMarkdown: n == null ? void 0 : n.onCopyMarkdown,
+                                  onViewMarkdown: n == null ? void 0 : n.onViewMarkdown
+                                }
+                              )
+                            ] }),
+                            i.description && /* @__PURE__ */ t("p", { className: "mint:text-lg mint:text-[#4b5563] mint:dark:text-[#d1d5db]", children: i.description })
+                          ] }) }),
+                          r.length > 0 && /* @__PURE__ */ t("div", { className: "mint:mb-6 mint:flex mint:flex-wrap mint:gap-4", children: r.map((c) => /* @__PURE__ */ t(
+                            F,
+                            {
+                              group: c,
+                              className: "mint:flex mint:items-center mint:gap-2 mint:text-sm"
+                            },
+                            c.id
+                          )) }),
+                          /* @__PURE__ */ t("div", { className: "mint:pt-4", children: /* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(v, {}) }) })
+                        ]
+                      }
+                    )
+                  ] }) })
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+export {
+  B as DocsPage
+};
+//# sourceMappingURL=docsPage.js.map

package/dist/components/docsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"docsPage.js","sources":["../../src/components/docsPage.tsx"],"sourcesContent":["import { MDXRenderer } from \"./mdx-renderer\";\nimport type { DocsPageProps, PayloadData } from \"../types\";\nimport { TableOfContents } from \"./toc\";\nimport { PivotAwareTOC } from \"./toc/pivot-aware-toc\";\nimport { TextAlignLeftFilled } from \"@fluentui/react-icons\";\nimport {\n  ZonePivotProvider,\n  ZonePivotSelector,\n} from \"./content-components/zone-pivots\";\nimport { PageContextMenu, type ContextualOption } from \"./page-context-menu\";\nimport { ComponentsProvider } from \"../context/components-context\";\nimport { cn } from \"../utils/cn\";\nimport \"../styles.css\";\n\n/**\n * Localization strings for DocsPage component\n */\nexport interface DocsPageLocalization {\n  /** Text for \"On this page\" heading. Default: \"On this page\" */\n  onThisPage?: string;\n  /** Loading message. Default: \"Loading...\" */\n  loading?: string;\n  /** Error title. Default: \"Error\" */\n  errorTitle?: string;\n  /** Generic error message. Default: \"Something went wrong\" */\n  errorMessage?: string;\n  /** Not found title. Default: \"Page not found\" */\n  notFoundTitle?: string;\n  /** Not found message. Default: \"The page you're looking for doesn't exist\" */\n  notFoundMessage?: string;\n}\n\n/**\n * Telemetry configuration for DocsPage\n */\nexport interface DocsPageTelemetry {\n  /** Activity name for page context menu interactions */\n  contextMenuActivity?: string;\n  /** Phase for context menu interactions */\n  contextMenuPhase?: string;\n  /** Activity name for TOC link clicks */\n  tocLinkActivity?: string;\n  /** Phase for TOC link clicks */\n  tocLinkPhase?: string;\n  /** Activity name for zone pivot selector changes */\n  zonePivotActivity?: string;\n  /** Phase for zone pivot changes */\n  zonePivotPhase?: string;\n}\n\n/**\n * Configuration for the page context menu\n */\nexport interface PageContextMenuConfig {\n  /** Custom actions for the page context menu. If provided, these will replace the default actions. */\n  customActions?: ContextualOption[];\n  /** Callback fired after markdown is successfully copied */\n  onCopyMarkdown?: () => void;\n  /** Custom handler for \"Copy Page\" action. If provided, replaces default copy behavior. */\n  onCopyPage?: () => void | Promise<void>;\n  /** Custom handler for \"View as Markdown\" action. If provided, replaces default view behavior. */\n  onViewMarkdown?: (pathname: string) => void;\n  /** Custom handler for \"View llms.txt\" action. If provided, replaces default behavior. */\n  onViewLlmsTxt?: () => void;\n  /** Custom handler for \"View llms-full.txt\" action. If provided, replaces default behavior. */\n  onViewLlmsFullTxt?: () => void;\n}\n\n/**\n * Enhanced DocsPageProps with localization and telemetry support\n */\nexport interface EnhancedDocsPageProps extends DocsPageProps {\n  /** Localization strings */\n  localization?: DocsPageLocalization;\n  /** Telemetry configuration */\n  telemetry?: DocsPageTelemetry;\n  /** Context menu configuration */\n  contextMenu?: PageContextMenuConfig;\n}\n\n/**\n * DocsPage component renders a documentation page with MDX content, table of contents,\n * zone pivot selectors, and page context menu. It supports full customization through\n * props for localization, telemetry, and custom components.\n *\n * @example\n * ```tsx\n * <DocsPage\n *   payload={{\n *     content: \"...\",\n *     serializedContent: Content,\n *     title: \"Getting Started\",\n *     description: \"Learn how to get started\"\n *   }}\n *   toc={[{ title: \"Introduction\", slug: \"intro\", level: 2 }]}\n *   theme=\"dark\"\n *   pathname=\"/docs/getting-started\"\n *   LinkComponent={Link}\n *   localization={{\n *     onThisPage: \"In this article\"\n *   }}\n *   telemetry={{\n *     contextMenuActivity: \"DocsPageContextMenu\",\n *     contextMenuPhase: \"Start\"\n *   }}\n * />\n * ```\n */\nexport function DocsPage({\n  payload,\n  toc,\n  navTree,\n  activeHref,\n  theme,\n  className = \"\",\n  pathname,\n  markdownContent,\n  allPages,\n  baseUrl,\n  bottomLinks,\n  LinkComponent,\n  localization,\n  telemetry,\n  contextMenu,\n}: EnhancedDocsPageProps) {\n  const Content = payload.serializedContent;\n  const zonePivotGroups = payload.mdxExtracts?.zonePivotGroups || [];\n  const pivotTocItems = payload.mdxExtracts?.pivotTocItems;\n  const isFullWidth = !payload.title;\n\n  // Default localization\n  const defaultLocalization: Required<DocsPageLocalization> = {\n    onThisPage: \"On this page\",\n    loading: \"Loading...\",\n    errorTitle: \"Error\",\n    errorMessage: \"Something went wrong\",\n    notFoundTitle: \"Page not found\",\n    notFoundMessage: \"The page you're looking for doesn't exist\",\n  };\n\n  const loc = { ...defaultLocalization, ...localization };\n\n  return (\n    <ComponentsProvider LinkComponent={LinkComponent}>\n      <div\n        className={cn(\n          theme === \"dark\" && \"dark\",\n          className,\n          \"mint:flex mint:flex-col mint:flex-1 mint:min-h-0 mint:h-full mint:overflow-hidden\"\n        )}\n      >\n        <div\n          id=\"page-container\"\n          className=\"mint:bg-[#f0f0f0] mint:dark:bg-[#0f0f0f] mint:flex-1 mint:min-h-0 mint:h-full mint:flex mint:flex-col mint:overflow-hidden\"\n        >\n          <div\n            id=\"page-wrapper\"\n            className=\"mint:flex mint:rounded-tl-2xl mint:flex-1 mint:min-h-0 mint:h-full mint:overflow-hidden\"\n          >\n            <div\n              id=\"main-content\"\n              className={cn(\n                \"mint:flex-1 mint:p-8 mint:overflow-y-auto mint:overflow-x-hidden mint:rounded-tl-2xl mint:bg-white mint:dark:bg-[#1f1f1f] [scrollbar-gutter:stable] mint:overscroll-contain mint:lg:px-16 mint:lg:pt-12 [scrollbar-width:thin] [scrollbar-color:rgba(0,0,0,0.2)_transparent] dark:[scrollbar-color:rgba(255,255,255,0.2)_transparent] mint:[&::-webkit-scrollbar]:w-1 mint:[&::-webkit-scrollbar-track]:bg-transparent mint:[&::-webkit-scrollbar-thumb]:bg-black/20 mint:dark:[&::-webkit-scrollbar-thumb]:bg-white/20 mint:[&::-webkit-scrollbar-thumb]:rounded mint:[&::-webkit-scrollbar-thumb:hover]:bg-black/30 mint:dark:[&::-webkit-scrollbar-thumb:hover]:bg-white/30\"\n              )}\n            >\n              <ZonePivotProvider groups={zonePivotGroups}>\n                <div className=\"mint:flex mint:flex-row-reverse mint:gap-12 mint:justify-center mint:mx-auto mint:w-full\">\n                  {toc && toc.length > 0 && (\n                    <aside className=\"mint:w-64 mint:shrink-0 mint:ml-8 mint:max-xl:hidden mint:xl:block\">\n                      <div className=\"mint:sticky mint:top-2 mint:p-2 mint:pb-6 mint:max-h-[calc(100vh-3.5rem)] mint:overflow-y-auto\">\n                        <div className=\"mint:flex mint:items-center mint:gap-2 mint:mb-4\">\n                          <TextAlignLeftFilled className=\"mint:w-4 mint:h-4 mint:text-[#4b5563] mint:dark:text-[#9ca3af]\" />\n                          <h2 className=\"mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white\">\n                            {loc.onThisPage}\n                          </h2>\n                        </div>\n                        {pivotTocItems &&\n                        Object.keys(pivotTocItems).length > 0 ? (\n                          <PivotAwareTOC\n                            baseToc={toc}\n                            pivotTocItems={pivotTocItems}\n                          />\n                        ) : (\n                          <TableOfContents toc={toc} />\n                        )}\n                      </div>\n                    </aside>\n                  )}\n\n                  <div\n                    className={cn(\n                      \"mint:w-full mint:overflow-x-visible mint:max-w-[42rem]\",\n                      isFullWidth && \"!mint:max-w-none\"\n                    )}\n                  >\n                    {payload.title && (\n                      <header className=\"mint:mb-8\">\n                        <div className=\"mint:mb-4\">\n                          <div className=\"mint:flex mint:flex-col mint:gap-2 mint:items-start mint:sm:flex-row mint:sm:items-center mint:sm:gap-4\">\n                            <h1 className=\"mint:text-[1.875rem] mint:font-bold mint:text-[#141414] mint:dark:text-white mint:m-0 mint:leading-[1.2]\">\n                              {payload.title}\n                            </h1>\n                            {pathname && (\n                              <PageContextMenu\n                                className=\"mint:ml-auto mint:max-sm:ml-0\"\n                                pathname={pathname}\n                                markdownContent={markdownContent}\n                                allPages={allPages}\n                                baseUrl={baseUrl}\n                                onCopyMarkdown={contextMenu?.onCopyMarkdown}\n                                onViewMarkdown={contextMenu?.onViewMarkdown}\n                              />\n                            )}\n                          </div>\n                          {payload.description && (\n                            <p className=\"mint:text-lg mint:text-[#4b5563] mint:dark:text-[#d1d5db]\">\n                              {payload.description}\n                            </p>\n                          )}\n                        </div>\n                      </header>\n                    )}\n\n                    {zonePivotGroups.length > 0 && (\n                      <div className=\"mint:mb-6 mint:flex mint:flex-wrap mint:gap-4\">\n                        {zonePivotGroups.map((group) => (\n                          <ZonePivotSelector\n                            key={group.id}\n                            group={group}\n                            className=\"mint:flex mint:items-center mint:gap-2 mint:text-sm\"\n                          />\n                        ))}\n                      </div>\n                    )}\n\n                    <div className=\"mint:pt-4\">\n                      <MDXRenderer>\n                        <Content />\n                      </MDXRenderer>\n                    </div>\n                  </div>\n                </div>\n              </ZonePivotProvider>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ComponentsProvider>\n  );\n}\n\nexport type { DocsPageProps, PayloadData } from \"../types\";\n\nexport type { EnhancedDocsPageProps as DocsPagePropsWithCustomization };\n\nexport type { ContextualOption };\n"],"names":["DocsPage","payload","toc","navTree","activeHref","theme","className","pathname","markdownContent","allPages","baseUrl","bottomLinks","LinkComponent","localization","telemetry","contextMenu","Content","zonePivotGroups","_a","pivotTocItems","_b","isFullWidth","loc","jsx","ComponentsProvider","cn","ZonePivotProvider","jsxs","TextAlignLeftFilled","PivotAwareTOC","TableOfContents","PageContextMenu","group","ZonePivotSelector","MDXRenderer"],"mappings":"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"}