@mission-studio/puck 1.0.0

package/dist/editor.mjs

@@ -0,0 +1,509 @@
+import {
+  BorderRadiusField,
+  Button,
+  ColorPickerField,
+  EntryBoundTextField,
+  ResponsiveToggleField,
+  ShadowField,
+  SpacingSliderField,
+  ThemeableColorField,
+  TypographyField,
+  createBorderRadiusField,
+  createColorField,
+  createEntryBoundTextField,
+  createResponsiveField,
+  createShadowField,
+  createSpacingField,
+  createThemeableColorField,
+  createTypographyField
+} from "./chunk-OZYZPWP7.mjs";
+import {
+  allColorPresets,
+  neutralColors
+} from "./chunk-UJTTHDZA.mjs";
+import {
+  DEFAULT_THEME,
+  EntriesProvider,
+  ThemeProvider,
+  borderRadiusScale,
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  getBorderRadiusCSS,
+  getClosestBorderRadiusValue,
+  getClosestSpacingValue,
+  getFontSizeCSS,
+  getShadowCSS,
+  shadowPresets,
+  spacingScale,
+  useEntries,
+  useTheme
+} from "./chunk-TTKY3YGP.mjs";
+
+// components/editor/TemplatesList.tsx
+import { usePuck } from "@measured/puck";
+import { LayoutTemplate } from "lucide-react";
+
+// templates.ts
+var generateId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+var templates = [
+  {
+    name: "Hero Section",
+    description: "Title, subtitle, and CTA button",
+    category: "Templates",
+    getData: () => {
+      const sectionId = `Section-${generateId()}`;
+      const textBlockId = `TextBlock-${generateId()}`;
+      const popupId = `Popup-${generateId()}`;
+      return {
+        content: [
+          {
+            type: "Section",
+            props: {
+              id: sectionId,
+              verticalPadding: 96,
+              horizontalPadding: 32,
+              gap: 24,
+              backgroundColor: { color: "#111827", opacity: 100 },
+              shadow: "none",
+              borderRadius: 0,
+              contentMaxWidth: "1200px",
+              visibility: { mobile: true, desktop: true }
+            }
+          }
+        ],
+        zones: {
+          [`${sectionId}:content`]: [
+            {
+              type: "TextBlock",
+              props: {
+                id: textBlockId,
+                title: "Welcome to Your Site",
+                subtitle: "A powerful headline that captures attention",
+                body: "",
+                alignment: "center",
+                textSize: "xlarge",
+                textColor: { color: "#FFFFFF", opacity: 100 },
+                subtitleBodyColor: { color: "#9CA3AF", opacity: 100 },
+                useGradientText: false,
+                gradientColor1: { color: "#3B82F6", opacity: 100 },
+                gradientColor2: { color: "#8B5CF6", opacity: 100 }
+              }
+            },
+            {
+              type: "Popup",
+              props: {
+                id: popupId,
+                ctaText: "Get Started",
+                buttonColor: { color: "#3B82F6", opacity: 100 },
+                textColor: { color: "#FFFFFF", opacity: 100 },
+                iconPosition: "right",
+                size: "large",
+                width: "medium",
+                textLink: false
+              }
+            }
+          ]
+        }
+      };
+    }
+  },
+  {
+    name: "Features Grid",
+    description: "Heading with feature cards below",
+    category: "Templates",
+    getData: () => {
+      const sectionId = `Section-${generateId()}`;
+      const featureGridId = `FeatureGrid-${generateId()}`;
+      return {
+        content: [
+          {
+            type: "Section",
+            props: {
+              id: sectionId,
+              verticalPadding: 64,
+              horizontalPadding: 32,
+              gap: 24,
+              backgroundColor: { color: "#FFFFFF", opacity: 100 },
+              shadow: "none",
+              borderRadius: 0,
+              contentMaxWidth: "1200px",
+              visibility: { mobile: true, desktop: true }
+            }
+          }
+        ],
+        zones: {
+          [`${sectionId}:content`]: [
+            {
+              type: "FeatureGrid",
+              props: {
+                id: featureGridId,
+                heading: "Why Choose Us",
+                description: "Everything you need to succeed",
+                features: [
+                  {
+                    icon: "Zap",
+                    title: "Fast",
+                    description: "Lightning quick performance"
+                  },
+                  {
+                    icon: "Shield",
+                    title: "Secure",
+                    description: "Enterprise-grade security"
+                  },
+                  {
+                    icon: "Heart",
+                    title: "Reliable",
+                    description: "99.9% uptime guaranteed"
+                  }
+                ],
+                columns: 3,
+                align: "center",
+                size: "medium",
+                iconColor: { color: "#3B82F6", opacity: 100 },
+                textColor: { color: "#000000", opacity: 100 }
+              }
+            }
+          ]
+        }
+      };
+    }
+  },
+  {
+    name: "CTA Banner",
+    description: "Call to action with button",
+    category: "Templates",
+    getData: () => {
+      const sectionId = `Section-${generateId()}`;
+      const textBlockId = `TextBlock-${generateId()}`;
+      const popupId = `Popup-${generateId()}`;
+      return {
+        content: [
+          {
+            type: "Section",
+            props: {
+              id: sectionId,
+              verticalPadding: 48,
+              horizontalPadding: 32,
+              gap: 16,
+              backgroundColor: { color: "#3B82F6", opacity: 100 },
+              shadow: "none",
+              borderRadius: 12,
+              contentMaxWidth: "900px",
+              visibility: { mobile: true, desktop: true }
+            }
+          }
+        ],
+        zones: {
+          [`${sectionId}:content`]: [
+            {
+              type: "TextBlock",
+              props: {
+                id: textBlockId,
+                title: "Ready to get started?",
+                subtitle: "Join thousands of satisfied customers today.",
+                body: "",
+                alignment: "center",
+                textSize: "large",
+                textColor: { color: "#FFFFFF", opacity: 100 },
+                subtitleBodyColor: { color: "#DBEAFE", opacity: 100 },
+                useGradientText: false,
+                gradientColor1: { color: "#3B82F6", opacity: 100 },
+                gradientColor2: { color: "#8B5CF6", opacity: 100 }
+              }
+            },
+            {
+              type: "Popup",
+              props: {
+                id: popupId,
+                ctaText: "Start Free Trial",
+                buttonColor: { color: "#FFFFFF", opacity: 100 },
+                textColor: { color: "#3B82F6", opacity: 100 },
+                iconPosition: "right",
+                size: "large",
+                width: "medium",
+                textLink: false
+              }
+            }
+          ]
+        }
+      };
+    }
+  },
+  {
+    name: "Text Section",
+    description: "Simple heading and paragraph",
+    category: "Templates",
+    getData: () => {
+      const sectionId = `Section-${generateId()}`;
+      const textBlockId = `TextBlock-${generateId()}`;
+      return {
+        content: [
+          {
+            type: "Section",
+            props: {
+              id: sectionId,
+              verticalPadding: 64,
+              horizontalPadding: 32,
+              gap: 24,
+              backgroundColor: { color: "#FFFFFF", opacity: 100 },
+              shadow: "none",
+              borderRadius: 0,
+              contentMaxWidth: "800px",
+              visibility: { mobile: true, desktop: true }
+            }
+          }
+        ],
+        zones: {
+          [`${sectionId}:content`]: [
+            {
+              type: "TextBlock",
+              props: {
+                id: textBlockId,
+                title: "About Us",
+                subtitle: "",
+                body: "<p>We are a team of passionate individuals dedicated to building great products. Our mission is to help businesses succeed by providing innovative solutions that drive growth and efficiency.</p><p>Founded in 2020, we've helped hundreds of companies transform their digital presence.</p>",
+                alignment: "left",
+                textSize: "medium",
+                textColor: { color: "#111827", opacity: 100 },
+                subtitleBodyColor: { color: "#4B5563", opacity: 100 },
+                useGradientText: false,
+                gradientColor1: { color: "#3B82F6", opacity: 100 },
+                gradientColor2: { color: "#8B5CF6", opacity: 100 }
+              }
+            }
+          ]
+        }
+      };
+    }
+  },
+  {
+    name: "Image Section",
+    description: "Centered image with caption",
+    category: "Templates",
+    getData: () => {
+      const sectionId = `Section-${generateId()}`;
+      const imageId = `CustomImage-${generateId()}`;
+      const textBlockId = `TextBlock-${generateId()}`;
+      return {
+        content: [
+          {
+            type: "Section",
+            props: {
+              id: sectionId,
+              verticalPadding: 48,
+              horizontalPadding: 32,
+              gap: 16,
+              backgroundColor: { color: "#F9FAFB", opacity: 100 },
+              shadow: "none",
+              borderRadius: 0,
+              contentMaxWidth: "1000px",
+              visibility: { mobile: true, desktop: true }
+            }
+          }
+        ],
+        zones: {
+          [`${sectionId}:content`]: [
+            {
+              type: "CustomImage",
+              props: {
+                id: imageId,
+                image: "https://placehold.co/1200x600/e2e8f0/64748b?text=Your+Image+Here",
+                alt: "Placeholder image",
+                maxWidth: 1e3,
+                alignment: "center",
+                fitContent: false
+              }
+            },
+            {
+              type: "TextBlock",
+              props: {
+                id: textBlockId,
+                title: "",
+                subtitle: "Add a caption or description for your image here.",
+                body: "",
+                alignment: "center",
+                textSize: "small",
+                textColor: { color: "#111827", opacity: 100 },
+                subtitleBodyColor: { color: "#6B7280", opacity: 100 },
+                useGradientText: false,
+                gradientColor1: { color: "#3B82F6", opacity: 100 },
+                gradientColor2: { color: "#8B5CF6", opacity: 100 }
+              }
+            }
+          ]
+        }
+      };
+    }
+  },
+  {
+    name: "Features List",
+    description: "Bullet points with icons",
+    category: "Templates",
+    getData: () => {
+      const sectionId = `Section-${generateId()}`;
+      const textBlockId = `TextBlock-${generateId()}`;
+      const featuresListId = `FeaturesList-${generateId()}`;
+      return {
+        content: [
+          {
+            type: "Section",
+            props: {
+              id: sectionId,
+              verticalPadding: 64,
+              horizontalPadding: 32,
+              gap: 32,
+              backgroundColor: { color: "#FFFFFF", opacity: 100 },
+              shadow: "none",
+              borderRadius: 0,
+              contentMaxWidth: "800px",
+              visibility: { mobile: true, desktop: true }
+            }
+          }
+        ],
+        zones: {
+          [`${sectionId}:content`]: [
+            {
+              type: "TextBlock",
+              props: {
+                id: textBlockId,
+                title: "What's Included",
+                subtitle: "",
+                body: "",
+                alignment: "left",
+                textSize: "large",
+                textColor: { color: "#111827", opacity: 100 },
+                subtitleBodyColor: { color: "#6B7280", opacity: 100 },
+                useGradientText: false,
+                gradientColor1: { color: "#3B82F6", opacity: 100 },
+                gradientColor2: { color: "#8B5CF6", opacity: 100 }
+              }
+            },
+            {
+              type: "FeaturesList",
+              props: {
+                id: featuresListId,
+                features: [
+                  {
+                    icon: "Check",
+                    title: "Unlimited projects",
+                    description: "Create as many as you need"
+                  },
+                  {
+                    icon: "Check",
+                    title: "Priority support",
+                    description: "Get help when you need it"
+                  },
+                  {
+                    icon: "Check",
+                    title: "Advanced analytics",
+                    description: "Track your performance"
+                  },
+                  {
+                    icon: "Check",
+                    title: "Custom integrations",
+                    description: "Connect your favorite tools"
+                  }
+                ],
+                align: "left",
+                size: "medium",
+                iconColor: { color: "#10B981", opacity: 100 }
+              }
+            }
+          ]
+        }
+      };
+    }
+  }
+];
+function insertTemplate(currentData, template, insertIndex = -1) {
+  const templateData = template.getData();
+  const newContent = [...currentData.content];
+  const contentToInsert = templateData.content || [];
+  if (insertIndex === -1) {
+    newContent.push(...contentToInsert);
+  } else {
+    newContent.splice(insertIndex, 0, ...contentToInsert);
+  }
+  const newZones = {
+    ...currentData.zones,
+    ...templateData.zones
+  };
+  return {
+    ...currentData,
+    content: newContent,
+    zones: newZones
+  };
+}
+
+// components/editor/TemplatesList.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TemplatesList() {
+  const { appState, dispatch } = usePuck();
+  const handleInsertTemplate = (templateIndex) => {
+    const template = templates[templateIndex];
+    const newData = insertTemplate(appState.data, template);
+    dispatch({
+      type: "setData",
+      data: newData
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 text-xs font-medium text-gray-500 uppercase", children: [
+      /* @__PURE__ */ jsx(LayoutTemplate, { className: "size-3" }),
+      "Templates"
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: templates.map((template, index) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "h-auto justify-start px-3 py-2",
+        onClick: () => handleInsertTemplate(index),
+        children: /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium", children: template.name }),
+          /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: template.description })
+        ] })
+      },
+      template.name
+    )) })
+  ] });
+}
+export {
+  BorderRadiusField,
+  ColorPickerField,
+  DEFAULT_THEME,
+  EntriesProvider,
+  EntryBoundTextField,
+  ResponsiveToggleField,
+  ShadowField,
+  SpacingSliderField,
+  TemplatesList,
+  ThemeProvider,
+  ThemeableColorField,
+  TypographyField,
+  allColorPresets,
+  borderRadiusScale,
+  createBorderRadiusField,
+  createColorField,
+  createEntryBoundTextField,
+  createResponsiveField,
+  createShadowField,
+  createSpacingField,
+  createThemeableColorField,
+  createTypographyField,
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  getBorderRadiusCSS,
+  getClosestBorderRadiusValue,
+  getClosestSpacingValue,
+  getFontSizeCSS,
+  getShadowCSS,
+  neutralColors,
+  shadowPresets,
+  spacingScale,
+  templates,
+  useEntries,
+  useTheme
+};