@mission-studio/puck 1.0.1 → 1.0.3

package/dist/ResponsiveToggleField-CVhKzDAT.d.mts

@@ -0,0 +1,183 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type ColorValue = {
+    color: string;
+    opacity: number;
+};
+type CustomFieldProps<T> = {
+    value: T;
+    onChangeAction: (value: T) => void;
+    disabled?: boolean;
+    label: string;
+};
+
+type ThemeColors = {
+    primary: ColorValue;
+    secondary: ColorValue;
+    accent: ColorValue;
+    background: ColorValue;
+    foreground: ColorValue;
+    muted: ColorValue;
+};
+type ThemeTypography = {
+    fontFamily: {
+        heading: string;
+        body: string;
+    };
+    fontSize: {
+        base: string;
+        heading: string;
+    };
+    fontWeight: {
+        normal: number;
+        heading: number;
+    };
+};
+type ThemeSpacing = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+type ThemeBorders = {
+    radiusSmall: number;
+    radiusMedium: number;
+    radiusLarge: number;
+};
+type ThemeShadows = {
+    small: string;
+    medium: string;
+    large: string;
+};
+type PageTheme = {
+    id: string;
+    name: string;
+    colors: ThemeColors;
+    typography: ThemeTypography;
+    spacing: ThemeSpacing;
+    borders: ThemeBorders;
+    shadows: ThemeShadows;
+};
+type ThemeColorKey = keyof ThemeColors;
+type ThemeSpacingKey = keyof ThemeSpacing;
+type ThemeBorderKey = keyof ThemeBorders;
+type ThemeShadowKey = keyof ThemeShadows;
+type ThemeableColorValue = {
+    useTheme: true;
+    themeKey: ThemeColorKey;
+} | {
+    useTheme: false;
+    value: ColorValue;
+};
+type ThemeableSpacingValue = {
+    useTheme: true;
+    themeKey: ThemeSpacingKey;
+} | {
+    useTheme: false;
+    value: number;
+};
+type ThemeableBorderRadiusValue = {
+    useTheme: true;
+    themeKey: ThemeBorderKey;
+} | {
+    useTheme: false;
+    value: number;
+};
+type ThemeableShadowValue = {
+    useTheme: true;
+    themeKey: ThemeShadowKey;
+} | {
+    useTheme: false;
+    value: string;
+};
+
+type ThemeContextValue = {
+    theme: PageTheme;
+    resolveColor: (key: ThemeColorKey) => ColorValue;
+    resolveSpacing: (key: ThemeSpacingKey) => number;
+    resolveBorderRadius: (key: ThemeBorderKey) => number;
+    resolveShadow: (key: ThemeShadowKey) => string;
+};
+declare function ThemeProvider({ theme, children, }: {
+    theme: PageTheme | null;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+declare const DEFAULT_THEME: PageTheme;
+
+type BorderRadiusPreset = {
+    label: string;
+    value: number;
+};
+declare const borderRadiusScale: BorderRadiusPreset[];
+declare const getClosestBorderRadiusValue: (value: number) => number;
+declare const getBorderRadiusCSS: (value: number) => string;
+
+type ColorPreset = {
+    label: string;
+    value: string;
+};
+declare const neutralColors: ColorPreset[];
+declare const allColorPresets: ColorPreset[];
+
+type ShadowPreset = {
+    label: string;
+    value: string;
+    css: string;
+};
+declare const shadowPresets: ShadowPreset[];
+declare const getShadowCSS: (value: string) => string;
+
+type SpacingPreset = {
+    label: string;
+    value: number;
+};
+declare const spacingScale: SpacingPreset[];
+declare const getClosestSpacingValue: (value: number) => number;
+
+type FontFamilyPreset = {
+    label: string;
+    value: string;
+};
+type FontSizePreset = {
+    label: string;
+    value: string;
+    css: string;
+};
+type FontWeightPreset = {
+    label: string;
+    value: number;
+};
+declare const fontFamilies: FontFamilyPreset[];
+declare const fontSizes: FontSizePreset[];
+declare const fontWeights: FontWeightPreset[];
+declare const getFontSizeCSS: (value: string) => string;
+
+type EntryContent = Record<string, string | number | boolean | null>;
+type Entry = {
+    id: string;
+    venture_id: string;
+    name: string;
+    content: EntryContent;
+    created_at: string | null;
+    updated_at: string | null;
+};
+type EntryBoundValue<T> = {
+    useEntry: true;
+    entryName: string;
+    fieldKey: string;
+} | {
+    useEntry: false;
+    value: T;
+};
+
+type ResponsiveVisibility = {
+    mobile: boolean;
+    desktop: boolean;
+};
+declare function ResponsiveToggleField({ value, onChangeAction, disabled, label, }: CustomFieldProps<ResponsiveVisibility>): react_jsx_runtime.JSX.Element;
+
+export { getBorderRadiusCSS as A, type BorderRadiusPreset as B, type ColorValue as C, DEFAULT_THEME as D, type Entry as E, type FontFamilyPreset as F, getClosestBorderRadiusValue as G, getClosestSpacingValue as H, getFontSizeCSS as I, getShadowCSS as J, neutralColors as K, shadowPresets as L, spacingScale as M, useTheme as N, type PageTheme as P, type ResponsiveVisibility as R, type ShadowPreset as S, type ThemeableColorValue as T, type EntryBoundValue as a, type ThemeColorKey as b, type CustomFieldProps as c, type ColorPreset as d, type EntryContent as e, type FontSizePreset as f, type FontWeightPreset as g, ResponsiveToggleField as h, type SpacingPreset as i, type ThemeBorderKey as j, type ThemeBorders as k, type ThemeColors as l, ThemeProvider as m, type ThemeShadowKey as n, type ThemeShadows as o, type ThemeSpacing as p, type ThemeSpacingKey as q, type ThemeTypography as r, type ThemeableBorderRadiusValue as s, type ThemeableShadowValue as t, type ThemeableSpacingValue as u, allColorPresets as v, borderRadiusScale as w, fontFamilies as x, fontSizes as y, fontWeights as z };

package/dist/ResponsiveToggleField-CVhKzDAT.d.ts

@@ -0,0 +1,183 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type ColorValue = {
+    color: string;
+    opacity: number;
+};
+type CustomFieldProps<T> = {
+    value: T;
+    onChangeAction: (value: T) => void;
+    disabled?: boolean;
+    label: string;
+};
+
+type ThemeColors = {
+    primary: ColorValue;
+    secondary: ColorValue;
+    accent: ColorValue;
+    background: ColorValue;
+    foreground: ColorValue;
+    muted: ColorValue;
+};
+type ThemeTypography = {
+    fontFamily: {
+        heading: string;
+        body: string;
+    };
+    fontSize: {
+        base: string;
+        heading: string;
+    };
+    fontWeight: {
+        normal: number;
+        heading: number;
+    };
+};
+type ThemeSpacing = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+type ThemeBorders = {
+    radiusSmall: number;
+    radiusMedium: number;
+    radiusLarge: number;
+};
+type ThemeShadows = {
+    small: string;
+    medium: string;
+    large: string;
+};
+type PageTheme = {
+    id: string;
+    name: string;
+    colors: ThemeColors;
+    typography: ThemeTypography;
+    spacing: ThemeSpacing;
+    borders: ThemeBorders;
+    shadows: ThemeShadows;
+};
+type ThemeColorKey = keyof ThemeColors;
+type ThemeSpacingKey = keyof ThemeSpacing;
+type ThemeBorderKey = keyof ThemeBorders;
+type ThemeShadowKey = keyof ThemeShadows;
+type ThemeableColorValue = {
+    useTheme: true;
+    themeKey: ThemeColorKey;
+} | {
+    useTheme: false;
+    value: ColorValue;
+};
+type ThemeableSpacingValue = {
+    useTheme: true;
+    themeKey: ThemeSpacingKey;
+} | {
+    useTheme: false;
+    value: number;
+};
+type ThemeableBorderRadiusValue = {
+    useTheme: true;
+    themeKey: ThemeBorderKey;
+} | {
+    useTheme: false;
+    value: number;
+};
+type ThemeableShadowValue = {
+    useTheme: true;
+    themeKey: ThemeShadowKey;
+} | {
+    useTheme: false;
+    value: string;
+};
+
+type ThemeContextValue = {
+    theme: PageTheme;
+    resolveColor: (key: ThemeColorKey) => ColorValue;
+    resolveSpacing: (key: ThemeSpacingKey) => number;
+    resolveBorderRadius: (key: ThemeBorderKey) => number;
+    resolveShadow: (key: ThemeShadowKey) => string;
+};
+declare function ThemeProvider({ theme, children, }: {
+    theme: PageTheme | null;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+declare const DEFAULT_THEME: PageTheme;
+
+type BorderRadiusPreset = {
+    label: string;
+    value: number;
+};
+declare const borderRadiusScale: BorderRadiusPreset[];
+declare const getClosestBorderRadiusValue: (value: number) => number;
+declare const getBorderRadiusCSS: (value: number) => string;
+
+type ColorPreset = {
+    label: string;
+    value: string;
+};
+declare const neutralColors: ColorPreset[];
+declare const allColorPresets: ColorPreset[];
+
+type ShadowPreset = {
+    label: string;
+    value: string;
+    css: string;
+};
+declare const shadowPresets: ShadowPreset[];
+declare const getShadowCSS: (value: string) => string;
+
+type SpacingPreset = {
+    label: string;
+    value: number;
+};
+declare const spacingScale: SpacingPreset[];
+declare const getClosestSpacingValue: (value: number) => number;
+
+type FontFamilyPreset = {
+    label: string;
+    value: string;
+};
+type FontSizePreset = {
+    label: string;
+    value: string;
+    css: string;
+};
+type FontWeightPreset = {
+    label: string;
+    value: number;
+};
+declare const fontFamilies: FontFamilyPreset[];
+declare const fontSizes: FontSizePreset[];
+declare const fontWeights: FontWeightPreset[];
+declare const getFontSizeCSS: (value: string) => string;
+
+type EntryContent = Record<string, string | number | boolean | null>;
+type Entry = {
+    id: string;
+    venture_id: string;
+    name: string;
+    content: EntryContent;
+    created_at: string | null;
+    updated_at: string | null;
+};
+type EntryBoundValue<T> = {
+    useEntry: true;
+    entryName: string;
+    fieldKey: string;
+} | {
+    useEntry: false;
+    value: T;
+};
+
+type ResponsiveVisibility = {
+    mobile: boolean;
+    desktop: boolean;
+};
+declare function ResponsiveToggleField({ value, onChangeAction, disabled, label, }: CustomFieldProps<ResponsiveVisibility>): react_jsx_runtime.JSX.Element;
+
+export { getBorderRadiusCSS as A, type BorderRadiusPreset as B, type ColorValue as C, DEFAULT_THEME as D, type Entry as E, type FontFamilyPreset as F, getClosestBorderRadiusValue as G, getClosestSpacingValue as H, getFontSizeCSS as I, getShadowCSS as J, neutralColors as K, shadowPresets as L, spacingScale as M, useTheme as N, type PageTheme as P, type ResponsiveVisibility as R, type ShadowPreset as S, type ThemeableColorValue as T, type EntryBoundValue as a, type ThemeColorKey as b, type CustomFieldProps as c, type ColorPreset as d, type EntryContent as e, type FontSizePreset as f, type FontWeightPreset as g, ResponsiveToggleField as h, type SpacingPreset as i, type ThemeBorderKey as j, type ThemeBorders as k, type ThemeColors as l, ThemeProvider as m, type ThemeShadowKey as n, type ThemeShadows as o, type ThemeSpacing as p, type ThemeSpacingKey as q, type ThemeTypography as r, type ThemeableBorderRadiusValue as s, type ThemeableShadowValue as t, type ThemeableSpacingValue as u, allColorPresets as v, borderRadiusScale as w, fontFamilies as x, fontSizes as y, fontWeights as z };

package/dist/{chunk-SRFEJJIW.mjs → chunk-F47J7QDM.mjs}

@@ -158,21 +158,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 || {});
-  };
-}
+// components/page/Button.tsx
+import { sendGTMEvent } from "@next/third-parties/google";
 
 // hooks/useUtmParams.ts
 import { useEffect, useState } from "react";
@@ -263,7 +250,6 @@ function Button({
 }) {
   const { resolveColor: resolveColor2 } = useTheme();
   const { getEntryValue } = useEntries();
-  const sendEvent = useGtmEvent();
   const utm = useUtmParams();
   const resolvedText = (() => {
     if (!text) return "Button";
@@ -277,11 +263,14 @@ function Button({
     return "Button";
   })();
   const handleClick = () => {
-    sendEvent("button_click", {
-      text: resolvedText,
-      href: href || void 0,
-      variant,
-      ...utm
+    sendGTMEvent({
+      event: "button_click",
+      value: {
+        text: resolvedText,
+        href: href || void 0,
+        variant,
+        ...utm
+      }
     });
   };
   const resolvedColor = (() => {
@@ -496,6 +485,7 @@ function Image({
 
 // components/page/ImageCarousel.tsx
 import { useState as useState2 } 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",
@@ -524,6 +514,7 @@ function ImageCarousel({
 }) {
   const [currentIndex, setCurrentIndex] = useState2(0);
   const { resolveColor: resolveColor2 } = useTheme();
+  const utm = useUtmParams();
   const resolvedArrowColor = (() => {
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
     if (typeof arrowColor === "string")
@@ -544,13 +535,42 @@ function ImageCarousel({
     return resolveColor2("primary");
   })();
   const goToPrevious = () => {
-    setCurrentIndex((prev) => prev === 0 ? images.length - 1 : prev - 1);
+    const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
+    setCurrentIndex(newIndex);
+    sendGTMEvent2({
+      event: "carousel_navigate",
+      value: {
+        direction: "previous",
+        slideIndex: newIndex,
+        totalSlides: images.length,
+        ...utm
+      }
+    });
   };
   const goToNext = () => {
-    setCurrentIndex((prev) => prev === images.length - 1 ? 0 : prev + 1);
+    const newIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
+    setCurrentIndex(newIndex);
+    sendGTMEvent2({
+      event: "carousel_navigate",
+      value: {
+        direction: "next",
+        slideIndex: newIndex,
+        totalSlides: images.length,
+        ...utm
+      }
+    });
   };
   const goToSlide = (index) => {
     setCurrentIndex(index);
+    sendGTMEvent2({
+      event: "carousel_navigate",
+      value: {
+        direction: "direct",
+        slideIndex: index,
+        totalSlides: images.length,
+        ...utm
+      }
+    });
   };
   if (images.length === 0) {
     return /* @__PURE__ */ jsx5(
@@ -1643,6 +1663,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,
@@ -1655,11 +1676,31 @@ function Footer({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
+  const utm = useUtmParams();
+  const getSocialPlatform = (url) => {
+    if (url.includes("facebook")) return "facebook";
+    if (url.includes("instagram")) return "instagram";
+    if (url.includes("twitter")) return "twitter";
+    return "social";
+  };
+  const handleSocialClick = (url) => {
+    const platform = getSocialPlatform(url);
+    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",
     {
@@ -1675,6 +1716,7 @@ function Footer({
             target: "_blank",
             rel: "noopener noreferrer",
             className: "transition-opacity hover:opacity-80",
+            onClick: () => handleSocialClick(url),
             children: /* @__PURE__ */ jsx18(Icon3, { size: 24, style: { color: textColor } })
           },
           index
@@ -1689,6 +1731,7 @@ function Footer({
 import { useState as useState3 } 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,
@@ -1701,6 +1744,29 @@ function Topbar({
 }) {
   const DropZone = puck?.renderDropZone;
   const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
+  const utm = useUtmParams();
+  const handleNavClick = (item) => {
+    sendGTMEvent4({
+      event: "nav_click",
+      value: {
+        name: item.name,
+        url: item.url,
+        linkType: item.linkType || "internal",
+        ...utm
+      }
+    });
+  };
+  const handleMobileMenuToggle = () => {
+    const newState = !mobileMenuOpen;
+    setMobileMenuOpen(newState);
+    sendGTMEvent4({
+      event: "mobile_menu_toggle",
+      value: {
+        open: newState,
+        ...utm
+      }
+    });
+  };
   const renderLink = (item, index) => {
     const className = "hover:opacity-80 transition-opacity";
     if (item.linkType === "external") {
@@ -1711,15 +1777,34 @@ function Topbar({
           target: "_blank",
           rel: "noopener noreferrer",
           className,
+          onClick: () => handleNavClick(item),
           children: item.name
         },
         index
       );
     }
     if (item.linkType === "scrollTo") {
-      return /* @__PURE__ */ jsx19("a", { href: item.url, className, children: item.name }, index);
+      return /* @__PURE__ */ jsx19(
+        "a",
+        {
+          href: item.url,
+          className,
+          onClick: () => handleNavClick(item),
+          children: item.name
+        },
+        index
+      );
     }
-    return /* @__PURE__ */ jsx19(Link, { href: item.url, className, children: item.name }, index);
+    return /* @__PURE__ */ jsx19(
+      Link,
+      {
+        href: item.url,
+        className,
+        onClick: () => handleNavClick(item),
+        children: item.name
+      },
+      index
+    );
   };
   return /* @__PURE__ */ jsxs8(
     "nav",
@@ -1733,19 +1818,28 @@ function Topbar({
             className: "mx-auto flex items-center justify-between",
             style: { maxWidth },
             children: [
-              /* @__PURE__ */ jsx19(Link, { href: logoUrl, className: "flex-shrink-0", children: logo ? /* @__PURE__ */ jsx19("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ jsx19("span", { className: "text-xl font-bold", children: "Logo" }) }),
+              /* @__PURE__ */ jsx19(
+                Link,
+                {
+                  href: logoUrl,
+                  className: "flex-shrink-0",
+                  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" })
+                }
+              ),
               /* @__PURE__ */ jsxs8("div", { className: "hidden items-center gap-8 md:flex", children: [
                 navItems.map(renderLink),
                 DropZone && /* @__PURE__ */ jsx19(DropZone, { zone: "cta" })
               ] }),
-              /* @__PURE__ */ jsx19(
-                "button",
-                {
-                  className: "md:hidden",
-                  onClick: () => setMobileMenuOpen(!mobileMenuOpen),
-                  children: mobileMenuOpen ? /* @__PURE__ */ jsx19(X, { size: 24 }) : /* @__PURE__ */ jsx19(Menu, { size: 24 })
-                }
-              )
+              /* @__PURE__ */ jsx19("button", { className: "md:hidden", onClick: handleMobileMenuToggle, children: mobileMenuOpen ? /* @__PURE__ */ jsx19(X, { size: 24 }) : /* @__PURE__ */ jsx19(Menu, { size: 24 }) })
             ]
           }
         ),
@@ -1768,6 +1862,7 @@ function Topbar({
 // components/page/Popup.tsx
 import { useState as useState4 } 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);
@@ -1797,10 +1892,29 @@ function Popup({
   puck
 }) {
   const [isOpen, setIsOpen] = useState4(false);
+  const utm = useUtmParams();
+  const handleOpen = () => {
+    setIsOpen(true);
+    sendGTMEvent5({
+      event: "popup_open",
+      value: {
+        ctaText,
+        type: textLink ? "link" : "button",
+        ...utm
+      }
+    });
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+    sendGTMEvent5({
+      event: "popup_close",
+      value: { ctaText, ...utm }
+    });
+  };
   const trigger = textLink ? /* @__PURE__ */ jsx20(
     "button",
     {
-      onClick: () => setIsOpen(true),
+      onClick: handleOpen,
       className: "underline hover:opacity-80",
       style: { color: buttonColor },
       children: ctaText
@@ -1808,7 +1922,7 @@ function Popup({
   ) : /* @__PURE__ */ jsxs9(
     "button",
     {
-      onClick: () => setIsOpen(true),
+      onClick: handleOpen,
       className: cn(
         "flex items-center gap-2 rounded-full font-medium",
         sizeMap8[size]
@@ -1827,7 +1941,7 @@ function Popup({
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-        onClick: () => setIsOpen(false),
+        onClick: handleClose,
         children: /* @__PURE__ */ jsxs9(
           "div",
           {
@@ -1840,7 +1954,7 @@ function Popup({
               /* @__PURE__ */ jsx20(
                 "button",
                 {
-                  onClick: () => setIsOpen(false),
+                  onClick: handleClose,
                   className: "absolute top-4 right-4 text-gray-500 hover:text-gray-700",
                   children: /* @__PURE__ */ jsx20(X2, { size: 24 })
                 }
@@ -1857,8 +1971,6 @@ function Popup({
 export {
   Heading,
   Paragraph,
-  useGtmEvent,
-  useUtmParams,
   Button,
   Image,
   ImageCarousel,