dune-react 0.0.9 → 0.0.11

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

@@ -0,0 +1,250 @@
+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 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 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 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) {
+  return {
+    type: "object",
+    label: "Styles",
+    objectFields: {
+      ...sectionBaseStyleFields,
+      ...extraFields
+    }
+  };
+}
+function createStylesDefaults(extraDefaults) {
+  return {
+    ...sectionBaseStyleDefaults,
+    ...extraDefaults
+  };
+}
+const bannerStylesField = createStylesField({
+  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 bannerStylesDefaults = createStylesDefaults();
+createStylesField({
+  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 heroStylesDefaults = createStylesDefaults();
+createStylesField({
+  layout: {
+    type: "radio",
+    label: "Layout",
+    options: [
+      { label: "Contained", value: "contained" },
+      { label: "Full Bleed", value: "full-bleed" }
+    ]
+  }
+});
+createStylesDefaults();
+createStylesField({
+  columns: {
+    type: "select",
+    label: "Columns",
+    options: [
+      { label: "2", value: 2 },
+      { label: "3", value: 3 },
+      { label: "4", value: 4 }
+    ]
+  }
+});
+createStylesDefaults();
+createStylesField({
+  layout: {
+    type: "radio",
+    label: "Layout",
+    options: [
+      { label: "Single Column", value: "single-col" },
+      { label: "Two Columns", value: "two-col" }
+    ]
+  }
+});
+createStylesDefaults();
+createStylesField({
+  gap: {
+    type: "select",
+    label: "Gap",
+    options: [
+      { label: "Small", value: "sm" },
+      { label: "Medium", value: "md" },
+      { label: "Large", value: "lg" }
+    ]
+  }
+});
+createStylesDefaults();
+createStylesField({
+  layout: {
+    type: "radio",
+    label: "Layout",
+    options: [
+      { label: "Cards", value: "cards" },
+      { label: "Quote", value: "quote" }
+    ]
+  }
+});
+createStylesDefaults();
+createStylesField({
+  layout: {
+    type: "select",
+    label: "Layout",
+    options: [
+      { label: "Horizontal", value: "horizontal" },
+      { label: "Vertical", value: "vertical" },
+      { label: "Numbered", value: "numbered" }
+    ]
+  }
+});
+createStylesDefaults();
+createStylesField({
+  maxWidth: {
+    type: "select",
+    label: "Max Width",
+    options: [
+      { label: "Small", value: "sm" },
+      { label: "Medium", value: "md" },
+      { label: "Large", value: "lg" },
+      { label: "Full", value: "full" }
+    ]
+  }
+});
+createStylesDefaults();
+createStylesField({
+  panelStyle: {
+    type: "select",
+    label: "Panel Style",
+    options: [
+      { label: "Default", value: "default" },
+      { label: "Card", value: "card" },
+      { label: "Flat", value: "flat" }
+    ]
+  }
+});
+createStylesDefaults();
+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();
+createStylesField();
+createStylesDefaults();
+createStylesField();
+createStylesDefaults();
+createStylesField();
+createStylesDefaults();
+createStylesField();
+createStylesDefaults();
+export {
+  backgroundColor,
+  backgroundImage,
+  bannerStylesDefaults,
+  bannerStylesField,
+  createStylesDefaults,
+  createStylesField,
+  heroStylesDefaults,
+  padding,
+  paddingDefaults,
+  paddingLevel,
+  sectionBaseStyleDefaults,
+  sectionBaseStyleFields,
+  sectionOverlay,
+  sectionStyle
+};

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

@@ -1,16 +1,14 @@
-import { type ComponentType } from 'react';
+import { type ComponentType } from "react";
 interface EditableConfig {
     type: string;
     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
+ * 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,46 +1,57 @@
 "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) {
-  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;
-      return findPropsLocation(appState.data, props, config.fields);
-    }, [isEditorMode, appState == null ? void 0 : appState.data, props]);
+    }, []);
+    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) => {
@@ -52,84 +63,78 @@ 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);
-    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>;