@mission-studio/puck 1.0.2 → 1.0.5

package/dist/chunk-QSWQDR6M.mjs

@@ -0,0 +1,67 @@
+// 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
+import { useEffect, useState } from "react";
+function useUtmParams() {
+  const [utmParams, setUtmParams] = useState({});
+  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;
+}
+
+export {
+  useGtmEvent,
+  useUtmParams
+};

package/dist/{chunk-RVOG4KFI.mjs → chunk-R7TH6TWG.mjs}

@@ -5,6 +5,9 @@ import {
   useEntries,
   useTheme
 } from "./chunk-TTKY3YGP.mjs";
+import {
+  useUtmParams
+} from "./chunk-QSWQDR6M.mjs";
 
 // components/page/Heading.tsx
 import { jsx } from "react/jsx-runtime";
@@ -158,76 +161,8 @@ function Paragraph({
   return /* @__PURE__ */ jsx2("p", { id, style, children: resolvedText });
 }
 
-// hooks/useGtmEvent.ts
-function useGtmEvent() {
-  return (eventName, data) => {
-    if (typeof window === "undefined") return;
-    if (typeof window.gtag !== "function") {
-      console.warn("GTM not initialized. Make sure @next/third-parties/google GoogleTagManager is added to your layout.");
-      return;
-    }
-    const eventData = {
-      event: eventName,
-      ...data && { value: data }
-    };
-    window.gtag("event", eventName, data || {});
-  };
-}
-
-// hooks/useUtmParams.ts
-import { useEffect, useState } from "react";
-function useUtmParams() {
-  const [utmParams, setUtmParams] = useState({});
-  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/Button.tsx
+import { sendGTMEvent } from "@next/third-parties/google";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var sizeStyles = {
   sm: { padding: "8px 16px", fontSize: "0.875rem" },
@@ -263,7 +198,6 @@ function Button({
 }) {
   const { resolveColor: resolveColor2 } = useTheme();
   const { getEntryValue } = useEntries();
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const resolvedText = (() => {
     if (!text) return "Button";
@@ -277,11 +211,16 @@ function Button({
     return "Button";
   })();
   const handleClick = () => {
-    sendEvent("button_click", {
-      text: resolvedText,
-      href: href || void 0,
-      variant,
-      ...utm
+    const sessionId = typeof window !== "undefined" ? sessionStorage.getItem("session_id") : null;
+    sendGTMEvent({
+      event: "button_click",
+      value: {
+        text: resolvedText,
+        href: href || void 0,
+        variant,
+        session_id: sessionId,
+        ...utm
+      }
     });
   };
   const resolvedColor = (() => {
@@ -495,7 +434,8 @@ function Image({
 }
 
 // components/page/ImageCarousel.tsx
-import { useState as useState2 } from "react";
+import { useState } from "react";
+import { sendGTMEvent as sendGTMEvent2 } from "@next/third-parties/google";
 import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var aspectRatioMap2 = {
   "16:9": "16 / 9",
@@ -522,9 +462,8 @@ function ImageCarousel({
   dotColor,
   id
 }) {
-  const [currentIndex, setCurrentIndex] = useState2(0);
+  const [currentIndex, setCurrentIndex] = useState(0);
   const { resolveColor: resolveColor2 } = useTheme();
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const resolvedArrowColor = (() => {
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
@@ -548,30 +487,39 @@ function ImageCarousel({
   const goToPrevious = () => {
     const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
     setCurrentIndex(newIndex);
-    sendEvent("carousel_navigate", {
-      direction: "previous",
-      slideIndex: newIndex,
-      totalSlides: images.length,
-      ...utm
+    sendGTMEvent2({
+      event: "carousel_navigate",
+      value: {
+        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
+    sendGTMEvent2({
+      event: "carousel_navigate",
+      value: {
+        direction: "next",
+        slideIndex: newIndex,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   const goToSlide = (index) => {
     setCurrentIndex(index);
-    sendEvent("carousel_navigate", {
-      direction: "direct",
-      slideIndex: index,
-      totalSlides: images.length,
-      ...utm
+    sendGTMEvent2({
+      event: "carousel_navigate",
+      value: {
+        direction: "direct",
+        slideIndex: index,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   if (images.length === 0) {
@@ -1665,6 +1613,7 @@ function FeatureGrid({
 
 // components/page/Footer.tsx
 import { Facebook, Instagram, Twitter } from "lucide-react";
+import { sendGTMEvent as sendGTMEvent3 } from "@next/third-parties/google";
 import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
 function Footer({
   logo,
@@ -1677,7 +1626,6 @@ function Footer({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const getSocialPlatform = (url) => {
     if (url.includes("facebook")) return "facebook";
@@ -1687,17 +1635,22 @@ function Footer({
   };
   const handleSocialClick = (url) => {
     const platform = getSocialPlatform(url);
-    sendEvent("social_click", {
-      platform,
-      url,
-      ...utm
+    sendGTMEvent3({
+      event: "social_click",
+      value: {
+        platform,
+        url,
+        ...utm
+      }
     });
   };
   const socialLinks = [
     { url: facebookUrl, Icon: Facebook },
     { url: instagramUrl, Icon: Instagram },
     { url: twitterUrl, Icon: Twitter }
-  ].filter((link) => !!link.url);
+  ].filter(
+    (link) => !!link.url
+  );
   return /* @__PURE__ */ jsx18(
     "footer",
     {
@@ -1725,9 +1678,10 @@ function Footer({
 }
 
 // components/page/Topbar.tsx
-import { useState as useState3 } from "react";
+import { useState as useState2 } from "react";
 import Link from "next/link";
 import { Menu, X } from "lucide-react";
+import { sendGTMEvent as sendGTMEvent4 } from "@next/third-parties/google";
 import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
 function Topbar({
   logo,
@@ -1739,23 +1693,28 @@ function Topbar({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
-  const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
-  const sendEvent = useGtmEvent();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState2(false);
   const utm = useUtmParams();
   const handleNavClick = (item) => {
-    sendEvent("nav_click", {
-      name: item.name,
-      url: item.url,
-      linkType: item.linkType || "internal",
-      ...utm
+    sendGTMEvent4({
+      event: "nav_click",
+      value: {
+        name: item.name,
+        url: item.url,
+        linkType: item.linkType || "internal",
+        ...utm
+      }
     });
   };
   const handleMobileMenuToggle = () => {
     const newState = !mobileMenuOpen;
     setMobileMenuOpen(newState);
-    sendEvent("mobile_menu_toggle", {
-      open: newState,
-      ...utm
+    sendGTMEvent4({
+      event: "mobile_menu_toggle",
+      value: {
+        open: newState,
+        ...utm
+      }
     });
   };
   const renderLink = (item, index) => {
@@ -1814,11 +1773,14 @@ function Topbar({
                 {
                   href: logoUrl,
                   className: "flex-shrink-0",
-                  onClick: () => sendEvent("nav_click", {
-                    name: "logo",
-                    url: logoUrl,
-                    linkType: "internal",
-                    ...utm
+                  onClick: () => sendGTMEvent4({
+                    event: "nav_click",
+                    value: {
+                      name: "logo",
+                      url: logoUrl,
+                      linkType: "internal",
+                      ...utm
+                    }
                   }),
                   children: logo ? /* @__PURE__ */ jsx19("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ jsx19("span", { className: "text-xl font-bold", children: "Logo" })
                 }
@@ -1848,8 +1810,9 @@ function Topbar({
 }
 
 // components/page/Popup.tsx
-import { useState as useState4 } from "react";
+import { useState as useState3 } from "react";
 import { icons as icons4, X as X2 } from "lucide-react";
+import { sendGTMEvent as sendGTMEvent5 } from "@next/third-parties/google";
 import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 function Icon2({ name, ...props }) {
   const formatted = name.charAt(0).toUpperCase() + name.slice(1);
@@ -1878,20 +1841,25 @@ function Popup({
   textLink = false,
   puck
 }) {
-  const [isOpen, setIsOpen] = useState4(false);
-  const sendEvent = useGtmEvent();
+  const [isOpen, setIsOpen] = useState3(false);
   const utm = useUtmParams();
   const handleOpen = () => {
     setIsOpen(true);
-    sendEvent("popup_open", {
-      ctaText,
-      type: textLink ? "link" : "button",
-      ...utm
+    sendGTMEvent5({
+      event: "popup_open",
+      value: {
+        ctaText,
+        type: textLink ? "link" : "button",
+        ...utm
+      }
     });
   };
   const handleClose = () => {
     setIsOpen(false);
-    sendEvent("popup_close", { ctaText, ...utm });
+    sendGTMEvent5({
+      event: "popup_close",
+      value: { ctaText, ...utm }
+    });
   };
   const trigger = textLink ? /* @__PURE__ */ jsx20(
     "button",

package/dist/config-entry.js

@@ -292,21 +292,8 @@ function Paragraph({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { id, style, children: resolvedText });
 }
 
-// hooks/useGtmEvent.ts
-function useGtmEvent() {
-  return (eventName, data) => {
-    if (typeof window === "undefined") return;
-    if (typeof window.gtag !== "function") {
-      console.warn("GTM not initialized. Make sure @next/third-parties/google GoogleTagManager is added to your layout.");
-      return;
-    }
-    const eventData = {
-      event: eventName,
-      ...data && { value: data }
-    };
-    window.gtag("event", eventName, data || {});
-  };
-}
+// components/page/Button.tsx
+var import_google = require("@next/third-parties/google");
 
 // hooks/useUtmParams.ts
 var import_react3 = require("react");
@@ -397,7 +384,6 @@ function Button({
 }) {
   const { resolveColor: resolveColor2 } = useTheme();
   const { getEntryValue } = useEntries();
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const resolvedText = (() => {
     if (!text) return "Button";
@@ -411,11 +397,16 @@ function Button({
     return "Button";
   })();
   const handleClick = () => {
-    sendEvent("button_click", {
-      text: resolvedText,
-      href: href || void 0,
-      variant,
-      ...utm
+    const sessionId = typeof window !== "undefined" ? sessionStorage.getItem("session_id") : null;
+    (0, import_google.sendGTMEvent)({
+      event: "button_click",
+      value: {
+        text: resolvedText,
+        href: href || void 0,
+        variant,
+        session_id: sessionId,
+        ...utm
+      }
     });
   };
   const resolvedColor = (() => {
@@ -630,6 +621,7 @@ function Image({
 
 // components/page/ImageCarousel.tsx
 var import_react4 = require("react");
+var import_google2 = require("@next/third-parties/google");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var aspectRatioMap2 = {
   "16:9": "16 / 9",
@@ -658,7 +650,6 @@ function ImageCarousel({
 }) {
   const [currentIndex, setCurrentIndex] = (0, import_react4.useState)(0);
   const { resolveColor: resolveColor2 } = useTheme();
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const resolvedArrowColor = (() => {
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
@@ -682,30 +673,39 @@ function ImageCarousel({
   const goToPrevious = () => {
     const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
     setCurrentIndex(newIndex);
-    sendEvent("carousel_navigate", {
-      direction: "previous",
-      slideIndex: newIndex,
-      totalSlides: images.length,
-      ...utm
+    (0, import_google2.sendGTMEvent)({
+      event: "carousel_navigate",
+      value: {
+        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
+    (0, import_google2.sendGTMEvent)({
+      event: "carousel_navigate",
+      value: {
+        direction: "next",
+        slideIndex: newIndex,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   const goToSlide = (index2) => {
     setCurrentIndex(index2);
-    sendEvent("carousel_navigate", {
-      direction: "direct",
-      slideIndex: index2,
-      totalSlides: images.length,
-      ...utm
+    (0, import_google2.sendGTMEvent)({
+      event: "carousel_navigate",
+      value: {
+        direction: "direct",
+        slideIndex: index2,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   if (images.length === 0) {
@@ -1835,6 +1835,7 @@ function FeatureGrid({
 
 // components/page/Footer.tsx
 var import_lucide_react3 = require("lucide-react");
+var import_google3 = require("@next/third-parties/google");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function Footer({
   logo,
@@ -1847,7 +1848,6 @@ function Footer({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const getSocialPlatform = (url) => {
     if (url.includes("facebook")) return "facebook";
@@ -1857,17 +1857,22 @@ function Footer({
   };
   const handleSocialClick = (url) => {
     const platform2 = getSocialPlatform(url);
-    sendEvent("social_click", {
-      platform: platform2,
-      url,
-      ...utm
+    (0, import_google3.sendGTMEvent)({
+      event: "social_click",
+      value: {
+        platform: platform2,
+        url,
+        ...utm
+      }
     });
   };
   const socialLinks = [
     { url: facebookUrl, Icon: import_lucide_react3.Facebook },
     { url: instagramUrl, Icon: import_lucide_react3.Instagram },
     { url: twitterUrl, Icon: import_lucide_react3.Twitter }
-  ].filter((link) => !!link.url);
+  ].filter(
+    (link) => !!link.url
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "footer",
     {
@@ -1898,6 +1903,7 @@ function Footer({
 var import_react5 = require("react");
 var import_link = __toESM(require("next/link"));
 var import_lucide_react4 = require("lucide-react");
+var import_google4 = require("@next/third-parties/google");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function Topbar({
   logo,
@@ -1910,22 +1916,27 @@ function Topbar({
 }) {
   const DropZone = puck?.renderDropZone;
   const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react5.useState)(false);
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const handleNavClick = (item) => {
-    sendEvent("nav_click", {
-      name: item.name,
-      url: item.url,
-      linkType: item.linkType || "internal",
-      ...utm
+    (0, import_google4.sendGTMEvent)({
+      event: "nav_click",
+      value: {
+        name: item.name,
+        url: item.url,
+        linkType: item.linkType || "internal",
+        ...utm
+      }
     });
   };
   const handleMobileMenuToggle = () => {
     const newState = !mobileMenuOpen;
     setMobileMenuOpen(newState);
-    sendEvent("mobile_menu_toggle", {
-      open: newState,
-      ...utm
+    (0, import_google4.sendGTMEvent)({
+      event: "mobile_menu_toggle",
+      value: {
+        open: newState,
+        ...utm
+      }
     });
   };
   const renderLink = (item, index2) => {
@@ -1984,11 +1995,14 @@ function Topbar({
                 {
                   href: logoUrl,
                   className: "flex-shrink-0",
-                  onClick: () => sendEvent("nav_click", {
-                    name: "logo",
-                    url: logoUrl,
-                    linkType: "internal",
-                    ...utm
+                  onClick: () => (0, import_google4.sendGTMEvent)({
+                    event: "nav_click",
+                    value: {
+                      name: "logo",
+                      url: logoUrl,
+                      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" })
                 }
@@ -2020,6 +2034,7 @@ function Topbar({
 // components/page/Popup.tsx
 var import_react6 = require("react");
 var import_lucide_react5 = require("lucide-react");
+var import_google5 = require("@next/third-parties/google");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function Icon2({ name, ...props }) {
   const formatted = name.charAt(0).toUpperCase() + name.slice(1);
@@ -2049,19 +2064,24 @@ function Popup({
   puck
 }) {
   const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const handleOpen = () => {
     setIsOpen(true);
-    sendEvent("popup_open", {
-      ctaText,
-      type: textLink ? "link" : "button",
-      ...utm
+    (0, import_google5.sendGTMEvent)({
+      event: "popup_open",
+      value: {
+        ctaText,
+        type: textLink ? "link" : "button",
+        ...utm
+      }
     });
   };
   const handleClose = () => {
     setIsOpen(false);
-    sendEvent("popup_close", { ctaText, ...utm });
+    (0, import_google5.sendGTMEvent)({
+      event: "popup_close",
+      value: { ctaText, ...utm }
+    });
   };
   const trigger = textLink ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "button",

package/dist/config-entry.mjs

@@ -29,8 +29,9 @@ import {
   Topbar,
   VideoEmbed,
   availableIcons
-} from "./chunk-RVOG4KFI.mjs";
+} from "./chunk-R7TH6TWG.mjs";
 import "./chunk-TTKY3YGP.mjs";
+import "./chunk-QSWQDR6M.mjs";
 
 // config.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/hooks/index.d.mts

@@ -0,0 +1,32 @@
+/**
+ * Hook to send events to Google Tag Manager
+ * Assumes GTM is initialized in the parent app via @next/third-parties/google
+ * @example
+ * const sendEvent = useGtmEvent();
+ * sendEvent('button_click', { text: 'Sign Up', href: '/signup' });
+ */
+declare function useGtmEvent(): (eventName: string, data?: Record<string, any>) => void;
+declare global {
+    interface Window {
+        gtag?: (...args: any[]) => void;
+    }
+}
+
+/**
+ * UTM parameter object
+ */
+interface UtmParams {
+    source?: string;
+    medium?: string;
+    campaign?: string;
+    content?: string;
+    term?: string;
+}
+/**
+ * Hook to capture and persist UTM parameters from URL
+ * Stores in sessionStorage so they persist across navigation
+ * @returns Current UTM parameters
+ */
+declare function useUtmParams(): UtmParams;
+
+export { type UtmParams, useGtmEvent, useUtmParams };

package/dist/hooks/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Hook to send events to Google Tag Manager
+ * Assumes GTM is initialized in the parent app via @next/third-parties/google
+ * @example
+ * const sendEvent = useGtmEvent();
+ * sendEvent('button_click', { text: 'Sign Up', href: '/signup' });
+ */
+declare function useGtmEvent(): (eventName: string, data?: Record<string, any>) => void;
+declare global {
+    interface Window {
+        gtag?: (...args: any[]) => void;
+    }
+}
+
+/**
+ * UTM parameter object
+ */
+interface UtmParams {
+    source?: string;
+    medium?: string;
+    campaign?: string;
+    content?: string;
+    term?: string;
+}
+/**
+ * Hook to capture and persist UTM parameters from URL
+ * Stores in sessionStorage so they persist across navigation
+ * @returns Current UTM parameters
+ */
+declare function useUtmParams(): UtmParams;
+
+export { type UtmParams, useGtmEvent, useUtmParams };

package/dist/hooks/index.js

@@ -0,0 +1,94 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// hooks/index.ts
+var hooks_exports = {};
+__export(hooks_exports, {
+  useGtmEvent: () => useGtmEvent,
+  useUtmParams: () => useUtmParams
+});
+module.exports = __toCommonJS(hooks_exports);
+
+// 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_react = require("react");
+function useUtmParams() {
+  const [utmParams, setUtmParams] = (0, import_react.useState)({});
+  (0, import_react.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;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useGtmEvent,
+  useUtmParams
+});

package/dist/hooks/index.mjs

@@ -0,0 +1,8 @@
+import {
+  useGtmEvent,
+  useUtmParams
+} from "../chunk-QSWQDR6M.mjs";
+export {
+  useGtmEvent,
+  useUtmParams
+};

package/dist/index.js

@@ -332,21 +332,8 @@ function Paragraph({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { id, style, children: resolvedText });
 }
 
-// hooks/useGtmEvent.ts
-function useGtmEvent() {
-  return (eventName, data) => {
-    if (typeof window === "undefined") return;
-    if (typeof window.gtag !== "function") {
-      console.warn("GTM not initialized. Make sure @next/third-parties/google GoogleTagManager is added to your layout.");
-      return;
-    }
-    const eventData = {
-      event: eventName,
-      ...data && { value: data }
-    };
-    window.gtag("event", eventName, data || {});
-  };
-}
+// components/page/Button.tsx
+var import_google = require("@next/third-parties/google");
 
 // hooks/useUtmParams.ts
 var import_react3 = require("react");
@@ -437,7 +424,6 @@ function Button({
 }) {
   const { resolveColor: resolveColor2 } = useTheme();
   const { getEntryValue } = useEntries();
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const resolvedText = (() => {
     if (!text) return "Button";
@@ -451,11 +437,16 @@ function Button({
     return "Button";
   })();
   const handleClick = () => {
-    sendEvent("button_click", {
-      text: resolvedText,
-      href: href || void 0,
-      variant,
-      ...utm
+    const sessionId = typeof window !== "undefined" ? sessionStorage.getItem("session_id") : null;
+    (0, import_google.sendGTMEvent)({
+      event: "button_click",
+      value: {
+        text: resolvedText,
+        href: href || void 0,
+        variant,
+        session_id: sessionId,
+        ...utm
+      }
     });
   };
   const resolvedColor = (() => {
@@ -670,6 +661,7 @@ function Image({
 
 // components/page/ImageCarousel.tsx
 var import_react4 = require("react");
+var import_google2 = require("@next/third-parties/google");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var aspectRatioMap2 = {
   "16:9": "16 / 9",
@@ -698,7 +690,6 @@ function ImageCarousel({
 }) {
   const [currentIndex, setCurrentIndex] = (0, import_react4.useState)(0);
   const { resolveColor: resolveColor2 } = useTheme();
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const resolvedArrowColor = (() => {
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
@@ -722,30 +713,39 @@ function ImageCarousel({
   const goToPrevious = () => {
     const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
     setCurrentIndex(newIndex);
-    sendEvent("carousel_navigate", {
-      direction: "previous",
-      slideIndex: newIndex,
-      totalSlides: images.length,
-      ...utm
+    (0, import_google2.sendGTMEvent)({
+      event: "carousel_navigate",
+      value: {
+        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
+    (0, import_google2.sendGTMEvent)({
+      event: "carousel_navigate",
+      value: {
+        direction: "next",
+        slideIndex: newIndex,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   const goToSlide = (index) => {
     setCurrentIndex(index);
-    sendEvent("carousel_navigate", {
-      direction: "direct",
-      slideIndex: index,
-      totalSlides: images.length,
-      ...utm
+    (0, import_google2.sendGTMEvent)({
+      event: "carousel_navigate",
+      value: {
+        direction: "direct",
+        slideIndex: index,
+        totalSlides: images.length,
+        ...utm
+      }
     });
   };
   if (images.length === 0) {
@@ -1875,6 +1875,7 @@ function FeatureGrid({
 
 // components/page/Footer.tsx
 var import_lucide_react3 = require("lucide-react");
+var import_google3 = require("@next/third-parties/google");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function Footer({
   logo,
@@ -1887,7 +1888,6 @@ function Footer({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const getSocialPlatform = (url) => {
     if (url.includes("facebook")) return "facebook";
@@ -1897,17 +1897,22 @@ function Footer({
   };
   const handleSocialClick = (url) => {
     const platform = getSocialPlatform(url);
-    sendEvent("social_click", {
-      platform,
-      url,
-      ...utm
+    (0, import_google3.sendGTMEvent)({
+      event: "social_click",
+      value: {
+        platform,
+        url,
+        ...utm
+      }
     });
   };
   const socialLinks = [
     { url: facebookUrl, Icon: import_lucide_react3.Facebook },
     { url: instagramUrl, Icon: import_lucide_react3.Instagram },
     { url: twitterUrl, Icon: import_lucide_react3.Twitter }
-  ].filter((link) => !!link.url);
+  ].filter(
+    (link) => !!link.url
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "footer",
     {
@@ -1938,6 +1943,7 @@ function Footer({
 var import_react5 = require("react");
 var import_link = __toESM(require("next/link"));
 var import_lucide_react4 = require("lucide-react");
+var import_google4 = require("@next/third-parties/google");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function Topbar({
   logo,
@@ -1950,22 +1956,27 @@ function Topbar({
 }) {
   const DropZone = puck?.renderDropZone;
   const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react5.useState)(false);
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const handleNavClick = (item) => {
-    sendEvent("nav_click", {
-      name: item.name,
-      url: item.url,
-      linkType: item.linkType || "internal",
-      ...utm
+    (0, import_google4.sendGTMEvent)({
+      event: "nav_click",
+      value: {
+        name: item.name,
+        url: item.url,
+        linkType: item.linkType || "internal",
+        ...utm
+      }
     });
   };
   const handleMobileMenuToggle = () => {
     const newState = !mobileMenuOpen;
     setMobileMenuOpen(newState);
-    sendEvent("mobile_menu_toggle", {
-      open: newState,
-      ...utm
+    (0, import_google4.sendGTMEvent)({
+      event: "mobile_menu_toggle",
+      value: {
+        open: newState,
+        ...utm
+      }
     });
   };
   const renderLink = (item, index) => {
@@ -2024,11 +2035,14 @@ function Topbar({
                 {
                   href: logoUrl,
                   className: "flex-shrink-0",
-                  onClick: () => sendEvent("nav_click", {
-                    name: "logo",
-                    url: logoUrl,
-                    linkType: "internal",
-                    ...utm
+                  onClick: () => (0, import_google4.sendGTMEvent)({
+                    event: "nav_click",
+                    value: {
+                      name: "logo",
+                      url: logoUrl,
+                      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" })
                 }
@@ -2060,6 +2074,7 @@ function Topbar({
 // components/page/Popup.tsx
 var import_react6 = require("react");
 var import_lucide_react5 = require("lucide-react");
+var import_google5 = require("@next/third-parties/google");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function Icon2({ name, ...props }) {
   const formatted = name.charAt(0).toUpperCase() + name.slice(1);
@@ -2089,19 +2104,24 @@ function Popup({
   puck
 }) {
   const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const handleOpen = () => {
     setIsOpen(true);
-    sendEvent("popup_open", {
-      ctaText,
-      type: textLink ? "link" : "button",
-      ...utm
+    (0, import_google5.sendGTMEvent)({
+      event: "popup_open",
+      value: {
+        ctaText,
+        type: textLink ? "link" : "button",
+        ...utm
+      }
     });
   };
   const handleClose = () => {
     setIsOpen(false);
-    sendEvent("popup_close", { ctaText, ...utm });
+    (0, import_google5.sendGTMEvent)({
+      event: "popup_close",
+      value: { ctaText, ...utm }
+    });
   };
   const trigger = textLink ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "button",

package/dist/index.mjs

@@ -20,7 +20,7 @@ import {
   Topbar,
   VideoEmbed,
   availableIcons
-} from "./chunk-RVOG4KFI.mjs";
+} from "./chunk-R7TH6TWG.mjs";
 import {
   allColorPresets,
   neutralColors
@@ -41,6 +41,7 @@ import {
   spacingScale,
   useTheme
 } from "./chunk-TTKY3YGP.mjs";
+import "./chunk-QSWQDR6M.mjs";
 export {
   Button,
   Card,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mission-studio/puck",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "A collection of puck components and configurations for internal use at Mission Studio.",
   "repository": {
     "type": "git",
@@ -37,6 +37,11 @@
       "import": "./dist/config-entry.mjs",
       "require": "./dist/config-entry.js"
     },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.mjs",
+      "require": "./dist/hooks/index.js"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "scripts": {
@@ -52,6 +57,7 @@
   },
   "dependencies": {
     "@measured/puck": "^0.20.2",
+    "@next/third-parties": "^16.1.6",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@tailwindcss/postcss": "^4.1.18",