dune-react 0.0.15 → 0.0.16

package/dist/components/puck-base/button.js

@@ -4,11 +4,11 @@ import { useState, useCallback } from "react";
 import { SafeDynamicIcon } from "./safe-dynamic-icon.js";
 import { Button, buttonVariants } from "../shadcn/button.js";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "../shadcn/dialog.js";
-import { AutoField } from "./fields/auto-field.js";
 import { button } from "./core/fields.js";
 import { cn } from "../../utils/css-utils.js";
 import { resolveActionUrl } from "./core/types.js";
 import { withEditable } from "./core/with-editable.js";
+import { AutoField } from "./fields/auto-field.js";
 const BUTTON_FIELDS = button.objectFields;
 function ButtonEditDialog({
   open,

package/dist/components/puck-base/core/fields.d.ts

@@ -13,9 +13,9 @@ export declare const action: {
     render: typeof ActionField;
 };
 export declare const actionDefaults: {
-    readonly type: "external";
+    readonly type: "page";
     readonly pageUrl: "";
-    readonly externalUrl: "#";
+    readonly externalUrl: "";
     readonly openInNewTab: "false";
     readonly email: "";
     readonly subject: "";
@@ -139,9 +139,9 @@ export declare const buttons: {
     readonly defaultItemProps: {
         readonly label: "Button";
         readonly action: {
-            readonly type: "external";
+            readonly type: "page";
             readonly pageUrl: "";
-            readonly externalUrl: "#";
+            readonly externalUrl: "";
             readonly openInNewTab: "false";
             readonly email: "";
             readonly subject: "";
@@ -354,9 +354,9 @@ export declare const contentFields: {
         readonly defaultItemProps: {
             readonly label: "Button";
             readonly action: {
-                readonly type: "external";
+                readonly type: "page";
                 readonly pageUrl: "";
-                readonly externalUrl: "#";
+                readonly externalUrl: "";
                 readonly openInNewTab: "false";
                 readonly email: "";
                 readonly subject: "";
@@ -496,9 +496,9 @@ export declare const contentFieldsWithFeatures: {
         readonly defaultItemProps: {
             readonly label: "Button";
             readonly action: {
-                readonly type: "external";
+                readonly type: "page";
                 readonly pageUrl: "";
-                readonly externalUrl: "#";
+                readonly externalUrl: "";
                 readonly openInNewTab: "false";
                 readonly email: "";
                 readonly subject: "";
@@ -668,9 +668,9 @@ export declare const cards: {
         readonly button: {
             readonly label: "Button";
             readonly action: {
-                readonly type: "external";
+                readonly type: "page";
                 readonly pageUrl: "";
-                readonly externalUrl: "#";
+                readonly externalUrl: "";
                 readonly openInNewTab: "false";
                 readonly email: "";
                 readonly subject: "";

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

@@ -1,6 +1,7 @@
 import { fieldTypes } from "../field.js";
 import { ActionField } from "../fields/action-field.js";
 import { IconPickerField } from "../icon-picker-field.js";
+import { backgroundColor, backgroundImage, bannerStylesDefaults, bannerStylesField, createStylesDefaults, createStylesField, heroStylesDefaults, padding, paddingDefaults, paddingLevel, sectionBaseStyleDefaults, sectionBaseStyleFields, sectionOverlay, sectionStyle } from "./styles.js";
 const formMethods = ["get", "post", "put", "patch", "delete"];
 const icon = {
   type: "custom",
@@ -12,9 +13,9 @@ const action = {
   render: ActionField
 };
 const actionDefaults = {
-  type: "external",
+  type: "page",
   pageUrl: "",
-  externalUrl: "#",
+  externalUrl: "",
   openInNewTab: "false",
   email: "",
   subject: "",
@@ -243,13 +244,19 @@ const formDefaults = {
 export {
   action,
   actionDefaults,
+  backgroundColor,
+  backgroundImage,
   badge,
+  bannerStylesDefaults,
+  bannerStylesField,
   button,
   buttons,
   card,
   cards,
   contentFields,
   contentFieldsWithFeatures,
+  createStylesDefaults,
+  createStylesField,
   description,
   features,
   field,
@@ -258,10 +265,18 @@ export {
   formDefaults,
   getPlaceholderImageUrl,
   heading,
+  heroStylesDefaults,
   icon,
   image,
   image16x9Placeholder,
   image1x1Placeholder,
   image9x16Placeholder,
-  images
+  images,
+  padding,
+  paddingDefaults,
+  paddingLevel,
+  sectionBaseStyleDefaults,
+  sectionBaseStyleFields,
+  sectionOverlay,
+  sectionStyle
 };

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

@@ -17,11 +17,13 @@ function withEditable(Component, config) {
     const dispatch = usePuckDispatch();
     const appState = usePuckAppState();
     const wrapperRef = useRef(null);
+    const portalRef = useRef(null);
     const isBlock = BLOCK_LEVEL_TYPES.has(config.type);
     useEffect(() => {
-      if (!wrapperRef.current) return;
-      return registerOverlayPortal(wrapperRef.current, { disableDrag: true });
-    }, []);
+      const target = isBlock ? portalRef.current : wrapperRef.current;
+      if (!target) return;
+      return registerOverlayPortal(target, { disableDrag: true });
+    }, [isBlock]);
     const getLocation = useCallback(() => {
       const componentId = getComponentIdFromDOM(wrapperRef.current);
       if (!componentId || !(appState == null ? void 0 : appState.data)) return null;
@@ -53,6 +55,8 @@ function withEditable(Component, config) {
       },
       [getLocation, dispatch]
     );
+    const { previewScale = 1 } = useEditorContext();
+    const inverseScale = 1 / previewScale;
     const handleEdit = useCallback(
       (e) => {
         e.preventDefault();
@@ -63,24 +67,32 @@ 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" }) })
-            }
-          )
-        ]
-      }
-    );
+    if (isBlock) {
+      return /* @__PURE__ */ jsxs("span", { ref: wrapperRef, className: "group relative block h-full w-full", children: [
+        /* @__PURE__ */ jsx(Component, { ...props }),
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-40 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: portalRef,
+            onClick: handleEdit,
+            style: { transform: `scale(${inverseScale})`, transformOrigin: "center center" },
+            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__ */ jsxs("span", { ref: wrapperRef, className: "group relative inline-flex", children: [
+      /* @__PURE__ */ jsx(Component, { ...props }),
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-40 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100", children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          onClick: handleEdit,
+          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();

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

@@ -2,10 +2,9 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 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 { LinkIcon, XIcon, GlobeIcon } from "lucide-react";
 import { useEditorContext } from "../editor-context.js";
 const ACTION_TYPE_OPTIONS = [
   { label: "Page Link", value: "page" },
@@ -25,53 +24,30 @@ const PageActionFields = memo(function PageActionFields2({
   const pages = sitePages ?? [];
   const pageUrl = value.pageUrl ?? "";
   const selectedSlug = pageUrl.startsWith("/") ? pageUrl.slice(1) : null;
-  const handlePaste = useCallback(async () => {
-    try {
-      const text = await navigator.clipboard.readText();
-      if (text) onChange({ pageUrl: 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: pageUrl,
-            onChange: (e) => onChange({ pageUrl: e.target.value })
-          }
-        ),
-        pageUrl && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "text-muted-foreground hover:text-foreground shrink-0",
-            onClick: () => onChange({ pageUrl: "" }),
-            children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(
-        Button,
+    /* @__PURE__ */ jsx("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: pageUrl,
+          onChange: (e) => onChange({ pageUrl: e.target.value })
+        }
+      ),
+      pageUrl && /* @__PURE__ */ jsx(
+        "button",
         {
           type: "button",
-          variant: "outline",
-          size: "sm",
-          className: "shrink-0 gap-1.5",
-          onClick: handlePaste,
-          children: [
-            /* @__PURE__ */ jsx(ClipboardIcon, { className: "size-3.5" }),
-            "Paste"
-          ]
+          className: "text-muted-foreground hover:text-foreground shrink-0",
+          onClick: () => onChange({ pageUrl: "" }),
+          children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
         }
       )
-    ] }),
+    ] }) }),
     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) => {

package/dist/components/puck-base/fields/auto-field.js

@@ -1,225 +1,33 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { memo } from "react";
 import { Input } from "../../shadcn/input.js";
 import { Textarea } from "../../shadcn/textarea.js";
 import { Label } from "../../shadcn/label.js";
-import { Switch } from "../../shadcn/switch.js";
-import { Button } from "../../shadcn/button.js";
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../shadcn/select.js";
-import { Popover, PopoverTrigger, PopoverContent } from "../../shadcn/popover.js";
-import { ToggleGroup, ToggleGroupItem } from "../../shadcn/toggle-group.js";
-import { ChevronDownIcon, CheckIcon } from "lucide-react";
-const LARGE_SELECT_THRESHOLD = 200;
-const VIRTUAL_ITEM_HEIGHT = 32;
-const VIRTUAL_VIEWPORT_HEIGHT = 256;
-const VIRTUAL_OVERSCAN = 6;
-const RadioToggleField = memo(function RadioToggleField2({
-  label,
-  options,
-  value,
-  onChange
-}) {
-  const isBooleanToggle = options.length === 2 && options.some((o) => o.value === true) && options.some((o) => o.value === false);
-  if (isBooleanToggle) {
-    return /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 mb-3 flex items-center justify-between rounded-xl p-3", children: [
-      /* @__PURE__ */ jsx(Label, { children: label }),
-      /* @__PURE__ */ jsx(
-        Switch,
-        {
-          checked: !!value,
-          onCheckedChange: (checked) => onChange(checked)
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
-    /* @__PURE__ */ jsx(Label, { children: label }),
-    /* @__PURE__ */ jsx(
-      ToggleGroup,
-      {
-        type: "single",
-        value: String(value ?? ""),
-        onValueChange: (val) => {
-          if (!val) return;
-          const opt = options.find((o) => String(o.value) === val);
-          if (opt) onChange(opt.value);
-        },
-        className: "justify-start",
-        children: options.map((opt) => /* @__PURE__ */ jsx(
-          ToggleGroupItem,
-          {
-            value: String(opt.value),
-            size: "sm",
-            children: opt.label
-          },
-          String(opt.value)
-        ))
-      }
-    )
-  ] });
-});
-const ObjectField = memo(function ObjectField2({
-  field,
-  name,
-  value,
-  onChange
-}) {
-  const objectFields = field.objectFields || {};
-  const label = field.label || name;
-  const objValue = value && typeof value === "object" ? value : {};
-  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
-    /* @__PURE__ */ jsx(Label, { children: label }),
-    /* @__PURE__ */ jsx("div", { className: "rounded-lg border p-3", children: Object.entries(objectFields).map(([key, subField]) => /* @__PURE__ */ jsx(
-      AutoField,
-      {
-        field: subField,
-        name: key,
-        value: objValue[key],
-        onChange: (val) => onChange({ ...objValue, [key]: val })
-      },
-      key
-    )) })
-  ] });
-});
-const VirtualizedSelectField = memo(function VirtualizedSelectField2({
-  label,
-  options,
-  value,
-  onChange
-}) {
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState("");
-  const [scrollTop, setScrollTop] = useState(0);
-  const viewportRef = useRef(null);
-  const normalizedOptions = useMemo(
-    () => options.map((opt) => ({
-      ...opt,
-      stringValue: String(opt.value)
-    })),
-    [options]
-  );
-  const selectedString = String(value ?? "");
-  const filteredOptions = useMemo(() => {
-    const query = search.trim().toLowerCase();
-    if (!query) return normalizedOptions;
-    return normalizedOptions.filter(
-      (opt) => opt.label.toLowerCase().includes(query) || opt.stringValue.toLowerCase().includes(query)
-    );
-  }, [normalizedOptions, search]);
-  const selectedLabel = useMemo(() => {
-    const selected = normalizedOptions.find(
-      (opt) => opt.stringValue === selectedString
-    );
-    return (selected == null ? void 0 : selected.label) ?? selectedString;
-  }, [normalizedOptions, selectedString]);
-  const totalHeight = filteredOptions.length * VIRTUAL_ITEM_HEIGHT;
-  const startIndex = Math.max(
-    0,
-    Math.floor(scrollTop / VIRTUAL_ITEM_HEIGHT) - VIRTUAL_OVERSCAN
-  );
-  const visibleCount = Math.ceil(VIRTUAL_VIEWPORT_HEIGHT / VIRTUAL_ITEM_HEIGHT) + VIRTUAL_OVERSCAN * 2;
-  const endIndex = Math.min(filteredOptions.length, startIndex + visibleCount);
-  const visibleOptions = filteredOptions.slice(startIndex, endIndex);
-  const handleSelect = useCallback(
-    (stringValue) => {
-      const selected = normalizedOptions.find(
-        (opt) => opt.stringValue === stringValue
-      );
-      onChange(selected ? selected.value : stringValue);
-      setOpen(false);
-    },
-    [normalizedOptions, onChange]
-  );
-  useEffect(() => {
-    if (!open || !viewportRef.current) return;
-    const selectedIndex = filteredOptions.findIndex(
-      (opt) => opt.stringValue === selectedString
-    );
-    if (selectedIndex < 0) return;
-    const targetTop = selectedIndex * VIRTUAL_ITEM_HEIGHT - VIRTUAL_VIEWPORT_HEIGHT / 2;
-    const clampedTop = Math.max(
-      0,
-      Math.min(targetTop, totalHeight - VIRTUAL_VIEWPORT_HEIGHT)
-    );
-    viewportRef.current.scrollTop = clampedTop;
-    setScrollTop(clampedTop);
-  }, [open, filteredOptions, selectedString, totalHeight]);
-  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
-    /* @__PURE__ */ jsx(Label, { children: label }),
-    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          className: "w-full justify-between font-normal",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedLabel || "Select..." }),
-            /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-60" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(PopoverContent, { className: "w-(--radix-popover-trigger-width) p-2", children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            value: search,
-            onChange: (e) => setSearch(e.target.value),
-            placeholder: "Search options...",
-            className: "mb-2"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: viewportRef,
-            className: "relative touch-pan-y overflow-y-auto overscroll-contain rounded-md border",
-            style: {
-              height: VIRTUAL_VIEWPORT_HEIGHT,
-              WebkitOverflowScrolling: "touch"
-            },
-            onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
-            children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground p-3 text-sm", children: "No options found." }) : /* @__PURE__ */ jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  top: startIndex * VIRTUAL_ITEM_HEIGHT,
-                  left: 0,
-                  right: 0
-                },
-                children: visibleOptions.map((opt) => {
-                  const isSelected = opt.stringValue === selectedString;
-                  return /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      className: "hover:bg-accent hover:text-accent-foreground flex h-8 w-full items-center justify-between px-2 text-left text-sm",
-                      onClick: () => handleSelect(opt.stringValue),
-                      children: [
-                        /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label }),
-                        isSelected ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-primary ml-2 size-4 shrink-0" }) : null
-                      ]
-                    },
-                    opt.stringValue
-                  );
-                })
-              }
-            ) })
-          }
-        )
-      ] })
-    ] })
-  ] });
-});
+import { ColorField } from "./color-field.js";
+import { RadioToggleField } from "./radio-toggle-field.js";
+import { ObjectField } from "./object-field.js";
+import { LARGE_SELECT_THRESHOLD, VirtualizedSelectField } from "./virtualized-select-field.js";
+const KEY_FIELD_MAP = {
+  color: ColorField,
+  backgroundColor: ColorField,
+  "background-color": ColorField,
+  bgColor: ColorField,
+  borderColor: ColorField,
+  "border-color": ColorField
+};
 const AutoField = memo(function AutoField2({
   field,
   name,
   value,
   onChange
 }) {
-  var _a, _b;
+  var _a, _b, _c;
   const label = field.label || name;
+  const KeyOverride = KEY_FIELD_MAP[name];
+  if (KeyOverride) {
+    return /* @__PURE__ */ jsx(KeyOverride, { label, value, onChange });
+  }
   switch (field.type) {
     case "text":
       return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
@@ -266,7 +74,7 @@ const AutoField = memo(function AutoField2({
           onChange
         }
       );
-    case "select":
+    case "select": {
       if ((((_a = field.options) == null ? void 0 : _a.length) || 0) > LARGE_SELECT_THRESHOLD) {
         return /* @__PURE__ */ jsx(
           VirtualizedSelectField,
@@ -278,24 +86,29 @@ const AutoField = memo(function AutoField2({
           }
         );
       }
+      const stringValue = String(value ?? "");
+      const selectedOption = (_b = field.options) == null ? void 0 : _b.find(
+        (o) => String(o.value) === stringValue
+      );
       return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
         /* @__PURE__ */ jsx(Label, { children: label }),
         /* @__PURE__ */ jsxs(
           Select,
           {
-            value: String(value ?? ""),
+            value: stringValue,
             onValueChange: (val) => {
               var _a2;
               const opt = (_a2 = field.options) == null ? void 0 : _a2.find((o) => String(o.value) === val);
               onChange(opt ? opt.value : val);
             },
             children: [
-              /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-              /* @__PURE__ */ jsx(SelectContent, { children: (_b = field.options) == null ? void 0 : _b.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: String(opt.value), children: opt.label }, String(opt.value))) })
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: label, children: (selectedOption == null ? void 0 : selectedOption.label) ?? stringValue }) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: (_c = field.options) == null ? void 0 : _c.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: String(opt.value), children: opt.label }, String(opt.value))) })
             ]
           }
         )
       ] });
