@flamingo-stack/openframe-frontend-core 0.0.285 → 0.0.286

package/dist/chunk-YVB3VDIQ.js

@@ -0,0 +1,1594 @@
+"use client";
+import {
+  DocSearchBar,
+  useDocSearch
+} from "./chunk-7NM7DEUK.js";
+import {
+  DEFAULT_FOLDER_INDEX_FILE,
+  MobileNavigationDropdown,
+  MultiLevelNavigation,
+  StickySectionNav,
+  findDocNodeByPath,
+  getDocAncestorNodeIds,
+  scrollElementIntoView,
+  stripFolderIndexFromPath
+} from "./chunk-DDAT4RKX.js";
+import {
+  PageHeading
+} from "./chunk-VRSXJ5QJ.js";
+import {
+  cn,
+  init_cn
+} from "./chunk-XTCBRQN2.js";
+
+// src/components/docs/doc-viewer.tsx
+import { useMemo as useMemo2 } from "react";
+
+// src/components/persistent-filter-controls.tsx
+init_cn();
+import { jsx, jsxs } from "react/jsx-runtime";
+function PersistentFilterControls({
+  isLoading,
+  children,
+  className,
+  disabledOpacity = 0.6,
+  transitionDuration = 300,
+  preventInteraction = true
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative transition-all ease-in-out",
+        isLoading && preventInteraction && "pointer-events-none",
+        className
+      ),
+      style: {
+        opacity: isLoading ? disabledOpacity : 1,
+        transitionDuration: `${transitionDuration}ms`
+      },
+      role: "region",
+      "aria-label": "Filter controls",
+      "aria-busy": isLoading,
+      "data-loading": isLoading,
+      children: [
+        isLoading && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sr-only",
+            role: "status",
+            "aria-live": "polite",
+            children: "Filters temporarily disabled while loading content"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "transition-all ease-in-out",
+              isLoading && "cursor-not-allowed"
+            ),
+            style: {
+              transitionDuration: `${transitionDuration}ms`
+            },
+            children
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-2 right-2 z-10",
+            role: "status",
+            "aria-label": "Loading filters",
+            children: /* @__PURE__ */ jsx("div", { className: "w-4 h-4 border-2 border-ods-border border-t-[#FFC008] rounded-full animate-spin" })
+          }
+        )
+      ]
+    }
+  );
+}
+function PersistentSearchContainer({
+  isLoading,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    PersistentFilterControls,
+    {
+      isLoading,
+      preventInteraction: false,
+      className,
+      children
+    }
+  );
+}
+function PersistentSidebar({
+  isLoading,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    PersistentFilterControls,
+    {
+      isLoading,
+      disabledOpacity: 0.5,
+      className: cn("lg:sticky lg:top-20", className),
+      children
+    }
+  );
+}
+function PersistentMobileDropdown({
+  isLoading,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    PersistentFilterControls,
+    {
+      isLoading,
+      disabledOpacity: 0.7,
+      className: cn("lg:hidden", className),
+      children
+    }
+  );
+}
+
+// src/components/loading/page-layout-skeleton.tsx
+init_cn();
+
+// src/components/loading/unified-skeleton.tsx
+init_cn();
+import { jsx as jsx2 } from "react/jsx-runtime";
+function UnifiedSkeleton({
+  className,
+  variant = "default",
+  width,
+  height,
+  animate = true,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const baseClasses = "bg-[#2A2A2A]";
+  const variantClasses = {
+    default: "rounded-md",
+    text: "rounded-sm",
+    circular: "rounded-full",
+    rectangular: "rounded-none"
+  };
+  const defaultHeights = {
+    default: "h-4",
+    text: "h-4",
+    circular: "h-12 w-12",
+    rectangular: "h-4"
+  };
+  const animationClasses = animate ? "animate-pulse motion-reduce:animate-none" : "";
+  const style = {
+    width,
+    height
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        baseClasses,
+        variantClasses[variant],
+        !height && !style.height && defaultHeights[variant],
+        !width && !style.width && variant !== "circular" && "w-full",
+        animationClasses,
+        className
+      ),
+      style,
+      role: "status",
+      "aria-label": ariaLabel || "Loading content",
+      ...props
+    }
+  );
+}
+var TextSkeleton = {
+  /**
+   * Large heading skeleton (h1, h2)
+   */
+  Heading: ({ className, ...props }) => /* @__PURE__ */ jsx2(
+    UnifiedSkeleton,
+    {
+      variant: "text",
+      className: cn("h-8 md:h-10 lg:h-12", className),
+      "aria-label": "Loading heading",
+      ...props
+    }
+  ),
+  /**
+   * Medium heading skeleton (h3, h4)
+   */
+  Subheading: ({ className, ...props }) => /* @__PURE__ */ jsx2(
+    UnifiedSkeleton,
+    {
+      variant: "text",
+      className: cn("h-6 md:h-7 lg:h-8", className),
+      "aria-label": "Loading subheading",
+      ...props
+    }
+  ),
+  /**
+   * Body text skeleton
+   */
+  Body: ({ className, ...props }) => /* @__PURE__ */ jsx2(
+    UnifiedSkeleton,
+    {
+      variant: "text",
+      className: cn("h-4 md:h-5", className),
+      "aria-label": "Loading text",
+      ...props
+    }
+  ),
+  /**
+   * Small text skeleton (captions, metadata)
+   */
+  Caption: ({ className, ...props }) => /* @__PURE__ */ jsx2(
+    UnifiedSkeleton,
+    {
+      variant: "text",
+      className: cn("h-3 md:h-4", className),
+      "aria-label": "Loading caption",
+      ...props
+    }
+  )
+};
+var InteractiveSkeleton = {
+  /**
+   * Button skeleton with proper touch targets
+   */
+  Button: ({ className, ...props }) => /* @__PURE__ */ jsx2(
+    UnifiedSkeleton,
+    {
+      variant: "default",
+      className: cn("h-10 md:h-12 w-32 md:w-40", className),
+      "aria-label": "Loading button",
+      ...props
+    }
+  ),
+  /**
+   * Input field skeleton
+   */
+  Input: ({ className, ...props }) => /* @__PURE__ */ jsx2(
+    UnifiedSkeleton,
+    {
+      variant: "default",
+      className: cn("h-10 md:h-12 w-full", className),
+      "aria-label": "Loading input field",
+      ...props
+    }
+  ),
+  /**
+   * Filter chip skeleton
+   */
+  Chip: ({ className, ...props }) => /* @__PURE__ */ jsx2(
+    UnifiedSkeleton,
+    {
+      variant: "default",
+      className: cn("h-8 w-20 rounded-full", className),
+      "aria-label": "Loading filter",
+      ...props
+    }
+  )
+};
+var MediaSkeleton = {
+  /**
+   * Avatar/profile image skeleton
+   */
+  Avatar: ({ size = "md", className, ...props }) => {
+    const sizeClasses = {
+      sm: "h-8 w-8",
+      md: "h-12 w-12",
+      lg: "h-16 w-16"
+    };
+    return /* @__PURE__ */ jsx2(
+      UnifiedSkeleton,
+      {
+        variant: "circular",
+        className: cn(sizeClasses[size], className),
+        "aria-label": "Loading profile image",
+        ...props
+      }
+    );
+  },
+  /**
+   * Card image skeleton (1200×630 OG aspect — matches entity-cards default
+   * so loading state never causes a height shift when card data arrives)
+   */
+  CardImage: ({ className, ...props }) => /* @__PURE__ */ jsx2(
+    UnifiedSkeleton,
+    {
+      variant: "default",
+      className: cn("aspect-[1200/630] w-full", className),
+      "aria-label": "Loading image",
+      ...props
+    }
+  ),
+  /**
+   * Icon skeleton
+   */
+  Icon: ({ size = "md", className, ...props }) => {
+    const sizeClasses = {
+      sm: "h-4 w-4",
+      md: "h-6 w-6",
+      lg: "h-8 w-8"
+    };
+    return /* @__PURE__ */ jsx2(
+      UnifiedSkeleton,
+      {
+        variant: "default",
+        className: cn(sizeClasses[size], className),
+        "aria-label": "Loading icon",
+        ...props
+      }
+    );
+  }
+};
+
+// src/components/loading/card-skeleton.tsx
+init_cn();
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function CardSkeleton({
+  className,
+  containerClassName,
+  variant = "vendor",
+  showActions = true,
+  showMetadata = true,
+  ...props
+}) {
+  const cardContent = {
+    vendor: /* @__PURE__ */ jsx3(VendorCardContent, { showActions, showMetadata }),
+    blog: /* @__PURE__ */ jsx3(BlogCardContent, { showActions, showMetadata }),
+    category: /* @__PURE__ */ jsx3(CategoryCardContent, {}),
+    alternative: /* @__PURE__ */ jsx3(AlternativeCardContent, { showActions })
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        containerClassName || "bg-ods-card border border-ods-border",
+        "rounded-lg overflow-hidden",
+        // Flex layouts for certain variants
+        variant === "blog" && "h-full flex flex-col",
+        variant === "vendor" && "h-full flex flex-col",
+        className
+      ),
+      role: "status",
+      "aria-label": `Loading ${variant} card`,
+      ...props,
+      children: cardContent[variant]
+    }
+  );
+}
+function VendorCardContent({ showActions, showMetadata }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "p-4 gap-3 flex flex-col", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-3 w-full", children: [
+      /* @__PURE__ */ jsx3("div", { className: "w-[60px] h-[60px] bg-ods-bg border border-ods-border rounded-lg p-2 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx3(MediaSkeleton.Avatar, { size: "sm", className: "w-11 h-11" }) }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex-1 flex flex-col justify-center py-2 min-w-0 space-y-1", children: [
+        /* @__PURE__ */ jsx3(TextSkeleton.Subheading, { className: "w-3/4" }),
+        /* @__PURE__ */ jsx3(TextSkeleton.Caption, { className: "w-1/2" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "w-full h-12 overflow-hidden flex items-center", children: /* @__PURE__ */ jsxs2("div", { className: "space-y-1 w-full", children: [
+      /* @__PURE__ */ jsx3(TextSkeleton.Body, { className: "w-full" }),
+      /* @__PURE__ */ jsx3(TextSkeleton.Body, { className: "w-2/3" })
+    ] }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 w-full min-w-0", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 md:gap-4 min-w-0 flex-shrink", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+          /* @__PURE__ */ jsx3(MediaSkeleton.Icon, { size: "sm", className: "w-5 h-5" }),
+          /* @__PURE__ */ jsx3(TextSkeleton.Caption, { className: "w-8" })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+          /* @__PURE__ */ jsx3(MediaSkeleton.Icon, { size: "sm", className: "w-5 h-5" }),
+          /* @__PURE__ */ jsx3(TextSkeleton.Caption, { className: "w-10" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5 bg-ods-bg border border-ods-border rounded px-2.5 py-1.5", children: [
+        /* @__PURE__ */ jsx3("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx3(MediaSkeleton.Icon, { size: "sm", className: "w-2.5 h-2.5" }) }),
+        /* @__PURE__ */ jsx3(TextSkeleton.Caption, { className: "w-16" })
+      ] }) })
+    ] })
+  ] });
+}
+function BlogCardContent({ showActions, showMetadata }) {
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3("div", { className: "blog-card-image-container relative w-full aspect-[1200/630] overflow-hidden bg-ods-bg", children: /* @__PURE__ */ jsx3(MediaSkeleton.CardImage, {}) }),
+    /* @__PURE__ */ jsxs2("div", { className: "p-4 flex flex-col flex-grow", children: [
+      /* @__PURE__ */ jsx3("div", { className: "mb-3 flex items-center min-h-[50.4px] md:min-h-[56px] lg:min-h-[61.6px]", children: /* @__PURE__ */ jsxs2("div", { className: "space-y-1 w-full", children: [
+        /* @__PURE__ */ jsx3(TextSkeleton.Subheading, { className: "w-full" }),
+        /* @__PURE__ */ jsx3(TextSkeleton.Subheading, { className: "w-3/4" })
+      ] }) }),
+      /* @__PURE__ */ jsxs2("div", { className: "mb-3 flex gap-2 h-[28px] items-center", children: [
+        /* @__PURE__ */ jsx3(InteractiveSkeleton.Chip, { className: "w-16" }),
+        /* @__PURE__ */ jsx3(InteractiveSkeleton.Chip, { className: "w-12" })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "mb-3 flex items-center min-h-[42px] md:min-h-[45px] lg:min-h-[48px]", children: /* @__PURE__ */ jsxs2("div", { className: "space-y-1 w-full", children: [
+        /* @__PURE__ */ jsx3(TextSkeleton.Body, { className: "w-full" }),
+        /* @__PURE__ */ jsx3(TextSkeleton.Body, { className: "w-1/2" })
+      ] }) }),
+      showActions && /* @__PURE__ */ jsx3("div", { className: "pt-2", children: /* @__PURE__ */ jsx3(InteractiveSkeleton.Button, { className: "w-24 h-8" }) }),
+      showMetadata && /* @__PURE__ */ jsx3("div", { className: "mt-auto", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-4 pt-4 border-t border-ods-border", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx3(MediaSkeleton.Avatar, { size: "sm" }),
+          /* @__PURE__ */ jsx3(TextSkeleton.Caption, { className: "w-16" })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 text-[#767676] shrink-0", children: [
+          /* @__PURE__ */ jsx3(TextSkeleton.Caption, { className: "w-12" }),
+          /* @__PURE__ */ jsx3("div", { className: "w-1 h-1 bg-[#767676] rounded-full" }),
+          /* @__PURE__ */ jsx3(TextSkeleton.Caption, { className: "w-16" })
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+function CategoryCardContent() {
+  return /* @__PURE__ */ jsxs2("div", { className: "p-4 md:p-6 space-y-4", children: [
+    /* @__PURE__ */ jsx3("div", { className: "flex gap-2 md:gap-3", children: Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ jsx3(
+      MediaSkeleton.Icon,
+      {
+        size: "lg",
+        className: "flex-shrink-0"
+      },
+      index
+    )) }),
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx3(TextSkeleton.Subheading, { className: "w-3/4" }),
+        /* @__PURE__ */ jsx3(TextSkeleton.Caption, { className: "w-1/2" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-start md:items-end justify-between gap-4 md:gap-6", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx3(TextSkeleton.Body, { className: "w-full" }),
+          /* @__PURE__ */ jsx3(TextSkeleton.Body, { className: "w-2/3" })
+        ] }),
+        /* @__PURE__ */ jsx3(InteractiveSkeleton.Button, { className: "w-10 h-10 md:w-12 md:h-12 flex-shrink-0" })
+      ] })
+    ] })
+  ] });
+}
+function AlternativeCardContent({ showActions }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4 p-4", children: [
+    /* @__PURE__ */ jsx3(MediaSkeleton.Avatar, { size: "md", className: "flex-shrink-0" }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx3(TextSkeleton.Subheading, { className: "w-1/3" }),
+        /* @__PURE__ */ jsx3(TextSkeleton.Caption, { className: "w-16" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx3(TextSkeleton.Body, { className: "w-full" }),
+        /* @__PURE__ */ jsx3(TextSkeleton.Body, { className: "w-5/6" })
+      ] }),
+      showActions && /* @__PURE__ */ jsx3("div", { className: "pt-2", children: /* @__PURE__ */ jsx3(InteractiveSkeleton.Button, { className: "w-20 h-8" }) })
+    ] })
+  ] });
+}
+function CardSkeletonGrid({
+  count = 6,
+  variant = "vendor",
+  className,
+  containerClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "grid gap-4 md:gap-6",
+        // Responsive grid based on card type
+        variant === "vendor" && "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+        variant === "blog" && "grid-cols-1 md:grid-cols-2",
+        variant === "category" && "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+        variant === "alternative" && "grid-cols-1",
+        className
+      ),
+      role: "status",
+      "aria-label": `Loading ${count} ${variant} cards`,
+      children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx3(
+        CardSkeleton,
+        {
+          variant,
+          containerClassName,
+          ...props
+        },
+        index
+      ))
+    }
+  );
+}
+
+// src/components/loading/page-layout-skeleton.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function AnnouncementBarSkeleton() {
+  return /* @__PURE__ */ jsx4("div", { className: "bg-[#2A2A2A] relative w-full animate-pulse", children: /* @__PURE__ */ jsx4("div", { className: "flex flex-row items-center relative w-full", children: /* @__PURE__ */ jsxs3("div", { className: "box-border flex flex-row gap-4 md:gap-6 items-center justify-start pl-4 md:pl-6 pr-12 md:pr-16 py-3 md:py-4 relative w-full", children: [
+    /* @__PURE__ */ jsx4("div", { className: "relative shrink-0 w-6 h-6 md:w-8 md:h-8 bg-ods-border rounded" }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0 space-y-1 md:space-y-2", children: [
+      /* @__PURE__ */ jsx4("div", { className: "h-[14px] md:h-[18px] bg-ods-border rounded w-3/4 max-w-md" }),
+      /* @__PURE__ */ jsx4("div", { className: "h-[12px] md:h-[18px] bg-ods-border rounded w-full max-w-lg hidden md:block" })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "absolute right-2 top-2 w-6 h-6 bg-ods-border rounded" })
+  ] }) }) });
+}
+function HeroSkeleton() {
+  return /* @__PURE__ */ jsxs3(
+    "section",
+    {
+      className: "w-full flex flex-col items-center justify-center py-12 px-4 md:py-20 md:px-8 text-center animate-pulse",
+      style: {
+        background: "radial-gradient(circle at 50% 0%, #242323 0%, #1A1A1A 100%)"
+      },
+      children: [
+        /* @__PURE__ */ jsx4(TextSkeleton.Heading, { className: "h-12 md:h-20 lg:h-24 mb-4 md:mb-6 max-w-4xl w-full" }),
+        /* @__PURE__ */ jsxs3("div", { className: "space-y-3 mb-8 md:mb-10 max-w-4xl w-full px-2", children: [
+          /* @__PURE__ */ jsx4(TextSkeleton.Body, { className: "h-5 md:h-7" }),
+          /* @__PURE__ */ jsx4(TextSkeleton.Body, { className: "h-5 md:h-7 w-3/4 mx-auto" })
+        ] }),
+        /* @__PURE__ */ jsx4(InteractiveSkeleton.Button, { className: "w-full md:w-64 h-12" })
+      ]
+    }
+  );
+}
+function SearchContainerSkeleton({
+  className,
+  showFilters = true
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn("space-y-4", className || ""), children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex gap-2 md:gap-4", children: [
+      /* @__PURE__ */ jsx4(InteractiveSkeleton.Input, { className: "flex-1" }),
+      /* @__PURE__ */ jsx4(InteractiveSkeleton.Button, { className: "w-32 md:w-40" })
+    ] }),
+    showFilters && /* @__PURE__ */ jsxs3("div", { className: "flex gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsx4(InteractiveSkeleton.Chip, {}),
+      /* @__PURE__ */ jsx4(InteractiveSkeleton.Chip, { className: "w-24" }),
+      /* @__PURE__ */ jsx4(InteractiveSkeleton.Chip, { className: "w-16" }),
+      /* @__PURE__ */ jsx4(InteractiveSkeleton.Chip, { className: "w-20" })
+    ] })
+  ] });
+}
+function CategorySidebarSkeleton({ className }) {
+  const items = [
+    { type: "file", width: "w-20", hasBadge: false },
+    { type: "folder", width: "w-24", hasBadge: true },
+    { type: "folder", width: "w-20", hasBadge: true },
+    { type: "folder", width: "w-24", hasBadge: true },
+    { type: "folder", width: "w-16", hasBadge: true },
+    { type: "folder", width: "w-20", hasBadge: true },
+    { type: "folder", width: "w-28", hasBadge: true },
+    { type: "folder", width: "w-16", hasBadge: true },
+    { type: "folder", width: "w-24", hasBadge: true },
+    { type: "file", width: "w-28" },
+    { type: "file", width: "w-36" }
+  ];
+  return /* @__PURE__ */ jsxs3("div", { className: cn("w-full lg:w-[320px]", className), children: [
+    /* @__PURE__ */ jsx4(UnifiedSkeleton, { className: "h-[14px] w-24 rounded mb-4" }),
+    /* @__PURE__ */ jsx4("div", { className: "space-y-1.5", children: items.map((item, index) => /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-between py-4 px-4 rounded-lg border border-ods-border min-h-[50px]",
+          index === 0 ? "bg-ods-accent/20" : "bg-ods-card"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ jsx4(UnifiedSkeleton, { className: "w-4 h-4 shrink-0 rounded" }),
+            /* @__PURE__ */ jsx4(UnifiedSkeleton, { className: `h-[14px] ${item.width} rounded` })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 h-[18px]", children: [
+            item.hasBadge && /* @__PURE__ */ jsx4(UnifiedSkeleton, { className: "h-[18px] w-14 rounded" }),
+            item.type === "folder" && /* @__PURE__ */ jsx4(UnifiedSkeleton, { className: "w-4 h-4 rounded" })
+          ] })
+        ]
+      },
+      index
+    )) })
+  ] });
+}
+function BreadcrumbSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex items-center space-x-1 mb-6", className), children: [
+    /* @__PURE__ */ jsx4(TextSkeleton.Caption, { className: "w-16" }),
+    /* @__PURE__ */ jsx4(UnifiedSkeleton, { variant: "default", className: "w-4 h-4 rounded-full" }),
+    /* @__PURE__ */ jsx4(TextSkeleton.Caption, { className: "w-24" }),
+    /* @__PURE__ */ jsx4(UnifiedSkeleton, { variant: "default", className: "w-4 h-4 rounded-full" }),
+    /* @__PURE__ */ jsx4(TextSkeleton.Caption, { className: "w-32" }),
+    /* @__PURE__ */ jsx4(UnifiedSkeleton, { variant: "default", className: "w-4 h-4 rounded-full" }),
+    /* @__PURE__ */ jsx4(TextSkeleton.Caption, { className: "w-24" })
+  ] });
+}
+function ResultsHeaderSkeleton({ className }) {
+  return /* @__PURE__ */ jsx4("div", { className: cn("flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6", className), children: /* @__PURE__ */ jsx4("div", { className: "space-y-1", children: /* @__PURE__ */ jsx4(TextSkeleton.Body, { className: "w-48" }) }) });
+}
+function TwoColumnLayoutSkeleton({
+  className,
+  sidebarContent,
+  mainContent,
+  sidebarPosition = "left"
+}) {
+  const sidebar = sidebarContent || /* @__PURE__ */ jsx4(CategorySidebarSkeleton, {});
+  const main = mainContent || /* @__PURE__ */ jsx4(CardSkeletonGrid, { count: 6 });
+  return /* @__PURE__ */ jsx4("div", { className: cn(
+    "grid grid-cols-1 lg:grid-cols-[320px_1fr] gap-6 lg:gap-8",
+    sidebarPosition === "right" && "lg:grid-cols-[1fr_320px]",
+    className
+  ), children: sidebarPosition === "left" ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("aside", { className: "order-2 lg:order-1", children: sidebar }),
+    /* @__PURE__ */ jsx4("main", { className: "order-1 lg:order-2", children: main })
+  ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("main", { className: "order-1", children: main }),
+    /* @__PURE__ */ jsx4("aside", { className: "order-2", children: sidebar })
+  ] }) });
+}
+function ArticleLayoutSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs3("article", { className: cn("max-w-4xl mx-auto", className), children: [
+    /* @__PURE__ */ jsxs3("header", { className: "mb-8 md:mb-12 space-y-4 md:space-y-6", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx4(InteractiveSkeleton.Chip, {}),
+        /* @__PURE__ */ jsx4(InteractiveSkeleton.Chip, { className: "w-16" })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx4(TextSkeleton.Heading, { className: "w-full" }),
+        /* @__PURE__ */ jsx4(TextSkeleton.Heading, { className: "w-3/4" })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-4 pt-4 border-t border-ods-divider", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx4(MediaSkeleton.Avatar, { size: "sm" }),
+          /* @__PURE__ */ jsx4(TextSkeleton.Caption, { className: "w-24" })
+        ] }),
+        /* @__PURE__ */ jsx4(TextSkeleton.Caption, { className: "w-20" }),
+        /* @__PURE__ */ jsx4(TextSkeleton.Caption, { className: "w-16" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "mb-8 md:mb-12", children: /* @__PURE__ */ jsx4(MediaSkeleton.CardImage, { className: "w-full h-64 md:h-96" }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "prose prose-invert max-w-none space-y-6", children: [
+      Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx4(TextSkeleton.Body, { className: "w-full" }),
+        /* @__PURE__ */ jsx4(TextSkeleton.Body, { className: "w-full" }),
+        /* @__PURE__ */ jsx4(TextSkeleton.Body, { className: "w-5/6" }),
+        /* @__PURE__ */ jsx4(TextSkeleton.Body, { className: "w-3/4" })
+      ] }, index)),
+      /* @__PURE__ */ jsxs3("div", { className: "py-4", children: [
+        /* @__PURE__ */ jsx4(TextSkeleton.Subheading, { className: "w-2/3 mb-4" }),
+        /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx4(TextSkeleton.Body, { className: "w-full" }),
+          /* @__PURE__ */ jsx4(TextSkeleton.Body, { className: "w-4/5" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function VendorDetailLayoutSkeleton({ className }) {
+  return /* @__PURE__ */ jsx4("main", { className: cn("bg-ods-bg min-h-screen", className), children: /* @__PURE__ */ jsxs3("div", { className: "max-w-[1920px] mx-auto px-6 md:px-20 py-6 md:py-10", children: [
+    /* @__PURE__ */ jsx4(BreadcrumbSkeleton, { className: "mb-6" }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col lg:flex-row lg:gap-10", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "mb-10", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex gap-6 mb-6", children: [
+            /* @__PURE__ */ jsx4("div", { className: "w-20 h-20 bg-ods-card border border-ods-border rounded-lg animate-pulse flex-shrink-0" }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-3", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsx4("div", { className: "h-12 md:h-16 lg:h-20 bg-[#2A2A2A] rounded animate-pulse w-80 max-w-full" }),
+                /* @__PURE__ */ jsx4("div", { className: "h-5 md:h-6 bg-[#2A2A2A] rounded animate-pulse w-32" })
+              ] }),
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx4("div", { className: "h-8 bg-[#2A2A2A] rounded animate-pulse w-20" }),
+                /* @__PURE__ */ jsx4("div", { className: "h-8 bg-[#2A2A2A] rounded animate-pulse w-16" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx4("div", { className: "w-full h-[300px] md:h-[400px] lg:h-[500px] bg-ods-card border border-ods-border rounded-lg animate-pulse mb-2" }),
+          /* @__PURE__ */ jsx4("div", { className: "text-center", children: /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-24 mx-auto" }) })
+        ] }),
+        /* @__PURE__ */ jsx4("div", { className: "lg:hidden mb-10", children: /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx4("div", { className: "h-12 bg-ods-card border border-ods-border rounded-lg animate-pulse" }),
+          /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx4("div", { className: "h-12 bg-ods-card border border-ods-border rounded-lg animate-pulse" }),
+            /* @__PURE__ */ jsx4("div", { className: "h-12 bg-ods-card border border-ods-border rounded-lg animate-pulse" })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "border border-ods-border rounded-lg overflow-hidden", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "bg-ods-card p-4 flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx4("div", { className: "w-8 h-8 bg-[#2A2A2A] rounded animate-pulse" }),
+              /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-20" }),
+                /* @__PURE__ */ jsx4("div", { className: "h-6 bg-[#2A2A2A] rounded animate-pulse w-12" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx4("div", { className: "p-4 space-y-3", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx4("div", { className: "w-6 h-6 bg-[#2A2A2A] rounded animate-pulse" }),
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-end gap-1", children: [
+                /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-12" }),
+                /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded animate-pulse w-8" })
+              ] })
+            ] }, i)) })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx4("div", { className: "h-12 bg-ods-card border border-ods-border rounded-lg animate-pulse" }),
+            /* @__PURE__ */ jsx4("div", { className: "h-12 bg-ods-card border border-ods-border rounded-lg animate-pulse" }),
+            /* @__PURE__ */ jsx4("div", { className: "h-12 bg-ods-card border border-ods-border rounded-lg animate-pulse" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-6 mb-20", children: [
+          /* @__PURE__ */ jsx4("div", { className: "h-8 md:h-10 bg-[#2A2A2A] rounded animate-pulse w-48" }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsx4("div", { className: "h-5 bg-[#2A2A2A] rounded animate-pulse w-48" }),
+            /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx4("div", { className: "h-10 bg-ods-card border border-ods-border rounded-lg animate-pulse w-24" }, i)) })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsx4("div", { className: "h-5 bg-[#2A2A2A] rounded animate-pulse w-52" }),
+            /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx4("div", { className: "h-10 bg-ods-card border border-ods-border rounded-lg animate-pulse w-28" }, i)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-6 mb-20", children: [
+          /* @__PURE__ */ jsx4("div", { className: "h-8 md:h-10 bg-[#2A2A2A] rounded animate-pulse w-64" }),
+          /* @__PURE__ */ jsx4("div", { className: "bg-ods-card border border-ods-border rounded-lg p-6 md:p-8", children: /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx4("div", { className: "h-6 bg-[#2A2A2A] rounded animate-pulse" }),
+            /* @__PURE__ */ jsx4("div", { className: "h-6 bg-[#2A2A2A] rounded animate-pulse" }),
+            /* @__PURE__ */ jsx4("div", { className: "h-6 bg-[#2A2A2A] rounded animate-pulse w-5/6" }),
+            /* @__PURE__ */ jsx4("div", { className: "h-6 bg-[#2A2A2A] rounded animate-pulse w-4/5" })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-6 mb-20", children: [
+          /* @__PURE__ */ jsx4("div", { className: "h-8 md:h-10 bg-[#2A2A2A] rounded animate-pulse w-72" }),
+          /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs3("div", { className: "bg-ods-card border border-ods-border rounded-lg p-4 flex gap-4", children: [
+            /* @__PURE__ */ jsx4("div", { className: "w-12 h-12 bg-[#2A2A2A] rounded flex-shrink-0 animate-pulse" }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex-1 space-y-2", children: [
+              /* @__PURE__ */ jsx4("div", { className: "h-5 bg-[#2A2A2A] rounded animate-pulse w-3/4" }),
+              /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse" })
+            ] })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-6 mb-20", children: [
+          /* @__PURE__ */ jsx4("div", { className: "h-8 md:h-10 bg-[#2A2A2A] rounded animate-pulse w-80" }),
+          /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-6", children: [
+              /* @__PURE__ */ jsx4("div", { className: "h-5 bg-[#2A2A2A] rounded animate-pulse w-16" }),
+              Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs3("div", { className: "bg-ods-card border border-ods-border rounded-lg p-4 flex gap-3", children: [
+                /* @__PURE__ */ jsx4("div", { className: "w-12 h-12 bg-ods-bg border border-ods-border rounded flex-shrink-0 animate-pulse" }),
+                /* @__PURE__ */ jsxs3("div", { className: "flex-1 space-y-2", children: [
+                  /* @__PURE__ */ jsx4("div", { className: "h-5 bg-[#2A2A2A] rounded animate-pulse w-2/3" }),
+                  /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse" })
+                ] })
+              ] }, i))
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-6", children: [
+              /* @__PURE__ */ jsx4("div", { className: "h-5 bg-[#2A2A2A] rounded animate-pulse w-16" }),
+              Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs3("div", { className: "bg-ods-card border border-ods-border rounded-lg p-4 flex gap-3", children: [
+                /* @__PURE__ */ jsx4("div", { className: "w-12 h-12 bg-ods-bg border border-ods-border rounded flex-shrink-0 animate-pulse" }),
+                /* @__PURE__ */ jsxs3("div", { className: "flex-1 space-y-2", children: [
+                  /* @__PURE__ */ jsx4("div", { className: "h-5 bg-[#2A2A2A] rounded animate-pulse w-2/3" }),
+                  /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse" })
+                ] })
+              ] }, i))
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-6 mb-20", children: [
+          /* @__PURE__ */ jsx4("div", { className: "h-8 md:h-10 bg-[#2A2A2A] rounded animate-pulse w-72" }),
+          /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs3("div", { className: "bg-ods-card border border-ods-border rounded-lg p-6 space-y-4", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-4", children: [
+              /* @__PURE__ */ jsx4("div", { className: "w-16 h-16 bg-ods-bg border border-ods-border rounded-lg animate-pulse flex-shrink-0" }),
+              /* @__PURE__ */ jsxs3("div", { className: "flex-1 space-y-2", children: [
+                /* @__PURE__ */ jsx4("div", { className: "h-6 bg-[#2A2A2A] rounded animate-pulse w-3/4" }),
+                /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-1/2" })
+              ] }),
+              /* @__PURE__ */ jsx4("div", { className: "h-6 bg-[#2A2A2A] rounded animate-pulse w-20" })
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse" }),
+              /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-5/6" }),
+              /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-4/5" })
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between pt-2 border-t border-ods-border", children: [
+              /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-16" }),
+              /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-20" })
+            ] })
+          ] }, i)) }),
+          /* @__PURE__ */ jsx4("div", { className: "h-12 bg-[#2A2A2A] rounded-md animate-pulse" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-6 mb-20", children: [
+          /* @__PURE__ */ jsx4("div", { className: "h-8 md:h-10 bg-[#2A2A2A] rounded animate-pulse w-64" }),
+          /* @__PURE__ */ jsx4("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex-1 bg-ods-bg border border-ods-border rounded-lg overflow-hidden", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "border-b border-ods-border p-3", children: [
+                /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded animate-pulse w-8 mb-2" }),
+                /* @__PURE__ */ jsx4("div", { className: "h-6 bg-[#2A2A2A] rounded animate-pulse w-full" })
+              ] }),
+              /* @__PURE__ */ jsxs3("div", { className: "p-3", children: [
+                /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded animate-pulse w-16 mb-2" }),
+                /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-full" }),
+                  /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-3/4" }),
+                  /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-1/2" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx4("div", { className: "flex items-stretch", children: /* @__PURE__ */ jsx4("div", { className: "h-[120px] w-20 bg-[#2A2A2A] rounded-lg animate-pulse" }) })
+          ] }) }),
+          /* @__PURE__ */ jsx4("div", { className: "space-y-4", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs3("div", { className: "bg-ods-card border border-ods-border rounded-lg p-4", children: [
+            /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-3 mb-3 min-[420px]:flex-row min-[420px]:items-center min-[420px]:justify-between min-[420px]:gap-2", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 bg-ods-card border border-ods-border rounded-lg py-2 px-3", children: [
+                /* @__PURE__ */ jsx4("div", { className: "w-8 h-8 bg-[#2A2A2A] rounded-lg animate-pulse" }),
+                /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-20" })
+              ] }),
+              /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-12" })
+            ] }) }),
+            /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx4("div", { className: "h-6 bg-[#2A2A2A] rounded animate-pulse w-2/3" }),
+              /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-full" }),
+                /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-4/5" }),
+                /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-3/5" })
+              ] })
+            ] })
+          ] }, i)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx4("div", { className: "hidden lg:block w-[290px] flex-shrink-0", children: /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx4("div", { className: "h-12 bg-ods-card border border-ods-border rounded-lg animate-pulse" }),
+        /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx4("div", { className: "h-12 bg-ods-card border border-ods-border rounded-lg animate-pulse" }),
+          /* @__PURE__ */ jsx4("div", { className: "h-12 bg-ods-card border border-ods-border rounded-lg animate-pulse" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "border border-ods-border rounded-lg overflow-hidden", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "bg-ods-card p-4 flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx4("div", { className: "w-8 h-8 bg-[#2A2A2A] rounded animate-pulse" }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-20" }),
+              /* @__PURE__ */ jsx4("div", { className: "h-6 bg-[#2A2A2A] rounded animate-pulse w-12" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx4("div", { className: "p-4 space-y-3", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx4("div", { className: "w-6 h-6 bg-[#2A2A2A] rounded animate-pulse" }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-end gap-1", children: [
+              /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded animate-pulse w-12" }),
+              /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded animate-pulse w-8" })
+            ] })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx4("div", { className: "h-12 bg-ods-card border border-ods-border rounded-lg animate-pulse" }),
+          /* @__PURE__ */ jsx4("div", { className: "h-12 bg-ods-card border border-ods-border rounded-lg animate-pulse" }),
+          /* @__PURE__ */ jsx4("div", { className: "h-12 bg-ods-card border border-ods-border rounded-lg animate-pulse" })
+        ] })
+      ] }) })
+    ] })
+  ] }) });
+}
+function StatsSectionSkeleton({
+  className,
+  columns = 3
+}) {
+  return /* @__PURE__ */ jsx4("div", { className: cn(
+    "grid gap-6 mb-12 md:mb-16",
+    columns === 3 && "grid-cols-1 md:grid-cols-3",
+    columns === 4 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+    className
+  ), children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx4("div", { className: "bg-ods-card border border-ods-border rounded-lg p-6", children: /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx4(MediaSkeleton.Icon, { size: "lg" }),
+    /* @__PURE__ */ jsx4(TextSkeleton.Subheading, { className: "w-3/4" }),
+    /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx4(TextSkeleton.Body, { className: "w-full" }),
+      /* @__PURE__ */ jsx4(TextSkeleton.Body, { className: "w-3/4" })
+    ] })
+  ] }) }, i)) });
+}
+function BlogCardGridSkeleton({ className }) {
+  return /* @__PURE__ */ jsx4("div", { className: cn("space-y-6", className), children: /* @__PURE__ */ jsx4(
+    CardSkeletonGrid,
+    {
+      count: 4,
+      variant: "blog",
+      className: "grid-cols-1 md:grid-cols-2"
+    }
+  ) });
+}
+function VendorGridSkeleton({ className }) {
+  return /* @__PURE__ */ jsx4("div", { className: cn("space-y-6", className), children: /* @__PURE__ */ jsx4(
+    CardSkeletonGrid,
+    {
+      count: 12,
+      variant: "vendor",
+      className: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+    }
+  ) });
+}
+function SlackCommunitySkeleton() {
+  return /* @__PURE__ */ jsx4(
+    "section",
+    {
+      className: "w-full bg-ods-bg px-4 md:px-20 lg:px-20 py-12 md:py-20",
+      "aria-label": "Slack Community Loading",
+      children: /* @__PURE__ */ jsxs3("div", { className: "w-full flex flex-col gap-4 md:gap-6", children: [
+        /* @__PURE__ */ jsx4("div", { className: "w-full", children: /* @__PURE__ */ jsx4("div", { className: "h-8 md:h-12 lg:h-14 bg-[#2A2A2A] rounded-lg animate-pulse max-w-md" }) }),
+        /* @__PURE__ */ jsxs3("div", { className: "w-full flex flex-col lg:flex-row lg:justify-end lg:items-start gap-4 md:gap-6 min-w-0", children: [
+          /* @__PURE__ */ jsx4("div", { className: "w-full lg:w-[290px] lg:max-w-[290px] bg-ods-bg border border-ods-border rounded flex flex-col flex-shrink-0 overflow-hidden animate-pulse", children: /* @__PURE__ */ jsxs3("div", { className: "p-4 space-y-4", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx4("div", { className: "h-4 bg-[#2A2A2A] rounded w-24" }),
+                /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded w-16" })
+              ] }),
+              /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded w-32" })
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded w-16 mb-2" }),
+              Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-2 py-3 min-h-[48px]", children: [
+                /* @__PURE__ */ jsx4("div", { className: "w-4 h-4 bg-[#2A2A2A] rounded" }),
+                /* @__PURE__ */ jsxs3("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded w-24 mb-1" }),
+                  /* @__PURE__ */ jsx4("div", { className: "h-2 bg-[#2A2A2A] rounded w-16" })
+                ] })
+              ] }, i))
+            ] }),
+            /* @__PURE__ */ jsx4("div", { className: "border-t border-ods-border pt-3 mt-2", children: /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded w-16" }),
+                /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded w-8" })
+              ] }),
+              /* @__PURE__ */ jsxs3("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded w-20" }),
+                /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded w-8" })
+              ] })
+            ] }) })
+          ] }) }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-h-[450px] h-[450px] md:min-h-[500px] md:h-[500px] lg:min-h-[600px] lg:h-[600px] bg-ods-card border border-ods-border rounded-lg flex flex-col min-w-0 animate-pulse", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between p-4 md:p-6 border-b border-ods-border bg-ods-bg h-[56px] md:h-[60px] flex-shrink-0", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx4("div", { className: "h-3 md:h-4 bg-[#2A2A2A] rounded w-3 md:w-4" }),
+                /* @__PURE__ */ jsx4("div", { className: "h-3 md:h-4 bg-[#2A2A2A] rounded w-24 md:w-32" })
+              ] }),
+              /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded w-12 md:w-16" })
+            ] }),
+            /* @__PURE__ */ jsx4("div", { className: "flex-1 bg-ods-bg p-4 md:p-6 space-y-3 md:space-y-4 overflow-hidden min-h-[280px] md:min-h-[320px] lg:min-h-[420px]", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs3("div", { className: "flex gap-2 md:gap-3", children: [
+              /* @__PURE__ */ jsx4("div", { className: "w-10 h-10 md:w-12 md:h-12 bg-[#2A2A2A] rounded-lg flex-shrink-0" }),
+              /* @__PURE__ */ jsxs3("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 mb-1", children: [
+                  /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded w-16 md:w-20" }),
+                  /* @__PURE__ */ jsx4("div", { className: "h-3 bg-[#2A2A2A] rounded w-12 md:w-16" })
+                ] }),
+                /* @__PURE__ */ jsx4("div", { className: "h-3 md:h-4 bg-[#2A2A2A] rounded w-full" })
+              ] })
+            ] }, i)) }),
+            /* @__PURE__ */ jsx4("div", { className: "p-4 md:p-6 border-t border-ods-border bg-ods-card h-[72px] md:h-[80px] flex-shrink-0", children: /* @__PURE__ */ jsx4("div", { className: "flex items-end gap-3 justify-center md:justify-end", children: /* @__PURE__ */ jsx4("div", { className: "h-10 md:h-12 bg-[#2A2A2A] rounded-lg w-28 md:w-32" }) }) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/components/docs/use-document-tree.ts
+import { useState, useEffect, useCallback as useCallback2, useRef as useRef2 } from "react";
+
+// src/components/docs/doc-navigation-context.tsx
+import React, { createContext, useCallback, useContext, useRef } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DocNavigationContext = createContext(null);
+function DocNavigationProvider({ children }) {
+  const navMap = useRef(/* @__PURE__ */ new Map());
+  const register = useCallback((nav) => {
+    const existing = navMap.current.get(nav.baseRoute);
+    if (existing && existing !== nav) {
+      console.warn(
+        `[DocNavigationContext] duplicate registration for ${nav.baseRoute}; replacing`
+      );
+    }
+    navMap.current.set(nav.baseRoute, nav);
+    return () => {
+      if (navMap.current.get(nav.baseRoute) === nav) {
+        navMap.current.delete(nav.baseRoute);
+      }
+    };
+  }, []);
+  const findOwningNavigator = useCallback((path) => {
+    const baseRoutes = Array.from(navMap.current.keys()).sort((a, b) => b.length - a.length);
+    for (const baseRoute of baseRoutes) {
+      if (path === baseRoute || path.startsWith(`${baseRoute}/`)) {
+        return navMap.current.get(baseRoute) ?? null;
+      }
+    }
+    if (navMap.current.size === 1) {
+      return navMap.current.values().next().value ?? null;
+    }
+    return null;
+  }, []);
+  const navigate = useCallback(
+    (path) => {
+      const nav = findOwningNavigator(path);
+      if (!nav) return false;
+      const node = nav.findNodeByPath(path);
+      if (!node) return false;
+      nav.selectNode(node);
+      return true;
+    },
+    [findOwningNavigator]
+  );
+  const isAvailable = useCallback(() => navMap.current.size > 0, []);
+  const value = React.useMemo(
+    () => ({ register, navigate, isAvailable }),
+    [register, navigate, isAvailable]
+  );
+  return /* @__PURE__ */ jsx5(DocNavigationContext.Provider, { value, children });
+}
+function useDocNavigation() {
+  const ctx = useContext(DocNavigationContext);
+  if (!ctx) {
+    return {
+      register: () => () => {
+      },
+      navigate: () => false,
+      isAvailable: () => false
+    };
+  }
+  return ctx;
+}
+
+// src/components/docs/use-document-tree.ts
+function scrollToContent() {
+  const article = document.querySelector("article");
+  if (article) {
+    scrollElementIntoView(article, { headerOffset: 80 });
+  } else {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+}
+function useDocumentTree(config, initialPath) {
+  const { structureEndpoint, contentEndpoint, baseRoute } = config;
+  const folderIndexFile = config.folderIndexFile ?? DEFAULT_FOLDER_INDEX_FILE;
+  const cleanInitialPath = stripFolderIndexFromPath(
+    initialPath?.replace(/\/$/, "") || "",
+    folderIndexFile
+  );
+  const [structure, setStructure] = useState([]);
+  const [selectedPath, setSelectedPath] = useState(cleanInitialPath);
+  const [content, setContent] = useState(null);
+  const [isLoadingStructure, setIsLoadingStructure] = useState(true);
+  const [isLoadingContent, setIsLoadingContent] = useState(false);
+  const [error, setError] = useState(null);
+  const [expandedNodes, setExpandedNodes] = useState(/* @__PURE__ */ new Set());
+  const [isInitialized, setIsInitialized] = useState(false);
+  const lastFetchedPath = useRef2(null);
+  const normalizedBaseRoute = baseRoute.replace(/\/$/, "");
+  const selectedPathRef = useRef2(selectedPath);
+  selectedPathRef.current = selectedPath;
+  const docNavigation = useDocNavigation();
+  useEffect(() => {
+    const handlePopState = () => {
+      const pathname = window.location.pathname;
+      let pathFromUrl = "";
+      if (pathname === normalizedBaseRoute || pathname === `${normalizedBaseRoute}/`) {
+        pathFromUrl = "";
+      } else if (pathname.startsWith(`${normalizedBaseRoute}/`)) {
+        pathFromUrl = pathname.substring(`${normalizedBaseRoute}/`.length);
+      }
+      pathFromUrl = stripFolderIndexFromPath(pathFromUrl, folderIndexFile);
+      if (pathFromUrl !== selectedPathRef.current) {
+        setSelectedPath(pathFromUrl);
+        if (pathFromUrl) {
+          const parentPath = pathFromUrl.includes("/") ? pathFromUrl.substring(0, pathFromUrl.lastIndexOf("/")) : pathFromUrl;
+          setExpandedNodes(new Set(getDocAncestorNodeIds(parentPath)));
+        }
+        setTimeout(() => {
+          scrollToContent();
+        }, 150);
+      }
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, [normalizedBaseRoute, folderIndexFile]);
+  useEffect(() => {
+    if (!isInitialized) {
+      const speculativeContentPath = cleanInitialPath || folderIndexFile;
+      lastFetchedPath.current = speculativeContentPath;
+      fetchContent(speculativeContentPath);
+      fetchStructure();
+      setIsInitialized(true);
+    }
+  }, [isInitialized]);
+  useEffect(() => {
+    if (selectedPath === null || selectedPath === void 0) return;
+    if (!structure || structure.length === 0) return;
+    let pathToFetch = null;
+    if (selectedPath === "") {
+      pathToFetch = folderIndexFile;
+    } else {
+      const node = findDocNodeByPath(selectedPath, structure);
+      if (node && node.type === "folder" && !node.hasReadme) {
+        return;
+      }
+      pathToFetch = selectedPath;
+      if (node && node.type === "folder" && node.hasReadme) {
+        pathToFetch = `${selectedPath}/${folderIndexFile}`;
+      }
+    }
+    if (pathToFetch === lastFetchedPath.current) {
+      return;
+    }
+    if (pathToFetch) {
+      lastFetchedPath.current = pathToFetch;
+      fetchContent(pathToFetch);
+    }
+  }, [selectedPath, structure, folderIndexFile]);
+  const fetchStructure = async () => {
+    try {
+      setIsLoadingStructure(true);
+      setError(null);
+      const response = await fetch(structureEndpoint);
+      if (!response.ok) {
+        throw new Error("Failed to load documentation structure");
+      }
+      const result = await response.json();
+      if (result.success && result.data) {
+        setStructure(result.data);
+        if (cleanInitialPath) {
+          const pathForExpansion = cleanInitialPath.includes(".") ? cleanInitialPath.substring(0, cleanInitialPath.lastIndexOf("/")) : cleanInitialPath;
+          if (pathForExpansion) {
+            setExpandedNodes(new Set(getDocAncestorNodeIds(pathForExpansion)));
+          }
+        } else if (result.data.length > 0) {
+          const hasRootReadme = result.data.some(
+            (node) => node.type === "file" && node.path === folderIndexFile
+          );
+          if (!hasRootReadme) {
+            const firstNode = result.data[0];
+            if (firstNode.type === "folder") {
+              setExpandedNodes(/* @__PURE__ */ new Set([firstNode.id]));
+              if (firstNode.hasReadme) {
+                setSelectedPath(firstNode.path);
+                window.history.replaceState({}, "", `${normalizedBaseRoute}/${firstNode.path}`);
+              }
+            }
+          }
+        }
+      } else {
+        setError("Failed to load documentation structure");
+      }
+    } catch (err) {
+      console.error("Error fetching documentation structure:", err);
+      setError(err instanceof Error ? err.message : "Failed to load documentation");
+    } finally {
+      setIsLoadingStructure(false);
+    }
+  };
+  const fetchContent = async (path) => {
+    try {
+      setIsLoadingContent(true);
+      const response = await fetch(`${contentEndpoint}?path=${encodeURIComponent(path)}`);
+      if (path !== lastFetchedPath.current) return;
+      if (!response.ok) {
+        if (response.status === 404) {
+          const result2 = await response.json().catch(() => ({}));
+          if (path !== lastFetchedPath.current) return;
+          if (path === folderIndexFile && selectedPath === "") {
+            setError(null);
+            setContent(null);
+            return;
+          }
+          setError(result2.error || "Documentation file not found");
+          setContent(null);
+          return;
+        }
+        throw new Error("Failed to load documentation content");
+      }
+      const result = await response.json();
+      if (path !== lastFetchedPath.current) return;
+      setError(null);
+      if (result.success && result.data) {
+        if (result.redirect && result.correctPath !== void 0) {
+          const correctedPath = result.correctPath;
+          setSelectedPath(correctedPath);
+          window.history.replaceState({}, "", `${normalizedBaseRoute}/${correctedPath}`);
+          setContent(result.data);
+        } else {
+          setContent(result.data);
+        }
+      } else {
+        setError(result.error || "Failed to load content");
+        setContent(null);
+      }
+    } catch (err) {
+      if (path !== lastFetchedPath.current) return;
+      console.error("Error fetching documentation content:", err);
+      setError(err instanceof Error ? err.message : "Failed to load content");
+      setContent(null);
+    } finally {
+      if (path === lastFetchedPath.current) setIsLoadingContent(false);
+    }
+  };
+  const toggleNode = useCallback2((nodeId) => {
+    setExpandedNodes((prev) => {
+      const next = new Set(prev);
+      if (next.has(nodeId)) {
+        next.delete(nodeId);
+      } else {
+        next.add(nodeId);
+      }
+      return next;
+    });
+  }, []);
+  const selectNode = useCallback2((node) => {
+    if (node.type === "folder") {
+      setExpandedNodes((prev) => {
+        if (prev.has(node.id)) {
+          const ancestorIds = getDocAncestorNodeIds(node.path);
+          ancestorIds.pop();
+          return new Set(ancestorIds);
+        } else {
+          return new Set(getDocAncestorNodeIds(node.path));
+        }
+      });
+      if (node.hasReadme) {
+        lastFetchedPath.current = null;
+        setSelectedPath(node.path);
+        window.history.pushState({}, "", `${normalizedBaseRoute}/${node.path}`);
+        setTimeout(() => {
+          scrollToContent();
+        }, 150);
+      } else {
+        setSelectedPath(node.path);
+      }
+    } else {
+      const lastSlash = node.path.lastIndexOf("/");
+      if (lastSlash > 0) {
+        const parentPath = node.path.substring(0, lastSlash);
+        setExpandedNodes(new Set(getDocAncestorNodeIds(parentPath)));
+      }
+      lastFetchedPath.current = null;
+      setSelectedPath(node.path);
+      window.history.pushState({}, "", `${normalizedBaseRoute}/${node.path}`);
+      setTimeout(() => {
+        scrollToContent();
+      }, 150);
+    }
+  }, [normalizedBaseRoute]);
+  const navigateToDoc = useCallback2((path, options) => {
+    const hashIndex = path.indexOf("#");
+    const anchor = hashIndex !== -1 ? path.substring(hashIndex) : "";
+    const cleanPath = path.replace(/\/$/, "").split("#")[0];
+    const scrollAfterNav = () => {
+      if (anchor) {
+        setTimeout(() => {
+          const el = document.getElementById(anchor.substring(1));
+          if (el) {
+            scrollElementIntoView(el, { headerOffset: 80 });
+          } else {
+            scrollToContent();
+          }
+        }, 300);
+      } else {
+        setTimeout(() => {
+          scrollToContent();
+        }, 150);
+      }
+    };
+    if (options?.expandFolder) {
+      lastFetchedPath.current = null;
+      setSelectedPath(cleanPath);
+      window.history.pushState({}, "", `${normalizedBaseRoute}/${cleanPath}${anchor}`);
+      const pathParts2 = cleanPath.split("/");
+      const nodeIdsToExpand = [];
+      let currentPath2 = "";
+      for (const part of pathParts2) {
+        currentPath2 = currentPath2 ? `${currentPath2}-${part}` : part;
+        nodeIdsToExpand.push(currentPath2.toLowerCase());
+      }
+      setExpandedNodes(new Set(nodeIdsToExpand));
+      if (options?.fromInternalLink) {
+        scrollAfterNav();
+      }
+      setError(null);
+      return;
+    }
+    const pathForSelection = stripFolderIndexFromPath(cleanPath, folderIndexFile);
+    const urlPath = pathForSelection;
+    lastFetchedPath.current = null;
+    setSelectedPath(pathForSelection);
+    window.history.pushState({}, "", `${normalizedBaseRoute}/${urlPath}${anchor}`);
+    if (options?.fromInternalLink) {
+      scrollAfterNav();
+    }
+    const pathParts = cleanPath.split("/");
+    const parentIds = [];
+    let currentPath = "";
+    const partsToProcess = cleanPath.includes(".") ? pathParts.slice(0, -1) : pathParts;
+    for (const part of partsToProcess) {
+      currentPath = currentPath ? `${currentPath}-${part}` : part;
+      parentIds.push(currentPath.toLowerCase());
+    }
+    if (parentIds.length > 0) {
+      setExpandedNodes(new Set(parentIds));
+    }
+  }, [structure, normalizedBaseRoute, folderIndexFile]);
+  useEffect(() => {
+    return docNavigation.register({
+      baseRoute: normalizedBaseRoute,
+      findNodeByPath: (path) => {
+        const clean = stripFolderIndexFromPath(path.replace(/\/$/, "").split("#")[0], folderIndexFile);
+        return findDocNodeByPath(clean, structure) ?? null;
+      },
+      selectNode
+    });
+  }, [docNavigation, normalizedBaseRoute, structure, selectNode, folderIndexFile]);
+  return {
+    structure,
+    selectedPath,
+    setSelectedPath,
+    content,
+    isLoadingStructure,
+    isLoadingContent,
+    error,
+    expandedNodes,
+    toggleNode,
+    selectNode,
+    navigateToDoc,
+    refetch: fetchStructure,
+    setExpandedNodes
+  };
+}
+
+// src/components/docs/use-scroll-spy.ts
+import { useState as useState2, useRef as useRef3, useCallback as useCallback3, useEffect as useEffect2, useMemo } from "react";
+var SCROLL_OFFSET = 100;
+function useScrollSpy(sections) {
+  const [activeSection, setActiveSection] = useState2("");
+  const isScrollingFromClick = useRef3(false);
+  const sectionIds = useMemo(
+    () => sections?.map((s) => s.id).join(",") ?? "",
+    [sections]
+  );
+  const stableSections = useRef3(sections);
+  if (sectionIds !== (stableSections.current?.map((s) => s.id).join(",") ?? "")) {
+    stableSections.current = sections;
+  }
+  const handleSectionClick = useCallback3((sectionId) => {
+    const targetElement = document.getElementById(sectionId);
+    if (!targetElement) return;
+    isScrollingFromClick.current = true;
+    setActiveSection(sectionId);
+    scrollElementIntoView(targetElement, { headerOffset: SCROLL_OFFSET });
+    setTimeout(() => {
+      isScrollingFromClick.current = false;
+    }, 800);
+  }, []);
+  useEffect2(() => {
+    const currentSections = stableSections.current;
+    if (!currentSections || currentSections.length === 0) return;
+    const handleScroll = () => {
+      if (isScrollingFromClick.current) return;
+      const scrollPosition = window.scrollY + SCROLL_OFFSET;
+      let currentSection = currentSections[0]?.id || "";
+      for (let i = currentSections.length - 1; i >= 0; i--) {
+        const element = document.getElementById(currentSections[i].id);
+        if (element && scrollPosition >= element.offsetTop) {
+          currentSection = currentSections[i].id;
+          break;
+        }
+      }
+      setActiveSection((prev) => prev !== currentSection ? currentSection : prev);
+    };
+    let scrollTimer;
+    const throttledScroll = () => {
+      clearTimeout(scrollTimer);
+      scrollTimer = setTimeout(handleScroll, 100);
+    };
+    window.addEventListener("scroll", throttledScroll);
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", throttledScroll);
+      clearTimeout(scrollTimer);
+    };
+  }, [sectionIds]);
+  return { activeSection, handleSectionClick };
+}
+
+// src/components/docs/doc-viewer.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_DOC_VIEWER_PALETTE = {
+  background: "bg-ods-bg",
+  containerBackground: "transparent",
+  headerText: "text-ods-text-primary",
+  primaryText: "text-ods-text-primary",
+  secondaryText: "text-ods-text-secondary",
+  accent: "var(--ods-accent)",
+  border: "border-ods-border",
+  cardBackground: "bg-ods-card"
+};
+function DocViewer(props) {
+  return /* @__PURE__ */ jsx6(DocViewerContent, { ...props });
+}
+function DocViewerContent({
+  sourceId,
+  renderContent,
+  renderSkeleton,
+  chatSource,
+  title,
+  colorPalette = DEFAULT_DOC_VIEWER_PALETTE,
+  className = "",
+  docPath,
+  sidebarLabel = "DOCUMENTATION",
+  structureEndpoint,
+  contentEndpoint,
+  baseRoute,
+  emptyStateText,
+  showAIChat = false,
+  folderIndexFile
+}) {
+  const resolvedStructureEndpoint = structureEndpoint ?? `/api/docs/sources/${sourceId}/structure`;
+  const resolvedContentEndpoint = contentEndpoint ?? `/api/docs/sources/${sourceId}/content`;
+  const {
+    structure,
+    selectedPath,
+    content,
+    isLoadingStructure,
+    isLoadingContent,
+    error,
+    expandedNodes,
+    selectNode,
+    toggleNode,
+    navigateToDoc
+  } = useDocumentTree(
+    {
+      structureEndpoint: resolvedStructureEndpoint,
+      contentEndpoint: resolvedContentEndpoint,
+      baseRoute,
+      folderIndexFile
+    },
+    docPath
+  );
+  const { activeSection, handleSectionClick } = useScrollSpy(content?.sections);
+  const docNav = useDocNavigation();
+  const docSearch = useDocSearch({
+    source: chatSource,
+    baseRoute,
+    onNavigate: (path) => navigateToDoc(path, { fromInternalLink: true }),
+    onInPageSwap: (path) => docNav.navigate(path)
+  });
+  const renderedContent = useMemo2(() => {
+    if (!content) return null;
+    return renderContent(content, {
+      onInternalLinkClick: navigateToDoc,
+      currentPath: selectedPath,
+      sourceId
+    });
+  }, [content, selectedPath, renderContent, navigateToDoc, sourceId]);
+  const selectedNodeDocType = selectedPath && structure.length > 0 ? findDocNodeByPath(selectedPath, structure)?.documentType : void 0;
+  const activeDocType = content?.documentType ?? selectedNodeDocType;
+  const isMarkdownContent = !activeDocType || activeDocType === "markdown";
+  const showStickyNav = isMarkdownContent;
+  const stickyNavSections = content?.sections?.map((s) => ({ id: s.id, label: s.title })) ?? [];
+  const isColorValue = colorPalette.background.startsWith("#") || colorPalette.background.startsWith("rgb") || colorPalette.background.startsWith("var(");
+  const bgStyle = isColorValue ? { backgroundColor: colorPalette.background } : {};
+  const bgClass = !isColorValue ? colorPalette.background : "";
+  const containerBgStyle = colorPalette.containerBackground !== "transparent" ? { backgroundColor: colorPalette.containerBackground } : {};
+  const defaultEmptyText = structure.length > 0 ? "Select a document from the sidebar to view" : "No documents yet. Add content from the admin panel.";
+  const resolvedEmptyText = emptyStateText || defaultEmptyText;
+  return /* @__PURE__ */ jsx6("section", { className: `${bgClass} ${className}`, style: bgStyle, children: /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: "max-w-[1920px] px-6 md:px-20 py-6 md:py-10 mx-auto",
+      style: containerBgStyle,
+      children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-4", children: typeof title === "string" ? /* @__PURE__ */ jsx6(PageHeading, { children: title }) : title }),
+        showAIChat && /* @__PURE__ */ jsx6(
+          DocSearchBar,
+          {
+            placeholder: `Search ${sidebarLabel?.toLowerCase() || "documents"}...`,
+            query: docSearch.query,
+            onQueryChange: docSearch.setQuery,
+            results: docSearch.results,
+            isLoading: docSearch.isLoading,
+            onResultSelect: docSearch.handleResultSelect,
+            showDropdown: docSearch.keepDropdownOpen
+          }
+        ),
+        error && /* @__PURE__ */ jsx6("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs4("div", { className: "rounded-lg border bg-ods-card p-8 text-center max-w-md border-ods-border", children: [
+          /* @__PURE__ */ jsx6("h2", { className: "text-xl font-semibold text-ods-text-primary", children: "Error Loading Documents" }),
+          /* @__PURE__ */ jsxs4("p", { className: "mt-2 text-ods-text-secondary", children: [
+            error,
+            ". Please try again later."
+          ] })
+        ] }) }),
+        !error && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col lg:flex-row gap-6 lg:gap-10 items-start flex-1", children: [
+          /* @__PURE__ */ jsx6("div", { className: "w-full lg:w-[320px] lg:shrink-0", children: /* @__PURE__ */ jsx6("div", { className: "lg:sticky lg:top-20", children: isLoadingStructure ? /* @__PURE__ */ jsx6(CategorySidebarSkeleton, {}) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+            /* @__PURE__ */ jsx6(PersistentMobileDropdown, { isLoading: false, children: /* @__PURE__ */ jsx6(
+              MobileNavigationDropdown,
+              {
+                nodes: structure,
+                selectedPath,
+                expandedNodes,
+                onNodeClick: selectNode,
+                onToggleExpand: toggleNode,
+                isLoading: false,
+                folderIndexFile
+              }
+            ) }),
+            /* @__PURE__ */ jsx6(PersistentSidebar, { isLoading: false, children: /* @__PURE__ */ jsx6("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx6("h3", { className: "text-[14px] font-['Azeret_Mono'] font-semibold uppercase text-ods-text-secondary tracking-[-0.02em] leading-[1.43em]", children: sidebarLabel }),
+              /* @__PURE__ */ jsx6(
+                MultiLevelNavigation,
+                {
+                  nodes: structure,
+                  selectedPath,
+                  expandedNodes,
+                  onNodeClick: selectNode,
+                  onToggleExpand: toggleNode,
+                  isLoading: false,
+                  folderIndexFile
+                }
+              )
+            ] }) }) })
+          ] }) }) }),
+          /* @__PURE__ */ jsx6("div", { className: "flex-1 min-w-0 w-full", children: /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              className: `grid grid-cols-1 ${showStickyNav && stickyNavSections.length > 0 || isLoadingContent || isLoadingStructure ? "lg:grid-cols-[1fr_280px]" : ""} gap-8`,
+              children: [
+                /* @__PURE__ */ jsx6("div", { className: `w-full ${isMarkdownContent ? "max-w-4xl mx-auto" : ""}`, children: /* @__PURE__ */ jsx6("article", { className: "space-y-2", children: isLoadingContent || isLoadingStructure ? renderSkeleton(selectedNodeDocType) : !content ? /* @__PURE__ */ jsx6("div", { className: "text-center py-16", children: /* @__PURE__ */ jsx6("p", { className: "text-xl text-ods-text-secondary", children: resolvedEmptyText }) }) : renderedContent }) }),
+                (isLoadingContent || isLoadingStructure) && /* @__PURE__ */ jsx6("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxs4("div", { className: "sticky top-24", children: [
+                  /* @__PURE__ */ jsx6("div", { className: "h-[14px] w-28 bg-ods-border rounded animate-pulse mb-5" }),
+                  /* @__PURE__ */ jsx6("div", { className: "space-y-0", children: [130, 170, 190, 220, 110, 200, 80, 100, 120, 140, 90].map((w, i) => /* @__PURE__ */ jsx6(
+                    "div",
+                    {
+                      className: `py-[13px] pl-3 border-l-2 ${i === 0 ? "border-ods-accent" : "border-transparent"}`,
+                      children: /* @__PURE__ */ jsx6(
+                        "div",
+                        {
+                          className: "h-[13px] bg-ods-border rounded animate-pulse",
+                          style: { width: w }
+                        }
+                      )
+                    },
+                    i
+                  )) })
+                ] }) }),
+                showStickyNav && content && stickyNavSections.length > 0 && !isLoadingContent && /* @__PURE__ */ jsx6("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxs4("div", { className: "sticky top-24", children: [
+                  /* @__PURE__ */ jsx6("h3", { className: "text-[14px] font-['Azeret_Mono'] font-semibold uppercase text-ods-text-secondary tracking-[-0.02em] leading-[1.43em] mb-4", children: "ON THIS PAGE" }),
+                  /* @__PURE__ */ jsx6(
+                    StickySectionNav,
+                    {
+                      sections: stickyNavSections,
+                      activeSection,
+                      onSectionClick: handleSectionClick,
+                      ribbonPosition: "left",
+                      ribbonColor: "var(--ods-accent)"
+                    }
+                  )
+                ] }) })
+              ]
+            }
+          ) })
+        ] })
+      ] })
+    }
+  ) });
+}
+
+export {
+  PersistentFilterControls,
+  PersistentSearchContainer,
+  PersistentSidebar,
+  PersistentMobileDropdown,
+  UnifiedSkeleton,
+  TextSkeleton,
+  InteractiveSkeleton,
+  MediaSkeleton,
+  CardSkeleton,
+  CardSkeletonGrid,
+  AnnouncementBarSkeleton,
+  HeroSkeleton,
+  SearchContainerSkeleton,
+  CategorySidebarSkeleton,
+  BreadcrumbSkeleton,
+  ResultsHeaderSkeleton,
+  TwoColumnLayoutSkeleton,
+  ArticleLayoutSkeleton,
+  VendorDetailLayoutSkeleton,
+  StatsSectionSkeleton,
+  BlogCardGridSkeleton,
+  VendorGridSkeleton,
+  SlackCommunitySkeleton,
+  DocNavigationProvider,
+  useDocNavigation,
+  useDocumentTree,
+  useScrollSpy,
+  DocViewer
+};
+//# sourceMappingURL=chunk-YVB3VDIQ.js.map