@opencosmos/ui 1.3.1 → 1.3.2

package/dist/index.mjs

@@ -8267,6 +8267,34 @@ var GitHubIcon = ({
   );
 };
 
+// src/components/data-display/OpenCosmosIcon.tsx
+import { jsx as jsx68, jsxs as jsxs40 } from "react/jsx-runtime";
+var OpenCosmosIcon = ({
+  ref,
+  size = 20,
+  className = ""
+}) => /* @__PURE__ */ jsxs40(
+  "svg",
+  {
+    ref,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx68("circle", { cx: "12", cy: "12", r: "9.5", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsx68("ellipse", { cx: "12", cy: "12", rx: "9.5", ry: "3.2", strokeWidth: "1.25", transform: "rotate(-35 12 12)" }),
+      /* @__PURE__ */ jsx68("circle", { cx: "12", cy: "12", r: "1.75", fill: "currentColor", stroke: "none" })
+    ]
+  }
+);
+
 // src/components/data-display/Heading.tsx
 import React16 from "react";
 var Heading = ({
@@ -8374,7 +8402,7 @@ var Text = ({
 
 // src/components/data-display/VariableWeightText.tsx
 import { motion as motion2 } from "framer-motion";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var VariableWeightText = ({
   children,
   minWeight = 200,
@@ -8390,7 +8418,7 @@ var VariableWeightText = ({
   const effectiveIntensity = intensity ?? motionIntensity;
   const scaledDuration = effectiveIntensity > 0 ? duration * (5 / effectiveIntensity) : duration;
   if (effectiveIntensity === 0) {
-    return /* @__PURE__ */ jsx68(
+    return /* @__PURE__ */ jsx69(
       "div",
       {
         className,
@@ -8409,7 +8437,7 @@ var VariableWeightText = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     motion2.div,
     {
       initial: {
@@ -8446,7 +8474,7 @@ var VariableWeightText = ({
 // src/components/data-display/Typewriter.tsx
 import { motion as motion3 } from "framer-motion";
 import { useEffect as useEffect8, useState as useState13 } from "react";
-import { jsx as jsx69, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs41 } from "react/jsx-runtime";
 function Typewriter({
   text,
   speed = 0.05,
@@ -8509,9 +8537,9 @@ function Typewriter({
       clearTimeout(timeoutId);
     };
   }, [text, speed, delay, loop, loopDelay, shouldAnimate, scale]);
-  return /* @__PURE__ */ jsxs40(Component, { className: cn("inline", className), children: [
-    /* @__PURE__ */ jsx69("span", { children: displayedText }),
-    showCursor && /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsxs41(Component, { className: cn("inline", className), children: [
+    /* @__PURE__ */ jsx70("span", { children: displayedText }),
+    showCursor && /* @__PURE__ */ jsx70(
       motion3.span,
       {
         initial: { opacity: 0 },
@@ -8526,7 +8554,7 @@ function Typewriter({
 
 // src/components/data-display/StatCard.tsx
 import { cva as cva12 } from "class-variance-authority";
-import { jsx as jsx70, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs42 } from "react/jsx-runtime";
 var statCardVariants = cva12(
   "rounded-2xl border bg-surface text-foreground shadow-xs p-6",
   {
@@ -8575,7 +8603,7 @@ var statCardChangeVariants = cva12(
     }
   }
 );
-var TrendUpIcon = () => /* @__PURE__ */ jsxs41(
+var TrendUpIcon = () => /* @__PURE__ */ jsxs42(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8589,12 +8617,12 @@ var TrendUpIcon = () => /* @__PURE__ */ jsxs41(
     strokeLinejoin: "round",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ jsx70("polyline", { points: "22 7 13.5 15.5 8.5 10.5 2 17" }),
-      /* @__PURE__ */ jsx70("polyline", { points: "16 7 22 7 22 13" })
+      /* @__PURE__ */ jsx71("polyline", { points: "22 7 13.5 15.5 8.5 10.5 2 17" }),
+      /* @__PURE__ */ jsx71("polyline", { points: "16 7 22 7 22 13" })
     ]
   }
 );
-var TrendDownIcon = () => /* @__PURE__ */ jsxs41(
+var TrendDownIcon = () => /* @__PURE__ */ jsxs42(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8608,12 +8636,12 @@ var TrendDownIcon = () => /* @__PURE__ */ jsxs41(
     strokeLinejoin: "round",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ jsx70("polyline", { points: "22 17 13.5 8.5 8.5 13.5 2 7" }),
-      /* @__PURE__ */ jsx70("polyline", { points: "16 17 22 17 22 11" })
+      /* @__PURE__ */ jsx71("polyline", { points: "22 17 13.5 8.5 8.5 13.5 2 7" }),
+      /* @__PURE__ */ jsx71("polyline", { points: "16 17 22 17 22 11" })
     ]
   }
 );
-var MinusIcon = () => /* @__PURE__ */ jsx70(
+var MinusIcon = () => /* @__PURE__ */ jsx71(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8626,7 +8654,7 @@ var MinusIcon = () => /* @__PURE__ */ jsx70(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx70("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+    children: /* @__PURE__ */ jsx71("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
   }
 );
 function StatCard({
@@ -8642,31 +8670,31 @@ function StatCard({
   ...props
 }) {
   const resolvedTrend = trend ?? (change !== void 0 ? change > 0 ? "up" : change < 0 ? "down" : "flat" : void 0);
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     "div",
     {
       "data-slot": "stat-card",
       role: "article",
       className: cn(statCardVariants({ variant, size }), className),
       ...props,
-      children: /* @__PURE__ */ jsxs41("dl", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx70("dt", { className: "text-sm font-medium text-foreground-secondary", children: label }),
-          icon && /* @__PURE__ */ jsx70("div", { className: "text-foreground-secondary", "aria-hidden": "true", children: icon })
+      children: /* @__PURE__ */ jsxs42("dl", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs42("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx71("dt", { className: "text-sm font-medium text-foreground-secondary", children: label }),
+          icon && /* @__PURE__ */ jsx71("div", { className: "text-foreground-secondary", "aria-hidden": "true", children: icon })
         ] }),
-        /* @__PURE__ */ jsx70("dd", { className: cn(statCardValueVariants({ size })), children: value }),
-        (change !== void 0 || description) && /* @__PURE__ */ jsxs41("dd", { className: "flex items-center gap-2 pt-1", children: [
-          change !== void 0 && resolvedTrend && /* @__PURE__ */ jsxs41("span", { className: cn(statCardChangeVariants({ trend: resolvedTrend })), children: [
-            resolvedTrend === "up" && /* @__PURE__ */ jsx70(TrendUpIcon, {}),
-            resolvedTrend === "down" && /* @__PURE__ */ jsx70(TrendDownIcon, {}),
-            resolvedTrend === "flat" && /* @__PURE__ */ jsx70(MinusIcon, {}),
-            /* @__PURE__ */ jsxs41("span", { children: [
+        /* @__PURE__ */ jsx71("dd", { className: cn(statCardValueVariants({ size })), children: value }),
+        (change !== void 0 || description) && /* @__PURE__ */ jsxs42("dd", { className: "flex items-center gap-2 pt-1", children: [
+          change !== void 0 && resolvedTrend && /* @__PURE__ */ jsxs42("span", { className: cn(statCardChangeVariants({ trend: resolvedTrend })), children: [
+            resolvedTrend === "up" && /* @__PURE__ */ jsx71(TrendUpIcon, {}),
+            resolvedTrend === "down" && /* @__PURE__ */ jsx71(TrendDownIcon, {}),
+            resolvedTrend === "flat" && /* @__PURE__ */ jsx71(MinusIcon, {}),
+            /* @__PURE__ */ jsxs42("span", { children: [
               change > 0 ? "+" : "",
               change,
               "%"
             ] })
           ] }),
-          description && /* @__PURE__ */ jsx70("span", { className: "text-sm text-foreground-secondary", children: description })
+          description && /* @__PURE__ */ jsx71("span", { className: "text-sm text-foreground-secondary", children: description })
         ] })
       ] })
     }
@@ -8676,7 +8704,7 @@ function StatCardGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     "div",
     {
       "data-slot": "stat-card-group",
@@ -8688,7 +8716,7 @@ function StatCardGroup({
 
 // src/components/data-display/Timeline.tsx
 import { cva as cva13 } from "class-variance-authority";
-import { jsx as jsx71, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs43 } from "react/jsx-runtime";
 var timelineVariants = cva13("relative", {
   variants: {
     orientation: {
@@ -8722,7 +8750,7 @@ var timelineItemStatusVariants = cva13(
     }
   }
 );
-var CheckIcon3 = () => /* @__PURE__ */ jsx71(
+var CheckIcon3 = () => /* @__PURE__ */ jsx72(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8735,10 +8763,10 @@ var CheckIcon3 = () => /* @__PURE__ */ jsx71(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx71("polyline", { points: "20 6 9 17 4 12" })
+    children: /* @__PURE__ */ jsx72("polyline", { points: "20 6 9 17 4 12" })
   }
 );
-var XIcon4 = () => /* @__PURE__ */ jsxs42(
+var XIcon4 = () => /* @__PURE__ */ jsxs43(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8752,12 +8780,12 @@ var XIcon4 = () => /* @__PURE__ */ jsxs42(
     strokeLinejoin: "round",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ jsx71("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-      /* @__PURE__ */ jsx71("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      /* @__PURE__ */ jsx72("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ jsx72("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
     ]
   }
 );
-var CircleIcon = () => /* @__PURE__ */ jsx71(
+var CircleIcon = () => /* @__PURE__ */ jsx72(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8766,7 +8794,7 @@ var CircleIcon = () => /* @__PURE__ */ jsx71(
     viewBox: "0 0 24 24",
     fill: "currentColor",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx71("circle", { cx: "12", cy: "12", r: "6" })
+    children: /* @__PURE__ */ jsx72("circle", { cx: "12", cy: "12", r: "6" })
   }
 );
 function Timeline({
@@ -8775,7 +8803,7 @@ function Timeline({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(
     "ol",
     {
       "data-slot": "timeline",
@@ -8799,16 +8827,16 @@ function TimelineItem({
   const defaultIcon = (() => {
     switch (status) {
       case "completed":
-        return /* @__PURE__ */ jsx71(CheckIcon3, {});
+        return /* @__PURE__ */ jsx72(CheckIcon3, {});
       case "error":
-        return /* @__PURE__ */ jsx71(XIcon4, {});
+        return /* @__PURE__ */ jsx72(XIcon4, {});
       case "active":
-        return /* @__PURE__ */ jsx71(CircleIcon, {});
+        return /* @__PURE__ */ jsx72(CircleIcon, {});
       default:
-        return /* @__PURE__ */ jsx71(CircleIcon, {});
+        return /* @__PURE__ */ jsx72(CircleIcon, {});
     }
   })();
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43(
     "li",
     {
       "data-slot": "timeline-item",
@@ -8816,8 +8844,8 @@ function TimelineItem({
       "aria-current": status === "active" ? "step" : void 0,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs42("div", { className: "flex flex-col items-center", children: [
-          /* @__PURE__ */ jsx71(
+        /* @__PURE__ */ jsxs43("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx72(
             "div",
             {
               "data-slot": "timeline-icon",
@@ -8826,7 +8854,7 @@ function TimelineItem({
               children: icon ?? defaultIcon
             }
           ),
-          !isLast && /* @__PURE__ */ jsx71(
+          !isLast && /* @__PURE__ */ jsx72(
             "div",
             {
               "data-slot": "timeline-connector",
@@ -8837,12 +8865,12 @@ function TimelineItem({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs42("div", { className: cn("pb-6", isLast && "pb-0"), children: [
-          /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx71("p", { className: "font-medium text-foreground leading-none", children: title }),
-            timestamp && /* @__PURE__ */ jsx71("time", { className: "text-xs text-foreground-secondary", children: timestamp })
+        /* @__PURE__ */ jsxs43("div", { className: cn("pb-6", isLast && "pb-0"), children: [
+          /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx72("p", { className: "font-medium text-foreground leading-none", children: title }),
+            timestamp && /* @__PURE__ */ jsx72("time", { className: "text-xs text-foreground-secondary", children: timestamp })
           ] }),
-          description && /* @__PURE__ */ jsx71("p", { className: "mt-1 text-sm text-foreground-secondary", children: description })
+          description && /* @__PURE__ */ jsx72("p", { className: "mt-1 text-sm text-foreground-secondary", children: description })
         ] })
       ]
     }
@@ -8852,7 +8880,7 @@ function TimelineItem({
 // src/components/data-display/TreeView.tsx
 import * as React18 from "react";
 import { cva as cva14 } from "class-variance-authority";
-import { jsx as jsx72, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs44 } from "react/jsx-runtime";
 var treeNodeVariants = cva14(
   "flex items-center gap-2 py-1 px-2 rounded-md text-sm cursor-pointer select-none transition-colors",
   {
@@ -8868,7 +8896,7 @@ var treeNodeVariants = cva14(
     }
   }
 );
-var ChevronIcon = ({ expanded }) => /* @__PURE__ */ jsx72(
+var ChevronIcon = ({ expanded }) => /* @__PURE__ */ jsx73(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8885,7 +8913,7 @@ var ChevronIcon = ({ expanded }) => /* @__PURE__ */ jsx72(
       "shrink-0 transition-transform",
       expanded ? "rotate-90" : "rotate-0"
     ),
-    children: /* @__PURE__ */ jsx72("polyline", { points: "9 18 15 12 9 6" })
+    children: /* @__PURE__ */ jsx73("polyline", { points: "9 18 15 12 9 6" })
   }
 );
 var TreeViewContext = React18.createContext({
@@ -8937,14 +8965,14 @@ function TreeView({
     },
     [controlledSelected, onSelectChange]
   );
-  return /* @__PURE__ */ jsx72(TreeViewContext.Provider, { value: { expanded, selected, toggleExpand, selectNode }, children: /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx73(TreeViewContext.Provider, { value: { expanded, selected, toggleExpand, selectNode }, children: /* @__PURE__ */ jsx73(
     "div",
     {
       "data-slot": "tree-view",
       role: "tree",
       className: cn("space-y-0.5", className),
       ...props,
-      children: nodes.map((node) => /* @__PURE__ */ jsx72(TreeViewNodeComponent, { node, level: 1 }, node.id))
+      children: nodes.map((node) => /* @__PURE__ */ jsx73(TreeViewNodeComponent, { node, level: 1 }, node.id))
     }
   ) });
 }
@@ -8983,8 +9011,8 @@ function TreeViewNodeComponent({ node, level }) {
         break;
     }
   };
-  return /* @__PURE__ */ jsxs43("div", { "data-slot": "tree-view-node", role: "treeitem", "aria-expanded": hasChildren ? isExpanded : void 0, "aria-level": level, "aria-selected": isSelected, children: [
-    /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44("div", { "data-slot": "tree-view-node", role: "treeitem", "aria-expanded": hasChildren ? isExpanded : void 0, "aria-level": level, "aria-selected": isSelected, children: [
+    /* @__PURE__ */ jsxs44(
       "div",
       {
         className: cn(treeNodeVariants({ state })),
@@ -8993,18 +9021,18 @@ function TreeViewNodeComponent({ node, level }) {
         onKeyDown: handleKeyDown,
         tabIndex: node.disabled ? -1 : 0,
         children: [
-          hasChildren ? /* @__PURE__ */ jsx72(ChevronIcon, { expanded: isExpanded }) : /* @__PURE__ */ jsx72("span", { className: "w-3.5 shrink-0", "aria-hidden": "true" }),
-          node.icon && /* @__PURE__ */ jsx72("span", { className: "shrink-0 text-foreground-secondary", "aria-hidden": "true", children: node.icon }),
-          /* @__PURE__ */ jsx72("span", { className: "truncate", children: node.label })
+          hasChildren ? /* @__PURE__ */ jsx73(ChevronIcon, { expanded: isExpanded }) : /* @__PURE__ */ jsx73("span", { className: "w-3.5 shrink-0", "aria-hidden": "true" }),
+          node.icon && /* @__PURE__ */ jsx73("span", { className: "shrink-0 text-foreground-secondary", "aria-hidden": "true", children: node.icon }),
+          /* @__PURE__ */ jsx73("span", { className: "truncate", children: node.label })
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ jsx72("div", { role: "group", children: node.children.map((child) => /* @__PURE__ */ jsx72(TreeViewNodeComponent, { node: child, level: level + 1 }, child.id)) })
+    hasChildren && isExpanded && /* @__PURE__ */ jsx73("div", { role: "group", children: node.children.map((child) => /* @__PURE__ */ jsx73(TreeViewNodeComponent, { node: child, level: level + 1 }, child.id)) })
   ] });
 }
 
 // src/components/blocks/social/OpenGraphCard.tsx
-import { jsx as jsx73, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs45 } from "react/jsx-runtime";
 function buildGradientCSS(config) {
   const { type, angle = 135, position = "circle at 50% 50%", colors, stops } = config;
   const colorStops = colors.map((color, index) => {
@@ -9072,7 +9100,7 @@ function OpenGraphCard({
   const activeStyle = backgroundStyles[variant] || backgroundStyles.sage;
   const firstColor = gradient?.colors[0] || primaryColor || "#0a0a0a";
   const isLight = variant === "secondary" || isLightColor(firstColor);
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       className: cn(className),
@@ -9093,7 +9121,7 @@ function OpenGraphCard({
       },
       ...props,
       children: [
-        !isLight && /* @__PURE__ */ jsx73(
+        !isLight && /* @__PURE__ */ jsx74(
           "div",
           {
             style: {
@@ -9109,7 +9137,7 @@ function OpenGraphCard({
             }
           }
         ),
-        /* @__PURE__ */ jsxs44(
+        /* @__PURE__ */ jsxs45(
           "div",
           {
             style: {
@@ -9123,7 +9151,7 @@ function OpenGraphCard({
               textAlign: "center"
             },
             children: [
-              icon !== null && (icon !== void 0 ? /* @__PURE__ */ jsx73(
+              icon !== null && (icon !== void 0 ? /* @__PURE__ */ jsx74(
                 "div",
                 {
                   style: {
@@ -9134,7 +9162,7 @@ function OpenGraphCard({
                   },
                   children: icon
                 }
-              ) : /* @__PURE__ */ jsx73(
+              ) : /* @__PURE__ */ jsx74(
                 "div",
                 {
                   style: {
@@ -9148,10 +9176,10 @@ function OpenGraphCard({
                     boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
                     marginBottom: "16px"
                   },
-                  children: /* @__PURE__ */ jsx73("div", { style: { width: "24px", height: "24px", borderRadius: "50%", background: isLight ? "white" : activeStyle.accentColor } })
+                  children: /* @__PURE__ */ jsx74("div", { style: { width: "24px", height: "24px", borderRadius: "50%", background: isLight ? "white" : activeStyle.accentColor } })
                 }
               )),
-              /* @__PURE__ */ jsx73(
+              /* @__PURE__ */ jsx74(
                 "h1",
                 {
                   style: {
@@ -9165,7 +9193,7 @@ function OpenGraphCard({
                   children: title
                 }
               ),
-              description && /* @__PURE__ */ jsx73(
+              description && /* @__PURE__ */ jsx74(
                 "p",
                 {
                   style: {
@@ -9191,13 +9219,13 @@ function OpenGraphCard({
 // src/components/layout/Accordion.tsx
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDown as ChevronDown3 } from "lucide-react";
-import { jsx as jsx74, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs46 } from "react/jsx-runtime";
 var Accordion = AccordionPrimitive.Root;
 var AccordionItem = ({
   ref,
   className,
   ...props
-}) => /* @__PURE__ */ jsx74(
+}) => /* @__PURE__ */ jsx75(
   AccordionPrimitive.Item,
   {
     ref,
@@ -9210,7 +9238,7 @@ var AccordionTrigger = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ jsx74(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs45(
+}) => /* @__PURE__ */ jsx75(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs46(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -9221,7 +9249,7 @@ var AccordionTrigger = ({
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx74(ChevronDown3, { className: "pointer-events-none h-4 w-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" })
+      /* @__PURE__ */ jsx75(ChevronDown3, { className: "pointer-events-none h-4 w-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" })
     ]
   }
 ) });
@@ -9230,13 +9258,13 @@ var AccordionContent = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ jsx74(
+}) => /* @__PURE__ */ jsx75(
   AccordionPrimitive.Content,
   {
     ref,
     className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
     ...props,
-    children: /* @__PURE__ */ jsx74("div", { className: cn("pb-4 pt-0", className), children })
+    children: /* @__PURE__ */ jsx75("div", { className: cn("pb-4 pt-0", className), children })
   }
 );
 
@@ -9248,7 +9276,7 @@ var AspectRatio = AspectRatioPrimitive.Root;
 import * as React19 from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
-import { jsx as jsx75, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs47 } from "react/jsx-runtime";
 var CarouselContext = React19.createContext(null);
 function useCarousel() {
   const context = React19.useContext(CarouselContext);
@@ -9318,7 +9346,7 @@ var Carousel = ({
       api?.off("select", onSelect);
     };
   }, [api, onSelect]);
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     CarouselContext.Provider,
     {
       value: {
@@ -9331,7 +9359,7 @@ var Carousel = ({
         canScrollPrev,
         canScrollNext
       },
-      children: /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsx76(
         "div",
         {
           ref,
@@ -9352,7 +9380,7 @@ var CarouselContent = ({
   ...props
 }) => {
   const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ jsx75("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx76(
     "div",
     {
       ref,
@@ -9371,7 +9399,7 @@ var CarouselItem = ({
   ...props
 }) => {
   const { orientation } = useCarousel();
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       ref,
@@ -9394,7 +9422,7 @@ var CarouselPrevious = ({
   ...props
 }) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs47(
     Button,
     {
       ref,
@@ -9409,8 +9437,8 @@ var CarouselPrevious = ({
       onClick: scrollPrev,
       ...props,
       children: [
-        /* @__PURE__ */ jsx75(ArrowLeft, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsx75("span", { className: "sr-only", children: "Previous slide" })
+        /* @__PURE__ */ jsx76(ArrowLeft, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx76("span", { className: "sr-only", children: "Previous slide" })
       ]
     }
   );
@@ -9423,7 +9451,7 @@ var CarouselNext = ({
   ...props
 }) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs47(
     Button,
     {
       ref,
@@ -9438,8 +9466,8 @@ var CarouselNext = ({
       onClick: scrollNext,
       ...props,
       children: [
-        /* @__PURE__ */ jsx75(ArrowRight, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsx75("span", { className: "sr-only", children: "Next slide" })
+        /* @__PURE__ */ jsx76(ArrowRight, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx76("span", { className: "sr-only", children: "Next slide" })
       ]
     }
   );
@@ -9447,7 +9475,7 @@ var CarouselNext = ({
 
 // src/components/layout/Collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = ({
@@ -9455,7 +9483,7 @@ var CollapsibleContent2 = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ jsx76(
+}) => /* @__PURE__ */ jsx77(
   CollapsiblePrimitive.CollapsibleContent,
   {
     ref,
@@ -9500,12 +9528,12 @@ var Container = ({
 // src/components/layout/CustomizerPanel.tsx
 import React21 from "react";
 import { SlidersHorizontal, Sun, Moon, SunMoon, Building2, Leaf, Zap, Rocket, X as X3, Palette } from "lucide-react";
-import { jsx as jsx77, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs48 } from "react/jsx-runtime";
 var allThemeOptions = [
-  { id: "studio", label: "Studio", icon: /* @__PURE__ */ jsx77(Building2, { className: "w-4 h-4" }) },
-  { id: "terra", label: "Terra", icon: /* @__PURE__ */ jsx77(Leaf, { className: "w-4 h-4" }) },
-  { id: "volt", label: "Volt", icon: /* @__PURE__ */ jsx77(Zap, { className: "w-4 h-4" }) },
-  { id: "speedboat", label: "Speedboat", icon: /* @__PURE__ */ jsx77(Rocket, { className: "w-4 h-4" }) }
+  { id: "studio", label: "Studio", icon: /* @__PURE__ */ jsx78(Building2, { className: "w-4 h-4" }) },
+  { id: "terra", label: "Terra", icon: /* @__PURE__ */ jsx78(Leaf, { className: "w-4 h-4" }) },
+  { id: "volt", label: "Volt", icon: /* @__PURE__ */ jsx78(Zap, { className: "w-4 h-4" }) },
+  { id: "speedboat", label: "Speedboat", icon: /* @__PURE__ */ jsx78(Rocket, { className: "w-4 h-4" }) }
 ];
 var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) => {
   const [mounted, setMounted] = React21.useState(false);
@@ -9584,7 +9612,7 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
   }, [isOpen]);
   if (!mounted) return null;
   if (!isOpen) {
-    return /* @__PURE__ */ jsxs47(
+    return /* @__PURE__ */ jsxs48(
       "button",
       {
         onClick: () => setIsOpen(true),
@@ -9592,13 +9620,13 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
         className: "fixed bottom-4 right-4 bg-background text-foreground px-4 py-2 rounded-full shadow-lg border border-[var(--color-glass-border)] font-medium hover:opacity-80 transition-all z-50 flex items-center gap-2",
         style: { backdropFilter: "var(--effect-blur-sm)" },
         children: [
-          mode === "lightweight" ? /* @__PURE__ */ jsx77(SunMoon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx77(SlidersHorizontal, { className: "w-5 h-5" }),
+          mode === "lightweight" ? /* @__PURE__ */ jsx78(SunMoon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx78(SlidersHorizontal, { className: "w-5 h-5" }),
           mode === "lightweight" ? "Theme" : "Customizer"
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs48(
     "div",
     {
       ref: panelRef,
@@ -9617,25 +9645,25 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
         backgroundColor: "var(--color-glass)"
       },
       children: [
-        /* @__PURE__ */ jsxs47("div", { className: "flex justify-between items-center mb-6", children: [
-          /* @__PURE__ */ jsx77("h3", { className: "font-bold text-lg", children: mode === "lightweight" ? "Theme Settings" : "Experience Customizer" }),
-          /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsxs48("div", { className: "flex justify-between items-center mb-6", children: [
+          /* @__PURE__ */ jsx78("h3", { className: "font-bold text-lg", children: mode === "lightweight" ? "Theme Settings" : "Experience Customizer" }),
+          /* @__PURE__ */ jsx78(
             "button",
             {
               onClick: () => setIsOpen(false),
               "aria-label": "Close customizer",
               className: "text-foreground opacity-60 hover:opacity-100 transition-opacity p-1",
-              children: /* @__PURE__ */ jsx77(X3, { className: "w-5 h-5", "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx78(X3, { className: "w-5 h-5", "aria-hidden": "true" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs47("div", { className: "space-y-6", children: [
-          mode === "full" && showMotionIntensity && /* @__PURE__ */ jsxs47("div", { children: [
-            /* @__PURE__ */ jsxs47("div", { className: "flex justify-between mb-2", children: [
-              /* @__PURE__ */ jsx77("label", { className: "text-sm font-medium opacity-80", children: "Motion Intensity" }),
-              /* @__PURE__ */ jsx77("span", { className: "text-sm opacity-60", children: motion6 })
+        /* @__PURE__ */ jsxs48("div", { className: "space-y-6", children: [
+          mode === "full" && showMotionIntensity && /* @__PURE__ */ jsxs48("div", { children: [
+            /* @__PURE__ */ jsxs48("div", { className: "flex justify-between mb-2", children: [
+              /* @__PURE__ */ jsx78("label", { className: "text-sm font-medium opacity-80", children: "Motion Intensity" }),
+              /* @__PURE__ */ jsx78("span", { className: "text-sm opacity-60", children: motion6 })
             ] }),
-            /* @__PURE__ */ jsx77(
+            /* @__PURE__ */ jsx78(
               "input",
               {
                 type: "range",
@@ -9651,9 +9679,9 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
               }
             )
           ] }),
-          mode === "full" && showThemeSelector && /* @__PURE__ */ jsxs47("div", { children: [
-            /* @__PURE__ */ jsx77("label", { className: "block text-sm font-medium opacity-80 mb-3", children: "Theme" }),
-            /* @__PURE__ */ jsx77("div", { className: `grid gap-2 mb-3 ${visibleThemes.length <= 3 ? "grid-cols-3" : "grid-cols-4"}`, children: visibleThemes.map((t) => /* @__PURE__ */ jsxs47(
+          mode === "full" && showThemeSelector && /* @__PURE__ */ jsxs48("div", { children: [
+            /* @__PURE__ */ jsx78("label", { className: "block text-sm font-medium opacity-80 mb-3", children: "Theme" }),
+            /* @__PURE__ */ jsx78("div", { className: `grid gap-2 mb-3 ${visibleThemes.length <= 3 ? "grid-cols-3" : "grid-cols-4"}`, children: visibleThemes.map((t) => /* @__PURE__ */ jsxs48(
               "button",
               {
                 onClick: () => setTheme(t.id),
@@ -9668,31 +9696,31 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                   borderColor: "var(--color-primary)"
                 } : {},
                 children: [
-                  /* @__PURE__ */ jsx77("span", { className: "text-base", children: t.icon }),
-                  /* @__PURE__ */ jsx77("span", { children: t.label })
+                  /* @__PURE__ */ jsx78("span", { className: "text-base", children: t.icon }),
+                  /* @__PURE__ */ jsx78("span", { children: t.label })
                 ]
               },
               t.id
             )) }),
-            /* @__PURE__ */ jsxs47("div", { className: "text-xs opacity-60 space-y-1", children: [
-              /* @__PURE__ */ jsxs47("div", { children: [
-                /* @__PURE__ */ jsx77("span", { className: "font-heading", children: "Heading:" }),
+            /* @__PURE__ */ jsxs48("div", { className: "text-xs opacity-60 space-y-1", children: [
+              /* @__PURE__ */ jsxs48("div", { children: [
+                /* @__PURE__ */ jsx78("span", { className: "font-heading", children: "Heading:" }),
                 " ",
                 theme === "studio" ? "Outfit" : theme === "terra" ? "Lora" : theme === "speedboat" ? "Montserrat" : "Space Grotesk"
               ] }),
-              /* @__PURE__ */ jsxs47("div", { children: [
-                /* @__PURE__ */ jsx77("span", { className: "font-body", children: "Body:" }),
+              /* @__PURE__ */ jsxs48("div", { children: [
+                /* @__PURE__ */ jsx78("span", { className: "font-body", children: "Body:" }),
                 " ",
                 theme === "studio" ? "Manrope" : theme === "terra" ? "Instrument Sans" : theme === "speedboat" ? "Roboto" : "Space Grotesk"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs47("div", { children: [
-            /* @__PURE__ */ jsx77("label", { className: "block text-sm font-medium opacity-80 mb-3", children: "Mode" }),
-            /* @__PURE__ */ jsx77("div", { className: "grid grid-cols-2 gap-2", children: [
-              { id: "light", label: "Light", icon: /* @__PURE__ */ jsx77(Sun, { className: "w-4 h-4" }) },
-              { id: "dark", label: "Dark", icon: /* @__PURE__ */ jsx77(Moon, { className: "w-4 h-4" }) }
-            ].map((m) => /* @__PURE__ */ jsxs47(
+          /* @__PURE__ */ jsxs48("div", { children: [
+            /* @__PURE__ */ jsx78("label", { className: "block text-sm font-medium opacity-80 mb-3", children: "Mode" }),
+            /* @__PURE__ */ jsx78("div", { className: "grid grid-cols-2 gap-2", children: [
+              { id: "light", label: "Light", icon: /* @__PURE__ */ jsx78(Sun, { className: "w-4 h-4" }) },
+              { id: "dark", label: "Dark", icon: /* @__PURE__ */ jsx78(Moon, { className: "w-4 h-4" }) }
+            ].map((m) => /* @__PURE__ */ jsxs48(
               "button",
               {
                 onClick: () => setMode(m.id),
@@ -9707,21 +9735,21 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                   borderColor: "var(--color-primary)"
                 } : {},
                 children: [
-                  /* @__PURE__ */ jsx77("span", { children: m.icon }),
-                  /* @__PURE__ */ jsx77("span", { children: m.label })
+                  /* @__PURE__ */ jsx78("span", { children: m.icon }),
+                  /* @__PURE__ */ jsx78("span", { children: m.label })
                 ]
               },
               m.id
             )) })
           ] }),
-          mode === "full" && /* @__PURE__ */ jsxs47("div", { className: "pt-4 border-t border-[var(--color-border)]", children: [
-            /* @__PURE__ */ jsxs47("div", { className: "flex items-center justify-between mb-4", children: [
-              /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx77(Palette, { className: "w-4 h-4 opacity-80" }),
-                /* @__PURE__ */ jsx77("label", { className: "text-sm font-medium opacity-80", children: "Color Customization" })
+          mode === "full" && /* @__PURE__ */ jsxs48("div", { className: "pt-4 border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-between mb-4", children: [
+              /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx78(Palette, { className: "w-4 h-4 opacity-80" }),
+                /* @__PURE__ */ jsx78("label", { className: "text-sm font-medium opacity-80", children: "Color Customization" })
               ] }),
-              /* @__PURE__ */ jsxs47("div", { className: "flex gap-1 bg-[var(--color-surface)] rounded-md p-0.5", children: [
-                /* @__PURE__ */ jsx77(
+              /* @__PURE__ */ jsxs48("div", { className: "flex gap-1 bg-[var(--color-surface)] rounded-md p-0.5", children: [
+                /* @__PURE__ */ jsx78(
                   "button",
                   {
                     onClick: () => setCustomizationMode("simple"),
@@ -9733,7 +9761,7 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                     children: "Simple"
                   }
                 ),
-                /* @__PURE__ */ jsx77(
+                /* @__PURE__ */ jsx78(
                   "button",
                   {
                     onClick: () => setCustomizationMode("advanced"),
@@ -9747,10 +9775,10 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs47("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs47("div", { children: [
-                /* @__PURE__ */ jsx77("label", { className: "text-xs font-medium opacity-70 mb-2 block", children: "Primary Color" }),
-                /* @__PURE__ */ jsx77(
+            /* @__PURE__ */ jsxs48("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs48("div", { children: [
+                /* @__PURE__ */ jsx78("label", { className: "text-xs font-medium opacity-70 mb-2 block", children: "Primary Color" }),
+                /* @__PURE__ */ jsx78(
                   ColorPicker,
                   {
                     value: tempPrimaryColor,
@@ -9758,9 +9786,9 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                   }
                 )
               ] }),
-              customizationMode === "advanced" && /* @__PURE__ */ jsxs47("div", { children: [
-                /* @__PURE__ */ jsx77("label", { className: "text-xs font-medium opacity-70 mb-2 block", children: "Secondary Color" }),
-                /* @__PURE__ */ jsx77(
+              customizationMode === "advanced" && /* @__PURE__ */ jsxs48("div", { children: [
+                /* @__PURE__ */ jsx78("label", { className: "text-xs font-medium opacity-70 mb-2 block", children: "Secondary Color" }),
+                /* @__PURE__ */ jsx78(
                   ColorPicker,
                   {
                     value: tempSecondaryColor,
@@ -9768,9 +9796,9 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                   }
                 )
               ] }),
-              customizationMode === "advanced" && /* @__PURE__ */ jsxs47("div", { children: [
-                /* @__PURE__ */ jsx77("label", { className: "text-xs font-medium opacity-70 mb-2 block", children: "Accent Color" }),
-                /* @__PURE__ */ jsx77(
+              customizationMode === "advanced" && /* @__PURE__ */ jsxs48("div", { children: [
+                /* @__PURE__ */ jsx78("label", { className: "text-xs font-medium opacity-70 mb-2 block", children: "Accent Color" }),
+                /* @__PURE__ */ jsx78(
                   ColorPicker,
                   {
                     value: tempAccentColor,
@@ -9779,8 +9807,8 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs47("div", { className: "flex gap-2 mt-4", children: [
-              /* @__PURE__ */ jsx77(
+            /* @__PURE__ */ jsxs48("div", { className: "flex gap-2 mt-4", children: [
+              /* @__PURE__ */ jsx78(
                 Button,
                 {
                   onClick: handleApplyColor,
@@ -9790,7 +9818,7 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                   children: "Apply Colors"
                 }
               ),
-              currentPalette && /* @__PURE__ */ jsx77(
+              currentPalette && /* @__PURE__ */ jsx78(
                 Button,
                 {
                   onClick: handleResetColors,
@@ -9800,7 +9828,7 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                 }
               )
             ] }),
-            currentPalette && /* @__PURE__ */ jsxs47("p", { className: "text-xs opacity-60 mt-2", children: [
+            currentPalette && /* @__PURE__ */ jsxs48("p", { className: "text-xs opacity-60 mt-2", children: [
               "Custom colors active for ",
               theme,
               " ",
@@ -9817,7 +9845,7 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
 // src/components/layout/DatePicker.tsx
 import { format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
-import { jsx as jsx78, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs49 } from "react/jsx-runtime";
 function DatePicker({
   date,
   onDateChange,
@@ -9825,8 +9853,8 @@ function DatePicker({
   className,
   disabled = false
 }) {
-  return /* @__PURE__ */ jsxs48(Popover, { children: [
-    /* @__PURE__ */ jsx78(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs48(
+  return /* @__PURE__ */ jsxs49(Popover, { children: [
+    /* @__PURE__ */ jsx79(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs49(
       Button,
       {
         variant: "outline",
@@ -9837,12 +9865,12 @@ function DatePicker({
         ),
         disabled,
         children: [
-          /* @__PURE__ */ jsx78(CalendarIcon, { className: "mr-2 h-4 w-4" }),
-          date ? format(date, "PPP") : /* @__PURE__ */ jsx78("span", { children: placeholder })
+          /* @__PURE__ */ jsx79(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+          date ? format(date, "PPP") : /* @__PURE__ */ jsx79("span", { children: placeholder })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx78(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx78(
+    /* @__PURE__ */ jsx79(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx79(
       Calendar,
       {
         mode: "single",
@@ -9855,7 +9883,7 @@ function DatePicker({
 }
 
 // src/components/layout/Footer/Footer.tsx
-import { jsx as jsx79, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs50 } from "react/jsx-runtime";
 var Footer = ({
   ref,
   logo,
@@ -9865,7 +9893,7 @@ var Footer = ({
   className = ""
 }) => {
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     "footer",
     {
       ref,
@@ -9875,11 +9903,11 @@ var Footer = ({
                 ${className}
             `,
       children: [
-        /* @__PURE__ */ jsx79("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24", children: /* @__PURE__ */ jsxs49("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 lg:gap-8", children: [
-          /* @__PURE__ */ jsx79("div", { className: "lg:col-span-4", children: logo && /* @__PURE__ */ jsx79("div", { className: "mb-6 text-2xl font-bold text-[var(--color-text-primary)]", children: logo }) }),
-          sections.map((section, index) => /* @__PURE__ */ jsxs49("div", { className: "lg:col-span-2", children: [
-            /* @__PURE__ */ jsx79("h3", { className: "text-sm font-semibold text-[var(--color-text-primary)] uppercase tracking-wider mb-4", children: section.title }),
-            /* @__PURE__ */ jsx79("ul", { className: "space-y-3", children: section.links.map((link) => /* @__PURE__ */ jsx79("li", { children: /* @__PURE__ */ jsx79(
+        /* @__PURE__ */ jsx80("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24", children: /* @__PURE__ */ jsxs50("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 lg:gap-8", children: [
+          /* @__PURE__ */ jsx80("div", { className: "lg:col-span-4", children: logo && /* @__PURE__ */ jsx80("div", { className: "mb-6 text-2xl font-bold text-[var(--color-text-primary)]", children: logo }) }),
+          sections.map((section, index) => /* @__PURE__ */ jsxs50("div", { className: "lg:col-span-2", children: [
+            /* @__PURE__ */ jsx80("h3", { className: "text-sm font-semibold text-[var(--color-text-primary)] uppercase tracking-wider mb-4", children: section.title }),
+            /* @__PURE__ */ jsx80("ul", { className: "space-y-3", children: section.links.map((link) => /* @__PURE__ */ jsx80("li", { children: /* @__PURE__ */ jsx80(
               "a",
               {
                 href: link.href,
@@ -9890,10 +9918,10 @@ var Footer = ({
               }
             ) }, link.label)) })
           ] }, section.title)),
-          socialLinks && /* @__PURE__ */ jsxs49("div", { className: "lg:col-span-2", children: [
-            /* @__PURE__ */ jsx79("h3", { className: "text-sm font-semibold text-[var(--color-text-primary)] uppercase tracking-wider mb-4", children: "Connect" }),
-            /* @__PURE__ */ jsxs49("ul", { className: "space-y-3", children: [
-              socialLinks.github && /* @__PURE__ */ jsx79("li", { children: /* @__PURE__ */ jsxs49(
+          socialLinks && /* @__PURE__ */ jsxs50("div", { className: "lg:col-span-2", children: [
+            /* @__PURE__ */ jsx80("h3", { className: "text-sm font-semibold text-[var(--color-text-primary)] uppercase tracking-wider mb-4", children: "Connect" }),
+            /* @__PURE__ */ jsxs50("ul", { className: "space-y-3", children: [
+              socialLinks.github && /* @__PURE__ */ jsx80("li", { children: /* @__PURE__ */ jsxs50(
                 "a",
                 {
                   href: socialLinks.github,
@@ -9901,12 +9929,12 @@ var Footer = ({
                   rel: "noopener noreferrer",
                   className: "text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] transition-colors duration-200 text-sm flex items-center gap-2",
                   children: [
-                    /* @__PURE__ */ jsx79(GitHubIcon, { size: 16 }),
+                    /* @__PURE__ */ jsx80(GitHubIcon, { size: 16 }),
                     "GitHub"
                   ]
                 }
               ) }),
-              socialLinks.linkedin && /* @__PURE__ */ jsx79("li", { children: /* @__PURE__ */ jsx79(
+              socialLinks.linkedin && /* @__PURE__ */ jsx80("li", { children: /* @__PURE__ */ jsx80(
                 "a",
                 {
                   href: socialLinks.linkedin,
@@ -9916,7 +9944,7 @@ var Footer = ({
                   children: "LinkedIn"
                 }
               ) }),
-              socialLinks.email && /* @__PURE__ */ jsx79("li", { children: /* @__PURE__ */ jsx79(
+              socialLinks.email && /* @__PURE__ */ jsx80("li", { children: /* @__PURE__ */ jsx80(
                 "a",
                 {
                   href: `mailto:${socialLinks.email}`,
@@ -9927,14 +9955,14 @@ var Footer = ({
             ] })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx79("div", { className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ jsx79("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6", children: /* @__PURE__ */ jsx79("p", { className: "text-sm text-[var(--color-text-secondary)] text-center", children: copyright || `\xA9 ${currentYear} All rights reserved.` }) }) })
+        /* @__PURE__ */ jsx80("div", { className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ jsx80("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6", children: /* @__PURE__ */ jsx80("p", { className: "text-sm text-[var(--color-text-secondary)] text-center", children: copyright || `\xA9 ${currentYear} All rights reserved.` }) }) })
       ]
     }
   );
 };
 
 // src/components/layout/Grid.tsx
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var mapResponsive = (prop, prefix, mapFunc) => {
   if (typeof prop === "number") {
     return mapFunc(prop);
@@ -9976,7 +10004,7 @@ var Grid = ({
   const getGapClass = (n) => `gap-${n}`;
   const colClasses = mapResponsive(columns, "grid-cols", getColClass);
   const gapClasses = mapResponsive(gap, "gap", getGapClass);
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx81(
     Component,
     {
       ref,
@@ -10031,13 +10059,13 @@ var GridItem = ({
     colStart ? mapResponsive(colStart, "col-start", getColStartClass) : "",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx80(Component, { ref, className: classes, ...props, children });
+  return /* @__PURE__ */ jsx81(Component, { ref, className: classes, ...props, children });
 };
 
 // src/components/layout/Header/Header.tsx
 import { useState as useState16, useEffect as useEffect10 } from "react";
 import { Menu as Menu2, X as X4, ChevronDown as ChevronDown4 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx81, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx82, jsxs as jsxs51 } from "react/jsx-runtime";
 var Header2 = ({
   ref,
   logo,
@@ -10092,16 +10120,16 @@ var Header2 = ({
         return "absolute left-1/2 -translate-x-1/2";
     }
   };
-  return /* @__PURE__ */ jsxs50(Fragment3, { children: [
-    /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsxs51(Fragment3, { children: [
+    /* @__PURE__ */ jsx82(
       "header",
       {
         ref,
         className: `${baseStyles} ${positionStyles} ${transitionStyles} ${backgroundStyles} ${className}`,
         style: { transitionDuration },
-        children: /* @__PURE__ */ jsx81("div", { className: `${maxWidth} mx-auto px-4 sm:px-6 lg:px-8`, children: /* @__PURE__ */ jsxs50("div", { className: "flex items-center justify-between h-16 lg:h-20 relative", children: [
-          logo && /* @__PURE__ */ jsx81("div", { className: "flex-shrink-0 z-10", children: logo }),
-          navLinks.length > 0 && /* @__PURE__ */ jsx81(
+        children: /* @__PURE__ */ jsx82("div", { className: `${maxWidth} mx-auto px-4 sm:px-6 lg:px-8`, children: /* @__PURE__ */ jsxs51("div", { className: "flex items-center justify-between h-16 lg:h-20 relative", children: [
+          logo && /* @__PURE__ */ jsx82("div", { className: "flex-shrink-0 z-10", children: logo }),
+          navLinks.length > 0 && /* @__PURE__ */ jsx82(
             "nav",
             {
               className: `hidden lg:flex items-center gap-8 ${getNavClasses()}`,
@@ -10110,14 +10138,14 @@ var Header2 = ({
                 const hasDropdown = link.children && link.children.length > 0;
                 const isOpen = openDropdown === link.label;
                 if (hasDropdown) {
-                  return /* @__PURE__ */ jsxs50(
+                  return /* @__PURE__ */ jsxs51(
                     "div",
                     {
                       className: "relative group",
                       onMouseEnter: () => setOpenDropdown(link.label),
                       onMouseLeave: () => setOpenDropdown(null),
                       children: [
-                        /* @__PURE__ */ jsxs50(
+                        /* @__PURE__ */ jsxs51(
                           "button",
                           {
                             className: `
@@ -10138,18 +10166,18 @@ var Header2 = ({
                             "aria-haspopup": "true",
                             children: [
                               link.label,
-                              /* @__PURE__ */ jsx81(ChevronDown4, { className: `w-3 h-3 ${shouldAnimate ? "transition-transform" : ""} ${isOpen ? "rotate-180" : ""}`, style: { transitionDuration } })
+                              /* @__PURE__ */ jsx82(ChevronDown4, { className: `w-3 h-3 ${shouldAnimate ? "transition-transform" : ""} ${isOpen ? "rotate-180" : ""}`, style: { transitionDuration } })
                             ]
                           }
                         ),
-                        isOpen && /* @__PURE__ */ jsx81("div", { className: "absolute top-full left-1/2 -translate-x-1/2 w-[200px] h-2" }),
-                        isOpen && /* @__PURE__ */ jsx81("div", { className: `
+                        isOpen && /* @__PURE__ */ jsx82("div", { className: "absolute top-full left-1/2 -translate-x-1/2 w-[200px] h-2" }),
+                        isOpen && /* @__PURE__ */ jsx82("div", { className: `
                                                         absolute top-full left-1/2 -translate-x-1/2 mt-2 min-w-[200px] z-50
                                                         bg-[var(--color-surface)] border border-[var(--color-border)]
                                                         rounded-lg shadow-xl py-1 p-1
                                                         backdrop-blur-3xl bg-[var(--color-surface)]/95
                                                         ${shouldAnimate ? "animate-fade-in" : ""}
-                                                    `, style: { animationDuration: `${0.2 * motionFactor}s` }, children: link.children?.map((child) => /* @__PURE__ */ jsx81(
+                                                    `, style: { animationDuration: `${0.2 * motionFactor}s` }, children: link.children?.map((child) => /* @__PURE__ */ jsx82(
                           NavLink,
                           {
                             href: child.href,
@@ -10165,7 +10193,7 @@ var Header2 = ({
                     link.label
                   );
                 }
-                return /* @__PURE__ */ jsx81(
+                return /* @__PURE__ */ jsx82(
                   NavLink,
                   {
                     href: link.href,
@@ -10180,8 +10208,8 @@ var Header2 = ({
               })
             }
           ),
-          actions && /* @__PURE__ */ jsx81("div", { className: "hidden lg:flex items-center gap-4 z-10", children: actions }),
-          /* @__PURE__ */ jsx81(
+          actions && /* @__PURE__ */ jsx82("div", { className: "hidden lg:flex items-center gap-4 z-10", children: actions }),
+          /* @__PURE__ */ jsx82(
             "button",
             {
               onClick: () => setIsMenuOpen(!isMenuOpen),
@@ -10200,13 +10228,13 @@ var Header2 = ({
               style: { transitionDuration },
               "aria-label": isMenuOpen ? "Close menu" : "Open menu",
               "aria-expanded": isMenuOpen,
-              children: isMenuOpen ? /* @__PURE__ */ jsx81(X4, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx81(Menu2, { className: "w-6 h-6" })
+              children: isMenuOpen ? /* @__PURE__ */ jsx82(X4, { className: "w-6 h-6" }) : /* @__PURE__ */ jsx82(Menu2, { className: "w-6 h-6" })
             }
           )
         ] }) })
       }
     ),
-    /* @__PURE__ */ jsx81(
+    /* @__PURE__ */ jsx82(
       "div",
       {
         className: `
@@ -10216,13 +10244,13 @@ var Header2 = ({
                 `,
         style: { transitionDuration },
         "aria-hidden": !isMenuOpen,
-        children: /* @__PURE__ */ jsx81("div", { className: "absolute inset-0 bg-[var(--color-background)]", children: /* @__PURE__ */ jsxs50("div", { className: "flex flex-col items-center justify-center h-full gap-8 px-4", children: [
+        children: /* @__PURE__ */ jsx82("div", { className: "absolute inset-0 bg-[var(--color-background)]", children: /* @__PURE__ */ jsxs51("div", { className: "flex flex-col items-center justify-center h-full gap-8 px-4", children: [
           navLinks.map((link, index) => {
             const hasDropdown = link.children && link.children.length > 0;
             const isExpanded = expandedMobileSection === link.label;
             if (hasDropdown) {
-              return /* @__PURE__ */ jsxs50("div", { className: "w-full max-w-xs", children: [
-                /* @__PURE__ */ jsx81(
+              return /* @__PURE__ */ jsxs51("div", { className: "w-full max-w-xs", children: [
+                /* @__PURE__ */ jsx82(
                   "button",
                   {
                     onClick: () => setExpandedMobileSection(isExpanded ? null : link.label),
@@ -10246,7 +10274,7 @@ var Header2 = ({
                     children: link.label
                   }
                 ),
-                isExpanded && /* @__PURE__ */ jsx81("div", { className: "flex flex-col gap-3 mt-4", children: link.children?.map((child) => /* @__PURE__ */ jsx81(
+                isExpanded && /* @__PURE__ */ jsx82("div", { className: "flex flex-col gap-3 mt-4", children: link.children?.map((child) => /* @__PURE__ */ jsx82(
                   "a",
                   {
                     href: child.href,
@@ -10269,7 +10297,7 @@ var Header2 = ({
                 )) })
               ] }, link.label);
             }
-            return /* @__PURE__ */ jsx81(
+            return /* @__PURE__ */ jsx82(
               "a",
               {
                 href: link.href,
@@ -10296,7 +10324,7 @@ var Header2 = ({
               link.label
             );
           }),
-          actions && /* @__PURE__ */ jsx81(
+          actions && /* @__PURE__ */ jsx82(
             "div",
             {
               className: "flex flex-col gap-4 mt-8 w-full max-w-xs",
@@ -10310,7 +10338,7 @@ var Header2 = ({
         ] }) })
       }
     ),
-    shouldAnimate && /* @__PURE__ */ jsx81("style", { children: `
+    shouldAnimate && /* @__PURE__ */ jsx82("style", { children: `
                     @keyframes fadeInUp {
                         from {
                             opacity: 0;
@@ -10326,7 +10354,7 @@ var Header2 = ({
 };
 
 // src/components/layout/PageLayout.tsx
-import { jsx as jsx82, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs52 } from "react/jsx-runtime";
 function PageLayout({
   header,
   stickyHeader = false,
@@ -10349,9 +10377,9 @@ function PageLayout({
   const titleAreaBottomSpacing = swissGridSpacing && showBreadcrumbsBelowTitle ? "pb-3" : swissGridSpacing ? "pb-12 lg:pb-16" : "pb-8";
   const titleBottomMargin = swissGridSpacing ? "mb-4" : "mb-3";
   const breadcrumbsAreaSpacing = swissGridSpacing ? "pt-4 pb-8" : "pt-3 pb-6";
-  return /* @__PURE__ */ jsxs51("div", { className: "min-h-screen flex flex-col w-full min-w-0", children: [
+  return /* @__PURE__ */ jsxs52("div", { className: "min-h-screen flex flex-col w-full min-w-0", children: [
     header,
-    breadcrumbs && showBreadcrumbsAtTop && /* @__PURE__ */ jsx82(
+    breadcrumbs && showBreadcrumbsAtTop && /* @__PURE__ */ jsx83(
       "div",
       {
         className: `
@@ -10362,23 +10390,23 @@ function PageLayout({
             ${stickyHeaderSpacing}
           `,
         style: { zIndex: 45 },
-        children: /* @__PURE__ */ jsx82("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8 py-3`, children: breadcrumbs })
+        children: /* @__PURE__ */ jsx83("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8 py-3`, children: breadcrumbs })
       }
     ),
-    (title || subtitle) && /* @__PURE__ */ jsx82("div", { className: `${titleAreaTopSpacing} ${titleAreaBottomSpacing} ${!showBreadcrumbsAtTop ? stickyHeaderSpacing : ""} bg-[var(--color-background)]`, children: /* @__PURE__ */ jsxs51("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8`, children: [
-      title && /* @__PURE__ */ jsx82("div", { className: titleBottomMargin, children: title }),
-      subtitle && /* @__PURE__ */ jsx82("div", { children: subtitle })
+    (title || subtitle) && /* @__PURE__ */ jsx83("div", { className: `${titleAreaTopSpacing} ${titleAreaBottomSpacing} ${!showBreadcrumbsAtTop ? stickyHeaderSpacing : ""} bg-[var(--color-background)]`, children: /* @__PURE__ */ jsxs52("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8`, children: [
+      title && /* @__PURE__ */ jsx83("div", { className: titleBottomMargin, children: title }),
+      subtitle && /* @__PURE__ */ jsx83("div", { children: subtitle })
     ] }) }),
-    breadcrumbs && showBreadcrumbsBelowTitle && /* @__PURE__ */ jsx82("div", { className: `${breadcrumbsAreaSpacing} bg-[var(--color-background)]`, children: /* @__PURE__ */ jsx82("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8`, children: breadcrumbs }) }),
+    breadcrumbs && showBreadcrumbsBelowTitle && /* @__PURE__ */ jsx83("div", { className: `${breadcrumbsAreaSpacing} bg-[var(--color-background)]`, children: /* @__PURE__ */ jsx83("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8`, children: breadcrumbs }) }),
     secondaryNav,
     tertiaryNav,
-    /* @__PURE__ */ jsx82("main", { className: `flex-1 ${className}`, children: /* @__PURE__ */ jsx82("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8 py-12`, children }) }),
+    /* @__PURE__ */ jsx83("main", { className: `flex-1 ${className}`, children: /* @__PURE__ */ jsx83("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8 py-12`, children }) }),
     footer
   ] });
 }
 
 // src/components/layout/PageTemplate.tsx
-import { Fragment as Fragment4, jsx as jsx83, jsxs as jsxs52 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx84, jsxs as jsxs53 } from "react/jsx-runtime";
 function PageTemplate({
   header,
   title,
@@ -10398,11 +10426,11 @@ function PageTemplate({
     narrow: "max-w-4xl"
     // 896px - for reading-focused pages
   }[variant];
-  return /* @__PURE__ */ jsxs52(Fragment4, { children: [
-    /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsxs53(Fragment4, { children: [
+    /* @__PURE__ */ jsx84(
       PageLayout,
       {
-        header: /* @__PURE__ */ jsx83(
+        header: /* @__PURE__ */ jsx84(
           Header2,
           {
             logo: header.logo,
@@ -10414,10 +10442,10 @@ function PageTemplate({
         ),
         stickyHeader: header.sticky ?? true,
         breadcrumbsPosition: "below-title",
-        breadcrumbs: /* @__PURE__ */ jsx83(Breadcrumbs, { items: breadcrumbs, variant: "subtle" }),
-        title: /* @__PURE__ */ jsx83(Heading, { level: 1, children: title }),
-        subtitle: subtitle ? /* @__PURE__ */ jsx83(Text, { size: "lg", variant: "secondary", children: subtitle }) : void 0,
-        secondaryNav: secondaryNav ? /* @__PURE__ */ jsx83(
+        breadcrumbs: /* @__PURE__ */ jsx84(Breadcrumbs, { items: breadcrumbs, variant: "subtle" }),
+        title: /* @__PURE__ */ jsx84(Heading, { level: 1, children: title }),
+        subtitle: subtitle ? /* @__PURE__ */ jsx84(Text, { size: "lg", variant: "secondary", children: subtitle }) : void 0,
+        secondaryNav: secondaryNav ? /* @__PURE__ */ jsx84(
           SecondaryNav,
           {
             items: secondaryNav.items,
@@ -10432,19 +10460,19 @@ function PageTemplate({
         children
       }
     ),
-    showCustomizer && /* @__PURE__ */ jsx83(CustomizerPanel, {})
+    showCustomizer && /* @__PURE__ */ jsx84(CustomizerPanel, {})
   ] });
 }
 
 // src/components/layout/Resizable.tsx
 import { GripVertical as GripVertical2 } from "lucide-react";
 import { Group as PanelGroup, Panel, Separator as PanelResizeHandle } from "react-resizable-panels";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var ResizablePanelGroup = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx85(
     PanelGroup,
     {
       className: cn(
@@ -10461,7 +10489,7 @@ var ResizableHandle = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx85(
     PanelResizeHandle,
     {
       className: cn(
@@ -10469,29 +10497,29 @@ var ResizableHandle = ({
         className
       ),
       ...props,
-      children: withHandle && /* @__PURE__ */ jsx84("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border", children: /* @__PURE__ */ jsx84(GripVertical2, { className: "h-2.5 w-2.5" }) })
+      children: withHandle && /* @__PURE__ */ jsx85("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border", children: /* @__PURE__ */ jsx85(GripVertical2, { className: "h-2.5 w-2.5" }) })
     }
   );
 };
 
 // src/components/layout/ScrollArea.tsx
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { jsx as jsx85, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs54 } from "react/jsx-runtime";
 var ScrollArea = ({
   ref,
   className,
   children,
   ...props
-}) => /* @__PURE__ */ jsxs53(
+}) => /* @__PURE__ */ jsxs54(
   ScrollAreaPrimitive.Root,
   {
     ref,
     className: cn("relative overflow-hidden", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx85(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
-      /* @__PURE__ */ jsx85(ScrollBar, {}),
-      /* @__PURE__ */ jsx85(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ jsx86(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx86(ScrollBar, {}),
+      /* @__PURE__ */ jsx86(ScrollAreaPrimitive.Corner, {})
     ]
   }
 );
@@ -10500,7 +10528,7 @@ var ScrollBar = ({
   className,
   orientation = "vertical",
   ...props
-}) => /* @__PURE__ */ jsx85(
+}) => /* @__PURE__ */ jsx86(
   ScrollAreaPrimitive.Scrollbar,
   {
     ref,
@@ -10512,20 +10540,20 @@ var ScrollBar = ({
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx85(ScrollAreaPrimitive.Thumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ jsx86(ScrollAreaPrimitive.Thumb, { className: "relative flex-1 rounded-full bg-border" })
   }
 );
 
 // src/components/layout/Separator.tsx
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var Separator4 = ({
   ref,
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
-}) => /* @__PURE__ */ jsx86(
+}) => /* @__PURE__ */ jsx87(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -10542,14 +10570,14 @@ var Separator4 = ({
 
 // src/components/layout/Sidebar.tsx
 import { Slot as Slot3 } from "@radix-ui/react-slot";
-import { jsx as jsx87, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs55 } from "react/jsx-runtime";
 var Sidebar = ({
   ref,
   className,
   children,
   isOpen = true,
   ...props
-}) => /* @__PURE__ */ jsx87(
+}) => /* @__PURE__ */ jsx88(
   "aside",
   {
     ref,
@@ -10559,7 +10587,7 @@ var Sidebar = ({
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx87("div", { className: "flex flex-col h-full", children })
+    children: /* @__PURE__ */ jsx88("div", { className: "flex flex-col h-full", children })
   }
 );
 var SidebarOverlay = ({
@@ -10570,7 +10598,7 @@ var SidebarOverlay = ({
   ...props
 }) => {
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx88(
     "div",
     {
       ref,
@@ -10587,7 +10615,7 @@ var SidebarHeader = ({
   ref,
   className,
   ...props
-}) => /* @__PURE__ */ jsx87(
+}) => /* @__PURE__ */ jsx88(
   "div",
   {
     ref,
@@ -10599,7 +10627,7 @@ var SidebarContent = ({
   ref,
   className,
   ...props
-}) => /* @__PURE__ */ jsx87(
+}) => /* @__PURE__ */ jsx88(
   "div",
   {
     ref,
@@ -10611,7 +10639,7 @@ var SidebarFooter = ({
   ref,
   className,
   ...props
-}) => /* @__PURE__ */ jsx87(
+}) => /* @__PURE__ */ jsx88(
   "div",
   {
     ref,
@@ -10633,7 +10661,7 @@ var SidebarItem = ({
   ...props
 }) => {
   const Comp = asChild ? Slot3 : "button";
-  return /* @__PURE__ */ jsxs54(
+  return /* @__PURE__ */ jsxs55(
     Comp,
     {
       ref,
@@ -10646,7 +10674,7 @@ var SidebarItem = ({
       style: { paddingLeft: `${12 + depth * 16}px` },
       ...props,
       children: [
-        hasChildren && /* @__PURE__ */ jsx87(
+        hasChildren && /* @__PURE__ */ jsx88(
           "svg",
           {
             className: cn(
@@ -10656,7 +10684,7 @@ var SidebarItem = ({
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ jsx87(
+            children: /* @__PURE__ */ jsx88(
               "path",
               {
                 strokeLinecap: "round",
@@ -10667,16 +10695,210 @@ var SidebarItem = ({
             )
           }
         ),
-        !hasChildren && depth > 0 && /* @__PURE__ */ jsx87("span", { className: "w-4 flex-shrink-0" }),
-        showIcon && icon && /* @__PURE__ */ jsx87("span", { className: "flex-shrink-0", children: icon }),
-        /* @__PURE__ */ jsx87("span", { className: "flex-1 text-left truncate", children })
+        !hasChildren && depth > 0 && /* @__PURE__ */ jsx88("span", { className: "w-4 flex-shrink-0" }),
+        showIcon && icon && /* @__PURE__ */ jsx88("span", { className: "flex-shrink-0", children: icon }),
+        /* @__PURE__ */ jsx88("span", { className: "flex-1 text-left truncate", children })
       ]
     }
   );
 };
 
+// src/components/layout/AppSidebar.tsx
+import { createContext as createContext8, useContext as useContext9, useState as useState17, useEffect as useEffect11 } from "react";
+import { PanelLeftClose } from "lucide-react";
+import { jsx as jsx89, jsxs as jsxs56 } from "react/jsx-runtime";
+var STORAGE_KEY = "appsidebar:state";
+var APP_SIDEBAR_WIDTH = 280;
+var APP_SIDEBAR_WIDTH_COLLAPSED = 60;
+var AppSidebarContext = createContext8(null);
+var DEFAULT_CONTEXT = {
+  isOpen: true,
+  toggle: () => {
+  },
+  open: () => {
+  },
+  close: () => {
+  }
+};
+function useAppSidebar() {
+  return useContext9(AppSidebarContext) ?? DEFAULT_CONTEXT;
+}
+function AppSidebarProvider({ children, defaultOpen = true }) {
+  const [isOpen, setIsOpen] = useState17(defaultOpen);
+  useEffect11(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored !== null) setIsOpen(stored === "true");
+  }, []);
+  const persist3 = (value) => localStorage.setItem(STORAGE_KEY, String(value));
+  const toggle = () => setIsOpen((prev) => {
+    const next = !prev;
+    persist3(next);
+    return next;
+  });
+  const open = () => {
+    setIsOpen(true);
+    persist3(true);
+  };
+  const close = () => {
+    setIsOpen(false);
+    persist3(false);
+  };
+  return /* @__PURE__ */ jsx89(AppSidebarContext.Provider, { value: { isOpen, toggle, open, close }, children });
+}
+function AppSidebarInset({
+  children,
+  className
+}) {
+  const { isOpen } = useAppSidebar();
+  const { shouldAnimate, scale } = useMotionPreference();
+  const duration = shouldAnimate ? Math.round(300 * (5 / Math.max(scale, 0.1))) : 0;
+  return /* @__PURE__ */ jsx89(
+    "div",
+    {
+      className: cn("min-h-screen", className),
+      style: {
+        marginLeft: isOpen ? APP_SIDEBAR_WIDTH : APP_SIDEBAR_WIDTH_COLLAPSED,
+        transition: shouldAnimate ? `margin-left ${duration}ms ease-out` : "none"
+      },
+      children
+    }
+  );
+}
+function AppSidebar({
+  logo,
+  title,
+  items = [],
+  children,
+  footer,
+  className
+}) {
+  const { isOpen, toggle } = useAppSidebar();
+  const { shouldAnimate, scale } = useMotionPreference();
+  const duration = shouldAnimate ? Math.round(300 * (5 / Math.max(scale, 0.1))) : 0;
+  return /* @__PURE__ */ jsxs56(
+    "aside",
+    {
+      className: cn(
+        "fixed left-0 top-0 bottom-0 z-40 flex flex-col",
+        "bg-background border-r border-foreground/8 overflow-hidden",
+        className
+      ),
+      style: {
+        width: isOpen ? APP_SIDEBAR_WIDTH : APP_SIDEBAR_WIDTH_COLLAPSED,
+        transition: shouldAnimate ? `width ${duration}ms ease-out` : "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxs56("div", { className: "flex items-center h-16 px-[10px] shrink-0", children: [
+          /* @__PURE__ */ jsxs56(
+            "button",
+            {
+              onClick: toggle,
+              className: cn(
+                "flex items-center gap-2.5 flex-1 min-w-0",
+                "rounded-lg p-1.5",
+                "hover:bg-foreground/5 transition-colors duration-150",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus)]"
+              ),
+              "aria-label": isOpen ? title ?? "OpenCosmos" : "Expand sidebar",
+              children: [
+                /* @__PURE__ */ jsx89("span", { className: "w-8 h-8 shrink-0 flex items-center justify-center", children: logo }),
+                /* @__PURE__ */ jsx89(
+                  "span",
+                  {
+                    className: "font-semibold text-sm text-foreground whitespace-nowrap",
+                    style: {
+                      opacity: isOpen ? 1 : 0,
+                      width: isOpen ? "auto" : 0,
+                      overflow: "hidden",
+                      pointerEvents: isOpen ? "auto" : "none",
+                      transition: shouldAnimate ? `opacity ${Math.round(duration * 0.6)}ms ease-out` : "none"
+                    },
+                    children: title
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx89(
+            "button",
+            {
+              onClick: toggle,
+              tabIndex: isOpen ? 0 : -1,
+              className: cn(
+                "shrink-0 w-8 h-8 flex items-center justify-center rounded-lg",
+                "text-foreground/35 hover:text-foreground/65 hover:bg-foreground/5",
+                "transition-colors duration-150",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus)]"
+              ),
+              style: {
+                opacity: isOpen ? 1 : 0,
+                pointerEvents: isOpen ? "auto" : "none",
+                transition: shouldAnimate ? `opacity ${Math.round(duration * 0.5)}ms ease-out` : "none"
+              },
+              "aria-label": "Collapse sidebar",
+              children: /* @__PURE__ */ jsx89(PanelLeftClose, { className: "w-4 h-4" })
+            }
+          )
+        ] }),
+        items.length > 0 && /* @__PURE__ */ jsx89("nav", { className: "px-2 py-2 space-y-0.5 shrink-0", "aria-label": "Main navigation", children: items.map((item) => /* @__PURE__ */ jsxs56(
+          "a",
+          {
+            href: item.href,
+            target: item.external ? "_blank" : void 0,
+            rel: item.external ? "noopener noreferrer" : void 0,
+            title: !isOpen ? item.label : void 0,
+            "aria-label": !isOpen ? item.label : void 0,
+            className: cn(
+              "flex items-center rounded-lg transition-colors duration-150",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus)]",
+              isOpen ? "gap-3 px-3 py-2.5" : "justify-center w-9 h-9 mx-auto",
+              item.active ? "bg-foreground/8 text-foreground font-medium" : "text-[var(--color-text-secondary)] hover:bg-foreground/5 hover:text-[var(--color-text-primary)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx89("span", { className: "shrink-0 flex items-center justify-center w-4 h-4", children: item.icon }),
+              /* @__PURE__ */ jsx89(
+                "span",
+                {
+                  className: "text-sm whitespace-nowrap",
+                  style: {
+                    opacity: isOpen ? 1 : 0,
+                    width: isOpen ? "auto" : 0,
+                    overflow: "hidden",
+                    pointerEvents: isOpen ? "auto" : "none",
+                    transition: shouldAnimate ? `opacity ${Math.round(duration * 0.55)}ms ease-out` : "none"
+                  },
+                  children: item.label
+                }
+              )
+            ]
+          },
+          item.label
+        )) }),
+        /* @__PURE__ */ jsx89(
+          "div",
+          {
+            className: "flex-1 overflow-y-auto overflow-x-hidden min-h-0",
+            style: { opacity: isOpen ? 1 : 0, pointerEvents: isOpen ? "auto" : "none" },
+            children
+          }
+        ),
+        footer && /* @__PURE__ */ jsx89(
+          "div",
+          {
+            className: cn(
+              "shrink-0 border-t border-foreground/8",
+              isOpen ? "p-3" : "px-2 py-3 flex justify-center"
+            ),
+            children: footer
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/components/layout/Stack.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var Stack = ({
   ref,
   children,
@@ -10712,7 +10934,7 @@ var Stack = ({
       evenly: "justify-evenly"
     }
   };
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx90(
     Component,
     {
       ref,
@@ -10724,7 +10946,7 @@ var Stack = ({
 };
 
 // src/components/layout/GlassSurface.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var TINT_COLORS = {
   0: "255, 255, 255",
   1: "227, 227, 227",
@@ -10765,7 +10987,7 @@ function GlassSurface({
     } : void 0,
     ...style
   };
-  return /* @__PURE__ */ jsx89("div", { ref, className: classes, style: inlineStyles, children });
+  return /* @__PURE__ */ jsx91("div", { ref, className: classes, style: inlineStyles, children });
 }
 
 // src/lib/webgl/Renderer.ts
@@ -10954,8 +11176,8 @@ var Color = class {
 };
 
 // src/components/backgrounds/WarpBackground.tsx
-import { useEffect as useEffect11, useRef as useRef4 } from "react";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { useEffect as useEffect12, useRef as useRef4 } from "react";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var vertexShader = `
 attribute vec2 uv;
 attribute vec2 position;
@@ -11147,7 +11369,7 @@ function WarpBackground({
   const smoothMousePos = useRef4({ x: 0.5, y: 0.5 });
   const targetMouseActive = useRef4(0);
   const smoothMouseActive = useRef4(0);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!ctnDom.current) return;
     const ctn = ctnDom.current;
     const renderer = new Renderer({
@@ -11268,12 +11490,12 @@ function WarpBackground({
     autoCenterRepulsion,
     transparent
   ]);
-  return /* @__PURE__ */ jsx90("div", { ref: ctnDom, className: `w-full h-full relative ${className}`, ...rest });
+  return /* @__PURE__ */ jsx92("div", { ref: ctnDom, className: `w-full h-full relative ${className}`, ...rest });
 }
 
 // src/components/backgrounds/FaultyTerminal.tsx
-import { useEffect as useEffect12, useRef as useRef5, useMemo as useMemo3, useCallback as useCallback7 } from "react";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { useEffect as useEffect13, useRef as useRef5, useMemo as useMemo3, useCallback as useCallback7 } from "react";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var vertexShader2 = `
 attribute vec2 position;
 attribute vec2 uv;
@@ -11528,7 +11750,7 @@ function FaultyTerminal({
     const y = 1 - (e.clientY - rect.top) / rect.height;
     mouseRef.current = { x, y };
   }, []);
-  useEffect12(() => {
+  useEffect13(() => {
     const ctn = containerRef.current;
     if (!ctn) return;
     const renderer = new Renderer({ dpr });
@@ -11644,13 +11866,13 @@ function FaultyTerminal({
     brightness,
     handleMouseMove
   ]);
-  return /* @__PURE__ */ jsx91("div", { ref: containerRef, className: `w-full h-full relative overflow-hidden ${className}`, style, ...rest });
+  return /* @__PURE__ */ jsx93("div", { ref: containerRef, className: `w-full h-full relative overflow-hidden ${className}`, style, ...rest });
 }
 
 // src/components/motion/AnimatedBeam.tsx
 import { motion as motion4 } from "framer-motion";
 import { useId as useId2 } from "react";
-import { jsx as jsx92, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs57 } from "react/jsx-runtime";
 var AnimatedBeam = ({
   className,
   containerRef,
@@ -11686,7 +11908,7 @@ var AnimatedBeam = ({
   const controlY = y1;
   const controlX = x2;
   const path = `M ${x1},${y1} C ${x1 + curvature},${y1} ${x2 - curvature},${y2} ${x2},${y2}`;
-  return /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs57(
     "svg",
     {
       fill: "none",
@@ -11695,16 +11917,16 @@ var AnimatedBeam = ({
       xmlns: "http://www.w3.org/2000/svg",
       className: cn("pointer-events-none absolute inset-0 transform-gpu overflow-visible", className),
       children: [
-        /* @__PURE__ */ jsxs55("defs", { children: [
-          /* @__PURE__ */ jsxs55("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-            /* @__PURE__ */ jsx92("stop", { stopColor: gradientStartColor, stopOpacity: "0" }),
-            /* @__PURE__ */ jsx92("stop", { stopColor: gradientStartColor }),
-            /* @__PURE__ */ jsx92("stop", { offset: "32.5%", stopColor: gradientStopColor }),
-            /* @__PURE__ */ jsx92("stop", { offset: "100%", stopColor: gradientStopColor, stopOpacity: "0" })
+        /* @__PURE__ */ jsxs57("defs", { children: [
+          /* @__PURE__ */ jsxs57("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ jsx94("stop", { stopColor: gradientStartColor, stopOpacity: "0" }),
+            /* @__PURE__ */ jsx94("stop", { stopColor: gradientStartColor }),
+            /* @__PURE__ */ jsx94("stop", { offset: "32.5%", stopColor: gradientStopColor }),
+            /* @__PURE__ */ jsx94("stop", { offset: "100%", stopColor: gradientStopColor, stopOpacity: "0" })
           ] }),
-          /* @__PURE__ */ jsx92("marker", { id: `arrow-${id}`, markerWidth: "5", markerHeight: "5", refX: "2.5", refY: "2.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx92("circle", { cx: "2.5", cy: "2.5", r: "2.5", fill: gradientStopColor }) })
+          /* @__PURE__ */ jsx94("marker", { id: `arrow-${id}`, markerWidth: "5", markerHeight: "5", refX: "2.5", refY: "2.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx94("circle", { cx: "2.5", cy: "2.5", r: "2.5", fill: gradientStopColor }) })
         ] }),
-        /* @__PURE__ */ jsx92(
+        /* @__PURE__ */ jsx94(
           "path",
           {
             d: path,
@@ -11714,7 +11936,7 @@ var AnimatedBeam = ({
             strokeLinecap: "round"
           }
         ),
-        shouldAnimate && /* @__PURE__ */ jsx92(
+        shouldAnimate && /* @__PURE__ */ jsx94(
           "path",
           {
             d: path,
@@ -11722,7 +11944,7 @@ var AnimatedBeam = ({
             strokeWidth: pathWidth,
             strokeLinecap: "round",
             fill: "none",
-            children: /* @__PURE__ */ jsx92(
+            children: /* @__PURE__ */ jsx94(
               "animate",
               {
                 attributeName: "stroke-dasharray",
@@ -11733,7 +11955,7 @@ var AnimatedBeam = ({
             )
           }
         ),
-        shouldAnimate && /* @__PURE__ */ jsx92(
+        shouldAnimate && /* @__PURE__ */ jsx94(
           motion4.circle,
           {
             r: pathWidth * 1.5,
@@ -11750,7 +11972,7 @@ var AnimatedBeam = ({
             style: { offsetPath: `path('${path}')` }
           }
         ),
-        shouldAnimate && /* @__PURE__ */ jsx92(
+        shouldAnimate && /* @__PURE__ */ jsx94(
           motion4.circle,
           {
             r: pathWidth,
@@ -11773,8 +11995,8 @@ var AnimatedBeam = ({
 };
 
 // src/components/backgrounds/OrbBackground.tsx
-import { useEffect as useEffect13, useRef as useRef6 } from "react";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { useEffect as useEffect14, useRef as useRef6 } from "react";
+import { jsx as jsx95 } from "react/jsx-runtime";
 function hexToRgb4(hex) {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   if (!result) return [0, 0, 0];
@@ -11985,7 +12207,7 @@ function OrbBackground({
     }
   `
   );
-  useEffect13(() => {
+  useEffect14(() => {
     const container = ctnDom.current;
     if (!container) return;
     const bgColor = backgroundColor || getCSSVariable2("--color-background", "#000000");
@@ -12088,13 +12310,13 @@ function OrbBackground({
       gl.getExtension("WEBGL_lose_context")?.loseContext();
     };
   }, [hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor]);
-  return /* @__PURE__ */ jsx93("div", { ref: ctnDom, className: cn("w-full h-full pointer-events-auto", className) });
+  return /* @__PURE__ */ jsx95("div", { ref: ctnDom, className: cn("w-full h-full pointer-events-auto", className) });
 }
 
 // src/components/blocks/Hero.tsx
 import { ArrowRight as ArrowRight2 } from "lucide-react";
 import { motion as motion5 } from "framer-motion";
-import { jsx as jsx94, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs58 } from "react/jsx-runtime";
 function HeroBlock({
   className,
   badge,
@@ -12132,12 +12354,12 @@ function HeroBlock({
       } : { duration: 0 }
     }
   };
-  return /* @__PURE__ */ jsxs56("div", { className: cn("relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden w-full", className), children: [
-    background && /* @__PURE__ */ jsxs56("div", { className: "absolute inset-0 z-0 select-none pointer-events-none", children: [
-      /* @__PURE__ */ jsx94("div", { className: "absolute inset-0", children: background }),
-      /* @__PURE__ */ jsx94("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[var(--color-background)] z-10" })
+  return /* @__PURE__ */ jsxs58("div", { className: cn("relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden w-full", className), children: [
+    background && /* @__PURE__ */ jsxs58("div", { className: "absolute inset-0 z-0 select-none pointer-events-none", children: [
+      /* @__PURE__ */ jsx96("div", { className: "absolute inset-0", children: background }),
+      /* @__PURE__ */ jsx96("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[var(--color-background)] z-10" })
     ] }),
-    /* @__PURE__ */ jsxs56(
+    /* @__PURE__ */ jsxs58(
       motion5.div,
       {
         className: "relative z-20 container max-w-4xl px-4 text-center space-y-8",
@@ -12146,8 +12368,8 @@ function HeroBlock({
         whileInView: "visible",
         viewport: { once: true },
         children: [
-          badge && /* @__PURE__ */ jsx94(motion5.div, { variants: itemVariants, className: "flex justify-center", children: /* @__PURE__ */ jsx94(Badge, { variant: "outline", className: "backdrop-blur-md bg-[var(--color-surface)]/30 border-[var(--color-border)] px-4 py-1.5", children: badge }) }),
-          /* @__PURE__ */ jsx94(
+          badge && /* @__PURE__ */ jsx96(motion5.div, { variants: itemVariants, className: "flex justify-center", children: /* @__PURE__ */ jsx96(Badge, { variant: "outline", className: "backdrop-blur-md bg-[var(--color-surface)]/30 border-[var(--color-border)] px-4 py-1.5", children: badge }) }),
+          /* @__PURE__ */ jsx96(
             motion5.h1,
             {
               variants: itemVariants,
@@ -12155,14 +12377,14 @@ function HeroBlock({
               children: headline
             }
           ),
-          /* @__PURE__ */ jsx94(motion5.div, { variants: itemVariants, children: /* @__PURE__ */ jsx94(Text, { variant: "secondary", className: "text-xl md:text-2xl max-w-2xl mx-auto", children: description }) }),
-          children && /* @__PURE__ */ jsx94(motion5.div, { variants: itemVariants, className: "flex justify-center", children }),
-          /* @__PURE__ */ jsxs56(motion5.div, { variants: itemVariants, className: "flex flex-col sm:flex-row gap-4 justify-center items-center pt-4", children: [
-            primaryCta && /* @__PURE__ */ jsxs56(Button, { size: "lg", variant: primaryCta.variant || "default", onClick: primaryCta.onClick, children: [
+          /* @__PURE__ */ jsx96(motion5.div, { variants: itemVariants, children: /* @__PURE__ */ jsx96(Text, { variant: "secondary", className: "text-xl md:text-2xl max-w-2xl mx-auto", children: description }) }),
+          children && /* @__PURE__ */ jsx96(motion5.div, { variants: itemVariants, className: "flex justify-center", children }),
+          /* @__PURE__ */ jsxs58(motion5.div, { variants: itemVariants, className: "flex flex-col sm:flex-row gap-4 justify-center items-center pt-4", children: [
+            primaryCta && /* @__PURE__ */ jsxs58(Button, { size: "lg", variant: primaryCta.variant || "default", onClick: primaryCta.onClick, children: [
               primaryCta.label,
-              /* @__PURE__ */ jsx94(ArrowRight2, { className: "w-4 h-4 ml-2" })
+              /* @__PURE__ */ jsx96(ArrowRight2, { className: "w-4 h-4 ml-2" })
             ] }),
-            secondaryCta && /* @__PURE__ */ jsx94(Button, { size: "lg", variant: "outline", className: "bg-[var(--color-surface)]/50 backdrop-blur-md", onClick: secondaryCta.onClick, children: secondaryCta.label })
+            secondaryCta && /* @__PURE__ */ jsx96(Button, { size: "lg", variant: "outline", className: "bg-[var(--color-surface)]/50 backdrop-blur-md", onClick: secondaryCta.onClick, children: secondaryCta.label })
           ] })
         ]
       }
@@ -12171,8 +12393,8 @@ function HeroBlock({
 }
 
 // src/components/cursor/SplashCursor.tsx
-import { useEffect as useEffect14, useRef as useRef7 } from "react";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { useEffect as useEffect15, useRef as useRef7 } from "react";
+import { jsx as jsx97 } from "react/jsx-runtime";
 function pointerPrototype() {
   return {
     id: -1,
@@ -12206,7 +12428,7 @@ function SplashCursor({
   style
 }) {
   const canvasRef = useRef7(null);
-  useEffect14(() => {
+  useEffect15(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const pointers = [pointerPrototype()];
@@ -13252,7 +13474,7 @@ function SplashCursor({
     BACK_COLOR,
     TRANSPARENT
   ]);
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx97(
     "div",
     {
       style: {
@@ -13266,7 +13488,7 @@ function SplashCursor({
         ...style
       },
       className,
-      children: /* @__PURE__ */ jsx95(
+      children: /* @__PURE__ */ jsx97(
         "canvas",
         {
           ref: canvasRef,
@@ -13283,8 +13505,8 @@ function SplashCursor({
 }
 
 // src/components/cursor/TargetCursor.tsx
-import { useEffect as useEffect15, useRef as useRef8, useState as useState17 } from "react";
-import { Fragment as Fragment5, jsx as jsx96, jsxs as jsxs57 } from "react/jsx-runtime";
+import { useEffect as useEffect16, useRef as useRef8, useState as useState18 } from "react";
+import { Fragment as Fragment5, jsx as jsx98, jsxs as jsxs59 } from "react/jsx-runtime";
 function TargetCursor({
   color = "255, 255, 255",
   outerSize = 40,
@@ -13303,10 +13525,10 @@ function TargetCursor({
   const endY = useRef8(0);
   const _x = useRef8(0);
   const _y = useRef8(0);
-  const [isActive, setIsActive] = useState17(false);
-  const [isActiveClickable, setIsActiveClickable] = useState17(false);
-  const [isVisible, setIsVisible] = useState17(false);
-  useEffect15(() => {
+  const [isActive, setIsActive] = useState18(false);
+  const [isActiveClickable, setIsActiveClickable] = useState18(false);
+  const [isVisible, setIsVisible] = useState18(false);
+  useEffect16(() => {
     const onMouseMove = (e) => {
       endX.current = e.clientX;
       endY.current = e.clientY;
@@ -13354,11 +13576,11 @@ function TargetCursor({
     previousTimeRef.current = time;
     requestRef.current = requestAnimationFrame(animateCursor);
   };
-  useEffect15(() => {
+  useEffect16(() => {
     requestRef.current = requestAnimationFrame(animateCursor);
     return () => cancelAnimationFrame(requestRef.current);
   }, []);
-  useEffect15(() => {
+  useEffect16(() => {
     if (isVisible) {
       const style = document.createElement("style");
       style.innerHTML = `body, a, button, input, [role="button"] { cursor: none !important; }`;
@@ -13392,8 +13614,8 @@ function TargetCursor({
     }
   };
   if (!isVisible) return null;
-  return /* @__PURE__ */ jsxs57(Fragment5, { children: [
-    /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsxs59(Fragment5, { children: [
+    /* @__PURE__ */ jsx98(
       "div",
       {
         ref: cursorOuterRef,
@@ -13410,7 +13632,7 @@ function TargetCursor({
         }
       }
     ),
-    /* @__PURE__ */ jsx96(
+    /* @__PURE__ */ jsx98(
       "div",
       {
         ref: cursorInnerRef,
@@ -13429,8 +13651,8 @@ function TargetCursor({
 }
 
 // src/providers/ThemeProvider.tsx
-import { useEffect as useEffect16, useState as useState18 } from "react";
-import { Fragment as Fragment6, jsx as jsx97 } from "react/jsx-runtime";
+import { useEffect as useEffect17, useState as useState19 } from "react";
+import { Fragment as Fragment6, jsx as jsx99 } from "react/jsx-runtime";
 var themeTokens = {
   studio: studioTokens,
   terra: terraTokens,
@@ -13655,19 +13877,19 @@ function ThemeProvider({ children, defaultTheme, defaultMode }) {
   const { theme, mode, setTheme, setMode } = useThemeStore();
   const customPalette = useCustomizer((state) => state.customColors?.[theme]?.[mode]);
   const motionIntensity = useCustomizer((state) => state.motion);
-  const [isTransitioning, setIsTransitioning] = useState18(false);
-  const [mounted, setMounted] = useState18(false);
-  useEffect16(() => {
+  const [isTransitioning, setIsTransitioning] = useState19(false);
+  const [mounted, setMounted] = useState19(false);
+  useEffect17(() => {
     if (!defaultTheme && !defaultMode) return;
     const persisted = typeof window !== "undefined" && localStorage.getItem("ecosystem-theme");
     if (persisted) return;
     if (defaultTheme) setTheme(defaultTheme);
     if (defaultMode) setMode(defaultMode);
   }, []);
-  useEffect16(() => {
+  useEffect17(() => {
     setMounted(true);
   }, []);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!mounted) return;
     setIsTransitioning(true);
     const root = document.documentElement;
@@ -13702,7 +13924,7 @@ function ThemeProvider({ children, defaultTheme, defaultMode }) {
     }, 400);
     return () => clearTimeout(timeout);
   }, [theme, mode, mounted, customPalette, motionIntensity]);
-  return /* @__PURE__ */ jsx97(Fragment6, { children });
+  return /* @__PURE__ */ jsx99(Fragment6, { children });
 }
 
 // src/lib/animations.ts
@@ -13988,7 +14210,7 @@ function generateBreadcrumbs(hash, routeConfig, baseUrl = "#") {
 
 // src/component-registry.ts
 var BRAND = {
-  productName: "Sage Design Engine",
+  productName: "OpenCosmos UI",
   productNameShort: "Sage",
   themeNames: {
     organic: "Terra",
@@ -14000,7 +14222,7 @@ var BRAND = {
 };
 var COMPONENT_REGISTRY = {
   /**
-   * Total count of all exported UI components from @thesage/ui
+   * Total count of all exported UI components from @opencosmos/ui
    */
   totalCount: 100,
   /**
@@ -14359,6 +14581,7 @@ __export(data_display_exports, {
   DescriptionList: () => DescriptionList,
   GitHubIcon: () => GitHubIcon,
   Heading: () => Heading,
+  OpenCosmosIcon: () => OpenCosmosIcon,
   StatCard: () => StatCard,
   StatCardGroup: () => StatCardGroup,
   Table: () => Table,
@@ -14385,10 +14608,15 @@ __export(data_display_exports, {
 // src/components/layout/index.ts
 var layout_exports = {};
 __export(layout_exports, {
+  APP_SIDEBAR_WIDTH: () => APP_SIDEBAR_WIDTH,
+  APP_SIDEBAR_WIDTH_COLLAPSED: () => APP_SIDEBAR_WIDTH_COLLAPSED,
   Accordion: () => Accordion,
   AccordionContent: () => AccordionContent,
   AccordionItem: () => AccordionItem,
   AccordionTrigger: () => AccordionTrigger,
+  AppSidebar: () => AppSidebar,
+  AppSidebarInset: () => AppSidebarInset,
+  AppSidebarProvider: () => AppSidebarProvider,
   AspectRatio: () => AspectRatio,
   Carousel: () => Carousel,
   CarouselContent: () => CarouselContent,
@@ -14420,7 +14648,8 @@ __export(layout_exports, {
   SidebarHeader: () => SidebarHeader,
   SidebarItem: () => SidebarItem,
   SidebarOverlay: () => SidebarOverlay,
-  Stack: () => Stack
+  Stack: () => Stack,
+  useAppSidebar: () => useAppSidebar
 });
 
 // src/components/backgrounds/index.ts
@@ -14444,6 +14673,8 @@ __export(providers_exports, {
   ThemeProvider: () => ThemeProvider
 });
 export {
+  APP_SIDEBAR_WIDTH,
+  APP_SIDEBAR_WIDTH_COLLAPSED,
   Accordion,
   AccordionContent,
   AccordionItem,
@@ -14464,6 +14695,9 @@ export {
   AlertDialogTrigger,
   AlertTitle,
   AnimatedBeam,
+  AppSidebar,
+  AppSidebarInset,
+  AppSidebarProvider,
   AspectImage,
   AspectRatio,
   Avatar,
@@ -14633,6 +14867,7 @@ export {
   NavigationMenuTrigger,
   NavigationMenuViewport,
   NotificationCenter,
+  OpenCosmosIcon,
   OpenGraphCard,
   OrbBackground,
   overlays_exports as Overlays,
@@ -14789,6 +15024,7 @@ export {
   transitions,
   treeNodeVariants,
   typographySystem,
+  useAppSidebar,
   useCustomizer,
   useForm,
   useFormField,