dune-react 0.0.21 → 0.0.23

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

@@ -4,7 +4,7 @@ import { useRef, useEffect, useCallback } from "react";
 import { registerOverlayPortal } from "@puckeditor/core";
 import { usePuckDispatch, usePuckAppState } from "./hooks.js";
 import { Pencil } from "lucide-react";
-import { useEditorContext } from "../../puck-core/core/context/editor-context.js";
+import { useEditorContext } from "./context/editor-context.js";
 import set from "../../../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/set.js";
 const BLOCK_LEVEL_TYPES = /* @__PURE__ */ new Set(["image"]);
 function getComponentIdFromDOM(el) {

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useCallback, memo } from "react";
+import { memo, useCallback } from "react";
 import { Input } from "../../shadcn/input.js";
 import { Label } from "../../shadcn/label.js";
 import { Tabs, TabsList, TabsTrigger } from "../../shadcn/tabs.js";

package/dist/components/puck-core/fields/array-field.d.ts

@@ -0,0 +1,7 @@
+import type { FieldDef } from "./types";
+export declare const ArrayField: import("react").NamedExoticComponent<{
+    field: FieldDef;
+    name: string;
+    value: any;
+    onChange: (value: any) => void;
+}>;

package/dist/components/puck-core/fields/array-field.js

@@ -0,0 +1,229 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useMemo, useCallback } from "react";
+import { ChevronLeft, Plus, GripVertical, Pencil, Trash2 } from "lucide-react";
+import { useSensors, useSensor, DndContext, closestCenter, KeyboardSensor, PointerSensor } from "../../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@dnd-kit/core/dist/core.esm.js";
+import { arrayMove, SortableContext, verticalListSortingStrategy, sortableKeyboardCoordinates, useSortable } from "../../../node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.2.4_react@19.2.4__react@19.2.4__react@19.2.4/node_modules/@dnd-kit/sortable/dist/sortable.esm.js";
+import { CSS } from "../../../node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.2.4/node_modules/@dnd-kit/utilities/dist/utilities.esm.js";
+import { Label } from "../../shadcn/label.js";
+import { Button } from "../../shadcn/button.js";
+import { AutoField } from "./auto-field.js";
+const POINTER_SENSOR_OPTIONS = { activationConstraint: { distance: 5 } };
+const KEYBOARD_SENSOR_OPTIONS = {
+  coordinateGetter: sortableKeyboardCoordinates
+};
+const SortableItem = memo(function SortableItem2({
+  id,
+  summary,
+  canDelete,
+  onEdit,
+  onDelete
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: "bg-muted/50 group flex items-center gap-2 rounded-xl p-3",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "text-muted-foreground/40 hover:text-muted-foreground cursor-grab active:cursor-grabbing",
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground flex-1 truncate text-sm", children: summary }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 gap-1 px-2",
+            onClick: onEdit,
+            children: [
+              /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" }),
+              "Edit"
+            ]
+          }
+        ),
+        canDelete && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            className: "text-muted-foreground hover:text-destructive h-7 w-7",
+            onClick: onDelete,
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+});
+const ArrayField = memo(function ArrayField2({
+  field,
+  name,
+  value,
+  onChange
+}) {
+  const arrayFields = field.arrayFields || {};
+  const label = field.label || name;
+  const items = Array.isArray(value) ? value : [];
+  const [editingIndex, setEditingIndex] = useState(null);
+  const idCounterRef = useRef(0);
+  const itemIdMapRef = useRef(/* @__PURE__ */ new WeakMap());
+  const itemIds = useMemo(() => {
+    return items.map((item) => {
+      if (item && typeof item === "object") {
+        let id = itemIdMapRef.current.get(item);
+        if (!id) {
+          id = `${name}-${idCounterRef.current++}`;
+          itemIdMapRef.current.set(item, id);
+        }
+        return id;
+      }
+      return `${name}-${idCounterRef.current++}`;
+    });
+  }, [items, name]);
+  const sensors = useSensors(
+    useSensor(PointerSensor, POINTER_SENSOR_OPTIONS),
+    useSensor(KeyboardSensor, KEYBOARD_SENSOR_OPTIONS)
+  );
+  const handleDragEnd = useCallback(
+    (event) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const oldIndex = itemIds.indexOf(String(active.id));
+      const newIndex = itemIds.indexOf(String(over.id));
+      if (oldIndex !== -1 && newIndex !== -1) {
+        onChange(arrayMove(items, oldIndex, newIndex));
+      }
+    },
+    [itemIds, items, onChange]
+  );
+  const handleAdd = useCallback(() => {
+    if (field.defaultItemProps) {
+      onChange([...items, { ...field.defaultItemProps }]);
+      return;
+    }
+    const newItem = {};
+    for (const key of Object.keys(arrayFields)) {
+      newItem[key] = "";
+    }
+    onChange([...items, newItem]);
+  }, [items, onChange, field.defaultItemProps, arrayFields]);
+  const handleDelete = useCallback(
+    (index) => {
+      onChange(items.filter((_, i) => i !== index));
+      if (editingIndex === index) setEditingIndex(null);
+    },
+    [items, onChange, editingIndex]
+  );
+  const handleItemFieldChange = useCallback(
+    (index, key, val) => {
+      const newItems = items.map(
+        (item, i) => i === index ? { ...item, [key]: val } : item
+      );
+      onChange(newItems);
+    },
+    [items, onChange]
+  );
+  const canAdd = field.max == null || items.length < field.max;
+  const canDelete = field.min == null || items.length > field.min;
+  const getSummary = useCallback(
+    (item, index) => {
+      if (field.getItemSummary) return field.getItemSummary(item, index);
+      return item.label || item.heading || item.name || item.title || `Item ${index + 1}`;
+    },
+    [field]
+  );
+  if (editingIndex !== null && items[editingIndex]) {
+    const item = items[editingIndex];
+    return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            onClick: () => setEditingIndex(null),
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(Label, { children: [
+          label,
+          " / ",
+          getSummary(item, editingIndex)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted/30 p-3", children: Object.entries(arrayFields).map(([key, subField]) => /* @__PURE__ */ jsx(
+        AutoField,
+        {
+          field: subField,
+          name: key,
+          value: item[key],
+          onChange: (val) => handleItemFieldChange(editingIndex, key, val)
+        },
+        key
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsx(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCenter,
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsx(SortableContext, { items: itemIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: items.map((item, i) => /* @__PURE__ */ jsx(
+          SortableItem,
+          {
+            id: itemIds[i],
+            summary: getSummary(item, i),
+            canDelete,
+            onEdit: () => setEditingIndex(i),
+            onDelete: () => handleDelete(i)
+          },
+          itemIds[i]
+        )) }) })
+      }
+    ),
+    canAdd && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "mt-2 gap-1.5 text-primary",
+        onClick: handleAdd,
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+          "Add ",
+          label.replace(/s$/, "").toLowerCase()
+        ]
+      }
+    )
+  ] });
+});
+export {
+  ArrayField
+};

