dune-react 0.0.9 → 0.0.10

package/dist/components/puck-base/core/styles.js

@@ -0,0 +1,286 @@
+const paddingLevel = {
+  type: "select",
+  options: [
+    { label: "none", value: "none" },
+    { label: "small", value: "small" },
+    { label: "medium", value: "medium" },
+    { label: "large", value: "large" }
+  ],
+  ai: {
+    instructions: "Never select none as an option"
+  }
+};
+const padding = {
+  type: "object",
+  objectFields: {
+    top: paddingLevel,
+    bottom: paddingLevel
+  },
+  ai: {
+    exclude: true
+  }
+};
+const paddingDefaults = {
+  top: "medium",
+  bottom: "medium"
+};
+const sectionStyle = {
+  type: "select",
+  label: "Section Style",
+  options: [
+    { label: "Default", value: "default" },
+    { label: "Dark", value: "dark" },
+    { label: "Muted", value: "muted" },
+    { label: "Inverted", value: "inverted" },
+    { label: "Custom", value: "custom" }
+  ],
+  ai: {
+    instructions: "Match the section's background tone: use 'dark' for dark/black backgrounds, 'muted' for gray/subtle backgrounds, 'inverted' for full contrast reversal. Default for standard light backgrounds."
+  }
+};
+const sectionOverlay = {
+  type: "select",
+  label: "Overlay",
+  options: [
+    { label: "None", value: "none" },
+    { label: "Gradient Top", value: "gradient-top" },
+    { label: "Gradient Bottom", value: "gradient-bottom" },
+    { label: "Noise", value: "noise" }
+  ],
+  ai: {
+    instructions: "Use gradient overlays when the section has a background image that needs text contrast. Use noise for subtle texture."
+  }
+};
+const backgroundColor = {
+  type: "text",
+  label: "Background Color",
+  ai: {
+    instructions: "Set a custom background color in oklch format (e.g. 'oklch(0.2 0.05 260)'). Only use when sectionStyle is 'custom'."
+  }
+};
+const backgroundImage = {
+  type: "text",
+  label: "Background Image URL",
+  ai: {
+    instructions: "URL for a full-width background image behind the section.",
+    stream: false
+  }
+};
+const sectionBaseStyleFields = {
+  sectionStyle,
+  backgroundColor,
+  padding
+};
+const sectionBaseStyleDefaults = {
+  padding: paddingDefaults
+};
+function createStylesField(extraFields) {
+  return {
+    type: "object",
+    label: "Styles",
+    objectFields: {
+      ...sectionBaseStyleFields,
+      ...extraFields
+    }
+  };
+}
+function createStylesDefaults(extraDefaults) {
+  return {
+    ...sectionBaseStyleDefaults,
+    ...extraDefaults
+  };
+}
+const bannerExtraFields = {
+  textColor: {
+    type: "text",
+    label: "Text Color"
+  },
+  align: {
+    type: "radio",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" },
+      { label: "Right", value: "right" }
+    ]
+  },
+  size: {
+    type: "radio",
+    options: [
+      { label: "Small", value: "small" },
+      { label: "Default", value: "default" }
+    ]
+  }
+};
+const bannerStylesField = createStylesField(bannerExtraFields);
+const bannerStylesDefaults = createStylesDefaults();
+const heroExtraFields = {
+  backgroundImage,
+  overlay: sectionOverlay,
+  align: {
+    type: "radio",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" }
+    ]
+  },
+  minHeight: {
+    type: "select",
+    label: "Min Height",
+    options: [
+      { label: "Medium", value: "medium" },
+      { label: "Large", value: "large" },
+      { label: "Full", value: "full" }
+    ]
+  }
+};
+const heroStylesField = createStylesField(heroExtraFields);
+const heroStylesDefaults = createStylesDefaults();
+const ctaExtraFields = {
+  layout: {
+    type: "radio",
+    label: "Layout",
+    options: [
+      { label: "Contained", value: "contained" },
+      { label: "Full Bleed", value: "full-bleed" }
+    ]
+  }
+};
+createStylesField(ctaExtraFields);
+createStylesDefaults();
+const featureExtraFields = {
+  columns: {
+    type: "select",
+    label: "Columns",
+    options: [
+      { label: "2", value: 2 },
+      { label: "3", value: 3 },
+      { label: "4", value: 4 }
+    ]
+  }
+};
+createStylesField(featureExtraFields);
+createStylesDefaults();
+const faqExtraFields = {
+  layout: {
+    type: "radio",
+    label: "Layout",
+    options: [
+      { label: "Single Column", value: "single-col" },
+      { label: "Two Columns", value: "two-col" }
+    ]
+  }
+};
+createStylesField(faqExtraFields);
+createStylesDefaults();
+const galleryExtraFields = {
+  gap: {
+    type: "select",
+    label: "Gap",
+    options: [
+      { label: "Small", value: "sm" },
+      { label: "Medium", value: "md" },
+      { label: "Large", value: "lg" }
+    ]
+  }
+};
+createStylesField(galleryExtraFields);
+createStylesDefaults();
+const testimonialExtraFields = {
+  layout: {
+    type: "radio",
+    label: "Layout",
+    options: [
+      { label: "Cards", value: "cards" },
+      { label: "Quote", value: "quote" }
+    ]
+  }
+};
+createStylesField(
+  testimonialExtraFields
+);
+createStylesDefaults();
+const showcaseExtraFields = {
+  layout: {
+    type: "select",
+    label: "Layout",
+    options: [
+      { label: "Horizontal", value: "horizontal" },
+      { label: "Vertical", value: "vertical" },
+      { label: "Numbered", value: "numbered" }
+    ]
+  }
+};
+createStylesField(showcaseExtraFields);
+createStylesDefaults();
+const textExtraFields = {
+  maxWidth: {
+    type: "select",
+    label: "Max Width",
+    options: [
+      { label: "Small", value: "sm" },
+      { label: "Medium", value: "md" },
+      { label: "Large", value: "lg" },
+      { label: "Full", value: "full" }
+    ]
+  }
+};
+createStylesField(textExtraFields);
+createStylesDefaults();
+const contactExtraFields = {
+  panelStyle: {
+    type: "select",
+    label: "Panel Style",
+    options: [
+      { label: "Default", value: "default" },
+      { label: "Card", value: "card" },
+      { label: "Flat", value: "flat" }
+    ]
+  }
+};
+createStylesField(contactExtraFields);
+createStylesDefaults();
+const locationExtraFields = {
+  mapHeight: {
+    type: "number",
+    label: "Map Height",
+    min: 200,
+    max: 800
+  },
+  mapFilter: {
+    type: "text",
+    label: "Map Filter (CSS)"
+  },
+  mapTintColor: {
+    type: "text",
+    label: "Map Tint Color"
+  }
+};
+createStylesField(locationExtraFields);
+createStylesDefaults();
+createStylesField();
+createStylesDefaults();
+createStylesField();
+createStylesDefaults();
+createStylesField();
+createStylesDefaults();
+createStylesField();
+createStylesDefaults();
+createStylesField();
+createStylesDefaults();
+export {
+  backgroundColor,
+  backgroundImage,
+  bannerStylesDefaults,
+  bannerStylesField,
+  createStylesDefaults,
+  createStylesField,
+  heroStylesDefaults,
+  heroStylesField,
+  padding,
+  paddingDefaults,
+  paddingLevel,
+  sectionBaseStyleDefaults,
+  sectionBaseStyleFields,
+  sectionOverlay,
+  sectionStyle
+};

