@almadar/ui 2.23.0 → 2.24.0

package/dist/marketing/index.js

@@ -1,20 +1,20 @@
-import React5, { createContext, useCallback, useContext, useState, useRef, useEffect } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React5, { createContext, useCallback, useContext, useState, useRef, useEffect, useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
 import { Loader2, Check, User } from 'lucide-react';
 
 // node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
-  var t, f, n = "";
+  var t, f3, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
   else if ("object" == typeof e) if (Array.isArray(e)) {
     var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
+    for (t = 0; t < o; t++) e[t] && (f3 = r(e[t])) && (n && (n += " "), n += f3);
+  } else for (f3 in e) e[f3] && (n && (n += " "), n += f3);
   return n;
 }
 function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  for (var e, t, f3 = 0, n = "", o = arguments.length; f3 < o; f3++) (e = arguments[f3]) && (t = r(e)) && (n && (n += " "), n += t);
   return n;
 }
 
@@ -3023,9 +3023,9 @@ var variantStyles2 = {
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
-    "hover:bg-[var(--color-secondary-hover)]",
+    "bg-transparent text-[var(--color-accent)]",
+    "border-[length:var(--border-width)] border-[var(--color-accent)]",
+    "hover:bg-[var(--color-accent)] hover:text-white",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
@@ -3481,7 +3481,7 @@ var ContentSection = React5.forwardRef(
           paddingClasses[padding],
           className
         ),
-        children: /* @__PURE__ */ jsx(Box, { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children })
+        children
       }
     );
   }
@@ -3663,14 +3663,14 @@ var HeroSection = ({
       src: image.src,
       alt: image.alt,
       className: cn(
-        imagePosition === "right" ? "flex-1 min-h-[300px]" : "w-full max-w-3xl min-h-[400px]"
+        imagePosition === "right" ? "flex-1 min-h-[300px]" : "w-full min-h-[400px]"
       )
     }
   );
