@opensite/ui 0.6.3 → 0.6.5

package/dist/article-toc-sidebar.js

@@ -1,5 +1,6 @@
 "use client";
-import * as React4 from 'react';
+import * as React5 from 'react';
+import React5__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
@@ -87,7 +88,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React4.useMemo(() => {
+  const linkType = React5.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -108,7 +109,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React4.useMemo(() => {
+  const normalizedHref = React5.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -126,7 +127,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React4.useMemo(() => {
+  const target = React5.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -139,7 +140,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React4.useMemo(() => {
+  const rel = React5.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -148,7 +149,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React4.useCallback(
+  const handleClick = React5.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -332,7 +333,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React4.forwardRef(
+var Pressable = React5.forwardRef(
   ({
     children,
     className,
@@ -430,169 +431,6 @@ var Pressable = React4.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  className,
-  alt
-}) {
-  const [svgContent, setSvgContent] = React4.useState(null);
-  const [isLoading, setIsLoading] = React4.useState(true);
-  const [error, setError] = React4.useState(null);
-  const { url, iconName } = React4.useMemo(() => {
-    const separator = name.includes("/") ? "/" : ":";
-    const [prefix, iconName2] = name.split(separator);
-    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
-    return {
-      url: baseUrl,
-      iconName: iconName2
-    };
-  }, [name, size]);
-  React4.useEffect(() => {
-    let isMounted = true;
-    const fetchSvg = async () => {
-      const cached = svgCache.get(url);
-      if (cached) {
-        if (isMounted) {
-          setSvgContent(cached);
-          setIsLoading(false);
-        }
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch icon: ${response.status}`);
-        }
-        let svg = await response.text();
-        svg = processSvgForCurrentColor(svg);
-        svgCache.set(url, svg);
-        if (isMounted) {
-          setSvgContent(svg);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err.message : "Failed to load icon");
-          setIsLoading(false);
-        }
-      }
-    };
-    fetchSvg();
-    return () => {
-      isMounted = false;
-    };
-  }, [url]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true"
-      }
-    );
-  }
-  if (error || !svgContent) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        role: "img",
-        "aria-label": alt || iconName
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("inline-flex items-center justify-center", className),
-      style: {
-        width: size,
-        height: size,
-        color: color || "inherit"
-      },
-      role: "img",
-      "aria-label": alt || iconName,
-      dangerouslySetInnerHTML: { __html: svgContent }
-    }
-  );
-}
-function processSvgForCurrentColor(svg) {
-  let processed = svg;
-  processed = processed.replace(
-    /stroke=["'](#000000|#000|black)["']/gi,
-    'stroke="currentColor"'
-  );
-  processed = processed.replace(
-    /fill=["'](#000000|#000|black)["']/gi,
-    'fill="currentColor"'
-  );
-  return processed;
-}
-var alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Alert({
-  className,
-  variant,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "alert",
-      role: "alert",
-      className: cn(alertVariants({ variant }), className),
-      ...props
-    }
-  );
-}
-function AlertTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "alert-title",
-      className: cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AlertDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "alert-description",
-      className: cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
-      ),
-      ...props
-    }
-  );
-}
 function Avatar({
   className,
   ...props
@@ -670,169 +508,379 @@ function Badge({
     }
   );
 }
-
-// lib/mediaPlaceholders.ts
-var imagePlaceholders = [
-  "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
-  "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
-  "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
-  "https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson",
-  "https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg",
-  "https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q",
-  "https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz",
-  "https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs",
-  "https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0",
-  "https://toastability-production.s3.amazonaws.com/cen5x90p3kbdafb80liq1a5j222x",
-  "https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc",
-  "https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v",
-  "https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac",
-  "https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm",
-  "https://toastability-production.s3.amazonaws.com/8x62o6350p1ejm3pjrp1jwvcbh4v",
-  "https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc",
-  "https://toastability-production.s3.amazonaws.com/t502cfynqso7ntkdvmcmfc87yjkt",
-  "https://toastability-production.s3.amazonaws.com/ihgx63s5nfzp2e93e3ccljjnnrov",
-  "https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6",
-  "https://toastability-production.s3.amazonaws.com/c4sgsy0g7o2rrjmvm9x7evxems82",
-  "https://toastability-production.s3.amazonaws.com/a3m42usevv0iet0fpfwa1fsytxmv",
-  "https://toastability-production.s3.amazonaws.com/qghzqu1i99vaubyew9s5dxcbel9l",
-  "https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw",
-  "https://toastability-production.s3.amazonaws.com/2d4k8d5shwg82276hzj2ztbj7mxq",
-  "https://toastability-production.s3.amazonaws.com/op92dycs7w856e2jsvx20st0nyz9",
-  "https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl",
-  "https://toastability-production.s3.amazonaws.com/gl7n7p6atndufbsm6q2ac5jeqttp",
-  "https://toastability-production.s3.amazonaws.com/sj8cs2gpbanaowqwxar1uhhwd23z",
-  "https://toastability-production.s3.amazonaws.com/hu4gmd93sp95wdyr9qijze0rgim9",
-  "https://toastability-production.s3.amazonaws.com/uh2vd59np82h8sevbmfnsha89sf1",
-  "https://toastability-production.s3.amazonaws.com/gxs6zevccphti0hdq5l9fwytprpr",
-  "https://toastability-production.s3.amazonaws.com/s4vho0wfbjhf758oife8qfuekou8",
-  "https://toastability-production.s3.amazonaws.com/1b0gd8ul22q799d62dvm3sgyll85",
-  "https://toastability-production.s3.amazonaws.com/102grjqg8aigxkj585s9x3xbxfv7",
-  "https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52",
-  "https://toastability-production.s3.amazonaws.com/50y066ms7rb5sw62u9u08jzkk8rj",
-  "https://toastability-production.s3.amazonaws.com/9uxe0jw1zl1tujy0m5yalo7m2ht8",
-  "https://toastability-production.s3.amazonaws.com/cyhcpla6me8vs936i3fw6wbhypi2",
-  "https://toastability-production.s3.amazonaws.com/6ntdz6xwid3fswjz8y0otdxmzs40",
-  "https://toastability-production.s3.amazonaws.com/y1aezpa78m2fhfvj8whcx337y9cb",
-  "https://toastability-production.s3.amazonaws.com/eoa76d31ynbg34urr6e4619la1f7",
-  "https://toastability-production.s3.amazonaws.com/0mh8a1dg7ftcqnyzgv303u501c8y",
-  "https://toastability-production.s3.amazonaws.com/vvucxqs128w2d0z3n4s2z131rq7p",
-  "https://toastability-production.s3.amazonaws.com/2rbqbw9778770i8izdeabx8v2w2k",
-  "https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz",
-  "https://toastability-production.s3.amazonaws.com/vh1aowwr93yz4qrzct2s4je0cxdo",
-  "https://toastability-production.s3.amazonaws.com/ssgb7unxdwdqokfvhkp7cok2v79s",
-  "https://toastability-production.s3.amazonaws.com/vvkma6b8whdkiq5nq8z4eyfe00vo",
-  "https://toastability-production.s3.amazonaws.com/9797jh6slgbf9oq6lzlimcdiuziv",
-  "https://toastability-production.s3.amazonaws.com/betxbx61fkijt0aygineplf489ze",
-  "https://toastability-production.s3.amazonaws.com/0o6d7z4mm9nzeufhv9kefrhihbip",
-  "https://toastability-production.s3.amazonaws.com/1xdx70c7gp9l883soyh5d3exesvt",
-  "https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c",
-  "https://toastability-production.s3.amazonaws.com/n001o4pfpszmyw03ubctig7kvf0e",
-  "https://toastability-production.s3.amazonaws.com/l080sx0lcx51x44dqrb8006nqf08",
-  "https://toastability-production.s3.amazonaws.com/2t36c7l0ywchaz4nys8yj2l5amae",
-  "https://toastability-production.s3.amazonaws.com/gg5qnvb4nsl2k3g4dw4ls8bsllwh",
-  "https://toastability-production.s3.amazonaws.com/3nqc7xvjy3e8d7jo1gdvbzty0oqg",
-  "https://toastability-production.s3.amazonaws.com/0kx9umbfmv881wt9dfqnohv8efgi",
-  "https://toastability-production.s3.amazonaws.com/9z0sbfnskx70vse99e3dfhper7i1",
-  "https://toastability-production.s3.amazonaws.com/9keidwrag6g7jtqr7rdwb1ryt6ht",
-  "https://toastability-production.s3.amazonaws.com/zm88vf14geh1gh0frd3yrdlb6pl8",
-  "https://toastability-production.s3.amazonaws.com/0x7ktdk01jfaoysst0emzvqevu19",
-  "https://toastability-production.s3.amazonaws.com/e83zsyvl0an0owzdmpwjnnty641x",
-  "https://toastability-production.s3.amazonaws.com/t3k42fbzq7r7j93feldqm5cj1o1n",
-  "https://toastability-production.s3.amazonaws.com/5sm6wc4no8fyzxfki5njmnv6gql5",
-  "https://toastability-production.s3.amazonaws.com/w41h7890eivogu3sr78vlwkpzz8g",
-  "https://toastability-production.s3.amazonaws.com/vrezhtksoqbw1nyo4hwnoqizrus5",
-  "https://toastability-production.s3.amazonaws.com/8qkikcd43paeqgvw9gc1032j3yup",
-  "https://toastability-production.s3.amazonaws.com/ihhq8unynafk4aikmys3rhbfibaz",
-  "https://toastability-production.s3.amazonaws.com/rews5enr9ynu6izioj66s8ec90nc",
-  "https://toastability-production.s3.amazonaws.com/6ku135fhv528eei3agnoc3zd7y75",
-  "https://toastability-production.s3.amazonaws.com/x4scuzhsozrwrg703df5wbhygkgo",
-  "https://toastability-production.s3.amazonaws.com/73e0s79u4crdu7cmjfp99j1l2v55",
-  "https://toastability-production.s3.amazonaws.com/rddfyzvfpdlbzwhgep2myppwxn05",
-  "https://toastability-production.s3.amazonaws.com/mat88x8zzdek7wpgtocjrehfivsh",
-  "https://toastability-production.s3.amazonaws.com/3vwfdbekbkskxj2mvlvu85fz787u",
-  "https://toastability-production.s3.amazonaws.com/ms4s4zyqpmboh0slez1cwat9qhw4",
-  "https://toastability-production.s3.amazonaws.com/5jsc0b4e3gxnjs81iotw2c3e6da3",
-  "https://toastability-production.s3.amazonaws.com/0g6t701zqr2r7najmdgftpeqnxmz",
-  "https://toastability-production.s3.amazonaws.com/u3p1hlbm2c1vvkwlm8h668pe132z",
-  "https://toastability-production.s3.amazonaws.com/ehgbcugs782765ke1l2dtbtzd918",
-  "https://toastability-production.s3.amazonaws.com/kka8f550on7acx1lf82xleu6zhzo",
-  "https://toastability-production.s3.amazonaws.com/67fnapqepn7f8vwt0x4nqho70hbz",
-  "https://toastability-production.s3.amazonaws.com/t4cidbsfz3z468bn45yqdrkbx7ou",
-  "https://toastability-production.s3.amazonaws.com/gq3c9qalkiomu0rzdzxymkdaazdu",
-  "https://toastability-production.s3.amazonaws.com/9ujya2tfhxja7y5s9wb7d2u8crhd",
-  "https://toastability-production.s3.amazonaws.com/hotlo54tsvl2k3eht9gg0460l9zw",
-  "https://toastability-production.s3.amazonaws.com/ytbyjrcvrghc7wl6w1g7g8fwka22",
-  "https://toastability-production.s3.amazonaws.com/uv0g605yf5mz106nrm1uspt9l0rr",
-  "https://toastability-production.s3.amazonaws.com/yrp5k5xszwpe26fquupey6a6g0uu",
-  "https://toastability-production.s3.amazonaws.com/97gctpna2hdozl1f8u5xq4ew8h0o",
-  "https://toastability-production.s3.amazonaws.com/xjtepune0scj9yjkkqgaiwlq9hls",
-  "https://toastability-production.s3.amazonaws.com/g607vblaarqctl1cvgxffhx4pw6g",
-  "https://toastability-production.s3.amazonaws.com/4xpu1ljr9c8g6qzmfum5ygjzbzpb",
-  "https://toastability-production.s3.amazonaws.com/yw5f7iwyypf4kctpr5ye5e495swt",
-  "https://toastability-production.s3.amazonaws.com/z37cidvud212bzqhhalrhvk7ipaa",
-  "https://toastability-production.s3.amazonaws.com/pfllskt7q7144l288lrnpc6gx606",
-  "https://toastability-production.s3.amazonaws.com/fokd3hxzvdtsomagbfhqooyvndyv",
-  "https://toastability-production.s3.amazonaws.com/6fffnb4phovtqkjhtzifs4rhb84u",
-  "https://toastability-production.s3.amazonaws.com/mt87xjr79wxdhjy7496v3r6m2m9t",
-  "https://toastability-production.s3.amazonaws.com/3dy9ge962uarlaf2xl7imdcviqgx",
-  "https://toastability-production.s3.amazonaws.com/okf6fg4n9yv59up8ivgcdjy3w030",
-  "https://toastability-production.s3.amazonaws.com/t7iteqw4xhtppkiws88bsoia25hv",
-  "https://toastability-production.s3.amazonaws.com/klr5tuvulkyqfb721txtu4hgzxdm",
-  "https://toastability-production.s3.amazonaws.com/9eddibiq5ovc9cvs3ekijkrjpahg",
-  "https://toastability-production.s3.amazonaws.com/3ghn8dz3g9qtt4pf4nwbriaydvzb",
-  "https://toastability-production.s3.amazonaws.com/82ykd8s8boiqaxypkulb0v0s2qiw",
-  "https://toastability-production.s3.amazonaws.com/4eqmdeanxfk6jzvigo42y5ryv2c8",
-  "https://toastability-production.s3.amazonaws.com/9ughnl9wnko2vdboib8n3wl3cxsy",
-  "https://toastability-production.s3.amazonaws.com/4xjcgtlwseruezhoh3o1ga4umhj4",
-  "https://toastability-production.s3.amazonaws.com/xwh1zzxgyd887thfm1j9lu9qnd6c",
-  "https://toastability-production.s3.amazonaws.com/ri0dqx79spe6771np76mkmno5xfd",
-  "https://toastability-production.s3.amazonaws.com/e13qu3083lkhdg7th64vb628172a",
-  "https://toastability-production.s3.amazonaws.com/w87w0fyjdol9yzwo7yywkgxidvzo"
-];
-var defaultArticleContent = (optixFlowConfig) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsxs("section", { id: "introduction", children: [
-    /* @__PURE__ */ jsx("h2", { children: "Introduction" }),
-    /* @__PURE__ */ jsx("p", { children: "Building scalable applications requires careful consideration of architecture, design patterns, and infrastructure. In this guide, we'll explore the key principles that enable applications to grow gracefully with increasing demand." }),
-    /* @__PURE__ */ jsxs(Alert, { children: [
-      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/lightbulb", size: 16 }),
-      /* @__PURE__ */ jsx(AlertTitle, { children: "Pro Tip" }),
-      /* @__PURE__ */ jsx(AlertDescription, { children: "Start with a simple architecture and evolve it as your needs grow. Premature optimization can lead to unnecessary complexity." })
-    ] })
-  ] }),
-  /* @__PURE__ */ jsxs("section", { id: "getting-started", children: [
-    /* @__PURE__ */ jsx("h2", { children: "Getting Started" }),
-    /* @__PURE__ */ jsx("p", { children: "Before diving into complex architectural patterns, ensure you have a solid understanding of your application's requirements. Consider factors like expected traffic, data volume, and team expertise." }),
-    /* @__PURE__ */ jsx("p", { children: "A well-designed system starts with clear requirements and constraints. Document your assumptions and validate them with stakeholders before making architectural decisions." })
-  ] }),
-  /* @__PURE__ */ jsxs("section", { id: "core-concepts", children: [
-    /* @__PURE__ */ jsx("h2", { children: "Core Concepts" }),
-    /* @__PURE__ */ jsx("p", { children: "Scalability encompasses both horizontal and vertical scaling strategies. Horizontal scaling adds more machines to handle load, while vertical scaling increases the capacity of existing machines." }),
-    /* @__PURE__ */ jsx(
-      Img,
+var maxWidthStyles = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-7xl",
+  "2xl": "max-w-screen-2xl",
+  "4xl": "max-w-[1536px]",
+  full: "max-w-full"
+};
+var Container = React5__default.forwardRef(
+  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
+    const Component = as;
+    return /* @__PURE__ */ jsx(
+      Component,
       {
-        src: imagePlaceholders[5],
-        alt: "Architecture diagram",
-        className: "my-8 aspect-video w-full rounded-lg object-cover",
-        optixFlowConfig
+        ref,
+        className: cn(
+          "mx-auto w-full px-2 sm:px-4 lg:px-8",
+          maxWidthStyles[maxWidth],
+          className
+        ),
+        ...props,
+        children
       }
+    );
+  }
+);
+Container.displayName = "Container";
+
+// lib/patternSvgs.ts
+var patternSvgs = {
+  squareAltGrid: "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
+  grid1: "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
+  noise: "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
+  dots: "https://cdn.ing/assets/files/record/286198/yfsjx9thvtxzhl2qtshxyhkrm524",
+  dotPattern: "https://cdn.ing/assets/files/record/286192/7ig0cku8aqbboiza8nuk6hw0nnsr",
+  dotPattern2: "https://cdn.ing/assets/files/record/286189/arez6gd2s7isn9i1o6c7sexdq7bl",
+  circles: "https://cdn.ing/assets/files/record/286190/gtmia3sncjtzetdshc20zf1d3c17",
+  waves: "https://cdn.ing/assets/files/record/286191/mqlb33fzxz9cdth1bx7if0wmpkp1",
+  crossPattern: "https://cdn.ing/assets/files/record/286193/9yfqwdbnqaipbp7fsb3wbzzmq472",
+  architect: "https://cdn.ing/assets/files/record/286194/vgs88ugpvyhxu13wqgy0acvae6re",
+  tinyCheckers: "https://cdn.ing/assets/files/record/286195/65efaknsw8kcpf9o3c2gybytsl5b",
+  p6: "https://cdn.ing/assets/i/r/286196/6kl0rqnd6mjk8j7e525fo8fo0vkc/p6.webp"
+};
+var maskTop = "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)";
+var maskBottom = "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)";
+var maskCenter = "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)";
+var maskTopLeft = "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)";
+var maskTopRight = "radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)";
+var maskBottomLeft = "radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)";
+var maskBottomRight = "radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)";
+var circuitBoardPattern = (id, mask) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "h-full w-full",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: mask ? {
+      maskImage: mask,
+      WebkitMaskImage: mask
+    } : void 0,
+    children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "pattern",
+        {
+          id,
+          x: "0",
+          y: "0",
+          width: "100",
+          height: "100",
+          patternUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M0 50h40M60 50h40M50 0v40M50 60v40",
+                stroke: "hsl(var(--muted))",
+                strokeWidth: "1",
+                fill: "none"
+              }
+            ),
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "3", fill: "hsl(var(--muted))" }),
+            /* @__PURE__ */ jsx("circle", { cx: "0", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
+            /* @__PURE__ */ jsx("circle", { cx: "100", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "0", r: "2", fill: "hsl(var(--muted))" }),
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "100", r: "2", fill: "hsl(var(--muted))" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
+    ]
+  }
+);
+var gridDotsPattern = (id, mask) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "h-full w-full",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: mask ? {
+      maskImage: mask,
+      WebkitMaskImage: mask
+    } : void 0,
+    children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "pattern",
+        {
+          id,
+          x: "0",
+          y: "0",
+          width: "40",
+          height: "40",
+          patternUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M0 20h40M20 0v40",
+                stroke: "hsl(var(--muted))",
+                strokeWidth: "0.5",
+                fill: "none"
+              }
+            ),
+            /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "2", fill: "hsl(var(--muted))" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
+    ]
+  }
+);
+var gridPattern = (size, mask) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: "h-full w-full bg-[linear-gradient(to_right,_hsl(var(--muted))_1px,_transparent_1px),linear-gradient(to_bottom,_hsl(var(--muted))_1px,_transparent_1px)]",
+    style: {
+      backgroundSize: `${size}px ${size}px`,
+      ...mask ? {
+        maskImage: mask,
+        WebkitMaskImage: mask
+      } : {}
+    }
+  }
+);
+var diagonalCrossPattern = (mask) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: "h-full w-full",
+    style: {
+      backgroundImage: "repeating-linear-gradient(45deg, transparent, transparent 32px, hsl(var(--muted)) 32px, hsl(var(--muted)) 33px), repeating-linear-gradient(135deg, transparent, transparent 32px, hsl(var(--muted)) 32px, hsl(var(--muted)) 33px)",
+      ...mask ? {
+        maskImage: mask,
+        WebkitMaskImage: mask
+      } : {}
+    }
+  }
+);
+var dashedGridMaskBase = "repeating-linear-gradient(to right, black 0px, black 3px, transparent 3px, transparent 8px), repeating-linear-gradient(to bottom, black 0px, black 3px, transparent 3px, transparent 8px)";
+var dashedGridPattern = (fadeMask) => {
+  const mask = fadeMask ? `${dashedGridMaskBase}, ${fadeMask}` : dashedGridMaskBase;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-full w-full",
+      style: {
+        backgroundImage: "linear-gradient(to right, hsl(var(--muted)) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--muted)) 1px, transparent 1px)",
+        backgroundSize: "20px 20px",
+        backgroundPosition: "0 0, 0 0",
+        maskImage: mask,
+        WebkitMaskImage: mask,
+        maskComposite: "intersect",
+        WebkitMaskComposite: "source-in"
+      }
+    }
+  );
+};
+var gradientGlow = (position) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "pointer-events-none absolute left-1/2 z-0 aspect-square w-3/4 -translate-x-1/2 rounded-full opacity-50 blur-3xl",
+      position === "top" ? "-top-1/4" : "-bottom-1/4"
     ),
-    /* @__PURE__ */ jsx("p", { children: "Key concepts include load balancing, caching, database sharding, and microservices architecture. Each approach has trade-offs that must be carefully evaluated." })
-  ] }),
-  /* @__PURE__ */ jsxs("section", { id: "best-practices", children: [
-    /* @__PURE__ */ jsx("h2", { children: "Best Practices" }),
-    /* @__PURE__ */ jsx("p", { children: "Follow these best practices to ensure your application scales effectively:" }),
-    /* @__PURE__ */ jsxs("ul", { children: [
-      /* @__PURE__ */ jsx("li", { children: "Design for failure and implement graceful degradation" }),
-      /* @__PURE__ */ jsx("li", { children: "Use caching strategically at multiple levels" }),
-      /* @__PURE__ */ jsx("li", { children: "Implement proper monitoring and alerting" }),
-      /* @__PURE__ */ jsx("li", { children: "Automate deployment and scaling processes" })
-    ] })
-  ] }),
-  /* @__PURE__ */ jsxs("section", { id: "conclusion", children: [
-    /* @__PURE__ */ jsx("h2", { children: "Conclusion" }),
-    /* @__PURE__ */ jsx("p", { children: "Building scalable applications is both an art and a science. By understanding the fundamental principles and applying them thoughtfully, you can create systems that grow with your business needs." })
-  ] })
-] });
+    style: {
+      background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
+    }
+  }
+);
+var spotlight = (position) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "pointer-events-none absolute top-1/2 z-0 aspect-square w-3/4 -translate-y-1/2 rounded-full opacity-40 blur-3xl",
+      position === "left" ? "-left-1/4" : "-right-1/4"
+    ),
+    style: {
+      background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
+    }
+  }
+);
+var patternOverlays = {
+  circuitBoardBasic: () => circuitBoardPattern("circuit-board-basic"),
+  circuitBoardFadeTop: () => circuitBoardPattern("circuit-board-fade-top", maskTop),
+  circuitBoardFadeBottom: () => circuitBoardPattern("circuit-board-fade-bottom", maskBottom),
+  circuitBoardFadeCenter: () => circuitBoardPattern("circuit-board-fade-center", maskCenter),
+  circuitBoardFadeTopLeft: () => circuitBoardPattern("circuit-board-fade-top-left", maskTopLeft),
+  circuitBoardFadeTopRight: () => circuitBoardPattern("circuit-board-fade-top-right", maskTopRight),
+  circuitBoardFadeBottomLeft: () => circuitBoardPattern("circuit-board-fade-bottom-left", maskBottomLeft),
+  circuitBoardFadeBottomRight: () => circuitBoardPattern("circuit-board-fade-bottom-right", maskBottomRight),
+  dashedGridBasic: () => dashedGridPattern(),
+  dashedGridFadeTop: () => dashedGridPattern(maskTop),
+  dashedGridFadeBottom: () => dashedGridPattern(maskBottom),
+  dashedGridFadeCenter: () => dashedGridPattern(maskCenter),
+  dashedGridFadeTopLeft: () => dashedGridPattern(maskTopLeft),
+  dashedGridFadeTopRight: () => dashedGridPattern(maskTopRight),
+  dashedGridFadeBottomLeft: () => dashedGridPattern(maskBottomLeft),
+  dashedGridFadeBottomRight: () => dashedGridPattern(maskBottomRight),
+  diagonalCrossBasic: () => diagonalCrossPattern(),
+  diagonalCrossFadeTop: () => diagonalCrossPattern(maskTop),
+  diagonalCrossFadeBottom: () => diagonalCrossPattern(maskBottom),
+  diagonalCrossFadeCenter: () => diagonalCrossPattern(maskCenter),
+  diagonalCrossFadeTopLeft: () => diagonalCrossPattern(maskTopLeft),
+  diagonalCrossFadeTopRight: () => diagonalCrossPattern(maskTopRight),
+  diagonalCrossFadeBottomLeft: () => diagonalCrossPattern(maskBottomLeft),
+  diagonalCrossFadeBottomRight: () => diagonalCrossPattern(maskBottomRight),
+  gridBasic: () => gridPattern(40),
+  gridFadeTop: () => gridPattern(32, maskTop),
+  gridFadeBottom: () => gridPattern(32, maskBottom),
+  gridFadeCenter: () => gridPattern(40, maskCenter),
+  gridFadeTopLeft: () => gridPattern(32, maskTopLeft),
+  gridFadeTopRight: () => gridPattern(32, maskTopRight),
+  gridFadeBottomLeft: () => gridPattern(32, maskBottomLeft),
+  gridFadeBottomRight: () => gridPattern(32, maskBottomRight),
+  gridDotsBasic: () => gridDotsPattern("grid-dots-basic"),
+  gridDotsFadeCenter: () => gridDotsPattern("grid-dots-fade-center", maskCenter),
+  gradientGlowTop: () => gradientGlow("top"),
+  gradientGlowBottom: () => gradientGlow("bottom"),
+  spotlightLeft: () => spotlight("left"),
+  spotlightRight: () => spotlight("right")
+};
+var inlinePatternStyles = {
+  radialGradientTop: {
+    background: "radial-gradient(125% 125% at 50% 10%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
+  },
+  radialGradientBottom: {
+    background: "radial-gradient(125% 125% at 50% 90%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
+  }
+};
+function PatternBackground({
+  pattern,
+  opacity = 0.08,
+  className,
+  style
+}) {
+  if (!pattern) {
+    return null;
+  }
+  if (pattern in inlinePatternStyles) {
+    const inlineStyle = inlinePatternStyles[pattern];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("pointer-events-none absolute inset-0 z-0", className),
+        style: { ...inlineStyle, opacity, ...style },
+        "aria-hidden": "true"
+      }
+    );
+  }
+  if (pattern in patternOverlays) {
+    const Overlay = patternOverlays[pattern];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("pointer-events-none absolute inset-0 z-0", className),
+        style: { opacity, ...style },
+        "aria-hidden": "true",
+        children: Overlay()
+      }
+    );
+  }
+  const patternUrl = pattern in patternSvgs ? patternSvgs[pattern] : pattern;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("pointer-events-none absolute inset-0 z-0", className),
+      style: {
+        backgroundImage: `url(${patternUrl})`,
+        backgroundRepeat: "repeat",
+        backgroundSize: "auto",
+        opacity,
+        ...style
+      },
+      "aria-hidden": "true"
+    }
+  );
+}
+var backgroundStyles = {
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
+  gray: "bg-muted/30 text-foreground",
+  dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
+  gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-muted-foreground"
+};
+var spacingStyles = {
+  none: "py-0 md:py-0",
+  sm: "py-12 md:py-16",
+  md: "py-16 md:py-24",
+  lg: "py-20 md:py-32",
+  xl: "py-24 md:py-40"
+};
+var Section = React5__default.forwardRef(
+  ({
+    id,
+    title,
+    subtitle,
+    children,
+    className,
+    style,
+    background = "default",
+    spacing = "lg",
+    pattern,
+    patternOpacity,
+    patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
+    ...props
+  }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        id,
+        className: cn(
+          "relative",
+          pattern ? "overflow-hidden" : null,
+          backgroundStyles[background],
+          spacingStyles[spacing],
+          className
+        ),
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            PatternBackground,
+            {
+              pattern,
+              opacity: effectivePatternOpacity,
+              className: patternClassName
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Section.displayName = "Section";
 function ArticleTocSidebarComponent({
   className,
   containerClassName,
@@ -869,13 +917,17 @@ function ArticleTocSidebarComponent({
   ctaSlot,
   children,
   enableTocTracking = true,
-  optixFlowConfig
+  optixFlowConfig,
+  background,
+  spacing,
+  pattern,
+  patternOpacity
 }) {
   const ctaActions = ctaActionsProp ?? (ctaButtonText ? [{ label: ctaButtonText, href: ctaButtonHref || "#", variant: "default", className: "w-full" }] : []);
-  const [activeSection, setActiveSection] = React4.useState(
+  const [activeSection, setActiveSection] = React5.useState(
     sections?.[0]?.id || ""
   );
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!enableTocTracking || !sections || sections.length === 0) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -893,12 +945,12 @@ function ArticleTocSidebarComponent({
     });
     return () => observer.disconnect();
   }, [sections, enableTocTracking]);
-  const categoryContent = React4.useMemo(() => {
+  const categoryContent = React5.useMemo(() => {
     if (categorySlot) return categorySlot;
     if (!category) return null;
     return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: category });
   }, [categorySlot, category]);
-  const authorContent = React4.useMemo(() => {
+  const authorContent = React5.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-6 flex items-center gap-4", authorClassName), children: [
@@ -918,7 +970,7 @@ function ArticleTocSidebarComponent({
       ] })
     ] });
   }, [authorSlot, authorName, authorImage, authorHref, publishDate, readTime, authorClassName]);
-  const heroMediaContent = React4.useMemo(() => {
+  const heroMediaContent = React5.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsx(
@@ -931,7 +983,7 @@ function ArticleTocSidebarComponent({
       }
     );
   }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
-  const tocContent = React4.useMemo(() => {
+  const tocContent = React5.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-4", tocClassName), children: [
@@ -939,7 +991,7 @@ function ArticleTocSidebarComponent({
       /* @__PURE__ */ jsx("nav", { className: "space-y-2", children: sections.map((section) => {
         const isActive = activeSection === section.id;
         if (renderSectionLink) {
-          return /* @__PURE__ */ jsx(React4.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+          return /* @__PURE__ */ jsx(React5.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
         }
         return /* @__PURE__ */ jsx(
           Pressable,
@@ -956,7 +1008,7 @@ function ArticleTocSidebarComponent({
       }) })
     ] });
   }, [tocSlot, sections, activeSection, renderSectionLink, tocClassName]);
-  const ctaContent = React4.useMemo(() => {
+  const ctaContent = React5.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaTitle && !ctaDescription && (!ctaActions || ctaActions.length === 0)) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border bg-muted/50 p-4", ctaClassName), children: [
@@ -981,22 +1033,32 @@ function ArticleTocSidebarComponent({
       }) })
     ] });
   }, [ctaSlot, ctaTitle, ctaDescription, ctaActions, ctaClassName]);
-  return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_300px]", children: [
-    /* @__PURE__ */ jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-      /* @__PURE__ */ jsxs("div", { className: cn("mb-8 not-prose", headerClassName), children: [
-        categoryContent,
-        title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", titleClassName), children: title })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
-        authorContent
-      ] }),
-      heroMediaContent,
-      children || defaultArticleContent(optixFlowConfig)
-    ] }),
-    /* @__PURE__ */ jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-8 space-y-6", children: [
-      tocContent,
-      ctaContent
-    ] }) })
-  ] }) }) });
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-[minmax(0,1fr)_300px]", children: [
+        /* @__PURE__ */ jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("mb-8 not-prose", headerClassName), children: [
+            categoryContent,
+            title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", titleClassName), children: title })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
+            authorContent
+          ] }),
+          heroMediaContent,
+          children
+        ] }),
+        /* @__PURE__ */ jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-8 space-y-6", children: [
+          tocContent,
+          ctaContent
+        ] }) })
+      ] }) })
+    }
+  );
 }
 
 export { ArticleTocSidebarComponent as ArticleTocSidebar };