alinea 2.0.0-preview.12 → 2.0.0-preview.13

package/dist/field/list/ListField.view.js

@@ -1,6 +1,6 @@
 import {
   atomWithStorage
-} from "../../chunks/chunk-TIJTT5ZI.js";
+} from "../../chunks/chunk-G43W7AME.js";
 import {
   useAtomValueRaw,
   useSetAtom
@@ -25,28 +25,43 @@ import {
   SortableList,
   SortableListItemTitle,
   SortableListAdd,
-  SortableListDragPreview,
   ListError,
   ListLabel,
   SortableListItemActions,
   SortableListItemContent,
-  SortableListHandle,
   SortableListItemToggle,
   SortableListItemHeader,
   SortableListItemDescription,
-  SortableListItemSettings,
+  SortableListItemInsert,
+  SortableListItemTrigger,
   Popover,
+  PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
-  TextField
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetSection,
+  SheetTitle,
+  TextField,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
 } from "alinea/components";
 import { createId } from "alinea/core/Id";
 import { getType } from "alinea/core/Internal";
 import { Type } from "alinea/core/Type";
 import { slugify } from "alinea/core/util/Slugs";
 import { Badge } from "alinea/components";
+import {
+  BlockSheet,
+  useBlockSheet
+} from "alinea/dashboard/app/BlockSheet";
 import { NodeEditor } from "alinea/dashboard/app/NodeEditor";
 import {
+  useEntry,
   useFieldError,
   useFieldNode,
   useFieldOptions,
@@ -59,46 +74,38 @@ import {
   IcRoundArrowDownward,
   IcRoundArrowUpward,
   IcRoundClose,
+  IcRoundDelete,
   IcRoundFirstPage,
   IcRoundLastPage,
+  IcRoundLink,
   IcRoundMoreHoriz
 } from "alinea/dashboard/icons";
 import { SlugField } from "alinea/field/path/SlugField";
-import {
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useMemo,
-  useState
-} from "react";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
 
 // src/field/list/ListField.module.css
 var ListField_default = {
-  "ListFieldTypePicker-popover": "alinea-ListFieldTypePicker-popover",
-  "ListFieldTypePickerPopover": "alinea-ListFieldTypePicker-popover",
+  "ListFieldRowSheet-anchor-field": "alinea-ListFieldRowSheet-anchor-field",
+  "ListFieldRowSheetAnchorField": "alinea-ListFieldRowSheet-anchor-field",
+  "ListFieldRowSheet-anchor": "alinea-ListFieldRowSheet-anchor",
+  "ListFieldRowSheetAnchor": "alinea-ListFieldRowSheet-anchor",
   "ListFieldTypePicker-trigger": "alinea-ListFieldTypePicker-trigger",
   "ListFieldTypePickerTrigger": "alinea-ListFieldTypePicker-trigger",
-  "ListFieldRowHeader-separator": "alinea-ListFieldRowHeader-separator",
-  "ListFieldRowHeaderSeparator": "alinea-ListFieldRowHeader-separator",
   "ListFieldCreateActions": "alinea-ListFieldCreateActions",
-  "ListFieldView-insertAction": "alinea-ListFieldView-insertAction",
-  "ListFieldViewInsertAction": "alinea-ListFieldView-insertAction",
   "ListFieldCreateActions-button": "alinea-ListFieldCreateActions-button",
-  "ListFieldCreateActionsButton": "alinea-ListFieldCreateActions-button"
+  "ListFieldCreateActionsButton": "alinea-ListFieldCreateActions-button",
+  "ListFieldTypePicker-popover": "alinea-ListFieldTypePicker-popover",
+  "ListFieldTypePickerPopover": "alinea-ListFieldTypePicker-popover"
 };
 
 // src/field/list/ListField.view.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var styles = dist_default(ListField_default);
-var ListFieldDepthContext = createContext(0);
 var copyAtom = atomWithStorage(
   "@alinea/copypaste",
   void 0
 );
-var LIST_FIELD_ROW_DRAG_TYPE = "application/x-alinea-list-field-row";
 function ListFieldView({ field }) {
-  const depth = useContext(ListFieldDepthContext);
   const options = useFieldOptions(field);
   const error = useFieldError(field);
   const list = useFieldNode(field);
@@ -121,7 +128,6 @@ function ListFieldView({ field }) {
   const readOnly = Boolean(options.readOnly);
   const hasRows = nodes.length > 0;
   const canCreate = options.max === void 0 || nodes.length < options.max;
-  const [foldedIds, setFoldedIds] = useState(/* @__PURE__ */ new Set());
   const rowIdsAtom = useMemo(
     () => atom((get) => {
       const nodes2 = get(list.nodes);
@@ -130,6 +136,9 @@ function ListFieldView({ field }) {
     [list]
   );
   const rowIds = useAtomValueRaw(rowIdsAtom);
+  const [foldedIds, setFoldedIds] = useState(
+    () => new Set(options.collapsed ? rowIds : [])
+  );
   const moveRowAtom = useMemo(
     () => atom(null, (get, set, { keys, target }) => {
       const nodes2 = get(list.nodes);
@@ -158,7 +167,7 @@ function ListFieldView({ field }) {
     [list]
   );
   const copyRow = useSetAtom(copyRowAtom);
-  const allExpanded = nodes.length > 0 && foldedIds.size === 0;
+  const allExpanded = nodes.length > 0 && rowIds.every((id) => !foldedIds.has(id));
   function toggleAll() {
     setFoldedIds(allExpanded ? new Set(rowIds) : /* @__PURE__ */ new Set());
   }
@@ -177,8 +186,6 @@ function ListFieldView({ field }) {
     SortableList,
     {
       "aria-label": options.label || "List items",
-      "data-depth": depth % 2 === 0 ? "muted" : "base",
-      dragType: LIST_FIELD_ROW_DRAG_TYPE,
       onReorder: readOnly ? void 0 : moveRow,
       children: [
         nodes.map((row, index) => /* @__PURE__ */ jsx(
@@ -212,7 +219,7 @@ function ListFieldView({ field }) {
       ]
     }
   );
-  return /* @__PURE__ */ jsxs(ListFieldDepthContext.Provider, { value: depth + 1, children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       ListLabel,
       {
@@ -304,67 +311,6 @@ function ListFieldCreateActions({
     )
   ] });
 }
-function ListFieldInsertAction({
-  icon,
-  isDisabled,
-  items,
-  label,
-  pasted,
-  onClose,
-  onOpenPicker,
-  onSelect
-}) {
-  const directAddItem = !pasted && items.length === 1 ? items[0] : void 0;
-  if (directAddItem) {
-    return /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        className: styles.ListFieldView.insertAction(),
-        icon,
-        disabled: isDisabled,
-        onClick: () => {
-          onSelect(directAddItem);
-          onClose();
-        },
-        children: label
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      variant: "ghost",
-      className: styles.ListFieldView.insertAction(),
-      disabled: isDisabled,
-      onClick: () => {
-        onOpenPicker();
-      },
-      icon,
-      children: label
-    }
-  );
-}
-function ListFieldInsertPanel({
-  items,
-  label,
-  pasted,
-  pasteLabel,
-  onPaste,
-  onSelect
-}) {
-  return /* @__PURE__ */ jsx(
-    ListFieldTypeCommand,
-    {
-      items,
-      label,
-      pasted,
-      pasteLabel,
-      onPaste,
-      onSelect
-    }
-  );
-}
 var ListFieldRow = memo(function ListFieldRow2({
   canCreate,
   index,
@@ -389,13 +335,11 @@ var ListFieldRow = memo(function ListFieldRow2({
   const setAnchor = useSetAtom(row.field("_anchor"));
   const moveListRow = useSetAtom(list.move);
   const removeRow = useSetAtom(list.remove);
+  const sheet = useBlockSheet(itemId);
   const type = schema[typeName];
   if (!type) return null;
   const label = Type.label(type);
   const typeIcon = getType(type).icon;
-  function moveCurrentRow(direction) {
-    moveListRow(index, index + direction);
-  }
   function deleteRow() {
     removeRow(index);
   }
@@ -408,249 +352,346 @@ var ListFieldRow = memo(function ListFieldRow2({
   function updateAnchor(nextValue) {
     setAnchor(slugify(nextValue.replace(/^#+/, "")) || void 0);
   }
-  return /* @__PURE__ */ jsxs(
-    SortableListItem,
-    {
-      "aria-label": `${label} item ${index + 1}`,
-      dragPreview: /* @__PURE__ */ jsx(SortableListDragPreview, { icon: typeIcon, label }),
-      id: itemId,
-      children: [
-        /* @__PURE__ */ jsx(
-          ListFieldRowHeader,
-          {
-            canInsert: canCreate,
-            expanded,
-            isFirstRow: index === 0,
-            isLastRow: index === rows - 1,
-            label,
-            customLabel,
-            anchor: anchorValue,
-            dragLabel: `Drag ${label} item ${index + 1}`,
-            readOnly,
-            typeIcon,
-            insertItems: typeItems,
-            pasted: pasted && schema[pasted._type] ? pasted : void 0,
-            onAnchorChange: updateAnchor,
-            onCustomLabelChange: updateCustomLabel,
-            onCopy: () => onCopyRow(itemId),
-            onDelete: deleteRow,
-            onInsertBefore: (value) => onInsertRow(insertIndex(index, "before"), value),
-            onInsertAfter: (value) => onInsertRow(insertIndex(index, "after"), value),
-            onMoveDown: () => moveCurrentRow(1),
-            onMoveUp: () => moveCurrentRow(-1),
-            onToggle: () => onToggleRow(itemId)
-          }
-        ),
-        expanded && /* @__PURE__ */ jsx(SortableListItemContent, { children: /* @__PURE__ */ jsx(NodeEditor, { node: row, type }) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      SortableListItem,
+      {
+        "aria-label": `${label} item ${index + 1}`,
+        current: sheet.open,
+        id: itemId,
+        children: [
+          canCreate && !readOnly && /* @__PURE__ */ jsx(
+            ListFieldInsertGap,
+            {
+              items: typeItems,
+              label: `Insert before ${label} item ${index + 1}`,
+              pasted: pasted && schema[pasted._type] ? pasted : void 0,
+              onInsert: (value) => onInsertRow(insertIndex(index, "before"), value)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ListFieldRowHeader,
+            {
+              expanded,
+              label,
+              customLabel,
+              anchor: anchorValue,
+              readOnly,
+              sheet,
+              typeIcon,
+              onDelete: deleteRow,
+              onToggle: () => onToggleRow(itemId)
+            }
+          ),
+          expanded && /* @__PURE__ */ jsx(SortableListItemContent, { children: /* @__PURE__ */ jsx(NodeEditor, { node: row, type }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(BlockSheet, { id: itemId, children: /* @__PURE__ */ jsx(
+      ListFieldRowSheet,
+      {
+        anchor: anchorValue,
+        canInsert: canCreate,
+        customLabel,
+        isFirstRow: index === 0,
+        isLastRow: index === rows - 1,
+        items: typeItems,
+        label,
+        pasted: pasted && schema[pasted._type] ? pasted : void 0,
+        readOnly,
+        typeIcon,
+        onAnchorChange: updateAnchor,
+        onClose: () => sheet.setOpen(false),
+        onCopy: () => onCopyRow(itemId),
+        onCustomLabelChange: updateCustomLabel,
+        onDelete: deleteRow,
+        onInsertAfter: (value) => onInsertRow(insertIndex(index, "after"), value),
+        onInsertBefore: (value) => onInsertRow(insertIndex(index, "before"), value),
+        onMoveDown: () => moveListRow(index, index + 1),
+        onMoveUp: () => moveListRow(index, index - 1)
+      }
+    ) })
+  ] });
 });
+function ListFieldInsertGap({
+  items,
+  label,
+  pasted,
+  onInsert
+}) {
+  const ref = useRef(null);
+  const [open, setOpen] = useState(false);
+  const direct = !pasted && items.length === 1 ? items[0] : void 0;
+  function insert(row) {
+    onInsert(row);
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SortableListItemInsert,
+      {
+        ref,
+        "aria-label": label,
+        "aria-haspopup": direct ? void 0 : "dialog",
+        "aria-expanded": direct ? void 0 : open,
+        onClick: () => {
+          if (direct) onInsert(createRow(direct.id, direct.type));
+          else setOpen(true);
+        }
+      }
+    ),
+    !direct && /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: ref }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          "aria-label": label,
+          align: "start",
+          className: styles.ListFieldTypePicker.popover(),
+          children: /* @__PURE__ */ jsx(
+            ListFieldTypeCommand,
+            {
+              items,
+              label,
+              pasted,
+              pasteLabel: pasted ? pasteBlockLabel(pasted, items) : void 0,
+              onPaste: (row) => insert(cloneRow(row)),
+              onSelect: (item) => insert(createRow(item.id, item.type))
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function rowAnchor(customLabel, anchor) {
+  return (anchor ?? slugify(customLabel.trim())).trim();
+}
 function ListFieldRowHeader({
-  canInsert,
-  className,
   expanded,
-  isFirstRow,
-  isLastRow,
-  isPreview,
-  insertItems,
   label,
-  dragLabel,
   customLabel,
   anchor,
-  pasted,
   readOnly,
+  sheet,
   typeIcon,
-  onAnchorChange,
-  onCustomLabelChange,
-  onCopy,
   onDelete,
-  onInsertBefore,
-  onInsertAfter,
-  onMoveDown,
-  onMoveUp,
   onToggle
 }) {
   const displayLabel = customLabel.trim();
-  const displayAnchor = (anchor ?? slugify(displayLabel)).trim();
+  const displayAnchor = rowAnchor(customLabel, anchor);
   const showAnchor = Boolean(displayAnchor && !displayLabel);
-  const [actionsOpen, setActionsOpen] = useState(false);
-  const [insertPosition, setInsertPosition] = useState(null);
-  function closeActions() {
-    setActionsOpen(false);
-    setInsertPosition(null);
-  }
-  return /* @__PURE__ */ jsxs(SortableListItemHeader, { className, children: [
-    !readOnly && /* @__PURE__ */ jsx(SortableListHandle, { "aria-label": dragLabel }),
+  const title = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Badge, { icon: typeIcon, size: "sm", color: "primary", children: label }),
+    displayLabel && /* @__PURE__ */ jsx(SortableListItemDescription, { children: displayLabel }),
+    showAnchor && /* @__PURE__ */ jsxs(Badge, { size: "sm", children: [
+      "#",
+      displayAnchor
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(SortableListItemHeader, { children: [
     /* @__PURE__ */ jsxs(SortableListItemTitle, { children: [
       /* @__PURE__ */ jsx(
         SortableListItemToggle,
         {
           "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
           expanded,
-          disabled: isPreview,
           onClick: onToggle
         }
       ),
-      /* @__PURE__ */ jsx(Badge, { icon: typeIcon, size: "sm", children: label }),
-      displayLabel && /* @__PURE__ */ jsx(SortableListItemDescription, { children: displayLabel }),
-      showAnchor && /* @__PURE__ */ jsxs(Badge, { size: "sm", children: [
-        "#",
-        displayAnchor
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(SortableListItemActions, { children: [
-      /* @__PURE__ */ jsxs(
-        Popover,
+      sheet.available ? /* @__PURE__ */ jsx(
+        SortableListItemTrigger,
         {
-          open: actionsOpen,
-          onOpenChange: (open) => {
-            if (open) setActionsOpen(true);
-            else closeActions();
+          ...sheet.triggerProps,
+          "aria-label": `${label} settings`,
+          "aria-expanded": sheet.open,
+          onClick: () => {
+            if (!sheet.open && !expanded) onToggle();
+            sheet.toggle();
           },
-          children: [
+          children: title
+        }
+      ) : title
+    ] }),
+    /* @__PURE__ */ jsx(SortableListItemActions, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        "aria-label": `Remove ${label}`,
+        icon: IcRoundClose,
+        disabled: readOnly,
+        onClick: onDelete,
+        size: "icon-sm"
+      }
+    ) })
+  ] });
+}
+function ListFieldRowSheet({
+  anchor,
+  canInsert,
+  customLabel,
+  isFirstRow,
+  isLastRow,
+  items,
+  label,
+  pasted,
+  readOnly,
+  typeIcon,
+  onAnchorChange,
+  onClose,
+  onCopy,
+  onCustomLabelChange,
+  onDelete,
+  onInsertAfter,
+  onInsertBefore,
+  onMoveDown,
+  onMoveUp
+}) {
+  const [insertPosition, setInsertPosition] = useState(
+    null
+  );
+  const entryUrl = useEntry()?.url;
+  const displayLabel = customLabel.trim();
+  const displayAnchor = rowAnchor(customLabel, anchor);
+  const title = displayLabel || displayAnchor && `#${displayAnchor}` || label;
+  const link = entryUrl && displayAnchor ? `${entryUrl}#${displayAnchor}` : void 0;
+  function insert(position, row) {
+    if (position === "after") onInsertAfter(row);
+    else onInsertBefore(row);
+    onClose();
+  }
+  function startInsert(position) {
+    const only = !pasted && items.length === 1 ? items[0] : void 0;
+    if (only) insert(position, createRow(only.id, only.type));
+    else setInsertPosition(position);
+  }
+  function copy() {
+    onCopy();
+    onClose();
+  }
+  return /* @__PURE__ */ jsxs(SheetContent, { onClose, children: [
+    /* @__PURE__ */ jsxs(SheetHeader, { children: [
+      /* @__PURE__ */ jsx(Badge, { icon: typeIcon, size: "sm", color: "primary", children: label }),
+      /* @__PURE__ */ jsx(SheetTitle, { children: title }),
+      /* @__PURE__ */ jsx(SheetClose, { "aria-label": "Close block settings" })
+    ] }),
+    insertPosition ? /* @__PURE__ */ jsx(SheetBody, { children: /* @__PURE__ */ jsx(
+      ListFieldTypeCommand,
+      {
+        items,
+        label: `Insert ${insertPosition}`,
+        pasted,
+        pasteLabel: pasted ? pasteBlockLabel(pasted, items) : void 0,
+        onPaste: (row) => insert(insertPosition, cloneRow(row)),
+        onSelect: (item) => insert(insertPosition, createRow(item.id, item.type))
+      }
+    ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SheetBody, { children: /* @__PURE__ */ jsxs(SheetSection, { children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Label",
+            disabled: readOnly,
+            onValueChange: onCustomLabelChange,
+            value: customLabel
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: styles.ListFieldRowSheet.anchor(), children: [
+          /* @__PURE__ */ jsx("div", { className: styles.ListFieldRowSheet.anchor.field(), children: /* @__PURE__ */ jsx(
+            SlugField,
+            {
+              fieldValue: anchor,
+              label: "Anchor",
+              isDisabled: readOnly,
+              onChange: onAnchorChange,
+              source: customLabel
+            }
+          ) }),
+          link && /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(
-              PopoverTrigger,
+              TooltipTrigger,
               {
                 variant: "ghost",
-                "aria-label": `${label} actions`,
-                icon: IcRoundMoreHoriz,
-                size: "icon-sm"
+                size: "icon",
+                icon: IcRoundLink,
+                "aria-label": "Copy link to block",
+                onClick: () => navigator.clipboard.writeText(link)
               }
             ),
-            /* @__PURE__ */ jsx(
-              PopoverContent,
-              {
-                "aria-label": `${label} actions`,
-                side: "bottom",
-                align: "end",
-                children: insertPosition ? /* @__PURE__ */ jsx(
-                  ListFieldInsertPanel,
-                  {
-                    items: insertItems,
-                    label: `Insert ${insertPosition}`,
-                    pasted,
-                    pasteLabel: pasted ? pasteBlockLabel(pasted, insertItems) : void 0,
-                    onPaste: (row) => {
-                      if (insertPosition === "before") onInsertBefore(cloneRow(row));
-                      else onInsertAfter(cloneRow(row));
-                      closeActions();
-                    },
-                    onSelect: (item) => {
-                      const row = createRow(item.id, item.type);
-                      if (insertPosition === "before") onInsertBefore(row);
-                      else onInsertAfter(row);
-                      closeActions();
-                    }
-                  }
-                ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsxs(SortableListItemSettings, { children: [
-                    /* @__PURE__ */ jsx(
-                      TextField,
-                      {
-                        label: "Label",
-                        autoFocus: true,
-                        disabled: readOnly || isPreview,
-                        onValueChange: onCustomLabelChange,
-                        value: customLabel
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      SlugField,
-                      {
-                        fieldValue: anchor,
-                        label: "Anchor",
-                        isDisabled: readOnly || isPreview,
-                        onChange: onAnchorChange,
-                        source: customLabel
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx("hr", { className: styles.ListFieldRowHeader.separator() }),
-                  /* @__PURE__ */ jsx(SortableListItemSettings, { variant: "actions", children: /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      variant: "ghost",
-                      icon: IcBaselineContentCopy,
-                      onClick: () => {
-                        onCopy?.();
-                        closeActions();
-                      },
-                      children: "Copy"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx("hr", { className: styles.ListFieldRowHeader.separator() }),
-                  /* @__PURE__ */ jsxs(SortableListItemSettings, { variant: "actions", children: [
-                    !isFirstRow && /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "ghost",
-                        icon: IcRoundArrowUpward,
-                        onClick: () => {
-                          onMoveUp?.();
-                          closeActions();
-                        },
-                        children: "Move up"
-                      }
-                    ),
-                    !isLastRow && /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "ghost",
-                        icon: IcRoundArrowDownward,
-                        onClick: () => {
-                          onMoveDown?.();
-                          closeActions();
-                        },
-                        children: "Move down"
-                      }
-                    ),
-                    canInsert && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(
-                        ListFieldInsertAction,
-                        {
-                          icon: IcRoundFirstPage,
-                          isDisabled: Boolean(readOnly || isPreview),
-                          items: insertItems,
-                          label: "Insert before",
-                          pasted,
-                          onClose: closeActions,
-                          onOpenPicker: () => setInsertPosition("before"),
-                          onSelect: (item) => onInsertBefore(createRow(item.id, item.type))
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        ListFieldInsertAction,
-                        {
-                          icon: IcRoundLastPage,
-                          isDisabled: Boolean(readOnly || isPreview),
-                          items: insertItems,
-                          label: "Insert after",
-                          pasted,
-                          onClose: closeActions,
-                          onOpenPicker: () => setInsertPosition("after"),
-                          onSelect: (item) => onInsertAfter(createRow(item.id, item.type))
-                        }
-                      )
-                    ] })
-                  ] })
-                ] })
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(TooltipContent, { children: "Copy link to block" })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs(SheetFooter, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            icon: IcRoundFirstPage,
+            disabled: readOnly || !canInsert,
+            onClick: () => startInsert("before"),
+            children: "Insert before"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            icon: IcRoundLastPage,
+            disabled: readOnly || !canInsert,
+            onClick: () => startInsert("after"),
+            children: "Insert after"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(SheetFooter, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            icon: IcBaselineContentCopy,
+            onClick: copy,
+            children: "Copy"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            icon: IcRoundArrowUpward,
+            disabled: readOnly || isFirstRow,
+            onClick: onMoveUp,
+            children: "Move up"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            icon: IcRoundArrowDownward,
+            disabled: readOnly || isLastRow,
+            onClick: onMoveDown,
+            children: "Move down"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(SheetFooter, { children: /* @__PURE__ */ jsx(
         Button,
         {
           variant: "ghost",
-          "aria-label": `Remove ${label}`,
-          icon: IcRoundClose,
-          disabled: readOnly || isPreview,
+          size: "sm",
+          color: "destructive",
+          icon: IcRoundDelete,
+          disabled: readOnly,
           onClick: onDelete,
-          size: "icon-sm"
+          children: "Delete"
         }
-      )
+      ) })
     ] })
   ] });
 }
@@ -774,6 +815,7 @@ function useListFieldPickerItems(items, pasted, pasteLabel, onPaste) {
   }, [items, onPaste, pasteLabel, pasted]);
 }
 export {
+  ListFieldTypeCommand,
   ListFieldView,
   insertIndex,
   reorderIndex