@raxrai/stylelab-ui 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -1,37 +1,8 @@
 "use strict";
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -77,6 +48,9 @@ __export(index_exports, {
   Slider: () => Slider,
   StatsCard: () => StatsCard,
   THEMES: () => THEMES,
+  THEME_BACKGROUNDS: () => THEME_BACKGROUNDS,
+  THEME_NAVBAR: () => THEME_NAVBAR,
+  THEME_RECOMMENDATIONS: () => THEME_RECOMMENDATIONS,
   Tabs: () => Tabs,
   Terminal: () => Terminal,
   ThemeProvider: () => ThemeProvider,
@@ -96,51 +70,6 @@ module.exports = __toCommonJS(index_exports);
 
 // context/ThemeContext.tsx
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ThemeContext = (0, import_react.createContext)(null);
-var STORAGE_KEY = "stylelab-theme";
-function ThemeProvider({
-  children,
-  defaultTheme = "minimal"
-}) {
-  const [theme, setThemeState] = (0, import_react.useState)(defaultTheme);
-  (0, import_react.useEffect)(() => {
-    setThemeState(defaultTheme);
-    if (typeof document !== "undefined") {
-      try {
-        document.documentElement.dataset.stylelabTheme = defaultTheme;
-      } catch (_) {
-      }
-    }
-  }, [defaultTheme]);
-  const setTheme = (0, import_react.useCallback)((next) => {
-    setThemeState(next);
-    if (typeof document !== "undefined") {
-      try {
-        document.documentElement.dataset.stylelabTheme = next;
-        localStorage.setItem(STORAGE_KEY, next);
-      } catch (_) {
-      }
-    }
-  }, []);
-  const value = (0, import_react.useMemo)(
-    () => ({ theme, setTheme }),
-    [theme, setTheme]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
-}
-var DEFAULT_THEME = "minimal";
-function useTheme() {
-  const ctx = (0, import_react.useContext)(ThemeContext);
-  if (!ctx) {
-    return {
-      theme: DEFAULT_THEME,
-      setTheme: () => {
-      }
-    };
-  }
-  return ctx;
-}
 
 // lib/theme-resolver.ts
 var themeMap = {
@@ -198,7 +127,7 @@ var themeMap = {
     skeleton: { default: "bg-zinc-800", shimmer: "animate-skeleton-shimmer" },
     avatar: { default: "bg-zinc-700 text-zinc-200 border border-white/10" },
     breadcrumbs: { default: "text-zinc-400 [&_[data-sep]]:text-zinc-500" },
-    alert: { default: "bg-zinc-900/50 text-zinc-100 border border-white/10", info: "bg-sky-900/30 border-sky-500/30", success: "bg-emerald-900/30 border-emerald-500/30", warning: "bg-amber-900/30 border-amber-500/30", danger: "bg-red-900/30 border-red-500/30" },
+    alert: { default: "bg-zinc-900/50 text-zinc-100 border border-white/10", info: "bg-sky-900/30 text-sky-200 border-sky-500/30", success: "bg-emerald-900/30 text-emerald-200 border-emerald-500/30", warning: "bg-amber-900/30 text-amber-200 border-amber-500/30", danger: "bg-red-900/30 text-red-200 border-red-500/30" },
     calendar: { default: "bg-zinc-950 text-zinc-100 border border-white/10" },
     timeline: { default: "border-l-2 border-white/20 text-zinc-100" }
   },
@@ -227,7 +156,7 @@ var themeMap = {
     skeleton: { default: "rounded-xl bg-white/50", shimmer: "animate-skeleton-shimmer" },
     avatar: { default: "rounded-full bg-white/60 text-slate-700 border border-white/60 shadow-glass-soft" },
     breadcrumbs: { default: "text-slate-500 [&_[data-sep]]:text-slate-400" },
-    alert: { default: "rounded-xl bg-white/60 backdrop-blur-[8px] border border-white/60 text-slate-800 saturate-150", info: "bg-sky-400/30 backdrop-blur-[8px] border-sky-300/60 saturate-150", success: "bg-emerald-400/30 backdrop-blur-[8px] border-emerald-300/60 saturate-150", warning: "bg-amber-400/30 backdrop-blur-[8px] border-amber-300/60 saturate-150", danger: "bg-red-400/30 backdrop-blur-[8px] border-red-300/60 saturate-150" },
+    alert: { default: "rounded-xl bg-white/60 backdrop-blur-[8px] border border-white/60 text-slate-800 saturate-150", info: "bg-sky-400/30 text-sky-900 backdrop-blur-[8px] border-sky-300/60 saturate-150", success: "bg-emerald-400/30 text-emerald-900 backdrop-blur-[8px] border-emerald-300/60 saturate-150", warning: "bg-amber-400/30 text-amber-900 backdrop-blur-[8px] border-amber-300/60 saturate-150", danger: "bg-red-400/30 text-red-900 backdrop-blur-[8px] border-red-300/60 saturate-150" },
     calendar: { default: "rounded-2xl bg-white/60 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-lift" },
     timeline: { default: "border-l-2 border-slate-200/60 text-slate-800" }
   },
@@ -256,7 +185,7 @@ var themeMap = {
     skeleton: { default: "rounded-none bg-zinc-200 border-2 border-black", shimmer: "animate-skeleton-shimmer" },
     avatar: { default: "rounded-full bg-[#FFD600] text-black border-2 border-black" },
     breadcrumbs: { default: "text-black [&_[data-sep]]:text-zinc-600" },
-    alert: { default: "rounded-none bg-white text-black border-4 border-black", info: "border-[#22d3ee] bg-sky-100", success: "border-emerald-600 bg-emerald-50", warning: "border-[#FFD600] bg-amber-50", danger: "border-[#FF5733] bg-red-50" },
+    alert: { default: "rounded-none bg-white text-black border-4 border-black", info: "border-[#22d3ee] bg-sky-100 text-sky-900", success: "border-emerald-600 bg-emerald-50 text-emerald-900", warning: "border-[#FFD600] bg-amber-50 text-amber-900", danger: "border-[#FF5733] bg-red-50 text-red-900" },
     calendar: { default: "rounded-none bg-white text-black border-4 border-black shadow-neubrutal" },
     timeline: { default: "border-l-4 border-black text-black" }
   },
@@ -285,7 +214,7 @@ var themeMap = {
     skeleton: { default: "rounded-2xl bg-sky-100", shimmer: "animate-skeleton-shimmer" },
     avatar: { default: "rounded-full bg-rose-200 text-rose-900 shadow-clay-outer border border-rose-200" },
     breadcrumbs: { default: "text-zinc-600 [&_[data-sep]]:text-zinc-400" },
-    alert: { default: "rounded-2xl bg-rose-50 text-zinc-900 shadow-clay-outer border border-rose-100", info: "bg-sky-100 border-sky-200", success: "bg-emerald-100 border-emerald-200", warning: "bg-amber-100 border-amber-200", danger: "bg-red-100 border-red-200" },
+    alert: { default: "rounded-2xl bg-rose-50 text-zinc-900 shadow-clay-outer border border-rose-100", info: "bg-sky-100 text-sky-900 border-sky-200", success: "bg-emerald-100 text-emerald-900 border-emerald-200", warning: "bg-amber-100 text-amber-900 border-amber-200", danger: "bg-red-100 text-red-900 border-red-200" },
     calendar: { default: "rounded-3xl bg-white text-zinc-900 shadow-clay-outer" },
     timeline: { default: "border-l-2 border-rose-200 text-zinc-900" }
   },
@@ -296,19 +225,19 @@ var themeMap = {
     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] clip-path-glitch shadow-neon-glow font-mono" },
+    card: { default: "bg-black text-[#22d3ee] 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" },
     sectionHeader: { default: "border-b-2 border-[#22d3ee] text-[#22d3ee]" },
-    modal: { default: "bg-black text-[#22d3ee] border-2 border-[#22d3ee] clip-path-glitch shadow-neon-glow font-mono" },
+    modal: { default: "bg-black text-[#22d3ee] border-2 border-[#22d3ee] shadow-neon-glow font-mono" },
     toast: { default: "bg-black border-2 border-[#ec4899] text-[#ec4899] font-mono shadow-neon-glow" },
     progress: { default: "bg-zinc-900 [&_.fill]:bg-[#22d3ee] [&_.fill]:shadow-neon-glow" },
     tooltip: { default: "bg-black border-2 border-[#22d3ee] text-[#22d3ee] font-mono" },
     dataTable: { default: "bg-black text-[#22d3ee] border-2 border-[#22d3ee] divide-y divide-[#22d3ee]/50 font-mono" },
-    pricingCard: { default: "bg-black text-[#22d3ee] border-2 border-[#22d3ee] clip-path-glitch font-mono" },
+    pricingCard: { default: "bg-black text-[#22d3ee] border-2 border-[#22d3ee] font-mono shadow-neon-glow" },
     terminal: { default: "bg-black border-2 border-[#22d3ee] font-mono text-[#22d3ee] shadow-neon-glow" },
-    statsCard: { default: "bg-black text-[#22d3ee] border-2 border-[#22d3ee] font-mono clip-path-glitch" },
+    statsCard: { default: "bg-black text-[#22d3ee] border-2 border-[#22d3ee] font-mono shadow-neon-glow" },
     commandPalette: { default: "bg-black text-[#22d3ee] border-2 border-[#22d3ee] font-mono shadow-neon-glow" },
     accordion: { default: "border-b-2 border-[#22d3ee] text-[#22d3ee]" },
     skeleton: { default: "bg-zinc-900 border border-[#22d3ee]/50", flicker: "animate-skeleton-flicker" },
@@ -324,7 +253,7 @@ var themeMap = {
     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 -mb-[2px] pb-[6px]", triggerInactive: "opacity-70" },
+    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" },
     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)]" },
@@ -343,7 +272,7 @@ var themeMap = {
     skeleton: { default: "rounded-none bg-zinc-200 border-2 border-black", shimmer: "animate-skeleton-shimmer" },
     avatar: { default: "rounded-none bg-lime-500 text-black border-2 border-black font-mono" },
     breadcrumbs: { default: "text-black font-mono [&_[data-sep]]:text-zinc-500" },
-    alert: { default: "rounded-none bg-white text-black border-2 border-black font-mono", info: "border-zinc-400 bg-zinc-100", success: "border-lime-600 bg-lime-50", warning: "border-amber-600 bg-amber-50", danger: "border-red-600 bg-red-50" },
+    alert: { default: "rounded-none bg-white text-black border-2 border-black font-mono", info: "border-zinc-400 bg-zinc-100 text-zinc-900", success: "border-lime-600 bg-lime-50 text-lime-900", warning: "border-amber-600 bg-amber-50 text-amber-900", danger: "border-red-600 bg-red-50 text-red-900" },
     calendar: { default: "rounded-none bg-white text-black border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)]" },
     timeline: { default: "border-l-2 border-black text-black font-mono" }
   },
@@ -378,10 +307,12 @@ var themeMap = {
   }
 };
 function getThemeClass(theme, component, variant = "default") {
-  var _a, _b, _c;
-  const comp = (_a = themeMap[theme]) == null ? void 0 : _a[component];
+  const comp = themeMap[theme]?.[component];
   if (!comp) return "";
-  return (_c = (_b = comp[variant]) != null ? _b : comp["default"]) != null ? _c : "";
+  const value = comp[variant];
+  if (value != null && value !== "") return value;
+  if (variant === "default") return comp["default"] ?? "";
+  return "";
 }
 var THEMES = [
   "minimal",
@@ -394,6 +325,68 @@ var THEMES = [
   "motion"
 ];
 
+// context/ThemeContext.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)(null);
+function getStoredTheme(storageKey, defaultTheme) {
+  if (typeof window === "undefined") return defaultTheme;
+  try {
+    const stored = localStorage.getItem(storageKey);
+    if (stored && THEMES.includes(stored))
+      return stored;
+  } catch (_) {
+  }
+  return defaultTheme;
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "minimal",
+  storageKey = "stylelab-theme"
+}) {
+  const [theme, setThemeState] = (0, import_react.useState)(defaultTheme);
+  (0, import_react.useEffect)(() => {
+    setThemeState((prev) => getStoredTheme(storageKey, prev));
+  }, [storageKey]);
+  (0, import_react.useEffect)(() => {
+    if (typeof document !== "undefined") {
+      try {
+        document.documentElement.dataset.stylelabTheme = theme;
+      } catch (_) {
+      }
+    }
+  }, [theme]);
+  const setTheme = (0, import_react.useCallback)(
+    (next) => {
+      setThemeState(next);
+      if (typeof document !== "undefined") {
+        try {
+          document.documentElement.dataset.stylelabTheme = next;
+          localStorage.setItem(storageKey, next);
+        } catch (_) {
+        }
+      }
+    },
+    [storageKey]
+  );
+  const value = (0, import_react.useMemo)(
+    () => ({ theme, setTheme }),
+    [theme, setTheme]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
+}
+var DEFAULT_THEME = "minimal";
+function useTheme() {
+  const ctx = (0, import_react.useContext)(ThemeContext);
+  if (!ctx) {
+    return {
+      theme: DEFAULT_THEME,
+      setTheme: () => {
+      }
+    };
+  }
+  return ctx;
+}
+
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -710,11 +703,12 @@ var createSortModifiers = (config) => {
     return result;
   };
 };
-var createConfigUtils = (config) => __spreadValues({
+var createConfigUtils = (config) => ({
   cache: createLruCache(config.cacheSize),
   parseClassName: createParseClassName(config),
-  sortModifiers: createSortModifiers(config)
-}, createClassGroupUtils(config));
+  sortModifiers: createSortModifiers(config),
+  ...createClassGroupUtils(config)
+});
 var SPLIT_CLASSES_REGEX = /\s+/;
 var mergeClassList = (classList, configUtils) => {
   const {
@@ -3638,58 +3632,48 @@ var hasA11yProp = (props) => {
 
 // node_modules/lucide-react/dist/esm/Icon.js
 var Icon = (0, import_react2.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, {
-      color: color2 = "currentColor",
-      size = 24,
-      strokeWidth = 2,
-      absoluteStrokeWidth,
-      className = "",
-      children,
-      iconNode
-    } = _b, rest = __objRest(_b, [
-      "color",
-      "size",
-      "strokeWidth",
-      "absoluteStrokeWidth",
-      "className",
-      "children",
-      "iconNode"
-    ]);
-    return (0, import_react2.createElement)(
-      "svg",
-      __spreadValues(__spreadValues(__spreadProps(__spreadValues({
-        ref
-      }, defaultAttributes), {
-        width: size,
-        height: size,
-        stroke: color2,
-        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-        className: mergeClasses("lucide", className)
-      }), !children && !hasA11yProp(rest) && { "aria-hidden": "true" }), rest),
-      [
-        ...iconNode.map(([tag, attrs]) => (0, import_react2.createElement)(tag, attrs)),
-        ...Array.isArray(children) ? children : [children]
-      ]
-    );
-  }
+  ({
+    color: color2 = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => (0, import_react2.createElement)(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color2,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => (0, import_react2.createElement)(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
 );
 
 // node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
   const Component2 = (0, import_react3.forwardRef)(
-    (_a, ref) => {
-      var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-      return (0, import_react3.createElement)(Icon, __spreadValues({
-        ref,
-        iconNode,
-        className: mergeClasses(
-          `lucide-${toKebabCase(toPascalCase(iconName))}`,
-          `lucide-${iconName}`,
-          className
-        )
-      }, props));
-    }
+    ({ className, ...props }, ref) => (0, import_react3.createElement)(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
   );
   Component2.displayName = toPascalCase(iconName);
   return Component2;
@@ -3814,10 +3798,10 @@ function Accordion({
   theme: themeProp
 }) {
   const [open, setOpen] = (0, import_react4.useState)(
-    () => new Set(defaultOpenIds != null ? defaultOpenIds : [])
+    () => new Set(defaultOpenIds ?? [])
   );
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "accordion", "default");
   const toggle = (0, import_react4.useCallback)(
     (id3) => {
@@ -3848,37 +3832,30 @@ function Accordion({
 // components/Alert.tsx
 var import_react5 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Alert = (0, import_react5.forwardRef)(function Alert2(_a, ref) {
-  var _b = _a, {
-    intent = "default",
-    title,
-    children,
-    className,
-    theme: themeProp,
-    role = "alert"
-  } = _b, props = __objRest(_b, [
-    "intent",
-    "title",
-    "children",
-    "className",
-    "theme",
-    "role"
-  ]);
+var Alert = (0, import_react5.forwardRef)(function Alert2({
+  intent = "default",
+  title,
+  children,
+  className,
+  theme: themeProp,
+  role = "alert",
+  ...props
+}, ref) {
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "alert", intent);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
-    __spreadProps(__spreadValues({
+    {
       ref,
       role,
-      className: cn("rounded-lg border px-4 py-3", themeClass, className)
-    }, props), {
+      className: cn("rounded-lg border px-4 py-3", themeClass, className),
+      ...props,
       children: [
         title != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-semibold mb-1", children: title }),
         children
       ]
-    })
+    }
   );
 });
 
@@ -3888,33 +3865,25 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 function getInitials(name) {
   return name.trim().split(/\s+/).map((s) => s[0]).join("").toUpperCase().slice(0, 2);
 }
-var Avatar = (0, import_react6.forwardRef)(function Avatar2(_a, ref) {
-  var _b = _a, {
-    src,
-    alt = "",
-    fallback,
-    className,
-    theme: themeProp,
-    style,
-    children
-  } = _b, props = __objRest(_b, [
-    "src",
-    "alt",
-    "fallback",
-    "className",
-    "theme",
-    "style",
-    "children"
-  ]);
+var Avatar = (0, import_react6.forwardRef)(function Avatar2({
+  src,
+  alt = "",
+  fallback,
+  className,
+  theme: themeProp,
+  style,
+  children,
+  ...props
+}, ref) {
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "avatar", "default");
   const isNeubrutal = theme === "neubrutal";
   const borderClass = isNeubrutal ? "border-2 border-black" : "";
-  const displayFallback = fallback != null ? fallback : alt ? getInitials(alt) : "?";
+  const displayFallback = fallback ?? (alt ? getInitials(alt) : "?");
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
-    __spreadProps(__spreadValues({
+    {
       ref,
       role: "img",
       "aria-label": alt || void 0,
@@ -3924,8 +3893,8 @@ var Avatar = (0, import_react6.forwardRef)(function Avatar2(_a, ref) {
         borderClass,
         className
       ),
-      style
-    }, props), {
+      style,
+      ...props,
       children: [
         src ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "img",
@@ -3938,36 +3907,31 @@ var Avatar = (0, import_react6.forwardRef)(function Avatar2(_a, ref) {
         ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, children: displayFallback }),
         children
       ]
-    })
+    }
   );
 });
-function AvatarGroup(_a) {
-  var _b = _a, {
-    children,
-    max = 4,
-    className,
-    theme: themeProp
-  } = _b, props = __objRest(_b, [
-    "children",
-    "max",
-    "className",
-    "theme"
-  ]);
+function AvatarGroup({
+  children,
+  max = 4,
+  className,
+  theme: themeProp,
+  ...props
+}) {
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "avatar", "default");
   const isNeubrutal = theme === "neubrutal";
-  const borderClass = isNeubrutal ? "border-2 border-black" : "border-2 border-white dark:border-zinc-900";
+  const borderClass = isNeubrutal ? "border-2 border-black" : "border-2 border-white";
   const childArray = Array.isArray(children) ? children : [children];
   const visible = childArray.slice(0, max);
   const remaining = childArray.length - max;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
-    __spreadProps(__spreadValues({
+    {
       className: cn("flex -space-x-2", className),
       role: "group",
-      "aria-label": "Avatar group"
-    }, props), {
+      "aria-label": "Avatar group",
+      ...props,
       children: [
         visible.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
@@ -3998,7 +3962,7 @@ function AvatarGroup(_a) {
           }
         )
       ]
-    })
+    }
   );
 }
 
@@ -4025,10 +3989,16 @@ var cva = (base, config) => (props) => {
     return acc;
   }, {});
   const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
-    let _a = param, { class: cvClass, className: cvClassName } = _a, compoundVariantOptions = __objRest(_a, ["class", "className"]);
+    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
     return Object.entries(compoundVariantOptions).every((param2) => {
       let [key, value] = param2;
-      return Array.isArray(value) ? value.includes(__spreadValues(__spreadValues({}, defaultVariants), propsWithoutUndefined)[key]) : __spreadValues(__spreadValues({}, defaultVariants), propsWithoutUndefined)[key] === value;
+      return Array.isArray(value) ? value.includes({
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key]) : {
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key] === value;
     }) ? [
       ...acc,
       cvClass,
@@ -4047,9 +4017,9 @@ var badgeVariants = cva(
     variants: {
       variant: {
         default: "",
-        success: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400",
-        warning: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400",
-        error: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
+        success: "bg-emerald-100 text-emerald-800",
+        warning: "bg-amber-100 text-amber-800",
+        error: "bg-red-100 text-red-800"
       }
     },
     defaultVariants: {
@@ -4057,33 +4027,36 @@ var badgeVariants = cva(
     }
   }
 );
-var Badge = (0, import_react7.forwardRef)(function Badge2(_a, ref) {
-  var _b = _a, {
-    children,
-    variant = "default",
-    dot = false,
-    className,
-    theme: themeProp
-  } = _b, props = __objRest(_b, [
-    "children",
-    "variant",
-    "dot",
-    "className",
-    "theme"
-  ]);
+var Badge = (0, import_react7.forwardRef)(function Badge2({
+  children,
+  variant = "default",
+  dot = false,
+  className,
+  theme: themeProp,
+  bgOverride,
+  textOverride,
+  style,
+  ...props
+}, ref) {
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = variant === "default" ? getThemeClass(theme, "badge", "default") : "";
+  const overrideStyle = {
+    ...style,
+    ...bgOverride != null && { backgroundColor: bgOverride },
+    ...textOverride != null && { color: textOverride }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "span",
-    __spreadProps(__spreadValues({
+    {
       ref,
       className: cn(
         badgeVariants({ variant }),
         variant === "default" && themeClass,
         className
-      )
-    }, props), {
+      ),
+      style: overrideStyle,
+      ...props,
       children: [
         dot && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "span",
@@ -4094,7 +4067,7 @@ var Badge = (0, import_react7.forwardRef)(function Badge2(_a, ref) {
         ),
         children
       ]
-    })
+    }
   );
 });
 
@@ -4139,11 +4112,10 @@ function Breadcrumbs({
   className,
   theme: themeProp
 }) {
-  var _a;
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "breadcrumbs", "default");
-  const sep = (_a = separator != null ? separator : defaultSeparators[theme]) != null ? _a : "/";
+  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: [
     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 })
@@ -4169,7 +4141,7 @@ var buttonVariants = cva(
   }
 );
 function ButtonInner(props, ref) {
-  const _a = props, {
+  const {
     as,
     variant = "primary",
     size = "md",
@@ -4180,25 +4152,14 @@ function ButtonInner(props, ref) {
     className,
     children,
     disabled,
-    type
-  } = _a, rest = __objRest(_a, [
-    "as",
-    "variant",
-    "size",
-    "loading",
-    "isLoading",
-    "leftIcon",
-    "rightIcon",
-    "className",
-    "children",
-    "disabled",
-    "type"
-  ]);
+    type,
+    ...rest
+  } = props;
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "button", variant);
-  const loadingState = isLoading != null ? isLoading : loading;
-  const isDisabled = disabled != null ? disabled : loadingState;
-  const Comp = as != null ? as : "button";
+  const loadingState = isLoading ?? loading;
+  const isDisabled = disabled ?? loadingState;
+  const Comp = as ?? "button";
   const isAnchor = Comp === "a";
   const combinedClassName = cn(
     buttonVariants({ size }),
@@ -4211,34 +4172,36 @@ function ButtonInner(props, ref) {
     "aria-busy": loadingState ? true : void 0
   };
   if (isAnchor) {
-    const _b = rest, { href } = _b, anchorRest = __objRest(_b, ["href"]);
+    const { href, ...anchorRest } = rest;
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "a",
-      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, common), {
+      {
+        ...common,
         href,
-        "aria-disabled": isDisabled ? true : void 0
-      }), anchorRest), {
+        "aria-disabled": isDisabled ? true : void 0,
+        ...anchorRest,
         children: [
           loadingState ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LoaderCircle, { className: "size-4 shrink-0 animate-spin", "aria-hidden": true }) : leftIcon,
           children,
           !loadingState && rightIcon
         ]
-      })
+      }
     );
   }
   const buttonRest = rest;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "button",
-    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, common), {
-      type: type != null ? type : "button",
-      disabled: isDisabled
-    }), buttonRest), {
+    {
+      ...common,
+      type: type ?? "button",
+      disabled: isDisabled,
+      ...buttonRest,
       children: [
         loadingState ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LoaderCircle, { className: "size-4 shrink-0 animate-spin", "aria-hidden": true }) : leftIcon,
         children,
         !loadingState && rightIcon
       ]
-    })
+    }
   );
 }
 var Button = (0, import_react8.forwardRef)(ButtonInner);
@@ -4285,15 +4248,15 @@ function Calendar({
   theme: themeProp
 }) {
   const [uncontrolled, setUncontrolled] = (0, import_react9.useState)(
-    () => defaultValue != null ? defaultValue : null
+    () => defaultValue ?? null
   );
   const isControlled = controlledValue !== void 0;
-  const value = isControlled ? controlledValue != null ? controlledValue : null : uncontrolled;
+  const value = isControlled ? controlledValue ?? null : uncontrolled;
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "calendar", "default");
   const [view2, setView] = (0, import_react9.useState)(() => {
-    const d = value != null ? value : /* @__PURE__ */ new Date();
+    const d = value ?? /* @__PURE__ */ new Date();
     return { year: d.getFullYear(), month: d.getMonth() };
   });
   const grid = (0, import_react9.useMemo)(
@@ -4326,7 +4289,7 @@ function Calendar({
     if (isDisabled(day)) return;
     const d = new Date(view2.year, view2.month, day);
     if (!isControlled) setUncontrolled(d);
-    onSelect == null ? void 0 : onSelect(d);
+    onSelect?.(d);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
@@ -4372,7 +4335,7 @@ function Calendar({
                 className: cn(
                   "py-2 rounded-md transition-colors",
                   isSelected(day) && "bg-current/20 font-semibold",
-                  !isSelected(day) && "hover:bg-black/5 dark:hover:bg-white/10",
+                  !isSelected(day) && (theme === "night" || theme === "cyberpunk" ? "hover:bg-white/10" : "hover:bg-black/5"),
                   isDisabled(day) && "opacity-40 cursor-not-allowed"
                 ),
                 children: day
@@ -4406,37 +4369,31 @@ var cardVariants = cva("rounded-xl", {
     isHoverable: false
   }
 });
-var Card = (0, import_react10.forwardRef)(function Card2(_a, ref) {
-  var _b = _a, {
-    header,
-    footer,
-    padding = "md",
-    isHoverable = false,
-    className,
-    theme: themeProp,
-    children
-  } = _b, props = __objRest(_b, [
-    "header",
-    "footer",
-    "padding",
-    "isHoverable",
-    "className",
-    "theme",
-    "children"
-  ]);
+var Card = (0, import_react10.forwardRef)(function Card2({
+  header,
+  footer,
+  padding = "md",
+  isHoverable = false,
+  className,
+  theme: themeProp,
+  classNames = {},
+  children,
+  ...props
+}, ref) {
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "card", "default");
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
-    __spreadProps(__spreadValues({
+    {
       ref,
       className: cn(
         cardVariants({ padding, isHoverable }),
         themeClass,
-        className
-      )
-    }, props), {
+        className,
+        classNames.root
+      ),
+      ...props,
       children: [
         header != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
@@ -4445,12 +4402,13 @@ var Card = (0, import_react10.forwardRef)(function Card2(_a, ref) {
               "border-b border-inherit first:rounded-t-xl [.rounded-xl_&]:rounded-t-xl",
               padding === "none" && "p-0",
               padding === "sm" && "p-4",
-              padding === "md" && "px-6 py-4"
+              padding === "md" && "px-6 py-4",
+              classNames.header
             ),
             children: header
           }
         ),
-        children,
+        classNames.body ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: classNames.body, children }) : children,
         footer != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
@@ -4458,13 +4416,14 @@ var Card = (0, import_react10.forwardRef)(function Card2(_a, ref) {
               "border-t border-inherit last:rounded-b-xl [.rounded-xl_&]:rounded-b-xl",
               padding === "none" && "p-0",
               padding === "sm" && "p-4",
-              padding === "md" && "px-6 py-4"
+              padding === "md" && "px-6 py-4",
+              classNames.footer
             ),
             children: footer
           }
         )
       ]
-    })
+    }
   );
 });
 
