@mikenotthepope/substrateui 0.1.0 → 0.1.2

package/dist/index.js

@@ -76,6 +76,7 @@ __export(index_exports, {
   Chart: () => ChartComponent,
   Checkbox: () => Checkbox,
   Collapsible: () => CollapsibleComponent,
+  ColorThemeToggle: () => ColorThemeToggle,
   Combobox: () => ComboboxComponent,
   Command: () => CommandComponent,
   Container: () => Container,
@@ -137,6 +138,7 @@ __export(index_exports, {
   Tooltip: () => TooltipComponent,
   TwoColumnLayout: () => TwoColumnLayoutComponent,
   alertVariants: () => alertVariants,
+  avatarVariants: () => avatarVariants,
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   cardVariants: () => cardVariants,
@@ -532,18 +534,41 @@ var DrawerComponent = Object.assign(Drawer, {
 // components/ui/Avatar.tsx
 var React5 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
+var import_class_variance_authority4 = require("class-variance-authority");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var avatarVariants = (0, import_class_variance_authority4.cva)(
+  "relative flex h-10 w-10 border-2 overflow-hidden",
+  {
+    variants: {
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-none",
+        rounded: "rounded-lg",
+        hexagon: "rounded-none border-0 [clip-path:polygon(50%_0%,100%_25%,100%_75%,50%_100%,0%_75%,0%_25%)]",
+        diamond: "rounded-none rotate-45 border-2",
+        squircle: "rounded-none border-0 [clip-path:url(#squircle)]",
+        shield: "rounded-none border-0 [clip-path:polygon(50%_0%,100%_0%,100%_70%,50%_100%,0%_70%,0%_0%)]"
+      }
+    },
+    defaultVariants: {
+      shape: "circle"
+    }
+  }
+);
 var Avatar = React5.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  var _b = _a, { className, shape = "circle", children } = _b, props = __objRest(_b, ["className", "shape", "children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     AvatarPrimitive.Root,
-    __spreadValues({
+    __spreadProps(__spreadValues({
       ref,
-      className: cn(
-        "relative flex h-10 w-10 border-2 rounded-full overflow-hidden",
-        className
-      )
-    }, props)
+      "data-shape": shape,
+      className: cn(avatarVariants({ shape }), className)
+    }, props), {
+      children: [
+        shape === "squircle" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "0", height: "0", className: "absolute", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("clipPath", { id: "squircle", clipPathUnits: "objectBoundingBox", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M 0.5 0 C 0.9 0, 1 0.1, 1 0.5 C 1 0.9, 0.9 1, 0.5 1 C 0.1 1, 0 0.9, 0 0.5 C 0 0.1, 0.1 0, 0.5 0" }) }) }) }),
+        children
+      ]
+    })
   );
 });
 Avatar.displayName = "Avatar";
@@ -553,7 +578,10 @@ var AvatarImage = React5.forwardRef((_a, ref) => {
     AvatarPrimitive.Image,
     __spreadValues({
       ref,
-      className: cn("aspect-square h-full w-full", className)
+      className: cn(
+        "aspect-square h-full w-full [[data-shape=diamond]>&]:-rotate-45",
+        className
+      )
     }, props)
   );
 });
@@ -565,7 +593,10 @@ var AvatarFallback = React5.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "flex h-full w-full items-center justify-center rounded-full bg-primary text-primary-foreground font-head text-sm",
+        "flex h-full w-full items-center justify-center bg-primary text-primary-foreground font-head text-sm",
+        "[[data-shape=circle]>&]:rounded-full",
+        "[[data-shape=rounded]>&]:rounded-lg",
+        "[[data-shape=diamond]>&]:-rotate-45",
         className
       )
     }, props)
@@ -781,10 +812,10 @@ Textarea.displayName = "Textarea";
 // components/ui/Checkbox.tsx
 var React10 = __toESM(require("react"));
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
-var import_class_variance_authority4 = require("class-variance-authority");
+var import_class_variance_authority5 = require("class-variance-authority");
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var checkboxVariants = (0, import_class_variance_authority4.cva)("border-2 shrink-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", {
+var checkboxVariants = (0, import_class_variance_authority5.cva)("border-2 shrink-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", {
   variants: {
     variant: {
       default: "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
@@ -819,9 +850,9 @@ Checkbox.displayName = "Checkbox";
 // components/ui/RadioGroup.tsx
 var React11 = __toESM(require("react"));
 var RadioPrimitive = __toESM(require("@radix-ui/react-radio-group"));
-var import_class_variance_authority5 = require("class-variance-authority");
+var import_class_variance_authority6 = require("class-variance-authority");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var radioVariants = (0, import_class_variance_authority5.cva)("border-2 border-border shrink-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", {
+var radioVariants = (0, import_class_variance_authority6.cva)("border-2 border-border shrink-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", {
   variants: {
     variant: {
       default: "",
@@ -832,14 +863,19 @@ var radioVariants = (0, import_class_variance_authority5.cva)("border-2 border-b
       sm: "h-4 w-4",
       md: "h-5 w-5",
       lg: "h-6 w-6"
+    },
+    shape: {
+      circle: "rounded-full",
+      diamond: "rotate-45"
     }
   },
   defaultVariants: {
     variant: "default",
-    size: "md"
+    size: "md",
+    shape: "circle"
   }
 });
-var radioIndicatorVariants = (0, import_class_variance_authority5.cva)("flex", {
+var radioIndicatorVariants = (0, import_class_variance_authority6.cva)("flex", {
   variants: {
     variant: {
       default: "bg-primary border-2 border-border",
@@ -847,14 +883,19 @@ var radioIndicatorVariants = (0, import_class_variance_authority5.cva)("flex", {
       solid: "bg-border"
     },
     size: {
-      sm: "h-2 w-2",
-      md: "h-2.5 w-2.5",
-      lg: "h-3.5 w-3.5"
+      sm: "h-2.5 w-2.5",
+      md: "h-3 w-3",
+      lg: "h-4 w-4"
+    },
+    shape: {
+      circle: "rounded-full",
+      diamond: ""
     }
   },
   defaultVariants: {
     variant: "default",
-    size: "md"
+    size: "md",
+    shape: "circle"
   }
 });
 var RadioGroupRoot = React11.forwardRef((_a, ref) => {
@@ -869,15 +910,15 @@ var RadioGroupRoot = React11.forwardRef((_a, ref) => {
 });
 RadioGroupRoot.displayName = "RadioGroup";
 var RadioGroupItem = React11.forwardRef((_a, ref) => {
-  var _b = _a, { className, size, variant, children } = _b, props = __objRest(_b, ["className", "size", "variant", "children"]);
+  var _b = _a, { className, size, variant, shape, children } = _b, props = __objRest(_b, ["className", "size", "variant", "shape", "children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     RadioPrimitive.Item,
     __spreadProps(__spreadValues({
       ref,
-      className: cn(radioVariants({ size, variant }), className)
+      className: cn(radioVariants({ size, variant, shape }), className)
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadioPrimitive.Indicator, { className: "flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: radioIndicatorVariants({ size, variant }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RadioPrimitive.Indicator, { className: "flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: radioIndicatorVariants({ size, variant, shape }) }) }),
         children
       ]
     })
@@ -1139,7 +1180,7 @@ var FormActions = React15.forwardRef(
       __spreadValues({
         ref,
         className: cn(
-          "flex items-center gap-3 border-t-2 border-border pt-6",
+          "flex items-center gap-3 border-t-2 border-border mt-6 pt-6",
           alignMap[align],
           className
         )
@@ -1156,11 +1197,11 @@ var FormLayout = Object.assign(FormLayoutRoot, {
 });
 
 // components/ui/Link.tsx
-var import_class_variance_authority6 = require("class-variance-authority");
+var import_class_variance_authority7 = require("class-variance-authority");
 var import_react7 = __toESM(require("react"));
 var import_react_slot4 = require("@radix-ui/react-slot");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var linkVariants = (0, import_class_variance_authority6.cva)(
+var linkVariants = (0, import_class_variance_authority7.cva)(
   "font-head inline-flex items-center gap-1 cursor-pointer transition-colors duration-200 underline-offset-4",
   {
     variants: {
@@ -1213,9 +1254,9 @@ Link.displayName = "Link";
 
 // components/ui/Alert.tsx
 var React17 = __toESM(require("react"));
-var import_class_variance_authority7 = require("class-variance-authority");
+var import_class_variance_authority8 = require("class-variance-authority");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var alertVariants = (0, import_class_variance_authority7.cva)(
+var alertVariants = (0, import_class_variance_authority8.cva)(
   "relative w-full border-2 border-border p-4",
   {
     variants: {
@@ -1279,11 +1320,11 @@ var AlertComponent = Object.assign(AlertRoot, {
 });
 
 // components/ui/IconButton.tsx
-var import_class_variance_authority8 = require("class-variance-authority");
+var import_class_variance_authority9 = require("class-variance-authority");
 var import_react8 = __toESM(require("react"));
 var import_react_slot5 = require("@radix-ui/react-slot");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var iconButtonVariants = (0, import_class_variance_authority8.cva)(
+var iconButtonVariants = (0, import_class_variance_authority9.cva)(
   "font-head transition-all outline-hidden cursor-pointer duration-200 inline-flex justify-center items-center disabled:opacity-60 disabled:cursor-not-allowed border-2 border-border",
   {
     variants: {
@@ -1336,9 +1377,9 @@ IconButton.displayName = "IconButton";
 
 // components/ui/Loader.tsx
 var React19 = __toESM(require("react"));
-var import_class_variance_authority9 = require("class-variance-authority");
+var import_class_variance_authority10 = require("class-variance-authority");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var loaderVariants = (0, import_class_variance_authority9.cva)("flex gap-1", {
+var loaderVariants = (0, import_class_variance_authority10.cva)("flex gap-1", {
   variants: {
     variant: {
       default: "[&>div]:bg-primary [&>div]:border-border",
@@ -1403,12 +1444,12 @@ Loader.displayName = "Loader";
 var React20 = __toESM(require("react"));
 var ReactDialog = __toESM(require("@radix-ui/react-dialog"));
 var import_react_visually_hidden = require("@radix-ui/react-visually-hidden");
-var import_class_variance_authority10 = require("class-variance-authority");
+var import_class_variance_authority11 = require("class-variance-authority");
 var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var Dialog = ReactDialog.Root;
 var DialogTrigger = ReactDialog.Trigger;
-var overlayVariants = (0, import_class_variance_authority10.cva)(
+var overlayVariants = (0, import_class_variance_authority11.cva)(
   "fixed inset-0 z-50 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
   {
     variants: {
@@ -1435,7 +1476,7 @@ var DialogOverlay = React20.forwardRef(
   }
 );
 DialogOverlay.displayName = "Dialog.Overlay";
-var dialogContentVariants = (0, import_class_variance_authority10.cva)(
+var dialogContentVariants = (0, import_class_variance_authority11.cva)(
   "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] border-2 border-border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
   {
     variants: {
@@ -1533,9 +1574,9 @@ var DialogComponent = Object.assign(Dialog, {
 
 // components/ui/Divider.tsx
 var React21 = __toESM(require("react"));
-var import_class_variance_authority11 = require("class-variance-authority");
+var import_class_variance_authority12 = require("class-variance-authority");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var dividerVariants = (0, import_class_variance_authority11.cva)("border-border", {
+var dividerVariants = (0, import_class_variance_authority12.cva)("border-border", {
   variants: {
     orientation: {
       horizontal: "w-full border-t-2",
@@ -1579,9 +1620,9 @@ Divider.displayName = "Divider";
 
 // components/ui/Stack.tsx
 var React22 = __toESM(require("react"));
-var import_class_variance_authority12 = require("class-variance-authority");
+var import_class_variance_authority13 = require("class-variance-authority");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var stackVariants = (0, import_class_variance_authority12.cva)("flex", {
+var stackVariants = (0, import_class_variance_authority13.cva)("flex", {
   variants: {
     direction: {
       vertical: "flex-col",
@@ -1651,9 +1692,9 @@ Stack.displayName = "Stack";
 
 // components/ui/Flex.tsx
 var React23 = __toESM(require("react"));
-var import_class_variance_authority13 = require("class-variance-authority");
+var import_class_variance_authority14 = require("class-variance-authority");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var flexVariants = (0, import_class_variance_authority13.cva)("flex", {
+var flexVariants = (0, import_class_variance_authority14.cva)("flex", {
   variants: {
     direction: {
       row: "flex-row",
@@ -1735,9 +1776,9 @@ Flex.displayName = "Flex";
 
 // components/ui/Grid.tsx
 var React24 = __toESM(require("react"));
-var import_class_variance_authority14 = require("class-variance-authority");
+var import_class_variance_authority15 = require("class-variance-authority");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var gridVariants = (0, import_class_variance_authority14.cva)("grid", {
+var gridVariants = (0, import_class_variance_authority15.cva)("grid", {
   variants: {
     columns: {
       1: "grid-cols-1",
@@ -1828,9 +1869,9 @@ Grid.displayName = "Grid";
 
 // components/ui/Container.tsx
 var React25 = __toESM(require("react"));
-var import_class_variance_authority15 = require("class-variance-authority");
+var import_class_variance_authority16 = require("class-variance-authority");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var containerVariants = (0, import_class_variance_authority15.cva)("mx-auto px-4 sm:px-6 lg:px-8", {
+var containerVariants = (0, import_class_variance_authority16.cva)("mx-auto px-4 sm:px-6 lg:px-8", {
   variants: {
     size: {
       sm: "max-w-2xl",
@@ -2889,7 +2930,7 @@ var MenubarComponent = Object.assign(MenubarRoot, {
 // components/ui/NavigationMenu.tsx
 var React38 = __toESM(require("react"));
 var NavigationMenuPrimitive = __toESM(require("@radix-ui/react-navigation-menu"));
-var import_class_variance_authority16 = require("class-variance-authority");
+var import_class_variance_authority17 = require("class-variance-authority");
 var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var NavigationMenuRoot = React38.forwardRef((_a, ref) => {
@@ -2937,7 +2978,7 @@ var NavigationMenuItem = React38.forwardRef((_a, ref) => {
   );
 });
 NavigationMenuItem.displayName = "NavigationMenu.Item";
-var navigationMenuTriggerStyle = (0, import_class_variance_authority16.cva)(
+var navigationMenuTriggerStyle = (0, import_class_variance_authority17.cva)(
   "group inline-flex h-10 w-max items-center justify-center bg-background text-foreground px-4 py-2 text-sm font-head transition-colors hover:bg-muted focus:outline-none disabled:pointer-events-none disabled:opacity-50"
 );
 var NavigationMenuTrigger = React38.forwardRef((_a, ref) => {
@@ -3356,30 +3397,58 @@ var React40 = __toESM(require("react"));
 // components/ThemeProvider.tsx
 var import_react9 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
+var VALID_THEMES = ["light", "dark", "system"];
+var COLOR_THEMES = ["blue", "plum", "plum-trio"];
 var ThemeContext = (0, import_react9.createContext)(void 0);
 var STORAGE_KEY = "substrateui-theme";
+var COLOR_STORAGE_KEY = "substrateui-color-theme";
 function getSystemTheme() {
   if (typeof window === "undefined") return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
+function readStoredTheme(key, fallback) {
+  if (typeof window === "undefined") return fallback;
+  const stored = localStorage.getItem(key);
+  return VALID_THEMES.includes(stored) ? stored : fallback;
+}
+function readStoredColorTheme(key, fallback) {
+  if (typeof window === "undefined") return fallback;
+  const stored = localStorage.getItem(key);
+  return COLOR_THEMES.includes(stored != null ? stored : "") ? stored : fallback;
+}
 function applyClass(resolved) {
   document.documentElement.classList.remove("light", "dark");
   document.documentElement.classList.add(resolved);
 }
+function applyColorTheme(colorTheme) {
+  for (const t of COLOR_THEMES) {
+    document.documentElement.classList.remove(`theme-${t}`);
+  }
+  if (colorTheme !== "blue") {
+    document.documentElement.classList.add(`theme-${colorTheme}`);
+  }
+}
 function ThemeProvider({
   children,
   defaultTheme = "system",
-  storageKey = STORAGE_KEY
+  defaultColorTheme = "blue",
+  storageKey = STORAGE_KEY,
+  colorStorageKey = COLOR_STORAGE_KEY
 }) {
-  const [theme, setThemeState] = (0, import_react9.useState)(() => {
-    if (typeof window === "undefined") return defaultTheme;
-    return localStorage.getItem(storageKey) || defaultTheme;
-  });
+  const [theme, setThemeState] = (0, import_react9.useState)(
+    () => readStoredTheme(storageKey, defaultTheme)
+  );
+  const [colorTheme, setColorThemeState] = (0, import_react9.useState)(
+    () => readStoredColorTheme(colorStorageKey, defaultColorTheme)
+  );
   const [systemTheme, setSystemTheme] = (0, import_react9.useState)(getSystemTheme);
   const resolvedTheme = theme === "system" ? systemTheme : theme;
   (0, import_react9.useEffect)(() => {
     applyClass(resolvedTheme);
   }, [resolvedTheme]);
+  (0, import_react9.useEffect)(() => {
+    applyColorTheme(colorTheme);
+  }, [colorTheme]);
   (0, import_react9.useEffect)(() => {
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => {
@@ -3388,6 +3457,23 @@ function ThemeProvider({
     mq.addEventListener("change", handler);
     return () => mq.removeEventListener("change", handler);
   }, []);
+  (0, import_react9.useEffect)(() => {
+    const handler = (e) => {
+      var _a;
+      if (e.key === storageKey) {
+        setThemeState(
+          VALID_THEMES.includes(e.newValue) ? e.newValue : defaultTheme
+        );
+      }
+      if (e.key === colorStorageKey) {
+        setColorThemeState(
+          COLOR_THEMES.includes((_a = e.newValue) != null ? _a : "") ? e.newValue : defaultColorTheme
+        );
+      }
+    };
+    window.addEventListener("storage", handler);
+    return () => window.removeEventListener("storage", handler);
+  }, [storageKey, colorStorageKey, defaultTheme, defaultColorTheme]);
   const setTheme = (0, import_react9.useCallback)(
     (newTheme) => {
       localStorage.setItem(storageKey, newTheme);
@@ -3395,9 +3481,16 @@ function ThemeProvider({
     },
     [storageKey]
   );
+  const setColorTheme = (0, import_react9.useCallback)(
+    (newColorTheme) => {
+      localStorage.setItem(colorStorageKey, newColorTheme);
+      setColorThemeState(newColorTheme);
+    },
+    [colorStorageKey]
+  );
   const value = (0, import_react9.useMemo)(
-    () => ({ theme, resolvedTheme, setTheme }),
-    [theme, resolvedTheme, setTheme]
+    () => ({ theme, resolvedTheme, setTheme, colorTheme, setColorTheme, colorThemes: COLOR_THEMES }),
+    [theme, resolvedTheme, setTheme, colorTheme, setColorTheme]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ThemeContext.Provider, { value, children });
 }
@@ -4206,7 +4299,7 @@ var Pagination = Object.assign(PaginationRoot, {
 // components/ui/Sheet.tsx
 var React49 = __toESM(require("react"));
 var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_class_variance_authority17 = require("class-variance-authority");
+var import_class_variance_authority18 = require("class-variance-authority");
 var import_lucide_react16 = require("lucide-react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var Sheet = SheetPrimitive.Root;
@@ -4226,7 +4319,7 @@ var SheetOverlay = React49.forwardRef((_a, ref) => {
   );
 });
 SheetOverlay.displayName = "Sheet.Overlay";
-var sheetContentVariants = (0, import_class_variance_authority17.cva)(
+var sheetContentVariants = (0, import_class_variance_authority18.cva)(
   "fixed z-50 flex flex-col gap-4 border-2 border-border bg-background transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
@@ -4934,7 +5027,7 @@ var DataTableComponent = Object.assign(DataTableRoot, {
 // components/ui/Sidebar.tsx
 var React55 = __toESM(require("react"));
 var import_react_slot8 = require("@radix-ui/react-slot");
-var import_class_variance_authority18 = require("class-variance-authority");
+var import_class_variance_authority19 = require("class-variance-authority");
 var import_lucide_react20 = require("lucide-react");
 
 // hooks/use-mobile.ts
@@ -5348,7 +5441,7 @@ var SidebarMenuItem = React55.forwardRef((_a, ref) => {
   );
 });
 SidebarMenuItem.displayName = "Sidebar.MenuItem";
-var sidebarMenuButtonVariants = (0, import_class_variance_authority18.cva)(
+var sidebarMenuButtonVariants = (0, import_class_variance_authority19.cva)(
   "peer/menu-button flex w-full items-center gap-2 overflow-hidden outline-2 outline-transparent p-2 text-left text-sm ring-ring transition-[width,height,padding] hover:bg-primary hover:text-primary-foreground hover:outline-border focus-visible:outline-border focus-visible:text-primary-foreground focus-visible:bg-primary disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
@@ -5909,6 +6002,83 @@ function ThemeToggle(_a) {
   );
 }
 
+// components/ColorThemeToggle.tsx
+var import_react15 = require("react");
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var subscribe2 = () => () => {
+};
+var getSnapshot2 = () => true;
+var getServerSnapshot2 = () => false;
+var COLOR_SWATCHES = {
+  blue: "#5294FF",
+  plum: "#B254CF",
+  "plum-trio": "#B254CF"
+};
+var COLOR_LABELS = {
+  blue: "Blue",
+  plum: "Plum",
+  "plum-trio": "Plum Trio"
+};
+function ColorThemeToggle(_a) {
+  var _b = _a, {
+    variant = "ghost",
+    size = "md",
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "className"
+  ]);
+  const { colorTheme, setColorTheme, colorThemes } = useTheme();
+  const mounted = (0, import_react15.useSyncExternalStore)(subscribe2, getSnapshot2, getServerSnapshot2);
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(DropdownMenuComponent, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DropdownMenuComponent.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      IconButton,
+      __spreadProps(__spreadValues({
+        variant,
+        size,
+        className,
+        "aria-label": mounted ? `Color theme: ${colorTheme}` : "Color theme"
+      }, props), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          "span",
+          {
+            className: "block w-4 h-4 border-2 border-border",
+            style: {
+              backgroundColor: mounted ? COLOR_SWATCHES[colorTheme] : void 0,
+              borderRadius: "var(--radius, 0)"
+            }
+          }
+        )
+      })
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(DropdownMenuComponent.Content, { align: "end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DropdownMenuComponent.Label, { children: "Color Theme" }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DropdownMenuComponent.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        DropdownMenuComponent.RadioGroup,
+        {
+          value: colorTheme,
+          onValueChange: (v) => setColorTheme(v),
+          children: colorThemes.map((theme) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(DropdownMenuComponent.RadioItem, { value: theme, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              "span",
+              {
+                className: "inline-block w-3 h-3 border border-border mr-1",
+                style: {
+                  backgroundColor: COLOR_SWATCHES[theme],
+                  borderRadius: "var(--radius, 0)"
+                }
+              }
+            ),
+            COLOR_LABELS[theme]
+          ] }, theme))
+        }
+      )
+    ] })
+  ] });
+}
+
 // lib/create-theme.ts
 function createTheme(name, config) {
   const declarations = [];
@@ -5949,7 +6119,7 @@ ${declarations.join("\n")}
 }
 
 // components/landing/Hero.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function Hero({
   badge,
   title,
@@ -5959,14 +6129,14 @@ function Hero({
   className,
   align = "center"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     "section",
     {
       className: cn(
         "w-full border-b-2 bg-background",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
         "div",
         {
           className: cn(
@@ -5975,10 +6145,10 @@ function Hero({
             align === "left" && "items-start text-left"
           ),
           children: [
-            badge && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { children: badge }),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h1", { className: "font-head text-4xl sm:text-5xl lg:text-6xl max-w-4xl", children: title }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "font-sans text-lg lg:text-xl text-muted-foreground max-w-2xl", children: subtitle }),
-            actions && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex flex-wrap gap-3 mt-2", children: actions }),
+            badge && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { children: badge }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h1", { className: "font-head text-4xl sm:text-5xl lg:text-6xl max-w-4xl", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "font-sans text-lg lg:text-xl text-muted-foreground max-w-2xl", children: subtitle }),
+            actions && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex flex-wrap gap-3 mt-2", children: actions }),
             children
           ]
         }
@@ -5988,9 +6158,9 @@ function Hero({
 }
 
 // components/landing/Section.tsx
-var import_class_variance_authority19 = require("class-variance-authority");
-var import_jsx_runtime66 = require("react/jsx-runtime");
-var sectionVariants = (0, import_class_variance_authority19.cva)("w-full py-16 lg:py-24 scroll-mt-[120px]", {
+var import_class_variance_authority20 = require("class-variance-authority");
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var sectionVariants = (0, import_class_variance_authority20.cva)("w-full py-16 lg:py-24 scroll-mt-[120px]", {
   variants: {
     background: {
       default: "bg-background",
@@ -6019,13 +6189,13 @@ function Section(_a) {
     "background",
     "align"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     "section",
     __spreadProps(__spreadValues({
       className: cn(sectionVariants({ background }), className)
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "mx-auto max-w-6xl px-4", children: [
-        (title || subtitle) && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "mx-auto max-w-6xl px-4", children: [
+        (title || subtitle) && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
           "div",
           {
             className: cn(
@@ -6034,8 +6204,8 @@ function Section(_a) {
               align === "left" && "text-left"
             ),
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h2", { className: "font-head text-3xl lg:text-4xl mb-3", children: title }),
-              subtitle && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "font-sans text-lg text-muted-foreground max-w-2xl mx-auto", children: subtitle })
+              title && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h2", { className: "font-head text-3xl lg:text-4xl mb-3", children: title }),
+              subtitle && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "font-sans text-lg text-muted-foreground max-w-2xl mx-auto", children: subtitle })
             ]
           }
         ),
@@ -6046,7 +6216,7 @@ function Section(_a) {
 }
 
 // components/landing/Footer.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function Footer({
   brand,
   tagline,
@@ -6054,15 +6224,15 @@ function Footer({
   bottom,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("footer", { className: cn("w-full border-t-2 bg-background", className), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "mx-auto max-w-6xl px-4 py-12 lg:py-16", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "grid gap-8 lg:grid-cols-[1.5fr_repeat(auto-fit,1fr)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "max-w-xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "font-head text-2xl mb-2", children: brand }),
-        tagline && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "font-sans text-sm text-muted-foreground", children: tagline })
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("footer", { className: cn("w-full border-t-2 bg-background", className), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "mx-auto max-w-6xl px-4 py-12 lg:py-16", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "grid gap-8 lg:grid-cols-[1.5fr_repeat(auto-fit,1fr)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "max-w-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "font-head text-2xl mb-2", children: brand }),
+        tagline && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "font-sans text-sm text-muted-foreground", children: tagline })
       ] }),
-      groups.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3 col-span-full lg:col-span-1", children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h4", { className: "font-head text-sm uppercase mb-3", children: group.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("ul", { className: "flex flex-col gap-2", children: group.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      groups.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3 col-span-full lg:col-span-1", children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h4", { className: "font-head text-sm uppercase mb-3", children: group.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("ul", { className: "flex flex-col gap-2", children: group.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "a",
           {
             href: link.href,
@@ -6072,21 +6242,21 @@ function Footer({
         ) }, link.label)) })
       ] }, group.title)) })
     ] }),
-    bottom && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "mt-12 pt-6 border-t-2 font-sans text-sm text-muted-foreground", children: bottom })
+    bottom && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "mt-12 pt-6 border-t-2 font-sans text-sm text-muted-foreground", children: bottom })
   ] }) });
 }
 
 // components/landing/PricingTable.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function PricingTable({ tiers, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     "div",
     {
       className: cn(
         "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
         className
       ),
-      children: tiers.map((tier) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+      children: tiers.map((tier) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
         "div",
         {
           className: cn(
@@ -6094,15 +6264,15 @@ function PricingTable({ tiers, className }) {
             tier.highlighted ? "shadow-lg border-primary ring-2 ring-primary scale-[1.02]" : "shadow-md"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "p-6 border-b-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h3", { className: "font-head text-xl", children: tier.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "p-6 border-b-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("h3", { className: "font-head text-xl", children: tier.name }),
                 tier.badge
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "font-head text-4xl mb-1", children: tier.price }),
-              tier.description && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "font-sans text-sm text-muted-foreground", children: tier.description })
+              /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "font-head text-4xl mb-1", children: tier.price }),
+              tier.description && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "font-sans text-sm text-muted-foreground", children: tier.description })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "p-6 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("ul", { className: "flex flex-col gap-3", children: tier.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "p-6 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("ul", { className: "flex flex-col gap-3", children: tier.features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
               "li",
               {
                 className: cn(
@@ -6110,7 +6280,7 @@ function PricingTable({ tiers, className }) {
                   !feature.included && "text-muted-foreground line-through"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                     "span",
                     {
                       className: cn(
@@ -6125,7 +6295,7 @@ function PricingTable({ tiers, className }) {
               },
               feature.text
             )) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "p-6 border-t-2", children: tier.cta })
+            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "p-6 border-t-2", children: tier.cta })
           ]
         },
         tier.name
@@ -6135,7 +6305,7 @@ function PricingTable({ tiers, className }) {
 }
 
 // components/landing/FeatureSection.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var columnClasses2 = {
   2: "grid gap-6 sm:grid-cols-2",
   3: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
@@ -6146,14 +6316,14 @@ function FeatureSection({
   columns = 3,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: cn(columnClasses2[columns], className), children: features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: cn(columnClasses2[columns], className), children: features.map((feature) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     "div",
     {
       className: "border-2 p-6 bg-card shadow-md",
       children: [
-        feature.icon && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "mb-4 inline-flex items-center justify-center h-12 w-12 border-2 bg-primary text-primary-foreground shadow-sm", children: feature.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("h3", { className: "font-head text-lg mb-2", children: feature.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "font-sans text-sm text-muted-foreground", children: feature.description })
+        feature.icon && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "mb-4 inline-flex items-center justify-center h-12 w-12 border-2 bg-primary text-primary-foreground shadow-sm", children: feature.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("h3", { className: "font-head text-lg mb-2", children: feature.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "font-sans text-sm text-muted-foreground", children: feature.description })
       ]
     },
     feature.title
@@ -6161,7 +6331,7 @@ function FeatureSection({
 }
 
 // components/landing/Testimonial.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var columnClasses3 = {
   1: "grid gap-6 max-w-2xl mx-auto",
   2: "grid gap-6 sm:grid-cols-2",
@@ -6172,21 +6342,21 @@ function Testimonial({
   columns = 3,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: cn(columnClasses3[columns], className), children: testimonials.map((t) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: cn(columnClasses3[columns], className), children: testimonials.map((t) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     "div",
     {
       className: "border-2 p-6 bg-card shadow-md flex flex-col",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("blockquote", { className: "font-sans text-sm leading-relaxed flex-1 mb-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("blockquote", { className: "font-sans text-sm leading-relaxed flex-1 mb-6", children: [
           "\u201C",
           t.quote,
           "\u201D"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex items-center gap-3 border-t-2 pt-4", children: [
-          t.avatar && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "h-10 w-10 shrink-0 border-2 overflow-hidden", children: t.avatar }),
-          /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "font-head text-sm", children: t.name }),
-            (t.role || t.company) && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "font-sans text-xs text-muted-foreground", children: [t.role, t.company].filter(Boolean).join(", ") })
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center gap-3 border-t-2 pt-4", children: [
+          t.avatar && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "h-10 w-10 shrink-0 border-2 overflow-hidden", children: t.avatar }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "font-head text-sm", children: t.name }),
+            (t.role || t.company) && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { className: "font-sans text-xs text-muted-foreground", children: [t.role, t.company].filter(Boolean).join(", ") })
           ] })
         ] })
       ]
@@ -6196,9 +6366,9 @@ function Testimonial({
 }
 
 // components/landing/LogoCloud.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 function LogoCloud({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     "div",
     {
       className: cn(
@@ -6211,24 +6381,24 @@ function LogoCloud({ children, className }) {
 }
 
 // components/landing/CTABanner.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 function CTABanner({
   title,
   subtitle,
   actions,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "section",
     {
       className: cn(
         "w-full border-y-2 bg-primary text-primary-foreground",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "mx-auto max-w-6xl px-4 py-16 lg:py-20 flex flex-col items-center text-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("h2", { className: "font-head text-3xl lg:text-4xl", children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { className: "font-sans text-lg max-w-xl", children: subtitle }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "flex flex-wrap gap-3 mt-2", children: actions })
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "mx-auto max-w-6xl px-4 py-16 lg:py-20 flex flex-col items-center text-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("h2", { className: "font-head text-3xl lg:text-4xl", children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("p", { className: "font-sans text-lg max-w-xl", children: subtitle }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "flex flex-wrap gap-3 mt-2", children: actions })
       ] })
     }
   );
@@ -6237,20 +6407,20 @@ function CTABanner({
 // components/landing/FAQ.tsx
 var React60 = __toESM(require("react"));
 var import_lucide_react23 = require("lucide-react");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 function FAQ({ items, className }) {
   const [openIndex, setOpenIndex] = React60.useState(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: cn("w-full max-w-3xl mx-auto", className), children: items.map((item, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: cn("w-full max-w-3xl mx-auto", className), children: items.map((item, i) => {
     const isOpen = openIndex === i;
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "border-2 border-b-0 last:border-b-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "border-2 border-b-0 last:border-b-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
         "button",
         {
           onClick: () => setOpenIndex(isOpen ? null : i),
           className: "w-full flex items-center justify-between p-4 text-left cursor-pointer hover:bg-accent/30 transition-colors",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "font-head text-sm pr-4", children: item.question }),
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "font-head text-sm pr-4", children: item.question }),
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
               import_lucide_react23.ChevronDown,
               {
                 className: cn(
@@ -6262,24 +6432,24 @@ function FAQ({ items, className }) {
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "px-4 pb-4 font-sans text-sm text-muted-foreground", children: item.answer })
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "px-4 pb-4 font-sans text-sm text-muted-foreground", children: item.answer })
     ] }, i);
   }) });
 }
 
 // components/landing/StatsBar.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 function StatsBar({ stats, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     "div",
     {
       className: cn(
         "w-full border-y-2 bg-card",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "mx-auto max-w-6xl px-4 py-10 grid grid-cols-2 lg:grid-cols-4 gap-8", children: stats.map((stat) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "text-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "font-head text-3xl lg:text-4xl mb-1", children: stat.value }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "font-sans text-sm text-muted-foreground uppercase", children: stat.label })
+      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "mx-auto max-w-6xl px-4 py-10 grid grid-cols-2 lg:grid-cols-4 gap-8", children: stats.map((stat) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "font-head text-3xl lg:text-4xl mb-1", children: stat.value }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "font-sans text-sm text-muted-foreground uppercase", children: stat.label })
       ] }, stat.label)) })
     }
   );
@@ -6288,37 +6458,39 @@ function StatsBar({ stats, className }) {
 // components/landing/AnnouncementBanner.tsx
 var React61 = __toESM(require("react"));
 var import_lucide_react24 = require("lucide-react");
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 function AnnouncementBanner({
   children,
   dismissible = true,
   className
 }) {
-  const [visible, setVisible] = React61.useState(() => {
-    if (typeof window === "undefined") return true;
-    return sessionStorage.getItem("announcement-dismissed") !== "true";
-  });
+  const [visible, setVisible] = React61.useState(true);
+  React61.useEffect(() => {
+    if (sessionStorage.getItem("announcement-dismissed") === "true") {
+      setVisible(false);
+    }
+  }, []);
   const handleDismiss = () => {
     setVisible(false);
     sessionStorage.setItem("announcement-dismissed", "true");
   };
   if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     "div",
     {
       className: cn(
         "w-full bg-primary text-primary-foreground border-b-2",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "mx-auto max-w-6xl px-4 py-2 flex items-center justify-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("p", { className: "font-sans text-sm text-center flex-1", children }),
-        dismissible && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "mx-auto max-w-6xl px-4 py-2 flex items-center justify-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "font-sans text-sm text-center flex-1", children }),
+        dismissible && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           "button",
           {
             onClick: handleDismiss,
             className: "shrink-0 p-2 min-w-[44px] min-h-[44px] inline-flex items-center justify-center hover:bg-foreground/10 transition-colors cursor-pointer",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_lucide_react24.X, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react24.X, { className: "h-4 w-4" })
           }
         )
       ] })
@@ -6327,7 +6499,7 @@ function AnnouncementBanner({
 }
 
 // components/landing/NewsletterSignup.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 function NewsletterSignup({
   title = "Stay in the loop",
   subtitle,
@@ -6335,16 +6507,16 @@ function NewsletterSignup({
   buttonLabel = "Subscribe",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: cn("w-full max-w-md mx-auto", className), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("h3", { className: "font-head text-xl mb-2 text-center", children: title }),
-    subtitle && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "font-sans text-sm text-muted-foreground text-center mb-4", children: subtitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: cn("w-full max-w-md mx-auto", className), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("h3", { className: "font-head text-xl mb-2 text-center", children: title }),
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: "font-sans text-sm text-muted-foreground text-center mb-4", children: subtitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
       "form",
       {
         onSubmit: (e) => e.preventDefault(),
         className: "flex gap-2",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
             "input",
             {
               type: "email",
@@ -6353,7 +6525,7 @@ function NewsletterSignup({
               required: true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
             "button",
             {
               type: "submit",
@@ -6384,6 +6556,7 @@ function NewsletterSignup({
   Chart,
   Checkbox,
   Collapsible,
+  ColorThemeToggle,
   Combobox,
   Command,
   Container,
@@ -6445,6 +6618,7 @@ function NewsletterSignup({
   Tooltip,
   TwoColumnLayout,
   alertVariants,
+  avatarVariants,
   badgeVariants,
   buttonVariants,
   cardVariants,