+    }
     case "object":
       return /* @__PURE__ */ jsx(
         ObjectField,

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

@@ -0,0 +1,6 @@
+/** 颜色选择器：color swatch + 文本输入 */
+export declare const ColorField: import("react").NamedExoticComponent<{
+    label: string;
+    value: any;
+    onChange: (value: any) => void;
+}>;

package/dist/components/puck-base/fields/color-field.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Input } from "../../shadcn/input.js";
+import { Label } from "../../shadcn/label.js";
+const ColorField = memo(function ColorField2({
+  label,
+  value,
+  onChange
+}) {
+  const colorValue = String(value ?? "#000000");
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          value: colorValue.startsWith("#") ? colorValue : "#000000",
+          onChange: (e) => onChange(e.target.value),
+          className: "h-9 w-9 shrink-0 cursor-pointer rounded-md border p-0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: colorValue,
+          onChange: (e) => onChange(e.target.value),
+          placeholder: "#000000",
+          className: "flex-1"
+        }
+      )
+    ] })
+  ] });
+});
+export {
+  ColorField
+};

package/dist/components/puck-base/fields/index.d.ts

@@ -0,0 +1,7 @@
+export type { FieldDef, AutoFieldProps, FieldsPanelProps } from "./types";
+export { AutoField } from "./auto-field";
+export { ColorField } from "./color-field";
+export { RadioToggleField } from "./radio-toggle-field";
+export { ObjectField } from "./object-field";
+export { VirtualizedSelectField, LARGE_SELECT_THRESHOLD, } from "./virtualized-select-field";
+export { ActionField, ACTION_TYPE_FIELD_MAP, ACTION_TYPE_OPTIONS, PageActionFields, ExternalActionFields, EmailActionFields, PhoneActionFields, SectionActionFields, DownloadActionFields, type ActionTypeFieldProps, } from "./action-field";

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

