dune-react 0.0.16 → 0.0.19

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

@@ -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,7 +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";
+import { LocationField } from "../fields/location-field.js";
 const formMethods = ["get", "post", "put", "patch", "delete"];
 const icon = {
   type: "custom",
@@ -241,42 +241,51 @@ 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,
-  backgroundColor,
-  backgroundImage,
   badge,
-  bannerStylesDefaults,
-  bannerStylesField,
   button,
   buttons,
   card,
   cards,
   contentFields,
   contentFieldsWithFeatures,
-  createStylesDefaults,
-  createStylesField,
   description,
   features,
   field,
   fieldDefaults,
   form,
   formDefaults,
+  getDirectionsUrl,
+  getMapEmbedUrl,
   getPlaceholderImageUrl,
   heading,
-  heroStylesDefaults,
   icon,
   image,
   image16x9Placeholder,
   image1x1Placeholder,
   image9x16Placeholder,
   images,
-  padding,
-  paddingDefaults,
-  paddingLevel,
-  sectionBaseStyleDefaults,
-  sectionBaseStyleFields,
-  sectionOverlay,
-  sectionStyle
+  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

@@ -70,7 +70,7 @@ function withEditable(Component, config) {
     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(
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-60 flex items-center justify-center", children: /* @__PURE__ */ jsx(
           "span",
           {
             ref: portalRef,
@@ -84,7 +84,7 @@ function withEditable(Component, config) {
     }
     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(
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 z-60 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100", children: /* @__PURE__ */ jsx(
         "span",
         {
           onClick: handleEdit,

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

@@ -4,4 +4,5 @@ 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 { LocationField } from "./location-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/location-field.d.ts

@@ -0,0 +1,44 @@
+import type { MapLocation } from "../core/fields";
+interface GLatLng {
+    lat(): number;
+    lng(): number;
+}
+interface GGeometry {
+    location?: GLatLng;
+}
+interface GPlaceResult {
+    formatted_address?: string;
+    geometry?: GGeometry;
+    place_id?: string;
+    address_components?: unknown[];
+}
+interface GAutocomplete {
+    getPlace(): GPlaceResult;
+    addListener(event: string, handler: () => void): void;
+}
+interface GAutocompleteConstructor {
+    new (input: HTMLInputElement, opts?: Record<string, unknown>): GAutocomplete;
+}
+interface GGoogleMaps {
+    places: {
+        Autocomplete: GAutocompleteConstructor;
+    };
+    event: {
+        clearInstanceListeners(instance: unknown): void;
+    };
+}
+interface GGoogle {
+    maps: GGoogleMaps;
+}
+declare global {
+    interface Window {
+        google?: GGoogle;
+    }
+}
+export interface LocationFieldProps {
+    name: string;
+    value: MapLocation | undefined;
+    onChange: (value: MapLocation) => void;
+}
+export declare const LocationField: import("react").NamedExoticComponent<LocationFieldProps>;
+export {};

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

@@ -0,0 +1,207 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+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";
+let googleLoadPromise = null;
+function loadGooglePlaces(apiKey) {
+  var _a, _b;
+  if (googleLoadPromise) return googleLoadPromise;
+  if (typeof window !== "undefined" && ((_b = (_a = window.google) == null ? void 0 : _a.maps) == null ? void 0 : _b.places)) {
+    return Promise.resolve();
+  }
+  googleLoadPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`;
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => {
+      googleLoadPromise = null;
+      reject(new Error("Failed to load Google Maps API"));
+    };
+    document.head.appendChild(script);
+  });
+  return googleLoadPromise;
+}
+const LocationField = memo(function LocationField2({
+  value,
+  onChange
+}) {
+  const { googleMapsApiKey } = useEditorContext();
+  const apiKey = googleMapsApiKey || "";
+  const [inputValue, setInputValue] = useState((value == null ? void 0 : value.address) || "");
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [loadError, setLoadError] = useState(false);
+  const inputRef = useRef(null);
+  const autocompleteRef = useRef(null);
+  useEffect(() => {
+    if ((value == null ? void 0 : value.address) && value.address !== inputValue) {
+      setInputValue(value.address);
+    }
+  }, [value == null ? void 0 : value.address]);
+  useEffect(() => {
+    if (!apiKey) {
+      setLoadError(true);
+      return;
+    }
+    loadGooglePlaces(apiKey).then(() => setIsLoaded(true)).catch(() => setLoadError(true));
+  }, [apiKey]);
+  useEffect(() => {
+    if (!isLoaded || !inputRef.current || autocompleteRef.current) return;
+    const G = window.google;
+    const autocomplete = new G.maps.places.Autocomplete(inputRef.current, {
+      fields: [
+        "formatted_address",
+        "geometry",
+        "place_id",
+        "address_components"
+      ]
+    });
+    autocomplete.addListener("place_changed", () => {
+      var _a;
+      const place = autocomplete.getPlace();
+      if (!((_a = place.geometry) == null ? void 0 : _a.location)) return;
+      const lat = place.geometry.location.lat();
+      const lng = place.geometry.location.lng();
+      const address = place.formatted_address || "";
+      const newLocation = {
+        address,
+        lat,
+        lng,
+        zoom: (value == null ? void 0 : value.zoom) ?? 14,
+        placeId: place.place_id || ""
+      };
+      setInputValue(address);
+      onChange(newLocation);
+    });
+    autocompleteRef.current = autocomplete;
+    return () => {
+      var _a;
+      (_a = window.google) == null ? void 0 : _a.maps.event.clearInstanceListeners(autocomplete);
+      autocompleteRef.current = null;
+    };
+  }, [isLoaded]);
+  const handleClear = useCallback(() => {
+    var _a;
+    setInputValue("");
+    onChange({
+      address: "",
+      lat: 0,
+      lng: 0,
+      zoom: 14,
+      placeId: ""
+    });
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, [onChange]);
+  const handleZoomChange = useCallback(
+    (e) => {
+      if (!value) return;
+      onChange({ ...value, zoom: Number(e.target.value) });
+    },
+    [value, onChange]
+  );
+  const embedUrl = value && value.lat !== 0 ? `https://maps.google.com/maps?q=${value.lat},${value.lng}&z=${value.zoom ?? 14}&output=embed` : null;
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-3", children: [
+    /* @__PURE__ */ jsx(Label, { children: "Location" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3", children: !isLoaded && !loadError ? /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground size-4 animate-spin" }) : /* @__PURE__ */ jsx(Search, { className: "text-muted-foreground size-4" }) }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: inputRef,
+          value: inputValue,
+          onChange: (e) => setInputValue(e.target.value),
+          placeholder: loadError ? "Enter address manually..." : "Search address or place...",
+          className: "pl-9 pr-8"
+        }
+      ),
+      inputValue && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          className: "text-muted-foreground hover:text-foreground absolute inset-y-0 right-0 flex items-center pr-3",
+          children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    loadError && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Latitude" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            step: "any",
+            value: (value == null ? void 0 : value.lat) ?? "",
+            onChange: (e) => onChange({
+              ...value || { address: "", lng: 0, zoom: 14 },
+              lat: Number(e.target.value)
+            }),
+            placeholder: "37.7749",
+            className: "h-8 text-xs"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Longitude" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            step: "any",
+            value: (value == null ? void 0 : value.lng) ?? "",
+            onChange: (e) => onChange({
+              ...value || { address: "", lat: 0, zoom: 14 },
+              lng: Number(e.target.value)
+            }),
+            placeholder: "-122.4194",
+            className: "h-8 text-xs"
+          }
+        )
+      ] })
+    ] }),
+    value && value.lat !== 0 && /* @__PURE__ */ jsxs("div", { className: "border-border bg-muted/50 space-y-2 rounded-lg border p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(MapPin, { className: "text-primary mt-0.5 size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm font-medium leading-tight", children: value.address })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground pl-5.5 text-xs", children: [
+        value.lat.toFixed(4),
+        ", ",
+        value.lng.toFixed(4)
+      ] })
+    ] }),
+    embedUrl && /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border", children: /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: embedUrl,
+        title: "Location preview",
+        className: "h-[160px] w-full border-0",
+        loading: "lazy",
+        referrerPolicy: "no-referrer-when-downgrade"
+      }
+    ) }),
+    value && value.lat !== 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Label, { className: "shrink-0 text-xs", children: "Zoom" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 1,
+          max: 20,
+          step: 1,
+          value: value.zoom ?? 14,
+          onChange: handleZoomChange,
+          className: "h-1.5 flex-1 cursor-pointer appearance-none rounded-full bg-gray-200 accent-current"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground w-6 text-right text-xs tabular-nums", children: value.zoom ?? 14 })
+    ] })
+  ] });
+});
+export {
+  LocationField
+};

