dune-react 0.0.15 → 0.0.18

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: "";
@@ -801,4 +801,27 @@ export declare const form: {
     };
 };
 export declare const formDefaults: CompoundFormProps;
+/** 地图定位的核心数据：地址 + 坐标 */
+export interface MapLocation {
+    /** 用户可读的完整地址（显示 & 搜索用） */
+    address: string;
+    /** 纬度 */
+    lat: number;
+    /** 经度 */
+    lng: number;
+    /** 地图缩放级别，默认 14 */
+    zoom?: number;
+    /** Google Place ID（可选，便于精确定位） */
+    placeId?: string;
+}
+/** 从 MapLocation 生成 Google Maps embed URL */
+export declare function getMapEmbedUrl(loc: MapLocation): string;
+/** 从 MapLocation 生成 Google Maps 导航 URL */
+export declare function getDirectionsUrl(loc: MapLocation): string;
+export declare const locationDefaults: MapLocation;
+export declare const location: {
+    type: "custom";
+    label: string;
+    render: any;
+};
 export * from "./styles";

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 { LocationField } from "../fields/location-field.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: "",
@@ -240,6 +241,25 @@ const formDefaults = {
     icon: "move-right"
   }
 };
+function getMapEmbedUrl(loc) {
+  const { lat, lng, zoom = 14 } = loc;
+  return `https://maps.google.com/maps?q=${lat},${lng}&z=${zoom}&output=embed`;
+}
+function getDirectionsUrl(loc) {
+  return `https://www.google.com/maps/dir/?api=1&destination=${loc.lat},${loc.lng}`;
+}
+const locationDefaults = {
+  address: "San Francisco, CA, USA",
+  lat: 37.7749,
+  lng: -122.4194,
+  zoom: 13
+};
+const location = {
+  type: "custom",
+  label: "Location",
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  render: LocationField
+};
 export {
   action,
   actionDefaults,
@@ -256,6 +276,8 @@ export {
   fieldDefaults,
   form,
   formDefaults,
+  getDirectionsUrl,
+  getMapEmbedUrl,
   getPlaceholderImageUrl,
   heading,
   icon,
@@ -263,5 +285,7 @@ export {
   image16x9Placeholder,
   image1x1Placeholder,
   image9x16Placeholder,
-  images
+  images,
+  location,
+  locationDefaults
 };

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

@@ -1394,11 +1394,7 @@ export declare const contactStylesDefaults: {
         readonly bottom: "medium";
     };
 };
-export interface LocationSectionStyles extends SectionBaseStyles {
-    mapHeight?: number;
-    mapFilter?: string;
-    mapTintColor?: string;
-}
+export type LocationSectionStyles = SectionBaseStyles;
 export declare const locationStylesField: {
     type: "object";
     label: string;

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

@@ -216,11 +216,7 @@ createStylesField({
   }
 });
 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" }
-});
+createStylesField();
 createStylesDefaults();
 createStylesField();
 createStylesDefaults();

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/editor-context.d.ts

@@ -17,6 +17,8 @@ type EditorContextValue = {
     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;

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;
+}>;