@mikenotthepope/substrateui 0.1.1 → 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,
@@ -3396,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) => {
@@ -3428,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);
@@ -3435,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 });
 }
@@ -5949,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 = [];
@@ -5989,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,
@@ -5999,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(
@@ -6015,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
           ]
         }
@@ -6029,7 +6159,7 @@ function Hero({
 
 // components/landing/Section.tsx
 var import_class_variance_authority20 = require("class-variance-authority");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+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: {
@@ -6059,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(
@@ -6074,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 })
             ]
           }
         ),
@@ -6086,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,
@@ -6094,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,
@@ -6112,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(
@@ -6134,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(
@@ -6150,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(
@@ -6165,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
@@ -6175,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",
@@ -6186,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
@@ -6201,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",
@@ -6212,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(", ") })
           ] })
         ] })
       ]
@@ -6236,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(
@@ -6251,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 })
       ] })
     }
   );
@@ -6277,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(
@@ -6302,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)) })
     }
   );
@@ -6328,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" })
           }
         )
       ] })
@@ -6367,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,
@@ -6375,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",
@@ -6393,7 +6525,7 @@ function NewsletterSignup({
               required: true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
             "button",
             {
               type: "submit",
@@ -6424,6 +6556,7 @@ function NewsletterSignup({
   Chart,
   Checkbox,
   Collapsible,
+  ColorThemeToggle,
   Combobox,
   Command,
   Container,