@mission-studio/puck 1.0.1 → 1.0.2

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

@@ -524,6 +524,8 @@ function ImageCarousel({
 }) {
   const [currentIndex, setCurrentIndex] = useState2(0);
   const { resolveColor: resolveColor2 } = useTheme();
+  const sendEvent = useGtmEvent();
+  const utm = useUtmParams();
   const resolvedArrowColor = (() => {
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
     if (typeof arrowColor === "string")
@@ -544,13 +546,33 @@ 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);
+    sendEvent("carousel_navigate", {
+      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);
+    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__ */ jsx5(
@@ -1655,11 +1677,27 @@ function Footer({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
+  const sendEvent = useGtmEvent();
+  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);
+    sendEvent("social_click", {
+      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 +1713,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
@@ -1701,6 +1740,24 @@ function Topbar({
 }) {
   const DropZone = puck?.renderDropZone;
   const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
+  const sendEvent = useGtmEvent();
+  const utm = useUtmParams();
+  const handleNavClick = (item) => {
+    sendEvent("nav_click", {
+      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
+    });
+  };
   const renderLink = (item, index) => {
     const className = "hover:opacity-80 transition-opacity";
     if (item.linkType === "external") {
@@ -1711,15 +1768,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 +1809,25 @@ 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: () => sendEvent("nav_click", {
+                    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 }) })
             ]
           }
         ),
@@ -1797,10 +1879,24 @@ function Popup({
   puck
 }) {
   const [isOpen, setIsOpen] = useState4(false);
+  const sendEvent = useGtmEvent();
+  const utm = useUtmParams();
+  const handleOpen = () => {
+    setIsOpen(true);
+    sendEvent("popup_open", {
+      ctaText,
+      type: textLink ? "link" : "button",
+      ...utm
+    });
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+    sendEvent("popup_close", { 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 +1904,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 +1923,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 +1936,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 +1953,6 @@ function Popup({
 export {
   Heading,
   Paragraph,
-  useGtmEvent,
-  useUtmParams,
   Button,
   Image,
   ImageCarousel,

package/dist/chunk-TTKY3YGP.mjs

@@ -0,0 +1,262 @@
+// entries/context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var EntriesContext = createContext(null);
+function EntriesProvider({
+  entries,
+  children
+}) {
+  const entriesMap = new Map(entries.map((e) => [e.name, e]));
+  const contextValue = {
+    entries,
+    entryNames: entries.map((e) => e.name),
+    getEntry: (name) => entriesMap.get(name),
+    getEntryValue: (entryName, fieldKey) => {
+      const entry = entriesMap.get(entryName);
+      if (!entry) return void 0;
+      return entry.content[fieldKey];
+    }
+  };
+  return /* @__PURE__ */ jsx(EntriesContext.Provider, { value: contextValue, children });
+}
+function useEntries() {
+  const context = useContext(EntriesContext);
+  if (!context) {
+    return {
+      entries: [],
+      entryNames: [],
+      getEntry: () => void 0,
+      getEntryValue: () => void 0
+    };
+  }
+  return context;
+}
+
+// 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
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ThemeContext = createContext2(null);
+function ThemeProvider({
+  theme,
+  children
+}) {
+  const activeTheme = theme ?? DEFAULT_THEME;
+  const contextValue = {
+    theme: activeTheme,
+    resolveColor: (key) => activeTheme.colors[key],
+    resolveSpacing: (key) => activeTheme.spacing[key],
+    resolveBorderRadius: (key) => activeTheme.borders[key],
+    resolveShadow: (key) => activeTheme.shadows[key]
+  };
+  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value: contextValue, children });
+}
+function useTheme() {
+  const context = useContext2(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;
+}
+
+// design-system/shadows.ts
+var shadowPresets = [
+  { label: "None", value: "none", css: "none" },
+  { label: "XS", value: "xs", css: "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
+  {
+    label: "SM",
+    value: "sm",
+    css: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
+  },
+  {
+    label: "MD",
+    value: "md",
+    css: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+  },
+  {
+    label: "LG",
+    value: "lg",
+    css: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
+  },
+  {
+    label: "XL",
+    value: "xl",
+    css: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
+  },
+  { label: "2XL", value: "2xl", css: "0 25px 50px -12px rgb(0 0 0 / 0.25)" },
+  {
+    label: "Inner",
+    value: "inner",
+    css: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
+  }
+];
+var getShadowCSS = (value) => {
+  const preset = shadowPresets.find((p) => p.value === value);
+  return preset?.css ?? "none";
+};
+
+// design-system/borders.ts
+var borderRadiusScale = [
+  { label: "None", value: 0 },
+  { label: "XS", value: 2 },
+  { label: "SM", value: 4 },
+  { label: "MD", value: 6 },
+  { label: "LG", value: 8 },
+  { label: "XL", value: 12 },
+  { label: "2XL", value: 16 },
+  { label: "3XL", value: 24 }
+];
+var getClosestBorderRadiusValue = (value) => {
+  return borderRadiusScale.reduce(
+    (prev, curr) => Math.abs(curr.value - value) < Math.abs(prev.value - value) ? curr : prev
+  ).value;
+};
+var getBorderRadiusCSS = (value) => {
+  return `${value}px`;
+};
+
+// design-system/spacing.ts
+var spacingScale = [
+  { label: "None", value: 0 },
+  { label: "2XS", value: 4 },
+  { label: "XS", value: 8 },
+  { label: "SM", value: 12 },
+  { label: "MD", value: 16 },
+  { label: "LG", value: 24 },
+  { label: "XL", value: 32 },
+  { label: "2XL", value: 48 },
+  { label: "3XL", value: 64 },
+  { label: "4XL", value: 96 }
+];
+var getClosestSpacingValue = (value) => {
+  return spacingScale.reduce(
+    (prev, curr) => Math.abs(curr.value - value) < Math.abs(prev.value - value) ? curr : prev
+  ).value;
+};
+
+// design-system/typography.ts
+var fontFamilies = [
+  { label: "System", value: "system-ui, sans-serif" },
+  { label: "Sans", value: "ui-sans-serif, system-ui, sans-serif" },
+  { label: "Serif", value: "ui-serif, Georgia, serif" },
+  { label: "Mono", value: "ui-monospace, monospace" }
+];
+var fontSizes = [
+  { label: "XS", value: "xs", css: "0.75rem" },
+  { label: "SM", value: "sm", css: "0.875rem" },
+  { label: "Base", value: "base", css: "1rem" },
+  { label: "LG", value: "lg", css: "1.125rem" },
+  { label: "XL", value: "xl", css: "1.25rem" },
+  { label: "2XL", value: "2xl", css: "1.5rem" },
+  { label: "3XL", value: "3xl", css: "1.875rem" },
+  { label: "4XL", value: "4xl", css: "2.25rem" },
+  { label: "5XL", value: "5xl", css: "3rem" }
+];
+var fontWeights = [
+  { label: "Light", value: 300 },
+  { label: "Normal", value: 400 },
+  { label: "Medium", value: 500 },
+  { label: "Semibold", value: 600 },
+  { label: "Bold", value: 700 }
+];
+var getFontSizeCSS = (value) => {
+  const preset = fontSizes.find((p) => p.value === value);
+  return preset?.css ?? "1rem";
+};
+
+// utils/index.ts
+import { twMerge } from "tailwind-merge";
+import { clsx } from "clsx";
+function isValidHex(color) {
+  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
+}
+function hexToRgba(hex, opacity) {
+  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 normalizeHex(hex) {
+  const sanitized = hex.replace("#", "").toUpperCase();
+  if (sanitized.length === 3) {
+    return `#${sanitized[0]}${sanitized[0]}${sanitized[1]}${sanitized[1]}${sanitized[2]}${sanitized[2]}`;
+  }
+  return `#${sanitized}`;
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  EntriesProvider,
+  useEntries,
+  DEFAULT_THEME,
+  ThemeProvider,
+  useTheme,
+  isValidHex,
+  hexToRgba,
+  normalizeHex,
+  cn,
+  shadowPresets,
+  getShadowCSS,
+  borderRadiusScale,
+  getClosestBorderRadiusValue,
+  getBorderRadiusCSS,
+  spacingScale,
+  getClosestSpacingValue,
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  getFontSizeCSS
+};

package/dist/chunk-UJTTHDZA.mjs

@@ -0,0 +1,16 @@
+// design-system/colors.ts
+var neutralColors = [
+  { label: "White", value: "#FFFFFF" },
+  { label: "Gray 100", value: "#F3F4F6" },
+  { label: "Gray 300", value: "#D1D5DB" },
+  { label: "Gray 500", value: "#6B7280" },
+  { label: "Gray 700", value: "#374151" },
+  { label: "Gray 900", value: "#111827" },
+  { label: "Black", value: "#000000" }
+];
+var allColorPresets = [...neutralColors];
+
+export {
+  neutralColors,
+  allColorPresets
+};

package/dist/config-entry.d.mts

@@ -0,0 +1,5 @@
+import { Config } from '@measured/puck';
+
+declare const config: Config;
+
+export { config };

package/dist/config-entry.d.ts

@@ -0,0 +1,5 @@
+import { Config } from '@measured/puck';
+
+declare const config: Config;
+
+export { config };