package/dist/components/puck-block/hero-sections/fullscreen-hero-1/fullscreen-hero.d.ts

@@ -9,10 +9,10 @@ export interface FullscreenHeroProps {
         variant: string;
     };
     buttons?: CompoundButtonProps[];
-    backgroundImage?: {
+    images?: {
         src: string;
         alt?: string;
-    } | string;
+    }[];
     styles?: {
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
@@ -20,4 +20,4 @@ export interface FullscreenHeroProps {
         overlay?: "none" | "dark" | "gradient";
     };
 }
-export declare const FullscreenHero: ({ heading, description, badge, buttons, backgroundImage, styles, }: FullscreenHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FullscreenHero: ({ heading, description, badge, buttons, images, styles, }: FullscreenHeroProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/hero-sections/fullscreen-hero-1/fullscreen-hero.js

@@ -12,15 +12,16 @@ const FullscreenHero = ({
   description,
   badge,
   buttons,
-  backgroundImage,
+  images,
   styles
 }) => {
   const sectionStyle = styles == null ? void 0 : styles.sectionStyle;
   const overlay = (styles == null ? void 0 : styles.overlay) ?? "dark";
   const backgroundColor = styles == null ? void 0 : styles.backgroundColor;
   const padding = styles == null ? void 0 : styles.padding;
-  const bgSrc = typeof backgroundImage === "string" ? backgroundImage : backgroundImage == null ? void 0 : backgroundImage.src;
-  const bgAlt = typeof backgroundImage === "string" ? "" : (backgroundImage == null ? void 0 : backgroundImage.alt) ?? "";
+  const bgImage = images == null ? void 0 : images[0];
+  const bgSrc = bgImage == null ? void 0 : bgImage.src;
+  const bgAlt = (bgImage == null ? void 0 : bgImage.alt) ?? "";
   if (!bgSrc) {
     return /* @__PURE__ */ jsx(
       CompoundContainer,
@@ -29,7 +30,15 @@ const FullscreenHero = ({
         sectionStyle,
         backgroundColor,
         className: "min-h-[100vh] flex flex-col justify-end",
-        children: /* @__PURE__ */ jsx(Content, { badge, heading, description, buttons })
+        children: /* @__PURE__ */ jsx(
+          Content,
+          {
+            badge,
+            heading,
+            description,
+            buttons
+          }
+        )
       }
     );
   }
@@ -40,20 +49,57 @@ const FullscreenHero = ({
     {
       className: cn(
         "relative w-full min-h-[100vh] flex flex-col justify-end overflow-hidden bg-background text-foreground",
-        { "pt-20 lg:pt-40": top === "large", "pb-20 lg:pb-40": bottom === "large" },
-        { "pt-15 lg:pt-30": top === "medium", "pb-15 lg:pb-30": bottom === "medium" },
-        { "pt-10 lg:pt-20": top === "small", "pb-10 lg:pb-20": bottom === "small" }
+        {
+          "pt-20 lg:pt-40": top === "large",
+          "pb-20 lg:pb-40": bottom === "large"
+        },
+        {
+          "pt-15 lg:pt-30": top === "medium",
+          "pb-15 lg:pb-30": bottom === "medium"
+        },
+        {
+          "pt-10 lg:pt-20": top === "small",
+          "pb-10 lg:pb-20": bottom === "small"
+        }
       ),
       style: { ...styleVars, ...backgroundColor ? { backgroundColor } : {} },
       children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 [&>span]:h-full [&>span]:w-full", children: /* @__PURE__ */ jsx(CompoundImage, { src: bgSrc, alt: bgAlt, className: "h-full w-full object-cover" }) }),
-        overlay !== "none" && /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0", overlayStyles[overlay] ?? overlayStyles.dark) }),
-        /* @__PURE__ */ jsx("div", { className: "container mx-auto relative z-50", children: /* @__PURE__ */ jsx(Content, { badge, heading, description, buttons }) })
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 [&>span]:h-full [&>span]:w-full", children: /* @__PURE__ */ jsx(
+          CompoundImage,
+          {
+            src: bgSrc,
+            alt: bgAlt,
+            className: "h-full w-full object-cover"
+          }
+        ) }),
+        overlay !== "none" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0",
+              overlayStyles[overlay] ?? overlayStyles.dark
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "container mx-auto relative z-50", children: /* @__PURE__ */ jsx(
+          Content,
+          {
+            badge,
+            heading,
+            description,
+            buttons
+          }
+        ) })
       ]
     }
   );
 };
