dune-react 0.0.10 → 0.0.11

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/{action-field.d.ts → fields/action-field.d.ts}

@@ -1,4 +1,4 @@
-import { Action } from "./core/types";
+import { Action } from "../core/types";
 interface ActionFieldProps {
     name: string;
     value: Action | undefined;

package/dist/components/puck-base/{action-field.js → fields/action-field.js}

@@ -1,8 +1,12 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Input } from "../shadcn/input.js";
-import { Label } from "../shadcn/label.js";
-import { Tabs, TabsList, TabsTrigger } from "../shadcn/tabs.js";
+import { memo, useCallback } from "react";
+import { Input } from "../../shadcn/input.js";
+import { Button } from "../../shadcn/button.js";
+import { Label } from "../../shadcn/label.js";
+import { Tabs, TabsList, TabsTrigger } from "../../shadcn/tabs.js";
+import { LinkIcon, XIcon, ClipboardIcon, GlobeIcon } from "lucide-react";
+import { useEditorContext } from "../editor-context.js";
 const ACTION_TYPE_OPTIONS = [
   { label: "Page Link", value: "page" },
   { label: "External Link", value: "external" },
@@ -12,6 +16,82 @@ const ACTION_TYPE_OPTIONS = [
   { label: "Download", value: "download" },
   { label: "None", value: "none" }
 ];
+const PageUrlField = memo(function PageUrlField2({
+  name,
+  value,
+  onChange
+}) {
+  const { sitePages } = useEditorContext();
+  const pages = sitePages ?? [];
+  const selectedSlug = value.startsWith("/") ? value.slice(1) : null;
+  const handlePaste = useCallback(async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      if (text) onChange(text.trim());
+    } catch {
+    }
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(Label, { children: "Page URL" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 rounded-lg border px-3 py-2", children: [
+        /* @__PURE__ */ jsx(LinkIcon, { className: "text-muted-foreground size-4 shrink-0" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            name: `${name}.pageUrl`,
+            className: "w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+            placeholder: "/about",
+            value,
+            onChange: (e) => onChange(e.target.value)
+          }
+        ),
+        value && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "text-muted-foreground hover:text-foreground shrink-0",
+            onClick: () => onChange(""),
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "shrink-0 gap-1.5",
+          onClick: handlePaste,
+          children: [
+            /* @__PURE__ */ jsx(ClipboardIcon, { className: "size-3.5" }),
+            "Paste"
+          ]
+        }
+      )
+    ] }),
+    pages.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Site pages" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: pages.map((page) => {
+        const isSelected = selectedSlug === page.slug;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: `inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors ${isSelected ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background text-foreground hover:bg-accent"}`,
+            onClick: () => onChange(isSelected ? "" : `${page.slug}`),
+            children: [
+              /* @__PURE__ */ jsx(GlobeIcon, { className: "size-3" }),
+              page.label
+            ]
+          },
+          page.slug
+        );
+      }) })
+    ] })
+  ] });
+});
 function ActionField({ name, value, onChange }) {
   const current = value ?? { type: "none" };
   const update = (patch) => {
@@ -37,19 +117,14 @@ function ActionField({ name, value, onChange }) {
         }
       )
     ] }),
-    current.type === "page" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsx(Label, { children: "Page URL" }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          name: `${name}.pageUrl`,
-          className: "h-8 text-sm",
-          value: current.pageUrl ?? "",
-          onChange: (e) => update({ pageUrl: e.target.value }),
-          placeholder: "/about"
-        }
-      )
-    ] }),
+    current.type === "page" && /* @__PURE__ */ jsx(
+      PageUrlField,
+      {
+        name,
+        value: current.pageUrl ?? "",
+        onChange: (val) => update({ pageUrl: val })
+      }
+    ),
     current.type === "external" && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
         /* @__PURE__ */ jsx(Label, { children: "External URL" }),

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

@@ -1,3 +1,2 @@
 import type { AutoFieldProps } from "./types";
-/** 按 field.type 分发控件；名为 url 且类型为 text 时固定使用 UrlField（链接 + 站内路由） */
 export declare const AutoField: import("react").NamedExoticComponent<AutoFieldProps>;