@mission-studio/puck 1.0.23 → 1.0.25

package/dist/components/page/astro/index.js

@@ -166,181 +166,7 @@ function Paragraph({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { id, style, children: resolvedText });
 }
 
-// entries/context.tsx
-var import_react = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var EntriesContext = (0, import_react.createContext)(null);
-function useEntries() {
-  const context = (0, import_react.useContext)(EntriesContext);
-  if (!context) {
-    return {
-      entries: [],
-      entryNames: [],
-      getEntry: () => void 0,
-      getEntryValue: () => void 0
-    };
-  }
-  return context;
-}
-
-// hooks/useGtmEvent.ts
-function useGtmEvent() {
-  return (eventName, data) => {
-    if (typeof window === "undefined") return;
-    if (typeof window.gtag === "function") {
-      window.gtag("event", eventName, data || {});
-    }
-  };
-}
-
-// hooks/useUtmParams.ts
-var import_react2 = require("react");
-function useUtmParams() {
-  const [utmParams, setUtmParams] = (0, import_react2.useState)({});
-  (0, import_react2.useEffect)(() => {
-    if (typeof window === "undefined") return;
-    const urlParams = new URLSearchParams(window.location.search);
-    const source = urlParams.get("utm_source");
-    const medium = urlParams.get("utm_medium");
-    const campaign = urlParams.get("utm_campaign");
-    const content = urlParams.get("utm_content");
-    const term = urlParams.get("utm_term");
-    const params = {};
-    if (source) {
-      params.source = source;
-      sessionStorage.setItem("utm_source", source);
-    } else {
-      const stored = sessionStorage.getItem("utm_source");
-      if (stored) params.source = stored;
-    }
-    if (medium) {
-      params.medium = medium;
-      sessionStorage.setItem("utm_medium", medium);
-    } else {
-      const stored = sessionStorage.getItem("utm_medium");
-      if (stored) params.medium = stored;
-    }
-    if (campaign) {
-      params.campaign = campaign;
-      sessionStorage.setItem("utm_campaign", campaign);
-    } else {
-      const stored = sessionStorage.getItem("utm_campaign");
-      if (stored) params.campaign = stored;
-    }
-    if (content) {
-      params.content = content;
-      sessionStorage.setItem("utm_content", content);
-    } else {
-      const stored = sessionStorage.getItem("utm_content");
-      if (stored) params.content = stored;
-    }
-    if (term) {
-      params.term = term;
-      sessionStorage.setItem("utm_term", term);
-    } else {
-      const stored = sessionStorage.getItem("utm_term");
-      if (stored) params.term = stored;
-    }
-    setUtmParams(params);
-  }, []);
-  return utmParams;
-}
-
-// theme/context.tsx
-var import_react3 = require("react");
-
-// theme/defaults.ts
-var DEFAULT_THEME = {
-  id: "default",
-  name: "Default Theme",
-  colors: {
-    primary: { color: "#3B82F6", opacity: 100 },
-    secondary: { color: "#8B5CF6", opacity: 100 },
-    accent: { color: "#10B981", opacity: 100 },
-    background: { color: "#FFFFFF", opacity: 100 },
-    foreground: { color: "#111827", opacity: 100 },
-    muted: { color: "#F3F4F6", opacity: 100 }
-  },
-  typography: {
-    fontFamily: {
-      heading: "system-ui, sans-serif",
-      body: "system-ui, sans-serif"
-    },
-    fontSize: {
-      base: "base",
-      heading: "4xl"
-    },
-    fontWeight: {
-      normal: 400,
-      heading: 700
-    }
-  },
-  spacing: {
-    xs: 8,
-    sm: 12,
-    md: 16,
-    lg: 24,
-    xl: 32
-  },
-  borders: {
-    radiusSmall: 4,
-    radiusMedium: 8,
-    radiusLarge: 16
-  },
-  shadows: {
-    small: "sm",
-    medium: "md",
-    large: "lg"
-  }
-};
-
-// theme/context.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ThemeContext = (0, import_react3.createContext)(null);
-function useTheme() {
-  const context = (0, import_react3.useContext)(ThemeContext);
-  if (!context) {
-    return {
-      theme: DEFAULT_THEME,
-      resolveColor: (key) => DEFAULT_THEME.colors[key],
-      resolveSpacing: (key) => DEFAULT_THEME.spacing[key],
-      resolveBorderRadius: (key) => DEFAULT_THEME.borders[key],
-      resolveShadow: (key) => DEFAULT_THEME.shadows[key]
-    };
-  }
-  return context;
-}
-
-// utils/index.ts
-var import_tailwind_merge = require("tailwind-merge");
-var import_clsx = require("clsx");
-function hexToRgba(hex, opacity) {
-  if (hex.startsWith("rgba(")) {
-    const rgbaMatch = hex.match(
-      /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/
-    );
-    if (rgbaMatch) {
-      return `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${opacity / 100})`;
-    }
-  }
-  if (hex.startsWith("rgb(")) {
-    const rgbMatch = hex.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-    if (rgbMatch) {
-      return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${opacity / 100})`;
-    }
-  }
-  const sanitized = hex.replace("#", "");
-  const r = parseInt(sanitized.slice(0, 2), 16);
-  const g = parseInt(sanitized.slice(2, 4), 16);
-  const b = parseInt(sanitized.slice(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
-}
-function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-}
-
-// components/page/Button.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+// components/page/primitives/Button.ts
 var sizeStyles = {
   sm: { padding: "8px 16px", fontSize: "0.875rem" },
   md: { padding: "12px 24px", fontSize: "1rem" },
@@ -354,75 +180,8 @@ var radiusMap = {
   lg: "16px",
   full: "9999px"
 };
-function isThemeableValue(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
-}
-function isEntryBoundValue(value) {
-  return typeof value === "object" && value !== null && "useEntry" in value;
-}
-function Button({
-  text,
-  href,
-  target = "_self",
-  variant = "solid",
-  size = "md",
-  color,
-  textColor,
-  borderRadius = "md",
-  fullWidth = false,
-  align = "center",
-  id
-}) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const { getEntryValue } = useEntries();
-  const utm = useUtmParams();
-  const sendEvent = useGtmEvent();
-  const resolvedText = (() => {
-    if (!text) return "Button";
-    if (typeof text === "string") return text;
-    if (isEntryBoundValue(text)) {
-      if (text.useEntry) {
-        return String(getEntryValue(text.entryName, text.fieldKey) ?? "Button");
-      }
-      return text.value;
-    }
-    return "Button";
-  })();
-  const handleClick = () => {
-    const sessionId = typeof window !== "undefined" ? sessionStorage.getItem("session_id") : null;
-    sendEvent("button_click", {
-      text: resolvedText,
-      href: href || void 0,
-      variant,
-      session_id: sessionId,
-      ...utm
-    });
-  };
-  const resolvedColor = (() => {
-    if (!color) return resolveColor2("primary");
-    if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue(color)) {
-      return color.useTheme ? resolveColor2(color.themeKey) : color.value;
-    }
-    if ("color" in color) return color;
-    return resolveColor2("primary");
-  })();
-  const resolvedTextColor = (() => {
-    if (!textColor) {
-      if (variant === "solid") return { color: "#FFFFFF", opacity: 100 };
-      return resolvedColor;
-    }
-    if (typeof textColor === "string")
-      return { color: textColor, opacity: 100 };
-    if (isThemeableValue(textColor)) {
-      return textColor.useTheme ? resolveColor2(textColor.themeKey) : textColor.value;
-    }
-    if ("color" in textColor) return textColor;
-    return { color: "#FFFFFF", opacity: 100 };
-  })();
-  const bgColor = hexToRgba(resolvedColor.color, resolvedColor.opacity);
-  const fgColor = hexToRgba(resolvedTextColor.color, resolvedTextColor.opacity);
-  const baseStyle = {
+function getBaseStyle(size, borderRadius, fullWidth) {
+  return {
     ...sizeStyles[size],
     borderRadius: radiusMap[borderRadius],
     fontWeight: 600,
@@ -435,6 +194,8 @@ function Button({
     width: fullWidth ? "100%" : "auto",
     border: "none"
   };
+}
+function getVariantStyles(variant, bgColor, fgColor) {
   const variantStyles = {
     solid: {
       backgroundColor: bgColor,
@@ -456,14 +217,45 @@ function Button({
       textDecoration: "underline"
     }
   };
-  const style = { ...baseStyle, ...variantStyles[variant] };
-  const wrapperStyle = {
+  return variantStyles[variant] || variantStyles.solid;
+}
+function getWrapperStyle(align) {
+  return {
     display: "flex",
     justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center"
   };
-  const content = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style, children: resolvedText });
+}
+
+// components/page/astro/Button.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Button({
+  text,
+  href,
+  target = "_self",
+  variant = "solid",
+  size = "md",
+  color,
+  textColor,
+  borderRadius = "md",
+  fullWidth = false,
+  align = "center",
+  id
+}) {
+  const resolvedText = typeof text === "string" ? text : "Button";
+  const bgColor = typeof color === "string" ? color : "rgba(99, 102, 241, 1)";
+  const fgColor = typeof textColor === "string" ? textColor : variant === "solid" ? "rgba(255, 255, 255, 1)" : bgColor;
+  const baseStyle = getBaseStyle(size, borderRadius, fullWidth);
+  const variantStyle = getVariantStyles(variant, bgColor, fgColor);
+  const style = { ...baseStyle, ...variantStyle };
+  const wrapperStyle = getWrapperStyle(align);
+  const dataAttrs = {
+    "data-gtm-event": "button_click",
+    "data-gtm-text": resolvedText,
+    "data-gtm-href": href || "",
+    "data-gtm-variant": variant
+  };
   if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "a",
       {
         id,
@@ -471,16 +263,15 @@ function Button({
         target,
         style,
         rel: target === "_blank" ? "noopener noreferrer" : void 0,
-        onClick: handleClick,
+        ...dataAttrs,
         children: resolvedText
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { id, type: "button", style, onClick: handleClick, children: resolvedText }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { id, type: "button", style, ...dataAttrs, children: resolvedText }) });
 }
 
-// components/page/Image.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+// components/page/primitives/Image.ts
 var widthMap = {
   auto: "auto",
   full: "100%",
@@ -511,66 +302,16 @@ var shadowMap = {
   lg: "0 10px 15px rgba(0,0,0,0.1)",
   xl: "0 20px 25px rgba(0,0,0,0.15)"
 };
-function isThemeableValue2(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
-}
-function isEntryBoundValue2(value) {
-  return typeof value === "object" && value !== null && "useEntry" in value;
-}
-function Image({
-  src,
-  alt = "",
-  width = "full",
-  aspectRatio = "auto",
-  objectFit = "cover",
-  borderRadius = "none",
-  shadow = "none",
-  align = "center",
-  caption,
-  captionColor,
-  id
-}) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const { getEntryValue } = useEntries();
-  const resolvedSrc = (() => {
-    if (!src) return "";
-    if (typeof src === "string") return src;
-    if (isEntryBoundValue2(src)) {
-      if (src.useEntry) {
-        return String(getEntryValue(src.entryName, src.fieldKey) ?? "");
-      }
-      return src.value;
-    }
-    return "";
-  })();
-  const resolvedCaption = (() => {
-    if (!caption) return "";
-    if (typeof caption === "string") return caption;
-    if (isEntryBoundValue2(caption)) {
-      if (caption.useEntry) {
-        return String(getEntryValue(caption.entryName, caption.fieldKey) ?? "");
-      }
-      return caption.value;
-    }
-    return "";
-  })();
-  const resolvedCaptionColor = (() => {
-    if (!captionColor) return resolveColor2("muted");
-    if (typeof captionColor === "string")
-      return { color: captionColor, opacity: 100 };
-    if (isThemeableValue2(captionColor)) {
-      return captionColor.useTheme ? resolveColor2(captionColor.themeKey) : captionColor.value;
-    }
-    if ("color" in captionColor) return captionColor;
-    return resolveColor2("muted");
-  })();
-  const wrapperStyle = {
+function getWrapperStyle2(align) {
+  return {
     display: "flex",
     flexDirection: "column",
     alignItems: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
     gap: "8px"
   };
-  const imageStyle = {
+}
+function getImageStyle(width, aspectRatio, objectFit, borderRadius, shadow) {
+  return {
     width: widthMap[width],
     maxWidth: "100%",
     aspectRatio: aspectRatioMap[aspectRatio],
@@ -579,18 +320,49 @@ function Image({
     boxShadow: shadowMap[shadow],
     display: "block"
   };
-  const captionStyle = {
+}
+function getCaptionStyle(align, width, captionColor) {
+  return {
     fontSize: "0.875rem",
-    color: hexToRgba(resolvedCaptionColor.color, resolvedCaptionColor.opacity),
+    color: captionColor,
     textAlign: align,
     maxWidth: widthMap[width]
   };
+}
+
+// components/page/astro/Image.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Image({
+  src,
+  alt = "",
+  width = "full",
+  aspectRatio = "auto",
+  objectFit = "cover",
+  borderRadius = "none",
+  shadow = "none",
+  align = "center",
+  caption,
+  captionColor,
+  id
+}) {
+  const resolvedSrc = typeof src === "string" ? src : "";
+  const resolvedCaption = typeof caption === "string" ? caption : "";
+  const resolvedCaptionColorStr = typeof captionColor === "string" ? captionColor : "rgba(107, 114, 128, 1)";
+  const wrapperStyle = getWrapperStyle2(align);
+  const imageStyle2 = getImageStyle(
+    width,
+    aspectRatio,
+    objectFit,
+    borderRadius,
+    shadow
+  );
+  const captionStyle = getCaptionStyle(align, width, resolvedCaptionColorStr);
   if (!resolvedSrc) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       {
         style: {
-          ...imageStyle,
+          ...imageStyle2,
           backgroundColor: "#e5e7eb",
           display: "flex",
           alignItems: "center",
@@ -602,15 +374,16 @@ function Image({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("figure", { id, style: { ...wrapperStyle, margin: 0 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: resolvedSrc, alt, style: imageStyle, loading: "lazy" }),
-    resolvedCaption && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("figcaption", { style: captionStyle, children: resolvedCaption })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("figure", { id, style: { ...wrapperStyle, margin: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: resolvedSrc, alt, style: imageStyle2, loading: "lazy" }),
+    resolvedCaption && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("figcaption", { style: captionStyle, children: resolvedCaption })
   ] });
 }
 
-// components/page/ImageCarousel.tsx
-var import_react4 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+// components/page/astro/ImageCarousel.tsx
+var import_react = require("react");
+
+// components/page/primitives/ImageCarousel.ts
 var aspectRatioMap2 = {
   "16:9": "16 / 9",
   "4:3": "4 / 3",
@@ -623,115 +396,38 @@ var radiusMap3 = {
   md: "8px",
   lg: "16px"
 };
-function isThemeableValue3(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
-}
-function ImageCarousel({
-  images = [],
-  aspectRatio = "16:9",
-  borderRadius = "none",
-  showDots = true,
-  showArrows = true,
-  arrowColor,
-  dotColor,
-  id
-}) {
-  const [currentIndex, setCurrentIndex] = (0, import_react4.useState)(0);
-  const { resolveColor: resolveColor2 } = useTheme();
-  const utm = useUtmParams();
-  const sendEvent = useGtmEvent();
-  const resolvedArrowColor = (() => {
-    if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
-    if (typeof arrowColor === "string")
-      return { color: arrowColor, opacity: 100 };
-    if (isThemeableValue3(arrowColor)) {
-      return arrowColor.useTheme ? resolveColor2(arrowColor.themeKey) : arrowColor.value;
-    }
-    if ("color" in arrowColor) return arrowColor;
-    return { color: "#FFFFFF", opacity: 100 };
-  })();
-  const resolvedDotColor = (() => {
-    if (!dotColor) return resolveColor2("primary");
-    if (typeof dotColor === "string") return { color: dotColor, opacity: 100 };
-    if (isThemeableValue3(dotColor)) {
-      return dotColor.useTheme ? resolveColor2(dotColor.themeKey) : dotColor.value;
-    }
-    if ("color" in dotColor) return dotColor;
-    return resolveColor2("primary");
-  })();
-  const goToPrevious = () => {
-    const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
-    setCurrentIndex(newIndex);
-    sendEvent("carousel_navigate", {
-      direction: "previous",
-      slideIndex: newIndex,
-      totalSlides: images.length,
-      ...utm
-    });
-  };
-  const goToNext = () => {
-    const newIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
-    setCurrentIndex(newIndex);
-    sendEvent("carousel_navigate", {
-      direction: "next",
-      slideIndex: newIndex,
-      totalSlides: images.length,
-      ...utm
-    });
-  };
-  const goToSlide = (index) => {
-    setCurrentIndex(index);
-    sendEvent("carousel_navigate", {
-      direction: "direct",
-      slideIndex: index,
-      totalSlides: images.length,
-      ...utm
-    });
-  };
-  if (images.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "div",
-      {
-        style: {
-          aspectRatio: aspectRatioMap2[aspectRatio],
-          backgroundColor: "#e5e7eb",
-          borderRadius: radiusMap3[borderRadius],
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "#9ca3af"
-        },
-        children: "No images"
-      }
-    );
-  }
-  const containerStyle = {
+function getContainerStyle(aspectRatio, borderRadius) {
+  return {
     position: "relative",
     aspectRatio: aspectRatioMap2[aspectRatio],
     borderRadius: radiusMap3[borderRadius],
     overflow: "hidden"
   };
-  const slideContainerStyle = {
+}
+function getSlideContainerStyle(currentIndex) {
+  return {
     display: "flex",
     transition: "transform 0.3s ease-in-out",
     transform: `translateX(-${currentIndex * 100}%)`,
     height: "100%"
   };
-  const slideStyle = {
-    minWidth: "100%",
-    height: "100%"
-  };
-  const imageStyle = {
-    width: "100%",
-    height: "100%",
-    objectFit: "cover"
-  };
-  const arrowStyle = {
+}
+var slideStyle = {
+  minWidth: "100%",
+  height: "100%"
+};
+var imageStyle = {
+  width: "100%",
+  height: "100%",
+  objectFit: "cover"
+};
+function getArrowStyle(arrowColor) {
+  return {
     position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
     backgroundColor: "rgba(0,0,0,0.5)",
-    color: hexToRgba(resolvedArrowColor.color, resolvedArrowColor.opacity),
+    color: arrowColor,
     border: "none",
     borderRadius: "50%",
     width: "40px",
@@ -743,25 +439,102 @@ function ImageCarousel({
     fontSize: "20px",
     zIndex: 1
   };
-  const dotsContainerStyle = {
-    position: "absolute",
-    bottom: "16px",
-    left: "50%",
-    transform: "translateX(-50%)",
-    display: "flex",
-    gap: "8px",
-    zIndex: 1
-  };
-  const dotStyle = (isActive) => ({
+}
+var dotsContainerStyle = {
+  position: "absolute",
+  bottom: "16px",
+  left: "50%",
+  transform: "translateX(-50%)",
+  display: "flex",
+  gap: "8px",
+  zIndex: 1
+};
+function getDotStyle(isActive, dotColor) {
+  return {
     width: "10px",
     height: "10px",
     borderRadius: "50%",
     border: "none",
     cursor: "pointer",
-    backgroundColor: isActive ? hexToRgba(resolvedDotColor.color, resolvedDotColor.opacity) : "rgba(255,255,255,0.5)"
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id, style: containerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: slideContainerStyle, children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: slideStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    backgroundColor: isActive ? dotColor : "rgba(255,255,255,0.5)"
+  };
+}
+function getEmptyState(aspectRatio, borderRadius) {
+  return {
+    aspectRatio: aspectRatioMap2[aspectRatio],
+    backgroundColor: "#e5e7eb",
+    borderRadius: radiusMap3[borderRadius],
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#9ca3af"
+  };
+}
+
+// components/page/astro/ImageCarousel.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ImageCarousel({
+  images = [],
+  aspectRatio = "16:9",
+  borderRadius = "none",
+  showDots = true,
+  showArrows = true,
+  arrowColor,
+  dotColor,
+  id
+}) {
+  const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
+  const arrowColorStr = typeof arrowColor === "string" ? arrowColor : "rgba(255, 255, 255, 1)";
+  const dotColorStr = typeof dotColor === "string" ? dotColor : "rgba(99, 102, 241, 1)";
+  const goToPrevious = () => {
+    const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
+    setCurrentIndex(newIndex);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("carousel_navigate", {
+          detail: {
+            direction: "previous",
+            slideIndex: newIndex,
+            totalSlides: images.length
+          }
+        })
+      );
+    }
+  };
+  const goToNext = () => {
+    const newIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
+    setCurrentIndex(newIndex);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("carousel_navigate", {
+          detail: {
+            direction: "next",
+            slideIndex: newIndex,
+            totalSlides: images.length
+          }
+        })
+      );
+    }
+  };
+  const goToSlide = (index) => {
+    setCurrentIndex(index);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("carousel_navigate", {
+          detail: {
+            direction: "direct",
+            slideIndex: index,
+            totalSlides: images.length
+          }
+        })
+      );
+    }
+  };
+  if (images.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: getEmptyState(aspectRatio, borderRadius), children: "No images" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id, style: getContainerStyle(aspectRatio, borderRadius), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: getSlideContainerStyle(currentIndex), children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: slideStyle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "img",
       {
         src: image.src,
@@ -770,34 +543,34 @@ function ImageCarousel({
         loading: "lazy"
       }
     ) }, index)) }),
-    showArrows && images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    showArrows && images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           type: "button",
           onClick: goToPrevious,
-          style: { ...arrowStyle, left: "16px" },
+          style: { ...getArrowStyle(arrowColorStr), left: "16px" },
           "aria-label": "Previous slide",
           children: "\u2039"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
         {
           type: "button",
           onClick: goToNext,
-          style: { ...arrowStyle, right: "16px" },
+          style: { ...getArrowStyle(arrowColorStr), right: "16px" },
           "aria-label": "Next slide",
           children: "\u203A"
         }
       )
     ] }),
-    showDots && images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: dotsContainerStyle, children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    showDots && images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: dotsContainerStyle, children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
         type: "button",
         onClick: () => goToSlide(index),
-        style: dotStyle(index === currentIndex),
+        style: getDotStyle(index === currentIndex, dotColorStr),
         "aria-label": `Go to slide ${index + 1}`
       },
       index
@@ -805,8 +578,25 @@ function ImageCarousel({
   ] });
 }
 
+// entries/context.tsx
+var import_react2 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var EntriesContext = (0, import_react2.createContext)(null);
+function useEntries() {
+  const context = (0, import_react2.useContext)(EntriesContext);
+  if (!context) {
+    return {
+      entries: [],
+      entryNames: [],
+      getEntry: () => void 0,
+      getEntryValue: () => void 0
+    };
+  }
+  return context;
+}
+
 // components/page/VideoEmbed.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var aspectRatioMap3 = {
   "16:9": "56.25%",
   // 9/16 * 100
@@ -827,7 +617,7 @@ var maxWidthMap = {
   xl: "1000px",
   full: "100%"
 };
-function isEntryBoundValue3(value) {
+function isEntryBoundValue(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
 function parseVideoUrl(url) {
@@ -864,7 +654,7 @@ function VideoEmbed({
   const resolvedUrl = (() => {
     if (!url) return "";
     if (typeof url === "string") return url;
-    if (isEntryBoundValue3(url)) {
+    if (isEntryBoundValue(url)) {
       if (url.useEntry) {
         return String(getEntryValue(url.entryName, url.fieldKey) ?? "");
       }
@@ -873,7 +663,7 @@ function VideoEmbed({
     return "";
   })();
   if (!resolvedUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         style: {
@@ -918,7 +708,7 @@ function VideoEmbed({
     height: "100%",
     border: "none"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "iframe",
     {
       src: finalUrl,
@@ -930,8 +720,8 @@ function VideoEmbed({
   ) }) });
 }
 
-// components/page/Icon.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+// components/page/primitives/Icon.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var sizeMap = {
   sm: { size: "16px", strokeWidth: 2 },
   md: { size: "24px", strokeWidth: 2 },
@@ -940,7 +730,7 @@ var sizeMap = {
   "2xl": { size: "64px", strokeWidth: 1.5 }
 };
 var icons = {
-  check: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  check: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
       width: size,
@@ -951,10 +741,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "20 6 9 17 4 12" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "20 6 9 17 4 12" })
     }
   ),
-  x: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  x: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
       width: size,
@@ -966,12 +756,12 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
       ]
     }
   ),
-  star: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  star: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
       width: size,
@@ -982,10 +772,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })
     }
   ),
-  heart: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  heart: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
       width: size,
@@ -996,10 +786,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
     }
   ),
-  arrowRight: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  arrowRight: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
       width: size,
@@ -1011,12 +801,12 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "12 5 19 12 12 19" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "12 5 19 12 12 19" })
       ]
     }
   ),
-  arrowLeft: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  arrowLeft: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
       width: size,
@@ -1028,12 +818,12 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "12 19 5 12 12 5" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "12 19 5 12 12 5" })
       ]
     }
   ),
-  mail: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  mail: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
       width: size,
@@ -1045,12 +835,12 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "22,6 12,13 2,6" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "22,6 12,13 2,6" })
       ]
     }
   ),
-  phone: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  phone: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
       width: size,
@@ -1061,10 +851,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" })
     }
   ),
-  mapPin: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  mapPin: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
       width: size,
@@ -1076,12 +866,12 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "10", r: "3" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "10", r: "3" })
       ]
     }
   ),
-  zap: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  zap: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
       width: size,
@@ -1092,10 +882,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" })
     }
   ),
-  shield: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  shield: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
       width: size,
@@ -1106,10 +896,10 @@ var icons = {
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
     }
   ),
-  users: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  users: ({ size, color, strokeWidth }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
       width: size,
@@ -1121,17 +911,24 @@ var icons = {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "9", cy: "7", r: "4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "9", cy: "7", r: "4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
       ]
     }
   )
 };
-function isThemeableValue4(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
+function getWrapperStyle3(align) {
+  return {
+    display: "flex",
+    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center"
+  };
 }
+var availableIcons = Object.keys(icons);
+
+// components/page/astro/Icon.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Icon({
   name = "check",
   size = "md",
@@ -1139,23 +936,10 @@ function Icon({
   align = "center",
   id
 }) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const resolvedColor = (() => {
-    if (!color) return resolveColor2("primary");
-    if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue4(color)) {
-      return color.useTheme ? resolveColor2(color.themeKey) : color.value;
-    }
-    if ("color" in color) return color;
-    return resolveColor2("primary");
-  })();
+  const colorValue = typeof color === "string" ? color : "rgba(99, 102, 241, 1)";
   const IconComponent = icons[name.toLowerCase()] || icons.check;
   const { size: iconSize, strokeWidth } = sizeMap[size];
-  const colorValue = hexToRgba(resolvedColor.color, resolvedColor.opacity);
-  const wrapperStyle = {
-    display: "flex",
-    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center"
-  };
+  const wrapperStyle = getWrapperStyle3(align);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     IconComponent,
     {
@@ -1165,7 +949,34 @@ function Icon({
     }
   ) });
 }
-var availableIcons = Object.keys(icons);
+
+// utils/index.ts
+var import_tailwind_merge = require("tailwind-merge");
+var import_clsx = require("clsx");
+function hexToRgba(hex, opacity) {
+  if (hex.startsWith("rgba(")) {
+    const rgbaMatch = hex.match(
+      /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/
+    );
+    if (rgbaMatch) {
+      return `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${opacity / 100})`;
+    }
+  }
+  if (hex.startsWith("rgb(")) {
+    const rgbMatch = hex.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    if (rgbMatch) {
+      return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${opacity / 100})`;
+    }
+  }
+  const sanitized = hex.replace("#", "");
+  const r = parseInt(sanitized.slice(0, 2), 16);
+  const g = parseInt(sanitized.slice(2, 4), 16);
+  const b = parseInt(sanitized.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
+}
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
 
 // design-system/shadows.ts
 var shadowPresets = [
@@ -1203,26 +1014,7 @@ var getShadowCSS = (value) => {
   return preset?.css ?? "none";
 };
 
-// components/page/Section.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function isThemeableValue5(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
-}
-function resolveBackgroundColor(bg, resolveColor2) {
-  if (!bg) return void 0;
-  if (typeof bg === "string") return bg;
-  if (isThemeableValue5(bg)) {
-    if (bg.useTheme) {
-      const themeColor = resolveColor2(bg.themeKey);
-      return hexToRgba(themeColor.color, themeColor.opacity);
-    }
-    return hexToRgba(bg.value.color, bg.value.opacity);
-  }
-  if ("color" in bg && "opacity" in bg) {
-    return hexToRgba(bg.color, bg.opacity);
-  }
-  return void 0;
-}
+// components/page/primitives/Section.ts
 function getVisibilityClasses(visibility) {
   if (!visibility) return "";
   if (!visibility.mobile && !visibility.desktop) {
@@ -1236,8 +1028,22 @@ function getVisibilityClasses(visibility) {
   }
   return "";
 }
+function getSectionStyle(verticalPadding, horizontalPadding, gap, backgroundColor, backgroundImage, shadow, borderRadius) {
+  return {
+    padding: `${verticalPadding}px ${horizontalPadding}px`,
+    gap: `${gap}px`,
+    backgroundColor,
+    backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    borderRadius: `${borderRadius}px`
+  };
+}
+
+// components/page/astro/Section.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Section({
-  children: _children,
+  children,
   verticalPadding = 48,
   horizontalPadding = 32,
   gap = 24,
@@ -1250,30 +1056,31 @@ function Section({
   visibility,
   puck
 }) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const DropZone = puck?.renderDropZone;
+  const bgColor = typeof backgroundColor === "string" ? backgroundColor : void 0;
+  const style = {
+    ...getSectionStyle(
+      verticalPadding,
+      horizontalPadding,
+      gap,
+      bgColor,
+      backgroundImage,
+      shadow,
+      borderRadius
+    ),
+    boxShadow: getShadowCSS(shadow)
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "section",
     {
       id: anchorLink,
       className: cn("flex w-full flex-col", getVisibilityClasses(visibility)),
-      style: {
-        padding: `${verticalPadding}px ${horizontalPadding}px`,
-        gap: `${gap}px`,
-        backgroundColor: resolveBackgroundColor(backgroundColor, resolveColor2),
-        backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        boxShadow: getShadowCSS(shadow),
-        borderRadius: `${borderRadius}px`
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mx-auto w-full", style: { maxWidth: contentMaxWidth }, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropZone, { zone: "content" }) })
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mx-auto w-full", style: { maxWidth: contentMaxWidth }, children })
     }
   );
 }
 
-// components/page/Container.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+// components/page/primitives/Container.ts
 var maxWidthMap2 = {
   sm: "640px",
   md: "768px",
@@ -1289,10 +1096,24 @@ var paddingMap = {
   lg: "32px",
   xl: "48px"
 };
-function isThemeableValue6(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
+function getContainerStyle2(maxWidth, paddingX, paddingY, centered, backgroundColor) {
+  return {
+    maxWidth: maxWidthMap2[maxWidth],
+    marginLeft: centered ? "auto" : void 0,
+    marginRight: centered ? "auto" : void 0,
+    paddingLeft: paddingMap[paddingX],
+    paddingRight: paddingMap[paddingX],
+    paddingTop: paddingMap[paddingY],
+    paddingBottom: paddingMap[paddingY],
+    backgroundColor,
+    width: "100%"
+  };
 }
+
+// components/page/astro/Container.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Container({
+  children,
   maxWidth = "lg",
   padding,
   paddingX = "md",
@@ -1302,36 +1123,20 @@ function Container({
   id,
   puck
 }) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const DropZone = puck?.renderDropZone;
-  const resolvedBgColor = (() => {
-    if (!backgroundColor) return null;
-    if (typeof backgroundColor === "string")
-      return { color: backgroundColor, opacity: 100 };
-    if (isThemeableValue6(backgroundColor)) {
-      return backgroundColor.useTheme ? resolveColor2(backgroundColor.themeKey) : backgroundColor.value;
-    }
-    if ("color" in backgroundColor) return backgroundColor;
-    return null;
-  })();
+  const bgColor = typeof backgroundColor === "string" ? backgroundColor : void 0;
   const effectivePaddingX = padding || paddingX;
   const effectivePaddingY = padding || paddingY;
-  const style = {
-    maxWidth: maxWidthMap2[maxWidth],
-    marginLeft: centered ? "auto" : void 0,
-    marginRight: centered ? "auto" : void 0,
-    paddingLeft: paddingMap[effectivePaddingX],
-    paddingRight: paddingMap[effectivePaddingX],
-    paddingTop: paddingMap[effectivePaddingY],
-    paddingBottom: paddingMap[effectivePaddingY],
-    backgroundColor: resolvedBgColor ? hexToRgba(resolvedBgColor.color, resolvedBgColor.opacity) : void 0,
-    width: "100%"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { id, style, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropZone, { zone: "container-content" }) });
+  const style = getContainerStyle2(
+    maxWidth,
+    effectivePaddingX,
+    effectivePaddingY,
+    centered,
+    bgColor
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { id, style, children });
 }
 
-// components/page/Columns.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+// components/page/primitives/Columns.ts
 var gapMap = {
   none: "0",
   sm: "16px",
@@ -1345,7 +1150,19 @@ var alignMap = {
   bottom: "flex-end",
   stretch: "stretch"
 };
+function getContainerStyle3(columns, gap, verticalAlign) {
+  return {
+    display: "grid",
+    gridTemplateColumns: `repeat(${columns}, 1fr)`,
+    gap: gapMap[gap],
+    alignItems: alignMap[verticalAlign]
+  };
+}
+
+// components/page/astro/Columns.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function Columns({
+  children,
   columns = 2,
   gap = "md",
   verticalAlign = "top",
@@ -1353,18 +1170,12 @@ function Columns({
   id,
   puck
 }) {
-  const DropZone = puck?.renderDropZone;
-  const containerStyle = {
-    display: "grid",
-    gridTemplateColumns: `repeat(${columns}, 1fr)`,
-    gap: gapMap[gap],
-    alignItems: alignMap[verticalAlign]
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id, style: containerStyle, children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { minWidth: 0 }, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropZone, { zone: `column-${index}` }) }, index)) });
+  const containerStyle = getContainerStyle3(columns, gap, verticalAlign);
+  const columnChildren = children || [];
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id, style: containerStyle, children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { minWidth: 0 }, children: columnChildren[index] || null }, index)) });
 }
 