@@ -0,0 +1,8 @@
+import type { FieldDef } from "./types";
+/** 嵌套对象字段：按 objectFields 递归渲染子 AutoField，onChange 合并回对象 */
+export declare const ObjectField: import("react").NamedExoticComponent<{
+    field: FieldDef;
+    name: string;
+    value: any;
+    onChange: (value: any) => void;
+}>;

package/dist/components/puck-base/fields/object-field.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Label } from "../../shadcn/label.js";
+import { AutoField } from "./auto-field.js";
+const ObjectField = memo(function ObjectField2({
+  field,
+  name,
+  value,
+  onChange
+}) {
+  const objectFields = field.objectFields || {};
+  const label = field.label || name;
+  const objValue = value && typeof value === "object" ? value : {};
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border p-3", children: Object.entries(objectFields).map(([key, subField]) => /* @__PURE__ */ jsx(
+      AutoField,
+      {
+        field: subField,
+        name: key,
+        value: objValue[key],
+        onChange: (val) => onChange({ ...objValue, [key]: val })
+      },
+      key
+    )) })
+  ] });
+});
+export {
+  ObjectField
+};

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

@@ -0,0 +1,10 @@
+/** 单选/切换：若选项恰好为 true/false 两个值则渲染开关，否则为 ToggleGroup */
+export declare const RadioToggleField: import("react").NamedExoticComponent<{
+    label: string;
+    options: {
+        label: string;
+        value: any;
+    }[];
+    value: any;
+    onChange: (value: any) => void;
+}>;