package/dist/components/{puck-base → puck-core}/fields/auto-field.js

@@ -7,6 +7,7 @@ import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from ".
 import { ColorField } from "./color-field.js";
 import { RadioToggleField } from "./radio-toggle-field.js";
 import { ObjectField } from "./object-field.js";
+import { ArrayField } from "./array-field.js";
 import { LARGE_SELECT_THRESHOLD, VirtualizedSelectField } from "./virtualized-select-field.js";
 const KEY_FIELD_MAP = {
   color: ColorField,
@@ -119,6 +120,16 @@ const AutoField = memo(function AutoField2({
           onChange
         }
       );
+    case "array":
+      return /* @__PURE__ */ jsx(
+        ArrayField,
+        {
+          field,
+          name,
+          value,
+          onChange
+        }
+      );
     case "custom":
       if (field.render) {
         const CustomRender = field.render;

package/dist/components/{puck-base → puck-core/fields}/image-upload-field.js

@@ -2,10 +2,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { X, Loader2, UploadCloud, ImageIcon } from "lucide-react";
-import { cn } from "../../utils/css-utils.js";
-import { Button } from "../shadcn/button.js";
-import { Input } from "../shadcn/input.js";
-import useUpload from "./use-upload.js";
+import { cn } from "../../../utils/css-utils.js";
+import { Button } from "../../shadcn/button.js";
+import { Input } from "../../shadcn/input.js";
+import useUpload from "../use-upload.js";
 function ImageUploadField({
   name,
   value,
@@ -32,7 +32,7 @@ function ImageUploadField({
         {
           src: value,
           alt: "preview",
-          className: "block h-32 w-full object-cover"
+          className: "block h-32 w-full object-contain"
         }
       ),
       /* @__PURE__ */ jsx(

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

@@ -3,6 +3,7 @@ export { AutoField } from "./auto-field";
 export { ColorField } from "./color-field";
 export { RadioToggleField } from "./radio-toggle-field";
 export { ObjectField } from "./object-field";
+export { ArrayField } from "./array-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 → puck-core}/fields/location-field.js

@@ -4,7 +4,7 @@ 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 "../../puck-core/core/context/editor-context.js";
+import { useEditorContext } from "../core/context/editor-context.js";
 let googleLoadPromise = null;
 function loadGooglePlaces(apiKey) {
   var _a, _b;

package/dist/components/{puck-base → puck-core}/fields/object-field.js

@@ -13,7 +13,7 @@ const ObjectField = memo(function ObjectField2({
   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(
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg p-3 bg-muted/50", children: Object.entries(objectFields).map(([key, subField]) => /* @__PURE__ */ jsx(
       AutoField,
       {
         field: subField,

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

@@ -8,5 +8,6 @@ export { InlineEditable } from "./inline-editable";
 export { usePuckDispatch, usePuckAppState, usePuckHistory, usePuckConfig, usePuckGetSelectorForId, type PuckComponentInfo, } from "./core/hooks";
 export { SectionWrapper, type SectionWrapperProps } from "./section-wrapper";
 export { EditorContextProvider, useEditorContext } from "./core/context/editor-context";
+export { SectionIdProvider, useSectionId } from "./core/context/section-id-context";
 export { default as useUpload, type UploadFileItem, type UploadStatus, type UseUploadOptions } from "./use-upload";
 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";

package/dist/components/{puck-base → puck-core}/inline-editable.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { createElement, useRef, useEffect, useCallback } from "react";
 import { registerOverlayPortal } from "@puckeditor/core";
-import { useEditorContext } from "../puck-core/core/context/editor-context.js";
+import { useEditorContext } from "./core/context/editor-context.js";
 import { usePuckDispatch } from "./core/hooks.js";
 import set from "../../node_modules/.pnpm/lodash-es@4.17.23/node_modules/lodash-es/set.js";
 import { findComponentById } from "./core/utils.js";