dune-react 0.0.20 → 0.0.22

package/dist/components/puck-core/core/styles.d.ts

@@ -15,7 +15,7 @@
  *   4. 工厂函数         — createStylesField / createStylesDefaults
  *   5. 各分类预设       — Banner / Hero / CTA … 每类导出 Interface + Field + Defaults 三件套
  */
-import type { SectionStyle, OverlayStyle } from "../../puck-base/container";
+import type { SectionStyle, OverlayStyle } from "@/components/puck-base/container";
 export type PaddingLevel = "none" | "small" | "medium" | "large";
 export type { SectionStyle, OverlayStyle };
 /** 所有 section 通用的基础样式 */
@@ -370,6 +370,28 @@ export declare function createStylesField<T extends Record<string, unknown> = Re
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -470,6 +492,28 @@ export declare const bannerStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -564,6 +608,28 @@ export declare const heroStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -657,6 +723,28 @@ export declare const ctaStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -750,6 +838,28 @@ export declare const featureStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -843,6 +953,28 @@ export declare const faqStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -936,6 +1068,28 @@ export declare const galleryStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -1029,6 +1183,28 @@ export declare const testimonialStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -1122,6 +1298,28 @@ export declare const showcaseStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -1215,6 +1413,28 @@ export declare const textStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -1308,6 +1528,28 @@ export declare const contactStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -1399,6 +1641,28 @@ export declare const locationStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -1494,6 +1758,28 @@ export declare const footerStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -1584,6 +1870,28 @@ export declare const headerStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -1674,6 +1982,28 @@ export declare const metricsStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -1764,6 +2094,28 @@ export declare const pricingStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";
@@ -1854,6 +2206,28 @@ export declare const teamStylesField: {
     type: "object";
     label: string;
     objectFields: {
+        className: {
+            readonly type: "text";
+            readonly label: "Class Name";
+            readonly ai: {
+                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+            };
+        };
+        style: {
+            readonly type: "object";
+            readonly label: "Style";
+            readonly objectFields: {};
+            readonly ai: {
+                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+            };
+        };
+        css: {
+            readonly type: "textarea";
+            readonly label: "Custom CSS";
+            readonly ai: {
+                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+            };
+        };
         sectionStyle: {
             readonly type: "select";
             readonly label: "Section Style";

package/dist/components/{puck-base → puck-core}/core/styles.js

@@ -1,3 +1,4 @@
+import { sectionWrapperFields } from "../section-wrapper.js";
 const paddingLevel = {
   type: "select",
   options: [
@@ -72,7 +73,8 @@ function createStylesField(extraFields) {
     label: "Styles",
     objectFields: {
       ...sectionBaseStyleFields,
-      ...extraFields
+      ...extraFields,
+      ...sectionWrapperFields
     }
   };
 }

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

@@ -4,7 +4,7 @@ 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 { useEditorContext } from "./context/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) {
@@ -68,7 +68,18 @@ function withEditable(Component, config) {
       [props, handleSave]
     );
     if (isBlock) {
-      return /* @__PURE__ */ jsxs("span", { ref: wrapperRef, className: "group relative block h-full w-full", children: [
+      const imgClass = String(props.className || "");
+      const isAbsoluteChild = /\babsolute\b/.test(imgClass);
+      const hasExplicitSize = /\bsize-\d/.test(imgClass) || /\b[wh]-\d+\b/.test(imgClass) && !/\b[wh]-full\b/.test(imgClass);
+      let wrapperClassName;
+      if (isAbsoluteChild) {
+        wrapperClassName = "group block h-full w-full";
+      } else if (hasExplicitSize) {
+        wrapperClassName = "group relative inline-block";
+      } else {
+        wrapperClassName = "group relative block";
+      }
+      return /* @__PURE__ */ jsxs("span", { ref: wrapperRef, className: wrapperClassName, children: [
         /* @__PURE__ */ jsx(Component, { ...props }),
         /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-60 flex items-center justify-center", children: /* @__PURE__ */ jsx(
           "span",

package/dist/components/puck-core/fields/action-field.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useCallback, memo } from "react";
+import { memo, useCallback } from "react";
 import { Input } from "../../shadcn/input.js";
 import { Label } from "../../shadcn/label.js";
 import { Tabs, TabsList, TabsTrigger } from "../../shadcn/tabs.js";
 import { LinkIcon, XIcon, GlobeIcon } from "lucide-react";
-import { useEditorContext } from "../editor-context.js";
+import { useEditorContext } from "../core/context/editor-context.js";
 const ACTION_TYPE_OPTIONS = [
   { label: "Page Link", value: "page" },
   { label: "External Link", value: "external" },

package/dist/components/{puck-base → puck-core/fields}/image-upload-field.js

@@ -2,10 +2,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { X, Loader2, UploadCloud, ImageIcon } from "lucide-react";
-import { cn } from "../../utils/css-utils.js";
-import { Button } from "../shadcn/button.js";
-import { Input } from "../shadcn/input.js";
-import useUpload from "./use-upload.js";
+import { cn } from "../../../utils/css-utils.js";
+import { Button } from "../../shadcn/button.js";
+import { Input } from "../../shadcn/input.js";
+import useUpload from "../use-upload.js";
 function ImageUploadField({
   name,
   value,

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

@@ -4,7 +4,7 @@ import { memo, useState, useRef, useEffect, useCallback } from "react";
 import { Input } from "../../shadcn/input.js";
 import { Label } from "../../shadcn/label.js";
 import { Loader2, Search, X, MapPin } from "lucide-react";
-import { useEditorContext } from "../editor-context.js";
+import { useEditorContext } from "../core/context/editor-context.js";
 let googleLoadPromise = null;
 function loadGooglePlaces(apiKey) {
   var _a, _b;

package/dist/components/puck-core/index.d.ts

@@ -6,6 +6,8 @@ export { findComponentById, getRandomAdjective } from "./core/utils";
 export { ErrorBoundary } from "./error-boundary";
 export { InlineEditable } from "./inline-editable";
 export { usePuckDispatch, usePuckAppState, usePuckHistory, usePuckConfig, usePuckGetSelectorForId, type PuckComponentInfo, } from "./core/hooks";
-export { EditorContextProvider, useEditorContext } from "./editor-context";
+export { SectionWrapper, type SectionWrapperProps } from "./section-wrapper";
+export { EditorContextProvider, useEditorContext } from "./core/context/editor-context";
+export { SectionIdProvider, useSectionId } from "./core/context/section-id-context";
 export { default as useUpload, type UploadFileItem, type UploadStatus, type UseUploadOptions } from "./use-upload";
 export { icon, action, actionDefaults, button, buttons, badge, image, images, padding, paddingDefaults, paddingLevel, heading, description, features, contentFields, contentFieldsWithFeatures, card, cards, field, fieldDefaults, form, formDefaults, getPlaceholderImageUrl, image16x9Placeholder, image1x1Placeholder, image9x16Placeholder, sectionStyle, sectionOverlay, backgroundColor, backgroundImage, } from "./core/fields";

package/dist/components/{puck-base → puck-core}/inline-editable.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { createElement, useRef, useEffect, useCallback } from "react";
 import { registerOverlayPortal } from "@puckeditor/core";
-import { useEditorContext } from "./editor-context.js";
+import { useEditorContext } from "./core/context/editor-context.js";
 import { usePuckDispatch } from "./core/hooks.js";
 import set from "../../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/set.js";
 import { findComponentById } from "./core/utils.js";

package/dist/components/puck-core/section-wrapper.d.ts

@@ -1,19 +1,33 @@
 import { type CSSProperties, type ReactNode } from "react";
-/**
- * SectionWrapper - 通用 Section 样式容器
- *
- * 包裹任意 section 组件，提供三层样式自定义能力：
- *
- * 1. className - Tailwind 快捷样式
- * 2. style - 内联样式，适用于动态值、CSS 变量、backgroundImage 等
- * 3. css - 原生 CSS 字符串，支持选择器、伪类、嵌套规则
- *    用 & 代表当前 section，会自动替换为 scoped ID，样式不会污染其他区块
- */
-interface SectionWrapperProps {
+export interface SectionWrapperProps extends React.HTMLAttributes<HTMLElement> {
     className?: string;
     style?: CSSProperties;
     css?: string;
     children: ReactNode;
 }
-export declare function SectionWrapper({ className, style, css, children, }: SectionWrapperProps): import("react/jsx-runtime").JSX.Element;
-export {};
+/** Puck field definitions for SectionWrapper styling props */
+export declare const sectionWrapperFields: {
+    readonly className: {
+        readonly type: "text";
+        readonly label: "Class Name";
+        readonly ai: {
+            readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+        };
+    };
+    readonly style: {
+        readonly type: "object";
+        readonly label: "Style";
+        readonly objectFields: {};
+        readonly ai: {
+            readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+        };
+    };
+    readonly css: {
+        readonly type: "textarea";
+        readonly label: "Custom CSS";
+        readonly ai: {
+            readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+        };
+    };
+};
+export declare const SectionWrapper: import("react").ForwardRefExoticComponent<SectionWrapperProps & import("react").RefAttributes<HTMLElement>>;