package/dist/components/puck-base/fields/radio-toggle-field.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Label } from "../../shadcn/label.js";
+import { Switch } from "../../shadcn/switch.js";
+import { ToggleGroup, ToggleGroupItem } from "../../shadcn/toggle-group.js";
+const RadioToggleField = memo(function RadioToggleField2({
+  label,
+  options,
+  value,
+  onChange
+}) {
+  const isBooleanToggle = options.length === 2 && options.some((o) => o.value === true) && options.some((o) => o.value === false);
+  if (isBooleanToggle) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 mb-3 flex items-center justify-between rounded-xl p-3", children: [
+      /* @__PURE__ */ jsx(Label, { children: label }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: !!value,
+          onCheckedChange: (checked) => onChange(checked)
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsx(
+      ToggleGroup,
+      {
+        type: "single",
+        value: String(value ?? ""),
+        onValueChange: (val) => {
+          if (!val) return;
+          const opt = options.find((o) => String(o.value) === val);
+          if (opt) onChange(opt.value);
+        },
+        className: "justify-start",
+        children: options.map((opt) => /* @__PURE__ */ jsx(
+          ToggleGroupItem,
+          {
+            value: String(opt.value),
+            size: "sm",
+            children: opt.label
+          },
+          String(opt.value)
+        ))
+      }
+    )
+  ] });
+});
+export {
+  RadioToggleField
+};

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

