@mission-studio/puck 1.0.5 → 1.0.16

package/dist/ResponsiveToggleField-BihXsGIJ.d.mts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { P as PageTheme, b as ThemeColorKey, C as ColorValue, g as ThemeSpacingKey, T as ThemeBorderKey, d as ThemeShadowKey, m as CustomFieldProps } from './types-D-CIduaE.mjs';
+
+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 ResponsiveVisibility = {
+    mobile: boolean;
+    desktop: boolean;
+};
+declare function ResponsiveToggleField({ value, onChangeAction, disabled, label, }: CustomFieldProps<ResponsiveVisibility>): react_jsx_runtime.JSX.Element;
+
+export { DEFAULT_THEME as D, type ResponsiveVisibility as R, ThemeProvider as T, ResponsiveToggleField as a, useTheme as u };

package/dist/ResponsiveToggleField-CfBKL5oY.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { P as PageTheme, b as ThemeColorKey, C as ColorValue, g as ThemeSpacingKey, T as ThemeBorderKey, d as ThemeShadowKey, m as CustomFieldProps } from './types-D-CIduaE.js';
+
+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 ResponsiveVisibility = {
+    mobile: boolean;
+    desktop: boolean;
+};
+declare function ResponsiveToggleField({ value, onChangeAction, disabled, label, }: CustomFieldProps<ResponsiveVisibility>): react_jsx_runtime.JSX.Element;
+
+export { DEFAULT_THEME as D, type ResponsiveVisibility as R, ThemeProvider as T, ResponsiveToggleField as a, useTheme as u };

package/dist/chunk-A3QDUUOF.mjs

@@ -0,0 +1,80 @@
+// 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";
+};
+
+export {
+  borderRadiusScale,
+  getClosestBorderRadiusValue,
+  getBorderRadiusCSS,
+  spacingScale,
+  getClosestSpacingValue,
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  getFontSizeCSS
+};

package/dist/chunk-D3L26TIT.mjs

@@ -0,0 +1,76 @@
+// 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"
+  }
+};
+
+// 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 {
+  DEFAULT_THEME,
+  isValidHex,
+  hexToRgba,
+  normalizeHex,
+  cn
+};

package/dist/chunk-KV2RSRAM.mjs

@@ -0,0 +1,114 @@
+import {
+  DEFAULT_THEME
+} from "./chunk-D3L26TIT.mjs";
+
+// 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/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";
+};
+
+export {
+  EntriesProvider,
+  useEntries,
+  ThemeProvider,
+  useTheme,
+  shadowPresets,
+  getShadowCSS
+};

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

@@ -1,13 +1,16 @@
 import {
-  cn,
   getShadowCSS,
-  hexToRgba,
   useEntries,
   useTheme
-} from "./chunk-TTKY3YGP.mjs";
+} from "./chunk-KV2RSRAM.mjs";
 import {
+  useGtmEvent,
   useUtmParams
 } from "./chunk-QSWQDR6M.mjs";
+import {
+  cn,
+  hexToRgba
+} from "./chunk-D3L26TIT.mjs";
 
 // components/page/Heading.tsx
 import { jsx } from "react/jsx-runtime";
