alinea 1.7.0 → 2.0.0-preview.0

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

@@ -1,440 +1,951 @@
+import "../../chunks/chunk-NUFRM6SI.js";
 import {
-  CSS,
-  DndContext,
-  DragOverlay,
-  KeyboardSensor,
-  LayoutMeasuringStrategy,
-  PointerSensor,
-  SortableContext,
-  closestCenter,
-  defaultAnimateLayoutChanges,
-  defaultDropAnimation,
-  sortableKeyboardCoordinates,
-  useSensor,
-  useSensors,
-  useSortable,
-  verticalListSortingStrategy
-} from "../../chunks/chunk-TPUTTEHF.js";
+  atomWithStorage
+} from "../../chunks/chunk-STAJCW4Z.js";
 import {
-  dist_default
-} from "../../chunks/chunk-A5O3N2GS.js";
+  useAtomValue,
+  useSetAtom
+} from "../../chunks/chunk-U4VOHNR2.js";
 import {
-  useAtom
-} from "../../chunks/chunk-TOJF2G3X.js";
+  atom
+} from "../../chunks/chunk-Y7XOMJOC.js";
 import {
-  atomWithStorage
-} from "../../chunks/chunk-WDCPVJJC.js";
-import "../../chunks/chunk-WJ67RR7S.js";
-import "../../chunks/chunk-NZLE2WMY.js";
+  $4b38b5b75ecc6208$export$2f2b9559550c7bbc,
+  $928221da08ecbc62$export$41f133550aa26f48,
+  $928221da08ecbc62$export$a11e76429ed99b4,
+  $f2ff30fde7b014be$export$d2f961adcb0afbe
+} from "../../chunks/chunk-I7X64JTZ.js";
+import {
+  $ef182bb9912241d8$export$3274cf84b703fff
+} from "../../chunks/chunk-IWN3T3FL.js";
+import "../../chunks/chunk-RKDPDEF7.js";
+import "../../chunks/chunk-JFROOUG6.js";
+import "../../chunks/chunk-SJBZFMQ2.js";
+import "../../chunks/chunk-IYAQC63Y.js";
+import "../../chunks/chunk-LUBOGJCG.js";
+import {
+  $5d3a17cc2564e64f$export$905ab40ac2179daa,
+  $74812c42150b3de8$export$7941f8aafa4b6021,
+  $f302ef02e940a6f8$export$ccdee5eaf73cf661
+} from "../../chunks/chunk-YK3OSMDM.js";
+import "../../chunks/chunk-AC4U3IMS.js";
+import {
+  dist_default
+} from "../../chunks/chunk-I4OYYAX5.js";
+import "../../chunks/chunk-CQ52GEHY.js";
 
 // src/field/list/ListField.view.tsx
+import {
+  Button,
+  ListRow as ComponentListRow,
+  Dialog,
+  DialogTrigger,
+  Icon,
+  List,
+  ListCreateRow,
+  ListDragPreview,
+  ListError,
+  ListLabel,
+  ListRowActions,
+  ListRowBadges,
+  ListRowBody,
+  ListRowDrag,
+  ListRowDragHandle,
+  ListRowFooter,
+  ListRowHeader,
+  ListRowMeta,
+  ListRowSettings,
+  MenuSeparator,
+  Popover,
+  SearchField,
+  TextField
+} from "alinea/components";
+import { createId } from "alinea/core/Id";
 import { getType } from "alinea/core/Internal";
-import { ListRow } from "alinea/core/shape/ListShape";
 import { Type } from "alinea/core/Type";
-import { entries } from "alinea/core/util/Objects";
-import { FormRow } from "alinea/dashboard/atoms/FormAtoms";
-import { InputForm } from "alinea/dashboard/editor/InputForm";
-import { useField } from "alinea/dashboard/editor/UseField";
-import { Create } from "alinea/dashboard/view/Create";
-import { IconButton } from "alinea/dashboard/view/IconButton";
-import { InputLabel } from "alinea/dashboard/view/InputLabel";
-import { Icon, TextLabel } from "alinea/ui";
-import { IcBaselineContentCopy } from "alinea/ui/icons/IcBaselineContentCopy";
-import { IcBaselineContentPasteGo } from "alinea/ui/icons/IcBaselineContentPasteGo";
-import { IcOutlineList } from "alinea/ui/icons/IcOutlineList";
-import { IcRoundAdd } from "alinea/ui/icons/IcRoundAdd";
-import { IcRoundArrowDownward } from "alinea/ui/icons/IcRoundArrowDownward";
-import { IcRoundArrowUpward } from "alinea/ui/icons/IcRoundArrowUpward";
-import { IcRoundClose } from "alinea/ui/icons/IcRoundClose";
-import { IcRoundDragHandle } from "alinea/ui/icons/IcRoundDragHandle";
-import { IcRoundKeyboardArrowDown } from "alinea/ui/icons/IcRoundKeyboardArrowDown";
-import { IcRoundKeyboardArrowUp } from "alinea/ui/icons/IcRoundKeyboardArrowUp";
-import { Sink } from "alinea/ui/Sink";
+import { slugify } from "alinea/core/util/Slugs";
+import { Badge } from "alinea/dashboard/app/Badge";
+import { CompactRecordFields } from "alinea/dashboard/app/CompactField";
+import { NodeEditor } from "alinea/dashboard/app/EntryFields";
+import {
+  useFieldError,
+  useFieldNode,
+  useFieldOptions,
+  useNodes
+} from "alinea/dashboard/hooks";
 import {
+  IcBaselineContentCopy,
+  IcBaselineContentPasteGo,
+  IcRoundAdd,
+  IcRoundArrowDownward,
+  IcRoundArrowUpward,
+  IcRoundClose,
+  IcRoundFirstPage,
+  IcRoundLastPage,
+  IcRoundMoreHoriz
+} from "alinea/dashboard/icons";
+import { SlugField } from "alinea/field/path/SlugField";
+import {
+  createContext,
+  Fragment,
+  useContext,
+  useMemo,
+  useRef,
   useState
 } from "react";
 