-// components/page/Card.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+// components/page/primitives/Card.ts
 var borderWidthMap = {
   none: "0",
   thin: "1px",
@@ -1392,10 +1203,20 @@ var paddingMap2 = {
   lg: "32px",
   xl: "48px"
 };
-function isThemeableValue7(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
+function getCardStyle(backgroundColor, borderColor, borderWidth, borderRadius, shadow, padding) {
+  return {
+    backgroundColor,
+    border: borderWidth !== "none" ? `${borderWidthMap[borderWidth]} solid ${borderColor}` : "none",
+    borderRadius: radiusMap5[borderRadius],
+    boxShadow: shadowMap2[shadow],
+    padding: paddingMap2[padding]
+  };
 }
+
+// components/page/astro/Card.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Card({
+  children,
   backgroundColor,
   borderColor,
   borderWidth = "thin",
@@ -1405,40 +1226,20 @@ function Card({
   id,
   puck
 }) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const DropZone = puck?.renderDropZone;
-  const resolvedBgColor = (() => {
-    if (!backgroundColor) return resolveColor2("background");
-    if (typeof backgroundColor === "string")
-      return { color: backgroundColor, opacity: 100 };
-    if (isThemeableValue7(backgroundColor)) {
-      return backgroundColor.useTheme ? resolveColor2(backgroundColor.themeKey) : backgroundColor.value;
-    }
-    if ("color" in backgroundColor) return backgroundColor;
-    return resolveColor2("background");
-  })();
-  const resolvedBorderColor = (() => {
-    if (!borderColor) return resolveColor2("muted");
-    if (typeof borderColor === "string")
-      return { color: borderColor, opacity: 100 };
-    if (isThemeableValue7(borderColor)) {
-      return borderColor.useTheme ? resolveColor2(borderColor.themeKey) : borderColor.value;
-    }
-    if ("color" in borderColor) return borderColor;
-    return resolveColor2("muted");
-  })();
-  const style = {
-    backgroundColor: hexToRgba(resolvedBgColor.color, resolvedBgColor.opacity),
-    border: borderWidth !== "none" ? `${borderWidthMap[borderWidth]} solid ${hexToRgba(resolvedBorderColor.color, resolvedBorderColor.opacity)}` : "none",
-    borderRadius: radiusMap5[borderRadius],
-    boxShadow: shadowMap2[shadow],
-    padding: paddingMap2[padding]
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id, style, children: DropZone && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropZone, { zone: "card-content" }) });
+  const bgColor = typeof backgroundColor === "string" ? backgroundColor : "rgba(255, 255, 255, 1)";
+  const bColor = typeof borderColor === "string" ? borderColor : "rgba(229, 231, 235, 1)";
+  const style = getCardStyle(
+    bgColor,
+    bColor,
+    borderWidth,
+    borderRadius,
+    shadow,
+    padding
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id, style, children });
 }
 
