@mintlify/msft-sdk 1.1.26 → 1.1.28

package/dist/components/content-components/code-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-group.js","sources":["../../../src/components/content-components/code-group.tsx"],"sourcesContent":["\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport React, {\n  ComponentPropsWithoutRef,\n  ReactElement,\n  ReactNode,\n  forwardRef,\n  useCallback,\n  useState,\n  useRef,\n} from 'react';\nimport { ChevronDownFilled } from '@fluentui/react-icons';\n\nimport { cn } from '../../utils/cn';\nimport { CodeBlock } from './code-block';\nimport { CopyToClipboardButton } from './code-block';\nimport { getNodeText } from '../../utils/get-node-text';\nimport { capitalize } from '../../utils/string';\n\ntype CodeBlockProps = ComponentPropsWithoutRef<typeof CodeBlock>;\n\nexport type CodeGroupPropsBase = {\n  dropdown?: boolean;\n  isSmallText?: boolean;\n  noMargins?: boolean;\n  children?: ReactElement<CodeBlockProps>[] | ReactElement<CodeBlockProps>;\n  onChange?: (index: number) => void;\n};\n\nexport type CodeGroupProps = CodeGroupPropsBase &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof CodeGroupPropsBase | 'dir'>;\n\ntype CodeBlockChild = Exclude<React.ReactElement<CodeBlockProps>, boolean | null | undefined>;\n\nexport const CodeGroup = forwardRef<HTMLDivElement, CodeGroupProps>(function CodeGroup(\n  { children, onChange, className, dropdown, noMargins, ...restProps },\n  ref\n) {\n  // Filter out props that are incompatible with TabsPrimitive.Root\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const { defaultValue, ...props } = restProps as any;\n  const triggerRefs = useRef<Map<number, HTMLButtonElement>>(new Map());\n  const childArr = Array.isArray(children)\n    ? children\n    : (React.Children.toArray(children) as Array<CodeBlockChild>);\n\n  const [selectedTab, setSelectedTab] = useState(0);\n\n  const handleValueChange = useCallback(\n    (value: string) => {\n      const index = Number(value);\n      const wasFocusOnTab = document.activeElement?.getAttribute('role') === 'tab';\n\n      setSelectedTab(index);\n      onChange?.(index);\n\n      if (wasFocusOnTab) {\n        requestAnimationFrame(() => {\n          const trigger = triggerRefs.current.get(index);\n          if (trigger) {\n            trigger.focus();\n          }\n        });\n      }\n    },\n    [onChange]\n  );\n\n  if (!children) {\n    return null;\n  }\n\n  if (childArr.length === 0) {\n    console.warn('CodeGroup has no children, expected at least one CodeBlock child.');\n    return null;\n  }\n\n  const selectedIndex = Number(selectedTab);\n\n  const SelectedFilename = () => {\n    return (\n      <div className=\"mint:flex mint:items-center mint:gap-1.5 mint:text-xs mint:font-medium mint:min-w-0\">\n        <span className=\"mint:truncate mint:text-[#171717] mint:dark:text-[#fafafa]\">\n          {childArr[selectedIndex]?.props.fileName}\n        </span>\n      </div>\n    );\n  };\n\n  const TabList = () => {\n    return (\n      <TabsPrimitive.List className=\"mint:flex-1 mint:min-w-0 mint:text-xs mint:leading-6 mint:rounded-tl-xl mint:gap-1 mint:flex mint:overflow-x-auto mint:overflow-y-hidden\">\n        {childArr.map((child, index) => (\n          <TabItem\n            key={child.props.fileName + 'TabItem' + index}\n            value={String(index)}\n            isSelected={selectedIndex === index}\n            tabsLength={childArr.length}\n            ref={(el) => {\n              if (el) {\n                triggerRefs.current.set(index, el);\n              }\n            }}\n          >\n            {child.props.fileName}\n          </TabItem>\n        ))}\n      </TabsPrimitive.List>\n    );\n  };\n\n  const LanguageDropdown = () => {\n    return (\n      <div className=\"mint:relative\">\n        <select\n          value={childArr[selectedIndex]?.props.language || ''}\n          onChange={(e) => {\n            const language = e.target.value;\n            const index = childArr.findIndex((child) => child.props.language === language);\n            if (index !== -1) {\n              handleValueChange(String(index));\n            }\n          }}\n          className=\"mint:appearance-none mint:bg-transparent mint:border mint:border-[#e5e5e5] mint:dark:border-[#262626] mint:rounded-lg mint:px-2.5 mint:pr-7 mint:py-1 mint:text-xs mint:font-medium mint:text-[#171717] mint:dark:text-[#fafafa] mint:cursor-pointer mint:focus:outline-0\"\n        >\n          {childArr.map((child, index) => (\n            <option key={`${child.props.language}-${child.props.fileName}-${index}`} value={child.props.language}>\n              {capitalize(child.props.language || '')}\n            </option>\n          ))}\n        </select>\n        <ChevronDownFilled className=\"mint:absolute mint:right-2 mint:top-1/2 mint:-translate-y-1/2 mint:w-3.5 mint:h-3.5 mint:pointer-events-none mint:text-[#737373] mint:dark:text-[#a3a3a3]\" />\n      </div>\n    );\n  };\n\n  return (\n    <TabsPrimitive.Root\n      defaultValue={defaultValue == undefined ? undefined : (typeof defaultValue === 'string' ? defaultValue : String(defaultValue))}\n      ref={ref}\n      value={String(selectedTab)}\n      onValueChange={handleValueChange}\n      className={cn(\n        !noMargins && 'mint:mt-4 mint:mb-4',\n        'mint:flex mint:flex-col not-prose mint:relative mint:overflow-hidden mint:rounded-2xl mint:border mint:border-[#e5e5e5] mint:dark:border-[#262626] mint:bg-white mint:dark:bg-[#0a0a0a]',\n        className\n      )}\n      asChild={false}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      {...(props as any)}\n    >\n      <div\n        className={cn(\n          'mint:flex mint:items-center mint:justify-between mint:gap-2 mint:relative mint:px-2.5 mint:py-2',\n          dropdown ? '' : ''\n        )}\n      >\n        {dropdown ? <SelectedFilename /> : <TabList />}\n        <div className=\"mint:flex mint:items-center mint:justify-end mint:shrink-0 mint:gap-1.5\">\n          {dropdown && <LanguageDropdown />}\n          <CopyToClipboardButton\n            textToCopy={getNodeText(childArr[selectedIndex]?.props?.children)}\n            showTooltip={true}\n          />\n        </div>\n      </div>\n      <div className=\"mint:flex mint:flex-1 mint:overflow-hidden\">\n        {childArr.map((child, index) => {\n          return (\n            <TabsPrimitive.Content\n              key={`${child.props.fileName}-${child.props.language}-${index}`}\n              value={String(index)}\n              className=\"mint:w-full mint:min-w-full mint:max-w-full mint:h-full mint:max-h-full\"\n              tabIndex={-1}\n            >\n              <div className=\"mint:overflow-auto mint:max-h-[calc(40vh-3rem)]\">\n                {child}\n              </div>\n            </TabsPrimitive.Content>\n          );\n        })}\n      </div>\n    </TabsPrimitive.Root>\n  );\n});\n\nconst TabItem = forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  {\n    children: ReactNode;\n    value: string;\n    isSelected: boolean;\n    tabsLength: number;\n  }\n>(function TabItem({ children, value, isSelected, tabsLength }, ref) {\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      value={value}\n      className={cn(\n        'mint:group mint:flex mint:items-center mint:relative mint:gap-1.5 mint:my-1 mint:mb-1.5 mint:outline-0 mint:whitespace-nowrap mint:font-medium mint:ml-0! mint:first:ml-2.5! mint:focus:outline-2',\n        isSelected && 'mint:text-[#9263f1] mint:dark:text-[#c9aaf9]',\n        !isSelected && 'mint:text-[#737373] mint:dark:text-[#a3a3a3]'\n      )}\n    >\n      <div\n        className={cn(\n          'mint:flex mint:items-center mint:gap-1.5 mint:px-1.5 mint:rounded-lg mint:z-10',\n          tabsLength > 1 &&\n            'mint:group-hover:bg-[#f5f5f5] mint:group-hover:dark:bg-[#1a1a1a] mint:group-hover:text-[#9263f1] mint:group-hover:dark:text-[#c9aaf9]'\n        )}\n      >\n        {children}\n      </div>\n\n      {isSelected && (\n        <div className=\"mint:absolute mint:-bottom-1.5 mint:left-0 mint:right-0 mint:h-0.5 mint:rounded-full mint:bg-[#9263f1] mint:dark:bg-[#c9aaf9]\" />\n      )}\n    </TabsPrimitive.Trigger>\n  );\n});\n\nexport function CodeBlockTooltip({ text }: { text: string }) {\n  return (\n    <div\n      aria-hidden\n      className=\"mint:absolute mint:top-11 mint:left-1/2 mint:transform mint:whitespace-nowrap mint:-translate-x-1/2 mint:-translate-y-1/2 mint:peer-hover:opacity-100 mint:opacity-0 mint:text-white mint:rounded-lg mint:px-1.5 mint:py-0.5 mint:text-xs mint:bg-primary-dark\"\n    >\n      {text}\n    </div>\n  );\n}\n"],"names":["CodeGroup","forwardRef","children","onChange","className","dropdown","noMargins","restProps","ref","defaultValue","props","triggerRefs","useRef","childArr","React","selectedTab","setSelectedTab","useState","handleValueChange","useCallback","value","index","wasFocusOnTab","_a","trigger","selectedIndex","SelectedFilename","jsx","TabList","TabsPrimitive","child","TabItem","el","LanguageDropdown","jsxs","e","language","capitalize","ChevronDownFilled","cn","CopyToClipboardButton","getNodeText","_b","isSelected","tabsLength","CodeBlockTooltip","text"],"mappings":"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"}
+{"version":3,"file":"code-group.js","sources":["../../../src/components/content-components/code-group.tsx"],"sourcesContent":["\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport React, {\n  ComponentPropsWithoutRef,\n  ReactElement,\n  ReactNode,\n  forwardRef,\n  useCallback,\n  useState,\n  useRef,\n} from 'react';\nimport { ChevronDownFilled } from '@fluentui/react-icons';\n\nimport { cn } from '../../utils/cn';\nimport { CodeBlock } from './code-block';\nimport { CopyToClipboardButton } from './code-block';\nimport { getNodeText } from '../../utils/get-node-text';\nimport { capitalize } from '../../utils/string';\n\ntype CodeBlockProps = ComponentPropsWithoutRef<typeof CodeBlock>;\n\nexport type CodeGroupPropsBase = {\n  dropdown?: boolean;\n  isSmallText?: boolean;\n  noMargins?: boolean;\n  children?: ReactElement<CodeBlockProps>[] | ReactElement<CodeBlockProps>;\n  onChange?: (index: number) => void;\n};\n\nexport type CodeGroupProps = CodeGroupPropsBase &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof CodeGroupPropsBase | 'dir'>;\n\ntype CodeBlockChild = Exclude<React.ReactElement<CodeBlockProps>, boolean | null | undefined>;\n\nexport const CodeGroup = forwardRef<HTMLDivElement, CodeGroupProps>(function CodeGroup(\n  { children, onChange, className, dropdown, noMargins, ...restProps },\n  ref\n) {\n  // Filter out props that are incompatible with TabsPrimitive.Root\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const { defaultValue, ...props } = restProps as any;\n  const triggerRefs = useRef<Map<number, HTMLButtonElement>>(new Map());\n  const childArr = Array.isArray(children)\n    ? children\n    : (React.Children.toArray(children) as Array<CodeBlockChild>);\n\n  const [selectedTab, setSelectedTab] = useState(0);\n\n  const handleValueChange = useCallback(\n    (value: string) => {\n      const index = Number(value);\n      const wasFocusOnTab = document.activeElement?.getAttribute('role') === 'tab';\n\n      setSelectedTab(index);\n      onChange?.(index);\n\n      if (wasFocusOnTab) {\n        requestAnimationFrame(() => {\n          const trigger = triggerRefs.current.get(index);\n          if (trigger) {\n            trigger.focus();\n          }\n        });\n      }\n    },\n    [onChange]\n  );\n\n  if (!children) {\n    return null;\n  }\n\n  if (childArr.length === 0) {\n    console.warn('CodeGroup has no children, expected at least one CodeBlock child.');\n    return null;\n  }\n\n  const selectedIndex = Number(selectedTab);\n\n  const SelectedFilename = () => {\n    return (\n      <div className=\"mint:flex mint:items-center mint:gap-1.5 mint:text-xs mint:font-medium mint:min-w-0\">\n        <span className=\"mint:truncate mint:text-[#171717] mint:dark:text-[#fafafa]\">\n          {childArr[selectedIndex]?.props.fileName}\n        </span>\n      </div>\n    );\n  };\n\n  const TabList = () => {\n    return (\n      <TabsPrimitive.List className=\"mint:flex-1 mint:min-w-0 mint:text-xs mint:leading-6 mint:rounded-tl-xl mint:gap-1 mint:flex mint:overflow-x-auto mint:overflow-y-hidden\">\n        {childArr.map((child, index) => (\n          <TabItem\n            key={child.props.fileName + 'TabItem' + index}\n            value={String(index)}\n            isSelected={selectedIndex === index}\n            tabsLength={childArr.length}\n            ref={(el) => {\n              if (el) {\n                triggerRefs.current.set(index, el);\n              }\n            }}\n          >\n            {child.props.fileName}\n          </TabItem>\n        ))}\n      </TabsPrimitive.List>\n    );\n  };\n\n  const LanguageDropdown = () => {\n    return (\n      <div className=\"mint:relative\">\n        <select\n          value={childArr[selectedIndex]?.props.language || ''}\n          onChange={(e) => {\n            const language = e.target.value;\n            const index = childArr.findIndex((child) => child.props.language === language);\n            if (index !== -1) {\n              handleValueChange(String(index));\n            }\n          }}\n          className=\"mint:appearance-none mint:bg-transparent mint:border mint:border-[#e5e5e5] mint:dark:border-[#262626] mint:rounded-lg mint:px-2.5 mint:pr-7 mint:py-1 mint:text-xs mint:font-medium mint:text-[#171717] mint:dark:text-[#fafafa] mint:cursor-pointer mint:focus:outline-0\"\n        >\n          {childArr.map((child, index) => (\n            <option key={`${child.props.language}-${child.props.fileName}-${index}`} value={child.props.language}>\n              {capitalize(child.props.language || '')}\n            </option>\n          ))}\n        </select>\n        <ChevronDownFilled className=\"mint:absolute mint:right-2 mint:top-1/2 mint:-translate-y-1/2 mint:w-3.5 mint:h-3.5 mint:pointer-events-none mint:text-[#737373] mint:dark:text-[#a3a3a3]\" />\n      </div>\n    );\n  };\n\n  return (\n    <TabsPrimitive.Root\n      defaultValue={defaultValue == undefined ? undefined : (typeof defaultValue === 'string' ? defaultValue : String(defaultValue))}\n      ref={ref}\n      value={String(selectedTab)}\n      onValueChange={handleValueChange}\n      className={cn(\n        !noMargins && 'mint:mt-4 mint:mb-4',\n        'mint:flex mint:flex-col not-prose mint:relative mint:overflow-hidden mint:rounded-2xl mint:border mint:border-[#e5e5e5] mint:dark:border-[#262626] mint:bg-white mint:dark:bg-[#0a0a0a]',\n        className\n      )}\n      asChild={false}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      {...(props as any)}\n    >\n      <div\n        className={cn(\n          'mint:flex mint:items-center mint:justify-between mint:gap-2 mint:relative mint:px-2.5 mint:py-2',\n          dropdown ? '' : ''\n        )}\n      >\n        {dropdown ? <SelectedFilename /> : <TabList />}\n        <div className=\"mint:flex mint:items-center mint:justify-end mint:shrink-0 mint:gap-1.5\">\n          {dropdown && <LanguageDropdown />}\n          <CopyToClipboardButton\n            textToCopy={getNodeText(childArr[selectedIndex]?.props?.children)}\n            showTooltip={true}\n          />\n        </div>\n      </div>\n      <div className=\"mint:flex mint:flex-1 mint:overflow-hidden\">\n        {childArr.map((child, index) => {\n          return (\n            <TabsPrimitive.Content\n              key={`${child.props.fileName}-${child.props.language}-${index}`}\n              value={String(index)}\n              className=\"mint:w-full mint:min-w-full mint:max-w-full mint:h-full mint:max-h-full\"\n              tabIndex={-1}\n            >\n              <div className=\"mint:code-scrollbar mint:overflow-scroll mint:max-h-[calc(40vh-3rem)]\">\n                {child}\n              </div>\n            </TabsPrimitive.Content>\n          );\n        })}\n      </div>\n    </TabsPrimitive.Root>\n  );\n});\n\nconst TabItem = forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  {\n    children: ReactNode;\n    value: string;\n    isSelected: boolean;\n    tabsLength: number;\n  }\n>(function TabItem({ children, value, isSelected, tabsLength }, ref) {\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      value={value}\n      className={cn(\n        'mint:group mint:flex mint:items-center mint:relative mint:gap-1.5 mint:my-1 mint:mb-1.5 mint:outline-0 mint:whitespace-nowrap mint:font-medium mint:ml-0! mint:first:ml-2.5! mint:focus:outline-2',\n        isSelected && 'mint:text-[#9263f1] mint:dark:text-[#c9aaf9]',\n        !isSelected && 'mint:text-[#737373] mint:dark:text-[#a3a3a3]'\n      )}\n    >\n      <div\n        className={cn(\n          'mint:flex mint:items-center mint:gap-1.5 mint:px-1.5 mint:rounded-lg mint:z-10',\n          tabsLength > 1 &&\n            'mint:group-hover:bg-[#f5f5f5] mint:group-hover:dark:bg-[#1a1a1a] mint:group-hover:text-[#9263f1] mint:group-hover:dark:text-[#c9aaf9]'\n        )}\n      >\n        {children}\n      </div>\n\n      {isSelected && (\n        <div className=\"mint:absolute mint:-bottom-1.5 mint:left-0 mint:right-0 mint:h-0.5 mint:rounded-full mint:bg-[#9263f1] mint:dark:bg-[#c9aaf9]\" />\n      )}\n    </TabsPrimitive.Trigger>\n  );\n});\n\nexport function CodeBlockTooltip({ text }: { text: string }) {\n  return (\n    <div\n      aria-hidden\n      className=\"mint:absolute mint:top-11 mint:left-1/2 mint:transform mint:whitespace-nowrap mint:-translate-x-1/2 mint:-translate-y-1/2 mint:peer-hover:opacity-100 mint:opacity-0 mint:text-white mint:rounded-lg mint:px-1.5 mint:py-0.5 mint:text-xs mint:bg-primary-dark\"\n    >\n      {text}\n    </div>\n  );\n}\n"],"names":["CodeGroup","forwardRef","children","onChange","className","dropdown","noMargins","restProps","ref","defaultValue","props","triggerRefs","useRef","childArr","React","selectedTab","setSelectedTab","useState","handleValueChange","useCallback","value","index","wasFocusOnTab","_a","trigger","selectedIndex","SelectedFilename","jsx","TabList","TabsPrimitive","child","TabItem","el","LanguageDropdown","jsxs","e","language","capitalize","ChevronDownFilled","cn","CopyToClipboardButton","getNodeText","_b","isSelected","tabsLength","CodeBlockTooltip","text"],"mappings":"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"}

package/dist/components/docsLayout.js

@@ -1,6 +1,6 @@
 import { jsx as i, jsxs as b } from "react/jsx-runtime";
-import { NavTree as v } from "./nav-tree/index.js";
-import { ComponentsProvider as p } from "../context/components-context.js";
+import { NavTree as p } from "./nav-tree/index.js";
+import { ComponentsProvider as v } from "../context/components-context.js";
 import { cn as l } from "../utils/cn.js";
 /* empty css            */
 const z = ({
@@ -21,7 +21,7 @@ const z = ({
   const n = o === "dark" ? "dark" : "light", u = { ...{
     sidebarAriaLabel: "Sidebar navigation"
   }, ...c };
-  return /* @__PURE__ */ i(p, { LinkComponent: s, children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ i(v, { LinkComponent: s, children: /* @__PURE__ */ i(
     "div",
     {
       className: l(
@@ -35,11 +35,11 @@ const z = ({
           {
             "aria-label": u.sidebarAriaLabel,
             className: l(
-              "mint:flex mint:flex-col mint:shrink-0 mint:w-58 mint:h-full",
+              "mint:flex mint:flex-col mint:shrink-0 mint:w-68 mint:h-full",
               x ?? "mint:max-lg:hidden"
             ),
             children: /* @__PURE__ */ i(
-              v,
+              p,
               {
                 navTree: t,
                 activeId: a ?? e,
@@ -51,7 +51,7 @@ const z = ({
             )
           }
         ),
-        /* @__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: r })
+        /* @__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-(--borderRadiusXXLarge,1.5rem)", children: r })
       ] })
     }
   ) });

package/dist/components/docsLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"docsLayout.js","sources":["../../src/components/docsLayout.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { AnchorConfig, 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  /** Anchor configurations */\n  anchors?: AnchorConfig[];\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  anchors,\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\",\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                anchors={anchors}\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","anchors","children","activeHref","activeId","theme","className","bottomLinks","LinkComponent","localization","telemetry","showSidebar","sidebarClassName","resolvedTheme","loc","jsx","ComponentsProvider","cn","jsxs","NavTree"],"mappings":";;;;;AA2FO,MAAMA,IAAa,CAAC;AAAA,EACzB,SAAAC;AAAA,EACA,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,KAAeX,KACd,gBAAAe;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,SAAAnB;AAAA,gBACA,UAAUI,KAAYD;AAAA,gBACtB,YAAAA;AAAA,gBACA,OAAOU;AAAA,gBACP,aAAAN;AAAA,gBACA,SAAAN;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAIJ,gBAAAc,EAAC,OAAA,EAAI,WAAU,yIACZ,UAAAb,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"docsLayout.js","sources":["../../src/components/docsLayout.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { AnchorConfig, 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  /** Anchor configurations */\n  anchors?: AnchorConfig[];\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  anchors,\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-68 mint:h-full\",\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                anchors={anchors}\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-(--borderRadiusXXLarge,1.5rem)\">\n            {children}\n          </div>\n        </div>\n      </div>\n    </ComponentsProvider>\n  );\n};\n"],"names":["DocsLayout","navTree","anchors","children","activeHref","activeId","theme","className","bottomLinks","LinkComponent","localization","telemetry","showSidebar","sidebarClassName","resolvedTheme","loc","jsx","ComponentsProvider","cn","jsxs","NavTree"],"mappings":";;;;;AA2FO,MAAMA,IAAa,CAAC;AAAA,EACzB,SAAAC;AAAA,EACA,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,KAAeX,KACd,gBAAAe;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,SAAAnB;AAAA,gBACA,UAAUI,KAAYD;AAAA,gBACtB,YAAAA;AAAA,gBACA,OAAOU;AAAA,gBACP,aAAAN;AAAA,gBACA,SAAAN;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAIJ,gBAAAc,EAAC,OAAA,EAAI,WAAU,oIACZ,UAAAb,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/docsPage.js

@@ -5,7 +5,7 @@ import { PivotAwareTOC as C } from "./toc/pivot-aware-toc.js";
 import { TextAlignLeftFilled as z } from "@fluentui/react-icons";
 import { PageContextMenu as L } from "./page-context-menu.js";
 import { ComponentsProvider as j } from "../context/components-context.js";
-import { cn as s } from "../utils/cn.js";
+import { cn as a } from "../utils/cn.js";
 import { ApiExamples as y } from "../api-playground-2/ApiExamples.js";
 /* empty css            */
 import { ZonePivotProvider as E } from "./content-components/zone-pivots/zone-pivot-context.js";
@@ -17,12 +17,12 @@ function Y({
   activeHref: A,
   theme: f,
   className: b = "",
-  pathname: a,
+  pathname: s,
   markdownContent: x,
   allPages: g,
-  baseUrl: w,
+  baseUrl: p,
   bottomLinks: G,
-  LinkComponent: p,
+  LinkComponent: w,
   localization: v,
   telemetry: I,
   contextMenu: n,
@@ -37,10 +37,10 @@ function Y({
     notFoundTitle: "Page not found",
     notFoundMessage: "The page you're looking for doesn't exist"
   }, ...v };
-  return /* @__PURE__ */ t(j, { LinkComponent: p, children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(j, { LinkComponent: w, children: /* @__PURE__ */ t(
     "div",
     {
-      className: s(
+      className: a(
         f === "dark" && "dark",
         b,
         "mint:flex mint:flex-col mint:flex-1 mint:min-h-0 mint:h-full mint:overflow-hidden"
@@ -59,7 +59,7 @@ function Y({
                 "div",
                 {
                   id: "main-content",
-                  className: s(
+                  className: a(
                     "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(E, { groups: l, children: /* @__PURE__ */ m("div", { className: "mint:flex mint:flex-row-reverse mint:gap-12 mint:justify-center mint:mx-auto mint:w-full", id: "content-layout-container", children: [
@@ -79,28 +79,28 @@ function Y({
                     /* @__PURE__ */ m(
                       "div",
                       {
-                        className: s(
-                          "mint:w-full mint:overflow-x-visible mint:max-w-[42rem]",
+                        className: a(
+                          "mint:w-full mint:overflow-x-visible mint:max-w-2xl",
                           u && "mint:max-w-none!"
                         ),
                         children: [
-                          i.title && /* @__PURE__ */ t("header", { className: "mint:mb-0", children: /* @__PURE__ */ m("div", { className: "mint:mb-4", children: [
-                            /* @__PURE__ */ m("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: [
+                          i.title && /* @__PURE__ */ t("header", { className: "mint:mb-6", children: /* @__PURE__ */ m("div", { className: "mint:flex mint:flex-col mint:gap-5", children: [
+                            /* @__PURE__ */ m("div", { className: "mint:flex mint:flex-col mint:gap-2 mint:items-start", 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(
-                                L,
-                                {
-                                  className: "mint:ml-auto mint:max-sm:ml-0",
-                                  pathname: a,
-                                  markdownContent: x,
-                                  allPages: g,
-                                  baseUrl: w,
-                                  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] mint:m-0", children: i.description })
                             ] }),
-                            i.description && /* @__PURE__ */ t("p", { className: "mint:text-lg mint:text-[#4b5563] mint:dark:text-[#d1d5db]", children: i.description })
+                            s && /* @__PURE__ */ t(
+                              L,
+                              {
+                                className: "mint:shrink-0",
+                                pathname: s,
+                                markdownContent: x,
+                                allPages: g,
+                                baseUrl: p,
+                                onCopyMarkdown: n == null ? void 0 : n.onCopyMarkdown,
+                                onViewMarkdown: n == null ? void 0 : n.onViewMarkdown
+                              }
+                            )
                           ] }) }),
                           l.length > 0 && /* @__PURE__ */ t("div", { className: "mint:mb-6 mint:flex mint:flex-wrap mint:gap-4", children: l.map((h) => /* @__PURE__ */ t(
                             F,

package/dist/components/docsPage.js.map

@@ -1 +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 { ApiExamples } from \"../api-playground-2/ApiExamples\";\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  apiReferenceData2,\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\" id=\"content-layout-container\">\n                  {apiReferenceData2?.operation ? (\n                    <div className=\"mint:hidden mint:xl:!flex mint:self-start mint:sticky mint:flex-col mint:max-w-[28rem] mint:top-0 mint:gap-6\">                      \n                        <ApiExamples apiReferenceData={apiReferenceData2} />\n                    </div>\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                  ) : null}\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-0\">\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","apiReferenceData2","Content","zonePivotGroups","_a","pivotTocItems","_b","isFullWidth","loc","jsx","ComponentsProvider","cn","ZonePivotProvider","ApiExamples","jsxs","TextAlignLeftFilled","PivotAwareTOC","TableOfContents","PageContextMenu","group","ZonePivotSelector","MDXRenderer"],"mappings":"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"}
+{"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 { ApiExamples } from \"../api-playground-2/ApiExamples\";\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  apiReferenceData2,\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\" id=\"content-layout-container\">\n                  {apiReferenceData2?.operation ? (\n                    <div className=\"mint:hidden mint:xl:!flex mint:self-start mint:sticky mint:flex-col mint:max-w-[28rem] mint:top-0 mint:gap-6\">\n                      <ApiExamples apiReferenceData={apiReferenceData2} />\n                    </div>\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                  ) : null}\n\n                  <div\n                    className={cn(\n                      \"mint:w-full mint:overflow-x-visible mint:max-w-2xl\",\n                      isFullWidth && \"mint:max-w-none!\"\n                    )}\n                  >\n                    {payload.title && (\n                      <header className=\"mint:mb-6\">\n                        <div className=\"mint:flex mint:flex-col mint:gap-5\">\n                          <div className=\"mint:flex mint:flex-col mint:gap-2 mint:items-start\">\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                            {payload.description && (\n                              <p className=\"mint:text-lg mint:text-[#4b5563] mint:dark:text-[#d1d5db] mint:m-0\">\n                                {payload.description}\n                              </p>\n                            )}\n                          </div>\n                          {pathname && (\n                            <PageContextMenu\n                              className=\"mint:shrink-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                      </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","apiReferenceData2","Content","zonePivotGroups","_a","pivotTocItems","_b","isFullWidth","loc","jsx","ComponentsProvider","cn","ZonePivotProvider","ApiExamples","jsxs","TextAlignLeftFilled","PivotAwareTOC","TableOfContents","PageContextMenu","group","ZonePivotSelector","MDXRenderer"],"mappings":"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"}