-// src/field/list/ListField.module.scss
-var ListField_module_default = {
-  "root": "alinea-ListField",
-  "root-inner": "alinea-ListField-inner",
-  "rootInner": "alinea-ListField-inner",
-  "row": "alinea-ListField-row",
-  "is-dragging": "alinea-ListField-is-dragging",
-  "isDragging": "alinea-ListField-is-dragging",
-  "is-overlay": "alinea-ListField-is-overlay",
-  "isOverlay": "alinea-ListField-is-overlay",
-  "row-header-title": "alinea-ListField-row-header-title",
-  "rowHeaderTitle": "alinea-ListField-row-header-title",
-  "insert": "alinea-ListField-insert",
-  "is-first": "alinea-ListField-is-first",
-  "isFirst": "alinea-ListField-is-first",
-  "is-open": "alinea-ListField-is-open",
-  "isOpen": "alinea-ListField-is-open",
-  "insert-icon": "alinea-ListField-insert-icon",
-  "insertIcon": "alinea-ListField-insert-icon",
-  "create": "alinea-ListField-create",
-  "is-inline": "alinea-ListField-is-inline",
-  "isInline": "alinea-ListField-is-inline"
+// src/field/list/ListField.module.css
+var ListField_default = {
+  "ListFieldTypePicker-dialog": "alinea-ListFieldTypePicker-dialog",
+  "ListFieldTypePickerDialog": "alinea-ListFieldTypePicker-dialog",
+  "ListFieldTypePicker-list": "alinea-ListFieldTypePicker-list",
+  "ListFieldTypePickerList": "alinea-ListFieldTypePicker-list",
+  "ListFieldTypePicker-item": "alinea-ListFieldTypePicker-item",
+  "ListFieldTypePickerItem": "alinea-ListFieldTypePicker-item",
+  "ListFieldTypePicker-popover": "alinea-ListFieldTypePicker-popover",
+  "ListFieldTypePickerPopover": "alinea-ListFieldTypePicker-popover",
+  "ListFieldCreateActions": "alinea-ListFieldCreateActions",
+  "ListFieldTypePicker-empty": "alinea-ListFieldTypePicker-empty",
+  "ListFieldTypePickerEmpty": "alinea-ListFieldTypePicker-empty",
+  "ListFieldCreateActions-button": "alinea-ListFieldCreateActions-button",
+  "ListFieldCreateActionsButton": "alinea-ListFieldCreateActions-button",
+  "ListFieldView-insertAction": "alinea-ListFieldView-insertAction",
+  "ListFieldViewInsertAction": "alinea-ListFieldView-insertAction",
+  "ListFieldView-rowDropTarget": "alinea-ListFieldView-rowDropTarget",
+  "ListFieldViewRowDropTarget": "alinea-ListFieldView-rowDropTarget",
+  "ListFieldView-dropIndicator": "alinea-ListFieldView-dropIndicator",
+  "ListFieldViewDropIndicator": "alinea-ListFieldView-dropIndicator",
+  "ListFieldTypePicker-trigger": "alinea-ListFieldTypePicker-trigger",
+  "ListFieldTypePickerTrigger": "alinea-ListFieldTypePicker-trigger",
+  "ListFieldTypePicker-search": "alinea-ListFieldTypePicker-search",
+  "ListFieldTypePickerSearch": "alinea-ListFieldTypePicker-search"
 };
 
 // src/field/list/ListField.view.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var styles = dist_default(ListField_module_default);
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+var styles = dist_default(ListField_default);
+var ListFieldDepthContext = createContext(0);
 var copyAtom = atomWithStorage(
   "@alinea/copypaste",
   void 0
 );
-function animateLayoutChanges(args) {
-  const { isSorting, wasSorting } = args;
-  if (isSorting || wasSorting) return defaultAnimateLayoutChanges(args);
-  return true;
+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);
+  const nodes = useNodes(list);
+  const pushRow = useSetAtom(list.push);
+  const insertRow = useSetAtom(list.insert);
+  const pasted = useAtomValue(copyAtom);
+  const schemaEntries = useMemo(
+    () => Object.entries(options.schema),
+    [options.schema]
+  );
+  const typeItems = useMemo(
+    () => schemaEntries.map(([id, type]) => ({
+      id,
+      label: Type.label(type),
+      type
+    })),
+    [schemaEntries]
+  );
+  const readOnly = Boolean(options.readOnly);
+  const hasRows = nodes.length > 0;
+  const [foldedIds, setFoldedIds] = useState(/* @__PURE__ */ new Set());
+  const [draggingRowId, setDraggingRowId] = useState(null);
+  const [dropIndicator, setDropIndicator] = useState(null);
+  const rowIdsAtom = useMemo(
+    () => atom((get) => {
+      const nodes2 = get(list.nodes);
+      return nodes2.map((node) => get(node.field("_id")));
+    }),
+    [list]
+  );
+  const rowIds = useAtomValue(rowIdsAtom);
+  const moveRowAtom = useMemo(
+    () => atom(null, (get, set, rowId, targetIndex) => {
+      const nodes2 = get(list.nodes);
+      const fromIndex = nodes2.findIndex((node) => {
+        return get(node.field("_id")) === rowId;
+      });
+      if (fromIndex === -1) return;
+      const toIndex = reorderIndex(fromIndex, targetIndex);
+      if (toIndex === fromIndex) return;
+      set(list.move, fromIndex, toIndex);
+    }),
+    [list]
+  );
+  const moveRow = useSetAtom(moveRowAtom);
+  const copyRowAtom = useMemo(
+    () => atom(null, (get, set, rowId) => {
+      const copied = get(copyAtom);
+      if (copied?._id === rowId) {
+        set(copyAtom, void 0);
+        return;
+      }
+      const nodes2 = get(list.nodes);
+      const node = nodes2.find((node2) => get(node2.field("_id")) === rowId);
+      if (node) set(copyAtom, get(node.value));
+    }),
+    [list]
+  );
+  const copyRow = useSetAtom(copyRowAtom);
+  const allExpanded = nodes.length > 0 && foldedIds.size === 0;
+  function toggleAll() {
+    setFoldedIds(allExpanded ? new Set(rowIds) : /* @__PURE__ */ new Set());
+  }
+  function toggleRow(rowId) {
+    setFoldedIds((current) => {
+      const next = new Set(current);
+      if (next.has(rowId)) next.delete(rowId);
+      else next.add(rowId);
+      return next;
+    });
+  }
+  function addRow(typeName, type) {
+    pushRow(createRow(typeName, type));
+  }
+  function isBoundaryDropTarget(index) {
+    return dropIndicator?.index === index && dropIndicator.position === "before" || dropIndicator?.index === index - 1 && dropIndicator.position === "after";
+  }
+  const content = (hasRows || !readOnly) && /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx(
+      ListFieldDropIndicator,
+      {
+        active: dropIndicator?.index === 0 && dropIndicator.position === "before"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      List,
+      {
+        "aria-label": options.label || "List items",
+        "data-depth": depth % 2 === 0 ? "muted" : "base",
+        children: [
+          nodes.map((row, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            index > 0 && /* @__PURE__ */ jsx(ListFieldDropIndicator, { active: isBoundaryDropTarget(index) }),
+            /* @__PURE__ */ jsx(
+              ListFieldRow,
+              {
+                addBetweenRow: (value, position = "after") => insertRow(insertIndex(index, position), value),
+                draggingRowId,
+                foldedIds,
+                index,
+                list,
+                readOnly,
+                onCopyRow: copyRow,
+                onMoveRow: moveRow,
+                onRowDragEnd: () => {
+                  setDraggingRowId(null);
+                  setDropIndicator(null);
+                },
+                onRowDragStart: () => setDraggingRowId(rowIds[index] ?? null),
+                onDropIndicatorChange: (position) => setDropIndicator(position ? { index, position } : null),
+                onToggleRow: toggleRow,
+                row,
+                rows: nodes.length,
+                schema: options.schema,
+                pasted,
+                typeItems
+              }
+            )
+          ] }, rowIds[index] || index)),
+          /* @__PURE__ */ jsx(
+            ListFieldDropIndicator,
+            {
+              active: dropIndicator?.index === nodes.length - 1 && dropIndicator.position === "after"
+            }
+          ),
+          !readOnly && /* @__PURE__ */ jsx(ListCreateRow, { empty: !hasRows, children: /* @__PURE__ */ jsx(
+            ListFieldCreateActions,
+            {
+              items: typeItems,
+              pasted: pasted && options.schema[pasted._type] ? pasted : void 0,
+              onPaste: (row) => pushRow(cloneRow(row)),
+              onSelect: (item) => addRow(item.id, item.type)
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(ListFieldDepthContext.Provider, { value: depth + 1, children: [
+    /* @__PURE__ */ jsx(
+      ListLabel,
+      {
+        "aria-label": hasRows ? allExpanded ? "Collapse all items" : "Expand all items" : "No list items to fold",
+        expanded: allExpanded,
+        hasRows,
+        isDisabled: !hasRows,
+        onPress: toggleAll,
+        description: options.help,
+        shared: options.shared,
+        inline: options.inline,
+        children: options.label
+      }
+    ),
+    content,
+    error && /* @__PURE__ */ jsx(ListError, { children: error })
+  ] });
 }
-function ListInputRowSortable(props) {
-  const { onCreate, onPaste } = props;
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    animateLayoutChanges,
-    id: props.row._id
-  });
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || void 0
+function insertIndex(rowIndex, position) {
+  return position === "before" ? rowIndex : rowIndex + 1;
+}
+function reorderIndex(fromIndex, targetIndex) {
+  return fromIndex < targetIndex ? targetIndex - 1 : targetIndex;
+}
+function createRow(typeName, type) {
+  const initialValue = Type.initialValue(type);
+  return {
+    _id: createId(),
+    _index: "",
+    _type: typeName,
+    ...initialValue
+  };
+}
+function cloneRow(row) {
+  return {
+    ...row,
+    _id: createId(),
+    _index: ""
   };
+}
+function pasteBlockLabel(row, items) {
+  const item = items.find((item2) => item2.id === row._type);
+  return item ? `Paste ${item.label}` : "Paste block";
+}
+function ListFieldCreateActions({
+  items,
+  pasted,
+  onPaste,
+  onSelect
+}) {
+  const visibleItems = items.slice(0, 3);
+  const hasMenu = items.length > visibleItems.length;
+  return /* @__PURE__ */ jsxs("div", { className: styles.ListFieldCreateActions(), children: [
+    pasted && /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: styles.ListFieldCreateActions.button(),
+        onPress: () => onPaste(pasted),
+        size: "small",
+        icon: IcBaselineContentPasteGo,
+        appearance: "plain",
+        children: pasteBlockLabel(pasted, items)
+      }
+    ),
+    visibleItems.map((item) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: styles.ListFieldCreateActions.button(),
+        onPress: () => onSelect(item),
+        size: "small",
+        icon: getType(item.type).icon || IcRoundAdd,
+        appearance: "plain",
+        children: item.label
+      },
+      item.id
+    )),
+    hasMenu && /* @__PURE__ */ jsx(
+      ListFieldTypePicker,
+      {
+        items,
+        label: "More block types",
+        pasted,
+        pasteLabel: pasted ? pasteBlockLabel(pasted, items) : void 0,
+        triggerIcon: IcRoundMoreHoriz,
+        onPaste,
+        onSelect
+      }
+    )
+  ] });
+}
+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,
+      {
+        appearance: "plain",
+        className: styles.ListFieldView.insertAction(),
+        icon,
+        isDisabled,
+        onPress: () => {
+          onSelect(directAddItem);
+          onClose();
+        },
+        children: label
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
-    ListInputRow,
+    Button,
     {
-      ...props,
-      rootRef: setNodeRef,
-      style,
-      handle: listeners,
-      ...attributes,
-      isDragging,
-      onCreate,
-      onPaste
+      appearance: "plain",
+      className: styles.ListFieldView.insertAction(),
+      isDisabled,
+      onPress: () => {
+        onOpenPicker();
+      },
+      icon,
+      children: label
     }
   );
 }