-  const innerContent = image && imagePosition === "right" ? /* @__PURE__ */ jsxs(HStack, { gap: "xl", align: "center", className: "w-full max-w-6xl", responsive: true, children: [
+  const innerContent = image && imagePosition === "right" ? /* @__PURE__ */ jsxs(HStack, { gap: "xl", align: "center", className: "w-full", responsive: true, children: [
     textContent,
     imageNode
-  ] }) : /* @__PURE__ */ jsxs(VStack, { gap: "xl", align: isCenter ? "center" : "start", className: "w-full max-w-6xl", children: [
+  ] }) : /* @__PURE__ */ jsxs(VStack, { gap: "xl", align: isCenter ? "center" : "start", className: "w-full", children: [
     textContent,
     image && imagePosition === "below" && imageNode
   ] });
@@ -3728,7 +3728,7 @@ var CTABanner = ({
         {
           gap: "lg",
           align: align === "center" ? "center" : "start",
-          className: "max-w-3xl mx-auto",
+          className: "mx-auto",
           children: [
             /* @__PURE__ */ jsx(Typography, { variant: "h2", align, children: title }),
             subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body", color: "muted", align, children: subtitle }),
@@ -3787,7 +3787,7 @@ var FeatureCard = ({
         {
           name: icon,
           size: iconSizeMap[size],
-          className: "text-[var(--color-primary)]"
+          className: "text-[var(--color-accent,#06b6d4)]"
         }
       );
     }
@@ -4015,7 +4015,7 @@ var SplitSection = ({
         className
       ),
       padding: "lg",
-      children: /* @__PURE__ */ jsxs(Box, { className: cn("max-w-7xl mx-auto flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
+      children: /* @__PURE__ */ jsxs(Box, { className: cn("w-full flex flex-col lg:flex-row gap-10 lg:gap-16 items-center", isImageLeft && "lg:flex-row-reverse"), children: [
         /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 lg:min-w-[45%]", children: textContent }),
         /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0 lg:max-w-[50%]", children: mediaContent })
       ] })
@@ -4435,11 +4435,6 @@ var CaseStudyCard = ({
   ] }) });
 };
 CaseStudyCard.displayName = "CaseStudyCard";
-var maxWidthMap = {
-  sm: "max-w-2xl",
-  md: "max-w-3xl",
-  lg: "max-w-4xl"
-};
 var ArticleSection = ({
   title,
   children,
@@ -4450,8 +4445,7 @@ var ArticleSection = ({
     Box,
     {
       className: cn(
-        maxWidthMap[maxWidth],
-        "mx-auto",
+        "w-full",
         className
       ),
       padding: "md",
@@ -4479,7 +4473,7 @@ var MarketingFooter = ({
         "pt-12 pb-8 px-4",
         className
       ),
-      children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", className: "max-w-6xl mx-auto", children: [
+      children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", className: "w-full mx-auto", children: [
         /* @__PURE__ */ jsxs(HStack, { gap: "lg", align: "start", className: "flex-wrap w-full justify-between", children: [
           logo && /* @__PURE__ */ jsx(VStack, { gap: "sm", className: "min-w-[140px] mb-4", children: logo.href ? /* @__PURE__ */ jsx("a", { href: logo.href, children: /* @__PURE__ */ jsx("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }) : /* @__PURE__ */ jsx("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }),
           columns.map((col) => /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "min-w-[140px] mb-4", children: [
@@ -4498,7 +4492,7 @@ var MarketingFooter = ({
                 className: cn(
                   "text-sm no-underline",
                   "text-[var(--color-background)]/60",
-                  "hover:text-[var(--color-background)]",
+                  "hover:text-[var(--color-accent)]",
                   "transition-colors duration-150"
                 ),
                 target: item.href.startsWith("http") ? "_blank" : void 0,
@@ -4638,5 +4632,1019 @@ var AnimatedCounter = ({
   ] });
 };
 AnimatedCounter.displayName = "AnimatedCounter";
+var PI = Math.PI;
+function lineIntersection(x1, y1, x2, y2, x3, y3, x4, y4) {
+  const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+  if (Math.abs(denom) < 1e-10) return [(x1 + x3) / 2, (y1 + y3) / 2];
+  const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
+  return [x1 + t * (x2 - x1), y1 + t * (y2 - y1)];
+}
+function f(n) {
+  return n.toFixed(3);
+}
+function picStar(cx, cy, R, n, theta, extent) {
+  const verts = [];
+  for (let k = 0; k < n; k++) {
+    const angle = PI / n + k * (2 * PI) / n;
+    verts.push([cx + R * Math.cos(angle), cy + R * Math.sin(angle)]);
+  }
+  const mids = [];
+  for (let k = 0; k < n; k++) {
+    const next = (k + 1) % n;
+    mids.push([(verts[k][0] + verts[next][0]) / 2, (verts[k][1] + verts[next][1]) / 2]);
+  }
+  const innerPts = [];
+  for (let k = 0; k < n; k++) {
+    const next = (k + 1) % n;
+    const M1 = mids[k];
+    const M2 = mids[next];
+    const edx1 = verts[(k + 1) % n][0] - verts[k][0];
+    const edy1 = verts[(k + 1) % n][1] - verts[k][1];
+    const elen1 = Math.sqrt(edx1 * edx1 + edy1 * edy1);
+    const tx1 = edx1 / elen1;
+    const ty1 = edy1 / elen1;
+    const r1x = tx1 * Math.cos(theta) + ty1 * Math.sin(theta);
+    const r1y = -tx1 * Math.sin(theta) + ty1 * Math.cos(theta);
+    const edx2 = verts[(next + 1) % n][0] - verts[next][0];
+    const edy2 = verts[(next + 1) % n][1] - verts[next][1];
+    const elen2 = Math.sqrt(edx2 * edx2 + edy2 * edy2);
+    const tx2 = edx2 / elen2;
+    const ty2 = edy2 / elen2;
+    const bTheta = PI - theta;
+    const r2x = tx2 * Math.cos(bTheta) + ty2 * Math.sin(bTheta);
+    const r2y = -tx2 * Math.sin(bTheta) + ty2 * Math.cos(bTheta);
+    const P = lineIntersection(
+      M1[0],
+      M1[1],
+      M1[0] + r1x * extent,
+      M1[1] + r1y * extent,
+      M2[0],
+      M2[1],
+      M2[0] + r2x * extent,
+      M2[1] + r2y * extent
+    );
+    innerPts.push(P);
+  }
+  const starPath = mids.map((m, k) => {
+    const inner = innerPts[k];
+    const nextMid = mids[(k + 1) % n];
+    return `M ${f(m[0])},${f(m[1])} L ${f(inner[0])},${f(inner[1])} L ${f(nextMid[0])},${f(nextMid[1])}`;
+  }).join(" ");
+  return { starPath, mids, verts };
+}
+function Star8({ size, color, strokeWidth }) {
+  const s = size;
+  const cx = s / 2;
+  const cy = s / 2;
+  const a = s / (1 + Math.SQRT2);
+  const R = a / (2 * Math.sin(PI / 8));
+  const theta = 67.5 * PI / 180;
+  const { starPath, mids } = picStar(cx, cy, R, 8, theta, s);
+  const corners = [[0, 0], [s, 0], [s, s], [0, s]];
+  const crossPaths = [];
+  for (const [cornX, cornY] of corners) {
+    const dists = mids.map((m, i) => ({ i, d: Math.hypot(m[0] - cornX, m[1] - cornY) }));
+    dists.sort((a2, b) => a2.d - b.d);
+    const m1 = mids[dists[0].i];
+    const m2 = mids[dists[1].i];
+    crossPaths.push(`M ${f(m1[0])},${f(m1[1])} L ${f(cornX)},${f(cornY)} L ${f(m2[0])},${f(m2[1])}`);
+  }
+  return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: color, strokeWidth, children: [
+    /* @__PURE__ */ jsx("path", { d: starPath }),
+    crossPaths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i))
+  ] });
+}
+function Star6({ size, color, strokeWidth }) {
+  const w = size;
+  const h = size * (2 / Math.sqrt(3));
+  const cx = w / 2;
+  const cy = h / 2;
+  const a = w / Math.sqrt(3);
+  const R = a;
+  const theta = 60 * PI / 180;
+  const { starPath, mids, verts } = picStar(cx, cy, R, 6, theta, w);
+  const triPaths = [];
+  for (let k = 0; k < 6; k++) {
+    const v = verts[k];
+    const m1 = mids[(k + 5) % 6];
+    const m2 = mids[k];
+    triPaths.push(`M ${f(m1[0])},${f(m1[1])} L ${f(v[0])},${f(v[1])} L ${f(m2[0])},${f(m2[1])}`);
+  }
+  return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: color, strokeWidth, children: [
+    /* @__PURE__ */ jsx("path", { d: starPath }),
+    triPaths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i))
+  ] });
+}
+function Khatam({ size, color, strokeWidth }) {
+  const s = size;
+  const cx = s / 2;
+  const cy = s / 2;
+  const a = s / (1 + Math.SQRT2);
+  const R = a / (2 * Math.sin(PI / 8));
+  const theta = 72 * PI / 180;
+  const { starPath, mids } = picStar(cx, cy, R, 8, theta, s);
+  const corners = [[0, 0], [s, 0], [s, s], [0, s]];
+  const crossPaths = [];
+  for (const [cornX, cornY] of corners) {
+    const dists = mids.map((m, i) => ({ i, d: Math.hypot(m[0] - cornX, m[1] - cornY) }));
+    dists.sort((a2, b) => a2.d - b.d);
+    const m1 = mids[dists[0].i];
+    const m2 = mids[dists[1].i];
+    crossPaths.push(`M ${f(m1[0])},${f(m1[1])} L ${f(cornX)},${f(cornY)} L ${f(m2[0])},${f(m2[1])}`);
+  }
+  const orbitR = R * 0.35;
+  return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: color, strokeWidth, children: [
+    /* @__PURE__ */ jsx("path", { d: starPath }),
+    crossPaths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i)),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: orbitR, opacity: "0.4" })
+  ] });
+}
+function RosetteDouble({ size, color, strokeWidth }) {
+  const s = size;
+  const cx = s / 2;
+  const cy = s / 2;
+  const a = s / (1 + Math.SQRT2);
+  const Router = a / (2 * Math.sin(PI / 8));
+  const Rinner = Router * 0.45;
+  const outer = picStar(cx, cy, Router, 8, 72 * PI / 180, s);
+  const inner = picStar(cx, cy, Rinner, 8, 68 * PI / 180, s);
+  const corners = [[0, 0], [s, 0], [s, s], [0, s]];
+  const crossPaths = [];
+  for (const [cornX, cornY] of corners) {
+    const dists = outer.mids.map((m, i) => ({ i, d: Math.hypot(m[0] - cornX, m[1] - cornY) }));
+    dists.sort((a2, b) => a2.d - b.d);
+    const m1 = outer.mids[dists[0].i];
+    const m2 = outer.mids[dists[1].i];
+    crossPaths.push(`M ${f(m1[0])},${f(m1[1])} L ${f(cornX)},${f(cornY)} L ${f(m2[0])},${f(m2[1])}`);
+  }
+  const connectors = [];
+  for (let k = 0; k < 8; k++) {
+    const om = outer.mids[k];
+    const im = inner.mids[k];
+    connectors.push(`M ${f(im[0])},${f(im[1])} L ${f(om[0])},${f(om[1])}`);
+  }
+  return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: color, strokeWidth, children: [
+    /* @__PURE__ */ jsx("path", { d: outer.starPath }),
+    /* @__PURE__ */ jsx("path", { d: inner.starPath, opacity: "0.7" }),
+    crossPaths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, `c${i}`)),
+    connectors.map((d, i) => /* @__PURE__ */ jsx("path", { d, opacity: "0.4" }, `n${i}`))
+  ] });
+}
+function RosetteFilled({ size, color, strokeWidth }) {
+  const s = size;
+  const cx = s / 2;
+  const cy = s / 2;
+  const a = s / (1 + Math.SQRT2);
+  const Router = a / (2 * Math.sin(PI / 8));
+  const theta = 72 * PI / 180;
+  const outer = picStar(cx, cy, Router, 8, theta, s);
+  const Rinner = Router * 0.35;
+  const inner6 = picStar(cx, cy, Rinner, 6, 60 * PI / 180, s);
+  const corners = [[0, 0], [s, 0], [s, s], [0, s]];
+  const crossPaths = [];
+  for (const [cornX, cornY] of corners) {
+    const dists = outer.mids.map((m, i) => ({ i, d: Math.hypot(m[0] - cornX, m[1] - cornY) }));
+    dists.sort((a2, b) => a2.d - b.d);
+    const m1 = outer.mids[dists[0].i];
+    const m2 = outer.mids[dists[1].i];
+    crossPaths.push(`M ${f(m1[0])},${f(m1[1])} L ${f(cornX)},${f(cornY)} L ${f(m2[0])},${f(m2[1])}`);
+  }
+  const triPaths = [];
+  for (let k = 0; k < 6; k++) {
+    const v = inner6.verts[k];
+    const m1 = inner6.mids[(k + 5) % 6];
+    const m2 = inner6.mids[k];
+    triPaths.push(`M ${f(m1[0])},${f(m1[1])} L ${f(v[0])},${f(v[1])} L ${f(m2[0])},${f(m2[1])}`);
+  }
+  const orbitR = Router * 0.35;
+  return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: color, strokeWidth, children: [
+    /* @__PURE__ */ jsx("path", { d: outer.starPath }),
+    crossPaths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, `c${i}`)),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: orbitR, opacity: "0.3" }),
+    /* @__PURE__ */ jsx("path", { d: inner6.starPath, opacity: "0.6" }),
+    triPaths.map((d, i) => /* @__PURE__ */ jsx("path", { d, opacity: "0.5" }, `t${i}`))
+  ] });
+}
+function Star10({ size, color, strokeWidth }) {
+  const s = size;
+  const cx = s / 2;
+  const cy = s / 2;
+  const R = s * 0.42;
+  const theta = 72 * PI / 180;
+  const { starPath, mids, verts } = picStar(cx, cy, R, 10, theta, s);
+  const edgePaths = [];
+  for (let k = 0; k < 10; k++) {
+    const v = verts[k];
+    const m1 = mids[(k + 9) % 10];
+    const m2 = mids[k];
+    edgePaths.push(`M ${f(m1[0])},${f(m1[1])} L ${f(v[0])},${f(v[1])} L ${f(m2[0])},${f(m2[1])}`);
+  }
+  return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: color, strokeWidth, children: [
+    /* @__PURE__ */ jsx("path", { d: starPath }),
+    edgePaths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i))
+  ] });
+}
+function Star12({ size, color, strokeWidth }) {
+  const s = size;
+  const cx = s / 2;
+  const cy = s / 2;
+  const R = s * 0.44;
+  const theta = 75 * PI / 180;
+  const { starPath, mids, verts } = picStar(cx, cy, R, 12, theta, s);
+  const triPaths = [];
+  for (let k = 0; k < 12; k++) {
+    const v = verts[k];
+    const m1 = mids[(k + 11) % 12];
+    const m2 = mids[k];
+    triPaths.push(`M ${f(m1[0])},${f(m1[1])} L ${f(v[0])},${f(v[1])} L ${f(m2[0])},${f(m2[1])}`);
+  }
+  return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: color, strokeWidth, children: [
+    /* @__PURE__ */ jsx("path", { d: starPath }),
+    triPaths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i))
+  ] });
+}
+function Seigaiha({ size, color, strokeWidth }) {
+  const s = size;
+  const r2 = s / 2;
+  const paths = [];
+  const centers = [
+    [s / 2, s * 0.6],
+    [0, s * 0.1],
+    [s, s * 0.1]
+  ];
+  for (const [cx, cy] of centers) {
+    for (let ring = 1; ring <= 3; ring++) {
+      const cr = r2 * (ring / 3);
+      paths.push(
+        `M ${f(cx - cr)},${f(cy)} A ${f(cr)} ${f(cr)} 0 0 1 ${f(cx + cr)},${f(cy)}`
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx("g", { fill: "none", stroke: color, strokeWidth, children: paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i)) });
+}
+function GreekKey({ size, color, strokeWidth }) {
+  const s = size;
+  const u = s / 4;
+  const paths = [
+    // Outer frame
+    `M 0,0 L ${f(s)},0`,
+    `M 0,${f(s)} L ${f(s)},${f(s)}`,
+    // Spiral from left
+    `M 0,${f(u)} L ${f(3 * u)},${f(u)} L ${f(3 * u)},${f(3 * u)} L ${f(u)},${f(3 * u)} L ${f(u)},${f(2 * u)} L ${f(2 * u)},${f(2 * u)}`,
+    // Spiral from right (mirrored, offset)
+    `M ${f(s)},${f(3 * u)} L ${f(s - 3 * u)},${f(3 * u)} L ${f(s - 3 * u)},${f(u)} L ${f(s - u)},${f(u)} L ${f(s - u)},${f(2 * u)} L ${f(s - 2 * u)},${f(2 * u)}`,
+    // Vertical connectors at edges
+    `M 0,0 L 0,${f(u)}`,
+    `M ${f(s)},0 L ${f(s)},${f(u)}`,
+    `M 0,${f(3 * u)} L 0,${f(s)}`,
+    `M ${f(s)},${f(3 * u)} L ${f(s)},${f(s)}`
+  ];
+  return /* @__PURE__ */ jsx("g", { fill: "none", stroke: color, strokeWidth, children: paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i)) });
+}
+function CelticKnot({ size, color, strokeWidth }) {
+  const s = size;
+  const q = s / 4;
+  const r2 = q * 0.9;
+  const paths = [
+    // Band 1: diagonal with curves at crossings
+    `M 0,0 Q ${f(q)},${f(q)} ${f(2 * q)},${f(2 * q)}`,
+    `M ${f(2 * q)},${f(2 * q)} Q ${f(3 * q)},${f(3 * q)} ${f(s)},${f(s)}`,
+    // Band 2: other diagonal
+    `M ${f(s)},0 Q ${f(3 * q)},${f(q)} ${f(2 * q)},${f(2 * q)}`,
+    `M ${f(2 * q)},${f(2 * q)} Q ${f(q)},${f(3 * q)} 0,${f(s)}`,
+    // Outer loops that connect bands at tile edges for continuous weave
+    `M 0,0 Q ${f(-q * 0.3)},${f(2 * q)} 0,${f(s)}`,
+    `M ${f(s)},0 Q ${f(s + q * 0.3)},${f(2 * q)} ${f(s)},${f(s)}`,
+    `M 0,0 Q ${f(2 * q)},${f(-q * 0.3)} ${f(s)},0`,
+    `M 0,${f(s)} Q ${f(2 * q)},${f(s + q * 0.3)} ${f(s)},${f(s)}`,
+    // Inner circle at crossing
+    `M ${f(2 * q + r2 * 0.3)},${f(2 * q)} A ${f(r2 * 0.3)} ${f(r2 * 0.3)} 0 1 1 ${f(2 * q + r2 * 0.3)},${f(2 * q + 1e-3)}`
+  ];
+  return /* @__PURE__ */ jsx("g", { fill: "none", stroke: color, strokeWidth, children: paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i)) });
+}
+function Kolam({ size, color, strokeWidth }) {
+  const s = size;
+  const u = s / 4;
+  const dotR = s * 0.015;
+  const dots = [];
+  for (let row = 1; row <= 3; row++) {
+    for (let col = 1; col <= 3; col++) {
+      dots.push([col * u, row * u]);
+    }
+  }
+  const curves = [];
+  for (let row = 1; row <= 3; row++) {
+    const y = row * u;
+    for (let col = 1; col < 3; col++) {
+      const x1 = col * u;
+      const x2 = (col + 1) * u;
+      const mx = (x1 + x2) / 2;
+      const bulge = u * 0.4;
+      curves.push(`M ${f(x1)},${f(y)} C ${f(mx)},${f(y - bulge)} ${f(mx)},${f(y - bulge)} ${f(x2)},${f(y)}`);
+      curves.push(`M ${f(x1)},${f(y)} C ${f(mx)},${f(y + bulge)} ${f(mx)},${f(y + bulge)} ${f(x2)},${f(y)}`);
+    }
+  }
+  for (let col = 1; col <= 3; col++) {
+    const x = col * u;
+    for (let row = 1; row < 3; row++) {
+      const y1 = row * u;
+      const y2 = (row + 1) * u;
+      const my = (y1 + y2) / 2;
+      const bulge = u * 0.4;
+      curves.push(`M ${f(x)},${f(y1)} C ${f(x - bulge)},${f(my)} ${f(x - bulge)},${f(my)} ${f(x)},${f(y2)}`);
+      curves.push(`M ${f(x)},${f(y1)} C ${f(x + bulge)},${f(my)} ${f(x + bulge)},${f(my)} ${f(x)},${f(y2)}`);
+    }
+  }
+  for (let k = 1; k <= 3; k++) {
+    curves.push(`M ${f(k * u)},${f(u)} C ${f(k * u)},${f(u * 0.5)} ${f(k * u)},${f(u * 0.5)} ${f(k * u)},0`);
+    curves.push(`M ${f(k * u)},${f(3 * u)} C ${f(k * u)},${f(3.5 * u)} ${f(k * u)},${f(3.5 * u)} ${f(k * u)},${f(s)}`);
+    curves.push(`M ${f(u)},${f(k * u)} C ${f(u * 0.5)},${f(k * u)} ${f(u * 0.5)},${f(k * u)} 0,${f(k * u)}`);
+    curves.push(`M ${f(3 * u)},${f(k * u)} C ${f(3.5 * u)},${f(k * u)} ${f(3.5 * u)},${f(k * u)} ${f(s)},${f(k * u)}`);
+  }
+  return /* @__PURE__ */ jsxs("g", { fill: "none", stroke: color, strokeWidth, children: [
+    curves.map((d, i) => /* @__PURE__ */ jsx("path", { d }, `c${i}`)),
+    dots.map(([x, y], i) => /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: dotR, fill: color, opacity: "0.5" }, `d${i}`))
+  ] });
+}
+function Arch({ size, color, strokeWidth }) {
+  const w = size;
+  const h = size * 1.5;
+  const cx = w / 2;
+  const paths = [];
+  for (let ring = 0; ring < 4; ring++) {
+    const scale = 1 - ring * 0.2;
+    const archW = w * 0.48 * scale;
+    const archH = h * 0.7 * scale;
+    const baseY = h * 0.85;
+    const tipY = baseY - archH;
+    const lx = cx - archW;
+    const rx = cx + archW;
+    const offset = archW * 0.3;
+    const lcx = lx + offset;
+    const rdx = cx - lcx;
+    const rdy = baseY - tipY;
+    const radius = Math.sqrt(rdx * rdx + rdy * rdy);
+    paths.push(
+      `M ${f(lx)},${f(baseY)} A ${f(radius)} ${f(radius)} 0 0 1 ${f(cx)},${f(tipY)} A ${f(radius)} ${f(radius)} 0 0 1 ${f(rx)},${f(baseY)}`
+    );
+    if (ring === 0) {
+      paths.push(`M ${f(lx)},${f(baseY)} L ${f(rx)},${f(baseY)}`);
+    }
+  }
+  const innerScale = 1 - 3 * 0.2;
+  const keyR = w * 0.48 * innerScale * 0.35;
+  const keyY = h * 0.85 - h * 0.7 * innerScale * 0.4;
+  paths.push(
+    `M ${f(cx + keyR)},${f(keyY)} A ${f(keyR)} ${f(keyR)} 0 1 1 ${f(cx + keyR)},${f(keyY + 1e-3)}`
+  );
+  const spR = w * 0.15;
+  paths.push(`M 0,0 A ${f(spR)} ${f(spR)} 0 0 0 ${f(spR)},${f(spR)}`);
+  paths.push(`M ${f(w)},0 A ${f(spR)} ${f(spR)} 0 0 1 ${f(w - spR)},${f(spR)}`);
+  return /* @__PURE__ */ jsx("g", { fill: "none", stroke: color, strokeWidth, children: paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i)) });
+}
+function ArabesqueVine({ size, color, strokeWidth }) {
+  const w = size;
+  const h = size * 1.2;
+  const cx = w / 2;
+  const paths = [];
+  const amp = w * 0.3;
+  const segments = 3;
+  const segH = h / segments;
+  for (let i = 0; i < segments; i++) {
+    const y0 = i * segH;
+    const y1 = y0 + segH;
+    const dir = i % 2 === 0 ? 1 : -1;
+    paths.push(
+      `M ${f(cx)},${f(y0)} C ${f(cx + amp * dir)},${f(y0 + segH * 0.33)} ${f(cx - amp * dir)},${f(y0 + segH * 0.66)} ${f(cx)},${f(y1)}`
+    );
+    const branchY = y0 + segH * 0.5;
+    const branchX = cx + amp * dir * 0.15;
+    const tendrilLen = w * 0.25;
+    const tlx = branchX - tendrilLen;
+    const tly = branchY - tendrilLen * 0.4;
+    paths.push(
+      `M ${f(branchX)},${f(branchY)} C ${f(branchX - tendrilLen * 0.5)},${f(branchY - tendrilLen * 0.8)} ${f(tlx - tendrilLen * 0.2)},${f(tly + tendrilLen * 0.3)} ${f(tlx)},${f(tly)}`
+    );
+    paths.push(
+      `M ${f(tlx)},${f(tly)} C ${f(tlx + tendrilLen * 0.3)},${f(tly + tendrilLen * 0.5)} ${f(branchX - tendrilLen * 0.2)},${f(branchY + tendrilLen * 0.3)} ${f(branchX)},${f(branchY)}`
+    );
+    const trx = branchX + tendrilLen;
+    const try_ = branchY + tendrilLen * 0.4;
+    paths.push(
+      `M ${f(branchX)},${f(branchY)} C ${f(branchX + tendrilLen * 0.5)},${f(branchY + tendrilLen * 0.8)} ${f(trx + tendrilLen * 0.2)},${f(try_ - tendrilLen * 0.3)} ${f(trx)},${f(try_)}`
+    );
+    paths.push(
+      `M ${f(trx)},${f(try_)} C ${f(trx - tendrilLen * 0.3)},${f(try_ - tendrilLen * 0.5)} ${f(branchX + tendrilLen * 0.2)},${f(branchY - tendrilLen * 0.3)} ${f(branchX)},${f(branchY)}`
+    );
+    const spiralR = tendrilLen * 0.15;
+    paths.push(
+      `M ${f(tlx)},${f(tly)} A ${f(spiralR)} ${f(spiralR)} 0 1 0 ${f(tlx + spiralR * 2)},${f(tly)}`
+    );
+    paths.push(
+      `M ${f(trx)},${f(try_)} A ${f(spiralR)} ${f(spiralR)} 0 1 1 ${f(trx - spiralR * 2)},${f(try_)}`
+    );
+  }
+  return /* @__PURE__ */ jsx("g", { fill: "none", stroke: color, strokeWidth, children: paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i)) });
+}
+function ArabesqueNet({ size, color, strokeWidth }) {
+  const s = size;
+  const cells = 4;
+  const cellW = s / cells;
+  const cellH = s / cells;
+  const paths = [];
+  for (let row = 0; row < cells; row++) {
+    for (let col = 0; col < cells; col++) {
+      const cx = col * cellW + cellW / 2;
+      const cy = row * cellH + cellH / 2;
+      const hw = cellW * 0.5;
+      const hh = cellH * 0.5;
+      const bulge = cellW * 0.25;
+      paths.push(
+        `M ${f(cx)},${f(cy - hh)} Q ${f(cx + bulge)},${f(cy - bulge)} ${f(cx + hw)},${f(cy)}`
+      );
+      paths.push(
+        `M ${f(cx + hw)},${f(cy)} Q ${f(cx + bulge)},${f(cy + bulge)} ${f(cx)},${f(cy + hh)}`
+      );
+      paths.push(
+        `M ${f(cx)},${f(cy + hh)} Q ${f(cx - bulge)},${f(cy + bulge)} ${f(cx - hw)},${f(cy)}`
+      );
+      paths.push(
+        `M ${f(cx - hw)},${f(cy)} Q ${f(cx - bulge)},${f(cy - bulge)} ${f(cx)},${f(cy - hh)}`
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx("g", { fill: "none", stroke: color, strokeWidth, children: paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i)) });
+}
+var VARIANT_MAP = {
+  "star8": Star8,
+  "star6": Star6,
+  "khatam": Khatam,
+  "star10": Star10,
+  "star12": Star12,
+  "rosette-double": RosetteDouble,
+  "rosette-filled": RosetteFilled,
+  "seigaiha": Seigaiha,
+  "greek-key": GreekKey,
+  "celtic-knot": CelticKnot,
+  "kolam": Kolam,
+  "arch": Arch,
+  "arabesque-vine": ArabesqueVine,
+  "arabesque-net": ArabesqueNet
+};
+var PatternTile = ({
+  variant = "star8",
+  size = 60,
+  color = "var(--color-primary)",
+  strokeWidth = 0.5,
+  className
+}) => {
+  const Variant = VARIANT_MAP[variant];
+  return /* @__PURE__ */ jsx("g", { className, children: /* @__PURE__ */ jsx(Variant, { size, color, strokeWidth }) });
+};
+PatternTile.displayName = "PatternTile";
+function getTileDimensions(variant, size) {
+  if (variant === "star6") {
+    return { width: size, height: size * (2 / Math.sqrt(3)) };
+  }
+  if (variant === "arch") {
+    return { width: size, height: size * 1.5 };
+  }
+  if (variant === "arabesque-vine") {
+    return { width: size, height: size * 1.2 };
+  }
+  return { width: size, height: size };
+}
+function PatternDefs({
+  patternId,
+  variant,
+  size,
+  color,
+  strokeWidth
+}) {
+  const dims = getTileDimensions(variant, size);
+  return /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+    "pattern",
+    {
+      id: patternId,
+      x: "0",
+      y: "0",
+      width: dims.width,
+      height: dims.height,
+      patternUnits: "userSpaceOnUse",
+      children: /* @__PURE__ */ jsx(
+        PatternTile,
+        {
+          variant,
+          size,
+          color,
+          strokeWidth
+        }
+      )
+    }
+  ) });
+}
+function BackgroundMode({
+  patternId,
+  variant,
+  size,
+  color,
+  strokeWidth,
+  opacity,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn("absolute inset-0 w-full h-full pointer-events-none", className),
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          PatternDefs,
+          {
+            patternId,
+            variant,
+            size,
+            color,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "100%",
+            height: "100%",
+            fill: `url(#${patternId})`,
+            opacity
+          }
+        )
+      ]
+    }
+  );
+}
+function SideMode({
+  patternId,
+  variant,
+  size,
+  color,
+  strokeWidth,
+  opacity,
+  side,
+  className
+}) {
+  const maskId = `${patternId}-mask`;
+  const gradientId = `${patternId}-grad`;
+  const x1 = side === "left" ? "0%" : "100%";
+  const x2 = side === "left" ? "60%" : "40%";
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn("absolute inset-0 w-full h-full pointer-events-none", className),
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          PatternDefs,
+          {
+            patternId,
+            variant,
+            size,
+            color,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1, y1: "0%", x2, y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "1" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
+          ] }),
+          /* @__PURE__ */ jsx("mask", { id: maskId, children: /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${gradientId})` }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "100%",
+            height: "100%",
+            fill: `url(#${patternId})`,
+            mask: `url(#${maskId})`,
+            opacity
+          }
+        )
+      ]
+    }
+  );
+}
+function DualMode({
+  patternId,
+  variant,
+  size,
+  color,
+  strokeWidth,
+  opacity,
+  className
+}) {
+  const maskId = `${patternId}-dmask`;
+  const gradientId = `${patternId}-dgrad`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn("absolute inset-0 w-full h-full pointer-events-none", className),
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          PatternDefs,
+          {
+            patternId,
+            variant,
+            size,
+            color,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "1" }),
+            /* @__PURE__ */ jsx("stop", { offset: "35%", stopColor: "white", stopOpacity: "0" }),
+            /* @__PURE__ */ jsx("stop", { offset: "65%", stopColor: "white", stopOpacity: "0" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: "1" })
+          ] }),
+          /* @__PURE__ */ jsx("mask", { id: maskId, children: /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${gradientId})` }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "100%",
+            height: "100%",
+            fill: `url(#${patternId})`,
+            mask: `url(#${maskId})`,
+            opacity
+          }
+        )
+      ]
+    }
+  );
+}
+function AroundMode({
+  patternId,
+  variant,
+  size,
+  color,
+  strokeWidth,
+  opacity,
+  className
+}) {
+  const maskId = `${patternId}-amask`;
+  const gradientId = `${patternId}-agrad`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn("absolute inset-0 w-full h-full pointer-events-none", className),
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          PatternDefs,
+          {
+            patternId,
+            variant,
+            size,
+            color,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
+            /* @__PURE__ */ jsx("stop", { offset: "55%", stopColor: "white", stopOpacity: "0" }),
+            /* @__PURE__ */ jsx("stop", { offset: "85%", stopColor: "white", stopOpacity: "1" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: "1" })
+          ] }),
+          /* @__PURE__ */ jsx("mask", { id: maskId, children: /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${gradientId})` }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "100%",
+            height: "100%",
+            fill: `url(#${patternId})`,
+            mask: `url(#${maskId})`,
+            opacity
+          }
+        )
+      ]
+    }
+  );
+}
+function FrameStrip({
+  patternId,
+  variant,
+  size,
+  color,
+  strokeWidth,
+  opacity,
+  height
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "w-full pointer-events-none",
+      style: { height },
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          PatternDefs,
+          {
+            patternId,
+            variant,
+            size,
+            color,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "100%",
+            height: "100%",
+            fill: `url(#${patternId})`,
+            opacity
+          }
+        )
+      ]
+    }
+  );
+}
+var GeometricPattern = ({
+  variant = "star8",
+  mode = "background",
+  opacity = 0.06,
+  color = "var(--color-primary)",
+  scale = 1,
+  strokeWidth = 0.5,
+  children,
+  className
+}) => {
+  const reactId = useId();
+  const patternId = `gp${reactId.replace(/:/g, "")}`;
+  const size = 60 * scale;
+  const stripHeight = 40 * scale;
+  if (mode === "frame") {
+    const topId = `${patternId}-top`;
+    const botId = `${patternId}-bot`;
+    return /* @__PURE__ */ jsxs(Box, { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx(
+        FrameStrip,
+        {
+          patternId: topId,
+          variant,
+          size,
+          color,
+          strokeWidth,
+          opacity,
+          height: stripHeight
+        }
+      ),
+      children,
+      /* @__PURE__ */ jsx(
+        FrameStrip,
+        {
+          patternId: botId,
+          variant,
+          size,
+          color,
+          strokeWidth,
+          opacity,
+          height: stripHeight
+        }
+      )
+    ] });
+  }
+  if (mode === "around") {
+    return /* @__PURE__ */ jsx(
+      AroundMode,
+      {
+        patternId,
+        variant,
+        size,
+        color,
+        strokeWidth,
+        opacity,
+        className
+      }
+    );
+  }
+  if (mode === "dual") {
+    return /* @__PURE__ */ jsx(
+      DualMode,
+      {
+        patternId,
+        variant,
+        size,
+        color,
+        strokeWidth,
+        opacity,
+        className
+      }
+    );
+  }
+  if (mode === "left" || mode === "right") {
+    return /* @__PURE__ */ jsx(
+      SideMode,
+      {
+        patternId,
+        variant,
+        size,
+        color,
+        strokeWidth,
+        opacity,
+        side: mode,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    BackgroundMode,
+    {
+      patternId,
+      variant,
+      size,
+      color,
+      strokeWidth,
+      opacity,
+      className
+    }
+  );
+};
+GeometricPattern.displayName = "GeometricPattern";
+function ArchSVG({
+  facing,
+  w,
+  h,
+  color,
+  strokeWidth
+}) {
+  const paths = [];
+  const archCount = 3;
+  const archH = h / archCount;
+  const rings = 5;
+  for (let a = 0; a < archCount; a++) {
+    const baseY = a * archH + archH;
+    const topY = a * archH + archH * 0.05;
+    for (let r2 = 0; r2 < rings; r2++) {
+      const scale = 1 - r2 * 0.17;
+      const archW = w * 0.95 * scale;
+      const aTopY = topY + (1 - scale) * (baseY - topY) * 0.5;
+      const aBaseY = baseY - (1 - scale) * archH * 0.05;
+      const edgeX2 = facing === "right" ? w : 0;
+      const innerX2 = facing === "right" ? w - archW : archW;
+      const midY = (aTopY + aBaseY) / 2;
+      const radius = Math.sqrt(archW * archW + (aBaseY - midY) * (aBaseY - midY));
+      if (facing === "right") {
+        paths.push(
+          `M ${f2(edgeX2)},${f2(aBaseY)} A ${f2(radius)} ${f2(radius)} 0 0 0 ${f2(innerX2)},${f2(aTopY + (aBaseY - aTopY) * 0.5)} A ${f2(radius)} ${f2(radius)} 0 0 0 ${f2(edgeX2)},${f2(aTopY)}`
+        );
+      } else {
+        paths.push(
+          `M ${f2(edgeX2)},${f2(aBaseY)} A ${f2(radius)} ${f2(radius)} 0 0 1 ${f2(innerX2)},${f2(aTopY + (aBaseY - aTopY) * 0.5)} A ${f2(radius)} ${f2(radius)} 0 0 1 ${f2(edgeX2)},${f2(aTopY)}`
+        );
+      }
+    }
+    const edgeX = facing === "right" ? w : 0;
+    const innerX = facing === "right" ? w * 0.05 : w * 0.95;
+    paths.push(`M ${f2(edgeX)},${f2(baseY)} L ${f2(innerX)},${f2(baseY)}`);
+  }
+  return /* @__PURE__ */ jsx("g", { fill: "none", stroke: color, strokeWidth, children: paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i)) });
+}
+function VineSVG({
+  facing,
+  w,
+  h,
+  color,
+  strokeWidth
+}) {
+  const paths = [];
+  const dir = facing === "right" ? -1 : 1;
+  const edgeX = facing === "right" ? w * 0.85 : w * 0.15;
+  const segments = 5;
+  const segH = h / segments;
+  for (let i = 0; i < segments; i++) {
+    const y0 = i * segH;
+    const y1 = y0 + segH;
+    const sway = w * 0.12 * (i % 2 === 0 ? 1 : -1);
+    paths.push(
+      `M ${f2(edgeX + sway)},${f2(y0)} C ${f2(edgeX - sway)},${f2(y0 + segH * 0.33)} ${f2(edgeX + sway)},${f2(y0 + segH * 0.66)} ${f2(edgeX - sway)},${f2(y1)}`
+    );
+    const branchY = y0 + segH * 0.35;
+    const branchX = edgeX;
+    const leafW = w * 0.55;
+    const leafH = segH * 0.35;
+    const leafTipX = branchX + dir * leafW;
+    const leafTipY = branchY - leafH * 0.2;
+    paths.push(
+      `M ${f2(branchX)},${f2(branchY)} C ${f2(branchX + dir * leafW * 0.3)},${f2(branchY - leafH)} ${f2(leafTipX - dir * leafW * 0.1)},${f2(leafTipY - leafH * 0.3)} ${f2(leafTipX)},${f2(leafTipY)}`
+    );
+    paths.push(
+      `M ${f2(leafTipX)},${f2(leafTipY)} C ${f2(leafTipX - dir * leafW * 0.2)},${f2(leafTipY + leafH * 0.6)} ${f2(branchX + dir * leafW * 0.15)},${f2(branchY + leafH * 0.4)} ${f2(branchX)},${f2(branchY + leafH * 0.1)}`
+    );
+    const tendrilY = y0 + segH * 0.7;
+    const tendrilW = w * 0.35;
+    const tendrilTipX = edgeX + dir * tendrilW;
+    paths.push(
+      `M ${f2(edgeX)},${f2(tendrilY)} Q ${f2(edgeX + dir * tendrilW * 0.6)},${f2(tendrilY - segH * 0.12)} ${f2(tendrilTipX)},${f2(tendrilY + segH * 0.05)}`
+    );
+    const spR = leafW * 0.08;
+    paths.push(
+      `M ${f2(leafTipX)},${f2(leafTipY)} A ${f2(spR)} ${f2(spR)} 0 1 ${facing === "right" ? 0 : 1} ${f2(leafTipX + dir * spR * 0.5)},${f2(leafTipY + spR)}`
+    );
+  }
+  return /* @__PURE__ */ jsx("g", { fill: "none", stroke: color, strokeWidth, children: paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i)) });
+}
+function LatticeSVG({
+  facing,
+  w,
+  h,
+  color,
+  strokeWidth
+}) {
+  const paths = [];
+  const cols = 5;
+  const rows = Math.ceil(h / (w / cols));
+  const cellW = w / cols;
+  const cellH = cellW;
+  const bulge = cellW * 0.3;
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const cx = col * cellW + cellW / 2;
+      const cy = row * cellH + cellH / 2;
+      const hw = cellW * 0.5;
+      const hh = cellH * 0.5;
+      paths.push(
+        `M ${f2(cx)},${f2(cy - hh)} Q ${f2(cx + bulge)},${f2(cy)} ${f2(cx)},${f2(cy + hh)}`
+      );
+      paths.push(
+        `M ${f2(cx)},${f2(cy - hh)} Q ${f2(cx - bulge)},${f2(cy)} ${f2(cx)},${f2(cy + hh)}`
+      );
+      paths.push(
+        `M ${f2(cx - hw)},${f2(cy)} Q ${f2(cx)},${f2(cy - bulge * 0.5)} ${f2(cx + hw)},${f2(cy)}`
+      );
+      paths.push(
+        `M ${f2(cx - hw)},${f2(cy)} Q ${f2(cx)},${f2(cy + bulge * 0.5)} ${f2(cx + hw)},${f2(cy)}`
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx("g", { fill: "none", stroke: color, strokeWidth, children: paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i)) });
+}
+function f2(n) {
+  return n.toFixed(2);
+}
+var VARIANT_MAP2 = {
+  arch: ArchSVG,
+  vine: VineSVG,
+  lattice: LatticeSVG
+};
+var EdgeDecoration = ({
+  variant = "arch",
+  side = "both",
+  opacity = 0.15,
+  color = "var(--color-primary)",
+  strokeWidth = 0.5,
+  width = 15,
+  className
+}) => {
+  const id = useId();
+  const Variant = VARIANT_MAP2[variant];
+  const sides = side === "both" ? ["left", "right"] : [side];
+  return /* @__PURE__ */ jsx(Fragment, { children: sides.map((s) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cn(
+        "absolute top-0 h-full pointer-events-none",
+        s === "left" ? "left-0" : "right-0",
+        className
+      ),
+      style: {
+        width: `${width}%`,
+        opacity
+      },
+      viewBox: `0 0 200 ${200 * 3}`,
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        Variant,
+        {
+          facing: s,
+          w: 200,
+          h: 600,
+          color,
+          strokeWidth
+        }
+      )
+    },
+    `${id}-${s}`
+  )) });
+};
+EdgeDecoration.displayName = "EdgeDecoration";
 
-export { AnimatedCounter, ArticleSection, Badge, Box, Button, CTABanner, Card, CaseStudyCard, Center, CommunityLinks, ContentSection, Divider, FeatureCard, FeatureGrid, GradientDivider, HStack, HeroSection, Icon, InstallBox, MarketingFooter, PricingCard, PricingGrid, PullQuote, ServiceCatalog, ShowcaseCard, SimpleGrid, Spacer, SplitSection, StatsGrid, StepFlow, TagCloud, TeamCard, Typography, VStack };
+export { AnimatedCounter, ArticleSection, Badge, Box, Button, CTABanner, Card, CaseStudyCard, Center, CommunityLinks, ContentSection, Divider, EdgeDecoration, FeatureCard, FeatureGrid, GeometricPattern, GradientDivider, HStack, HeroSection, Icon, InstallBox, MarketingFooter, PatternTile, PricingCard, PricingGrid, PullQuote, ServiceCatalog, ShowcaseCard, SimpleGrid, Spacer, SplitSection, StatsGrid, StepFlow, TagCloud, TeamCard, Typography, VStack, getTileDimensions };