@@ -4481,6 +4440,27 @@ var SHELL_BG_BY_THEME = {
   retro: "bg-zinc-100 text-black font-mono",
   motion: "bg-gradient-to-br from-indigo-50 via-white to-purple-50 text-zinc-900"
 };
+var darkHeaderThemes = ["night", "cyberpunk", "glass"];
+function headerClasses(theme) {
+  return darkHeaderThemes.includes(theme) ? "border-b border-white/20 bg-zinc-950/90 text-zinc-100 backdrop-blur-xl" : "border-b border-zinc-200 bg-white/70 text-zinc-900 shadow-sm shadow-black/5 backdrop-blur-xl";
+}
+function navLinkClasses(theme, active) {
+  const base = "inline-flex items-center rounded-full px-4 py-1.5 font-medium transition-colors";
+  if (darkHeaderThemes.includes(theme)) {
+    return active ? cn(base, "bg-white/10 text-zinc-50") : cn(base, "text-zinc-300 hover:bg-white/10 hover:text-zinc-50");
+  }
+  return active ? cn(base, "bg-black/5 text-zinc-900") : cn(base, "text-zinc-600 hover:bg-black/5 hover:text-zinc-900");
+}
+function mobilePanelClasses(theme) {
+  const base = "border-t px-4 pb-4 pt-3 text-sm shadow-sm sm:hidden";
+  return darkHeaderThemes.includes(theme) ? cn(base, "border-zinc-800 bg-zinc-950") : cn(base, "border-zinc-200/60 bg-white/90");
+}
+function mobileNavLinkStateClasses(theme, active) {
+  if (darkHeaderThemes.includes(theme)) {
+    return active ? "bg-white/10 text-zinc-50" : "text-zinc-300 hover:bg-white/10 hover:text-zinc-50";
+  }
+  return active ? "bg-black/5 text-zinc-900" : "text-zinc-600 hover:bg-black/5 hover:text-zinc-900";
+}
 function DashboardShell({
   children,
   navItems,
@@ -4496,9 +4476,10 @@ function DashboardShell({
   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: "sticky top-0 z-40 border-b border-white/20 bg-white/70 text-zinc-900 shadow-sm shadow-black/5 backdrop-blur-xl dark:border-zinc-800 dark:bg-zinc-950/90 dark:text-zinc-100", 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)(
@@ -4506,35 +4487,52 @@ function DashboardShell({
             {
               type: "button",
               onClick: () => setMobileOpen((v) => !v),
-              className: "inline-flex h-9 w-9 items-center justify-center rounded-lg text-zinc-600 hover:bg-black/5 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800 sm:hidden",
+              className: cn(
+                "inline-flex h-9 w-9 items-center justify-center rounded-lg sm:hidden",
+                isDarkHeader ? "text-zinc-300 hover:bg-white/10" : "text-zinc-600 hover:bg-black/5 hover:text-zinc-900"
+              ),
               "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" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center gap-2", children: logo != null ? logo : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rounded-md bg-black px-2 py-1 text-xs font-semibold uppercase tracking-wide text-white dark:bg-white dark:text-black", children: "Dashboard" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center gap-2", children: logo ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "span",
+            {
+              className: cn(
+                "rounded-md px-2 py-1 text-xs font-semibold uppercase tracking-wide",
+                isDarkHeader ? "bg-white text-black" : "bg-black text-white"
+              ),
+              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)(
               "a",
               {
                 href: item.href,
-                className: cn(
-                  "inline-flex items-center rounded-full px-4 py-1.5 font-medium transition-colors",
-                  isActive(item.href) ? "bg-black/5 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50" : "text-zinc-600 hover:bg-black/5 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50"
-                ),
+                className: navLinkClasses(theme, isActive(item.href)),
                 children: item.label
               },
               item.href
             )),
             isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "mx-2 h-4 w-px bg-zinc-300/70 dark:bg-zinc-600" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "mx-2 h-4 w-px",
+                    isDarkHeader ? "bg-zinc-600" : "bg-zinc-300/70"
+                  )
+                }
+              ),
               adminNavItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "a",
                 {
                   href: item.href,
                   className: cn(
                     "inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium transition-colors",
-                    isActive(item.href) ? "bg-black/5 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50" : "text-zinc-600 hover:bg-black/5 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50"
+                    navLinkClasses(theme, isActive(item.href))
                   ),
                   children: item.label
                 },
@@ -4544,53 +4542,85 @@ 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)("span", { className: "hidden max-w-[160px] truncate text-zinc-500 dark:text-zinc-300 sm:inline", children: userEmail }),
+          userEmail && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "span",
+            {
+              className: cn(
+                "hidden max-w-[160px] truncate sm:inline",
+                isDarkHeader ? "text-zinc-300" : "text-zinc-500"
+              ),
+              children: userEmail
+            }
+          ),
           onLogout && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "button",
             {
               type: "button",
               onClick: onLogout,
-              className: "rounded-full px-3 py-1.5 font-medium text-zinc-600 transition-colors hover:bg-black/5 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 sm:px-4",
+              className: cn(
+                "rounded-full px-3 py-1.5 font-medium transition-colors sm:px-4",
+                mobileNavLinkStateClasses(theme, false)
+              ),
               children: "Logout"
             }
           )
         ] })
       ] }),
