dune-react 0.0.20 → 0.0.21

package/dist/components/puck-core/section-wrapper.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils/css-utils.js";
+import { useSectionId } from "./core/context/section-id-context.js";
+const sectionWrapperFields = {
+  className: {
+    type: "text",
+    label: "Class Name",
+    ai: {
+      instructions: "Additional Tailwind CSS classes to apply to the section wrapper."
+    }
+  },
+  style: {
+    type: "object",
+    label: "Style",
+    objectFields: {},
+    ai: {
+      instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }."
+    }
+  },
+  css: {
+    type: "textarea",
+    label: "Custom CSS",
+    ai: {
+      instructions: "Custom CSS rules. Use & as a placeholder for the section selector."
+    }
+  }
+};
+const SectionWrapper = forwardRef(
+  function SectionWrapper2({ className, style, css, children, ...rest }, ref) {
+    const sectionId = useSectionId();
+    return /* @__PURE__ */ jsxs("section", { ref, id: sectionId ?? void 0, className: cn("relative", className), style, ...rest, children: [
+      css && sectionId && /* @__PURE__ */ jsx(
+        "style",
+        {
+          dangerouslySetInnerHTML: {
+            __html: css.replaceAll("&", `#${sectionId}`)
+          }
+        }
+      ),
+      children
+    ] });
+  }
+);
+export {
+  SectionWrapper,
+  sectionWrapperFields
+};

package/dist/hooks/use-scroll-container.d.ts

@@ -0,0 +1,18 @@
+import { type RefObject } from "react";
+/**
+ * 自动查找目标元素最近的可滚动祖先，返回一个 ref 供 framer-motion useScroll 的 container 使用。
+ *
+ * 解决：在 Puck 编辑器 iframe 中，滚动发生在 iframe 内部容器（而非 window），
+ * useScroll({ target }) 默认找不到正确的滚动容器。
+ *
+ * @returns [containerRef, ready] — ready 为 true 时 containerRef 已就绪
+ *
+ * @example
+ * const targetRef = useRef(null);
+ * const [containerRef, ready] = useScrollContainer(targetRef);
+ * const { scrollYProgress } = useScroll({
+ *   target: targetRef,
+ *   container: containerRef,
+ * });
+ */
+export declare function useScrollContainer<T extends HTMLElement>(targetRef: RefObject<T | null>): [RefObject<HTMLElement | null>, boolean];

package/dist/hooks/use-scroll-container.js

@@ -0,0 +1,25 @@
+import { useRef, useState, useLayoutEffect } from "react";
+function useScrollContainer(targetRef) {
+  const containerRef = useRef(null);
+  const [ready, setReady] = useState(false);
+  useLayoutEffect(() => {
+    const el = targetRef.current;
+    if (!el) return;
+    let ancestor = el.parentElement;
+    while (ancestor && ancestor !== document.documentElement) {
+      const { overflowY } = getComputedStyle(ancestor);
+      if (overflowY === "auto" || overflowY === "scroll") {
+        containerRef.current = ancestor;
+        setReady(true);
+        return;
+      }
+      ancestor = ancestor.parentElement;
+    }
+    containerRef.current = null;
+    setReady(true);
+  }, [targetRef]);
+  return [containerRef, ready];
+}
+export {
+  useScrollContainer
+};

package/dist/index.js

@@ -141,7 +141,7 @@ import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, Di
 import { DirectionProvider, useDirection } from "@base-ui/react/direction-provider";
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from "./components/shadcn/drawer.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/shadcn/dropdown-menu.js";
-import { EditorContextProvider, useEditorContext } from "./components/puck-base/editor-context.js";
+import { EditorContextProvider, useEditorContext } from "./components/puck-core/core/context/editor-context.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./components/shadcn/empty.js";
 import { ErrorBoundary } from "./components/puck-base/error-boundary.js";
 import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./components/shadcn/field.js";
@@ -167,6 +167,7 @@ import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValu
 import { RadioGroup, RadioGroupItem } from "./components/shadcn/radio-group.js";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./components/shadcn/resizable.js";
 import { ScrollArea, ScrollBar } from "./components/shadcn/scroll-area.js";
+import { SectionIdProvider, useSectionId } from "./components/puck-core/core/context/section-id-context.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/shadcn/select.js";
 import { Separator } from "./components/shadcn/separator.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/shadcn/sheet.js";
@@ -543,6 +544,7 @@ export {
   default67 as ScrollParallaxTextConf,
   default68 as ScrollZoomHeroConf,
   SectionActionFields,
+  SectionIdProvider,
   Select,
   SelectContent,
   SelectGroup,
@@ -729,6 +731,7 @@ export {
   usePuckDispatch,
   usePuckGetSelectorForId,
   usePuckHistory,
+  useSectionId,
   useSidebar,
   default109 as useUpload,
   withEditable

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dune-react",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "license": "MIT",
   "type": "module",
   "scripts": {

package/dist/components/puck-core/editor-context.d.ts

@@ -1,25 +0,0 @@
-import { type RefObject } from "react";
-export type SitePage = {
-    /** 页面 slug，如 "about"、"pricing"，用作路由值 */
-    slug: string;
-    /** 页面显示名，如 "关于我们"、"定价" */
-    label: string;
-};
-type EditorContextValue = {
-    openFieldsPanel: (componentId: string, componentType: string) => void;
-    openAddSection: (index: number, zone: string) => void;
-    isEditor: boolean;
-    toolbarPortalRef: RefObject<HTMLDivElement | null> | null;
-    fetchLibraryImages?: () => Promise<string[]>;
-    /** 站点 ID，用于表单提交等业务接口 */
-    siteId?: string;
-    /** 后台 API 域名，如 https://api.example.com */
-    domain?: string;
-    /** 站内可选页面列表，用于 url 字段快捷选择 */
-    sitePages?: SitePage[];
-    /** Google Maps API Key，用于 LocationField 地址搜索 */
-    googleMapsApiKey?: string;
-};
-export declare const EditorContextProvider: import("react").Provider<EditorContextValue>;
-export declare const useEditorContext: () => EditorContextValue;
-export {};

package/dist/components/puck-core/editor-context.js

@@ -1,15 +0,0 @@
-"use client";
-import { useContext, createContext } from "react";
-const EditorContext = createContext({
-  openFieldsPanel: () => {
-  },
-  openAddSection: () => {
-  },
-  isEditor: false,
-  toolbarPortalRef: null
-});
-EditorContext.Provider;
-const useEditorContext = () => useContext(EditorContext);
-export {
-  useEditorContext
-};