-function Content({ badge, heading, description, buttons }) {
+function Content({
+  badge,
+  heading,
+  description,
+  buttons
+}) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     badge && /* @__PURE__ */ jsx("span", { className: "bg-primary/10 text-primary mb-6 inline-block rounded-full px-3 py-1 text-xs font-medium", children: badge.label }),
     /* @__PURE__ */ jsx("h1", { className: "font-serif text-5xl md:text-7xl lg:text-8xl font-medium leading-[0.95] mb-8 max-w-[800px] text-foreground", children: heading }),

package/dist/components/puck-block/hero-sections/fullscreen-hero-1/index.js

@@ -1,6 +1,6 @@
-import { contentFields } from "../../../puck-base/core/fields.js";
+import { images, contentFields } from "../../../puck-base/core/fields.js";
 import { FullscreenHero } from "./fullscreen-hero.js";
-import { backgroundImage, createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     badge: contentFields.badge,
@@ -13,7 +13,7 @@ const conf = {
       contentEditable: true
     },
     buttons: contentFields.buttons,
-    backgroundImage,
+    images: { ...images, max: 1 },
     styles: createStylesField({
       overlay: {
         type: "select",
@@ -37,7 +37,7 @@ const conf = {
         icon: "none"
       }
     ],
-    backgroundImage: "https://images.pexels.com/photos/924824/pexels-photo-924824.jpeg?auto=compress&cs=tinysrgb&w=1920",
+    images: [{ src: "https://images.pexels.com/photos/924824/pexels-photo-924824.jpeg?auto=compress&cs=tinysrgb&w=1920", alt: "Hero background" }],
     styles: createStylesDefaults({
       sectionStyle: "dark",
       overlay: "dark"

package/dist/components/puck-block/hero-sections/image-hero-1/image-hero.d.ts

@@ -6,10 +6,10 @@ export interface ImageHeroProps {
     description?: string;
     badge?: CompoundBadgeProps;
     buttons?: CompoundButtonProps[];
-    backgroundImage?: {
+    images?: {
         src: string;
         alt?: string;
-    } | string;
+    }[];
     styles?: {
         padding?: CompoundContainerProps["padding"];
         sectionStyle?: CompoundContainerProps["sectionStyle"];
@@ -19,4 +19,4 @@ export interface ImageHeroProps {
         minHeight?: "medium" | "large" | "full";
     };
 }
-export declare const ImageHero: ({ heading, description, badge, buttons, backgroundImage, styles, }: ImageHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageHero: ({ heading, description, badge, buttons, images, styles, }: ImageHeroProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/hero-sections/image-hero-1/image-hero.js

@@ -18,14 +18,15 @@ const ImageHero = ({
   description,
   badge,
   buttons,
-  backgroundImage,
+  images,
   styles
 }) => {
   const overlay = (styles == null ? void 0 : styles.overlay) ?? "dark";
   const align = (styles == null ? void 0 : styles.align) ?? "center";
   const minHeight = (styles == null ? void 0 : styles.minHeight) ?? "large";
-  const bgSrc = typeof backgroundImage === "string" ? backgroundImage : backgroundImage == null ? void 0 : backgroundImage.src;
-  const bgAlt = typeof backgroundImage === "string" ? "" : (backgroundImage == null ? void 0 : backgroundImage.alt) ?? "";
+  const bgImage = images == null ? void 0 : images[0];
+  const bgSrc = bgImage == null ? void 0 : bgImage.src;
+  const bgAlt = (bgImage == null ? void 0 : bgImage.alt) ?? "";
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {

package/dist/components/puck-block/hero-sections/image-hero-1/index.js

@@ -1,4 +1,4 @@
-import { buttons, badge } from "../../../puck-base/core/fields.js";
+import { images, buttons, badge } from "../../../puck-base/core/fields.js";
 import { heroStylesDefaults, createStylesField, sectionOverlay } from "../../../puck-base/core/styles.js";
 import { ImageHero } from "./image-hero.js";
 const imageHeroStylesField = createStylesField({
@@ -26,20 +26,13 @@ const conf = {
     description: { type: "textarea", contentEditable: true },
     badge,
     buttons,
-    backgroundImage: {
-      type: "text",
-      label: "Background Image URL",
-      ai: {
-        instructions: "URL for a full-width background image behind the section.",
-        stream: false
-      }
-    },
+    images: { ...images, max: 1 },
     styles: imageHeroStylesField
   },
   defaultProps: {
     heading: "Build something people want",
     description: "A modern platform for teams who care about speed, quality, and customer experience.",
-    backgroundImage: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=1920",
+    images: [{ src: "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=1920", alt: "Hero background" }],
     buttons: [
       {
         label: "Get Started",

package/dist/components/puck-block/hero-sections/props.d.ts

@@ -37,9 +37,7 @@ type HeroSectionProps = {
     spacing?: "tight" | "normal" | "relaxed";
     align?: "left" | "center";
     displaySize?: "default" | "display";
-    images?: HeroImage | HeroImage[];
-    backgroundImage?: HeroImage | string;
-    posterImage?: HeroImage;
+    images?: HeroImage[];
     videoUrl?: string;
     adjectives?: {
         adjective: string;