-      mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "border-t border-zinc-200/60 bg-white/90 px-4 pb-4 pt-3 text-sm shadow-sm dark:border-zinc-800 dark:bg-zinc-950 sm:hidden", children: [
+      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)(
           "a",
           {
             href: item.href,
             className: cn(
               "block rounded-lg px-4 py-2.5 font-medium transition-colors",
-              isActive(item.href) ? "bg-black/5 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50" : "text-zinc-600 hover:bg-black/5 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50"
+              mobileNavLinkStateClasses(theme, isActive(item.href))
             ),
             children: item.label
           },
           item.href
         )) }),
         isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "my-2 h-px bg-zinc-200 dark:bg-zinc-700" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "div",
+            {
+              className: cn(
+                "my-2 h-px",
+                isDarkHeader ? "bg-zinc-700" : "bg-zinc-200"
+              )
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-1", children: adminNavItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "a",
             {
               href: item.href,
               className: cn(
                 "block rounded-lg px-4 py-2.5 font-medium transition-colors",
-                isActive(item.href) ? "bg-black/5 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50" : "text-zinc-600 hover:bg-black/5 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50"
+                mobileNavLinkStateClasses(theme, isActive(item.href))
               ),
               children: item.label
             },
             item.href
           )) })
         ] }),
-        userEmail && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-3 border-t border-zinc-200 pt-3 text-xs text-zinc-500 dark:border-zinc-700 dark:text-zinc-400", children: userEmail }),
+        userEmail && /* @__PURE__ */ (0, import_jsx_runtime11.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: "mt-2 w-full rounded-lg px-4 py-2.5 text-left text-sm font-medium text-zinc-600 transition-colors hover:bg-black/5 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
+            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"
           }
         )
@@ -4614,7 +4644,7 @@ function CommandPalette({
   const [selected, setSelected] = (0, import_react12.useState)(0);
   const listRef = (0, import_react12.useRef)(null);
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "commandPalette", "default");
   const filtered = (0, import_react12.useMemo)(() => {
     if (!query.trim()) return commands;
@@ -4670,7 +4700,7 @@ function CommandPalette({
     const el = listRef.current;
     if (!el) return;
     const item = el.querySelector(`[data-index="${safeSelected}"]`);
-    item == null ? void 0 : item.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    item?.scrollIntoView({ block: "nearest", behavior: "smooth" });
   }, [safeSelected]);
   if (!open) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -4756,36 +4786,66 @@ function DocumentAccordion({
   theme: themeProp
 }) {
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const items = [
     {
       id: "document",
       title,
-      content: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "rounded-xl border border-black/5 bg-white/60 p-0 shadow-sm backdrop-blur-md dark:border-white/10 dark:bg-zinc-950/80", 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)(
-          "a",
-          {
-            href: pdfUrl,
-            target: "_blank",
-            rel: "noreferrer",
-            className: "inline-flex items-center gap-1 rounded-full border border-black/5 bg-white/70 px-3 py-1 text-xs font-medium text-blue-700 shadow-sm transition hover:bg-white dark:border-white/20 dark:bg-zinc-900/80 dark:text-sky-300",
-            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_runtime13.jsx)("div", { className: "h-[60vh] w-full border-t border-black/5 dark:border-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          "iframe",
-          {
-            src: `https://docs.google.com/viewer?url=${encodeURIComponent(
-              pdfUrl
-            )}&embedded=true`,
-            title: "Document preview",
-            className: "h-full w-full border-0"
-          }
-        ) })
-      ] }) : content ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "whitespace-pre-wrap p-4 text-sm leading-relaxed text-zinc-800 dark:text-zinc-100", children: content }) : null })
+      content: /* @__PURE__ */ (0, import_jsx_runtime13.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)(
+              "a",
+              {
+                href: pdfUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                className: cn(
+                  "inline-flex items-center gap-1 rounded-full border px-3 py-1 text-xs font-medium shadow-sm transition",
+                  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_runtime13.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)(
+                  "iframe",
+                  {
+                    src: `https://docs.google.com/viewer?url=${encodeURIComponent(
+                      pdfUrl
+                    )}&embedded=true`,
+                    title: "Document preview",
+                    className: "h-full w-full border-0"
+                  }
+                )
+              }
+            )
+          ] }) : content ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "div",
+            {
+              className: cn(
+                "whitespace-pre-wrap p-4 text-sm leading-relaxed",
+                theme === "night" || theme === "cyberpunk" ? "text-zinc-100" : "text-zinc-800"
+              ),
+              children: content
+            }
+          ) : null
+        }
+      )
     }
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -4833,10 +4893,7 @@ function DataTable({
           "tr",
           {
             className: "border-b border-inherit last:border-0",
-            children: columns.map((col) => {
-              var _a;
-              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { className: "px-4 py-3", children: col.render ? col.render(row) : String((_a = row[col.key]) != null ? _a : "") }, String(col.key));
-            })
+            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
         )) })