@@ -0,0 +1,13 @@
+export declare const LARGE_SELECT_THRESHOLD = 200;
+type SelectOption = {
+    label: string;
+    value: any;
+};
+/** 超大下拉：选项超过阈值时使用虚拟列表 + 搜索，减轻 DOM 压力 */
+export declare const VirtualizedSelectField: import("react").NamedExoticComponent<{
+    label: string;
+    options: SelectOption[];
+    value: any;
+    onChange: (value: any) => void;
+}>;
+export {};

package/dist/components/puck-base/fields/virtualized-select-field.js

@@ -0,0 +1,146 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { Input } from "../../shadcn/input.js";
+import { Label } from "../../shadcn/label.js";
+import { Button } from "../../shadcn/button.js";
+import { Popover, PopoverTrigger, PopoverContent } from "../../shadcn/popover.js";
+import { ChevronDownIcon, CheckIcon } from "lucide-react";
+const LARGE_SELECT_THRESHOLD = 200;
+const VIRTUAL_ITEM_HEIGHT = 32;
+const VIRTUAL_VIEWPORT_HEIGHT = 256;
+const VIRTUAL_OVERSCAN = 6;
+const VirtualizedSelectField = memo(function VirtualizedSelectField2({
+  label,
+  options,
+  value,
+  onChange
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [scrollTop, setScrollTop] = useState(0);
+  const viewportRef = useRef(null);
+  const normalizedOptions = useMemo(
+    () => options.map((opt) => ({
+      ...opt,
+      stringValue: String(opt.value)
+    })),
+    [options]
+  );
+  const selectedString = String(value ?? "");
+  const filteredOptions = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return normalizedOptions;
+    return normalizedOptions.filter(
+      (opt) => opt.label.toLowerCase().includes(query) || opt.stringValue.toLowerCase().includes(query)
+    );
+  }, [normalizedOptions, search]);
+  const selectedLabel = useMemo(() => {
+    const selected = normalizedOptions.find(
+      (opt) => opt.stringValue === selectedString
+    );
+    return (selected == null ? void 0 : selected.label) ?? selectedString;
+  }, [normalizedOptions, selectedString]);
+  const totalHeight = filteredOptions.length * VIRTUAL_ITEM_HEIGHT;
+  const startIndex = Math.max(
+    0,
+    Math.floor(scrollTop / VIRTUAL_ITEM_HEIGHT) - VIRTUAL_OVERSCAN
+  );
+  const visibleCount = Math.ceil(VIRTUAL_VIEWPORT_HEIGHT / VIRTUAL_ITEM_HEIGHT) + VIRTUAL_OVERSCAN * 2;
+  const endIndex = Math.min(filteredOptions.length, startIndex + visibleCount);
+  const visibleOptions = filteredOptions.slice(startIndex, endIndex);
+  const handleSelect = useCallback(
+    (stringValue) => {
+      const selected = normalizedOptions.find(
+        (opt) => opt.stringValue === stringValue
+      );
+      onChange(selected ? selected.value : stringValue);
+      setOpen(false);
+    },
+    [normalizedOptions, onChange]
+  );
+  useEffect(() => {
+    if (!open || !viewportRef.current) return;
+    const selectedIndex = filteredOptions.findIndex(
+      (opt) => opt.stringValue === selectedString
+    );
+    if (selectedIndex < 0) return;
+    const targetTop = selectedIndex * VIRTUAL_ITEM_HEIGHT - VIRTUAL_VIEWPORT_HEIGHT / 2;
+    const clampedTop = Math.max(
+      0,
+      Math.min(targetTop, totalHeight - VIRTUAL_VIEWPORT_HEIGHT)
+    );
+    viewportRef.current.scrollTop = clampedTop;
+    setScrollTop(clampedTop);
+  }, [open, filteredOptions, selectedString, totalHeight]);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "w-full justify-between font-normal",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedLabel || "Select..." }),
+            /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-60" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { className: "w-(--radix-popover-trigger-width) p-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            placeholder: "Search options...",
+            className: "mb-2"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: viewportRef,
+            className: "relative touch-pan-y overflow-y-auto overscroll-contain rounded-md border",
+            style: {
+              height: VIRTUAL_VIEWPORT_HEIGHT,
+              WebkitOverflowScrolling: "touch"
+            },
+            onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+            children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground p-3 text-sm", children: "No options found." }) : /* @__PURE__ */ jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: startIndex * VIRTUAL_ITEM_HEIGHT,
+                  left: 0,
+                  right: 0
+                },
+                children: visibleOptions.map((opt) => {
+                  const isSelected = opt.stringValue === selectedString;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "hover:bg-accent hover:text-accent-foreground flex h-8 w-full items-center justify-between px-2 text-left text-sm",
+                      onClick: () => handleSelect(opt.stringValue),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label }),
+                        isSelected ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-primary ml-2 size-4 shrink-0" }) : null
+                      ]
+                    },
+                    opt.stringValue
+                  );
+                })
+              }
+            ) })
+          }
+        )
+      ] })
+    ] })
+  ] });
+});
+export {
+  LARGE_SELECT_THRESHOLD,
+  VirtualizedSelectField
+};

