@opencosmos/ui 1.3.1 → 1.3.3

package/dist/index.js

@@ -31,6 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  APP_SIDEBAR_WIDTH: () => APP_SIDEBAR_WIDTH,
+  APP_SIDEBAR_WIDTH_COLLAPSED: () => APP_SIDEBAR_WIDTH_COLLAPSED,
   Accordion: () => Accordion,
   AccordionContent: () => AccordionContent,
   AccordionItem: () => AccordionItem,
@@ -51,6 +53,9 @@ __export(index_exports, {
   AlertDialogTrigger: () => AlertDialogTrigger,
   AlertTitle: () => AlertTitle,
   AnimatedBeam: () => AnimatedBeam,
+  AppSidebar: () => AppSidebar,
+  AppSidebarInset: () => AppSidebarInset,
+  AppSidebarProvider: () => AppSidebarProvider,
   AspectImage: () => AspectImage,
   AspectRatio: () => AspectRatio,
   Avatar: () => Avatar,
@@ -220,6 +225,7 @@ __export(index_exports, {
   NavigationMenuTrigger: () => NavigationMenuTrigger,
   NavigationMenuViewport: () => NavigationMenuViewport,
   NotificationCenter: () => NotificationCenter,
+  OpenCosmosIcon: () => OpenCosmosIcon,
   OpenGraphCard: () => OpenGraphCard,
   OrbBackground: () => OrbBackground,
   Overlays: () => overlays_exports,
@@ -376,6 +382,7 @@ __export(index_exports, {
   transitions: () => transitions,
   treeNodeVariants: () => treeNodeVariants,
   typographySystem: () => typographySystem,
+  useAppSidebar: () => useAppSidebar,
   useCustomizer: () => useCustomizer,
   useForm: () => useForm,
   useFormField: () => useFormField,
@@ -8610,6 +8617,34 @@ var GitHubIcon = ({
   );
 };
 
+// src/components/data-display/OpenCosmosIcon.tsx
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var OpenCosmosIcon = ({
+  ref,
+  size = 20,
+  className = ""
+}) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+  "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__ */ (0, import_jsx_runtime68.jsx)("circle", { cx: "12", cy: "12", r: "9.5", strokeWidth: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("ellipse", { cx: "12", cy: "12", rx: "9.5", ry: "3.2", strokeWidth: "1.25", transform: "rotate(-35 12 12)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("circle", { cx: "12", cy: "12", r: "1.75", fill: "currentColor", stroke: "none" })
+    ]
+  }
+);
+
 // src/components/data-display/Heading.tsx
 var import_react13 = __toESM(require("react"));
 var Heading = ({
@@ -8717,7 +8752,7 @@ var Text = ({
 
 // src/components/data-display/VariableWeightText.tsx
 var import_framer_motion2 = require("framer-motion");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var VariableWeightText = ({
   children,
   minWeight = 200,
@@ -8733,7 +8768,7 @@ var VariableWeightText = ({
   const effectiveIntensity = intensity ?? motionIntensity;
   const scaledDuration = effectiveIntensity > 0 ? duration * (5 / effectiveIntensity) : duration;
   if (effectiveIntensity === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       "div",
       {
         className,
@@ -8752,7 +8787,7 @@ var VariableWeightText = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     import_framer_motion2.motion.div,
     {
       initial: {
@@ -8789,7 +8824,7 @@ var VariableWeightText = ({
 // src/components/data-display/Typewriter.tsx
 var import_framer_motion3 = require("framer-motion");
 var import_react15 = require("react");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 function Typewriter({
   text,
   speed = 0.05,
@@ -8852,9 +8887,9 @@ function Typewriter({
       clearTimeout(timeoutId);
     };
   }, [text, speed, delay, loop, loopDelay, shouldAnimate, scale]);
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Component, { className: cn("inline", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: displayedText }),
-    showCursor && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Component, { className: cn("inline", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { children: displayedText }),
+    showCursor && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       import_framer_motion3.motion.span,
       {
         initial: { opacity: 0 },
@@ -8869,7 +8904,7 @@ function Typewriter({
 
 // src/components/data-display/StatCard.tsx
 var import_class_variance_authority12 = require("class-variance-authority");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var statCardVariants = (0, import_class_variance_authority12.cva)(
   "rounded-2xl border bg-surface text-foreground shadow-xs p-6",
   {
@@ -8918,7 +8953,7 @@ var statCardChangeVariants = (0, import_class_variance_authority12.cva)(
     }
   }
 );
-var TrendUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+var TrendUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8932,12 +8967,12 @@ var TrendUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     strokeLinejoin: "round",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("polyline", { points: "22 7 13.5 15.5 8.5 10.5 2 17" }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("polyline", { points: "16 7 22 7 22 13" })
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("polyline", { points: "22 7 13.5 15.5 8.5 10.5 2 17" }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("polyline", { points: "16 7 22 7 22 13" })
     ]
   }
 );
-var TrendDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+var TrendDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8951,12 +8986,12 @@ var TrendDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     strokeLinejoin: "round",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("polyline", { points: "22 17 13.5 8.5 8.5 13.5 2 7" }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("polyline", { points: "16 17 22 17 22 11" })
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("polyline", { points: "22 17 13.5 8.5 8.5 13.5 2 7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("polyline", { points: "16 17 22 17 22 11" })
     ]
   }
 );
-var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8969,7 +9004,7 @@ var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
   }
 );
 function StatCard({
@@ -8985,31 +9020,31 @@ function StatCard({
   ...props
 }) {
   const resolvedTrend = trend ?? (change !== void 0 ? change > 0 ? "up" : change < 0 ? "down" : "flat" : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     "div",
     {
       "data-slot": "stat-card",
       role: "article",
       className: cn(statCardVariants({ variant, size }), className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("dl", { className: "space-y-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("dt", { className: "text-sm font-medium text-foreground-secondary", children: label }),
-          icon && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "text-foreground-secondary", "aria-hidden": "true", children: icon })
+      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("dl", { className: "space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("dt", { className: "text-sm font-medium text-foreground-secondary", children: label }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "text-foreground-secondary", "aria-hidden": "true", children: icon })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("dd", { className: cn(statCardValueVariants({ size })), children: value }),
-        (change !== void 0 || description) && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("dd", { className: "flex items-center gap-2 pt-1", children: [
-          change !== void 0 && resolvedTrend && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: cn(statCardChangeVariants({ trend: resolvedTrend })), children: [
-            resolvedTrend === "up" && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TrendUpIcon, {}),
-            resolvedTrend === "down" && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TrendDownIcon, {}),
-            resolvedTrend === "flat" && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(MinusIcon, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("dd", { className: cn(statCardValueVariants({ size })), children: value }),
+        (change !== void 0 || description) && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("dd", { className: "flex items-center gap-2 pt-1", children: [
+          change !== void 0 && resolvedTrend && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: cn(statCardChangeVariants({ trend: resolvedTrend })), children: [
+            resolvedTrend === "up" && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TrendUpIcon, {}),
+            resolvedTrend === "down" && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TrendDownIcon, {}),
+            resolvedTrend === "flat" && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MinusIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { children: [
               change > 0 ? "+" : "",
               change,
               "%"
             ] })
           ] }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "text-sm text-foreground-secondary", children: description })
+          description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "text-sm text-foreground-secondary", children: description })
         ] })
       ] })
     }
@@ -9019,7 +9054,7 @@ function StatCardGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     "div",
     {
       "data-slot": "stat-card-group",
@@ -9031,7 +9066,7 @@ function StatCardGroup({
 
 // src/components/data-display/Timeline.tsx
 var import_class_variance_authority13 = require("class-variance-authority");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var timelineVariants = (0, import_class_variance_authority13.cva)("relative", {
   variants: {
     orientation: {
@@ -9065,7 +9100,7 @@ var timelineItemStatusVariants = (0, import_class_variance_authority13.cva)(
     }
   }
 );
-var CheckIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+var CheckIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -9078,10 +9113,10 @@ var CheckIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("polyline", { points: "20 6 9 17 4 12" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("polyline", { points: "20 6 9 17 4 12" })
   }
 );
-var XIcon4 = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+var XIcon4 = () => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -9095,12 +9130,12 @@ var XIcon4 = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     strokeLinejoin: "round",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
     ]
   }
 );
-var CircleIcon = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+var CircleIcon = () => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -9109,7 +9144,7 @@ var CircleIcon = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     viewBox: "0 0 24 24",
     fill: "currentColor",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("circle", { cx: "12", cy: "12", r: "6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("circle", { cx: "12", cy: "12", r: "6" })
   }
 );
 function Timeline({
@@ -9118,7 +9153,7 @@ function Timeline({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     "ol",
     {
       "data-slot": "timeline",
@@ -9142,16 +9177,16 @@ function TimelineItem({
   const defaultIcon = (() => {
     switch (status) {
       case "completed":
-        return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CheckIcon3, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(CheckIcon3, {});
       case "error":
-        return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(XIcon4, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(XIcon4, {});
       case "active":
-        return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CircleIcon, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(CircleIcon, {});
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CircleIcon, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(CircleIcon, {});
     }
   })();
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
     "li",
     {
       "data-slot": "timeline-item",
@@ -9159,8 +9194,8 @@ function TimelineItem({
       "aria-current": status === "active" ? "step" : void 0,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex flex-col items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
             "div",
             {
               "data-slot": "timeline-icon",
@@ -9169,7 +9204,7 @@ function TimelineItem({
               children: icon ?? defaultIcon
             }
           ),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
             "div",
             {
               "data-slot": "timeline-connector",
@@ -9180,12 +9215,12 @@ function TimelineItem({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: cn("pb-6", isLast && "pb-0"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "font-medium text-foreground leading-none", children: title }),
-            timestamp && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("time", { className: "text-xs text-foreground-secondary", children: timestamp })
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: cn("pb-6", isLast && "pb-0"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: "font-medium text-foreground leading-none", children: title }),
+            timestamp && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("time", { className: "text-xs text-foreground-secondary", children: timestamp })
           ] }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "mt-1 text-sm text-foreground-secondary", children: description })
+          description && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: "mt-1 text-sm text-foreground-secondary", children: description })
         ] })
       ]
     }
@@ -9195,7 +9230,7 @@ function TimelineItem({
 // src/components/data-display/TreeView.tsx
 var React18 = __toESM(require("react"));
 var import_class_variance_authority14 = require("class-variance-authority");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var treeNodeVariants = (0, import_class_variance_authority14.cva)(
   "flex items-center gap-2 py-1 px-2 rounded-md text-sm cursor-pointer select-none transition-colors",
   {
@@ -9211,7 +9246,7 @@ var treeNodeVariants = (0, import_class_variance_authority14.cva)(
     }
   }
 );
-var ChevronIcon = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+var ChevronIcon = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -9228,7 +9263,7 @@ var ChevronIcon = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx
       "shrink-0 transition-transform",
       expanded ? "rotate-90" : "rotate-0"
     ),
-    children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("polyline", { points: "9 18 15 12 9 6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("polyline", { points: "9 18 15 12 9 6" })
   }
 );
 var TreeViewContext = React18.createContext({
@@ -9280,14 +9315,14 @@ function TreeView({
     },
     [controlledSelected, onSelectChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TreeViewContext.Provider, { value: { expanded, selected, toggleExpand, selectNode }, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TreeViewContext.Provider, { value: { expanded, selected, toggleExpand, selectNode }, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "div",
     {
       "data-slot": "tree-view",
       role: "tree",
       className: cn("space-y-0.5", className),
       ...props,
-      children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TreeViewNodeComponent, { node, level: 1 }, node.id))
+      children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TreeViewNodeComponent, { node, level: 1 }, node.id))
     }
   ) });
 }
@@ -9326,8 +9361,8 @@ function TreeViewNodeComponent({ node, level }) {
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { "data-slot": "tree-view-node", role: "treeitem", "aria-expanded": hasChildren ? isExpanded : void 0, "aria-level": level, "aria-selected": isSelected, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { "data-slot": "tree-view-node", role: "treeitem", "aria-expanded": hasChildren ? isExpanded : void 0, "aria-level": level, "aria-selected": isSelected, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
       "div",
       {
         className: cn(treeNodeVariants({ state })),
@@ -9336,18 +9371,18 @@ function TreeViewNodeComponent({ node, level }) {
         onKeyDown: handleKeyDown,
         tabIndex: node.disabled ? -1 : 0,
         children: [
-          hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ChevronIcon, { expanded: isExpanded }) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "w-3.5 shrink-0", "aria-hidden": "true" }),
-          node.icon && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "shrink-0 text-foreground-secondary", "aria-hidden": "true", children: node.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "truncate", children: node.label })
+          hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronIcon, { expanded: isExpanded }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "w-3.5 shrink-0", "aria-hidden": "true" }),
+          node.icon && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "shrink-0 text-foreground-secondary", "aria-hidden": "true", children: node.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "truncate", children: node.label })
         ]
       }
     ),
-    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { role: "group", children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TreeViewNodeComponent, { node: child, level: level + 1 }, child.id)) })
+    hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { role: "group", children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TreeViewNodeComponent, { node: child, level: level + 1 }, child.id)) })
   ] });
 }
 
 // src/components/blocks/social/OpenGraphCard.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 function buildGradientCSS(config) {
   const { type, angle = 135, position = "circle at 50% 50%", colors, stops } = config;
   const colorStops = colors.map((color, index) => {
@@ -9415,7 +9450,7 @@ function OpenGraphCard({
   const activeStyle = backgroundStyles[variant] || backgroundStyles.sage;
   const firstColor = gradient?.colors[0] || primaryColor || "#0a0a0a";
   const isLight = variant === "secondary" || isLightColor(firstColor);
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
     "div",
     {
       className: cn(className),
@@ -9436,7 +9471,7 @@ function OpenGraphCard({
       },
       ...props,
       children: [
-        !isLight && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        !isLight && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
           "div",
           {
             style: {
@@ -9452,7 +9487,7 @@ function OpenGraphCard({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
           "div",
           {
             style: {
@@ -9466,7 +9501,7 @@ function OpenGraphCard({
               textAlign: "center"
             },
             children: [
-              icon !== null && (icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              icon !== null && (icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                 "div",
                 {
                   style: {
@@ -9477,7 +9512,7 @@ function OpenGraphCard({
                   },
                   children: icon
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                 "div",
                 {
                   style: {
@@ -9491,10 +9526,10 @@ function OpenGraphCard({
                     boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
                     marginBottom: "16px"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { style: { width: "24px", height: "24px", borderRadius: "50%", background: isLight ? "white" : activeStyle.accentColor } })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { style: { width: "24px", height: "24px", borderRadius: "50%", background: isLight ? "white" : activeStyle.accentColor } })
                 }
               )),
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                 "h1",
                 {
                   style: {
@@ -9508,7 +9543,7 @@ function OpenGraphCard({
                   children: title
                 }
               ),
-              description && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              description && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                 "p",
                 {
                   style: {
@@ -9534,13 +9569,13 @@ function OpenGraphCard({
 // src/components/layout/Accordion.tsx
 var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
 var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var Accordion = AccordionPrimitive.Root;
 var AccordionItem = ({
   ref,
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
   AccordionPrimitive.Item,
   {
     ref,
@@ -9553,7 +9588,7 @@ var AccordionTrigger = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -9564,7 +9599,7 @@ var AccordionTrigger = ({
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_lucide_react16.ChevronDown, { className: "pointer-events-none h-4 w-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" })
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react16.ChevronDown, { className: "pointer-events-none h-4 w-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" })
     ]
   }
 ) });
@@ -9573,13 +9608,13 @@ var AccordionContent = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
   AccordionPrimitive.Content,
   {
     ref,
     className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: cn("pb-4 pt-0", className), children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: cn("pb-4 pt-0", className), children })
   }
 );
 
@@ -9591,7 +9626,7 @@ var AspectRatio = AspectRatioPrimitive.Root;
 var React19 = __toESM(require("react"));
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
 var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var CarouselContext = React19.createContext(null);
 function useCarousel() {
   const context = React19.useContext(CarouselContext);
@@ -9661,7 +9696,7 @@ var Carousel = ({
       api?.off("select", onSelect);
     };
   }, [api, onSelect]);
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     CarouselContext.Provider,
     {
       value: {
@@ -9674,7 +9709,7 @@ var Carousel = ({
         canScrollPrev,
         canScrollNext
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
         "div",
         {
           ref,
@@ -9695,7 +9730,7 @@ var CarouselContent = ({
   ...props
 }) => {
   const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     "div",
     {
       ref,
@@ -9714,7 +9749,7 @@ var CarouselItem = ({
   ...props
 }) => {
   const { orientation } = useCarousel();
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     "div",
     {
       ref,
@@ -9737,7 +9772,7 @@ var CarouselPrevious = ({
   ...props
 }) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     Button,
     {
       ref,
@@ -9752,8 +9787,8 @@ var CarouselPrevious = ({
       onClick: scrollPrev,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react17.ArrowLeft, { className: "h-4 w-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "sr-only", children: "Previous slide" })
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react17.ArrowLeft, { className: "h-4 w-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "sr-only", children: "Previous slide" })
       ]
     }
   );
@@ -9766,7 +9801,7 @@ var CarouselNext = ({
   ...props
 }) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     Button,
     {
       ref,
@@ -9781,8 +9816,8 @@ var CarouselNext = ({
       onClick: scrollNext,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react17.ArrowRight, { className: "h-4 w-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "sr-only", children: "Next slide" })
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react17.ArrowRight, { className: "h-4 w-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "sr-only", children: "Next slide" })
       ]
     }
   );
@@ -9790,7 +9825,7 @@ var CarouselNext = ({
 
 // src/components/layout/Collapsible.tsx
 var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"));
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = ({
@@ -9798,7 +9833,7 @@ var CollapsibleContent2 = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
   CollapsiblePrimitive.CollapsibleContent,
   {
     ref,
@@ -9843,12 +9878,12 @@ var Container = ({
 // src/components/layout/CustomizerPanel.tsx
 var import_react17 = __toESM(require("react"));
 var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var allThemeOptions = [
-  { id: "studio", label: "Studio", icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react18.Building2, { className: "w-4 h-4" }) },
-  { id: "terra", label: "Terra", icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react18.Leaf, { className: "w-4 h-4" }) },
-  { id: "volt", label: "Volt", icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react18.Zap, { className: "w-4 h-4" }) },
-  { id: "speedboat", label: "Speedboat", icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react18.Rocket, { className: "w-4 h-4" }) }
+  { id: "studio", label: "Studio", icon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react18.Building2, { className: "w-4 h-4" }) },
+  { id: "terra", label: "Terra", icon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react18.Leaf, { className: "w-4 h-4" }) },
+  { id: "volt", label: "Volt", icon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react18.Zap, { className: "w-4 h-4" }) },
+  { id: "speedboat", label: "Speedboat", icon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react18.Rocket, { className: "w-4 h-4" }) }
 ];
 var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) => {
   const [mounted, setMounted] = import_react17.default.useState(false);
@@ -9927,7 +9962,7 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
   }, [isOpen]);
   if (!mounted) return null;
   if (!isOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
       "button",
       {
         onClick: () => setIsOpen(true),
@@ -9935,13 +9970,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__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react18.SunMoon, { className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react18.SlidersHorizontal, { className: "w-5 h-5" }),
+          mode === "lightweight" ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react18.SunMoon, { className: "w-5 h-5" }) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react18.SlidersHorizontal, { className: "w-5 h-5" }),
           mode === "lightweight" ? "Theme" : "Customizer"
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
     "div",
     {
       ref: panelRef,
@@ -9960,25 +9995,25 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
         backgroundColor: "var(--color-glass)"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex justify-between items-center mb-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("h3", { className: "font-bold text-lg", children: mode === "lightweight" ? "Theme Settings" : "Experience Customizer" }),
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex justify-between items-center mb-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("h3", { className: "font-bold text-lg", children: mode === "lightweight" ? "Theme Settings" : "Experience Customizer" }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
             "button",
             {
               onClick: () => setIsOpen(false),
               "aria-label": "Close customizer",
               className: "text-foreground opacity-60 hover:opacity-100 transition-opacity p-1",
-              children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react18.X, { className: "w-5 h-5", "aria-hidden": "true" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react18.X, { className: "w-5 h-5", "aria-hidden": "true" })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "space-y-6", children: [
-          mode === "full" && showMotionIntensity && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex justify-between mb-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("label", { className: "text-sm font-medium opacity-80", children: "Motion Intensity" }),
-              /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "text-sm opacity-60", children: motion6 })
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "space-y-6", children: [
+          mode === "full" && showMotionIntensity && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex justify-between mb-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: "text-sm font-medium opacity-80", children: "Motion Intensity" }),
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-sm opacity-60", children: motion6 })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               "input",
               {
                 type: "range",
@@ -9994,9 +10029,9 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
               }
             )
           ] }),
-          mode === "full" && showThemeSelector && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("label", { className: "block text-sm font-medium opacity-80 mb-3", children: "Theme" }),
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: `grid gap-2 mb-3 ${visibleThemes.length <= 3 ? "grid-cols-3" : "grid-cols-4"}`, children: visibleThemes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+          mode === "full" && showThemeSelector && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: "block text-sm font-medium opacity-80 mb-3", children: "Theme" }),
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: `grid gap-2 mb-3 ${visibleThemes.length <= 3 ? "grid-cols-3" : "grid-cols-4"}`, children: visibleThemes.map((t) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
               "button",
               {
                 onClick: () => setTheme(t.id),
@@ -10011,31 +10046,31 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                   borderColor: "var(--color-primary)"
                 } : {},
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "text-base", children: t.icon }),
-                  /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { children: t.label })
+                  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-base", children: t.icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: t.label })
                 ]
               },
               t.id
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "text-xs opacity-60 space-y-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "font-heading", children: "Heading:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "text-xs opacity-60 space-y-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "font-heading", children: "Heading:" }),
                 " ",
                 theme === "studio" ? "Outfit" : theme === "terra" ? "Lora" : theme === "speedboat" ? "Montserrat" : "Space Grotesk"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "font-body", children: "Body:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "font-body", children: "Body:" }),
                 " ",
                 theme === "studio" ? "Manrope" : theme === "terra" ? "Instrument Sans" : theme === "speedboat" ? "Roboto" : "Space Grotesk"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("label", { className: "block text-sm font-medium opacity-80 mb-3", children: "Mode" }),
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "grid grid-cols-2 gap-2", children: [
-              { id: "light", label: "Light", icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react18.Sun, { className: "w-4 h-4" }) },
-              { id: "dark", label: "Dark", icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react18.Moon, { className: "w-4 h-4" }) }
-            ].map((m) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: "block text-sm font-medium opacity-80 mb-3", children: "Mode" }),
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "grid grid-cols-2 gap-2", children: [
+              { id: "light", label: "Light", icon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react18.Sun, { className: "w-4 h-4" }) },
+              { id: "dark", label: "Dark", icon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react18.Moon, { className: "w-4 h-4" }) }
+            ].map((m) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
               "button",
               {
                 onClick: () => setMode(m.id),
@@ -10050,21 +10085,21 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                   borderColor: "var(--color-primary)"
                 } : {},
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { children: m.icon }),
-                  /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { children: m.label })
+                  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: m.icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: m.label })
                 ]
               },
               m.id
             )) })
           ] }),
-          mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "pt-4 border-t border-[var(--color-border)]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react18.Palette, { className: "w-4 h-4 opacity-80" }),
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("label", { className: "text-sm font-medium opacity-80", children: "Color Customization" })
+          mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "pt-4 border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react18.Palette, { className: "w-4 h-4 opacity-80" }),
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: "text-sm font-medium opacity-80", children: "Color Customization" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex gap-1 bg-[var(--color-surface)] rounded-md p-0.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex gap-1 bg-[var(--color-surface)] rounded-md p-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                   "button",
                   {
                     onClick: () => setCustomizationMode("simple"),
@@ -10076,7 +10111,7 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                     children: "Simple"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                   "button",
                   {
                     onClick: () => setCustomizationMode("advanced"),
@@ -10090,10 +10125,10 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("label", { className: "text-xs font-medium opacity-70 mb-2 block", children: "Primary Color" }),
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: "text-xs font-medium opacity-70 mb-2 block", children: "Primary Color" }),
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                   ColorPicker,
                   {
                     value: tempPrimaryColor,
@@ -10101,9 +10136,9 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                   }
                 )
               ] }),
-              customizationMode === "advanced" && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("label", { className: "text-xs font-medium opacity-70 mb-2 block", children: "Secondary Color" }),
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+              customizationMode === "advanced" && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: "text-xs font-medium opacity-70 mb-2 block", children: "Secondary Color" }),
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                   ColorPicker,
                   {
                     value: tempSecondaryColor,
@@ -10111,9 +10146,9 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                   }
                 )
               ] }),