@@ -162,7 +165,6 @@ function Paragraph({
 }
 
 // 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" },
@@ -199,6 +201,7 @@ function Button({
   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;
@@ -212,15 +215,12 @@ function 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
-      }
+    sendEvent("button_click", {
+      text: resolvedText,
+      href: href || void 0,
+      variant,
+      session_id: sessionId,
+      ...utm
     });
   };
   const resolvedColor = (() => {
@@ -435,7 +435,6 @@ function Image({
 
 // components/page/ImageCarousel.tsx
 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",
@@ -465,6 +464,7 @@ function ImageCarousel({
   const [currentIndex, setCurrentIndex] = 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")
@@ -487,39 +487,30 @@ function ImageCarousel({
   const goToPrevious = () => {
     const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
     setCurrentIndex(newIndex);
-    sendGTMEvent2({
-      event: "carousel_navigate",
-      value: {
-        direction: "previous",
-        slideIndex: newIndex,
-        totalSlides: images.length,
-        ...utm
-      }
+    sendEvent("carousel_navigate", {
+      direction: "previous",
+      slideIndex: newIndex,
+      totalSlides: images.length,
+      ...utm
     });
   };
   const goToNext = () => {
     const newIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
     setCurrentIndex(newIndex);
-    sendGTMEvent2({
-      event: "carousel_navigate",
-      value: {
-        direction: "next",
-        slideIndex: newIndex,
-        totalSlides: images.length,
-        ...utm
-      }
+    sendEvent("carousel_navigate", {
+      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
-      }
+    sendEvent("carousel_navigate", {
+      direction: "direct",
+      slideIndex: index,
+      totalSlides: images.length,
+      ...utm
     });
   };
   if (images.length === 0) {
@@ -1613,7 +1604,6 @@ 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,
@@ -1627,6 +1617,7 @@ function Footer({
 }) {
   const DropZone = puck?.renderDropZone;
   const utm = useUtmParams();
+  const sendEvent = useGtmEvent();
   const getSocialPlatform = (url) => {
     if (url.includes("facebook")) return "facebook";
     if (url.includes("instagram")) return "instagram";
@@ -1635,13 +1626,10 @@ function Footer({
   };
   const handleSocialClick = (url) => {
     const platform = getSocialPlatform(url);
-    sendGTMEvent3({
-      event: "social_click",
-      value: {
-        platform,
-        url,
-        ...utm
-      }
+    sendEvent("social_click", {
+      platform,
+      url,
+      ...utm
     });
   };
   const socialLinks = [
@@ -1679,9 +1667,7 @@ function Footer({
 
 // components/page/Topbar.tsx
 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,
@@ -1695,26 +1681,21 @@ function Topbar({
   const DropZone = puck?.renderDropZone;
   const [mobileMenuOpen, setMobileMenuOpen] = useState2(false);
   const utm = useUtmParams();
+  const sendEvent = useGtmEvent();
   const handleNavClick = (item) => {
-    sendGTMEvent4({
-      event: "nav_click",
-      value: {
-        name: item.name,
-        url: item.url,
-        linkType: item.linkType || "internal",
-        ...utm
-      }
+    sendEvent("nav_click", {
+      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
-      }
+    sendEvent("mobile_menu_toggle", {
+      open: newState,
+      ...utm
     });
   };
   const renderLink = (item, index) => {
@@ -1746,7 +1727,7 @@ function Topbar({
       );
     }
     return /* @__PURE__ */ jsx19(
-      Link,
+      "a",
       {
         href: item.url,
         className,
@@ -1769,18 +1750,15 @@ function Topbar({
             style: { maxWidth },
             children: [
               /* @__PURE__ */ jsx19(
-                Link,
+                "a",
                 {
                   href: logoUrl,
                   className: "flex-shrink-0",
-                  onClick: () => sendGTMEvent4({
-                    event: "nav_click",
-                    value: {
-                      name: "logo",
-                      url: logoUrl,
-                      linkType: "internal",
-                      ...utm
-                    }
+                  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" })
                 }
@@ -1812,7 +1790,6 @@ function Topbar({
 // components/page/Popup.tsx
 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);
@@ -1843,23 +1820,18 @@ function Popup({
 }) {
   const [isOpen, setIsOpen] = useState3(false);
   const utm = useUtmParams();
+  const sendEvent = useGtmEvent();
   const handleOpen = () => {
     setIsOpen(true);
-    sendGTMEvent5({
-      event: "popup_open",
-      value: {
-        ctaText,
-        type: textLink ? "link" : "button",
-        ...utm
-      }
+    sendEvent("popup_open", {
+      ctaText,
+      type: textLink ? "link" : "button",
+      ...utm
     });
   };
   const handleClose = () => {
     setIsOpen(false);
-    sendGTMEvent5({
-      event: "popup_close",
-      value: { ctaText, ...utm }
-    });
+    sendEvent("popup_close", { ctaText, ...utm });
   };
   const trigger = textLink ? /* @__PURE__ */ jsx20(
     "button",