@@ -4860,23 +4917,23 @@ function useKeyboardNavigation(options) {
     (e) => {
       if (!enabled) return;
       if (e.key === "Escape") {
-        onEscape == null ? void 0 : onEscape(e);
+        onEscape?.(e);
         return;
       }
       if (e.key === "ArrowDown") {
-        onArrowDown == null ? void 0 : onArrowDown(e);
+        onArrowDown?.(e);
         return;
       }
       if (e.key === "ArrowUp") {
-        onArrowUp == null ? void 0 : onArrowUp(e);
+        onArrowUp?.(e);
         return;
       }
       if (e.key === "ArrowLeft") {
-        onArrowLeft == null ? void 0 : onArrowLeft(e);
+        onArrowLeft?.(e);
         return;
       }
       if (e.key === "ArrowRight") {
-        onArrowRight == null ? void 0 : onArrowRight(e);
+        onArrowRight?.(e);
       }
     },
     [enabled, onEscape, onArrowDown, onArrowUp, onArrowLeft, onArrowRight]
@@ -4898,7 +4955,7 @@ function getNextListIndex(current, direction, length) {
 // src/hooks/useClickOutside.ts
 var import_react14 = require("react");
 function useClickOutside(ref, handler, options) {
-  const enabled = (options == null ? void 0 : options.enabled) !== false;
+  const enabled = options?.enabled !== false;
   const handle = (0, import_react14.useCallback)(
     (e) => {
       const target = e.target;
@@ -4923,43 +4980,84 @@ function useClickOutside(ref, handler, options) {
 
 // components/Dropdown.tsx
 var import_react15 = 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({
-  trigger,
+  trigger: triggerProp,
+  placeholder = "Select\u2026",
   items,
   value: controlledValue,
   defaultValue,
   onValueChange,
   className,
   style,
-  theme: themeProp
+  theme: themeProp,
+  classNames = {}
 }) {
   const [open, setOpen] = (0, import_react15.useState)(false);
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react15.useState)(defaultValue != null ? defaultValue : "");
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react15.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 { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "card", "default");
+  const itemHighlightClass = dropdownItemHighlightClass(theme);
+  const updatePosition = (0, import_react15.useCallback)(() => {
+    const triggerEl = triggerRef.current;
+    if (!triggerEl) return;
+    const rect = triggerEl.getBoundingClientRect();
+    const viewportH = window.innerHeight;
+    const spaceBelow = viewportH - rect.bottom;
+    const spaceAbove = rect.top;
+    const openDown = spaceBelow >= spaceAbove;
+    setPopoverStyle({
+      position: "fixed",
+      left: rect.left,
+      width: Math.max(rect.width, 128),
+      ...openDown ? { top: rect.bottom + 4 } : { bottom: viewportH - rect.top + 4 },
+      zIndex: 9999
+    });
+  }, []);
+  (0, import_react15.useLayoutEffect)(() => {
+    if (open) {
+      updatePosition();
+    }
+  }, [open, updatePosition, items.length]);
+  (0, import_react15.useEffect)(() => {
+    if (!open) return;
+    const onScrollOrResize = () => updatePosition();
+    window.addEventListener("scroll", onScrollOrResize, true);
+    window.addEventListener("resize", onScrollOrResize);
+    return () => {
+      window.removeEventListener("scroll", onScrollOrResize, true);
+      window.removeEventListener("resize", onScrollOrResize);
+    };
+  }, [open, updatePosition]);
   useClickOutside(
-    containerRef,
+    [containerRef, listRef],
     (0, import_react15.useCallback)(() => setOpen(false), []),
     { enabled: open }
   );
   const setValue = (0, import_react15.useCallback)(
     (v) => {
       if (!isControlled) setUncontrolledValue(v);
-      onValueChange == null ? void 0 : onValueChange(v);
+      onValueChange?.(v);
     },
     [isControlled, onValueChange]
   );
   const selectIndex = (0, import_react15.useCallback)(
     (index) => {
       const item = items[index];
-      if (item == null ? void 0 : item.disabled) return;
+      if (item?.disabled) return;
       setValue(item.value);
       setOpen(false);
       setHighlightedIndex(-1);
@@ -4976,7 +5074,6 @@ function Dropdown({
   }, [open, displayValue, items]);
   const handleKeyDown = (0, import_react15.useCallback)(
     (e) => {
-      var _a, _b, _c, _d, _e, _f;
       if (!open) {
         if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
           e.preventDefault();
@@ -4994,14 +5091,14 @@ function Dropdown({
         e.preventDefault();
         const next = getNextListIndex(highlightedIndex, "down", items.length);
         setHighlightedIndex(next);
-        (_c = (_b = (_a = listRef.current) == null ? void 0 : _a.querySelectorAll("[role='option']")[next]) == null ? void 0 : _b.scrollIntoView) == null ? void 0 : _c.call(_b, { block: "nearest" });
+        listRef.current?.querySelectorAll("[role='option']")[next]?.scrollIntoView?.({ block: "nearest" });
         return;
       }
       if (e.key === "ArrowUp") {
         e.preventDefault();
         const next = getNextListIndex(highlightedIndex, "up", items.length);
         setHighlightedIndex(next);
-        (_f = (_e = (_d = listRef.current) == null ? void 0 : _d.querySelectorAll("[role='option']")[next]) == null ? void 0 : _e.scrollIntoView) == null ? void 0 : _f.call(_e, { block: "nearest" });
+        listRef.current?.querySelectorAll("[role='option']")[next]?.scrollIntoView?.({ block: "nearest" });
         return;
       }
       if (e.key === "Enter" || e.key === " ") {
@@ -5011,6 +5108,55 @@ function Dropdown({
     },
     [open, highlightedIndex, items.length, selectIndex]
   );
+  const selectedLabel = displayValue ? items.find((i) => i.value === displayValue)?.label ?? displayValue : placeholder;
+  const defaultTrigger = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "span",
+    {
+      className: cn(
+        "inline-flex min-w-[8rem] cursor-pointer items-center justify-between rounded-lg border border-transparent px-3 py-2 text-sm font-medium transition-colors",
+        itemHighlightClass,
+        classNames.trigger
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "truncate", children: selectedLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ml-1 shrink-0 opacity-70", "aria-hidden": true, children: "\u25BE" })
+      ]
+    }
+  );
+  const trigger = triggerProp ?? defaultTrigger;
+  const popover = open ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "ul",
+    {
+      ref: listRef,
+      role: "listbox",
+      className: cn(
+        "max-h-60 overflow-auto rounded-lg py-1 shadow-lg",
+        themeClass,
+        classNames.popover
+      ),
+      style: popoverStyle,
+      children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "li",
+        {
+          id: `dropdown-option-${item.value}`,
+          role: "option",
+          "aria-selected": displayValue === item.value,
+          "aria-disabled": item.disabled,
+          className: cn(
+            "cursor-pointer px-3 py-2 text-sm outline-none",
+            itemHighlightClass,
+            highlightedIndex === i && (theme === "night" || theme === "cyberpunk" ? "bg-white/10" : "bg-black/5"),
+            item.disabled && "pointer-events-none opacity-50",
+            classNames.item
+          ),
+          onClick: () => !item.disabled && selectIndex(i),
+          onMouseEnter: () => setHighlightedIndex(i),
+          children: item.label
+        },
+        item.value
+      ))
+    }
+  ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
@@ -5022,6 +5168,7 @@ function Dropdown({
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "div",
           {
+            ref: triggerRef,
             role: "button",
             tabIndex: 0,
             "aria-haspopup": "listbox",
@@ -5031,35 +5178,7 @@ function Dropdown({
             children: trigger
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "ul",
-          {
-            ref: listRef,
-            role: "listbox",
-            className: cn(
-              "absolute z-50 mt-1 max-h-60 w-full min-w-[8rem] overflow-auto rounded-lg py-1 shadow-lg",
-              themeClass
-            ),
-            children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              "li",
-              {
-                id: `dropdown-option-${item.value}`,
-                role: "option",
-                "aria-selected": displayValue === item.value,
-                "aria-disabled": item.disabled,
-                className: cn(
-                  "cursor-pointer px-3 py-2 text-sm outline-none focus:bg-black/5 focus:dark:bg-white/10",
-                  highlightedIndex === i && "bg-black/5 dark:bg-white/10",
-                  item.disabled && "pointer-events-none opacity-50"
-                ),
-                onClick: () => !item.disabled && selectIndex(i),
-                onMouseEnter: () => setHighlightedIndex(i),
-                children: item.label
-              },
-              item.value
-            ))
-          }
-        )
+        typeof document !== "undefined" && (0, import_react_dom.createPortal)(popover, document.body)
       ]
     }
   );
@@ -5337,7 +5456,10 @@ for (const key in featureProps) {
 // node_modules/framer-motion/dist/es/motion/features/load-features.mjs
 function loadFeatures(features) {
   for (const key in features) {
-    featureDefinitions[key] = __spreadValues(__spreadValues({}, featureDefinitions[key]), features[key]);
+    featureDefinitions[key] = {
+      ...featureDefinitions[key],
+      ...features[key]
+    };
   }
 }
 
@@ -5655,9 +5777,11 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
   preloadedFeatures && loadFeatures(preloadedFeatures);
   function MotionComponent(props, externalRef) {
     let MeasureLayout2;
-    const configAndProps = __spreadProps(__spreadValues(__spreadValues({}, (0, import_react28.useContext)(MotionConfigContext)), props), {
+    const configAndProps = {
+      ...(0, import_react28.useContext)(MotionConfigContext),
+      ...props,
       layoutId: useLayoutId(props)
-    });
+    };
     const { isStatic } = configAndProps;
     const context = useCreateMotionContext(props);
     const visualState = useVisualState(props, isStatic);
@@ -5667,7 +5791,7 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
       MeasureLayout2 = layoutProjection.MeasureLayout;
       context.visualElement = useVisualElement(Component2, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
     }
-    return (0, import_jsx_runtime16.jsxs)(MotionContext.Provider, { value: context, children: [MeasureLayout2 && context.visualElement ? (0, import_jsx_runtime16.jsx)(MeasureLayout2, __spreadValues({ visualElement: context.visualElement }, configAndProps)) : null, useRender(Component2, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] });
+    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);
@@ -5689,7 +5813,7 @@ function getProjectionFunctionality(props) {
   const { drag: drag2, layout: layout2 } = featureDefinitions;
   if (!drag2 && !layout2)
     return {};
-  const combined = __spreadValues(__spreadValues({}, drag2), layout2);
+  const combined = { ...drag2, ...layout2 };
   return {
     MeasureLayout: (drag2 === null || drag2 === void 0 ? void 0 : drag2.isEnabled(props)) || (layout2 === null || layout2 === void 0 ? void 0 : layout2.isEnabled(props)) ? combined.MeasureLayout : void 0,
     ProjectionNode: combined.ProjectionNode
@@ -5808,7 +5932,7 @@ function makeState({ scrapeMotionValuesFromProps: scrapeMotionValuesFromProps3,
     renderState: createRenderState()
   };
   if (onUpdate) {
-    state.onMount = (instance) => onUpdate(__spreadValues({ props, current: instance }, state));
+    state.onMount = (instance) => onUpdate({ props, current: instance, ...state });
     state.onUpdate = (visualElement) => onUpdate(visualElement);
   }
   return state;
@@ -5842,7 +5966,7 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     for (let i = 0; i < list.length; i++) {
       const resolved = resolveVariantFromProps(props, list[i]);
       if (resolved) {
-        const _a = resolved, { transitionEnd, transition } = _a, target = __objRest(_a, ["transitionEnd", "transition"]);
+        const { transitionEnd, transition, ...target } = resolved;
         for (const key in target) {
           let valueTarget = target[key];
           if (Array.isArray(valueTarget)) {
@@ -5916,12 +6040,14 @@ var number = {
   parse: parseFloat,
   transform: (v) => v
 };
-var alpha = __spreadProps(__spreadValues({}, number), {
+var alpha = {
+  ...number,
   transform: (v) => clamp(0, 1, v)
-});
-var scale = __spreadProps(__spreadValues({}, number), {
+};
+var scale = {
+  ...number,
   default: 1
-});
+};
 
 // node_modules/framer-motion/dist/es/value/types/numbers/units.mjs
 var createUnitType = (unit) => ({
@@ -5934,10 +6060,11 @@ var percent = /* @__PURE__ */ createUnitType("%");
 var px = /* @__PURE__ */ createUnitType("px");
 var vh = /* @__PURE__ */ createUnitType("vh");
 var vw = /* @__PURE__ */ createUnitType("vw");
-var progressPercentage = __spreadProps(__spreadValues({}, percent), {
+var progressPercentage = {
+  ...percent,
   parse: (v) => percent.parse(v) / 100,
   transform: (v) => percent.transform(v * 100)
-});
+};
 
 // node_modules/framer-motion/dist/es/render/dom/value-types/number-browser.mjs
 var browserNumberValueTypes = {
@@ -6007,19 +6134,22 @@ var transformValueTypes = {
 };
 
 // node_modules/framer-motion/dist/es/render/dom/value-types/type-int.mjs
-var int = __spreadProps(__spreadValues({}, number), {
+var int = {
+  ...number,
   transform: Math.round
-});
+};
 
 // node_modules/framer-motion/dist/es/render/dom/value-types/number.mjs
-var numberValueTypes = __spreadProps(__spreadValues(__spreadValues({}, browserNumberValueTypes), transformValueTypes), {
+var numberValueTypes = {
+  ...browserNumberValueTypes,
+  ...transformValueTypes,
   zIndex: int,
   size: px,
   // SVG
   fillOpacity: alpha,
   strokeOpacity: alpha,
   numOctaves: int
-});
+};
 
 // node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs
 var translateAlias = {
@@ -6129,26 +6259,18 @@ function calcSVGTransformOrigin(dimensions, originX, originY) {
 }
 
 // node_modules/framer-motion/dist/es/render/svg/utils/build-attrs.mjs
-function buildSVGAttrs(state, _a, isSVGTag2, transformTemplate) {
-  var _b = _a, {
-    attrX,
-    attrY,
-    attrScale,
-    originX,
-    originY,
-    pathLength,
-    pathSpacing = 1,
-    pathOffset = 0
-  } = _b, latest = __objRest(_b, [
-    "attrX",
-    "attrY",
-    "attrScale",
-    "originX",
-    "originY",
-    "pathLength",
-    "pathSpacing",
-    "pathOffset"
-  ]);
+function buildSVGAttrs(state, {
+  attrX,
+  attrY,
+  attrScale,
+  originX,
+  originY,
+  pathLength,
+  pathSpacing = 1,
+  pathOffset = 0,
+  // This is object creation, which we try to avoid per-frame.
+  ...latest
+}, isSVGTag2, transformTemplate) {
   buildHTMLStyles(state, latest, transformTemplate);
   if (isSVGTag2) {
     if (state.style.viewBox) {
@@ -6187,7 +6309,8 @@ var createHtmlRenderState = () => ({
 });
 
 // node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.mjs
-var createSvgRenderState = () => __spreadProps(__spreadValues({}, createHtmlRenderState()), {
+var createSvgRenderState = () => ({
+  ...createHtmlRenderState(),
   attrs: {}
 });
 
@@ -6382,14 +6505,15 @@ function useSVGProps(props, visualState, _isStatic, Component2) {
   const visualProps = (0, import_react31.useMemo)(() => {
     const state = createSvgRenderState();
     buildSVGAttrs(state, visualState, isSVGTag(Component2), props.transformTemplate);
-    return __spreadProps(__spreadValues({}, state.attrs), {
-      style: __spreadValues({}, state.style)
-    });
+    return {
+      ...state.attrs,
+      style: { ...state.style }
+    };
   }, [visualState]);
   if (props.style) {
     const rawStyles = {};
     copyRawValuesOnly(rawStyles, props.style, props);
-    visualProps.style = __spreadValues(__spreadValues({}, rawStyles), visualProps.style);
+    visualProps.style = { ...rawStyles, ...visualProps.style };
   }
   return visualProps;
 }
@@ -6400,12 +6524,13 @@ 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 ? __spreadProps(__spreadValues(__spreadValues({}, filteredProps), visualProps), { ref }) : {};
+    const elementProps = Component2 !== import_react32.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, __spreadProps(__spreadValues({}, elementProps), {
+    return (0, import_react32.createElement)(Component2, {
+      ...elementProps,
       children: renderedChildren
-    }));
+    });
   };
   return useRender;
 }
@@ -6414,12 +6539,13 @@ function createUseRender(forwardMotionProps = false) {
 function createMotionComponentFactory(preloadedFeatures, createVisualElement) {
   return function createMotionComponent2(Component2, { forwardMotionProps } = { forwardMotionProps: false }) {
     const baseConfig = isSVGComponent(Component2) ? svgMotionConfig : htmlMotionConfig;
-    const config = __spreadProps(__spreadValues({}, baseConfig), {
+    const config = {
+      ...baseConfig,
       preloadedFeatures,
       useRender: createUseRender(forwardMotionProps),
       createVisualElement,
       Component: Component2
-    });
+    };
     return createRendererMotionComponent(config);
   };
 }
@@ -6656,11 +6782,11 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
 function setupGesture(elementOrSelector, options) {
   const elements = resolveElements(elementOrSelector);
   const gestureAbortController = new AbortController();
-  const eventOptions = __spreadProps(__spreadValues({
-    passive: true
-  }, options), {
+  const eventOptions = {
+    passive: true,
+    ...options,
     signal: gestureAbortController.signal
-  });
+  };
   const cancel = () => gestureAbortController.abort();
   return [elements, eventOptions, cancel];
 }
@@ -7182,8 +7308,8 @@ function setMotionValue(visualElement, key, value) {
 }
 function setTarget(visualElement, definition) {
   const resolved = resolveVariant(visualElement, definition);
-  let _a = resolved || {}, { transitionEnd = {}, transition = {} } = _a, target = __objRest(_a, ["transitionEnd", "transition"]);
-  target = __spreadValues(__spreadValues({}, target), transitionEnd);
+  let { transitionEnd = {}, transition = {}, ...target } = resolved || {};
+  target = { ...target, ...transitionEnd };
   for (const key in target) {
     const value = resolveFinalValueInKeyframes(target[key]);
     setMotionValue(visualElement, key, value);
@@ -7304,9 +7430,10 @@ var splitColor = (aName, bName, cName) => (v) => {
 
 // node_modules/framer-motion/dist/es/value/types/color/rgba.mjs
 var clampRgbUnit = (v) => clamp(0, 255, v);
-var rgbUnit = __spreadProps(__spreadValues({}, number), {
+var rgbUnit = {
+  ...number,
   transform: (v) => Math.round(clampRgbUnit(v))
-});
+};
 var rgba = {
   test: /* @__PURE__ */ isColorString("rgb", "red"),
   parse: /* @__PURE__ */ splitColor("red", "green", "blue"),
@@ -7470,15 +7597,17 @@ function applyDefaultFilter(v) {
   return name + "(" + defaultValue + unit + ")";
 }
 var functionRegex = /\b([a-z-]*)\(.*?\)/gu;
-var filter = __spreadProps(__spreadValues({}, complex), {
+var filter = {
+  ...complex,
   getAnimatableNone: (v) => {
     const functions = v.match(functionRegex);
     return functions ? functions.map(applyDefaultFilter).join(" ") : v;
   }
-});
+};
 
 // node_modules/framer-motion/dist/es/render/dom/value-types/defaults.mjs
-var defaultValueTypes = __spreadProps(__spreadValues({}, numberValueTypes), {
+var defaultValueTypes = {
+  ...numberValueTypes,
   // Color props
   color,
   backgroundColor: color,
@@ -7493,7 +7622,7 @@ var defaultValueTypes = __spreadProps(__spreadValues({}, numberValueTypes), {
   borderLeftColor: color,
   filter,
   WebkitFilter: filter
-});
+};
 var getDefaultValueType = (key) => defaultValueTypes[key];
 
 // node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs
@@ -7885,19 +8014,19 @@ function getFinalKeyframe(keyframes2, { repeat, repeatType = "loop" }, finalKeyf
 // node_modules/framer-motion/dist/es/animation/animators/BaseAnimation.mjs
 var MAX_RESOLVE_DELAY = 40;
 var BaseAnimation = class {
-  constructor(_a) {
-    var _b = _a, { autoplay = true, delay: delay2 = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop" } = _b, options = __objRest(_b, ["autoplay", "delay", "type", "repeat", "repeatDelay", "repeatType"]);
+  constructor({ autoplay = true, delay: delay2 = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", ...options }) {
     this.isStopped = false;
     this.hasAttemptedResolve = false;
     this.createdAt = time.now();
-    this.options = __spreadValues({
+    this.options = {
       autoplay,
       delay: delay2,
       type,
       repeat,
       repeatDelay,
-      repeatType
-    }, options);
+      repeatType,
+      ...options
+    };
     this.updateFinishedPromise();
   }
   /**
@@ -7948,10 +8077,11 @@ var BaseAnimation = class {
     const resolvedAnimation = this.initPlayback(keyframes2, finalKeyframe);
     if (resolvedAnimation === false)
       return;
-    this._resolved = __spreadValues({
+    this._resolved = {
       keyframes: keyframes2,
-      finalKeyframe
-    }, resolvedAnimation);
+      finalKeyframe,
+      ...resolvedAnimation
+    };
     this.onPostResolved();
   }
   onPostResolved() {
@@ -8048,7 +8178,7 @@ var mixColor = (from, to) => {
   if (!fromRGBA || !toRGBA) {
     return mixImmediate(from, to);
   }
-  const blended = __spreadValues({}, fromRGBA);
+  const blended = { ...fromRGBA };
   return (v) => {
     blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
     blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
@@ -8100,7 +8230,7 @@ function mixArray(a, b) {
   };
 }
 function mixObject(a, b) {
-  const output = __spreadValues(__spreadValues({}, a), b);
+  const output = { ...a, ...b };
   const blendValue = {};
   for (const key in output) {
     if (a[key] !== void 0 && b[key] !== void 0) {
@@ -8267,29 +8397,33 @@ function isSpringType(options, keys) {
   return keys.some((key) => options[key] !== void 0);
 }
 function getSpringOptions(options) {
-  let springOptions = __spreadValues({
+  let springOptions = {
     velocity: springDefaults.velocity,
     stiffness: springDefaults.stiffness,
     damping: springDefaults.damping,
     mass: springDefaults.mass,
-    isResolvedFromDuration: false
-  }, options);
+    isResolvedFromDuration: false,
+    ...options
+  };
   if (!isSpringType(options, physicsKeys) && isSpringType(options, durationKeys)) {
     if (options.visualDuration) {
       const visualDuration = options.visualDuration;
       const root = 2 * Math.PI / (visualDuration * 1.2);
       const stiffness = root * root;
       const damping = 2 * clamp(0.05, 1, 1 - (options.bounce || 0)) * Math.sqrt(stiffness);
-      springOptions = __spreadProps(__spreadValues({}, springOptions), {
+      springOptions = {
+        ...springOptions,
         mass: springDefaults.mass,
         stiffness,
         damping
-      });
+      };
     } else {
       const derived = findSpring(options);
-      springOptions = __spreadProps(__spreadValues(__spreadValues({}, springOptions), derived), {
+      springOptions = {
+        ...springOptions,
+        ...derived,
         mass: springDefaults.mass
-      });
+      };
       springOptions.isResolvedFromDuration = true;
     }
   }
@@ -8305,9 +8439,10 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
   const origin = options.keyframes[0];
   const target = options.keyframes[options.keyframes.length - 1];
   const state = { done: false, value: origin };
-  const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration } = getSpringOptions(__spreadProps(__spreadValues({}, options), {
+  const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration } = getSpringOptions({
+    ...options,
     velocity: -millisecondsToSeconds(options.velocity || 0)
-  }));
+  });
   const initialVelocity = velocity || 0;
   const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
   const initialDelta = target - origin;
@@ -8620,12 +8755,13 @@ var MainThreadAnimation = class extends BaseAnimation {
       mapPercentToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
       keyframes$1 = [0, 100];
     }
-    const generator = generatorFactory(__spreadProps(__spreadValues({}, this.options), { keyframes: keyframes$1 }));
+    const generator = generatorFactory({ ...this.options, keyframes: keyframes$1 });
     if (repeatType === "mirror") {
-      mirroredGenerator = generatorFactory(__spreadProps(__spreadValues({}, this.options), {
+      mirroredGenerator = generatorFactory({
+        ...this.options,
         keyframes: [...keyframes$1].reverse(),
         velocity: -velocity
-      }));
+      });
     }
     if (generator.calculatedDuration === null) {
       generator.calculatedDuration = calcGeneratorDuration(generator);
@@ -8868,12 +9004,13 @@ function requiresPregeneratedKeyframes(options) {
   return isGenerator(options.type) || options.type === "spring" || !isWaapiSupportedEasing(options.ease);
 }
 function pregenerateKeyframes(keyframes2, options) {
-  const sampleAnimation = new MainThreadAnimation(__spreadProps(__spreadValues({}, options), {
+  const sampleAnimation = new MainThreadAnimation({
+    ...options,
     keyframes: keyframes2,
     repeat: 0,
     delay: 0,
     isGenerator: true
-  }));
+  });
   let state = { done: false, value: keyframes2[0] };
   const pregeneratedKeyframes = [];
   let t = 0;
@@ -8913,7 +9050,7 @@ var AcceleratedAnimation = class extends BaseAnimation {
       ease2 = unsupportedEasingFunctions[ease2];
     }
     if (requiresPregeneratedKeyframes(this.options)) {
-      const _a = this.options, { onComplete, onUpdate, motionValue: motionValue3, element } = _a, options = __objRest(_a, ["onComplete", "onUpdate", "motionValue", "element"]);
+      const { onComplete, onUpdate, motionValue: motionValue3, element, ...options } = this.options;
       const pregeneratedAnimation = pregenerateKeyframes(keyframes2, options);
       keyframes2 = pregeneratedAnimation.keyframes;
       if (keyframes2.length === 1) {
@@ -8924,7 +9061,7 @@ var AcceleratedAnimation = class extends BaseAnimation {
       ease2 = pregeneratedAnimation.ease;
       type = "keyframes";
     }
-    const animation = startWaapiAnimation(motionValue2.owner.current, name, keyframes2, __spreadProps(__spreadValues({}, this.options), { duration, times, ease: ease2 }));
+    const animation = startWaapiAnimation(motionValue2.owner.current, name, keyframes2, { ...this.options, duration, times, ease: ease2 });
     animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
     if (this.pendingTimeline) {
       attachTimeline(animation, this.pendingTimeline);
@@ -9046,15 +9183,16 @@ var AcceleratedAnimation = class extends BaseAnimation {
       return;
     }
     if (this.time) {
-      const _a = this.options, { motionValue: motionValue2, onUpdate, onComplete, element } = _a, options = __objRest(_a, ["motionValue", "onUpdate", "onComplete", "element"]);
-      const sampleAnimation = new MainThreadAnimation(__spreadProps(__spreadValues({}, options), {
+      const { motionValue: motionValue2, onUpdate, onComplete, element, ...options } = this.options;
+      const sampleAnimation = new MainThreadAnimation({
+        ...options,
         keyframes: keyframes2,
         duration,
         type,
         ease: ease2,
         times,
         isGenerator: true
-      }));
+      });
       const sampleTime = secondsToMilliseconds(this.time);
       motionValue2.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
     }
@@ -9120,8 +9258,7 @@ var getDefaultTransition = (valueKey, { keyframes: keyframes2 }) => {
 };
 
 // node_modules/framer-motion/dist/es/animation/utils/is-transition-defined.mjs
-function isTransitionDefined(_a) {
-  var _b = _a, { when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed } = _b, transition = __objRest(_b, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from", "elapsed"]);
+function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
   return !!Object.keys(transition).length;
 }
 
@@ -9131,11 +9268,11 @@ var animateMotionValue = (name, value, target, transition = {}, element, isHando
   const delay2 = valueTransition.delay || transition.delay || 0;
   let { elapsed = 0 } = transition;
   elapsed = elapsed - secondsToMilliseconds(delay2);
-  let options = __spreadProps(__spreadValues({
+  let options = {
     keyframes: Array.isArray(target) ? target : [null, target],
     ease: "easeOut",
-    velocity: value.getVelocity()
-  }, valueTransition), {
+    velocity: value.getVelocity(),
+    ...valueTransition,
     delay: -elapsed,
     onUpdate: (v) => {
       value.set(v);
@@ -9148,9 +9285,12 @@ var animateMotionValue = (name, value, target, transition = {}, element, isHando
     name,
     motionValue: value,
     element: isHandoff ? void 0 : element
-  });
+  };
   if (!isTransitionDefined(valueTransition)) {
-    options = __spreadValues(__spreadValues({}, options), getDefaultTransition(name, options));
+    options = {
+      ...options,
+      ...getDefaultTransition(name, options)
+    };
   }
   if (options.duration) {
     options.duration = secondsToMilliseconds(options.duration);
@@ -9198,7 +9338,7 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
 }
 function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0, transitionOverride, type } = {}) {
   var _a;
-  let _a2 = targetAndTransition, { transition = visualElement.getDefaultTransition(), transitionEnd } = _a2, target = __objRest(_a2, ["transition", "transitionEnd"]);
+  let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
   if (transitionOverride)
     transition = transitionOverride;
   const animations2 = [];
@@ -9209,9 +9349,10 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
     if (valueTarget === void 0 || animationTypeState && shouldBlockAnimation(animationTypeState, key)) {
       continue;
     }
-    const valueTransition = __spreadValues({
-      delay: delay2
-    }, getValueTransition(transition || {}, key));
+    const valueTransition = {
+      delay: delay2,
+      ...getValueTransition(transition || {}, key)
+    };
     let isHandoff = false;
     if (window.MotionHandoffAnimation) {
       const appearId = getOptimisedAppearId(visualElement);
@@ -9267,9 +9408,10 @@ function animateChildren(visualElement, variant, delayChildren = 0, staggerChild
   const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
   Array.from(visualElement.variantChildren).sort(sortByTreeOrder).forEach((child, i) => {
     child.notify("AnimationStart", variant);
-    animations2.push(animateVariant(child, variant, __spreadProps(__spreadValues({}, options), {
+    animations2.push(animateVariant(child, variant, {
+      ...options,
       delay: delayChildren + generateStaggerDuration(i)
-    })).then(() => child.notify("AnimationComplete", variant)));
+    }).then(() => child.notify("AnimationComplete", variant)));
   });
   return Promise.all(animations2);
 }
@@ -9332,8 +9474,8 @@ function createAnimationState(visualElement) {
     var _a;
     const resolved = resolveVariant(visualElement, definition, type === "exit" ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom : void 0);
     if (resolved) {
-      const _a2 = resolved, { transition, transitionEnd } = _a2, target = __objRest(_a2, ["transition", "transitionEnd"]);
-      acc = __spreadValues(__spreadValues(__spreadValues({}, acc), target), transitionEnd);
+      const { transition, transitionEnd, ...target } = resolved;
+      acc = { ...acc, ...target, ...transitionEnd };
     }
     return acc;
   };
@@ -9359,7 +9501,7 @@ function createAnimationState(visualElement) {
       if (isInherited && isInitialRender && visualElement.manuallyAnimateOnMount) {
         isInherited = false;
       }
-      typeState.protectedKeys = __spreadValues({}, encounteredKeys);
+      typeState.protectedKeys = { ...encounteredKeys };
       if (
         // If it isn't active and hasn't *just* been set as inactive
         !typeState.isActive && activeDelta === null || // If we didn't and don't have any defined prop for this animation type
@@ -9378,7 +9520,10 @@ function createAnimationState(visualElement) {
       if (activeDelta === false)
         resolvedValues = {};
       const { prevResolvedValues = {} } = typeState;
-      const allKeys = __spreadValues(__spreadValues({}, prevResolvedValues), resolvedValues);
+      const allKeys = {
+        ...prevResolvedValues,
+        ...resolvedValues
+      };
       const markToAnimate = (key) => {
         shouldAnimateType = true;
         if (removedKeys.has(key)) {
@@ -9416,7 +9561,7 @@ function createAnimationState(visualElement) {
       typeState.prevProp = prop;
       typeState.prevResolvedValues = resolvedValues;
       if (typeState.isActive) {
-        encounteredKeys = __spreadValues(__spreadValues({}, encounteredKeys), resolvedValues);
+        encounteredKeys = { ...encounteredKeys, ...resolvedValues };
       }
       if (isInitialRender && visualElement.blockInitialAnimation) {
         shouldAnimateType = false;
@@ -9639,7 +9784,7 @@ var PanSession = class {
         return;
       const { point: point2 } = info2;
       const { timestamp: timestamp2 } = frameData;
-      this.history.push(__spreadProps(__spreadValues({}, point2), { timestamp: timestamp2 }));
+      this.history.push({ ...point2, timestamp: timestamp2 });
       const { onStart, onMove } = this.handlers;
       if (!isPanStarted) {
         onStart && onStart(this.lastMoveEvent, info2);
@@ -9675,7 +9820,7 @@ var PanSession = class {
     const initialInfo = transformPoint(info, this.transformPagePoint);
     const { point } = initialInfo;
     const { timestamp } = frameData;
-    this.history = [__spreadProps(__spreadValues({}, point), { timestamp })];
+    this.history = [{ ...point, timestamp }];
     const { onSessionStart } = handlers;
     onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
     this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
@@ -10209,15 +10354,17 @@ var VisualElementDragControls = class {
         transition = { min: 0, max: 0 };
       const bounceStiffness = dragElastic ? 200 : 1e6;
       const bounceDamping = dragElastic ? 40 : 1e7;
-      const inertia2 = __spreadValues(__spreadValues({
+      const inertia2 = {
         type: "inertia",
         velocity: dragMomentum ? velocity[axis] : 0,
         bounceStiffness,
         bounceDamping,
         timeConstant: 750,
         restDelta: 1,
-        restSpeed: 10
-      }, dragTransition), transition);
+        restSpeed: 10,
+        ...dragTransition,
+        ...transition
+      };
       return this.startAxisValueAnimation(axis, inertia2);
     });
     return Promise.all(momentumAnimations).then(onDragTransitionEnd);
@@ -10344,14 +10491,15 @@ var VisualElementDragControls = class {
   getProps() {
     const props = this.visualElement.getProps();
     const { drag: drag2 = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true } = props;
-    return __spreadProps(__spreadValues({}, props), {
+    return {
+      ...props,
       drag: drag2,
       dragDirectionLock,
       dragPropagation,
       dragConstraints,
       dragElastic,
       dragMomentum
-    });
+    };
   }
 };
 function shouldDrag(direction, drag2, currentDirection) {
@@ -10515,9 +10663,10 @@ var MeasureLayoutWithContext = class extends import_react33.Component {
       projection.addEventListener("animationComplete", () => {
         this.safeToRemove();
       });
-      projection.setOptions(__spreadProps(__spreadValues({}, projection.options), {
+      projection.setOptions({
+        ...projection.options,
         onExitComplete: () => this.safeToRemove()
-      }));
+      });
     }
     globalProjectionState.hasEverUpdated = true;
   }
@@ -10579,17 +10728,18 @@ 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, __spreadProps(__spreadValues({}, props), { layoutGroup, switchLayoutGroup: (0, import_react33.useContext)(SwitchLayoutGroupContext), isPresent, safeToRemove }));
+  return (0, import_jsx_runtime17.jsx)(MeasureLayoutWithContext, { ...props, layoutGroup, switchLayoutGroup: (0, import_react33.useContext)(SwitchLayoutGroupContext), isPresent, safeToRemove });
 }
 var defaultScaleCorrectors = {
-  borderRadius: __spreadProps(__spreadValues({}, correctBorderRadius), {
+  borderRadius: {
+    ...correctBorderRadius,
     applyTo: [
       "borderTopLeftRadius",
       "borderTopRightRadius",
       "borderBottomLeftRadius",
       "borderBottomRightRadius"
     ]
-  }),
+  },
   borderTopLeftRadius: correctBorderRadius,
   borderTopRightRadius: correctBorderRadius,
   borderBottomLeftRadius: correctBorderRadius,
@@ -11066,10 +11216,11 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
               this.resumingFrom.resumingFrom = void 0;
             }
             this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-            const animationOptions = __spreadProps(__spreadValues({}, getValueTransition(layoutTransition, "layout")), {
+            const animationOptions = {
+              ...getValueTransition(layoutTransition, "layout"),
               onPlay: onLayoutAnimationStart,
               onComplete: onLayoutAnimationComplete
-            });
+            };
             if (visualElement.shouldReduceMotion || this.options.layoutRoot) {
               animationOptions.delay = 0;
               animationOptions.type = false;
@@ -11358,9 +11509,11 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
       this.isProjectionDirty = true;
     }
     setOptions(options) {
-      this.options = __spreadProps(__spreadValues(__spreadValues({}, this.options), options), {
+      this.options = {
+        ...this.options,
+        ...options,
         crossfade: options.crossfade !== void 0 ? options.crossfade : true
-      });
+      };
     }
     clearMeasurements() {
       this.scroll = void 0;
@@ -11535,7 +11688,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
     setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
       const snapshot = this.snapshot;
       const snapshotLatestValues = snapshot ? snapshot.latestValues : {};
-      const mixedValues = __spreadValues({}, this.latestValues);
+      const mixedValues = { ...this.latestValues };
       const targetDelta = createDelta();
       if (!this.relativeParent || !this.relativeParent.options.layoutRoot) {
         this.relativeTarget = this.relativeTargetOrigin = void 0;
@@ -11587,7 +11740,8 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
       }
       this.pendingAnimation = frame.update(() => {
         globalProjectionState.hasAnimatedSinceResize = true;
-        this.currentAnimation = animateSingleValue(0, animationTarget, __spreadProps(__spreadValues({}, options), {
+        this.currentAnimation = animateSingleValue(0, animationTarget, {
+          ...options,
           onUpdate: (latest) => {
             this.mixTargetDelta(latest);
             options.onUpdate && options.onUpdate(latest);
@@ -11596,7 +11750,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
             options.onComplete && options.onComplete();
             this.completeAnimation();
           }
-        }));
+        });
         if (this.resumingFrom) {
           this.resumingFrom.currentAnimation = this.currentAnimation;
         }
@@ -12091,8 +12245,7 @@ var fireObserverCallback = (entry) => {
 var fireAllObserverCallbacks = (entries) => {
   entries.forEach(fireObserverCallback);
 };
-function initIntersectionObserver(_a) {
-  var _b = _a, { root } = _b, options = __objRest(_b, ["root"]);
+function initIntersectionObserver({ root, ...options }) {
   const lookupRoot = root || document;
   if (!observers.has(lookupRoot)) {
     observers.set(lookupRoot, {});
@@ -12100,7 +12253,7 @@ function initIntersectionObserver(_a) {
   const rootObservers = observers.get(lookupRoot);
   const key = JSON.stringify(options);
   if (!rootObservers[key]) {
-    rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, __spreadValues({ root }, options));
+    rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });
   }
   return rootObservers[key];
 }
@@ -12310,8 +12463,8 @@ var VisualElement = class {
     const { latestValues, renderState, onUpdate } = visualState;
     this.onUpdate = onUpdate;
     this.latestValues = latestValues;
-    this.baseTarget = __spreadValues({}, latestValues);
-    this.initialValues = props.initial ? __spreadValues({}, latestValues) : {};
+    this.baseTarget = { ...latestValues };
+    this.initialValues = props.initial ? { ...latestValues } : {};
     this.renderState = renderState;
     this.parent = parent;
     this.props = props;
@@ -12326,7 +12479,7 @@ var VisualElement = class {
       this.variantChildren = /* @__PURE__ */ new Set();
     }
     this.manuallyAnimateOnMount = Boolean(parent && parent.current);
-    const _a = this.scrapeMotionValuesFromProps(props, {}, this), { willChange } = _a, initialMotionValues = __objRest(_a, ["willChange"]);
+    const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this);
     for (const key in initialMotionValues) {
       const value = initialMotionValues[key];
       if (latestValues[key] !== void 0 && isMotionValue(value)) {
@@ -12715,7 +12868,12 @@ var createDomVisualElement = (Component2, options) => {
 };
 
 // node_modules/framer-motion/dist/es/render/components/motion/create.mjs
-var createMotionComponent = /* @__PURE__ */ createMotionComponentFactory(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, animations), gestureAnimations), drag), layout), createDomVisualElement);
+var createMotionComponent = /* @__PURE__ */ createMotionComponentFactory({
+  ...animations,
+  ...gestureAnimations,
+  ...drag,
+  ...layout
+}, createDomVisualElement);
 
 // node_modules/framer-motion/dist/es/render/components/motion/proxy.mjs
 var motion = /* @__PURE__ */ createDOMMotionComponentProxy(createMotionComponent);
@@ -12742,27 +12900,23 @@ 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(_a) {
-  var _b = _a, {
-    question,
-    answer,
-    className
-  } = _b, props = __objRest(_b, [
-    "question",
-    "answer",
-    "className"
-  ]);
+function Flashcard({
+  question,
+  answer,
+  className,
+  ...props
+}) {
   const [isFlipped, setIsFlipped] = (0, import_react35.useState)(false);
   const { theme } = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
-    __spreadProps(__spreadValues({
+    {
       className: cn(
         "group relative h-64 w-full cursor-pointer [perspective:1000px]",
         className
       ),
-      onClick: () => setIsFlipped((v) => !v)
-    }, props), {
+      onClick: () => setIsFlipped((v) => !v),
+      ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         motion.div,
         {
@@ -12810,7 +12964,7 @@ function Flashcard(_a) {
           ]
         }
       )
-    })
+    }
   );
 }
 
@@ -12818,39 +12972,39 @@ function Flashcard(_a) {
 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)]",
-  night: "bg-zinc-950 border-white/10 shadow-[0_10px_40px_rgba(0,0,0,0.7)]",
+  night: "bg-zinc-950 text-zinc-100 border-white/10 shadow-[0_10px_40px_rgba(0,0,0,0.7)]",
   glass: "bg-white/20 border-white/60 backdrop-blur-2xl shadow-glass-lift",
   neubrutal: "bg-[#FFD600] border-4 border-black shadow-neubrutal",
   clay: "bg-rose-50 border border-rose-100 shadow-clay-outer",
-  cyberpunk: "bg-black border-2 border-[#22d3ee] font-mono shadow-neon-glow",
+  cyberpunk: "bg-black text-[#22d3ee] border-2 border-[#22d3ee] font-mono shadow-neon-glow",
   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(_a) {
-  var _b = _a, {
-    children,
-    className
-  } = _b, props = __objRest(_b, [
-    "children",
-    "className"
-  ]);
+function GraphicCard({
+  children,
+  className,
+  ...props
+}) {
   const { theme } = useTheme();
   const surface = SURFACE_BY_THEME[theme];
+  const isDark = theme === "night" || theme === "cyberpunk";
+  const blobClass = isDark ? "bg-white/10 transition-transform group-hover:scale-110" : "bg-sky-100 opacity-60 transition-transform group-hover:scale-110";
+  const blobClass2 = isDark ? "bg-white/10 transition-transform group-hover:scale-110" : "bg-indigo-100 opacity-60 transition-transform group-hover:scale-110";
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
-    __spreadProps(__spreadValues({
+    {
       className: cn(
         "group relative w-full overflow-hidden rounded-2xl p-6 transition-all duration-300",
         surface,
         className
-      )
-    }, props), {
+      ),
+      ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pointer-events-none absolute -right-10 -top-10 h-32 w-32 rounded-bl-full bg-sky-100 opacity-60 transition-transform group-hover:scale-110" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pointer-events-none absolute -bottom-8 -left-8 h-24 w-24 rounded-tr-full bg-indigo-100 opacity-60 transition-transform group-hover:scale-110" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "relative z-10 h-full w-full", children })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("pointer-events-none absolute -right-10 -top-10 h-32 w-32 rounded-bl-full", blobClass) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("pointer-events-none absolute -bottom-8 -left-8 h-24 w-24 rounded-tr-full", blobClass2) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("relative z-10 h-full w-full", isDark && "[&_*]:!text-inherit"), children })
       ]
-    })
+    }
   );
 }
 
@@ -12872,38 +13026,32 @@ var inputVariants = cva(
     }
   }
 );
-var Input = (0, import_react36.forwardRef)(function Input2(_a, ref) {
-  var _b = _a, {
-    label,
-    error,
-    helperText,
-    prefix,
-    suffix,
-    size = "md",
-    className,
-    id: idProp,
-    disabled,
-    theme: themeProp
-  } = _b, props = __objRest(_b, [
-    "label",
-    "error",
-    "helperText",
-    "prefix",
-    "suffix",
-    "size",
-    "className",
-    "id",
-    "disabled",
-    "theme"
-  ]);
+var Input = (0, import_react36.forwardRef)(function Input2({
+  label,
+  error,
+  helperText,
+  prefix,
+  suffix,
+  size = "md",
+  className,
+  id: idProp,
+  disabled,
+  theme: themeProp,
+  ...props
+}, ref) {
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "input", "default");
-  const id3 = idProp != null ? idProp : label ? `input-${label.replace(/\s/g, "-").toLowerCase()}` : void 0;
+  const id3 = idProp ?? (label ? `input-${label.replace(/\s/g, "-").toLowerCase()}` : void 0);
   const hasAddon = Boolean(prefix || suffix);
+  const isDark = theme === "night" || theme === "cyberpunk";
+  const labelClass = isDark ? "text-zinc-300" : "text-zinc-700";
+  const helperClass = isDark ? "text-zinc-400" : "text-zinc-500";
+  const addonClass = isDark ? "bg-zinc-800 text-zinc-400" : "bg-zinc-100 text-zinc-500";
+  const errorClass = isDark ? "text-red-400" : "text-red-600";
   const inputEl = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "input",
-    __spreadValues({
+    {
       ref,
       id: id3,
       "aria-invalid": error ? true : void 0,
@@ -12916,29 +13064,39 @@ var Input = (0, import_react36.forwardRef)(function Input2(_a, ref) {
         hasAddon && "rounded-none first:rounded-l-lg last:rounded-r-lg",
         !hasAddon && "rounded-lg",
         className
-      )
-    }, props)
+      ),
+      ...props
+    }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-full", children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "label",
       {
         htmlFor: id3,
-        className: "mb-1 block text-sm font-medium text-zinc-700 dark:text-zinc-300",
+        className: cn("mb-1 block text-sm font-medium", labelClass),
         children: label
       }
     ),
-    hasAddon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex overflow-hidden rounded-lg border border-inherit [&>*]:border [&>*]:border-zinc-200 [&>*]:border-l-0 first:[&>*]:border-l [&>*]:border-inherit", children: [
-      prefix && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex items-center bg-zinc-100 px-3 py-2 text-sm text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400", children: prefix }),
-      inputEl,
-      suffix && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex items-center bg-zinc-100 px-3 py-2 text-sm text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400", children: suffix })
-    ] }) : inputEl,
-    error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { id: id3 ? `${id3}-error` : void 0, className: "mt-1 text-sm text-red-600", role: "alert", children: error }),
+    hasAddon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "div",
+      {
+        className: cn(
+          "flex overflow-hidden rounded-lg border border-inherit [&>*]:border [&>*]:border-l-0 first:[&>*]:border-l [&>*]:border-inherit",
+          isDark ? "[&>*]:border-white/10" : "[&>*]:border-zinc-200"
+        ),
+        children: [
+          prefix && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: cn("flex items-center px-3 py-2 text-sm", addonClass), children: prefix }),
+          inputEl,
+          suffix && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: cn("flex items-center px-3 py-2 text-sm", addonClass), children: suffix })
+        ]
+      }
+    ) : inputEl,
+    error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { id: id3 ? `${id3}-error` : void 0, className: cn("mt-1 text-sm", errorClass), role: "alert", children: error }),
     helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "p",
       {
         id: id3 ? `${id3}-helper` : void 0,
-        className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400",
+        className: cn("mt-1 text-sm", helperClass),
         children: helperText
       }
     )
@@ -12950,7 +13108,7 @@ var import_react37 = require("react");
 function useFocusTrap(active, options) {
   const containerRef = (0, import_react37.useRef)(null);
   const previousFocusRef = (0, import_react37.useRef)(null);
-  const { returnFocus = true } = options != null ? options : {};
+  const { returnFocus = true } = options ?? {};
   const getFocusables = (0, import_react37.useCallback)((el) => {
     const selector = [
       "a[href]",
@@ -12965,34 +13123,32 @@ function useFocusTrap(active, options) {
     );
   }, []);
   (0, import_react37.useEffect)(() => {
-    var _a;
     if (!active || !containerRef.current) return;
-    previousFocusRef.current = (_a = typeof document !== "undefined" ? document.activeElement : null) != null ? _a : null;
+    previousFocusRef.current = (typeof document !== "undefined" ? document.activeElement : null) ?? null;
     const container = containerRef.current;
     const focusables = getFocusables(container);
     if (focusables.length === 0) return;
     const first = focusables[0];
     const last = focusables[focusables.length - 1];
-    first == null ? void 0 : first.focus();
+    first?.focus();
     const handleKeyDown = (e) => {
       if (e.key !== "Tab") return;
       if (e.shiftKey) {
         if (document.activeElement === first) {
           e.preventDefault();
-          last == null ? void 0 : last.focus();
+          last?.focus();
         }
       } else {
         if (document.activeElement === last) {
           e.preventDefault();
-          first == null ? void 0 : first.focus();
+          first?.focus();
         }
       }
     };
     container.addEventListener("keydown", handleKeyDown);
     return () => {
-      var _a2;
       container.removeEventListener("keydown", handleKeyDown);
-      if (returnFocus && ((_a2 = previousFocusRef.current) == null ? void 0 : _a2.focus)) {
+      if (returnFocus && previousFocusRef.current?.focus) {
         previousFocusRef.current.focus();
       }
     };
@@ -13029,7 +13185,7 @@ function Modal({
   theme: themeProp
 }) {
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "modal", "default");
   const focusTrapRef = useFocusTrap(open, { returnFocus: true });
   const handleEscape = (0, import_react38.useCallback)(
@@ -13104,14 +13260,94 @@ function Modal({
 }
 
 // components/Navbar.tsx
+var import_react39 = 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);
   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), []),
+    { enabled: mobileOpen }
+  );
+  const hasResponsiveNav = items != null && items.length > 0;
+  if (hasResponsiveNav) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "nav",
+      {
+        ref: navRef,
+        className: cn(
+          "relative sticky top-0 z-50 flex h-14 w-full flex-col px-3 sm:px-4",
+          themeClass,
+          className
+        ),
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex h-14 w-full min-w-0 shrink-0 items-center justify-between gap-2", children: [
+            logo != null ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex min-w-0 shrink-0 items-center overflow-hidden", children: logo }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "hidden flex-1 items-center justify-end gap-4 sm:flex", children: [
+              items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "a",
+                {
+                  href: item.href,
+                  className: "text-sm font-medium text-inherit opacity-90 transition-opacity hover:opacity-100",
+                  children: item.label
+                },
+                item.href
+              )),
+              right != null ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex shrink-0 items-center", children: right }) : null
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2 sm:hidden", children: [
+              right != null ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "min-w-0 overflow-x-auto overflow-y-hidden scrollbar-thin", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center gap-2 py-1", children: right }) }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setMobileOpen((o) => !o),
+                  className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-inherit opacity-90 transition-opacity hover:opacity-100",
+                  "aria-expanded": mobileOpen,
+                  "aria-label": mobileOpen ? "Close menu" : "Open menu",
+                  children: mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-lg leading-none", "aria-hidden": true, children: "\xD7" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-xl leading-none", "aria-hidden": true, children: "\u2630" })
+                }
+              )
+            ] })
+          ] }),
+          mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "div",
+            {
+              className: cn(
+                "absolute left-0 right-0 top-14 z-10 flex flex-col gap-1 border-t border-inherit px-3 py-3 shadow-lg sm:hidden",
+                themeClass,
+                mobilePanelBgOverride
+              ),
+              role: "dialog",
+              "aria-label": "Navigation menu",
+              children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "a",
+                {
+                  href: item.href,
+                  className: "block rounded-lg px-3 py-2.5 text-sm font-medium text-inherit opacity-90 transition-opacity hover:opacity-100",
+                  onClick: () => setMobileOpen(false),
+                  children: item.label
+                },
+                item.href
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "nav",
     {
@@ -13175,11 +13411,15 @@ function ProgressBar({
   max = 100,
   segmented = false,
   className,
-  style
+  style,
+  trackColor,
+  activeColor
 }) {
   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}%` };
   if (segmented) {
     const segments = 10;
     const filled = Math.round(pct / 100 * segments);
@@ -13191,14 +13431,15 @@ function ProgressBar({
           themeClass,
           className
         ),
-        style,
+        style: { ...style, ...trackStyle },
         children: Array.from({ length: segments }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
             className: cn(
               "fill h-full flex-1 rounded-full transition-colors",
               i < filled ? "opacity-100" : "opacity-30"
-            )
+            ),
+            style: i < filled && activeColor ? { backgroundColor: activeColor } : void 0
           },
           i
         ))
@@ -13213,12 +13454,12 @@ function ProgressBar({
         themeClass,
         className
       ),
-      style,
+      style: { ...style, ...trackStyle },
       children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "span",
         {
           className: "fill absolute left-0 top-0 h-full rounded-full transition-[width] duration-300",
-          style: { width: `${pct}%` }
+          style: fillStyle
         }
       )
     }
@@ -13243,17 +13484,17 @@ function SectionHeader({
 }
 
 // components/Sidebar.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function Sidebar({
   children,
   className,
   style
 }) {
-  const [collapsed, setCollapsed] = (0, import_react39.useState)(false);
+  const [collapsed, setCollapsed] = (0, import_react40.useState)(false);
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "sidebar", "default");
-  const toggle = (0, import_react39.useCallback)(() => setCollapsed((c) => !c), []);
+  const toggle = (0, import_react40.useCallback)(() => setCollapsed((c) => !c), []);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "aside",
     {
@@ -13282,7 +13523,7 @@ function Sidebar({
 }
 
 // components/Skeleton.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var skeletonVariants = cva("", {
   variants: {
@@ -13296,16 +13537,15 @@ var skeletonVariants = cva("", {
     variant: "rectangle"
   }
 });
-var Skeleton = (0, import_react40.forwardRef)(
-  function Skeleton2(_a, ref) {
-    var _b = _a, { variant = "rectangle", className, theme: themeProp, style } = _b, props = __objRest(_b, ["variant", "className", "theme", "style"]);
+var Skeleton = (0, import_react41.forwardRef)(
+  function Skeleton2({ variant = "rectangle", className, theme: themeProp, style, ...props }, ref) {
     const { theme: contextTheme } = useTheme();
-    const theme = themeProp != null ? themeProp : contextTheme;
+    const theme = themeProp ?? contextTheme;
     const baseClass = getThemeClass(theme, "skeleton", "default");
     const animationVariant = theme === "cyberpunk" ? getThemeClass(theme, "skeleton", "flicker") : getThemeClass(theme, "skeleton", "shimmer");
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
-      __spreadValues({
+      {
         ref,
         role: "status",
         "aria-label": "Loading",
@@ -13315,14 +13555,15 @@ var Skeleton = (0, import_react40.forwardRef)(
           animationVariant,
           className
         ),
-        style
-      }, props)
+        style,
+        ...props
+      }
     );
   }
 );
 
 // components/Slider.tsx
-var import_react41 = require("react");
+var import_react42 = 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",
@@ -13343,40 +13584,30 @@ var trackVariants = cva(
   "relative h-3 w-full rounded-full overflow-visible",
   { variants: {}, defaultVariants: {} }
 );
-var Slider = (0, import_react41.forwardRef)(function Slider2(_a, ref) {
-  var _b = _a, {
-    min = 0,
-    max = 100,
-    step = 1,
-    value: controlledValue,
-    defaultValue = 50,
-    onValueChange,
-    size = "md",
-    className,
-    theme: themeProp
-  } = _b, props = __objRest(_b, [
-    "min",
-    "max",
-    "step",
-    "value",
-    "defaultValue",
-    "onValueChange",
-    "size",
-    "className",
-    "theme"
-  ]);
-  const [uncontrolled, setUncontrolled] = (0, import_react41.useState)(defaultValue);
+var Slider = (0, import_react42.forwardRef)(function Slider2({
+  min = 0,
+  max = 100,
+  step = 1,
+  value: controlledValue,
+  defaultValue = 50,
+  onValueChange,
+  size = "md",
+  className,
+  theme: themeProp,
+  ...props
+}, ref) {
+  const [uncontrolled, setUncontrolled] = (0, import_react42.useState)(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : uncontrolled;
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "slider", "default");
   const pct = (value - min) / (max - min) * 100;
-  const handleChange = (0, import_react41.useCallback)(
+  const handleChange = (0, import_react42.useCallback)(
     (e) => {
       const next = Number(e.target.value);
       if (!isControlled) setUncontrolled(next);
-      onValueChange == null ? void 0 : onValueChange(next);
+      onValueChange?.(next);
     },
     [isControlled, onValueChange]
   );
@@ -13399,7 +13630,7 @@ var Slider = (0, import_react41.forwardRef)(function Slider2(_a, ref) {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "input",
-      __spreadValues({
+      {
         ref,
         type: "range",
         min,
@@ -13410,8 +13641,9 @@ var Slider = (0, import_react41.forwardRef)(function Slider2(_a, ref) {
         className: "absolute inset-0 h-full w-full cursor-pointer opacity-0",
         "aria-valuemin": min,
         "aria-valuemax": max,
-        "aria-valuenow": value
-      }, props)
+        "aria-valuenow": value,
+        ...props
+      }
     )
   ] });
 });
@@ -13427,6 +13659,9 @@ function StatsCard({
 }) {
   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: [
     /* @__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 }),
@@ -13435,7 +13670,7 @@ function StatsCard({
       {
         className: cn(
           "mt-2 flex items-center gap-1 text-sm",
-          trend.direction === "up" ? "text-emerald-600" : "text-rose-600"
+          trendUpClass ?? trendDownClass
         ),
         children: [
           trend.direction === "up" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TrendingUp, { className: "size-4", "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TrendingDown, { className: "size-4", "aria-hidden": true }),
@@ -13447,7 +13682,7 @@ function StatsCard({
 }
 
 // components/Tabs.tsx
-var import_react42 = require("react");
+var import_react43 = 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",
@@ -13479,52 +13714,47 @@ function Tabs({
   style,
   theme: themeProp
 }) {
-  var _a;
-  const [uncontrolled, setUncontrolled] = (0, import_react42.useState)(
-    () => {
-      var _a2, _b;
-      return (_b = defaultValue != null ? defaultValue : (_a2 = items[0]) == null ? void 0 : _a2.value) != null ? _b : "";
-    }
+  const [uncontrolled, setUncontrolled] = (0, import_react43.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_react42.useRef)([]);
+  const triggerRefs = (0, import_react43.useRef)([]);
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  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_react42.useCallback)(
+  const setValue = (0, import_react43.useCallback)(
     (v) => {
       if (!isControlled) setUncontrolled(v);
-      onValueChange == null ? void 0 : onValueChange(v);
+      onValueChange?.(v);
     },
     [isControlled, onValueChange]
   );
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     triggerRefs.current = triggerRefs.current.slice(0, items.length);
   }, [items.length]);
-  const handleKeyDown = (0, import_react42.useCallback)(
+  const handleKeyDown = (0, import_react43.useCallback)(
     (e) => {
-      var _a2, _b;
       if (e.key === "ArrowLeft") {
         e.preventDefault();
         const next = getNextListIndex(safeIndex, "up", items.length);
         setValue(items[next].value);
-        (_a2 = triggerRefs.current[next]) == null ? void 0 : _a2.focus();
+        triggerRefs.current[next]?.focus();
       } else if (e.key === "ArrowRight") {
         e.preventDefault();
         const next = getNextListIndex(safeIndex, "down", items.length);
         setValue(items[next].value);
-        (_b = triggerRefs.current[next]) == null ? void 0 : _b.focus();
+        triggerRefs.current[next]?.focus();
       }
     },
     [items, safeIndex, setValue]
   );
   const activeItem = items[safeIndex];
-  const content = (_a = activeItem == null ? void 0 : activeItem.content) != null ? _a : null;
+  const content = activeItem?.content ?? null;
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("w-full min-w-0", className), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "div",
@@ -13620,7 +13850,7 @@ function Timeline({
   theme: themeProp
 }) {
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "timeline", "default");
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
@@ -13692,7 +13922,7 @@ function Toast({
 }
 
 // components/Toggle.tsx
-var import_react43 = require("react");
+var import_react44 = 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",
@@ -13701,38 +13931,30 @@ var toggleVariants = cva(
     defaultVariants: {}
   }
 );
-var Toggle = (0, import_react43.forwardRef)(function Toggle2(_a, ref) {
-  var _b = _a, {
-    checked: controlledChecked,
-    defaultChecked = false,
-    onCheckedChange,
-    className,
-    "aria-label": ariaLabel = "Toggle",
-    theme: themeProp,
-    disabled
-  } = _b, props = __objRest(_b, [
-    "checked",
-    "defaultChecked",
-    "onCheckedChange",
-    "className",
-    "aria-label",
-    "theme",
-    "disabled"
-  ]);
-  const [uncontrolled, setUncontrolled] = (0, import_react43.useState)(defaultChecked);
+var Toggle = (0, import_react44.forwardRef)(function Toggle2({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  className,
+  "aria-label": ariaLabel = "Toggle",
+  theme: themeProp,
+  disabled,
+  ...props
+}, ref) {
+  const [uncontrolled, setUncontrolled] = (0, import_react44.useState)(defaultChecked);
   const isControlled = controlledChecked !== void 0;
   const checked = isControlled ? controlledChecked : uncontrolled;
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   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_react43.useId)();
-  const handleChange = (0, import_react43.useCallback)(
+  const id3 = (0, import_react44.useId)();
+  const handleChange = (0, import_react44.useCallback)(
     (e) => {
       const next = e.target.checked;
       if (!isControlled) setUncontrolled(next);
-      onCheckedChange == null ? void 0 : onCheckedChange(next);
+      onCheckedChange?.(next);
     },
     [isControlled, onCheckedChange]
   );
@@ -13745,7 +13967,7 @@ var Toggle = (0, import_react43.forwardRef)(function Toggle2(_a, ref) {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "input",
-          __spreadValues({
+          {
             ref,
             id: id3,
             type: "checkbox",
@@ -13755,8 +13977,9 @@ var Toggle = (0, import_react43.forwardRef)(function Toggle2(_a, ref) {
             checked,
             disabled,
             onChange: handleChange,
-            className: "sr-only"
-          }, props)
+            className: "sr-only",
+            ...props
+          }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "span",
@@ -13773,7 +13996,7 @@ var Toggle = (0, import_react43.forwardRef)(function Toggle2(_a, ref) {
 });
 
 // components/Tooltip.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var placementClasses = {
   top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
@@ -13793,12 +14016,12 @@ function Tooltip({
   style,
   theme: themeProp
 }) {
-  const [visible, setVisible] = (0, import_react44.useState)(false);
+  const [visible, setVisible] = (0, import_react45.useState)(false);
   const { theme: contextTheme } = useTheme();
-  const theme = themeProp != null ? themeProp : contextTheme;
+  const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "tooltip", "default");
-  const show = (0, import_react44.useCallback)(() => setVisible(true), []);
-  const hide = (0, import_react44.useCallback)(() => setVisible(false), []);
+  const show = (0, import_react45.useCallback)(() => setVisible(true), []);
+  const hide = (0, import_react45.useCallback)(() => setVisible(false), []);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "span",
     {
@@ -13826,6 +14049,94 @@ function Tooltip({
     }
   );
 }
+
+// lib/theme-recommendations.ts
+var THEME_BACKGROUNDS = {
+  minimal: "bg-white text-zinc-900",
+  night: "bg-zinc-950 text-zinc-100",
+  glass: "bg-gradient-to-br from-slate-100 via-blue-50/80 to-slate-50 text-slate-800",
+  neubrutal: "bg-amber-100 text-black",
+  clay: "bg-gradient-to-br from-rose-100 via-sky-50 to-amber-50 text-zinc-900",
+  cyberpunk: "bg-black text-zinc-100",
+  retro: "bg-zinc-100 text-black",
+  motion: "bg-gradient-to-br from-indigo-50 via-white to-purple-50 text-zinc-900"
+};
+var THEME_NAVBAR = {
+  minimal: "bg-white text-zinc-900 border-b border-zinc-200",
+  night: "bg-zinc-950 text-zinc-100 border-b border-white/10",
+  glass: "rounded-none bg-white/50 backdrop-blur-2xl border-b border-white/60 text-slate-800 shadow-glass-soft",
+  neubrutal: "rounded-none bg-[#FFD600] text-black border-b-4 border-black shadow-neubrutal",
+  clay: "rounded-b-3xl bg-white/80 text-zinc-900 backdrop-blur-md shadow-clay-outer border-b border-zinc-200",
+  cyberpunk: "bg-black text-[#22d3ee] border-b-2 border-[#22d3ee] font-mono",
+  retro: "rounded-none bg-zinc-100 text-black border-b-2 border-black font-mono shadow-[0_4px_0_0_rgba(0,0,0,1)]",
+  motion: "rounded-none bg-white/95 backdrop-blur-md text-zinc-900 border-b-2 border-indigo-100 shadow-sm transition-all duration-300"
+};
+var THEME_RECOMMENDATIONS = {
+  minimal: {
+    background: "bg-white",
+    surface: "bg-white",
+    text: "text-zinc-900",
+    accent: "zinc-900",
+    navbar: THEME_NAVBAR.minimal,
+    notes: "Neutral, light. White background; navbar and components use white + zinc borders."
+  },
+  night: {
+    background: "bg-zinc-950",
+    surface: "bg-zinc-950",
+    text: "text-zinc-100",
+    accent: "white",
+    navbar: THEME_NAVBAR.night,
+    notes: "Dark mode. Deep zinc background; navbar and surfaces use zinc-950, white/10 borders."
+  },
+  glass: {
+    background: "bg-gradient-to-br from-slate-100 via-blue-50/80 to-slate-50",
+    surface: "bg-white/60 backdrop-blur-2xl",
+    text: "text-slate-800",
+    accent: "slate-700",
+    navbar: THEME_NAVBAR.glass,
+    notes: "Frosted glass. Soft gradient background; navbar/surfaces semi-transparent white + backdrop-blur."
+  },
+  neubrutal: {
+    background: "bg-amber-100",
+    surface: "bg-white",
+    text: "text-black",
+    accent: "#FFD600, #FF5733",
+    navbar: THEME_NAVBAR.neubrutal,
+    notes: "Bold, high contrast. Page background is light amber (bg-amber-100); bright yellow (#FFD600) is for navbar and accent only."
+  },
+  clay: {
+    background: "bg-gradient-to-br from-rose-100 via-sky-50 to-amber-50",
+    surface: "bg-rose-50 / bg-white",
+    text: "text-zinc-900",
+    accent: "rose-600 / sky",
+    navbar: THEME_NAVBAR.clay,
+    notes: "Soft, tactile. Rose/sky/amber gradient; navbar white/80 + clay shadow."
+  },
+  cyberpunk: {
+    background: "bg-black",
+    surface: "bg-black",
+    text: "text-zinc-100",
+    accent: "#22d3ee, #ec4899",
+    navbar: THEME_NAVBAR.cyberpunk,
+    notes: "Dark, neon. Black background; navbar black + cyan border/text."
+  },
+  retro: {
+    background: "bg-zinc-100",
+    surface: "bg-white",
+    text: "text-black",
+    accent: "lime-500",
+    navbar: THEME_NAVBAR.retro,
+    notes: "8-bit vibe. Zinc-100 page; navbar zinc-100, black border."
+  },
+  motion: {
+    background: "bg-gradient-to-br from-indigo-50 via-white to-purple-50",
+    surface: "bg-white",
+    text: "text-zinc-900",
+    accent: "indigo-500",
+    navbar: THEME_NAVBAR.motion,
+    notes: "Soft gradients. Indigo/purple gradient background; navbar white/95 + indigo border."
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -13856,6 +14167,9 @@ function Tooltip({
   Slider,
   StatsCard,
   THEMES,
+  THEME_BACKGROUNDS,
+  THEME_NAVBAR,
+  THEME_RECOMMENDATIONS,
   Tabs,
   Terminal,
   ThemeProvider,