-              customizationMode === "advanced" && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("label", { className: "text-xs font-medium opacity-70 mb-2 block", children: "Accent Color" }),
-                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+              customizationMode === "advanced" && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: "text-xs font-medium opacity-70 mb-2 block", children: "Accent Color" }),
+                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                   ColorPicker,
                   {
                     value: tempAccentColor,
@@ -10122,8 +10157,8 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex gap-2 mt-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex gap-2 mt-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                 Button,
                 {
                   onClick: handleApplyColor,
@@ -10133,7 +10168,7 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                   children: "Apply Colors"
                 }
               ),
-              currentPalette && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+              currentPalette && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                 Button,
                 {
                   onClick: handleResetColors,
@@ -10143,7 +10178,7 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
                 }
               )
             ] }),
-            currentPalette && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("p", { className: "text-xs opacity-60 mt-2", children: [
+            currentPalette && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("p", { className: "text-xs opacity-60 mt-2", children: [
               "Custom colors active for ",
               theme,
               " ",
@@ -10160,7 +10195,7 @@ var CustomizerPanel = ({ mode = "full", showMotionIntensity = false, themes }) =
 // src/components/layout/DatePicker.tsx
 var import_date_fns = require("date-fns");
 var import_lucide_react19 = require("lucide-react");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 function DatePicker({
   date,
   onDateChange,
@@ -10168,8 +10203,8 @@ function DatePicker({
   className,
   disabled = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(Popover, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(Popover, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
       Button,
       {
         variant: "outline",
@@ -10180,12 +10215,12 @@ function DatePicker({
         ),
         disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react19.Calendar, { className: "mr-2 h-4 w-4" }),
-          date ? (0, import_date_fns.format)(date, "PPP") : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: placeholder })
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react19.Calendar, { className: "mr-2 h-4 w-4" }),
+          date ? (0, import_date_fns.format)(date, "PPP") : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { children: placeholder })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       Calendar,
       {
         mode: "single",
@@ -10198,7 +10233,7 @@ function DatePicker({
 }
 
 // src/components/layout/Footer/Footer.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var Footer = ({
   ref,
   logo,
@@ -10208,7 +10243,7 @@ var Footer = ({
   className = ""
 }) => {
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
     "footer",
     {
       ref,
@@ -10218,11 +10253,11 @@ var Footer = ({
                 ${className}
             `,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("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__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 lg:gap-8", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "lg:col-span-4", children: logo && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "mb-6 text-2xl font-bold text-[var(--color-text-primary)]", children: logo }) }),
-          sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "lg:col-span-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("h3", { className: "text-sm font-semibold text-[var(--color-text-primary)] uppercase tracking-wider mb-4", children: section.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("ul", { className: "space-y-3", children: section.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("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__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 lg:gap-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "lg:col-span-4", children: logo && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "mb-6 text-2xl font-bold text-[var(--color-text-primary)]", children: logo }) }),
+          sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "lg:col-span-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("h3", { className: "text-sm font-semibold text-[var(--color-text-primary)] uppercase tracking-wider mb-4", children: section.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("ul", { className: "space-y-3", children: section.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
               "a",
               {
                 href: link.href,
@@ -10233,10 +10268,10 @@ var Footer = ({
               }
             ) }, link.label)) })
           ] }, section.title)),
-          socialLinks && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "lg:col-span-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("h3", { className: "text-sm font-semibold text-[var(--color-text-primary)] uppercase tracking-wider mb-4", children: "Connect" }),
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("ul", { className: "space-y-3", children: [
-              socialLinks.github && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+          socialLinks && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "lg:col-span-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("h3", { className: "text-sm font-semibold text-[var(--color-text-primary)] uppercase tracking-wider mb-4", children: "Connect" }),
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("ul", { className: "space-y-3", children: [
+              socialLinks.github && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
                 "a",
                 {
                   href: socialLinks.github,
@@ -10244,12 +10279,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__ */ (0, import_jsx_runtime79.jsx)(GitHubIcon, { size: 16 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(GitHubIcon, { size: 16 }),
                     "GitHub"
                   ]
                 }
               ) }),
-              socialLinks.linkedin && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+              socialLinks.linkedin && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                 "a",
                 {
                   href: socialLinks.linkedin,
@@ -10259,7 +10294,7 @@ var Footer = ({
                   children: "LinkedIn"
                 }
               ) }),
-              socialLinks.email && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+              socialLinks.email && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                 "a",
                 {
                   href: `mailto:${socialLinks.email}`,
@@ -10270,14 +10305,14 @@ var Footer = ({
             ] })
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-sm text-[var(--color-text-secondary)] text-center", children: copyright || `\xA9 ${currentYear} All rights reserved.` }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "border-t border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { className: "text-sm text-[var(--color-text-secondary)] text-center", children: copyright || `\xA9 ${currentYear} All rights reserved.` }) }) })
       ]
     }
   );
 };
 
 // src/components/layout/Grid.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var mapResponsive = (prop, prefix, mapFunc) => {
   if (typeof prop === "number") {
     return mapFunc(prop);
@@ -10319,7 +10354,7 @@ var Grid = ({
   const getGapClass = (n) => `gap-${n}`;
   const colClasses = mapResponsive(columns, "grid-cols", getColClass);
   const gapClasses = mapResponsive(gap, "gap", getGapClass);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     Component,
     {
       ref,
@@ -10374,13 +10409,13 @@ var GridItem = ({
     colStart ? mapResponsive(colStart, "col-start", getColStartClass) : "",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Component, { ref, className: classes, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Component, { ref, className: classes, ...props, children });
 };
 
 // src/components/layout/Header/Header.tsx
 var import_react18 = require("react");
 var import_lucide_react20 = require("lucide-react");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var Header2 = ({
   ref,
   logo,
@@ -10435,16 +10470,16 @@ var Header2 = ({
         return "absolute left-1/2 -translate-x-1/2";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "header",
       {
         ref,
         className: `${baseStyles} ${positionStyles} ${transitionStyles} ${backgroundStyles} ${className}`,
         style: { transitionDuration },
-        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: `${maxWidth} mx-auto px-4 sm:px-6 lg:px-8`, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center justify-between h-16 lg:h-20 relative", children: [
-          logo && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "flex-shrink-0 z-10", children: logo }),
-          navLinks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: `${maxWidth} mx-auto px-4 sm:px-6 lg:px-8`, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex items-center justify-between h-16 lg:h-20 relative", children: [
+          logo && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "flex-shrink-0 z-10", children: logo }),
+          navLinks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
             "nav",
             {
               className: `hidden lg:flex items-center gap-8 ${getNavClasses()}`,
@@ -10453,14 +10488,14 @@ var Header2 = ({
                 const hasDropdown = link.children && link.children.length > 0;
                 const isOpen = openDropdown === link.label;
                 if (hasDropdown) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
                     "div",
                     {
                       className: "relative group",
                       onMouseEnter: () => setOpenDropdown(link.label),
                       onMouseLeave: () => setOpenDropdown(null),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+                        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
                           "button",
                           {
                             className: `
@@ -10481,18 +10516,18 @@ var Header2 = ({
                             "aria-haspopup": "true",
                             children: [
                               link.label,
-                              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react20.ChevronDown, { className: `w-3 h-3 ${shouldAnimate ? "transition-transform" : ""} ${isOpen ? "rotate-180" : ""}`, style: { transitionDuration } })
+                              /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react20.ChevronDown, { className: `w-3 h-3 ${shouldAnimate ? "transition-transform" : ""} ${isOpen ? "rotate-180" : ""}`, style: { transitionDuration } })
                             ]
                           }
                         ),
-                        isOpen && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "absolute top-full left-1/2 -translate-x-1/2 w-[200px] h-2" }),
-                        isOpen && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: `
+                        isOpen && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "absolute top-full left-1/2 -translate-x-1/2 w-[200px] h-2" }),
+                        isOpen && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("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__ */ (0, import_jsx_runtime81.jsx)(
+                                                    `, style: { animationDuration: `${0.2 * motionFactor}s` }, children: link.children?.map((child) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                           NavLink,
                           {
                             href: child.href,
@@ -10508,7 +10543,7 @@ var Header2 = ({
                     link.label
                   );
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                   NavLink,
                   {
                     href: link.href,
@@ -10523,8 +10558,8 @@ var Header2 = ({
               })
             }
           ),
-          actions && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "hidden lg:flex items-center gap-4 z-10", children: actions }),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          actions && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "hidden lg:flex items-center gap-4 z-10", children: actions }),
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
             "button",
             {
               onClick: () => setIsMenuOpen(!isMenuOpen),
@@ -10543,13 +10578,13 @@ var Header2 = ({
               style: { transitionDuration },
               "aria-label": isMenuOpen ? "Close menu" : "Open menu",
               "aria-expanded": isMenuOpen,
-              children: isMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react20.X, { className: "w-6 h-6" }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react20.Menu, { className: "w-6 h-6" })
+              children: isMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react20.X, { className: "w-6 h-6" }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react20.Menu, { className: "w-6 h-6" })
             }
           )
         ] }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "div",
       {
         className: `
@@ -10559,13 +10594,13 @@ var Header2 = ({
                 `,
         style: { transitionDuration },
         "aria-hidden": !isMenuOpen,
-        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "absolute inset-0 bg-[var(--color-background)]", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex flex-col items-center justify-center h-full gap-8 px-4", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "absolute inset-0 bg-[var(--color-background)]", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("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__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "w-full max-w-xs", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "w-full max-w-xs", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                   "button",
                   {
                     onClick: () => setExpandedMobileSection(isExpanded ? null : link.label),
@@ -10589,7 +10624,7 @@ var Header2 = ({
                     children: link.label
                   }
                 ),
-                isExpanded && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "flex flex-col gap-3 mt-4", children: link.children?.map((child) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+                isExpanded && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "flex flex-col gap-3 mt-4", children: link.children?.map((child) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                   "a",
                   {
                     href: child.href,
@@ -10612,7 +10647,7 @@ var Header2 = ({
                 )) })
               ] }, link.label);
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
               "a",
               {
                 href: link.href,
@@ -10639,7 +10674,7 @@ var Header2 = ({
               link.label
             );
           }),
-          actions && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          actions && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
             "div",
             {
               className: "flex flex-col gap-4 mt-8 w-full max-w-xs",
@@ -10653,7 +10688,7 @@ var Header2 = ({
         ] }) })
       }
     ),
-    shouldAnimate && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("style", { children: `
+    shouldAnimate && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("style", { children: `
                     @keyframes fadeInUp {
                         from {
                             opacity: 0;
@@ -10669,7 +10704,7 @@ var Header2 = ({
 };
 
 // src/components/layout/PageLayout.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 function PageLayout({
   header,
   stickyHeader = false,
@@ -10692,9 +10727,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__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "min-h-screen flex flex-col w-full min-w-0", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "min-h-screen flex flex-col w-full min-w-0", children: [
     header,
-    breadcrumbs && showBreadcrumbsAtTop && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    breadcrumbs && showBreadcrumbsAtTop && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       "div",
       {
         className: `
@@ -10705,23 +10740,23 @@ function PageLayout({
             ${stickyHeaderSpacing}
           `,
         style: { zIndex: 45 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8 py-3`, children: breadcrumbs })
+        children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8 py-3`, children: breadcrumbs })
       }
     ),
-    (title || subtitle) && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: `${titleAreaTopSpacing} ${titleAreaBottomSpacing} ${!showBreadcrumbsAtTop ? stickyHeaderSpacing : ""} bg-[var(--color-background)]`, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8`, children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: titleBottomMargin, children: title }),
-      subtitle && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { children: subtitle })
+    (title || subtitle) && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: `${titleAreaTopSpacing} ${titleAreaBottomSpacing} ${!showBreadcrumbsAtTop ? stickyHeaderSpacing : ""} bg-[var(--color-background)]`, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8`, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: titleBottomMargin, children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { children: subtitle })
     ] }) }),
