dune-react 0.0.10 → 0.0.12

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

@@ -6,23 +6,12 @@ const paddingLevel = {
     { label: "medium", value: "medium" },
     { label: "large", value: "large" }
   ],
-  ai: {
-    instructions: "Never select none as an option"
-  }
+  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"
+  objectFields: { top: paddingLevel, bottom: paddingLevel },
+  ai: { exclude: true }
 };
 const sectionStyle = {
   type: "select",
@@ -38,19 +27,6 @@ const sectionStyle = {
     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",
@@ -66,12 +42,28 @@ const backgroundImage = {
     stream: false
   }
 };
+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 sectionBaseStyleFields = {
   sectionStyle,
   backgroundColor,
   padding
 };
+const paddingDefaults = { top: "medium", bottom: "medium" };
 const sectionBaseStyleDefaults = {
+  sectionStyle: "default",
+  backgroundColor: "",
   padding: paddingDefaults
 };
 function createStylesField(extraFields) {
@@ -90,11 +82,8 @@ function createStylesDefaults(extraDefaults) {
     ...extraDefaults
   };
 }
-const bannerExtraFields = {
-  textColor: {
-    type: "text",
-    label: "Text Color"
-  },
+const bannerStylesField = createStylesField({
+  textColor: { type: "text", label: "Text Color" },
   align: {
     type: "radio",
     options: [
@@ -110,10 +99,9 @@ const bannerExtraFields = {
       { label: "Default", value: "default" }
     ]
   }
-};
-const bannerStylesField = createStylesField(bannerExtraFields);
+});
 const bannerStylesDefaults = createStylesDefaults();
-const heroExtraFields = {
+createStylesField({
   backgroundImage,
   overlay: sectionOverlay,
   align: {
@@ -132,10 +120,9 @@ const heroExtraFields = {
       { label: "Full", value: "full" }
     ]
   }
-};
-const heroStylesField = createStylesField(heroExtraFields);
+});
 const heroStylesDefaults = createStylesDefaults();
-const ctaExtraFields = {
+createStylesField({
   layout: {
     type: "radio",
     label: "Layout",
@@ -144,10 +131,9 @@ const ctaExtraFields = {
       { label: "Full Bleed", value: "full-bleed" }
     ]
   }
-};
-createStylesField(ctaExtraFields);
+});
 createStylesDefaults();
-const featureExtraFields = {
+createStylesField({
   columns: {
     type: "select",
     label: "Columns",
@@ -157,10 +143,9 @@ const featureExtraFields = {
       { label: "4", value: 4 }
     ]
   }
-};
-createStylesField(featureExtraFields);
+});
 createStylesDefaults();
-const faqExtraFields = {
+createStylesField({
   layout: {
     type: "radio",
     label: "Layout",
@@ -169,10 +154,9 @@ const faqExtraFields = {
       { label: "Two Columns", value: "two-col" }
     ]
   }
-};
-createStylesField(faqExtraFields);
+});
 createStylesDefaults();
-const galleryExtraFields = {
+createStylesField({
   gap: {
     type: "select",
     label: "Gap",
@@ -182,10 +166,9 @@ const galleryExtraFields = {
       { label: "Large", value: "lg" }
     ]
   }
-};
-createStylesField(galleryExtraFields);
+});
 createStylesDefaults();
-const testimonialExtraFields = {
+createStylesField({
   layout: {
     type: "radio",
     label: "Layout",
@@ -194,12 +177,9 @@ const testimonialExtraFields = {
       { label: "Quote", value: "quote" }
     ]
   }
-};
-createStylesField(
-  testimonialExtraFields
-);
+});
 createStylesDefaults();
-const showcaseExtraFields = {
+createStylesField({
   layout: {
     type: "select",
     label: "Layout",
@@ -209,10 +189,9 @@ const showcaseExtraFields = {
       { label: "Numbered", value: "numbered" }
     ]
   }
-};
-createStylesField(showcaseExtraFields);
+});
 createStylesDefaults();
-const textExtraFields = {
+createStylesField({
   maxWidth: {
     type: "select",
     label: "Max Width",
@@ -223,10 +202,9 @@ const textExtraFields = {
       { label: "Full", value: "full" }
     ]
   }
-};
-createStylesField(textExtraFields);
+});
 createStylesDefaults();
-const contactExtraFields = {
+createStylesField({
   panelStyle: {
     type: "select",
     label: "Panel Style",
@@ -236,26 +214,13 @@ const contactExtraFields = {
       { 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);
+createStylesField({
+  mapHeight: { type: "number", label: "Map Height", min: 200, max: 800 },
+  mapFilter: { type: "text", label: "Map Filter (CSS)" },
+  mapTintColor: { type: "text", label: "Map Tint Color" }
+});
 createStylesDefaults();
 createStylesField();
 createStylesDefaults();
@@ -275,7 +240,6 @@ export {
   createStylesDefaults,
   createStylesField,
   heroStylesDefaults,
-  heroStylesField,
   padding,
   paddingDefaults,
   paddingLevel,

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

@@ -4,16 +4,11 @@ interface EditableConfig {
     fields: Record<string, any>;
 }
 /**
- * HOC: 让任意组件在编辑模式下可点击编辑
+ * HOC: wraps any component to be inline-editable in Puck editor mode.
  *
- * 工作原理：
- * 1. 通过 props 特征值深搜 appState.data，找到 componentId + propPath
- * 2. 编辑模式下渲染原组件 + hover overlay
- * 3. 点击打开 Dialog，传递 onSave 回调
- * 4. 保存时用 dispatch 更新 Puck data
- *
- * Puck hooks (usePuckDispatch / usePuckAppState) 仅在 EditableInner 中调用，
- * 确保非编辑模式（如 Storybook / 前台渲染）不会触发 "usePuck must be used inside <Puck>" 错误。
+ * Location strategy:
+ *   1. componentId  — read from the nearest `[data-puck-component]` ancestor in the DOM.
+ *   2. propPath     — search only within that single component's props (narrow scope).
  */
 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

@@ -1,12 +1,17 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useEffect, useMemo, useCallback } from "react";
+import { useRef, useEffect, useCallback } from "react";
 import { registerOverlayPortal } from "@puckeditor/core";
 import { usePuckDispatch, usePuckAppState } from "./hooks.js";
 import { Pencil } from "lucide-react";
 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 getComponentIdFromDOM(el) {
+  if (!el) return null;
+  const puckEl = el.closest("[data-puck-component]");
+  return (puckEl == null ? void 0 : puckEl.getAttribute("data-puck-component")) ?? null;
+}
 function withEditable(Component, config) {
   function EditableInner(props) {
     const dispatch = usePuckDispatch();
@@ -17,29 +22,36 @@ function withEditable(Component, config) {
       if (!wrapperRef.current) return;
       return registerOverlayPortal(wrapperRef.current, { disableDrag: true });
     }, []);
-    const location = useMemo(() => {
-      if (!(appState == null ? void 0 : appState.data)) return null;
-      return findPropsLocation(appState.data, props, config.fields);
+    const getLocation = useCallback(() => {
+      const componentId = getComponentIdFromDOM(wrapperRef.current);
+      if (!componentId || !(appState == null ? void 0 : appState.data)) return null;
+      const component = findComponentById(appState.data, componentId);
+      if (!component) return null;
+      const propPath = findPropPath(component.props, props, config.fields);
+      if (propPath === null) return null;
+      return { componentId, propPath };
     }, [appState == null ? void 0 : appState.data, props]);
     const handleSave = useCallback(
       (updated) => {
+        const location = getLocation();
         if (!location) return;
         dispatch({
           type: "setData",
           data: (prevData) => {
             const newData = JSON.parse(JSON.stringify(prevData));
-            const { componentId, propPath } = location;
-            const component = findComponentById(newData, componentId);
-            if (!component) return prevData;
+            const id = getComponentIdFromDOM(wrapperRef.current);
+            console.log(id, "ididid");
+            const comp = findComponentById(newData, location.componentId);
+            if (!comp) return prevData;
             for (const [key, value] of Object.entries(updated)) {
-              const fullPath = propPath ? `${propPath}.${key}` : key;
-              set(component.props, fullPath, value);
+              const fullPath = location.propPath ? `${location.propPath}.${key}` : key;
+              set(comp.props, fullPath, value);
             }
             return newData;
           }
         });
       },
-      [location, dispatch]
+      [getLocation, dispatch]
     );
     const handleEdit = useCallback(
       (e) => {
@@ -78,82 +90,51 @@ function withEditable(Component, config) {
     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
-    );
-    if (result) return result;
-  }
-  const zones = data.zones && typeof data.zones === "object" ? data.zones : {};
+function findComponentById(data, componentId) {
+  const content = Array.isArray(data == null ? void 0 : data.content) ? data.content : [];
+  const contentMatch = content.find((c) => {
+    var _a;
+    return ((_a = c == null ? void 0 : c.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] : [];
-    for (const component of zoneComponents) {
-      const result = searchInObject(
-        component.props,
-        targetProps,
-        fields,
-        component.props.id
-      );
-      if (result) return result;
-    }
+    const zoneMatch = zoneComponents.find(
+      (c) => {
+        var _a;
+        return ((_a = c == null ? void 0 : c.props) == null ? void 0 : _a.id) === componentId;
+      }
+    );
+    if (zoneMatch) return zoneMatch;
   }
   return null;
 }
-function searchInObject(obj, targetProps, fields, componentId, currentPath = "") {
+function findPropPath(obj, targetProps, fields, currentPath = "") {
   if (!obj || typeof obj !== "object") return null;
   if (isMatchingProps(obj, targetProps, fields)) {
-    return { componentId, propPath: currentPath };
+    return currentPath;
   }
   if (Array.isArray(obj)) {
     for (let i = 0; i < obj.length; i++) {
-      const result = searchInObject(
+      const result = findPropPath(
         obj[i],
         targetProps,
         fields,
-        componentId,
         currentPath ? `${currentPath}[${i}]` : `[${i}]`
       );
-      if (result) return result;
+      if (result !== null) return result;
     }
     return null;
   }
   for (const key of Object.keys(obj)) {
-    const result = searchInObject(
+    const result = findPropPath(
       obj[key],
       targetProps,
       fields,
-      componentId,
       currentPath ? `${currentPath}.${key}` : key
     );
-    if (result) return result;
-  }
-  return null;
-}
-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;
-    }
-  );
-  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;
-      }
-    );
-    if (zoneMatch) return zoneMatch;
+    if (result !== null) return result;
   }
   return null;
 }

package/dist/components/puck-base/fields/action-field.d.ts

@@ -0,0 +1,30 @@
+import { Action, ActionType } from "../core/types";
+export interface ActionTypeFieldProps {
+    /** 表单字段名前缀，会拼到各子 input 的 name 上 */
+    name: string;
+    /** 当前完整的 Action 对象（子组件只读写与自己 type 相关的字段） */
+    value: Action;
+    /** 合并局部 patch 到 Action，由父组件负责与完整 state 合并 */
+    onChange: (patch: Partial<Action>) => void;
+}
+/** 完整 Action 编辑器（含类型切换 + 子字段） */
+interface ActionFieldProps {
+    name: string;
+    value: Action | undefined;
+    /** 传出合并后的完整 Action */
+    onChange: (value: Action) => void;
+}
+/** 类型 Tab 的展示文案与值（可在外部自定义 UI 时复用） */
+export declare const ACTION_TYPE_OPTIONS: {
+    label: string;
+    value: ActionType;
+}[];
+export declare const PageActionFields: import("react").NamedExoticComponent<ActionTypeFieldProps>;
+export declare const ExternalActionFields: import("react").NamedExoticComponent<ActionTypeFieldProps>;
+export declare const EmailActionFields: import("react").NamedExoticComponent<ActionTypeFieldProps>;
+export declare const PhoneActionFields: import("react").NamedExoticComponent<ActionTypeFieldProps>;
+export declare const SectionActionFields: import("react").NamedExoticComponent<ActionTypeFieldProps>;
+export declare const DownloadActionFields: import("react").NamedExoticComponent<ActionTypeFieldProps>;
+export declare const ACTION_TYPE_FIELD_MAP: Partial<Record<ActionType, React.ComponentType<ActionTypeFieldProps>>>;
+export declare function ActionField({ name, value, onChange }: ActionFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};