-function ListInputRow({
+function ListFieldInsertPanel({
+  items,
+  label,
+  pasted,
+  pasteLabel,
+  onPaste,
+  onSelect
+}) {
+  const { contains } = $ef182bb9912241d8$export$3274cf84b703fff({ sensitivity: "base" });
+  const pickerItems = useListFieldPickerItems(
+    items,
+    pasted,
+    pasteLabel,
+    onPaste
+  );
+  return /* @__PURE__ */ jsx("div", { className: styles.ListFieldTypePicker.dialog(), children: /* @__PURE__ */ jsxs($4b38b5b75ecc6208$export$2f2b9559550c7bbc, { filter: contains, children: [
+    /* @__PURE__ */ jsx(
+      SearchField,
+      {
+        "aria-label": "Search types",
+        autoFocus: true,
+        className: styles.ListFieldTypePicker.search(),
+        hasIcon: true,
+        placeholder: "Search types..."
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      $928221da08ecbc62$export$41f133550aa26f48,
+      {
+        "aria-label": label,
+        className: styles.ListFieldTypePicker.list(),
+        items: pickerItems,
+        renderEmptyState: () => /* @__PURE__ */ jsx("div", { className: styles.ListFieldTypePicker.empty(), children: "No matching types" }),
+        children: (item) => /* @__PURE__ */ jsx(
+          ListFieldTypePickerAction,
+          {
+            item,
+            onPaste,
+            onSelect
+          },
+          item.id
+        )
+      }
+    )
+  ] }) });
+}
+function ListFieldRow({
+  draggingRowId,
+  index,
+  list,
+  readOnly,
   row,
+  rows,
   schema,
-  onMove,
-  onDelete,
-  onCopyBlock,
-  handle,
-  rootRef,
-  isDragging,
-  isDragOverlay,
-  readOnly,
-  onCreate,
-  onPasteBlock,
-  firstRow,
-  lastRow,
-  isFolded,
-  toggleFold,
-  ...rest
+  typeItems,
+  pasted,
+  foldedIds,
+  onToggleRow,
+  onCopyRow,
+  onMoveRow,
+  onRowDragEnd,
+  onRowDragStart,
+  onDropIndicatorChange,
+  addBetweenRow
 }) {
-  const type = schema[row[ListRow.type]];
-  const [showInsert, setShowInsert] = useState(false);
+  const itemId = useAtomValue(row.field("_id"));
+  const typeName = useAtomValue(row.field("_type"));
+  const customLabelValue = useAtomValue(row.field("_label"));
+  const anchorValue = useAtomValue(row.field("_anchor"));
+  const customLabel = customLabelValue ?? "";
+  const value = useAtomValue(row.value);
+  const setCustomLabel = useSetAtom(row.field("_label"));
+  const setAnchor = useSetAtom(row.field("_anchor"));
+  const moveListRow = useSetAtom(list.move);
+  const removeRow = useSetAtom(list.remove);
+  const dragPreview = useRef(null);
+  const rowRef = useRef(null);
+  const { dragProps, isDragging } = $74812c42150b3de8$export$7941f8aafa4b6021({
+    getItems() {
+      return [dragRowItem(itemId)];
+    },
+    getAllowedDropOperations() {
+      return ["move"];
+    },
+    onDragEnd: onRowDragEnd,
+    onDragStart: onRowDragStart,
+    isDisabled: readOnly,
+    preview: dragPreview
+  });
+  const { dropProps, isDropTarget } = $f302ef02e940a6f8$export$ccdee5eaf73cf661({
+    ref: rowRef,
+    isDisabled: readOnly || draggingRowId === null,
+    getDropOperation(types, allowedOperations) {
+      if (!types.has(LIST_FIELD_ROW_DRAG_TYPE)) return "cancel";
+      return allowedOperations.includes("move") ? "move" : "cancel";
+    },
+    getDropOperationForPoint(types, allowedOperations) {
+      if (!types.has(LIST_FIELD_ROW_DRAG_TYPE)) return "cancel";
+      return allowedOperations.includes("move") ? "move" : "cancel";
+    },
+    onDropEnter(event) {
+      const position = rowDropPosition(rowRef.current, event.y);
+      onDropIndicatorChange(position);
+    },
+    onDropMove(event) {
+      const position = rowDropPosition(rowRef.current, event.y);
+      onDropIndicatorChange(position);
+    },
+    onDropExit() {
+      onDropIndicatorChange(null);
+    },
+    async onDrop(event) {
+      const position = rowDropPosition(rowRef.current, event.y);
+      const rowId = await getDraggedRowId(event.items, LIST_FIELD_ROW_DRAG_TYPE);
+      onDropIndicatorChange(null);
+      if (!rowId) return;
+      onMoveRow(rowId, insertIndex(index, position));
+    }
+  });
+  const type = schema[typeName];
   if (!type) return null;
-  return /* @__PURE__ */ jsxs(
+  const label = Type.label(type);
+  const typeIcon = getType(type).icon;
+  const expanded = !foldedIds.has(itemId);
+  function moveCurrentRow(direction) {
+    moveListRow(index, index + direction);
+  }
+  function deleteRow() {
+    removeRow(index);
+  }
+  function updateCustomLabel(nextValue) {
+    setCustomLabel(nextValue || void 0);
+    const currentLabelSlug = slugify(customLabel);
+    const shouldSyncAnchor = anchorValue === void 0 || anchorValue === currentLabelSlug;
+    if (shouldSyncAnchor) setAnchor(slugify(nextValue) || void 0);
+  }
+  function updateAnchor(nextValue) {
+    setAnchor(slugify(nextValue.replace(/^#+/, "")) || void 0);
+  }
+  return /* @__PURE__ */ jsx(Fragment2, { children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles.row({ dragging: isDragging, overlay: isDragOverlay }),
-      ref: rootRef,
-      ...rest,
-      children: [
-        !readOnly && !isDragOverlay && /* @__PURE__ */ jsx(
-          ListInsertRow,
+      ...dropProps,
+      className: styles.ListFieldView.rowDropTarget(),
+      ref: rowRef,
+      children: /* @__PURE__ */ jsxs(
+        ComponentListRow,
+        {
+          "aria-label": `${label} item ${index + 1}`,
+          dragging: isDragging,
+          first: index === 0,
+          role: "listitem",
+          children: [
+            /* @__PURE__ */ jsx($5d3a17cc2564e64f$export$905ab40ac2179daa, { ref: dragPreview, children: () => /* @__PURE__ */ jsx(ListFieldDragPreview, { icon: typeIcon, label }) }),
+            /* @__PURE__ */ jsx(
+              ListFieldRowHeader,
+              {
+                dragProps,
+                expanded,
+                isDragging,
+                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: (value2) => addBetweenRow(value2, "before"),
+                onInsertAfter: (value2) => addBetweenRow(value2, "after"),
+                onMoveDown: () => moveCurrentRow(1),
+                onMoveUp: () => moveCurrentRow(-1),
+                onToggle: () => onToggleRow(itemId)
+              }
+            ),
+            expanded && /* @__PURE__ */ jsx(ListRowBody, { children: /* @__PURE__ */ jsx(NodeEditor, { node: row, type }) }),
+            !expanded && /* @__PURE__ */ jsx(ListRowFooter, { children: /* @__PURE__ */ jsx(
+              CompactRecordFields,
+              {
+                fields: Type.fields(type),
+                layout: "footer",
+                value
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  ) });
+}
+function ListFieldDropIndicator({ active }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: styles.ListFieldView.dropIndicator(),
+      "data-active": active || void 0
+    }
+  );
+}
+function ListFieldDragPreview({ icon, label }) {
+  return /* @__PURE__ */ jsx(ListDragPreview, { icon, label });
+}
+function ListFieldRowHeader({
+  className,
+  dragProps,
+  expanded,
+  isDragging,
+  isFirstRow,
+  isLastRow,
+  isPreview,
+  insertItems,
+  label,
+  dragLabel,
+  customLabel,
+  anchor,
+  pasted,
+  readOnly,
+  typeIcon,
+  onAnchorChange,
+  onCustomLabelChange,
+  onCopy,
+  onDelete,
+  onInsertBefore,
+  onInsertAfter,
+  onMoveDown,
+  onMoveUp,
+  onToggle
+}) {
+  const displayLabel = customLabel.trim();
+  const displayAnchor = (anchor ?? slugify(displayLabel)).trim();
+  const showAnchor = Boolean(displayAnchor && !displayLabel);
+  const [actionsOpen, setActionsOpen] = useState(false);
+  const [insertPosition, setInsertPosition] = useState(null);
+  function closeActions() {
+    setActionsOpen(false);
+    setInsertPosition(null);
+  }
+  return /* @__PURE__ */ jsxs(ListRowHeader, { className, expanded, first: isFirstRow, children: [
+    !readOnly && /* @__PURE__ */ jsx(
+      ListRowDragHandle,
+      {
+        ...dragProps,
+        "aria-label": dragLabel,
+        dragging: isDragging
+      }
+    ),
+    /* @__PURE__ */ jsx(ListRowDrag, { dragging: isDragging, children: /* @__PURE__ */ jsxs(ListRowBadges, { children: [
+      /* @__PURE__ */ jsx(Badge, { icon: typeIcon, size: "small", children: label }),
+      displayLabel && /* @__PURE__ */ jsx(ListRowMeta, { children: displayLabel }),
+      showAnchor && /* @__PURE__ */ jsxs(Badge, { size: "small", children: [
+        "#",
+        displayAnchor
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(ListRowActions, { children: [
+      /* @__PURE__ */ jsxs(DialogTrigger, { isOpen: actionsOpen, onOpenChange: setActionsOpen, children: [
+        /* @__PURE__ */ jsx(
+          Button,
           {
-            open: showInsert,
-            first: Boolean(firstRow),
-            onInsert: () => setShowInsert(!showInsert)
+            appearance: "plain",
+            "aria-label": `${label} actions`,
+            icon: IcRoundMoreHoriz,
+            size: "icon-small"
           }
         ),
-        showInsert && /* @__PURE__ */ jsx(
-          ListCreateRow,
+        /* @__PURE__ */ jsx(Popover, { placement: "bottom right", children: insertPosition ? /* @__PURE__ */ jsx(
+          ListFieldInsertPanel,
           {
-            inline: true,
-            schema,
-            onCreate: (type2) => {
-              onCreate(type2);
-              setShowInsert(false);
+            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();
             },
-            onPaste: (data) => {
-              if (onPasteBlock) onPasteBlock(data);
-              setShowInsert(false);
+            onSelect: (item) => {
+              const row = createRow(item.id, item.type);
+              if (insertPosition === "before") onInsertBefore(row);
+              else onInsertAfter(row);
+              closeActions();
             }
           }
-        ),
-        /* @__PURE__ */ jsxs(Sink.Header, { children: [
-          /* @__PURE__ */ jsx(Sink.Options, { style: { zIndex: 1 }, children: /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              icon: getType(type).icon || IcRoundDragHandle,
-              ...handle,
-              style: { cursor: handle ? "grab" : "grabbing" },
-              title: "Drag and drop to reorder"
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Sink.Title, { children: /* @__PURE__ */ jsx(
-            TextLabel,
+        ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+          /* @__PURE__ */ jsxs(ListRowSettings, { children: [
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                label: "Label",
+                autoFocus: true,
+                isDisabled: readOnly || isPreview,
+                onChange: onCustomLabelChange,
+                value: customLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SlugField,
+              {
+                fieldValue: anchor,
+                label: "Anchor",
+                isDisabled: readOnly || isPreview,
+                onChange: onAnchorChange,
+                source: customLabel
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(MenuSeparator, {}),
+          /* @__PURE__ */ jsx(ListRowSettings, { actions: true, children: /* @__PURE__ */ jsxs(
+            Button,
             {
-              label: Type.label(type),
-              className: styles.row.header.title()
+              appearance: "plain",
+              onPress: () => {
+                onCopy?.();
+                closeActions();
+              },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { icon: IcBaselineContentCopy }),
+                "Copy"
+              ]
             }
           ) }),
-          /* @__PURE__ */ jsxs(Sink.Options, { children: [
-            isFolded !== void 0 && /* @__PURE__ */ jsx(
-              IconButton,
+          /* @__PURE__ */ jsx(MenuSeparator, {}),
+          /* @__PURE__ */ jsxs(ListRowSettings, { actions: true, children: [
+            !isFirstRow && /* @__PURE__ */ jsxs(
+              Button,
               {
-                icon: isFolded ? IcRoundKeyboardArrowDown : IcRoundKeyboardArrowUp,
-                onClick: toggleFold,
-                title: isFolded ? "Expand" : "Fold",
-                disabled: isDragOverlay
+                appearance: "plain",
+                onPress: () => {
+                  onMoveUp?.();
+                  closeActions();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { icon: IcRoundArrowUpward }),
+                  "Move up"
+                ]
+              }
+            ),
+            !isLastRow && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                appearance: "plain",
+                onPress: () => {
+                  onMoveDown?.();
+                  closeActions();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { icon: IcRoundArrowDownward }),
+                  "Move down"
+                ]
               }
             ),
-            onCopyBlock !== void 0 && /* @__PURE__ */ jsx(
-              IconButton,
+            /* @__PURE__ */ jsx(
+              ListFieldInsertAction,
               {
-                icon: IcBaselineContentCopy,
-                onClick: () => onCopyBlock(),
-                title: "Copy block",
-                disabled: isDragOverlay
+                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))
               }
             ),
-            !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  icon: IcRoundArrowUpward,
-                  onClick: () => onMove?.(-1),
-                  title: "Move up one position",
-                  disabled: firstRow || isDragOverlay
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  icon: IcRoundArrowDownward,
-                  onClick: () => onMove?.(1),
-                  title: "Move down one position",
-                  disabled: lastRow || isDragOverlay
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  icon: IcRoundClose,
-                  onClick: onDelete,
-                  title: "Delete block",
-                  disabled: isDragOverlay
-                }
-              )
-            ] })
+            /* @__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))
+              }
+            )
           ] })
-        ] }),
-        !isFolded && /* @__PURE__ */ jsx(Sink.Content, { children: /* @__PURE__ */ jsx(InputForm, { type }) })
-      ]
-    }
-  );
-}
-function ListCreateRow({
-  schema,
-  readOnly,
-  inline,
-  onCreate,
-  onPaste
-}) {
-  const [pasted] = useAtom(copyAtom);
-  const canPaste = pasted && entries(schema).some(([key]) => key === pasted._type);
-  return /* @__PURE__ */ jsx("div", { className: styles.create({ inline }), children: /* @__PURE__ */ jsxs(Create.Root, { disabled: readOnly, children: [
-    entries(schema).map(([key, type]) => {
-      return /* @__PURE__ */ jsx(
-        Create.Button,
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
         {
-          icon: getType(type).icon,
-          onClick: () => onCreate(key),
-          children: /* @__PURE__ */ jsx(TextLabel, { label: Type.label(type) })
-        },
-        key
-      );
-    }),
-    canPaste && /* @__PURE__ */ jsx(
-      Create.Button,
-      {
-        icon: IcBaselineContentPasteGo,
-        onClick: () => onPaste(pasted),
-        mod: "paste",
-        children: /* @__PURE__ */ jsx(TextLabel, { label: "Paste block" })
-      }
-    )
-  ] }) });
+          appearance: "plain",
+          "aria-label": `Remove ${label}`,
+          icon: IcRoundClose,
+          isDisabled: readOnly || isPreview,
+          onPress: onDelete,
+          size: "icon-small"
+        }
+      )
+    ] })
+  ] });
 }
-function ListInsertRow({ first, open, onInsert }) {
-  return /* @__PURE__ */ jsx("div", { className: styles.insert({ open, first }), children: /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: styles.insert.icon(),
-      onClick: onInsert,
-      title: "Insert new block",
-      type: "button",
-      children: /* @__PURE__ */ jsx(Icon, { icon: open ? IcRoundKeyboardArrowUp : IcRoundAdd })
+function dragRowItem(id) {
+  return {
+    "text/plain": id,
+    [LIST_FIELD_ROW_DRAG_TYPE]: id
+  };
+}
+function rowDropPosition(row, y) {
+  if (!row) return "after";
+  return y < row.offsetHeight / 2 ? "before" : "after";
+}
+async function getDraggedRowId(items, dragType) {
+  for (const item of items) {
+    if (item.kind === "text" && item.types.has(dragType) && item.getText) {
+      return item.getText(dragType);
     }
-  ) });
+  }
+  return null;
 }
-var layoutMeasuringConfig = {
-  strategy: LayoutMeasuringStrategy.Always
-};
-function ListInput({ field }) {
-  const { options, value, mutator, error } = useField(field);
-  const { schema, readOnly } = options;
-  const rows = value;
-  const ids = rows.map((row) => row._id);
-  const [, setPasted] = useAtom(copyAtom);
-  const [dragging, setDragging] = useState(null);
-  const [foldedItems, setFoldedItems] = useState(/* @__PURE__ */ new Set());
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates
-    })
+function ListFieldTypePicker({
+  className,
+  isDisabled,
+  items,
+  label,
+  onOpenChange,
+  pasted,
+  pasteLabel,
+  triggerIcon = IcRoundAdd,
+  onPaste,
+  onSelect
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { contains } = $ef182bb9912241d8$export$3274cf84b703fff({ sensitivity: "base" });
+  const pickerItems = useListFieldPickerItems(
+    items,
+    pasted,
+    pasteLabel,
+    onPaste
   );
-  function handleDragStart(event) {
-    const { active } = event;
-    setDragging(rows.find((row) => row._id === active.id) || null);
-  }
-  function handleDragEnd(event) {
-    const { active, over } = event;
-    if (!over || active.id === over.id) return;
-    if (!readOnly) mutator.move(ids.indexOf(active.id), ids.indexOf(over.id));
-    setDragging(null);
+  function handleOpenChange(nextOpen) {
+    setIsOpen(nextOpen);
+    onOpenChange?.(nextOpen);
   }
-  const isFolded = rows.every((row) => foldedItems.has(row._id));
-  const toggleFold = () => setFoldedItems(new Set(isFolded ? [] : rows.map((row) => row._id)));
-  return /* @__PURE__ */ jsx(
-    DndContext,
-    {
-      sensors,
-      collisionDetection: closestCenter,
-      onDragStart: handleDragStart,
-      onDragEnd: handleDragEnd,
-      layoutMeasuring: layoutMeasuringConfig,
-      children: /* @__PURE__ */ jsx(
-        InputLabel,
+  return /* @__PURE__ */ jsxs(DialogTrigger, { isOpen, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": label,
+        className: styles.ListFieldTypePicker.trigger(
+          dist_default.merge({ className })
+        ),
+        "data-open": isOpen ? "true" : void 0,
+        isDisabled,
+        size: "icon",
+        icon: triggerIcon
+      }
+    ),
+    /* @__PURE__ */ jsx(Popover, { className: styles.ListFieldTypePicker.popover(), children: /* @__PURE__ */ jsx(Dialog, { className: styles.ListFieldTypePicker.dialog(), children: /* @__PURE__ */ jsxs($4b38b5b75ecc6208$export$2f2b9559550c7bbc, { filter: contains, children: [
+      /* @__PURE__ */ jsx(
+        SearchField,
         {
-          ...options,
-          error,
-          icon: IcOutlineList,
-          isFolded: rows.length === 0 ? void 0 : isFolded,
-          toggleFold,
-          children: /* @__PURE__ */ jsx("div", { className: styles.root(), children: /* @__PURE__ */ jsxs("div", { className: styles.root.inner({ inline: options.inline }), children: [
-            /* @__PURE__ */ jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsxs(Sink.Root, { children: [
-              rows.map((row, i) => {
-                const type = options.schema[row[ListRow.type]];
-                return /* @__PURE__ */ jsx(
-                  FormRow,
-                  {
-                    field,
-                    rowId: row._id,
-                    type,
-                    readOnly,
-                    children: /* @__PURE__ */ jsx(
-                      ListInputRowSortable,
-                      {
-                        isFolded: foldedItems.has(row._id),
-                        row,
-                        schema,
-                        readOnly,
-                        onCopyBlock: () => {
-                          const data = mutator.read(row._id);
-                          setPasted(data);
-                        },
-                        onMove: (direction) => {
-                          if (readOnly) return;
-                          mutator.move(i, i + direction);
-                        },
-                        onDelete: () => {
-                          if (readOnly) return;
-                          mutator.remove(row._id);
-                        },
-                        onCreate: (type2) => {
-                          if (readOnly) return;
-                          mutator.push({ _type: type2 }, i);
-                        },
-                        onPasteBlock: (data) => {
-                          if (readOnly) return;
-                          const { _id, _index, ...rest } = data;
-                          mutator.push(rest, i);
-                        },
-                        toggleFold: () => {
-                          setFoldedItems((current) => {
-                            const result = new Set(current);
-                            if (result.has(row._id)) result.delete(row._id);
-                            else result.add(row._id);
-                            return result;
-                          });
-                        },
-                        firstRow: i === 0,
-                        lastRow: i === rows.length - 1
-                      }
-                    )
-                  },
-                  row._id
-                );
-              }),
-              /* @__PURE__ */ jsx(
-                ListCreateRow,
-                {
-                  schema,
-                  readOnly,
-                  onPaste: (data) => {
-                    const { _id, _index, ...rest } = data;
-                    mutator.push(rest);
-                  },
-                  onCreate: (type, data) => {
-                    if (readOnly) return;
-                    mutator.push({ _type: type });
-                  }
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ jsx(
-              DragOverlay,
-              {
-                dropAnimation: {
-                  ...defaultDropAnimation,
-                  dragSourceOpacity: 0.5
-                },
-                children: dragging ? /* @__PURE__ */ jsx(
-                  FormRow,
-                  {
-                    field,
-                    rowId: dragging._id,
-                    type: options.schema[dragging[ListRow.type]],
-                    readOnly,
-                    children: /* @__PURE__ */ jsx(
-                      ListInputRow,
-                      {
-                        row: dragging,
-                        schema,
-                        isDragOverlay: true,
-                        isFolded: foldedItems.has(dragging._id),
-                        onCopyBlock: () => {
-                        }
-                      },
-                      "overlay"
-                    )
-                  },
-                  "overlay"
-                ) : null
-              }
-            )
-          ] }) })
+          "aria-label": "Search types",
+          autoFocus: true,
+          className: styles.ListFieldTypePicker.search(),
+          hasIcon: true,
+          placeholder: "Search types..."
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        $928221da08ecbc62$export$41f133550aa26f48,
+        {
+          "aria-label": label,
+          className: styles.ListFieldTypePicker.list(),
+          items: pickerItems,
+          renderEmptyState: () => /* @__PURE__ */ jsx("div", { className: styles.ListFieldTypePicker.empty(), children: "No matching types" }),
+          children: (item) => /* @__PURE__ */ jsx(
+            ListFieldTypePickerAction,
+            {
+              item,
+              onPaste,
+              onSelect
+            },
+            item.id
+          )
         }
       )
+    ] }) }) })
+  ] });
+}
+function useListFieldPickerItems(items, pasted, pasteLabel, onPaste) {
+  return useMemo(() => {
+    const pasteItem = pasted && onPaste ? [
+      {
+        id: "paste",
+        label: pasteLabel || "Paste block",
+        icon: IcBaselineContentPasteGo,
+        pasted
+      }
+    ] : [];
+    return [
+      ...pasteItem,
+      ...items.map((item) => ({
+        id: item.id,
+        label: item.label,
+        icon: getType(item.type).icon || IcRoundAdd,
+        typeItem: item
+      }))
+    ];
+  }, [items, onPaste, pasteLabel, pasted]);
+}
+function ListFieldTypePickerAction({
+  item,
+  onPaste,
+  onSelect
+}) {
+  const overlay = useContext($f2ff30fde7b014be$export$d2f961adcb0afbe);
+  return /* @__PURE__ */ jsxs(
+    $928221da08ecbc62$export$a11e76429ed99b4,
+    {
+      className: styles.ListFieldTypePicker.item(),
+      id: item.id,
+      onAction: () => {
+        if (item.pasted) onPaste?.(item.pasted);
+        if (item.typeItem) onSelect(item.typeItem);
+        overlay?.close();
+      },
+      textValue: item.label,
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            "aria-hidden": true,
+            icon: item.icon,
+            className: styles.ListFieldTypePicker.item.icon()
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: item.label })
+      ]
     }
   );
 }
 export {
-  ListInput
+  ListFieldView,
+  insertIndex,
+  reorderIndex
 };