npm - @raxrai/stylelab-ui - Versions diffs - 0.3.1 → 0.4.0 - Mend

@raxrai/stylelab-ui 0.3.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.cjs CHANGED Viewed

@@ -61,6 +61,7 @@ __export(index_exports, {
   cn: () => cn,
   getNextListIndex: () => getNextListIndex,
   getThemeClass: () => getThemeClass,
+  mergeRefs: () => mergeRefs,
   useClickOutside: () => useClickOutside,
   useFocusTrap: () => useFocusTrap,
   useKeyboardNavigation: () => useKeyboardNavigation,
@@ -74,13 +75,13 @@ var import_react = require("react");
 // lib/theme-resolver.ts
 var themeMap = {
   minimal: {
-    button: { primary: "bg-zinc-900 text-white border border-zinc-200 transition-colors duration-200 hover:bg-zinc-800 hover:border-zinc-300 hover:shadow-md", secondary: "bg-transparent border border-zinc-200 text-zinc-900 hover:bg-zinc-100", ghost: "text-zinc-700 hover:bg-zinc-100" },
+    button: { primary: "bg-zinc-900 text-white border border-zinc-200 transition-colors duration-200 hover:bg-zinc-800 hover:border-zinc-300 hover:shadow-md", secondary: "bg-transparent border border-zinc-200 text-zinc-900 hover:bg-zinc-100", ghost: "text-inherit hover:bg-zinc-100" },
     input: { default: "border border-zinc-200 text-zinc-900 placeholder:text-zinc-400 focus:ring-1 focus:ring-zinc-400 focus:border-zinc-400" },
     toggle: { default: "bg-zinc-200 data-[state=on]:bg-zinc-900" },
     badge: { default: "bg-zinc-100 text-zinc-700 border border-zinc-200" },
     slider: { default: "bg-zinc-200 [&_.slider-thumb]:bg-zinc-900" },
     tabs: { default: "border-b border-zinc-200", triggerActive: "border-zinc-900 font-semibold", triggerInactive: "opacity-70" },
-    card: { default: "bg-white text-zinc-900 border border-zinc-200 shadow-none" },
+    card: { default: "bg-white border border-zinc-200 shadow-none" },
     bento: { default: "gap-4" },
     navbar: { default: "bg-white text-zinc-900 border-b border-zinc-200" },
     sidebar: { default: "bg-white text-zinc-900 border-r border-zinc-200" },
@@ -103,13 +104,13 @@ var themeMap = {
     timeline: { default: "border-l-2 border-zinc-200 text-zinc-900" }
   },
   night: {
-    button: { primary: "bg-white text-zinc-950 border border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition-colors duration-200 hover:bg-zinc-100 hover:shadow-md hover:border-white/20", secondary: "bg-zinc-900 border border-white/10 text-white hover:bg-zinc-800", ghost: "text-zinc-300 hover:bg-white/5" },
+    button: { primary: "bg-white text-zinc-950 border border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition-colors duration-200 hover:bg-zinc-100 hover:shadow-md hover:border-white/20", secondary: "bg-zinc-900 border border-white/10 text-white hover:bg-zinc-800", ghost: "text-inherit hover:bg-white/5" },
     input: { default: "bg-zinc-900 text-zinc-100 border border-white/10 placeholder:text-zinc-500 focus:ring-1 focus:ring-white/20 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
     toggle: { default: "bg-zinc-800 data-[state=on]:bg-white shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
     badge: { default: "bg-zinc-800 text-zinc-300 border border-white/10" },
     slider: { default: "bg-zinc-800 [&_.slider-thumb]:bg-white shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
     tabs: { default: "border-b border-white/10", triggerActive: "border-white font-semibold", triggerInactive: "opacity-70" },
-    card: { default: "bg-zinc-950 text-zinc-100 border border-white/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
+    card: { default: "bg-zinc-950 border border-white/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
     bento: { default: "gap-4" },
     navbar: { default: "bg-zinc-950 text-zinc-100 border-b border-white/10" },
     sidebar: { default: "bg-zinc-950 text-zinc-100 border-r border-white/10" },
@@ -132,13 +133,13 @@ var themeMap = {
     timeline: { default: "border-l-2 border-white/20 text-zinc-100" }
   },
   glass: {
-    button: { primary: "rounded-xl bg-white/70 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-soft transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/80 hover:border-white/80 hover:shadow-glass-button-hover active:translate-y-0 active:shadow-glass-soft", secondary: "rounded-xl bg-white/50 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-soft transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/60 hover:border-white/80 hover:shadow-glass-button-hover active:translate-y-0 active:shadow-glass-soft", ghost: "rounded-xl text-slate-700 backdrop-blur-xl transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/40 hover:shadow-glass-soft hover:border hover:border-white/60" },
+    button: { primary: "rounded-xl bg-white/70 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-soft transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/80 hover:border-white/80 hover:shadow-glass-button-hover active:translate-y-0 active:shadow-glass-soft", secondary: "rounded-xl bg-white/50 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-soft transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/60 hover:border-white/80 hover:shadow-glass-button-hover active:translate-y-0 active:shadow-glass-soft", ghost: "rounded-xl text-inherit backdrop-blur-xl transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/40 hover:shadow-glass-soft hover:border hover:border-white/60" },
     input: { default: "rounded-xl bg-white/50 backdrop-blur-2xl border border-slate-200/80 text-slate-800 shadow-glass-soft placeholder:text-slate-500 focus:ring-2 focus:ring-slate-300/50 focus:border-slate-300" },
     toggle: { default: "rounded-full bg-white/50 data-[state=on]:bg-white/80 backdrop-blur-2xl border border-white/60 shadow-glass-soft" },
     badge: { default: "rounded-xl bg-white/60 backdrop-blur-2xl text-slate-700 border border-white/60 shadow-glass-soft" },
     slider: { default: "rounded-full bg-white/50 [&_.slider-thumb]:bg-white [&_.slider-thumb]:border-slate-200 [&_.slider-thumb]:shadow-glass-soft backdrop-blur-2xl border border-white/60 shadow-glass-soft" },
     tabs: { default: "border-b border-slate-200/60", triggerActive: "border-slate-700 font-semibold", triggerInactive: "opacity-70" },
-    card: { default: "rounded-2xl bg-white/60 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-lift" },
+    card: { default: "rounded-2xl bg-white/60 backdrop-blur-2xl border border-white/60 shadow-glass-lift" },
     bento: { default: "gap-4" },
     navbar: { default: "rounded-none bg-white/50 backdrop-blur-2xl border-b border-white/60 text-slate-800 shadow-glass-soft" },
     sidebar: { default: "rounded-none bg-white/50 backdrop-blur-2xl border-r border-white/60 text-slate-800 shadow-glass-soft" },
@@ -161,13 +162,13 @@ var themeMap = {
     timeline: { default: "border-l-2 border-slate-200/60 text-slate-800" }
   },
   neubrutal: {
-    button: { primary: "rounded-none bg-[#FFD600] text-black border-4 border-black shadow-neubrutal hover:translate-x-1 hover:translate-y-1 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]", secondary: "rounded-none bg-[#FF5733] text-black border-4 border-black shadow-neubrutal hover:translate-x-1 hover:translate-y-1", ghost: "rounded-none border-4 border-transparent hover:border-black hover:bg-zinc-100 text-black" },
+    button: { primary: "rounded-none bg-[#FFD600] text-black border-4 border-black shadow-neubrutal hover:translate-x-1 hover:translate-y-1 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]", secondary: "rounded-none bg-[#FF5733] text-black border-4 border-black shadow-neubrutal hover:translate-x-1 hover:translate-y-1", ghost: "rounded-none text-inherit border-4 border-transparent hover:border-black hover:bg-zinc-100" },
     input: { default: "rounded-none border-4 border-black text-black placeholder:text-zinc-600 focus:ring-4 focus:ring-black/20 bg-white" },
     toggle: { default: "rounded-none border-4 border-black bg-white data-[state=on]:bg-[#FFD600] shadow-neubrutal" },
     badge: { default: "rounded-none bg-[#FFD600] text-black border-4 border-black" },
     slider: { default: "rounded-none border-4 border-black bg-white [&_.slider-thumb]:bg-[#FF5733] [&_.slider-thumb]:border-4 [&_.slider-thumb]:border-black" },
     tabs: { default: "border-b-4 border-black", triggerActive: "bg-[#FFD600] border-b-4 border-black font-bold -mb-[3px] pb-[5px] shadow-neubrutal", triggerInactive: "opacity-80" },
-    card: { default: "rounded-none bg-white text-black border-4 border-black shadow-neubrutal" },
+    card: { default: "rounded-none bg-white border-4 border-black shadow-neubrutal" },
     bento: { default: "gap-4" },
     navbar: { default: "rounded-none bg-[#FFD600] text-black border-b-4 border-black shadow-neubrutal" },
     sidebar: { default: "rounded-none bg-[#FFD600]/30 border-r-4 border-black shadow-neubrutal text-black" },
@@ -190,13 +191,13 @@ var themeMap = {
     timeline: { default: "border-l-4 border-black text-black" }
   },
   clay: {
-    button: { primary: "rounded-[40px] bg-rose-200 text-rose-900 border border-rose-300 shadow-clay-outer hover:shadow-[10px_10px_20px_rgba(0,0,0,0.08),inset_-8px_-8px_15px_rgba(0,0,0,0.2),inset_8px_8px_15px_rgba(255,255,255,0.4)]", secondary: "rounded-[40px] bg-sky-100 text-sky-900 shadow-clay-outer", ghost: "rounded-[40px] hover:bg-zinc-100 text-zinc-800" },
+    button: { primary: "rounded-[40px] bg-rose-200 text-rose-900 border border-rose-300 shadow-clay-outer hover:shadow-[10px_10px_20px_rgba(0,0,0,0.08),inset_-8px_-8px_15px_rgba(0,0,0,0.2),inset_8px_8px_15px_rgba(255,255,255,0.4)]", secondary: "rounded-[40px] bg-sky-100 text-sky-900 shadow-clay-outer", ghost: "rounded-[40px] text-inherit hover:bg-zinc-100" },
     input: { default: "rounded-[40px] border border-zinc-200 bg-zinc-50 text-zinc-900 placeholder:text-zinc-500 focus:ring-2 focus:ring-sky-300" },
     toggle: { default: "rounded-full bg-sky-100 data-[state=on]:bg-sky-300 data-[state=on]:shadow-clay-outer" },
     badge: { default: "rounded-[40px] bg-amber-100 text-amber-900" },
     slider: { default: "rounded-full bg-sky-100 [&_.slider-thumb]:rounded-full [&_.slider-thumb]:bg-rose-300" },
     tabs: { default: "border-b-2 border-zinc-200/80", triggerActive: "border-rose-600 font-semibold", triggerInactive: "opacity-70" },
-    card: { default: "rounded-[40px] bg-rose-50 text-zinc-900 shadow-clay-outer border border-rose-100" },
+    card: { default: "rounded-[40px] bg-rose-50 shadow-clay-outer border border-rose-100" },
     bento: { default: "gap-4" },
     navbar: { default: "rounded-b-3xl bg-white/80 text-zinc-900 backdrop-blur-md shadow-clay-outer border-b border-zinc-200" },
     sidebar: { default: "rounded-r-3xl bg-sky-50 text-zinc-900 shadow-clay-outer border-r border-sky-100" },
@@ -219,13 +220,13 @@ var themeMap = {
     timeline: { default: "border-l-2 border-rose-200 text-zinc-900" }
   },
   cyberpunk: {
-    button: { primary: "bg-transparent border-2 border-[#22d3ee] text-[#22d3ee] font-mono shadow-neon-glow hover:animate-glitch-anim", secondary: "bg-transparent border-2 border-[#ec4899] text-[#ec4899] font-mono hover:animate-glitch-anim", ghost: "text-[#22d3ee] font-mono hover:bg-[#22d3ee]/10" },
+    button: { primary: "bg-transparent border-2 border-[#22d3ee] text-[#22d3ee] font-mono shadow-neon-glow hover:animate-glitch-anim", secondary: "bg-transparent border-2 border-[#ec4899] text-[#ec4899] font-mono hover:animate-glitch-anim", ghost: "text-inherit font-mono hover:bg-[#22d3ee]/10" },
     input: { default: "bg-black border-2 border-[#22d3ee] text-[#22d3ee] placeholder:text-[#22d3ee]/50 font-mono focus:shadow-neon-glow" },
     toggle: { default: "bg-zinc-900 border-2 border-[#22d3ee] data-[state=on]:bg-[#22d3ee] data-[state=on]:shadow-neon-glow" },
     badge: { default: "bg-black border-2 border-[#ec4899] text-[#ec4899] font-mono" },
     slider: { default: "bg-zinc-900 [&_.slider-thumb]:border-2 [&_.slider-thumb]:border-[#22d3ee] [&_.slider-thumb]:bg-[#22d3ee] [&_.slider-thumb]:shadow-neon-glow" },
     tabs: { default: "border-b-2 border-[#22d3ee]", triggerActive: "text-[#22d3ee] border-[#22d3ee] font-bold shadow-neon-glow", triggerInactive: "opacity-50 text-[#22d3ee]/70" },
-    card: { default: "bg-black text-[#22d3ee] border-2 border-[#22d3ee] shadow-neon-glow font-mono" },
+    card: { default: "bg-black border-2 border-[#22d3ee] shadow-neon-glow font-mono" },
     bento: { default: "gap-4" },
     navbar: { default: "bg-black text-[#22d3ee] border-b-2 border-[#22d3ee] font-mono" },
     sidebar: { default: "bg-black text-[#22d3ee] border-r-2 border-[#22d3ee] font-mono" },
@@ -248,13 +249,13 @@ var themeMap = {
     timeline: { default: "border-l-2 border-[#22d3ee] text-[#22d3ee] font-mono" }
   },
   retro: {
-    button: { primary: "rounded-none bg-lime-500 text-black border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:bg-lime-400 active:shadow-[2px_2px_0_0_rgba(0,0,0,1)]", secondary: "rounded-none bg-white text-black border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:bg-zinc-100 active:shadow-[2px_2px_0_0_rgba(0,0,0,1)]", ghost: "rounded-none font-mono text-black border-2 border-transparent hover:border-black hover:bg-zinc-100" },
+    button: { primary: "rounded-none bg-lime-500 text-black border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:bg-lime-400 active:shadow-[2px_2px_0_0_rgba(0,0,0,1)]", secondary: "rounded-none bg-white text-black border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:bg-zinc-100 active:shadow-[2px_2px_0_0_rgba(0,0,0,1)]", ghost: "rounded-none font-mono text-inherit border-2 border-transparent hover:border-black hover:bg-zinc-100" },
     input: { default: "rounded-none border-2 border-black text-black placeholder:text-zinc-500 font-mono focus:ring-2 focus:ring-black focus:ring-offset-0 bg-white" },
     toggle: { default: "rounded-none border-2 border-black bg-zinc-200 data-[state=on]:bg-lime-500 shadow-[3px_3px_0_0_rgba(0,0,0,1)]" },
     badge: { default: "rounded-none bg-lime-500 text-black border-2 border-black font-mono" },
     slider: { default: "rounded-none border-2 border-black bg-zinc-200 [&_.slider-thumb]:rounded-none [&_.slider-thumb]:border-2 [&_.slider-thumb]:border-black [&_.slider-thumb]:bg-lime-500 [&_.slider-thumb]:shadow-[2px_2px_0_0_rgba(0,0,0,1)]" },
     tabs: { default: "border-b-2 border-black font-mono", triggerActive: "border-b-2 border-black font-bold bg-lime-500/20 text-black -mb-[2px] pb-[6px]", triggerInactive: "opacity-70 text-black" },
-    card: { default: "rounded-none bg-white text-black border-2 border-black shadow-[6px_6px_0_0_rgba(0,0,0,1)] font-mono" },
+    card: { default: "rounded-none bg-white border-2 border-black shadow-[6px_6px_0_0_rgba(0,0,0,1)] font-mono" },
     bento: { default: "gap-4" },
     navbar: { default: "rounded-none bg-zinc-100 text-black border-b-2 border-black font-mono shadow-[0_4px_0_0_rgba(0,0,0,1)]" },
     sidebar: { default: "rounded-none bg-zinc-100 text-black border-r-2 border-black font-mono" },
@@ -277,13 +278,13 @@ var themeMap = {
     timeline: { default: "border-l-2 border-black text-black font-mono" }
   },
   motion: {
-    button: { primary: "rounded-xl bg-indigo-500 text-white border-0 shadow-lg transition-all duration-300 ease-out hover:scale-105 hover:-translate-y-0.5 hover:shadow-xl hover:bg-indigo-600 active:scale-100 active:translate-y-0 focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2", secondary: "rounded-xl bg-white text-indigo-600 border-2 border-indigo-200 shadow-md transition-all duration-300 ease-out hover:scale-105 hover:-translate-y-0.5 hover:border-indigo-300 hover:shadow-lg active:scale-100 active:translate-y-0 focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2", ghost: "rounded-xl text-indigo-600 transition-all duration-300 ease-out hover:scale-105 hover:bg-indigo-50 hover:-translate-y-0.5 active:scale-100 active:translate-y-0" },
+    button: { primary: "rounded-xl bg-indigo-500 text-white border-0 shadow-lg transition-all duration-300 ease-out hover:scale-105 hover:-translate-y-0.5 hover:shadow-xl hover:bg-indigo-600 active:scale-100 active:translate-y-0 focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2", secondary: "rounded-xl bg-white text-indigo-600 border-2 border-indigo-200 shadow-md transition-all duration-300 ease-out hover:scale-105 hover:-translate-y-0.5 hover:border-indigo-300 hover:shadow-lg active:scale-100 active:translate-y-0 focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2", ghost: "rounded-xl text-inherit transition-all duration-300 ease-out hover:scale-105 hover:bg-indigo-50 hover:-translate-y-0.5 active:scale-100 active:translate-y-0" },
     input: { default: "rounded-xl border-2 border-indigo-200 bg-white text-zinc-900 transition-all duration-300 ease-out placeholder:text-zinc-400 focus:scale-[1.01] focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:ring-offset-0" },
     toggle: { default: "rounded-full bg-zinc-200 transition-all duration-300 ease-out data-[state=on]:bg-indigo-500 [&_.slider-thumb]:transition-transform [&_.slider-thumb]:duration-300 [&_.slider-thumb]:data-[state=on]:scale-110" },
     badge: { default: "rounded-full bg-indigo-100 text-indigo-700 border border-indigo-200 transition-all duration-300 ease-out hover:scale-110 hover:bg-indigo-200" },
     slider: { default: "rounded-full bg-zinc-200 transition-all duration-300 [&_.slider-thumb]:rounded-full [&_.slider-thumb]:bg-indigo-500 [&_.slider-thumb]:transition-transform [&_.slider-thumb]:duration-300 [&_.slider-thumb]:hover:scale-125 [&_.slider-thumb]:active:scale-110" },
     tabs: { default: "border-b-2 border-indigo-200 transition-colors duration-300", triggerActive: "border-indigo-500 font-semibold text-indigo-600 transition-all duration-300", triggerInactive: "opacity-70 transition-opacity duration-300 hover:opacity-100" },
-    card: { default: "rounded-2xl bg-white text-zinc-900 border-2 border-indigo-100 shadow-lg transition-all duration-300 ease-out hover:scale-[1.02] hover:shadow-xl hover:border-indigo-200 hover:-translate-y-1" },
+    card: { default: "rounded-2xl bg-white border-2 border-indigo-100 shadow-lg transition-all duration-300 ease-out hover:scale-[1.02] hover:shadow-xl hover:border-indigo-200 hover:-translate-y-1" },
     bento: { default: "gap-4" },
     navbar: { default: "rounded-none bg-white/95 backdrop-blur-md text-zinc-900 border-b-2 border-indigo-100 shadow-sm transition-all duration-300" },
     sidebar: { default: "rounded-none bg-white/95 backdrop-blur-md text-zinc-900 border-r-2 border-indigo-100 transition-all duration-300" },
@@ -341,12 +342,14 @@ function getStoredTheme(storageKey, defaultTheme) {
 function ThemeProvider({
   children,
   defaultTheme = "minimal",
-  storageKey = "stylelab-theme"
+  storageKey = "stylelab-theme",
+  persistTheme = true
 }) {
   const [theme, setThemeState] = (0, import_react.useState)(defaultTheme);
   (0, import_react.useEffect)(() => {
+    if (!persistTheme) return;
     setThemeState((prev) => getStoredTheme(storageKey, prev));
-  }, [storageKey]);
+  }, [storageKey, persistTheme]);
   (0, import_react.useEffect)(() => {
     if (typeof document !== "undefined") {
       try {
@@ -361,12 +364,12 @@ function ThemeProvider({
       if (typeof document !== "undefined") {
         try {
           document.documentElement.dataset.stylelabTheme = next;
-          localStorage.setItem(storageKey, next);
+          if (persistTheme) localStorage.setItem(storageKey, next);
         } catch (_) {
         }
       }
     },
-    [storageKey]
+    [storageKey, persistTheme]
   );
   const value = (0, import_react.useMemo)(
     () => ({ theme, setTheme }),
@@ -3580,6 +3583,14 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function mergeRefs(...refs) {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") ref(node);
+      else if (ref != null) ref.current = node;
+    });
+  };
+}
 // node_modules/lucide-react/dist/esm/createLucideIcon.js
 var import_react3 = require("react");
@@ -3789,14 +3800,14 @@ function AccordionPanel({
     )
   ] });
 }
-function Accordion({
+var Accordion = (0, import_react4.forwardRef)(function Accordion2({
   items,
   allowMultiple = false,
   defaultOpenIds,
   className,
   style,
   theme: themeProp
-}) {
+}, ref) {
   const [open, setOpen] = (0, import_react4.useState)(
     () => new Set(defaultOpenIds ?? [])
   );
@@ -3817,7 +3828,7 @@ function Accordion({
     },
     [allowMultiple]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn(themeClass, className), style, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn(themeClass, className), style, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     AccordionPanel,
     {
       item,
@@ -3827,7 +3838,7 @@ function Accordion({
     },
     item.id
   )) });
-}
+});
 // components/Alert.tsx
 var import_react5 = require("react");
@@ -4072,17 +4083,15 @@ var Badge = (0, import_react7.forwardRef)(function Badge2({
 });
 // components/BentoGrid.tsx
+var import_react8 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function BentoGrid({
-  children,
-  className,
-  style
-}) {
+var BentoGrid = (0, import_react8.forwardRef)(function BentoGrid2({ children, className, style }, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "bento", "default");
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
+      ref,
       className: cn(
         "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
         themeClass,
@@ -4092,9 +4101,10 @@ function BentoGrid({
       children
     }
   );
-}
+});
 // components/Breadcrumbs.tsx
+var import_react9 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var defaultSeparators = {
   minimal: "/",
@@ -4106,24 +4116,19 @@ var defaultSeparators = {
   retro: ">",
   motion: "\u203A"
 };
-function Breadcrumbs({
-  items,
-  separator,
-  className,
-  theme: themeProp
-}) {
+var Breadcrumbs = (0, import_react9.forwardRef)(function Breadcrumbs2({ items, separator, className, style, theme: themeProp }, ref) {
   const { theme: contextTheme } = useTheme();
   const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "breadcrumbs", "default");
   const sep = separator ?? defaultSeparators[theme] ?? "/";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("nav", { "aria-label": "Breadcrumb", className: cn("flex flex-wrap items-center gap-1.5 text-sm", themeClass, className), children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("nav", { ref, "aria-label": "Breadcrumb", className: cn("flex flex-wrap items-center gap-1.5 text-sm", themeClass, className), style, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
     i > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-sep": true, className: "shrink-0 opacity-70", "aria-hidden": true, children: sep }),
     item.href != null ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: item.href, className: "hover:underline", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium", "aria-current": i === items.length - 1 ? "page" : void 0, children: item.label })
   ] }, i)) });
-}
+});
 // components/Button.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var buttonVariants = cva(
   "inline-flex items-center justify-center font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none",
@@ -4204,10 +4209,10 @@ function ButtonInner(props, ref) {
     }
   );
 }
-var Button = (0, import_react8.forwardRef)(ButtonInner);
+var Button = (0, import_react10.forwardRef)(ButtonInner);
 // components/Calendar.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function getDaysInMonth(year, month) {
   return new Date(year, month + 1, 0).getDate();
@@ -4238,16 +4243,17 @@ var MONTHS = [
   "November",
   "December"
 ];
-function Calendar({
+var Calendar = (0, import_react11.forwardRef)(function Calendar2({
   value: controlledValue,
   defaultValue,
   onSelect,
   min,
   max,
   className,
+  style,
   theme: themeProp
-}) {
-  const [uncontrolled, setUncontrolled] = (0, import_react9.useState)(
+}, ref) {
+  const [uncontrolled, setUncontrolled] = (0, import_react11.useState)(
     () => defaultValue ?? null
   );
   const isControlled = controlledValue !== void 0;
@@ -4255,11 +4261,11 @@ function Calendar({
   const { theme: contextTheme } = useTheme();
   const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "calendar", "default");
-  const [view2, setView] = (0, import_react9.useState)(() => {
+  const [view2, setView] = (0, import_react11.useState)(() => {
     const d = value ?? /* @__PURE__ */ new Date();
     return { year: d.getFullYear(), month: d.getMonth() };
   });
-  const grid = (0, import_react9.useMemo)(
+  const grid = (0, import_react11.useMemo)(
     () => buildMonthGrid(view2.year, view2.month),
     [view2.year, view2.month]
   );
@@ -4294,7 +4300,9 @@ function Calendar({
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
+      ref,
       className: cn("inline-block max-w-full min-w-0 border p-3 sm:p-4 rounded-xl", themeClass, className),
+      style,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -4347,10 +4355,10 @@ function Calendar({
       ]
     }
   );
-}
+});
 // components/Card.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var cardVariants = cva("rounded-xl", {
   variants: {
@@ -4369,7 +4377,7 @@ var cardVariants = cva("rounded-xl", {
     isHoverable: false
   }
 });
-var Card = (0, import_react10.forwardRef)(function Card2({
+var Card = (0, import_react12.forwardRef)(function Card2({
   header,
   footer,
   padding = "md",
@@ -4390,8 +4398,8 @@ var Card = (0, import_react10.forwardRef)(function Card2({
       className: cn(
         cardVariants({ padding, isHoverable }),
         themeClass,
-        className,
-        classNames.root
+        classNames.root,
+        className
       ),
       ...props,
       children: [
@@ -4427,9 +4435,160 @@ var Card = (0, import_react10.forwardRef)(function Card2({
   );
 });
-// components/DashboardShell.tsx
-var import_react11 = require("react");
+// components/CommandPalette.tsx
+var import_react13 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var CommandPalette = (0, import_react13.forwardRef)(function CommandPalette2({
+  open,
+  onClose,
+  commands,
+  placeholder = "Type a command...",
+  className,
+  style,
+  theme: themeProp
+}, ref) {
+  const [query, setQuery] = (0, import_react13.useState)("");
+  const [selected, setSelected] = (0, import_react13.useState)(0);
+  const listRef = (0, import_react13.useRef)(null);
+  const { theme: contextTheme } = useTheme();
+  const theme = themeProp ?? contextTheme;
+  const themeClass = getThemeClass(theme, "commandPalette", "default");
+  const filtered = (0, import_react13.useMemo)(() => {
+    if (!query.trim()) return commands;
+    const q = query.toLowerCase();
+    return commands.filter((c) => c.label.toLowerCase().includes(q));
+  }, [commands, query]);
+  const safeSelected = Math.min(selected, Math.max(0, filtered.length - 1));
+  (0, import_react13.useEffect)(() => {
+    if (open) {
+      setQuery("");
+      setSelected(0);
+    }
+  }, [open]);
+  (0, import_react13.useEffect)(() => {
+    setSelected((s) => Math.min(s, Math.max(0, filtered.length - 1)));
+  }, [filtered.length]);
+  const runSelected = (0, import_react13.useCallback)(() => {
+    const item = filtered[safeSelected];
+    if (item) {
+      item.onSelect();
+      onClose();
+    }
+  }, [filtered, safeSelected, onClose]);
+  (0, import_react13.useEffect)(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelected((s) => (s + 1) % Math.max(1, filtered.length));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelected(
+          (s) => (s - 1 + filtered.length) % Math.max(1, filtered.length)
+        );
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        runSelected();
+      }
+    };
+    document.addEventListener("keydown", handler, true);
+    return () => document.removeEventListener("keydown", handler, true);
+  }, [open, onClose, filtered.length, runSelected]);
+  (0, import_react13.useEffect)(() => {
+    const el = listRef.current;
+    if (!el) return;
+    const item = el.querySelector(`[data-index="${safeSelected}"]`);
+    if (item && typeof item.scrollIntoView === "function") {
+      item.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [safeSelected]);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      ref,
+      className: "fixed inset-0 z-50 flex items-start justify-center pt-[20vh] p-4",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Command palette",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+            onClick: onClose,
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "div",
+          {
+            className: cn("relative z-10 w-full max-w-[calc(100vw-2rem)] sm:max-w-xl overflow-hidden rounded-xl mx-2 sm:mx-0", themeClass, className),
+            style,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2 border-b border-inherit px-3 py-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Search, { className: "size-4 shrink-0 opacity-60", "aria-hidden": true }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    value: query,
+                    onChange: (e) => setQuery(e.target.value),
+                    placeholder,
+                    className: "flex-1 bg-transparent outline-none placeholder:opacity-60",
+                    autoFocus: true,
+                    "aria-autocomplete": "list",
+                    "aria-controls": "command-palette-list",
+                    "aria-expanded": "true"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("kbd", { className: "rounded border border-inherit px-1.5 py-0.5 text-xs opacity-60", children: "ESC" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "ul",
+                {
+                  ref: listRef,
+                  id: "command-palette-list",
+                  role: "listbox",
+                  className: "max-h-72 overflow-auto py-2",
+                  children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: "px-4 py-3 text-sm opacity-60", children: "No results." }) : filtered.map((cmd, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { role: "option", "aria-selected": i === safeSelected, "data-index": i, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        cmd.onSelect();
+                        onClose();
+                      },
+                      onMouseEnter: () => setSelected(i),
+                      className: `flex w-full items-center justify-between px-4 py-2 text-left text-sm ${i === safeSelected ? "bg-current/10" : ""}`,
+                      children: [
+                        cmd.label,
+                        cmd.shortcut ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("kbd", { className: "rounded border border-inherit px-1.5 py-0.5 text-xs opacity-60", children: cmd.shortcut }) : null
+                      ]
+                    }
+                  ) }, cmd.id))
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+// components/DashboardShell.tsx
+var import_react14 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var SHELL_BG_BY_THEME = {
   minimal: "bg-gradient-to-br from-slate-50 via-zinc-50 to-slate-100",
   night: "bg-zinc-950 text-zinc-100",
@@ -4461,7 +4620,7 @@ function mobileNavLinkStateClasses(theme, active) {
   }
   return active ? "bg-black/5 text-zinc-900" : "text-zinc-600 hover:bg-black/5 hover:text-zinc-900";
 }
-function DashboardShell({
+var DashboardShell = (0, import_react14.forwardRef)(function DashboardShell2({
   children,
   navItems,
   adminNavItems,
@@ -4470,19 +4629,20 @@ function DashboardShell({
   userRole,
   onLogout,
   logo,
-  className
-}) {
-  const [mobileOpen, setMobileOpen] = (0, import_react11.useState)(false);
+  className,
+  style
+}, ref) {
+  const [mobileOpen, setMobileOpen] = (0, import_react14.useState)(false);
   const isAdmin = userRole === "ADMIN";
   const { theme } = useTheme();
   const shellBg = SHELL_BG_BY_THEME[theme];
   const isDarkHeader = darkHeaderThemes.includes(theme);
   const isActive = (href) => currentPath ? currentPath === href || currentPath.startsWith(href) : false;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("min-h-screen", shellBg, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("header", { className: cn("sticky top-0 z-40", headerClasses(theme)), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className: cn("min-h-screen", shellBg, className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: cn("sticky top-0 z-40", headerClasses(theme)), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "button",
             {
               type: "button",
@@ -4493,10 +4653,10 @@ function DashboardShell({
               ),
               "aria-label": "Toggle navigation",
               "aria-expanded": mobileOpen,
-              children: mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-lg leading-none", children: "\xD7" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xl leading-none", children: "\u2630" })
+              children: mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-lg leading-none", children: "\xD7" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xl leading-none", children: "\u2630" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center gap-2", children: logo ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center gap-2", children: logo ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "span",
             {
               className: cn(
@@ -4506,8 +4666,8 @@ function DashboardShell({
               children: "Dashboard"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("nav", { className: "ml-6 hidden items-center gap-1 text-sm sm:flex", children: [
-            navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("nav", { className: "ml-6 hidden items-center gap-1 text-sm sm:flex", children: [
+            navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "a",
               {
                 href: item.href,
@@ -4516,8 +4676,8 @@ function DashboardShell({
               },
               item.href
             )),
-            isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "span",
                 {
                   className: cn(
@@ -4526,7 +4686,7 @@ function DashboardShell({
                   )
                 }
               ),
-              adminNavItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              adminNavItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "a",
                 {
                   href: item.href,
@@ -4541,8 +4701,8 @@ function DashboardShell({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
-          userEmail && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
+          userEmail && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "span",
             {
               className: cn(
@@ -4552,7 +4712,7 @@ function DashboardShell({
               children: userEmail
             }
           ),
-          onLogout && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          onLogout && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "button",
             {
               type: "button",
@@ -4566,8 +4726,8 @@ function DashboardShell({
           )
         ] })
       ] }),
-      mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: mobilePanelClasses(theme), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-1", children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: mobilePanelClasses(theme), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-1", children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "a",
           {
             href: item.href,
@@ -4579,8 +4739,8 @@ function DashboardShell({
           },
           item.href
         )) }),
-        isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "div",
             {
               className: cn(
@@ -4589,7 +4749,7 @@ function DashboardShell({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-1", children: adminNavItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-1", children: adminNavItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "a",
             {
               href: item.href,
@@ -4602,181 +4762,75 @@ function DashboardShell({
             item.href
           )) })
         ] }),
-        userEmail && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        userEmail && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             className: cn(
               "mt-3 border-t pt-3 text-xs",
               isDarkHeader ? "border-zinc-700 text-zinc-400" : "border-zinc-200 text-zinc-500"
-            ),
-            children: userEmail
-          }
-        ),
-        onLogout && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: onLogout,
-            className: cn(
-              "mt-2 w-full rounded-lg px-4 py-2.5 text-left text-sm font-medium transition-colors",
-              mobileNavLinkStateClasses(theme, false)
-            ),
-            children: "Logout"
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("main", { className: "mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8", children })
-  ] });
-}
-// components/CommandPalette.tsx
-var import_react12 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function CommandPalette({
-  open,
-  onClose,
-  commands,
-  placeholder = "Type a command...",
-  theme: themeProp
-}) {
-  const [query, setQuery] = (0, import_react12.useState)("");
-  const [selected, setSelected] = (0, import_react12.useState)(0);
-  const listRef = (0, import_react12.useRef)(null);
-  const { theme: contextTheme } = useTheme();
-  const theme = themeProp ?? contextTheme;
-  const themeClass = getThemeClass(theme, "commandPalette", "default");
-  const filtered = (0, import_react12.useMemo)(() => {
-    if (!query.trim()) return commands;
-    const q = query.toLowerCase();
-    return commands.filter((c) => c.label.toLowerCase().includes(q));
-  }, [commands, query]);
-  const safeSelected = Math.min(selected, Math.max(0, filtered.length - 1));
-  (0, import_react12.useEffect)(() => {
-    if (open) {
-      setQuery("");
-      setSelected(0);
-    }
-  }, [open]);
-  (0, import_react12.useEffect)(() => {
-    setSelected((s) => Math.min(s, Math.max(0, filtered.length - 1)));
-  }, [filtered.length]);
-  const runSelected = (0, import_react12.useCallback)(() => {
-    const item = filtered[safeSelected];
-    if (item) {
-      item.onSelect();
-      onClose();
-    }
-  }, [filtered, safeSelected, onClose]);
-  (0, import_react12.useEffect)(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onClose();
-        return;
-      }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setSelected((s) => (s + 1) % Math.max(1, filtered.length));
-        return;
-      }
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        setSelected(
-          (s) => (s - 1 + filtered.length) % Math.max(1, filtered.length)
-        );
-        return;
-      }
-      if (e.key === "Enter") {
-        e.preventDefault();
-        runSelected();
-      }
-    };
-    document.addEventListener("keydown", handler, true);
-    return () => document.removeEventListener("keydown", handler, true);
-  }, [open, onClose, filtered.length, runSelected]);
-  (0, import_react12.useEffect)(() => {
-    const el = listRef.current;
-    if (!el) return;
-    const item = el.querySelector(`[data-index="${safeSelected}"]`);
-    item?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }, [safeSelected]);
-  if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex items-start justify-center pt-[20vh] p-4",
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Command palette",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "div",
-          {
-            className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
-            onClick: onClose,
-            "aria-hidden": true
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          "div",
-          {
-            className: `relative z-10 w-full max-w-[calc(100vw-2rem)] sm:max-w-xl overflow-hidden rounded-xl mx-2 sm:mx-0 ${themeClass}`,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 border-b border-inherit px-3 py-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Search, { className: "size-4 shrink-0 opacity-60", "aria-hidden": true }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  "input",
-                  {
-                    type: "text",
-                    value: query,
-                    onChange: (e) => setQuery(e.target.value),
-                    placeholder,
-                    className: "flex-1 bg-transparent outline-none placeholder:opacity-60",
-                    autoFocus: true,
-                    "aria-autocomplete": "list",
-                    "aria-controls": "command-palette-list",
-                    "aria-expanded": "true"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("kbd", { className: "rounded border border-inherit px-1.5 py-0.5 text-xs opacity-60", children: "ESC" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                "ul",
-                {
-                  ref: listRef,
-                  id: "command-palette-list",
-                  role: "listbox",
-                  className: "max-h-72 overflow-auto py-2",
-                  children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "px-4 py-3 text-sm opacity-60", children: "No results." }) : filtered.map((cmd, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { role: "option", "data-index": i, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        cmd.onSelect();
-                        onClose();
-                      },
-                      onMouseEnter: () => setSelected(i),
-                      className: `flex w-full items-center justify-between px-4 py-2 text-left text-sm ${i === safeSelected ? "bg-current/10" : ""}`,
-                      children: [
-                        cmd.label,
-                        cmd.shortcut ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("kbd", { className: "rounded border border-inherit px-1.5 py-0.5 text-xs opacity-60", children: cmd.shortcut }) : null
-                      ]
-                    }
-                  ) }, cmd.id))
-                }
-              )
-            ]
+            ),
+            children: userEmail
+          }
+        ),
+        onLogout && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onLogout,
+            className: cn(
+              "mt-2 w-full rounded-lg px-4 py-2.5 text-left text-sm font-medium transition-colors",
+              mobileNavLinkStateClasses(theme, false)
+            ),
+            children: "Logout"
           }
         )
-      ]
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("main", { className: "mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8", children })
+  ] });
+});
+// components/DataTable.tsx
+var import_react15 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function DataTableInner({ columns, data, getRowKey, className, style }, ref) {
+  const { theme } = useTheme();
+  const themeClass = getThemeClass(theme, "dataTable", "default");
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "overflow-x-auto rounded-lg -mx-1 px-1 sm:mx-0 sm:px-0",
+        themeClass,
+        className
+      ),
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "w-full min-w-[480px] text-left text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "border-b border-inherit", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "th",
+          {
+            className: "px-4 py-3 font-medium",
+            children: col.header
+          },
+          String(col.key)
+        )) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: data.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "tr",
+          {
+            className: "border-b border-inherit last:border-0",
+            children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { className: "px-4 py-3", children: col.render ? col.render(row) : String(row[col.key] ?? "") }, String(col.key)))
+          },
+          getRowKey ? getRowKey(row, i) : i
+        )) })
+      ] })
     }
   );
 }
+var DataTable = (0, import_react15.forwardRef)(DataTableInner);
 // components/DocumentAccordion.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function DocumentAccordion({
   title,
   content,
@@ -4791,15 +4845,15 @@ function DocumentAccordion({
     {
       id: "document",
       title,
-      content: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      content: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "div",
         {
           className: cn(
             "rounded-xl border p-0 shadow-sm backdrop-blur-md",
             theme === "night" || theme === "cyberpunk" ? "border-white/10 bg-zinc-950/80" : "border-black/5 bg-white/60"
           ),
-          children: pdfUrl ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex justify-end px-4 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          children: pdfUrl ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex justify-end px-4 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
               "a",
               {
                 href: pdfUrl,
@@ -4810,19 +4864,19 @@ function DocumentAccordion({
                   theme === "night" || theme === "cyberpunk" ? "border-white/20 bg-zinc-900/80 text-sky-300 hover:bg-zinc-800/80" : "border-black/5 bg-white/70 text-blue-700 hover:bg-white"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Open PDF" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": true, children: "\u2197" })
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Open PDF" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "aria-hidden": true, children: "\u2197" })
                 ]
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "div",
               {
                 className: cn(
                   "h-[60vh] w-full border-t",
                   theme === "night" || theme === "cyberpunk" ? "border-white/10" : "border-black/5"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   "iframe",
                   {
                     src: `https://docs.google.com/viewer?url=${encodeURIComponent(
@@ -4834,7 +4888,7 @@ function DocumentAccordion({
                 )
               }
             )
-          ] }) : content ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          ] }) : content ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "div",
             {
               className: cn(
@@ -4848,7 +4902,7 @@ function DocumentAccordion({
       )
     }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Accordion,
     {
       items,
@@ -4860,50 +4914,8 @@ function DocumentAccordion({
   );
 }
-// components/DataTable.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function DataTable({
-  columns,
-  data,
-  getRowKey,
-  className,
-  style
-}) {
-  const { theme } = useTheme();
-  const themeClass = getThemeClass(theme, "dataTable", "default");
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "div",
-    {
-      className: cn(
-        "overflow-x-auto rounded-lg -mx-1 px-1 sm:mx-0 sm:px-0",
-        themeClass,
-        className
-      ),
-      style,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "w-full min-w-[480px] text-left text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tr", { className: "border-b border-inherit", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "th",
-          {
-            className: "px-4 py-3 font-medium",
-            children: col.header
-          },
-          String(col.key)
-        )) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: data.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "tr",
-          {
-            className: "border-b border-inherit last:border-0",
-            children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: "px-4 py-3", children: col.render ? col.render(row) : String(row[col.key] ?? "") }, String(col.key)))
-          },
-          getRowKey ? getRowKey(row, i) : i
-        )) })
-      ] })
-    }
-  );
-}
 // src/hooks/useKeyboardNavigation.ts
-var import_react13 = require("react");
+var import_react16 = require("react");
 function useKeyboardNavigation(options) {
   const {
     onEscape,
@@ -4913,7 +4925,7 @@ function useKeyboardNavigation(options) {
     onArrowRight,
     enabled = true
   } = options;
-  const handleKeyDown = (0, import_react13.useCallback)(
+  const handleKeyDown = (0, import_react16.useCallback)(
     (e) => {
       if (!enabled) return;
       if (e.key === "Escape") {
@@ -4938,7 +4950,7 @@ function useKeyboardNavigation(options) {
     },
     [enabled, onEscape, onArrowDown, onArrowUp, onArrowLeft, onArrowRight]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!enabled) return;
     document.addEventListener("keydown", handleKeyDown, true);
     return () => document.removeEventListener("keydown", handleKeyDown, true);
@@ -4953,10 +4965,10 @@ function getNextListIndex(current, direction, length) {
 }
 // src/hooks/useClickOutside.ts
-var import_react14 = require("react");
+var import_react17 = require("react");
 function useClickOutside(ref, handler, options) {
   const enabled = options?.enabled !== false;
-  const handle = (0, import_react14.useCallback)(
+  const handle = (0, import_react17.useCallback)(
     (e) => {
       const target = e.target;
       const refs = Array.isArray(ref) ? ref : [ref];
@@ -4967,7 +4979,7 @@ function useClickOutside(ref, handler, options) {
     },
     [ref, handler]
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!enabled) return;
     document.addEventListener("mousedown", handle);
     document.addEventListener("touchstart", handle);
@@ -4979,14 +4991,14 @@ function useClickOutside(ref, handler, options) {
 }
 // components/Dropdown.tsx
-var import_react15 = require("react");
+var import_react18 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function dropdownItemHighlightClass(theme) {
   const darkThemes = ["night", "cyberpunk"];
   return darkThemes.includes(theme) ? "hover:bg-white/10 focus:bg-white/10" : "hover:bg-black/5 focus:bg-black/5";
 }
-function Dropdown({
+var Dropdown = (0, import_react18.forwardRef)(function Dropdown2({
   trigger: triggerProp,
   placeholder = "Select\u2026",
   items,
@@ -4998,21 +5010,22 @@ function Dropdown({
   style,
   theme: themeProp,
   classNames = {}
-}) {
-  const [open, setOpen] = (0, import_react15.useState)(false);
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react15.useState)(defaultValue ?? "");
+}, ref) {
+  const [open, setOpen] = (0, import_react18.useState)(false);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react18.useState)(defaultValue ?? "");
   const isControlled = controlledValue !== void 0;
   const displayValue = isControlled ? controlledValue : uncontrolledValue;
-  const [highlightedIndex, setHighlightedIndex] = (0, import_react15.useState)(-1);
-  const [popoverStyle, setPopoverStyle] = (0, import_react15.useState)({});
-  const listRef = (0, import_react15.useRef)(null);
-  const containerRef = (0, import_react15.useRef)(null);
-  const triggerRef = (0, import_react15.useRef)(null);
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react18.useState)(-1);
+  const [popoverStyle, setPopoverStyle] = (0, import_react18.useState)({});
+  const listRef = (0, import_react18.useRef)(null);
+  const containerRef = (0, import_react18.useRef)(null);
+  const triggerRef = (0, import_react18.useRef)(null);
+  const mergedContainerRef = mergeRefs(ref, containerRef);
   const { theme: contextTheme } = useTheme();
   const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "card", "default");
   const itemHighlightClass = dropdownItemHighlightClass(theme);
-  const updatePosition = (0, import_react15.useCallback)(() => {
+  const updatePosition = (0, import_react18.useCallback)(() => {
     const triggerEl = triggerRef.current;
     if (!triggerEl) return;
     const rect = triggerEl.getBoundingClientRect();
@@ -5028,15 +5041,15 @@ function Dropdown({
       zIndex: 9999
     });
   }, []);
-  (0, import_react15.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     if (open && !disabled) {
       updatePosition();
     }
   }, [open, disabled, updatePosition, items.length]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (disabled && open) setOpen(false);
   }, [disabled, open]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!open) return;
     const onScrollOrResize = () => updatePosition();
     window.addEventListener("scroll", onScrollOrResize, true);
@@ -5048,17 +5061,17 @@ function Dropdown({
   }, [open, updatePosition]);
   useClickOutside(
     [containerRef, listRef],
-    (0, import_react15.useCallback)(() => setOpen(false), []),
+    (0, import_react18.useCallback)(() => setOpen(false), []),
     { enabled: open }
   );
-  const setValue = (0, import_react15.useCallback)(
+  const setValue = (0, import_react18.useCallback)(
     (v) => {
       if (!isControlled) setUncontrolledValue(v);
       onValueChange?.(v);
     },
     [isControlled, onValueChange]
   );
-  const selectIndex = (0, import_react15.useCallback)(
+  const selectIndex = (0, import_react18.useCallback)(
     (index) => {
       const item = items[index];
       if (item?.disabled) return;
@@ -5068,7 +5081,7 @@ function Dropdown({
     },
     [items, setValue]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!open) {
       setHighlightedIndex(-1);
       return;
@@ -5076,7 +5089,7 @@ function Dropdown({
     const current = items.findIndex((i) => i.value === displayValue);
     setHighlightedIndex(current >= 0 ? current : 0);
   }, [open, displayValue, items]);
-  const handleKeyDown = (0, import_react15.useCallback)(
+  const handleKeyDown = (0, import_react18.useCallback)(
     (e) => {
       if (disabled) return;
       if (!open) {
@@ -5167,7 +5180,7 @@ function Dropdown({
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
-      ref: containerRef,
+      ref: mergedContainerRef,
       className: cn("relative inline-block", className),
       style,
       onKeyDown: handleKeyDown,
@@ -5191,19 +5204,19 @@ function Dropdown({
       ]
     }
   );
-}
+});
 // components/Flashcard.tsx
-var import_react35 = require("react");
+var import_react38 = require("react");
 // node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs
-var import_react16 = require("react");
-var LayoutGroupContext = (0, import_react16.createContext)({});
+var import_react19 = require("react");
+var LayoutGroupContext = (0, import_react19.createContext)({});
 // node_modules/framer-motion/dist/es/utils/use-constant.mjs
-var import_react17 = require("react");
+var import_react20 = require("react");
 function useConstant(init) {
-  const ref = (0, import_react17.useRef)(null);
+  const ref = (0, import_react20.useRef)(null);
   if (ref.current === null) {
     ref.current = init();
   }
@@ -5211,41 +5224,41 @@ function useConstant(init) {
 }
 // node_modules/framer-motion/dist/es/context/PresenceContext.mjs
-var import_react18 = require("react");
-var PresenceContext = (0, import_react18.createContext)(null);
+var import_react21 = require("react");
+var PresenceContext = (0, import_react21.createContext)(null);
 // node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs
-var import_react19 = require("react");
-var MotionConfigContext = (0, import_react19.createContext)({
+var import_react22 = require("react");
+var MotionConfigContext = (0, import_react22.createContext)({
   transformPagePoint: (p) => p,
   isStatic: false,
   reducedMotion: "never"
 });
 // node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs
-var import_react20 = require("react");
+var import_react23 = require("react");
 function usePresence(subscribe = true) {
-  const context = (0, import_react20.useContext)(PresenceContext);
+  const context = (0, import_react23.useContext)(PresenceContext);
   if (context === null)
     return [true, null];
   const { isPresent, onExitComplete, register } = context;
-  const id3 = (0, import_react20.useId)();
-  (0, import_react20.useEffect)(() => {
+  const id3 = (0, import_react23.useId)();
+  (0, import_react23.useEffect)(() => {
     if (subscribe)
       register(id3);
   }, [subscribe]);
-  const safeToRemove = (0, import_react20.useCallback)(() => subscribe && onExitComplete && onExitComplete(id3), [id3, onExitComplete, subscribe]);
+  const safeToRemove = (0, import_react23.useCallback)(() => subscribe && onExitComplete && onExitComplete(id3), [id3, onExitComplete, subscribe]);
   return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
 }
 // node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs
-var import_react21 = require("react");
+var import_react24 = require("react");
 // node_modules/framer-motion/dist/es/utils/is-browser.mjs
 var isBrowser = typeof window !== "undefined";
 // node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs
-var useIsomorphicLayoutEffect = isBrowser ? import_react21.useLayoutEffect : import_react21.useEffect;
+var useIsomorphicLayoutEffect = isBrowser ? import_react24.useLayoutEffect : import_react24.useEffect;
 // node_modules/motion-utils/dist/es/noop.mjs
 var noop = /* @__NO_SIDE_EFFECTS__ */ (any) => any;
@@ -5431,8 +5444,8 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
 var { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 // node_modules/framer-motion/dist/es/context/LazyContext.mjs
-var import_react22 = require("react");
-var LazyContext = (0, import_react22.createContext)({ strict: false });
+var import_react25 = require("react");
+var LazyContext = (0, import_react25.createContext)({ strict: false });
 // node_modules/framer-motion/dist/es/motion/features/definitions.mjs
 var featureProps = {
@@ -5575,14 +5588,14 @@ function createDOMMotionComponentProxy(componentFactory) {
 // node_modules/framer-motion/dist/es/motion/index.mjs
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var import_react28 = require("react");
+var import_react31 = require("react");
 // node_modules/framer-motion/dist/es/context/MotionContext/index.mjs
-var import_react23 = require("react");
-var MotionContext = (0, import_react23.createContext)({});
+var import_react26 = require("react");
+var MotionContext = (0, import_react26.createContext)({});
 // node_modules/framer-motion/dist/es/context/MotionContext/create.mjs
-var import_react24 = require("react");
+var import_react27 = require("react");
 // node_modules/framer-motion/dist/es/render/utils/is-variant-label.mjs
 function isVariantLabel(v) {
@@ -5628,8 +5641,8 @@ function getCurrentTreeVariants(props, context) {
 // node_modules/framer-motion/dist/es/context/MotionContext/create.mjs
 function useCreateMotionContext(props) {
-  const { initial, animate } = getCurrentTreeVariants(props, (0, import_react24.useContext)(MotionContext));
-  return (0, import_react24.useMemo)(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
+  const { initial, animate } = getCurrentTreeVariants(props, (0, import_react27.useContext)(MotionContext));
+  return (0, import_react27.useMemo)(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);
 }
 function variantLabelsAsDependency(prop) {
   return Array.isArray(prop) ? prop.join(" ") : prop;
@@ -5639,7 +5652,7 @@ function variantLabelsAsDependency(prop) {
 var motionComponentSymbol = /* @__PURE__ */ Symbol.for("motionComponentSymbol");
 // node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs
-var import_react25 = require("react");
+var import_react28 = require("react");
 // node_modules/framer-motion/dist/es/utils/is-ref-object.mjs
 function isRefObject(ref) {
@@ -5648,7 +5661,7 @@ function isRefObject(ref) {
 // node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs
 function useMotionRef(visualState, visualElement, externalRef) {
-  return (0, import_react25.useCallback)(
+  return (0, import_react28.useCallback)(
     (instance) => {
       if (instance) {
         visualState.onMount && visualState.onMount(instance);
@@ -5678,7 +5691,7 @@ function useMotionRef(visualState, visualElement, externalRef) {
 }
 // node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs
-var import_react27 = require("react");
+var import_react30 = require("react");
 // node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs
 var camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
@@ -5691,17 +5704,17 @@ var optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
 var { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
 // node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs
-var import_react26 = require("react");
-var SwitchLayoutGroupContext = (0, import_react26.createContext)({});
+var import_react29 = require("react");
+var SwitchLayoutGroupContext = (0, import_react29.createContext)({});
 // node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs
 function useVisualElement(Component2, visualState, props, createVisualElement, ProjectionNodeConstructor) {
   var _a, _b;
-  const { visualElement: parent } = (0, import_react27.useContext)(MotionContext);
-  const lazyContext = (0, import_react27.useContext)(LazyContext);
-  const presenceContext = (0, import_react27.useContext)(PresenceContext);
-  const reducedMotionConfig = (0, import_react27.useContext)(MotionConfigContext).reducedMotion;
-  const visualElementRef = (0, import_react27.useRef)(null);
+  const { visualElement: parent } = (0, import_react30.useContext)(MotionContext);
+  const lazyContext = (0, import_react30.useContext)(LazyContext);
+  const presenceContext = (0, import_react30.useContext)(PresenceContext);
+  const reducedMotionConfig = (0, import_react30.useContext)(MotionConfigContext).reducedMotion;
+  const visualElementRef = (0, import_react30.useRef)(null);
   createVisualElement = createVisualElement || lazyContext.renderer;
   if (!visualElementRef.current && createVisualElement) {
     visualElementRef.current = createVisualElement(Component2, {
@@ -5714,18 +5727,18 @@ function useVisualElement(Component2, visualState, props, createVisualElement, P
     });
   }
   const visualElement = visualElementRef.current;
-  const initialLayoutGroupConfig = (0, import_react27.useContext)(SwitchLayoutGroupContext);
+  const initialLayoutGroupConfig = (0, import_react30.useContext)(SwitchLayoutGroupContext);
   if (visualElement && !visualElement.projection && ProjectionNodeConstructor && (visualElement.type === "html" || visualElement.type === "svg")) {
     createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
   }
-  const isMounted = (0, import_react27.useRef)(false);
-  (0, import_react27.useInsertionEffect)(() => {
+  const isMounted = (0, import_react30.useRef)(false);
+  (0, import_react30.useInsertionEffect)(() => {
     if (visualElement && isMounted.current) {
       visualElement.update(props, presenceContext);
     }
   });
   const optimisedAppearId = props[optimizedAppearDataAttribute];
-  const wantsHandoff = (0, import_react27.useRef)(Boolean(optimisedAppearId) && !((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)) && ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));
+  const wantsHandoff = (0, import_react30.useRef)(Boolean(optimisedAppearId) && !((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)) && ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));
   useIsomorphicLayoutEffect(() => {
     if (!visualElement)
       return;
@@ -5737,7 +5750,7 @@ function useVisualElement(Component2, visualState, props, createVisualElement, P
       visualElement.animationState.animateChanges();
     }
   });
-  (0, import_react27.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!visualElement)
       return;
     if (!wantsHandoff.current && visualElement.animationState) {
@@ -5787,7 +5800,7 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
   function MotionComponent(props, externalRef) {
     let MeasureLayout2;
     const configAndProps = {
-      ...(0, import_react28.useContext)(MotionConfigContext),
+      ...(0, import_react31.useContext)(MotionConfigContext),
       ...props,
       layoutId: useLayoutId(props)
     };
@@ -5803,16 +5816,16 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
     return (0, import_jsx_runtime16.jsxs)(MotionContext.Provider, { value: context, children: [MeasureLayout2 && context.visualElement ? (0, import_jsx_runtime16.jsx)(MeasureLayout2, { visualElement: context.visualElement, ...configAndProps }) : null, useRender(Component2, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] });
   }
   MotionComponent.displayName = `motion.${typeof Component2 === "string" ? Component2 : `create(${(_b = (_a = Component2.displayName) !== null && _a !== void 0 ? _a : Component2.name) !== null && _b !== void 0 ? _b : ""})`}`;
-  const ForwardRefMotionComponent = (0, import_react28.forwardRef)(MotionComponent);
+  const ForwardRefMotionComponent = (0, import_react31.forwardRef)(MotionComponent);
   ForwardRefMotionComponent[motionComponentSymbol] = Component2;
   return ForwardRefMotionComponent;
 }
 function useLayoutId({ layoutId }) {
-  const layoutGroupId = (0, import_react28.useContext)(LayoutGroupContext).id;
+  const layoutGroupId = (0, import_react31.useContext)(LayoutGroupContext).id;
   return layoutGroupId && layoutId !== void 0 ? layoutGroupId + "-" + layoutId : layoutId;
 }
 function useStrictMode(configAndProps, preloadedFeatures) {
-  const isStrict = (0, import_react28.useContext)(LazyContext).strict;
+  const isStrict = (0, import_react31.useContext)(LazyContext).strict;
   if (process.env.NODE_ENV !== "production" && preloadedFeatures && isStrict) {
     const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
     configAndProps.ignoreStrict ? warning(false, strictMessage) : invariant(false, strictMessage);
@@ -5886,7 +5899,7 @@ function isSVGComponent(Component2) {
 }
 // node_modules/framer-motion/dist/es/motion/utils/use-visual-state.mjs
-var import_react29 = require("react");
+var import_react32 = require("react");
 // node_modules/framer-motion/dist/es/render/utils/resolve-variants.mjs
 function getValueState(visualElement) {
@@ -5947,8 +5960,8 @@ function makeState({ scrapeMotionValuesFromProps: scrapeMotionValuesFromProps3,
   return state;
 }
 var makeUseVisualState = (config) => (props, isStatic) => {
-  const context = (0, import_react29.useContext)(MotionContext);
-  const presenceContext = (0, import_react29.useContext)(PresenceContext);
+  const context = (0, import_react32.useContext)(MotionContext);
+  const presenceContext = (0, import_react32.useContext)(PresenceContext);
   const make = () => makeState(config, props, context, presenceContext);
   return isStatic ? make() : useConstant(make);
 };
@@ -6468,10 +6481,10 @@ var htmlMotionConfig = {
 };
 // node_modules/framer-motion/dist/es/render/dom/use-render.mjs
-var import_react32 = require("react");
+var import_react35 = require("react");
 // node_modules/framer-motion/dist/es/render/html/use-props.mjs
-var import_react30 = require("react");
+var import_react33 = require("react");
 function copyRawValuesOnly(target, source, props) {
   for (const key in source) {
     if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
@@ -6480,7 +6493,7 @@ function copyRawValuesOnly(target, source, props) {
   }
 }
 function useInitialMotionValues({ transformTemplate }, visualState) {
-  return (0, import_react30.useMemo)(() => {
+  return (0, import_react33.useMemo)(() => {
     const state = createHtmlRenderState();
     buildHTMLStyles(state, visualState, transformTemplate);
     return Object.assign({}, state.vars, state.style);
@@ -6509,9 +6522,9 @@ function useHTMLProps(props, visualState) {
 }
 // node_modules/framer-motion/dist/es/render/svg/use-props.mjs
-var import_react31 = require("react");
+var import_react34 = require("react");
 function useSVGProps(props, visualState, _isStatic, Component2) {
-  const visualProps = (0, import_react31.useMemo)(() => {
+  const visualProps = (0, import_react34.useMemo)(() => {
     const state = createSvgRenderState();
     buildSVGAttrs(state, visualState, isSVGTag(Component2), props.transformTemplate);
     return {
@@ -6533,10 +6546,10 @@ function createUseRender(forwardMotionProps = false) {
     const useVisualProps = isSVGComponent(Component2) ? useSVGProps : useHTMLProps;
     const visualProps = useVisualProps(props, latestValues, isStatic, Component2);
     const filteredProps = filterProps(props, typeof Component2 === "string", forwardMotionProps);
-    const elementProps = Component2 !== import_react32.Fragment ? { ...filteredProps, ...visualProps, ref } : {};
+    const elementProps = Component2 !== import_react35.Fragment ? { ...filteredProps, ...visualProps, ref } : {};
     const { children } = props;
-    const renderedChildren = (0, import_react32.useMemo)(() => isMotionValue(children) ? children.get() : children, [children]);
-    return (0, import_react32.createElement)(Component2, {
+    const renderedChildren = (0, import_react35.useMemo)(() => isMotionValue(children) ? children.get() : children, [children]);
+    return (0, import_react35.createElement)(Component2, {
       ...elementProps,
       children: renderedChildren
     });
@@ -10590,7 +10603,7 @@ var PanGesture = class extends Feature {
 // node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var import_react33 = require("react");
+var import_react36 = require("react");
 // node_modules/framer-motion/dist/es/projection/node/state.mjs
 var globalProjectionState = {
@@ -10652,7 +10665,7 @@ var correctBoxShadow = {
 };
 // node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs
-var MeasureLayoutWithContext = class extends import_react33.Component {
+var MeasureLayoutWithContext = class extends import_react36.Component {
   /**
    * This only mounts projection nodes for components that
    * need measuring, we might want to do it for all components
@@ -10736,8 +10749,8 @@ var MeasureLayoutWithContext = class extends import_react33.Component {
 };
 function MeasureLayout(props) {
   const [isPresent, safeToRemove] = usePresence();
-  const layoutGroup = (0, import_react33.useContext)(LayoutGroupContext);
-  return (0, import_jsx_runtime17.jsx)(MeasureLayoutWithContext, { ...props, layoutGroup, switchLayoutGroup: (0, import_react33.useContext)(SwitchLayoutGroupContext), isPresent, safeToRemove });
+  const layoutGroup = (0, import_react36.useContext)(LayoutGroupContext);
+  return (0, import_jsx_runtime17.jsx)(MeasureLayoutWithContext, { ...props, layoutGroup, switchLayoutGroup: (0, import_react36.useContext)(SwitchLayoutGroupContext), isPresent, safeToRemove });
 }
 var defaultScaleCorrectors = {
   borderRadius: {
@@ -12359,7 +12372,7 @@ var layout = {
 };
 // node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs
-var import_react34 = require("react");
+var import_react37 = require("react");
 // node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs
 var prefersReducedMotion = { current: null };
@@ -12872,7 +12885,7 @@ var SVGVisualElement = class extends DOMVisualElement {
 // node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs
 var createDomVisualElement = (Component2, options) => {
   return isSVGComponent(Component2) ? new SVGVisualElement(options) : new HTMLVisualElement(options, {
-    allowProjection: Component2 !== import_react34.Fragment
+    allowProjection: Component2 !== import_react37.Fragment
   });
 };
@@ -12888,6 +12901,7 @@ var createMotionComponent = /* @__PURE__ */ createMotionComponentFactory({
 var motion = /* @__PURE__ */ createDOMMotionComponentProxy(createMotionComponent);
 // components/Flashcard.tsx
+var import_react39 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var FRONT_BY_THEME = {
   minimal: "border-black/5 bg-gradient-to-br from-white to-zinc-50 text-zinc-900 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.1)]",
@@ -12909,17 +12923,13 @@ var BACK_BY_THEME = {
   retro: "from-zinc-800 to-black text-lime-400 font-mono",
   motion: "from-indigo-600 via-purple-600 to-indigo-700 text-white transition-all duration-500"
 };
-function Flashcard({
-  question,
-  answer,
-  className,
-  ...props
-}) {
-  const [isFlipped, setIsFlipped] = (0, import_react35.useState)(false);
+var Flashcard = (0, import_react39.forwardRef)(function Flashcard2({ question, answer, className, ...props }, ref) {
+  const [isFlipped, setIsFlipped] = (0, import_react38.useState)(false);
   const { theme } = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
+      ref,
       className: cn(
         "group relative h-64 w-full cursor-pointer [perspective:1000px]",
         className
@@ -12975,9 +12985,10 @@ function Flashcard({
       )
     }
   );
-}
+});
 // components/GraphicCard.tsx
+var import_react40 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var SURFACE_BY_THEME = {
   minimal: "bg-gradient-to-br from-white to-zinc-50 border-black/5 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.08)] hover:shadow-[0_10px_40px_-6px_rgba(0,0,0,0.18)]",
@@ -12989,11 +13000,7 @@ var SURFACE_BY_THEME = {
   retro: "bg-white border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)]",
   motion: "bg-white border-2 border-indigo-200 shadow-lg transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:border-indigo-300 hover:-translate-y-0.5"
 };
-function GraphicCard({
-  children,
-  className,
-  ...props
-}) {
+var GraphicCard = (0, import_react40.forwardRef)(function GraphicCard2({ children, className, ...props }, ref) {
   const { theme } = useTheme();
   const surface = SURFACE_BY_THEME[theme];
   const isDark = theme === "night" || theme === "cyberpunk";
@@ -13002,6 +13009,7 @@ function GraphicCard({
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
+      ref,
       className: cn(
         "group relative w-full overflow-hidden rounded-2xl p-6 transition-all duration-300",
         surface,
@@ -13015,10 +13023,10 @@ function GraphicCard({
       ]
     }
   );
-}
+});
 // components/Input.tsx
-var import_react36 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var inputVariants = cva(
   "w-full rounded-lg px-3 py-2 text-sm outline-none transition-shadow",
@@ -13035,7 +13043,7 @@ var inputVariants = cva(
     }
   }
 );
-var Input = (0, import_react36.forwardRef)(function Input2({
+var Input = (0, import_react41.forwardRef)(function Input2({
   label,
   error,
   helperText,
@@ -13043,6 +13051,7 @@ var Input = (0, import_react36.forwardRef)(function Input2({
   suffix,
   size = "md",
   className,
+  style,
   id: idProp,
   disabled,
   theme: themeProp,
@@ -13071,13 +13080,12 @@ var Input = (0, import_react36.forwardRef)(function Input2({
         themeClass,
         error && "border-red-500 focus:ring-red-500 focus:border-red-500",
         hasAddon && "rounded-none first:rounded-l-lg last:rounded-r-lg",
-        !hasAddon && "rounded-lg",
-        className
+        !hasAddon && "rounded-lg"
       ),
       ...props
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-full", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("w-full", className), style, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "label",
       {
@@ -13113,12 +13121,12 @@ var Input = (0, import_react36.forwardRef)(function Input2({
 });
 // src/hooks/useFocusTrap.ts
-var import_react37 = require("react");
+var import_react42 = require("react");
 function useFocusTrap(active, options) {
-  const containerRef = (0, import_react37.useRef)(null);
-  const previousFocusRef = (0, import_react37.useRef)(null);
+  const containerRef = (0, import_react42.useRef)(null);
+  const previousFocusRef = (0, import_react42.useRef)(null);
   const { returnFocus = true } = options ?? {};
-  const getFocusables = (0, import_react37.useCallback)((el) => {
+  const getFocusables = (0, import_react42.useCallback)((el) => {
     const selector = [
       "a[href]",
       "button:not([disabled])",
@@ -13131,7 +13139,7 @@ function useFocusTrap(active, options) {
       (node) => node.offsetParent !== null
     );
   }, []);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!active || !containerRef.current) return;
     previousFocusRef.current = (typeof document !== "undefined" ? document.activeElement : null) ?? null;
     const container = containerRef.current;
@@ -13166,7 +13174,7 @@ function useFocusTrap(active, options) {
 }
 // components/Modal.tsx
-var import_react38 = require("react");
+var import_react43 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var modalVariants = cva(
   "relative z-10 max-h-[90vh] w-full max-w-[calc(100vw-2rem)] overflow-auto rounded-xl p-4 sm:p-6",
@@ -13183,7 +13191,7 @@ var modalVariants = cva(
     }
   }
 );
-function Modal({
+var Modal = (0, import_react43.forwardRef)(function Modal2({
   open,
   onClose,
   title,
@@ -13192,18 +13200,19 @@ function Modal({
   style,
   children,
   theme: themeProp
-}) {
+}, ref) {
   const { theme: contextTheme } = useTheme();
   const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "modal", "default");
   const focusTrapRef = useFocusTrap(open, { returnFocus: true });
-  const handleEscape = (0, import_react38.useCallback)(
+  const mergedRef = mergeRefs(ref, focusTrapRef);
+  const handleEscape = (0, import_react43.useCallback)(
     (e) => {
       if (e.key === "Escape") onClose();
     },
     [onClose]
   );
-  (0, import_react38.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!open) return;
     document.addEventListener("keydown", handleEscape);
     document.body.style.overflow = "hidden";
@@ -13233,7 +13242,7 @@ function Modal({
         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "div",
           {
-            ref: focusTrapRef,
+            ref: mergedRef,
             className: cn(modalVariants({ size }), themeClass, className),
             style,
             children: [
@@ -13266,27 +13275,21 @@ function Modal({
       ]
     }
   );
-}
+});
 // components/Navbar.tsx
-var import_react39 = require("react");
+var import_react44 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function Navbar({
-  children,
-  logo,
-  items,
-  right,
-  className,
-  style
-}) {
-  const [mobileOpen, setMobileOpen] = (0, import_react39.useState)(false);
-  const navRef = (0, import_react39.useRef)(null);
+var Navbar = (0, import_react44.forwardRef)(function Navbar2({ children, logo, items, right, className, style }, ref) {
+  const [mobileOpen, setMobileOpen] = (0, import_react44.useState)(false);
+  const navRef = (0, import_react44.useRef)(null);
+  const mergedNavRef = mergeRefs(ref, navRef);
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "navbar", "default");
   const mobilePanelBgOverride = theme === "glass" ? "bg-white/95 backdrop-blur-xl" : theme === "clay" ? "bg-white/95" : null;
   useClickOutside(
     navRef,
-    (0, import_react39.useCallback)(() => setMobileOpen(false), []),
+    (0, import_react44.useCallback)(() => setMobileOpen(false), []),
     { enabled: mobileOpen }
   );
   const hasResponsiveNav = items != null && items.length > 0;
@@ -13294,7 +13297,7 @@ function Navbar({
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "nav",
       {
-        ref: navRef,
+        ref: mergedNavRef,
         className: cn(
           "relative sticky top-0 z-50 flex h-14 w-full flex-col px-3 sm:px-4",
           themeClass,
@@ -13360,6 +13363,7 @@ function Navbar({
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "nav",
     {
+      ref: mergedNavRef,
       className: cn(
         "sticky top-0 z-50 flex h-14 w-full flex-wrap items-center gap-2 px-3 sm:px-4",
         themeClass,
@@ -13369,21 +13373,18 @@ function Navbar({
       children
     }
   );
-}
+});
 // components/PricingCard.tsx
+var import_react45 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-function PricingCard({
-  tier,
-  onSelect,
-  className,
-  style
-}) {
+var PricingCard = (0, import_react45.forwardRef)(function PricingCard2({ tier, onSelect, className, style }, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "pricingCard", "default");
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
+      ref,
       className: cn(
         "flex flex-col rounded-xl p-4 sm:p-6",
         themeClass,
@@ -13411,36 +13412,47 @@ function PricingCard({
       ]
     }
   );
-}
+});
 // components/ProgressBar.tsx
+var import_react46 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-function ProgressBar({
+var ProgressBar = (0, import_react46.forwardRef)(function ProgressBar2({
   value,
   max = 100,
   segmented = false,
   className,
   style,
+  "aria-label": ariaLabel,
   trackColor,
   activeColor
-}) {
+}, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "progress", "default");
   const pct = Math.min(100, Math.max(0, value / max * 100));
   const trackStyle = trackColor ? { backgroundColor: trackColor } : void 0;
   const fillStyle = activeColor ? { width: `${pct}%`, backgroundColor: activeColor } : { width: `${pct}%` };
+  const progressRole = {
+    role: "progressbar",
+    "aria-valuenow": value,
+    "aria-valuemin": 0,
+    "aria-valuemax": max,
+    ...ariaLabel && { "aria-label": ariaLabel }
+  };
   if (segmented) {
     const segments = 10;
     const filled = Math.round(pct / 100 * segments);
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
+        ref,
         className: cn(
           "flex h-3 w-full gap-0.5 overflow-hidden rounded-full",
           themeClass,
           className
         ),
         style: { ...style, ...trackStyle },
+        ...progressRole,
         children: Array.from({ length: segments }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
@@ -13458,12 +13470,14 @@ function ProgressBar({
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
+      ref,
       className: cn(
         "relative h-3 w-full overflow-hidden rounded-full",
         themeClass,
         className
       ),
       style: { ...style, ...trackStyle },
+      ...progressRole,
       children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "span",
         {
@@ -13473,40 +13487,33 @@ function ProgressBar({
       )
     }
   );
-}
+});
 // components/SectionHeader.tsx
+var import_react47 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-function SectionHeader({
-  title,
-  subtitle,
-  className,
-  style
-}) {
+var SectionHeader = (0, import_react47.forwardRef)(function SectionHeader2({ title, subtitle, className, style }, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "sectionHeader", "default");
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { className: cn("pb-4", themeClass, className), style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { ref, className: cn("pb-4", themeClass, className), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: "text-lg font-semibold sm:text-xl", children: title }),
     subtitle ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "mt-1 text-sm opacity-80", children: subtitle }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mt-3 border-b border-inherit" })
   ] });
-}
+});
 // components/Sidebar.tsx
-var import_react40 = require("react");
+var import_react48 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-function Sidebar({
-  children,
-  className,
-  style
-}) {
-  const [collapsed, setCollapsed] = (0, import_react40.useState)(false);
+var Sidebar = (0, import_react48.forwardRef)(function Sidebar2({ children, className, style }, ref) {
+  const [collapsed, setCollapsed] = (0, import_react48.useState)(false);
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "sidebar", "default");
-  const toggle = (0, import_react40.useCallback)(() => setCollapsed((c) => !c), []);
+  const toggle = (0, import_react48.useCallback)(() => setCollapsed((c) => !c), []);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "aside",
     {
+      ref,
       className: cn(
         "flex h-full flex-col transition-[width] duration-200",
         collapsed ? "w-12 sm:w-14" : "w-48 max-w-[85vw] sm:w-56 sm:max-w-none",
@@ -13529,10 +13536,10 @@ function Sidebar({
       ]
     }
   );
-}
+});
 // components/Skeleton.tsx
-var import_react41 = require("react");
+var import_react49 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var skeletonVariants = cva("", {
   variants: {
@@ -13546,7 +13553,7 @@ var skeletonVariants = cva("", {
     variant: "rectangle"
   }
 });
-var Skeleton = (0, import_react41.forwardRef)(
+var Skeleton = (0, import_react49.forwardRef)(
   function Skeleton2({ variant = "rectangle", className, theme: themeProp, style, ...props }, ref) {
     const { theme: contextTheme } = useTheme();
     const theme = themeProp ?? contextTheme;
@@ -13572,7 +13579,7 @@ var Skeleton = (0, import_react41.forwardRef)(
 );
 // components/Slider.tsx
-var import_react42 = require("react");
+var import_react50 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var sliderVariants = cva(
   "relative flex w-full touch-none items-center overflow-visible py-1",
@@ -13593,7 +13600,7 @@ var trackVariants = cva(
   "relative h-3 w-full rounded-full overflow-visible",
   { variants: {}, defaultVariants: {} }
 );
-var Slider = (0, import_react42.forwardRef)(function Slider2({
+var Slider = (0, import_react50.forwardRef)(function Slider2({
   min = 0,
   max = 100,
   step = 1,
@@ -13602,17 +13609,18 @@ var Slider = (0, import_react42.forwardRef)(function Slider2({
   onValueChange,
   size = "md",
   className,
+  style,
   theme: themeProp,
   ...props
 }, ref) {
-  const [uncontrolled, setUncontrolled] = (0, import_react42.useState)(defaultValue);
+  const [uncontrolled, setUncontrolled] = (0, import_react50.useState)(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : uncontrolled;
   const { theme: contextTheme } = useTheme();
   const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "slider", "default");
   const pct = (value - min) / (max - min) * 100;
-  const handleChange = (0, import_react42.useCallback)(
+  const handleChange = (0, import_react50.useCallback)(
     (e) => {
       const next = Number(e.target.value);
       if (!isControlled) setUncontrolled(next);
@@ -13620,7 +13628,7 @@ var Slider = (0, import_react42.forwardRef)(function Slider2({
     },
     [isControlled, onValueChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn(sliderVariants({ size }), className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn(sliderVariants({ size }), className), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn(trackVariants(), themeClass), children: [
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "span",
@@ -13658,20 +13666,15 @@ var Slider = (0, import_react42.forwardRef)(function Slider2({
 });
 // components/StatsCard.tsx
+var import_react51 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-function StatsCard({
-  label,
-  value,
-  trend,
-  className,
-  style
-}) {
+var StatsCard = (0, import_react51.forwardRef)(function StatsCard2({ label, value, trend, className, style }, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "statsCard", "default");
   const isDark = theme === "night" || theme === "cyberpunk";
   const trendUpClass = trend?.direction === "up" ? isDark ? "text-emerald-400" : "text-emerald-600" : null;
   const trendDownClass = trend?.direction === "down" ? isDark ? "text-rose-400" : "text-rose-600" : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("rounded-xl p-6", themeClass, className), style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref, className: cn("rounded-xl p-6", themeClass, className), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-sm font-medium opacity-80", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mt-2 text-2xl font-bold tracking-tight", children: value }),
     trend ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
@@ -13688,10 +13691,10 @@ function StatsCard({
       }
     ) : null
   ] });
-}
+});
 // components/Tabs.tsx
-var import_react43 = require("react");
+var import_react52 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var tabsListVariants = cva(
   "flex min-w-0 overflow-x-auto scrollbar-thin -mx-1 px-1 sm:mx-0 sm:overflow-visible",
@@ -13714,7 +13717,7 @@ var tabTriggerVariants = cva(
     }
   }
 );
-function Tabs({
+var Tabs = (0, import_react52.forwardRef)(function Tabs2({
   items,
   defaultValue,
   value: controlledValue,
@@ -13722,31 +13725,31 @@ function Tabs({
   className,
   style,
   theme: themeProp
-}) {
-  const [uncontrolled, setUncontrolled] = (0, import_react43.useState)(
+}, ref) {
+  const [uncontrolled, setUncontrolled] = (0, import_react52.useState)(
     () => defaultValue ?? items[0]?.value ?? ""
   );
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : uncontrolled;
   const activeIndex = items.findIndex((i) => i.value === value);
   const safeIndex = activeIndex >= 0 ? activeIndex : 0;
-  const triggerRefs = (0, import_react43.useRef)([]);
+  const triggerRefs = (0, import_react52.useRef)([]);
   const { theme: contextTheme } = useTheme();
   const theme = themeProp ?? contextTheme;
   const listThemeClass = getThemeClass(theme, "tabs", "default");
   const triggerActiveClass = getThemeClass(theme, "tabs", "triggerActive");
   const triggerInactiveClass = getThemeClass(theme, "tabs", "triggerInactive");
-  const setValue = (0, import_react43.useCallback)(
+  const setValue = (0, import_react52.useCallback)(
     (v) => {
       if (!isControlled) setUncontrolled(v);
       onValueChange?.(v);
     },
     [isControlled, onValueChange]
   );
-  (0, import_react43.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     triggerRefs.current = triggerRefs.current.slice(0, items.length);
   }, [items.length]);
-  const handleKeyDown = (0, import_react43.useCallback)(
+  const handleKeyDown = (0, import_react52.useCallback)(
     (e) => {
       if (e.key === "ArrowLeft") {
         e.preventDefault();
@@ -13764,7 +13767,7 @@ function Tabs({
   );
   const activeItem = items[safeIndex];
   const content = activeItem?.content ?? null;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("w-full min-w-0", className), style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ref, className: cn("w-full min-w-0", className), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "div",
       {
@@ -13808,22 +13811,19 @@ function Tabs({
       }
     )
   ] });
-}
+});
 // components/Terminal.tsx
+var import_react53 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-function Terminal({
-  title = "terminal",
-  children,
-  className,
-  style
-}) {
+var Terminal = (0, import_react53.forwardRef)(function Terminal2({ title = "terminal", children, className, style }, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "terminal", "default");
   const isCyberpunk = theme === "cyberpunk";
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
+      ref,
       className: cn("overflow-hidden rounded-xl font-mono text-sm", themeClass, className),
       style,
       children: [
@@ -13849,22 +13849,21 @@ function Terminal({
       ]
     }
   );
-}
+});
 // components/Timeline.tsx
+var import_react54 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-function Timeline({
-  items,
-  className,
-  theme: themeProp
-}) {
+var Timeline = (0, import_react54.forwardRef)(function Timeline2({ items, className, style, theme: themeProp }, ref) {
   const { theme: contextTheme } = useTheme();
   const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "timeline", "default");
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
+      ref,
       className: cn("relative pl-4", themeClass, className),
+      style,
       role: "list",
       "aria-label": "Timeline",
       children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
@@ -13891,21 +13890,25 @@ function Timeline({
       ))
     }
   );
-}
+});
 // components/Toast.tsx
+var import_react55 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-function Toast({
-  message,
-  onDismiss,
-  className,
-  style
-}) {
+var Toast = (0, import_react55.forwardRef)(function Toast2({ message, onDismiss, className, style }, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "toast", "default");
+  (0, import_react55.useEffect)(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") onDismiss();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onDismiss]);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
+      ref,
       role: "alert",
       className: cn(
         "flex items-center justify-between gap-4 rounded-lg px-4 py-3 shadow-lg",
@@ -13928,10 +13931,10 @@ function Toast({
       ]
     }
   );
-}
+});
 // components/Toggle.tsx
-var import_react44 = require("react");
+var import_react56 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var toggleVariants = cva(
   "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full px-0.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-[state=off]:justify-start data-[state=on]:justify-end [&:has(input:disabled)]:cursor-not-allowed [&:has(input:disabled)]:opacity-50",
@@ -13940,17 +13943,18 @@ var toggleVariants = cva(
     defaultVariants: {}
   }
 );
-var Toggle = (0, import_react44.forwardRef)(function Toggle2({
+var Toggle = (0, import_react56.forwardRef)(function Toggle2({
   checked: controlledChecked,
   defaultChecked = false,
   onCheckedChange,
   className,
+  style,
   "aria-label": ariaLabel = "Toggle",
   theme: themeProp,
   disabled,
   ...props
 }, ref) {
-  const [uncontrolled, setUncontrolled] = (0, import_react44.useState)(defaultChecked);
+  const [uncontrolled, setUncontrolled] = (0, import_react56.useState)(defaultChecked);
   const isControlled = controlledChecked !== void 0;
   const checked = isControlled ? controlledChecked : uncontrolled;
   const { theme: contextTheme } = useTheme();
@@ -13958,8 +13962,8 @@ var Toggle = (0, import_react44.forwardRef)(function Toggle2({
   const themeClass = getThemeClass(theme, "toggle", "default");
   const thumbOnDark = theme === "night" && checked;
   const thumbClass = thumbOnDark ? "bg-zinc-900 shadow-inner" : "bg-white shadow";
-  const id3 = (0, import_react44.useId)();
-  const handleChange = (0, import_react44.useCallback)(
+  const id3 = (0, import_react56.useId)();
+  const handleChange = (0, import_react56.useCallback)(
     (e) => {
       const next = e.target.checked;
       if (!isControlled) setUncontrolled(next);
@@ -13972,6 +13976,7 @@ var Toggle = (0, import_react44.forwardRef)(function Toggle2({
     {
       htmlFor: id3,
       className: cn(toggleVariants(), themeClass, className),
+      style,
       "data-state": checked ? "on" : "off",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -14005,7 +14010,7 @@ var Toggle = (0, import_react44.forwardRef)(function Toggle2({
 });
 // components/Tooltip.tsx
-var import_react45 = require("react");
+var import_react57 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var placementClasses = {
   top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
@@ -14017,34 +14022,31 @@ var tooltipVariants = cva(
   "absolute z-50 whitespace-nowrap rounded-lg px-2 py-1 text-xs shadow-lg",
   { variants: {}, defaultVariants: {} }
 );
-function Tooltip({
-  content,
-  children,
-  placement = "top",
-  className,
-  style,
-  theme: themeProp
-}) {
-  const [visible, setVisible] = (0, import_react45.useState)(false);
+var Tooltip = (0, import_react57.forwardRef)(function Tooltip2({ content, children, placement = "top", className, style, theme: themeProp }, ref) {
+  const [visible, setVisible] = (0, import_react57.useState)(false);
+  const tooltipId = (0, import_react57.useId)();
   const { theme: contextTheme } = useTheme();
   const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "tooltip", "default");
-  const show = (0, import_react45.useCallback)(() => setVisible(true), []);
-  const hide = (0, import_react45.useCallback)(() => setVisible(false), []);
+  const show = (0, import_react57.useCallback)(() => setVisible(true), []);
+  const hide = (0, import_react57.useCallback)(() => setVisible(false), []);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "span",
     {
+      ref,
       className: cn("relative inline-block", className),
       style,
       onMouseEnter: show,
       onMouseLeave: hide,
       onFocus: show,
       onBlur: hide,
+      "aria-describedby": visible ? tooltipId : void 0,
       children: [
         children,
         visible ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "span",
           {
+            id: tooltipId,
             role: "tooltip",
             className: cn(
               tooltipVariants(),
@@ -14057,7 +14059,7 @@ function Tooltip({
       ]
     }
   );
-}
+});
 // lib/theme-recommendations.ts
 var THEME_BACKGROUNDS = {
@@ -14189,6 +14191,7 @@ var THEME_RECOMMENDATIONS = {
   cn,
   getNextListIndex,
   getThemeClass,
+  mergeRefs,
   useClickOutside,
   useFocusTrap,
   useKeyboardNavigation,