@mission-studio/puck 1.0.3 → 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-F47J7QDM.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";
@@ -160,61 +163,6 @@ function Paragraph({
 
 // components/page/Button.tsx
 import { sendGTMEvent } from "@next/third-parties/google";
-
-// 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 { jsx as jsx3 } from "react/jsx-runtime";
 var sizeStyles = {
   sm: { padding: "8px 16px", fontSize: "0.875rem" },
@@ -263,12 +211,14 @@ function Button({
     return "Button";
   })();
   const handleClick = () => {
+    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
       }
     });
@@ -484,7 +434,7 @@ 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 = {
@@ -512,7 +462,7 @@ function ImageCarousel({
   dotColor,
   id
 }) {
-  const [currentIndex, setCurrentIndex] = useState2(0);
+  const [currentIndex, setCurrentIndex] = useState(0);
   const { resolveColor: resolveColor2 } = useTheme();
   const utm = useUtmParams();
   const resolvedArrowColor = (() => {
@@ -1728,7 +1678,7 @@ 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";
@@ -1743,7 +1693,7 @@ function Topbar({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
-  const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState2(false);
   const utm = useUtmParams();
   const handleNavClick = (item) => {
     sendGTMEvent4({
@@ -1860,7 +1810,7 @@ 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";
@@ -1891,7 +1841,7 @@ function Popup({
   textLink = false,
   puck
 }) {
-  const [isOpen, setIsOpen] = useState4(false);
+  const [isOpen, setIsOpen] = useState3(false);
   const utm = useUtmParams();
   const handleOpen = () => {
     setIsOpen(true);

package/dist/config-entry.js

@@ -397,12 +397,14 @@ function Button({
     return "Button";
   })();
   const handleClick = () => {
+    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
       }
     });

package/dist/config-entry.mjs

@@ -29,8 +29,9 @@ import {
   Topbar,
   VideoEmbed,
   availableIcons
-} from "./chunk-F47J7QDM.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

@@ -437,12 +437,14 @@ function Button({
     return "Button";
   })();
   const handleClick = () => {
+    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
       }
     });

package/dist/index.mjs

@@ -20,7 +20,7 @@ import {
   Topbar,
   VideoEmbed,
   availableIcons
-} from "./chunk-F47J7QDM.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.3",
+  "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": {