package/dist/components/puck-base/image.js

@@ -33,7 +33,11 @@ const getCroppedImg = async (imageSrc, pixelCrop, rotation) => {
   ctx.translate(safeArea / 2, safeArea / 2);
   ctx.rotate(rotation * Math.PI / 180);
   ctx.translate(-safeArea / 2, -safeArea / 2);
-  ctx.drawImage(image2, safeArea / 2 - image2.width * 0.5, safeArea / 2 - image2.height * 0.5);
+  ctx.drawImage(
+    image2,
+    safeArea / 2 - image2.width * 0.5,
+    safeArea / 2 - image2.height * 0.5
+  );
   const data = ctx.getImageData(0, 0, safeArea, safeArea);
   canvas.width = pixelCrop.width;
   canvas.height = pixelCrop.height;
@@ -48,7 +52,14 @@ const getCroppedImg = async (imageSrc, pixelCrop, rotation) => {
 };
 const DEFAULT_LIBRARY_IMAGES = [];
 function CompoundImageBase(props) {
-  return /* @__PURE__ */ jsx("img", { src: props.src, alt: props.alt, className: cn("block h-full w-full object-cover", props.className) });
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: props.src,
+      alt: props.alt,
+      className: cn("block h-full w-full object-cover", props.className)
+    }
+  );
 }
 function ImageEditDialog({
   open,
@@ -58,7 +69,9 @@ function ImageEditDialog({
 }) {
   const [tab, setTab] = useState("library");
   const [alt, setAlt] = useState(initialData.alt ?? "");
-  const [libraryImages, setLibraryImages] = useState(DEFAULT_LIBRARY_IMAGES);
+  const [libraryImages, setLibraryImages] = useState(
+    DEFAULT_LIBRARY_IMAGES
+  );
   const [isLoadingImages, setIsLoadingImages] = useState(false);
   const { fetchLibraryImages } = useEditorContext();
   useEffect(() => {
@@ -97,7 +110,11 @@ function ImageEditDialog({
   const handleCropSave = useCallback(async () => {
     if (!croppedAreaPixels || !initialData.src) return;
     try {
-      const croppedBlob = await getCroppedImg(initialData.src, croppedAreaPixels, rotation);
+      const croppedBlob = await getCroppedImg(
+        initialData.src,
+        croppedAreaPixels,
+        rotation
+      );
       const file = new File([croppedBlob], "cropped-image.jpg", {
         type: "image/jpeg"
       });
@@ -122,112 +139,166 @@ function ImageEditDialog({
   }, [selectedImg, alt, onSave, handleClose]);
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (o) => !o && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex max-h-[80vh] max-w-lg flex-col gap-0 overflow-hidden p-0", children: [
     /* @__PURE__ */ jsx(DialogHeader, { className: "px-6 pt-5 pb-0", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-base font-semibold", children: "Edit Image" }) }),
-    /* @__PURE__ */ jsxs(Tabs, { value: tab, onValueChange: (v) => setTab(v), className: "flex flex-1 flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsxs(TabsList, { className: "mx-6 mt-3 bg-transparent", children: [
-        /* @__PURE__ */ jsxs(TabsTrigger, { value: "adjust", children: [
-          /* @__PURE__ */ jsx(Pencil, {}),
-          "Crop"
-        ] }),
-        /* @__PURE__ */ jsxs(TabsTrigger, { value: "library", children: [
-          /* @__PURE__ */ jsx(Search, {}),
-          "Library"
-        ] }),
-        /* @__PURE__ */ jsxs(TabsTrigger, { value: "upload", children: [
-          /* @__PURE__ */ jsx(Upload, {}),
-          "Upload"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-3 flex-1 overflow-hidden", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", tab !== "adjust" && "hidden"), children: [
-          /* @__PURE__ */ jsx("div", { className: "bg-muted relative h-64", children: /* @__PURE__ */ jsx(
-            Cropper,
-            {
-              image: initialData.src,
-              crop,
-              zoom,
-              rotation,
-              aspect: 16 / 9,
-              onCropChange: setCrop,
-              onZoomChange: setZoom,
-              onRotationChange: setRotation,
-              onCropComplete: (_, pixels) => setCroppedAreaPixels(pixels)
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 px-6 py-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Zoom" }),
-              /* @__PURE__ */ jsx(Slider, { value: [zoom], onValueChange: (vals) => setZoom(Array.isArray(vals) ? vals[0] ?? 1 : vals), min: 1, max: 3, step: 0.1 })
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        value: tab,
+        onValueChange: (v) => setTab(v),
+        className: "flex flex-1 flex-col overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxs(TabsList, { className: "mx-6 mt-3 bg-transparent", children: [
+            /* @__PURE__ */ jsxs(TabsTrigger, { value: "adjust", children: [
+              /* @__PURE__ */ jsx(Pencil, {}),
+              "Crop"
+            ] }),
+            /* @__PURE__ */ jsxs(TabsTrigger, { value: "library", children: [
+              /* @__PURE__ */ jsx(Search, {}),
+              "Library"
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Rotation" }),
-              /* @__PURE__ */ jsx(Slider, { value: [rotation], onValueChange: (vals) => setRotation(Array.isArray(vals) ? vals[0] ?? 0 : vals), min: 0, max: 360, step: 1 })
+            /* @__PURE__ */ jsxs(TabsTrigger, { value: "upload", children: [
+              /* @__PURE__ */ jsx(Upload, {}),
+              "Upload"
             ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3 px-6 py-4", tab !== "library" && "hidden"), children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[280px]", children: isLoadingImages ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center py-20", children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) }) : libraryImages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center py-20 text-center", children: [
-          /* @__PURE__ */ jsx(Search, { className: "h-8 w-8 text-gray-300" }),
-          /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-medium text-gray-500", children: "No images available" }),
-          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Try uploading an image instead" })
-        ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: libraryImages.map((src) => {
-          const isSelected = selectedImg === src;
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => setSelectedImg(src),
-              className: `relative aspect-4/3 overflow-hidden rounded-lg border-2 transition-all ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-transparent hover:border-gray-300"}`,
-              children: [
-                /* @__PURE__ */ jsx("img", { src, alt: "", className: "h-full w-full object-cover" }),
-                isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-1.5 right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 shadow-sm", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-white" }) })
-              ]
-            },
-            src
-          );
-        }) }) }) }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn("flex flex-col items-center justify-center gap-4 px-6 py-14", tab !== "upload" && "hidden"),
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-gray-100", children: /* @__PURE__ */ jsx(Upload, { className: "h-6 w-6 text-gray-400" }) }),
-              /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700", children: "Upload a new image to replace the current one" }),
-                /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Supports JPG, PNG, WebP formats" })
-              ] }),
-              /* @__PURE__ */ jsxs(
-                Button,
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", tab !== "adjust" && "hidden"), children: [
+              /* @__PURE__ */ jsx("div", { className: "bg-muted relative h-64", children: /* @__PURE__ */ jsx(
+                Cropper,
                 {
-                  variant: "outline",
-                  size: "sm",
-                  onClick: () => {
-                    var _a;
-                    return (_a = replaceInputRef.current) == null ? void 0 : _a.click();
-                  },
-                  disabled: isReplaceUploading,
-                  children: [
-                    isReplaceUploading ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "mr-1.5 h-3.5 w-3.5" }),
-                    "Choose File"
-                  ]
+                  image: initialData.src,
+                  crop,
+                  zoom,
+                  rotation,
+                  aspect: 16 / 9,
+                  onCropChange: setCrop,
+                  onZoomChange: setZoom,
+                  onRotationChange: setRotation,
+                  onCropComplete: (_, pixels) => setCroppedAreaPixels(pixels)
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref: replaceInputRef,
-                  type: "file",
-                  accept: "image/*",
-                  onChange: handleFileReplace,
-                  className: "hidden"
-                }
-              )
-            ]
-          }
-        )
-      ] })
-    ] }),
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 px-6 py-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+                  /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Zoom" }),
+                  /* @__PURE__ */ jsx(
+                    Slider,
+                    {
+                      className: "flex",
+                      value: [zoom],
+                      onValueChange: (vals) => setZoom(Array.isArray(vals) ? vals[0] ?? 1 : vals),
+                      min: 1,
+                      max: 3,
+                      step: 0.1
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+                  /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Rotation" }),
+                  /* @__PURE__ */ jsx(
+                    Slider,
+                    {
+                      className: "flex",
+                      value: [rotation],
+                      onValueChange: (vals) => setRotation(Array.isArray(vals) ? vals[0] ?? 0 : vals),
+                      min: 0,
+                      max: 360,
+                      step: 1
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col gap-3 px-6 py-4",
+                  tab !== "library" && "hidden"
+                ),
+                children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[280px]", children: isLoadingImages ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center py-20", children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-gray-400" }) }) : libraryImages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center py-20 text-center", children: [
+                  /* @__PURE__ */ jsx(Search, { className: "h-8 w-8 text-gray-300" }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm font-medium text-gray-500", children: "No images available" }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Try uploading an image instead" })
+                ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: libraryImages.map((src) => {
+                  const isSelected = selectedImg === src;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setSelectedImg(src),
+                      className: `relative aspect-4/3 overflow-hidden rounded-lg border-2 transition-all ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-transparent hover:border-gray-300"}`,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src,
+                            alt: "",
+                            className: "h-full w-full object-cover"
+                          }
+                        ),
+                        isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-1.5 right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 shadow-sm", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-white" }) })
+                      ]
+                    },
+                    src
+                  );
+                }) }) })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-center justify-center gap-4 px-6 py-14",
+                  tab !== "upload" && "hidden"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-gray-100", children: /* @__PURE__ */ jsx(Upload, { className: "h-6 w-6 text-gray-400" }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700", children: "Upload a new image to replace the current one" }),
+                    /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-400", children: "Supports JPG, PNG, WebP formats" })
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: () => {
+                        var _a;
+                        return (_a = replaceInputRef.current) == null ? void 0 : _a.click();
+                      },
+                      disabled: isReplaceUploading,
+                      children: [
+                        isReplaceUploading ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "mr-1.5 h-3.5 w-3.5" }),
+                        "Choose File"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: replaceInputRef,
+                      type: "file",
+                      accept: "image/*",
+                      onChange: handleFileReplace,
+                      className: "hidden"
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: "border-t px-6 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ jsx(Label, { className: "flex-none", children: "Alt Text" }),
-      /* @__PURE__ */ jsx(Input, { value: alt, onChange: (e) => setAlt(e.target.value), placeholder: "Image description..." })
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: alt,
+          onChange: (e) => setAlt(e.target.value),
+          placeholder: "Image description..."
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsxs(DialogFooter, { className: "border-t px-6 py-3", children: [
       /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleClose, children: "Cancel" }),

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

@@ -8,7 +8,7 @@ export { CompoundForm, type CompoundFormProps, formMethods, type FormMethods } f
 export { CompoundImage, type CompoundImageProps } from "./image";
 export { CompoundArticleCard, type CompoundArticleCardProps } from "./article-card";
 export { ImageUploadField } from "./image-upload-field";
-export { ActionField, ACTION_TYPE_FIELD_MAP, ACTION_TYPE_OPTIONS, PageActionFields, ExternalActionFields, EmailActionFields, PhoneActionFields, SectionActionFields, DownloadActionFields, type ActionTypeFieldProps, } from "./fields/action-field";
+export { ActionField, ACTION_TYPE_FIELD_MAP, ACTION_TYPE_OPTIONS, PageActionFields, ExternalActionFields, EmailActionFields, PhoneActionFields, SectionActionFields, DownloadActionFields, type ActionTypeFieldProps, } from "./fields";
 export { ErrorBoundary } from "./error-boundary";
 export { GradientText, type GradientTextProps } from "./gradient-text";
 export { InlineEditable } from "./inline-editable";
@@ -18,6 +18,5 @@ export { usePuckDispatch, usePuckAppState, usePuckHistory, usePuckConfig, usePuc
 export { findComponentById, getRandomAdjective } from "./core/utils";
 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";
 export { EditorContextProvider, useEditorContext } from "./editor-context";
-export { AutoField } from "./fields/auto-field";
-export { type FieldDef, type AutoFieldProps, type FieldsPanelProps } from "./fields/types";
+export { AutoField, type FieldDef, type AutoFieldProps, type FieldsPanelProps } from "./fields";
 export { default as useUpload, type UploadFileItem, type UploadStatus, type UseUploadOptions } from "./use-upload";

package/dist/components/shadcn/slider.js

@@ -18,7 +18,10 @@ function Slider({
   return /* @__PURE__ */ jsx(
     Slider$1.Root,
     {
-      className: cn("data-horizontal:w-full data-vertical:h-full", className),
+      className: cn(
+        "data-horizontal:w-full data-vertical:h-full flex items-center",
+        className
+      ),
       "data-slot": "slider",
       defaultValue,
       value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dune-react",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -43,6 +43,7 @@
     }
   },
   "devDependencies": {
+    "@aws-sdk/client-s3": "3.1017.0",
     "@puckeditor/core": "0.21.1",
     "@storybook/addon-docs": "^10.2.19",
     "@storybook/addon-links": "^10.2.19",