-// components/page/Divider.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+// components/page/primitives/Divider.ts
 var thicknessMap = {
   thin: "1px",
   medium: "2px",
@@ -1456,9 +1257,24 @@ var spacingMap = {
   lg: "32px",
   xl: "48px"
 };
-function isThemeableValue8(value) {
-  return typeof value === "object" && value !== null && "useTheme" in value;
+function getWrapperStyle4(align, spacing) {
+  return {
+    display: "flex",
+    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
+    padding: `${spacingMap[spacing]} 0`
+  };
+}
+function getHrStyle(width, thickness, lineStyle, color) {
+  return {
+    width: widthMap2[width],
+    border: "none",
+    borderTop: `${thicknessMap[thickness]} ${lineStyle} ${color}`,
+    margin: 0
+  };
 }
+
+// components/page/astro/Divider.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Divider({
   style: lineStyle = "solid",
   thickness = "thin",
@@ -1468,32 +1284,13 @@ function Divider({
   spacing = "md",
   id
 }) {
-  const { resolveColor: resolveColor2 } = useTheme();
-  const resolvedColor = (() => {
-    if (!color) return resolveColor2("muted");
-    if (typeof color === "string") return { color, opacity: 100 };
-    if (isThemeableValue8(color)) {
-      return color.useTheme ? resolveColor2(color.themeKey) : color.value;
-    }
-    if ("color" in color) return color;
-    return resolveColor2("muted");
-  })();
-  const wrapperStyle = {
-    display: "flex",
-    justifyContent: align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center",
-    padding: `${spacingMap[spacing]} 0`
-  };
-  const hrStyle = {
-    width: widthMap2[width],
-    border: "none",
-    borderTop: `${thicknessMap[thickness]} ${lineStyle} ${hexToRgba(resolvedColor.color, resolvedColor.opacity)}`,
-    margin: 0
-  };
+  const colorValue = typeof color === "string" ? color : "rgba(107, 114, 128, 1)";
+  const wrapperStyle = getWrapperStyle4(align, spacing);
+  const hrStyle = getHrStyle(width, thickness, lineStyle, colorValue);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { id, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("hr", { style: hrStyle }) });
 }
 
-// components/page/Spacer.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+// components/page/primitives/Spacer.ts
 var sizeMap2 = {
   xs: "8px",
   sm: "16px",
@@ -1503,6 +1300,9 @@ var sizeMap2 = {
   "2xl": "64px",
   "3xl": "96px"
 };
+
+// components/page/astro/Spacer.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Spacer({ size = "md", id }) {
   const style = {
     height: sizeMap2[size],
@@ -1511,8 +1311,73 @@ function Spacer({ size = "md", id }) {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id, style, "aria-hidden": "true" });
 }
 
-// components/page/TextBlock.tsx
+// theme/context.tsx
+var import_react3 = require("react");
+
+// theme/defaults.ts
+var DEFAULT_THEME = {
+  id: "default",
+  name: "Default Theme",
+  colors: {
+    primary: { color: "#3B82F6", opacity: 100 },
+    secondary: { color: "#8B5CF6", opacity: 100 },
+    accent: { color: "#10B981", opacity: 100 },
+    background: { color: "#FFFFFF", opacity: 100 },
+    foreground: { color: "#111827", opacity: 100 },
+    muted: { color: "#F3F4F6", opacity: 100 }
+  },
+  typography: {
+    fontFamily: {
+      heading: "system-ui, sans-serif",
+      body: "system-ui, sans-serif"
+    },
+    fontSize: {
+      base: "base",
+      heading: "4xl"
+    },
+    fontWeight: {
+      normal: 400,
+      heading: 700
+    }
+  },
+  spacing: {
+    xs: 8,
+    sm: 12,
+    md: 16,
+    lg: 24,
+    xl: 32
+  },
+  borders: {
+    radiusSmall: 4,
+    radiusMedium: 8,
+    radiusLarge: 16
+  },
+  shadows: {
+    small: "sm",
+    medium: "md",
+    large: "lg"
+  }
+};
+
+// theme/context.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react3.createContext)(null);
+function useTheme() {
+  const context = (0, import_react3.useContext)(ThemeContext);
+  if (!context) {
+    return {
+      theme: DEFAULT_THEME,
+      resolveColor: (key) => DEFAULT_THEME.colors[key],
+      resolveSpacing: (key) => DEFAULT_THEME.spacing[key],
+      resolveBorderRadius: (key) => DEFAULT_THEME.borders[key],
+      resolveShadow: (key) => DEFAULT_THEME.shadows[key]
+    };
+  }
+  return context;
+}
+
+// components/page/TextBlock.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var alignmentMap = {
   left: "text-left",
   center: "text-center",
@@ -1525,16 +1390,16 @@ var sizeMap3 = {
   large: "text-5xl",
   xlarge: "text-6xl"
 };
-function isThemeableValue9(value) {
+function isThemeableValue(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
-function isEntryBoundValue4(value) {
+function isEntryBoundValue2(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
 function resolveColor(color, resolveThemeColor) {
   if (!color) return "#000000";
   if (typeof color === "string") return color;
-  if (isThemeableValue9(color)) {
+  if (isThemeableValue(color)) {
     if (color.useTheme) {
       const themeColor = resolveThemeColor(color.themeKey);
       return hexToRgba(themeColor.color, themeColor.opacity);
@@ -1549,7 +1414,7 @@ function resolveColor(color, resolveThemeColor) {
 function resolveColorHex(color, resolveThemeColor) {
   if (!color) return "#000000";
   if (typeof color === "string") return color;
-  if (isThemeableValue9(color)) {
+  if (isThemeableValue(color)) {
     if (color.useTheme) {
       return resolveThemeColor(color.themeKey).color;
     }
@@ -1578,7 +1443,7 @@ function TextBlock({
   const resolveText = (value) => {
     if (!value) return void 0;
     if (typeof value === "string") return value;
-    if (isEntryBoundValue4(value)) {
+    if (isEntryBoundValue2(value)) {
       if (value.useEntry) {
         const entryVal = getEntryValue(value.entryName, value.fieldKey);
         return entryVal != null ? String(entryVal) : void 0;
@@ -1598,13 +1463,13 @@ function TextBlock({
     WebkitTextFillColor: "transparent",
     backgroundClip: "text"
   } : { color: titleColorValue };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       id: anchorLink,
       className: cn("flex flex-col gap-4", alignmentMap[alignment]),
       children: [
-        resolvedTitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        resolvedTitle && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "h2",
           {
             className: cn("font-bold", sizeMap3[textSize]),
@@ -1612,8 +1477,8 @@ function TextBlock({
             children: resolvedTitle
           }
         ),
-        resolvedSubtitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xl", style: { color: subtitleColorValue }, children: resolvedSubtitle }),
-        resolvedBody && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        resolvedSubtitle && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-xl", style: { color: subtitleColorValue }, children: resolvedSubtitle }),
+        resolvedBody && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "div",
           {
             className: "prose max-w-none",
@@ -1627,7 +1492,7 @@ function TextBlock({
 }
 
 // components/page/CustomImage.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var alignmentMap2 = {
   left: "mr-auto",
   center: "mx-auto",
@@ -1641,9 +1506,9 @@ function CustomImage({
   fitContent = false
 }) {
   if (!image) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex h-48 w-full items-center justify-center bg-gray-200 text-gray-400", children: "No image" });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex h-48 w-full items-center justify-center bg-gray-200 text-gray-400", children: "No image" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "img",
     {
       src: image,
@@ -1660,7 +1525,7 @@ function CustomImage({
 
 // components/page/FeaturesList.tsx
 var import_lucide_react = require("lucide-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var sizeMap4 = {
   small: { icon: 24, title: "text-base", desc: "text-sm" },
   medium: { icon: 32, title: "text-lg", desc: "text-base" },
@@ -1678,7 +1543,7 @@ function FeaturesList({
     const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
     return import_lucide_react.icons[formatted] || null;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       id: anchorLink,
@@ -1689,7 +1554,7 @@ function FeaturesList({
       ),
       children: features.map((feature, index) => {
         const IconComponent = feature.icon ? getIcon(feature.icon) : null;
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "div",
           {
             className: cn(
@@ -1698,7 +1563,7 @@ function FeaturesList({
               align === "right" && "flex-row-reverse"
             ),
             children: [
-              feature.image ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              feature.image ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 "img",
                 {
                   src: feature.image,
@@ -1706,7 +1571,7 @@ function FeaturesList({
                   className: "object-contain",
                   style: { width: sizeConfig.icon, height: sizeConfig.icon }
                 }
-              ) : IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              ) : IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 IconComponent,
                 {
                   size: sizeConfig.icon,
@@ -1714,9 +1579,9 @@ function FeaturesList({
                   className: "flex-shrink-0"
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                feature.title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: cn("font-semibold", sizeConfig.title), children: feature.title }),
-                feature.description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                feature.title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: cn("font-semibold", sizeConfig.title), children: feature.title }),
+                feature.description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
               ] })
             ]
           },
@@ -1729,7 +1594,7 @@ function FeaturesList({
 
 // components/page/FeatureGrid.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var sizeMap5 = {
   small: { icon: 24, title: "text-base", desc: "text-sm" },
   medium: { icon: 32, title: "text-lg", desc: "text-base" },
@@ -1756,8 +1621,8 @@ function FeatureGrid({
     3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
     4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { id: anchorLink, className: "flex flex-col gap-8", children: [
-    (heading || description) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { id: anchorLink, className: "flex flex-col gap-8", children: [
+    (heading || description) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         className: cn(
@@ -1766,14 +1631,14 @@ function FeatureGrid({
           align === "right" && "text-right"
         ),
         children: [
-          heading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "text-3xl font-bold", style: { color: textColor }, children: heading }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-gray-600", children: description })
+          heading && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "text-3xl font-bold", style: { color: textColor }, children: heading }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-gray-600", children: description })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("grid gap-6", columnClass[columns]), children: features.map((feature, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("grid gap-6", columnClass[columns]), children: features.map((feature, index) => {
       const IconComponent = feature.icon ? getIcon(feature.icon) : null;
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "div",
         {
           className: cn(
@@ -1781,7 +1646,7 @@ function FeatureGrid({
             align === "center" && "items-center text-center"
           ),
           children: [
-            feature.image ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            feature.image ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "img",
               {
                 src: feature.image,
@@ -1789,14 +1654,14 @@ function FeatureGrid({
                 className: "object-contain",
                 style: { width: sizeConfig.icon, height: sizeConfig.icon }
               }
-            ) : IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            ) : IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               IconComponent,
               {
                 size: sizeConfig.icon,
                 style: { color: iconColor }
               }
             ) : null,
-            feature.title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            feature.title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "h3",
               {
                 className: cn("font-semibold", sizeConfig.title),
@@ -1804,7 +1669,7 @@ function FeatureGrid({
                 children: feature.title
               }
             ),
-            feature.description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
+            feature.description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: cn("text-gray-600", sizeConfig.desc), children: feature.description })
           ]
         },
         index
@@ -1815,7 +1680,72 @@ function FeatureGrid({
 
 // components/page/Footer.tsx
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// hooks/useGtmEvent.ts
+function useGtmEvent() {
+  return (eventName, data) => {
+    if (typeof window === "undefined") return;
+    if (typeof window.gtag === "function") {
+      window.gtag("event", eventName, data || {});
+    }
+  };
+}
+
+// hooks/useUtmParams.ts
+var import_react4 = require("react");
+function useUtmParams() {
+  const [utmParams, setUtmParams] = (0, import_react4.useState)({});
+  (0, import_react4.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const urlParams = new URLSearchParams(window.location.search);
+    const source = urlParams.get("utm_source");
+    const medium = urlParams.get("utm_medium");
+    const campaign = urlParams.get("utm_campaign");
+    const content = urlParams.get("utm_content");
+    const term = urlParams.get("utm_term");
+    const params = {};
+    if (source) {
+      params.source = source;
+      sessionStorage.setItem("utm_source", source);
+    } else {
+      const stored = sessionStorage.getItem("utm_source");
+      if (stored) params.source = stored;
+    }
+    if (medium) {
+      params.medium = medium;
+      sessionStorage.setItem("utm_medium", medium);
+    } else {
+      const stored = sessionStorage.getItem("utm_medium");
+      if (stored) params.medium = stored;
+    }
+    if (campaign) {
+      params.campaign = campaign;
+      sessionStorage.setItem("utm_campaign", campaign);
+    } else {
+      const stored = sessionStorage.getItem("utm_campaign");
+      if (stored) params.campaign = stored;
+    }
+    if (content) {
+      params.content = content;
+      sessionStorage.setItem("utm_content", content);
+    } else {
+      const stored = sessionStorage.getItem("utm_content");
+      if (stored) params.content = stored;
+    }
+    if (term) {
+      params.term = term;
+      sessionStorage.setItem("utm_term", term);
+    } else {
+      const stored = sessionStorage.getItem("utm_term");
+      if (stored) params.term = stored;
+    }
+    setUtmParams(params);
+  }, []);
+  return utmParams;
+}
+
+// components/page/Footer.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function Footer({
   logo,
   copyright = "\xA9 2024 Company. All rights reserved.",
@@ -1850,15 +1780,15 @@ function Footer({
   ].filter(
     (link) => !!link.url
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "footer",
     {
       className: "w-full px-6 py-8",
       style: { backgroundColor, color: textColor },
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 md:flex-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center gap-4", children: logo && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: logo, alt: "Logo", className: "h-8" }) }),
-        DropZone && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropZone, { zone: "footer-content" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center gap-4", children: socialLinks.map(({ url, Icon: Icon3 }, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 md:flex-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center gap-4", children: logo && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: logo, alt: "Logo", className: "h-8" }) }),
+        DropZone && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: "footer-content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center gap-4", children: socialLinks.map(({ url, Icon: Icon3 }, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "a",
           {
             href: url,
@@ -1866,11 +1796,11 @@ function Footer({
             rel: "noopener noreferrer",
             className: "transition-opacity hover:opacity-80",
             onClick: () => handleSocialClick(url),
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon3, { size: 24, style: { color: textColor } })
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon3, { size: 24, style: { color: textColor } })
           },
           index
         )) }),
-        copyright && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm opacity-80", children: copyright })
+        copyright && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm opacity-80", children: copyright })
       ] })
     }
   );
@@ -1879,7 +1809,7 @@ function Footer({
 // components/page/Topbar.tsx
 var import_react5 = require("react");
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Topbar({
   logo,
   logoUrl = "/",
@@ -1912,7 +1842,7 @@ function Topbar({
   const renderLink = (item, index) => {
     const className = "hover:opacity-80 transition-opacity";
     if (item.linkType === "external") {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "a",
         {
           href: item.url,
@@ -1926,7 +1856,7 @@ function Topbar({
       );
     }
     if (item.linkType === "scrollTo") {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "a",
         {
           href: item.url,
@@ -1937,7 +1867,7 @@ function Topbar({
         index
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "a",
       {
         href: item.url,
@@ -1948,19 +1878,19 @@ function Topbar({
       index
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "nav",
     {
       className: "sticky top-0 z-50 w-full px-6 py-4",
       style: { backgroundColor, color: textColor },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             className: "mx-auto flex items-center justify-between",
             style: { maxWidth },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "a",
                 {
                   href: logoUrl,
@@ -1971,25 +1901,25 @@ function Topbar({
                     linkType: "internal",
                     ...utm
                   }),
-                  children: logo ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xl font-bold", children: "Logo" })
+                  children: logo ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-xl font-bold", children: "Logo" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "hidden items-center gap-8 md:flex", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "hidden items-center gap-8 md:flex", children: [
                 navItems.map(renderLink),
-                DropZone && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: "cta" })
+                DropZone && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, { zone: "cta" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { className: "md:hidden", onClick: handleMobileMenuToggle, children: mobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.X, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.Menu, { size: 24 }) })
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "md:hidden", onClick: handleMobileMenuToggle, children: mobileMenuOpen ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.X, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.Menu, { size: 24 }) })
             ]
           }
         ),
-        mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             className: "absolute top-full right-0 left-0 flex flex-col gap-4 px-6 py-4 md:hidden",
             style: { backgroundColor },
             children: [
               navItems.map(renderLink),
-              DropZone && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: "cta" })
+              DropZone && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropZone, { zone: "cta" })
             ]
           }
         )
@@ -2001,12 +1931,12 @@ function Topbar({
 // components/page/Popup.tsx
 var import_react6 = require("react");
 var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Icon2({ name, ...props }) {
   const formatted = name.charAt(0).toUpperCase() + name.slice(1);
   const IconComponent = import_lucide_react5.icons[formatted];
   if (!IconComponent) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconComponent, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconComponent, { ...props });
 }
 var widthMap3 = {
   small: "max-w-sm",
@@ -2044,7 +1974,7 @@ function Popup({
     setIsOpen(false);
     sendEvent("popup_close", { ctaText, ...utm });
   };
-  const trigger = textLink ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  const trigger = textLink ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "button",
     {
       onClick: handleOpen,
@@ -2052,7 +1982,7 @@ function Popup({
       style: { color: buttonColor },
       children: ctaText
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "button",
     {
       onClick: handleOpen,
@@ -2062,20 +1992,20 @@ function Popup({
       ),
       style: { backgroundColor: buttonColor, color: textColor },
       children: [
-        icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon2, { name: icon, size: 18 }),
+        icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon2, { name: icon, size: 18 }),
         ctaText,
-        icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon2, { name: icon, size: 18 })
+        icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon2, { name: icon, size: 18 })
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
     trigger,
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
         onClick: handleClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "div",
           {
             className: cn(
@@ -2084,15 +2014,15 @@ function Popup({
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "button",
                 {
                   onClick: handleClose,
                   className: "absolute top-4 right-4 text-gray-500 hover:text-gray-700",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.X, { size: 24 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react5.X, { size: 24 })
                 }
               ),
-              puck && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(puck.renderDropZone, { zone: "popup-content" })
+              puck && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(puck.renderDropZone, { zone: "popup-content" })
             ]
           }
         )