-    breadcrumbs && showBreadcrumbsBelowTitle && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: `${breadcrumbsAreaSpacing} bg-[var(--color-background)]`, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8`, children: breadcrumbs }) }),
+    breadcrumbs && showBreadcrumbsBelowTitle && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: `${breadcrumbsAreaSpacing} bg-[var(--color-background)]`, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8`, children: breadcrumbs }) }),
     secondaryNav,
     tertiaryNav,
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("main", { className: `flex-1 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8 py-12`, children }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("main", { className: `flex-1 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: `${contentMaxWidth} mx-auto px-4 sm:px-6 lg:px-8 py-12`, children }) }),
     footer
   ] });
 }
 
 // src/components/layout/PageTemplate.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 function PageTemplate({
   header,
   title,
@@ -10741,11 +10776,11 @@ function PageTemplate({
     narrow: "max-w-4xl"
     // 896px - for reading-focused pages
   }[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       PageLayout,
       {
-        header: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        header: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
           Header2,
           {
             logo: header.logo,
@@ -10757,10 +10792,10 @@ function PageTemplate({
         ),
         stickyHeader: header.sticky ?? true,
         breadcrumbsPosition: "below-title",
-        breadcrumbs: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Breadcrumbs, { items: breadcrumbs, variant: "subtle" }),
-        title: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Heading, { level: 1, children: title }),
-        subtitle: subtitle ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Text, { size: "lg", variant: "secondary", children: subtitle }) : void 0,
-        secondaryNav: secondaryNav ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        breadcrumbs: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Breadcrumbs, { items: breadcrumbs, variant: "subtle" }),
+        title: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Heading, { level: 1, children: title }),
+        subtitle: subtitle ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Text, { size: "lg", variant: "secondary", children: subtitle }) : void 0,
+        secondaryNav: secondaryNav ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
           SecondaryNav,
           {
             items: secondaryNav.items,
@@ -10775,19 +10810,19 @@ function PageTemplate({
         children
       }
     ),
-    showCustomizer && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(CustomizerPanel, {})
+    showCustomizer && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(CustomizerPanel, {})
   ] });
 }
 
 // src/components/layout/Resizable.tsx
 var import_lucide_react21 = require("lucide-react");
 var import_react_resizable_panels = require("react-resizable-panels");
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var ResizablePanelGroup = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     import_react_resizable_panels.Group,
     {
       className: cn(
@@ -10804,7 +10839,7 @@ var ResizableHandle = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     import_react_resizable_panels.Separator,
     {
       className: cn(
@@ -10812,29 +10847,29 @@ var ResizableHandle = ({
         className
       ),
       ...props,
-      children: withHandle && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react21.GripVertical, { className: "h-2.5 w-2.5" }) })
+      children: withHandle && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_lucide_react21.GripVertical, { className: "h-2.5 w-2.5" }) })
     }
   );
 };
 
 // src/components/layout/ScrollArea.tsx
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"));
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var ScrollArea = ({
   ref,
   className,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
   ScrollAreaPrimitive.Root,
   {
     ref,
     className: cn("relative overflow-hidden", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ScrollBar, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ScrollBar, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ScrollAreaPrimitive.Corner, {})
     ]
   }
 );
@@ -10843,7 +10878,7 @@ var ScrollBar = ({
   className,
   orientation = "vertical",
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
   ScrollAreaPrimitive.Scrollbar,
   {
     ref,
@@ -10855,20 +10890,20 @@ var ScrollBar = ({
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ScrollAreaPrimitive.Thumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ScrollAreaPrimitive.Thumb, { className: "relative flex-1 rounded-full bg-border" })
   }
 );
 
 // src/components/layout/Separator.tsx
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"));
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var Separator4 = ({
   ref,
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -10885,14 +10920,14 @@ var Separator4 = ({
 
 // src/components/layout/Sidebar.tsx
 var import_react_slot3 = require("@radix-ui/react-slot");
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var Sidebar = ({
   ref,
   className,
   children,
   isOpen = true,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
   "aside",
   {
     ref,
@@ -10902,7 +10937,7 @@ var Sidebar = ({
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "flex flex-col h-full", children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "flex flex-col h-full", children })
   }
 );
 var SidebarOverlay = ({
@@ -10913,7 +10948,7 @@ var SidebarOverlay = ({
   ...props
 }) => {
   if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     "div",
     {
       ref,
@@ -10930,7 +10965,7 @@ var SidebarHeader = ({
   ref,
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
   "div",
   {
     ref,
@@ -10942,7 +10977,7 @@ var SidebarContent = ({
   ref,
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
   "div",
   {
     ref,
@@ -10954,7 +10989,7 @@ var SidebarFooter = ({
   ref,
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
   "div",
   {
     ref,
@@ -10976,7 +11011,7 @@ var SidebarItem = ({
   ...props
 }) => {
   const Comp = asChild ? import_react_slot3.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
     Comp,
     {
       ref,
@@ -10989,7 +11024,7 @@ var SidebarItem = ({
       style: { paddingLeft: `${12 + depth * 16}px` },
       ...props,
       children: [
-        hasChildren && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        hasChildren && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
           "svg",
           {
             className: cn(
@@ -10999,7 +11034,7 @@ var SidebarItem = ({
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
               "path",
               {
                 strokeLinecap: "round",
@@ -11010,16 +11045,210 @@ var SidebarItem = ({
             )
           }
         ),
-        !hasChildren && depth > 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "w-4 flex-shrink-0" }),
-        showIcon && icon && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "flex-shrink-0", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "flex-1 text-left truncate", children })
+        !hasChildren && depth > 0 && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "w-4 flex-shrink-0" }),
+        showIcon && icon && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "flex-shrink-0", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "flex-1 text-left truncate", children })
       ]
     }
   );
 };
 
+// src/components/layout/AppSidebar.tsx
+var import_react19 = require("react");
+var import_lucide_react22 = require("lucide-react");
+var import_jsx_runtime89 = require("react/jsx-runtime");
+var STORAGE_KEY = "appsidebar:state";
+var APP_SIDEBAR_WIDTH = 280;
+var APP_SIDEBAR_WIDTH_COLLAPSED = 60;
+var AppSidebarContext = (0, import_react19.createContext)(null);
+var DEFAULT_CONTEXT = {
+  isOpen: true,
+  toggle: () => {
+  },
+  open: () => {
+  },
+  close: () => {
+  }
+};
+function useAppSidebar() {
+  return (0, import_react19.useContext)(AppSidebarContext) ?? DEFAULT_CONTEXT;
+}
+function AppSidebarProvider({ children, defaultOpen = true }) {
+  const [isOpen, setIsOpen] = (0, import_react19.useState)(defaultOpen);
+  (0, import_react19.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime89.jsx)(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__ */ (0, import_jsx_runtime89.jsx)(
+    "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__ */ (0, import_jsx_runtime89.jsxs)(
+    "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__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex items-center h-16 px-[10px] shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+            "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__ */ (0, import_jsx_runtime89.jsx)("span", { className: "w-8 h-8 shrink-0 flex items-center justify-center", children: logo }),
+                /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+                  "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__ */ (0, import_jsx_runtime89.jsx)(
+            "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__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react22.PanelLeftClose, { className: "w-4 h-4" })
+            }
+          )
+        ] }),
+        items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("nav", { className: "px-2 py-2 space-y-1 shrink-0", "aria-label": "Main navigation", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+          "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-3" : "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__ */ (0, import_jsx_runtime89.jsx)("span", { className: "shrink-0 flex items-center justify-center w-4 h-4", children: item.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+                "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__ */ (0, import_jsx_runtime89.jsx)(
+          "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__ */ (0, import_jsx_runtime89.jsx)(
+          "div",
+          {
+            className: cn(
+              "shrink-0 border-t border-foreground/8",
+              isOpen ? "px-4 py-4 space-y-3" : "px-2 py-3 flex justify-center"
+            ),
+            children: footer
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/components/layout/Stack.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var Stack = ({
   ref,
   children,
@@ -11055,7 +11284,7 @@ var Stack = ({
       evenly: "justify-evenly"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
     Component,
     {
       ref,
@@ -11067,7 +11296,7 @@ var Stack = ({
 };
 
 // src/components/layout/GlassSurface.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var TINT_COLORS = {
   0: "255, 255, 255",
   1: "227, 227, 227",
@@ -11108,7 +11337,7 @@ function GlassSurface({
     } : void 0,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { ref, className: classes, style: inlineStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { ref, className: classes, style: inlineStyles, children });
 }
 
 // src/lib/webgl/Renderer.ts
@@ -11297,8 +11526,8 @@ var Color = class {
 };
 
 // src/components/backgrounds/WarpBackground.tsx
-var import_react19 = require("react");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var vertexShader = `
 attribute vec2 uv;
 attribute vec2 position;
@@ -11485,12 +11714,12 @@ function WarpBackground({
   className = "",
   ...rest
 }) {
-  const ctnDom = (0, import_react19.useRef)(null);
-  const targetMousePos = (0, import_react19.useRef)({ x: 0.5, y: 0.5 });
-  const smoothMousePos = (0, import_react19.useRef)({ x: 0.5, y: 0.5 });
-  const targetMouseActive = (0, import_react19.useRef)(0);
-  const smoothMouseActive = (0, import_react19.useRef)(0);
-  (0, import_react19.useEffect)(() => {
+  const ctnDom = (0, import_react20.useRef)(null);
+  const targetMousePos = (0, import_react20.useRef)({ x: 0.5, y: 0.5 });
+  const smoothMousePos = (0, import_react20.useRef)({ x: 0.5, y: 0.5 });
+  const targetMouseActive = (0, import_react20.useRef)(0);
+  const smoothMouseActive = (0, import_react20.useRef)(0);
+  (0, import_react20.useEffect)(() => {
     if (!ctnDom.current) return;
     const ctn = ctnDom.current;
     const renderer = new Renderer({
@@ -11611,12 +11840,12 @@ function WarpBackground({
     autoCenterRepulsion,
     transparent
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { ref: ctnDom, className: `w-full h-full relative ${className}`, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { ref: ctnDom, className: `w-full h-full relative ${className}`, ...rest });
 }
 
 // src/components/backgrounds/FaultyTerminal.tsx
-var import_react20 = require("react");
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var vertexShader2 = `
 attribute vec2 position;
 attribute vec2 uv;
@@ -11852,18 +12081,18 @@ function FaultyTerminal({
   style,
   ...rest
 }) {
-  const containerRef = (0, import_react20.useRef)(null);
-  const programRef = (0, import_react20.useRef)(null);
-  const rendererRef = (0, import_react20.useRef)(null);
-  const mouseRef = (0, import_react20.useRef)({ x: 0.5, y: 0.5 });
-  const smoothMouseRef = (0, import_react20.useRef)({ x: 0.5, y: 0.5 });
-  const frozenTimeRef = (0, import_react20.useRef)(0);
-  const rafRef = (0, import_react20.useRef)(0);
-  const loadAnimationStartRef = (0, import_react20.useRef)(0);
-  const timeOffsetRef = (0, import_react20.useRef)(Math.random() * 100);
-  const tintVec = (0, import_react20.useMemo)(() => hexToRgb3(tint), [tint]);
-  const ditherValue = (0, import_react20.useMemo)(() => typeof dither === "boolean" ? dither ? 1 : 0 : dither, [dither]);
-  const handleMouseMove = (0, import_react20.useCallback)((e) => {
+  const containerRef = (0, import_react21.useRef)(null);
+  const programRef = (0, import_react21.useRef)(null);
+  const rendererRef = (0, import_react21.useRef)(null);
+  const mouseRef = (0, import_react21.useRef)({ x: 0.5, y: 0.5 });
+  const smoothMouseRef = (0, import_react21.useRef)({ x: 0.5, y: 0.5 });
+  const frozenTimeRef = (0, import_react21.useRef)(0);
+  const rafRef = (0, import_react21.useRef)(0);
+  const loadAnimationStartRef = (0, import_react21.useRef)(0);
+  const timeOffsetRef = (0, import_react21.useRef)(Math.random() * 100);
+  const tintVec = (0, import_react21.useMemo)(() => hexToRgb3(tint), [tint]);
+  const ditherValue = (0, import_react21.useMemo)(() => typeof dither === "boolean" ? dither ? 1 : 0 : dither, [dither]);
+  const handleMouseMove = (0, import_react21.useCallback)((e) => {
     const ctn = containerRef.current;
     if (!ctn) return;
     const rect = ctn.getBoundingClientRect();
@@ -11871,7 +12100,7 @@ function FaultyTerminal({
     const y = 1 - (e.clientY - rect.top) / rect.height;
     mouseRef.current = { x, y };
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const ctn = containerRef.current;
     if (!ctn) return;
     const renderer = new Renderer({ dpr });
@@ -11987,13 +12216,13 @@ function FaultyTerminal({
     brightness,
     handleMouseMove
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { ref: containerRef, className: `w-full h-full relative overflow-hidden ${className}`, style, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { ref: containerRef, className: `w-full h-full relative overflow-hidden ${className}`, style, ...rest });
 }
 
 // src/components/motion/AnimatedBeam.tsx
 var import_framer_motion4 = require("framer-motion");
-var import_react21 = require("react");
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var AnimatedBeam = ({
   className,
   containerRef,
@@ -12014,7 +12243,7 @@ var AnimatedBeam = ({
   endY
 }) => {
   const { shouldAnimate, scale } = useMotionPreference();
-  const id = (0, import_react21.useId)();
+  const id = (0, import_react22.useId)();
   const pathId = `beam-path-${id}`;
   const gradientId = `beam-gradient-${id}`;
   const maskId = `beam-mask-${id}`;
@@ -12029,7 +12258,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__ */ (0, import_jsx_runtime92.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
     "svg",
     {
       fill: "none",
@@ -12038,16 +12267,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__ */ (0, import_jsx_runtime92.jsxs)("defs", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("stop", { stopColor: gradientStartColor, stopOpacity: "0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("stop", { stopColor: gradientStartColor }),
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("stop", { offset: "32.5%", stopColor: gradientStopColor }),
-            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("stop", { offset: "100%", stopColor: gradientStopColor, stopOpacity: "0" })
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("stop", { stopColor: gradientStartColor, stopOpacity: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("stop", { stopColor: gradientStartColor }),
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("stop", { offset: "32.5%", stopColor: gradientStopColor }),
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("stop", { offset: "100%", stopColor: gradientStopColor, stopOpacity: "0" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("marker", { id: `arrow-${id}`, markerWidth: "5", markerHeight: "5", refX: "2.5", refY: "2.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("circle", { cx: "2.5", cy: "2.5", r: "2.5", fill: gradientStopColor }) })
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("marker", { id: `arrow-${id}`, markerWidth: "5", markerHeight: "5", refX: "2.5", refY: "2.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("circle", { cx: "2.5", cy: "2.5", r: "2.5", fill: gradientStopColor }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
           "path",
           {
             d: path,
@@ -12057,7 +12286,7 @@ var AnimatedBeam = ({
             strokeLinecap: "round"
           }
         ),
-        shouldAnimate && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        shouldAnimate && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
           "path",
           {
             d: path,
@@ -12065,7 +12294,7 @@ var AnimatedBeam = ({
             strokeWidth: pathWidth,
             strokeLinecap: "round",
             fill: "none",
-            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
               "animate",
               {
                 attributeName: "stroke-dasharray",
@@ -12076,7 +12305,7 @@ var AnimatedBeam = ({
             )
           }
         ),
-        shouldAnimate && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        shouldAnimate && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
           import_framer_motion4.motion.circle,
           {
             r: pathWidth * 1.5,
@@ -12093,7 +12322,7 @@ var AnimatedBeam = ({
             style: { offsetPath: `path('${path}')` }
           }
         ),
-        shouldAnimate && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        shouldAnimate && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
           import_framer_motion4.motion.circle,
           {
             r: pathWidth,
@@ -12116,8 +12345,8 @@ var AnimatedBeam = ({
 };
 
 // src/components/backgrounds/OrbBackground.tsx
-var import_react22 = require("react");
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime95 = require("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];
@@ -12143,7 +12372,7 @@ function OrbBackground({
   orbColor2,
   orbColor3
 }) {
-  const ctnDom = (0, import_react22.useRef)(null);
+  const ctnDom = (0, import_react23.useRef)(null);
   const vert = (
     /* glsl */
     `
@@ -12328,7 +12557,7 @@ function OrbBackground({
     }
   `
   );
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const container = ctnDom.current;
     if (!container) return;
     const bgColor = backgroundColor || getCSSVariable2("--color-background", "#000000");
@@ -12431,13 +12660,13 @@ function OrbBackground({
       gl.getExtension("WEBGL_lose_context")?.loseContext();
     };
   }, [hue, hoverIntensity, rotateOnHover, forceHoverState, backgroundColor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { ref: ctnDom, className: cn("w-full h-full pointer-events-auto", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { ref: ctnDom, className: cn("w-full h-full pointer-events-auto", className) });
 }
 
 // src/components/blocks/Hero.tsx
-var import_lucide_react22 = require("lucide-react");
+var import_lucide_react23 = require("lucide-react");
 var import_framer_motion5 = require("framer-motion");
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 function HeroBlock({
   className,
   badge,
@@ -12475,12 +12704,12 @@ function HeroBlock({
       } : { duration: 0 }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: cn("relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden w-full", className), children: [
-    background && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "absolute inset-0 z-0 select-none pointer-events-none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "absolute inset-0", children: background }),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[var(--color-background)] z-10" })
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: cn("relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden w-full", className), children: [
+    background && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "absolute inset-0 z-0 select-none pointer-events-none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "absolute inset-0", children: background }),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[var(--color-background)] z-10" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
       import_framer_motion5.motion.div,
       {
         className: "relative z-20 container max-w-4xl px-4 text-center space-y-8",
@@ -12489,8 +12718,8 @@ function HeroBlock({
         whileInView: "visible",
         viewport: { once: true },
         children: [
-          badge && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_framer_motion5.motion.div, { variants: itemVariants, className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Badge, { variant: "outline", className: "backdrop-blur-md bg-[var(--color-surface)]/30 border-[var(--color-border)] px-4 py-1.5", children: badge }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          badge && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_framer_motion5.motion.div, { variants: itemVariants, className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Badge, { variant: "outline", className: "backdrop-blur-md bg-[var(--color-surface)]/30 border-[var(--color-border)] px-4 py-1.5", children: badge }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             import_framer_motion5.motion.h1,
             {
               variants: itemVariants,
@@ -12498,14 +12727,14 @@ function HeroBlock({
               children: headline
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_framer_motion5.motion.div, { variants: itemVariants, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Text, { variant: "secondary", className: "text-xl md:text-2xl max-w-2xl mx-auto", children: description }) }),
-          children && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_framer_motion5.motion.div, { variants: itemVariants, className: "flex justify-center", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_framer_motion5.motion.div, { variants: itemVariants, className: "flex flex-col sm:flex-row gap-4 justify-center items-center pt-4", children: [
-            primaryCta && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(Button, { size: "lg", variant: primaryCta.variant || "default", onClick: primaryCta.onClick, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_framer_motion5.motion.div, { variants: itemVariants, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Text, { variant: "secondary", className: "text-xl md:text-2xl max-w-2xl mx-auto", children: description }) }),
+          children && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_framer_motion5.motion.div, { variants: itemVariants, className: "flex justify-center", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_framer_motion5.motion.div, { variants: itemVariants, className: "flex flex-col sm:flex-row gap-4 justify-center items-center pt-4", children: [
+            primaryCta && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(Button, { size: "lg", variant: primaryCta.variant || "default", onClick: primaryCta.onClick, children: [
               primaryCta.label,
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_lucide_react22.ArrowRight, { className: "w-4 h-4 ml-2" })
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react23.ArrowRight, { className: "w-4 h-4 ml-2" })
             ] }),
-            secondaryCta && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Button, { size: "lg", variant: "outline", className: "bg-[var(--color-surface)]/50 backdrop-blur-md", onClick: secondaryCta.onClick, children: secondaryCta.label })
+            secondaryCta && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Button, { size: "lg", variant: "outline", className: "bg-[var(--color-surface)]/50 backdrop-blur-md", onClick: secondaryCta.onClick, children: secondaryCta.label })
           ] })
         ]
       }
@@ -12514,8 +12743,8 @@ function HeroBlock({
 }
 
 // src/components/cursor/SplashCursor.tsx
-var import_react23 = require("react");
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 function pointerPrototype() {
   return {
     id: -1,
@@ -12548,8 +12777,8 @@ function SplashCursor({
   className,
   style
 }) {
-  const canvasRef = (0, import_react23.useRef)(null);
-  (0, import_react23.useEffect)(() => {
+  const canvasRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const pointers = [pointerPrototype()];
@@ -13595,7 +13824,7 @@ function SplashCursor({
     BACK_COLOR,
     TRANSPARENT
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
     "div",
     {
       style: {
@@ -13609,7 +13838,7 @@ function SplashCursor({
         ...style
       },
       className,
-      children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
         "canvas",
         {
           ref: canvasRef,
@@ -13626,8 +13855,8 @@ function SplashCursor({
 }
 
 // src/components/cursor/TargetCursor.tsx
-var import_react24 = require("react");
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 function TargetCursor({
   color = "255, 255, 255",
   outerSize = 40,
@@ -13638,18 +13867,18 @@ function TargetCursor({
   clickScale = 0.7,
   blendMode = true
 }) {
-  const cursorOuterRef = (0, import_react24.useRef)(null);
-  const cursorInnerRef = (0, import_react24.useRef)(null);
-  const requestRef = (0, import_react24.useRef)(null);
-  const previousTimeRef = (0, import_react24.useRef)(null);
-  const endX = (0, import_react24.useRef)(0);
-  const endY = (0, import_react24.useRef)(0);
-  const _x = (0, import_react24.useRef)(0);
-  const _y = (0, import_react24.useRef)(0);
-  const [isActive, setIsActive] = (0, import_react24.useState)(false);
-  const [isActiveClickable, setIsActiveClickable] = (0, import_react24.useState)(false);
-  const [isVisible, setIsVisible] = (0, import_react24.useState)(false);
-  (0, import_react24.useEffect)(() => {
+  const cursorOuterRef = (0, import_react25.useRef)(null);
+  const cursorInnerRef = (0, import_react25.useRef)(null);
+  const requestRef = (0, import_react25.useRef)(null);
+  const previousTimeRef = (0, import_react25.useRef)(null);
+  const endX = (0, import_react25.useRef)(0);
+  const endY = (0, import_react25.useRef)(0);
+  const _x = (0, import_react25.useRef)(0);
+  const _y = (0, import_react25.useRef)(0);
+  const [isActive, setIsActive] = (0, import_react25.useState)(false);
+  const [isActiveClickable, setIsActiveClickable] = (0, import_react25.useState)(false);
+  const [isVisible, setIsVisible] = (0, import_react25.useState)(false);
+  (0, import_react25.useEffect)(() => {
     const onMouseMove = (e) => {
       endX.current = e.clientX;
       endY.current = e.clientY;
@@ -13697,11 +13926,11 @@ function TargetCursor({
     previousTimeRef.current = time;
     requestRef.current = requestAnimationFrame(animateCursor);
   };
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     requestRef.current = requestAnimationFrame(animateCursor);
     return () => cancelAnimationFrame(requestRef.current);
   }, []);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (isVisible) {
       const style = document.createElement("style");
       style.innerHTML = `body, a, button, input, [role="button"] { cursor: none !important; }`;
@@ -13735,8 +13964,8 @@ function TargetCursor({
     }
   };
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_jsx_runtime98.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
       "div",
       {
         ref: cursorOuterRef,
@@ -13753,7 +13982,7 @@ function TargetCursor({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
       "div",
       {
         ref: cursorInnerRef,
@@ -13772,8 +14001,8 @@ function TargetCursor({
 }
 
 // src/providers/ThemeProvider.tsx
-var import_react25 = require("react");
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var themeTokens = {
   studio: studioTokens,
   terra: terraTokens,
@@ -13998,19 +14227,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] = (0, import_react25.useState)(false);
-  const [mounted, setMounted] = (0, import_react25.useState)(false);
-  (0, import_react25.useEffect)(() => {
+  const [isTransitioning, setIsTransitioning] = (0, import_react26.useState)(false);
+  const [mounted, setMounted] = (0, import_react26.useState)(false);
+  (0, import_react26.useEffect)(() => {
     if (!defaultTheme && !defaultMode) return;
     const persisted = typeof window !== "undefined" && localStorage.getItem("ecosystem-theme");
     if (persisted) return;
     if (defaultTheme) setTheme(defaultTheme);
     if (defaultMode) setMode(defaultMode);
   }, []);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     setMounted(true);
   }, []);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!mounted) return;
     setIsTransitioning(true);
     const root = document.documentElement;
@@ -14045,7 +14274,7 @@ function ThemeProvider({ children, defaultTheme, defaultMode }) {
     }, 400);
     return () => clearTimeout(timeout);
   }, [theme, mode, mounted, customPalette, motionIntensity]);
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_jsx_runtime97.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_jsx_runtime99.Fragment, { children });
 }
 
 // src/lib/animations.ts
@@ -14331,7 +14560,7 @@ function generateBreadcrumbs(hash, routeConfig, baseUrl = "#") {
 
 // src/component-registry.ts
 var BRAND = {
-  productName: "Sage Design Engine",
+  productName: "OpenCosmos UI",
   productNameShort: "Sage",
   themeNames: {
     organic: "Terra",
@@ -14343,7 +14572,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,
   /**
@@ -14702,6 +14931,7 @@ __export(data_display_exports, {
   DescriptionList: () => DescriptionList,
   GitHubIcon: () => GitHubIcon,
   Heading: () => Heading,
+  OpenCosmosIcon: () => OpenCosmosIcon,
   StatCard: () => StatCard,
   StatCardGroup: () => StatCardGroup,
   Table: () => Table,
@@ -14728,10 +14958,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,
@@ -14763,7 +14998,8 @@ __export(layout_exports, {
   SidebarHeader: () => SidebarHeader,
   SidebarItem: () => SidebarItem,
   SidebarOverlay: () => SidebarOverlay,
-  Stack: () => Stack
+  Stack: () => Stack,
+  useAppSidebar: () => useAppSidebar
 });
 
 // src/components/backgrounds/index.ts
@@ -14788,6 +15024,8 @@ __export(providers_exports, {
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  APP_SIDEBAR_WIDTH,
+  APP_SIDEBAR_WIDTH_COLLAPSED,
   Accordion,
   AccordionContent,
   AccordionItem,
@@ -14808,6 +15046,9 @@ __export(providers_exports, {
   AlertDialogTrigger,
   AlertTitle,
   AnimatedBeam,
+  AppSidebar,
+  AppSidebarInset,
+  AppSidebarProvider,
   AspectImage,
   AspectRatio,
   Avatar,
@@ -14977,6 +15218,7 @@ __export(providers_exports, {
   NavigationMenuTrigger,
   NavigationMenuViewport,
   NotificationCenter,
+  OpenCosmosIcon,
   OpenGraphCard,
   OrbBackground,
   Overlays,
@@ -15133,6 +15375,7 @@ __export(providers_exports, {
   transitions,
   treeNodeVariants,
   typographySystem,
+  useAppSidebar,
   useCustomizer,
   useForm,
   useFormField,