package/dist/components/puck-base/core/with-editable.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType } from 'react';
+import { type ComponentType } from "react";
 interface EditableConfig {
     type: string;
     fields: Record<string, any>;
@@ -11,6 +11,9 @@ interface EditableConfig {
  * 2. 编辑模式下渲染原组件 + hover overlay
  * 3. 点击打开 Dialog，传递 onSave 回调
  * 4. 保存时用 dispatch 更新 Puck data
+ *
+ * Puck hooks (usePuckDispatch / usePuckAppState) 仅在 EditableInner 中调用，
+ * 确保非编辑模式（如 Storybook / 前台渲染）不会触发 "usePuck must be used inside <Puck>" 错误。
  */
 export declare function withEditable<P extends Record<string, any>>(Component: ComponentType<P>, config: EditableConfig): (props: P & {
     onEdit?: (props: P, onSave: (updated: Partial<P>) => void) => void;

package/dist/components/puck-base/core/with-editable.js

@@ -8,20 +8,19 @@ import { useEditorContext } from "../editor-context.js";
 import set from "../../../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/set.js";
 const BLOCK_LEVEL_TYPES = /* @__PURE__ */ new Set(["image"]);
 function withEditable(Component, config) {
-  return function EditableComponent(props) {
-    const { isEditor: isEditorMode } = useEditorContext();
+  function EditableInner(props) {
     const dispatch = usePuckDispatch();
     const appState = usePuckAppState();
     const wrapperRef = useRef(null);
     const isBlock = BLOCK_LEVEL_TYPES.has(config.type);
     useEffect(() => {
-      if (!isEditorMode || !wrapperRef.current) return;
+      if (!wrapperRef.current) return;
       return registerOverlayPortal(wrapperRef.current, { disableDrag: true });
-    }, [isEditorMode]);
+    }, []);
     const location = useMemo(() => {
-      if (!isEditorMode || !(appState == null ? void 0 : appState.data)) return null;
+      if (!(appState == null ? void 0 : appState.data)) return null;
       return findPropsLocation(appState.data, props, config.fields);
-    }, [isEditorMode, appState == null ? void 0 : appState.data, props]);
+    }, [appState == null ? void 0 : appState.data, props]);
     const handleSave = useCallback(
       (updated) => {
         if (!location) return;
@@ -52,34 +51,55 @@ function withEditable(Component, config) {
       },
       [props, handleSave]
     );
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref: wrapperRef,
+        className: isBlock ? "group relative block h-full w-full" : "group relative inline-flex",
+        children: [
+          /* @__PURE__ */ jsx(Component, { ...props }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              onClick: handleEdit,
+              className: "absolute inset-0 z-40 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+              children: /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-black/50 shadow-md backdrop-blur-sm", children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 text-white" }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+  return function EditableComponent(props) {
+    const { isEditor: isEditorMode } = useEditorContext();
     if (!isEditorMode) {
       return /* @__PURE__ */ jsx(Component, { ...props });
     }
-    return /* @__PURE__ */ jsxs("span", { ref: wrapperRef, className: isBlock ? "group relative block h-full w-full" : "group relative inline-flex", children: [
-      /* @__PURE__ */ jsx(Component, { ...props }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          onClick: handleEdit,
-          className: "absolute inset-0 z-40 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
-          children: /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-black/50 shadow-md backdrop-blur-sm", children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 text-white" }) })
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsx(EditableInner, { ...props });
   };
 }
 function findPropsLocation(data, targetProps, fields) {
   if (!data) return null;
   const content = Array.isArray(data.content) ? data.content : [];
   for (const component of content) {
-    const result = searchInObject(component.props, targetProps, fields, component.props.id);
+    const result = searchInObject(
+      component.props,
+      targetProps,
+      fields,
+      component.props.id
+    );
     if (result) return result;
   }
   const zones = data.zones && typeof data.zones === "object" ? data.zones : {};
   for (const zoneKey of Object.keys(zones)) {
     const zoneComponents = Array.isArray(zones[zoneKey]) ? zones[zoneKey] : [];
     for (const component of zoneComponents) {
-      const result = searchInObject(component.props, targetProps, fields, component.props.id);
+      const result = searchInObject(
+        component.props,
+        targetProps,
+        fields,
+        component.props.id
+      );
       if (result) return result;
     }
   }
@@ -117,18 +137,22 @@ function searchInObject(obj, targetProps, fields, componentId, currentPath = "")
 }
 function findComponentById(data, componentId) {
   const content = Array.isArray(data == null ? void 0 : data.content) ? data.content : [];
-  const contentMatch = content.find((component) => {
-    var _a;
-    return ((_a = component == null ? void 0 : component.props) == null ? void 0 : _a.id) === componentId;
-  });
+  const contentMatch = content.find(
+    (component) => {
+      var _a;
+      return ((_a = component == null ? void 0 : component.props) == null ? void 0 : _a.id) === componentId;
+    }
+  );
   if (contentMatch) return contentMatch;
   const zones = (data == null ? void 0 : data.zones) && typeof data.zones === "object" ? data.zones : {};
   for (const zoneKey of Object.keys(zones)) {
     const zoneComponents = Array.isArray(zones[zoneKey]) ? zones[zoneKey] : [];
-    const zoneMatch = zoneComponents.find((component) => {
-      var _a;
-      return ((_a = component == null ? void 0 : component.props) == null ? void 0 : _a.id) === componentId;
-    });
+    const zoneMatch = zoneComponents.find(
+      (component) => {
+        var _a;
+        return ((_a = component == null ? void 0 : component.props) == null ? void 0 : _a.id) === componentId;
+      }
+    );
     if (zoneMatch) return zoneMatch;
   }
   return null;

package/dist/components/puck-block/banner-sections/announcement-banner-1/announcement-banner.d.ts

@@ -1,10 +1,12 @@
 export interface AnnouncementBannerProps {
-    text: string;
-    linkText?: string;
+    items?: string[];
+    linkLabel?: string;
     linkUrl?: string;
-    backgroundColor?: string;
-    textColor?: string;
-    align?: "left" | "center" | "right";
-    size?: "small" | "default";
+    styles?: {
+        backgroundColor?: string;
+        textColor?: string;
+        align?: "left" | "center" | "right";
+        size?: "small" | "default";
+    };
 }
-export declare const AnnouncementBanner: ({ text, linkText, linkUrl, backgroundColor, textColor, align, size, }: AnnouncementBannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnnouncementBanner: ({ items, linkLabel, linkUrl, styles, }: AnnouncementBannerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/banner-sections/announcement-banner-1/announcement-banner.js

@@ -1,14 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 const AnnouncementBanner = ({
-  text,
-  linkText,
+  items = [],
+  linkLabel,
   linkUrl,
-  backgroundColor = "var(--primary)",
-  textColor,
-  align = "center",
-  size = "default"
+  styles
 }) => {
+  const normalized = items.map((v) => typeof v === "string" ? v : (v == null ? void 0 : v.text) ?? "");
+  const text = normalized[0] ?? "";
+  const backgroundColor = (styles == null ? void 0 : styles.backgroundColor) ?? "var(--primary)";
+  const textColor = styles == null ? void 0 : styles.textColor;
+  const align = (styles == null ? void 0 : styles.align) ?? "center";
+  const size = (styles == null ? void 0 : styles.size) ?? "default";
   const style = {
     ...backgroundColor ? { backgroundColor } : {},
     ...textColor ? { color: textColor } : {}
@@ -32,13 +35,13 @@ const AnnouncementBanner = ({
           }),
           children: [
             /* @__PURE__ */ jsx("span", { children: text }),
-            linkText && linkUrl ? /* @__PURE__ */ jsxs(
+            linkLabel && linkUrl ? /* @__PURE__ */ jsxs(
               "a",
               {
                 href: linkUrl,
                 className: "underline underline-offset-2 opacity-90 hover:opacity-100",
                 children: [
-                  linkText,
+                  linkLabel,
                   " →"
                 ]
               }

package/dist/components/puck-block/banner-sections/announcement-banner-1/index.js

@@ -1,47 +1,29 @@
 import { AnnouncementBanner } from "./announcement-banner.js";
+import { bannerStylesDefaults, bannerStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
-    text: { type: "text", contentEditable: true },
-    linkText: { type: "text" },
-    linkUrl: { type: "text" },
-    backgroundColor: {
-      type: "text",
-      label: "Background Color",
-      ai: {
-        instructions: "Use the exact background color from the original banner. Common examples: yellow (#FACC15), blue (#3B82F6), green (#22C55E), red (#EF4444), or any brand color. Use hex, rgb, or oklch format."
-      }
-    },
-    textColor: {
-      type: "text",
-      label: "Text Color",
-      ai: {
-        instructions: "Set text color to contrast with the background. Usually black (#000) for light backgrounds or white (#fff) for dark backgrounds."
-      }
-    },
-    align: {
-      type: "radio",
-      options: [
-        { label: "Left", value: "left" },
-        { label: "Center", value: "center" },
-        { label: "Right", value: "right" }
-      ]
+    items: {
+      type: "array",
+      max: 3,
+      getItemSummary: (item, i = 0) => (typeof item === "string" ? item : item == null ? void 0 : item.text) || `Item ${i + 1}`,
+      arrayFields: { text: { type: "text", contentEditable: true } },
+      defaultItemProps: { text: "Text" }
     },
-    size: {
-      type: "radio",
-      options: [
-        { label: "Small", value: "small" },
-        { label: "Default", value: "default" }
-      ]
-    }
+    linkLabel: { type: "text" },
+    linkUrl: { type: "text" },
+    styles: bannerStylesField
   },
   defaultProps: {
-    text: "New: Check out our latest update",
-    linkText: "Learn more",
+    items: [{ text: "New: Check out our latest update" }],
+    linkLabel: "Learn more",
     linkUrl: "#",
-    backgroundColor: "#FACC15",
-    textColor: "#000000",
-    align: "center",
-    size: "default"
+    styles: {
+      ...bannerStylesDefaults,
+      backgroundColor: "#FACC15",
+      textColor: "#000000",
+      align: "center",
+      size: "default"
+    }
   },
   render: AnnouncementBanner
 };

package/dist/components/puck-block/banner-sections/marquee-1/index.js

@@ -1,33 +1,33 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { Marquee } from "./marquee.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const marqueeStylesField = createStylesField({
+  speed: {
+    type: "radio",
+    options: [
+      { label: "Slow", value: "slow" },
+      { label: "Normal", value: "normal" },
+      { label: "Fast", value: "fast" }
+    ]
+  },
+  tone: {
+    type: "radio",
+    options: [
+      { label: "Default", value: "default" },
+      { label: "Outline", value: "outline" },
+      { label: "Muted", value: "muted" }
+    ]
+  }
+});
 const conf = {
   fields: {
     items: {
       type: "array",
       max: 10,
-      getItemSummary: (item, i = 0) => item.text || `Item ${i + 1}`,
+      getItemSummary: (item, i = 0) => (typeof item === "string" ? item : item == null ? void 0 : item.text) || `Item ${i + 1}`,
       arrayFields: { text: { type: "text" } },
       defaultItemProps: { text: "Text" }
     },
-    speed: {
-      type: "radio",
-      options: [
-        { label: "Slow", value: "slow" },
-        { label: "Normal", value: "normal" },
-        { label: "Fast", value: "fast" }
-      ]
-    },
-    variant: {
-      type: "radio",
-      options: [
-        { label: "Default", value: "default" },
-        { label: "Outline", value: "outline" },
-        { label: "Muted", value: "muted" }
-      ]
-    },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: marqueeStylesField
   },
   defaultProps: {
     items: [
@@ -36,9 +36,11 @@ const conf = {
       { text: "Performance" },
       { text: "Quality" }
     ],
-    speed: "normal",
-    variant: "default",
-    padding: paddingDefaults
+    styles: {
+      ...createStylesDefaults(),
+      speed: "normal",
+      tone: "default"
+    }
   },
   render: Marquee
 };

package/dist/components/puck-block/banner-sections/marquee-1/marquee.d.ts

@@ -1,12 +1,12 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface MarqueeProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
-    items?: Array<{
-        text: string;
-    }>;
-    speed?: "slow" | "normal" | "fast";
-    variant?: "default" | "outline" | "muted";
+    items?: string[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+        speed?: "slow" | "normal" | "fast";
+        tone?: "default" | "outline" | "muted";
+    };
 }
-export declare const Marquee: ({ padding, sectionStyle, backgroundColor, items, speed, variant, }: MarqueeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Marquee: ({ items, styles, }: MarqueeProps) => import("react/jsx-runtime").JSX.Element;