dune-react 0.0.15 → 0.0.18

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,8 @@
+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 { 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-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
+};