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

package/dist/field/link/LinkField.view.js

@@ -1,6 +1,6 @@
 import {
   unwrap
-} from "../../chunks/chunk-TIJTT5ZI.js";
+} from "../../chunks/chunk-G43W7AME.js";
 import {
   useAtomValueRaw,
   useAtomValueRawSync,
@@ -23,25 +23,31 @@ import {
   Icon,
   SortableList,
   SortableListItemTitle,
+  SortableListItemTrigger,
+  SortableListItemInsert,
+  SortableListItemSettings,
   SortableListAdd,
-  SortableListDragPreview,
   ListError,
   ListLabel,
   SortableListItem,
   SortableListItemActions,
   SortableListItemContent,
   SortableListItemDescription,
-  SortableListHandle,
   SortableListItemToggle,
   SortableListItemFooter,
   SortableListItemHeader,
-  SortableListItemSettings,
   Popover,
   PopoverAnchor,
   PopoverContent,
-  PopoverTrigger,
   Select,
   SelectItem,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetSection,
+  SheetTitle,
   TextField
 } from "alinea/components";
 import { Config } from "alinea/core/Config";
@@ -51,6 +57,10 @@ import { Reference } from "alinea/core/Reference";
 import { Root } from "alinea/core/Root";
 import { Type } from "alinea/core/Type";
 import { Badge } from "alinea/components";
+import {
+  BlockSheet,
+  useBlockSheet
+} from "alinea/dashboard/app/BlockSheet";
 import { CompactRecordFields } from "alinea/dashboard/app/CompactField";
 import { NodeEditor } from "alinea/dashboard/app/NodeEditor";
 import { configAtom, graphAtom } from "alinea/dashboard/atoms/core";
@@ -77,9 +87,9 @@ import {
   IcRoundAttachFile,
   IcRoundAdd,
   IcRoundClose,
+  IcRoundDelete,
   IcRoundEdit,
   IcRoundLink,
-  IcRoundMoreHoriz,
   IcRoundOpenInNew,
   IcRoundPanorama
 } from "alinea/dashboard/icons";
@@ -87,67 +97,33 @@ import { useId, useMemo, useRef, useState } from "react";
 
 // src/field/link/LinkField.module.css
 var LinkField_default = {
-  "LinkFieldView-inputHeader": "alinea-LinkFieldView-inputHeader",
-  "LinkFieldViewInputHeader": "alinea-LinkFieldView-inputHeader",
-  "LinkFieldView-skeleton": "alinea-LinkFieldView-skeleton",
-  "LinkFieldViewSkeleton": "alinea-LinkFieldView-skeleton",
+  "LinkFieldView-previewImagePlaceholder": "alinea-LinkFieldView-previewImagePlaceholder",
+  "LinkFieldViewPreviewImagePlaceholder": "alinea-LinkFieldView-previewImagePlaceholder",
+  "LinkFieldView-previewImage": "alinea-LinkFieldView-previewImage",
+  "LinkFieldViewPreviewImage": "alinea-LinkFieldView-previewImage",
+  "LinkFieldView-anchorOption-label": "alinea-LinkFieldView-anchorOption-label",
+  "LinkFieldViewAnchorOptionLabel": "alinea-LinkFieldView-anchorOption-label",
   "LinkFieldView-metaLabel": "alinea-LinkFieldView-metaLabel",
   "LinkFieldViewMetaLabel": "alinea-LinkFieldView-metaLabel",
   "LinkFieldView-anchorOption-location": "alinea-LinkFieldView-anchorOption-location",
   "LinkFieldViewAnchorOptionLocation": "alinea-LinkFieldView-anchorOption-location",
-  "is-wide": "alinea-is-wide",
-  "isWide": "alinea-is-wide",
-  "LinkFieldView-settingsSeparator": "alinea-LinkFieldView-settingsSeparator",
-  "LinkFieldViewSettingsSeparator": "alinea-LinkFieldView-settingsSeparator",
-  "LinkFieldView-label": "alinea-LinkFieldView-label",
-  "LinkFieldViewLabel": "alinea-LinkFieldView-label",
-  "is-missing": "alinea-is-missing",
-  "isMissing": "alinea-is-missing",
-  "LinkFieldView-image": "alinea-LinkFieldView-image",
-  "LinkFieldViewImage": "alinea-LinkFieldView-image",
-  "LinkFieldView-rowAction": "alinea-LinkFieldView-rowAction",
-  "LinkFieldViewRowAction": "alinea-LinkFieldView-rowAction",
-  "LinkFieldView-labelText": "alinea-LinkFieldView-labelText",
-  "LinkFieldViewLabelText": "alinea-LinkFieldView-labelText",
-  "LinkFieldView-meta": "alinea-LinkFieldView-meta",
-  "LinkFieldViewMeta": "alinea-LinkFieldView-meta",
-  "LinkFieldView-icon": "alinea-LinkFieldView-icon",
-  "LinkFieldViewIcon": "alinea-LinkFieldView-icon",
-  "LinkFieldView-type": "alinea-LinkFieldView-type",
-  "LinkFieldViewType": "alinea-LinkFieldView-type",
-  "is-loading": "alinea-is-loading",
-  "isLoading": "alinea-is-loading",
-  "LinkFieldView-previewImagePlaceholder": "alinea-LinkFieldView-previewImagePlaceholder",
-  "LinkFieldViewPreviewImagePlaceholder": "alinea-LinkFieldView-previewImagePlaceholder",
   "LinkFieldView-skeleton-pulse": "alinea-LinkFieldView-skeleton-pulse",
   "LinkFieldViewSkeletonPulse": "alinea-LinkFieldView-skeleton-pulse",
+  "LinkFieldView-type": "alinea-LinkFieldView-type",
+  "LinkFieldViewType": "alinea-LinkFieldView-type",
   "LinkFieldView-anchorOption": "alinea-LinkFieldView-anchorOption",
   "LinkFieldViewAnchorOption": "alinea-LinkFieldView-anchorOption",
+  "LinkFieldView-icon": "alinea-LinkFieldView-icon",
+  "LinkFieldViewIcon": "alinea-LinkFieldView-icon",
   "LinkFieldView-create": "alinea-LinkFieldView-create",
   "LinkFieldViewCreate": "alinea-LinkFieldView-create",
   "LinkFieldView-createButton": "alinea-LinkFieldView-createButton",
-  "LinkFieldViewCreateButton": "alinea-LinkFieldView-createButton",
-  "LinkFieldView-imagePlaceholder": "alinea-LinkFieldView-imagePlaceholder",
-  "LinkFieldViewImagePlaceholder": "alinea-LinkFieldView-imagePlaceholder",
-  "LinkFieldView-anchorOption-label": "alinea-LinkFieldView-anchorOption-label",
-  "LinkFieldViewAnchorOptionLabel": "alinea-LinkFieldView-anchorOption-label",
-  "LinkFieldView-previewImage": "alinea-LinkFieldView-previewImage",
-  "LinkFieldViewPreviewImage": "alinea-LinkFieldView-previewImage",
-  "LinkFieldView-title": "alinea-LinkFieldView-title",
-  "LinkFieldViewTitle": "alinea-LinkFieldView-title"
+  "LinkFieldViewCreateButton": "alinea-LinkFieldView-createButton"
 };
 
 // src/field/link/LinkField.view.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var styles = dist_default(LinkField_default);
-var LINK_FIELD_ROW_DRAG_TYPE = "application/x-alinea-link-field-row";
-function LinkRowText({ node }) {
-  const type = useAtomValueRaw(node.field("_type"));
-  if (type === "entry" || type === "image" || type === "file")
-    return /* @__PURE__ */ jsx(EntryRowLayer, { node, textOnly: true });
-  if (type === "url") return /* @__PURE__ */ jsx(UrlRow, { node, textOnly: true });
-  return null;
-}
 function isPickerType(type) {
   return type === "entry" || type === "url" || type === "file" || type === "image";
 }
@@ -162,156 +138,11 @@ function getPickerType(type) {
 function getEntryPickerType(type) {
   return type === "url" ? "entry" : type;
 }
-function EntryRowLayer({ hasFields, node, textOnly }) {
-  const entryId = useAtomValueRaw(node.field("_entry"));
-  const locale = useAtomValueRaw(node.field("_locale"));
-  const type = useAtomValueRaw(node.field("_type"));
-  if (!entryId) return null;
-  return /* @__PURE__ */ jsx(
-    EntryRow,
-    {
-      entryId,
-      locale,
-      hasFields,
-      image: type === "image",
-      textOnly
-    }
-  );
-}
-function EntryRow({
-  entryId,
-  locale,
-  hasFields,
-  image,
-  textOnly
-}) {
-  const state = useLinkEntryState(entryId, locale);
-  if (state.state === "hasData" && state.data)
-    return /* @__PURE__ */ jsx(
-      LoadedEntryRow,
-      {
-        entry: state.data,
-        hasFields,
-        image,
-        textOnly
-      }
-    );
-  if (state.state !== "loading")
-    return /* @__PURE__ */ jsx(
-      MissingEntryRow,
-      {
-        entryId,
-        hasFields,
-        image,
-        textOnly
-      }
-    );
-  return /* @__PURE__ */ jsx(
-    EntryLoadingRow,
-    {
-      hasFields,
-      image,
-      pending: true,
-      textOnly
-    }
-  );
-}
 function useLinkEntryState(entryId, locale) {
   const scope = useOptionalEntryAtoms();
   const linkLocale = locale ?? scope?.localeData.requestedLocale ?? void 0;
   return useAtomValueRawSync(linkEntryAtoms(entryId, linkLocale));
 }
-function MissingEntryRow({
-  entryId,
-  hasFields,
-  image,
-  textOnly
-}) {
-  return /* @__PURE__ */ jsxs("span", { className: styles.LinkFieldView.label({ missing: true }), children: [
-    image && !textOnly && /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: styles.LinkFieldView.imagePlaceholder(),
-        "data-has-fields": hasFields ? "true" : void 0,
-        "aria-hidden": "true"
-      }
-    ),
-    /* @__PURE__ */ jsxs("span", { className: styles.LinkFieldView.labelText(), children: [
-      /* @__PURE__ */ jsx("span", { className: styles.LinkFieldView.title(), children: "Missing entry" }),
-      !textOnly && /* @__PURE__ */ jsx("span", { className: styles.LinkFieldView.meta(), children: entryId })
-    ] })
-  ] });
-}
-function EntryLoadingRow({
-  hasFields,
-  image,
-  pending,
-  textOnly
-}) {
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: styles.LinkFieldView.label({ loading: true }),
-      "aria-busy": pending || void 0,
-      children: [
-        image && !textOnly && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: styles.LinkFieldView.imagePlaceholder(),
-            "data-has-fields": hasFields ? "true" : void 0,
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { className: styles.LinkFieldView.labelText(), children: [
-          /* @__PURE__ */ jsx("span", { className: styles.LinkFieldView.skeleton({ wide: true }) }),
-          /* @__PURE__ */ jsx("span", { className: styles.LinkFieldView.skeleton() })
-        ] })
-      ]
-    }
-  );
-}
-function LoadedEntryRow({
-  entry,
-  hasFields,
-  image,
-  textOnly
-}) {
-  return /* @__PURE__ */ jsxs("span", { className: styles.LinkFieldView.label(), children: [
-    image && !textOnly && /* @__PURE__ */ jsx(EntryRowImage, { entry, hasFields }),
-    /* @__PURE__ */ jsxs("span", { className: styles.LinkFieldView.labelText(), children: [
-      /* @__PURE__ */ jsx("span", { className: styles.LinkFieldView.title(), children: entry.title }),
-      entry.parents.length > 0 ? /* @__PURE__ */ jsx("span", { className: styles.LinkFieldView.meta(), children: /* @__PURE__ */ jsx(EntryParents, { parents: entry.parents }) }) : null
-    ] })
-  ] });
-}
-function EntryRowImage({ entry, hasFields }) {
-  if (entry.preview) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        alt: "",
-        className: styles.LinkFieldView.image(),
-        "data-has-fields": hasFields ? "true" : void 0,
-        src: entry.preview
-      }
-    );
-  }
-  return null;
-}
-function UrlRow({ node, textOnly }) {
-  const title = useAtomValueRaw(node.field("_title"));
-  const url = useAtomValueRaw(node.field("_url"));
-  return /* @__PURE__ */ jsxs("span", { className: styles.LinkFieldView.label(), children: [
-    /* @__PURE__ */ jsx("span", { className: styles.LinkFieldView.title(), children: textOnly ? title || url : title || url }),
-    !textOnly && title && url && /* @__PURE__ */ jsx("span", { className: styles.LinkFieldView.meta(), children: url })
-  ] });
-}
-function EntryParents({ parents }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: parents.map((parent, index) => /* @__PURE__ */ jsxs("span", { children: [
-    parent.title,
-    index < parents.length - 1 ? " / " : ""
-  ] }, parent.id)) });
-}
 function getLinkIcon(type) {
   if (type === "url") return IcRoundOpenInNew;
   if (type === "file") return IcRoundAttachFile;
@@ -740,6 +571,7 @@ function LinkRowActions({
       {
         "aria-label": "Replace link",
         variant: "ghost",
+        size: "sm",
         icon: IcRoundEdit,
         disabled: isDisabled,
         onClick: () => {
@@ -770,6 +602,7 @@ function LinkLabelField({ isDisabled, node, value }) {
     ResolvedLinkLabelField,
     {
       customLabel,
+      fallbackLabel: "_title" in value ? value._title : void 0,
       isDisabled,
       onChange: setCustomLabel
     }
@@ -849,60 +682,46 @@ function EntryAnchorFieldInner({
   );
 }
 function LinkMetaLabel({ className, node, value }) {
+  return /* @__PURE__ */ jsx(LinkLabel, { node, value, children: (label) => label && /* @__PURE__ */ jsx(SortableListItemDescription, { className, children: label }) });
+}
+function LinkLabel({ node, value, children }) {
   const customLabel = useAtomValueRaw(node.field("_label"));
-  if ("_entry" in value) {
+  if ("_entry" in value)
     return /* @__PURE__ */ jsx(
-      EntryLinkMetaLabel,
+      EntryLinkLabel,
       {
-        className,
         customLabel,
         entryId: value._entry,
-        locale: value._locale
+        locale: value._locale,
+        children
       }
     );
-  }
-  return /* @__PURE__ */ jsx(
-    ResolvedLinkMetaLabel,
-    {
-      className,
-      label: customLabel || linkFallbackLabel(value)
-    }
-  );
+  return children(trimmed(customLabel || linkFallbackLabel(value)));
 }
 function linkFallbackLabel(value) {
   if ("_title" in value && value._title) return value._title;
   if ("_url" in value && value._url) return value._url;
   return void 0;
 }
-function EntryLinkMetaLabel({
-  className,
+function trimmed(label) {
+  return label?.trim() || void 0;
+}
+function EntryLinkLabel({
   customLabel,
   entryId,
-  locale
+  locale,
+  children
 }) {
   const state = useLinkEntryState(entryId, locale);
-  if (state.state !== "hasData" || !state.data) {
-    return /* @__PURE__ */ jsx(ResolvedLinkMetaLabel, { className, label: customLabel });
-  }
-  return /* @__PURE__ */ jsx(
-    ResolvedLinkMetaLabel,
-    {
-      className,
-      label: customLabel ?? state.data.title
-    }
-  );
-}
-function ResolvedLinkMetaLabel({ className, label }) {
-  const value = label?.trim();
-  if (!value) return null;
-  return /* @__PURE__ */ jsx(SortableListItemDescription, { className, children: value });
+  const title = state.state === "hasData" ? state.data?.title : void 0;
+  return children(trimmed(customLabel ?? title));
 }
 function LinkTypeBadge({ picker, type, value, ...props }) {
   const fallbackIcon = getLinkIcon(type);
   const fallbackLabel = picker?.label ?? type;
   if (type === "image") return null;
   if (type === "file") {
-    return /* @__PURE__ */ jsx(Badge, { ...props, icon: IcRoundAttachFile, size: "sm", children: "File" });
+    return /* @__PURE__ */ jsx(Badge, { ...props, icon: IcRoundAttachFile, size: "sm", color: "primary", children: "File" });
   }
   if ("_entry" in value) {
     return /* @__PURE__ */ jsx(
@@ -916,7 +735,7 @@ function LinkTypeBadge({ picker, type, value, ...props }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx(Badge, { ...props, icon: fallbackIcon, size: "sm", children: fallbackLabel });
+  return /* @__PURE__ */ jsx(Badge, { ...props, icon: fallbackIcon, size: "sm", color: "primary", children: fallbackLabel });
 }
 function EntryLinkImagePreview({ entryId }) {
   const state = useLinkEntryState(entryId);
@@ -943,7 +762,7 @@ function EntryLinkTypeBadge({
   const entry = state.state === "hasData" ? state.data : void 0;
   const type = entry ? config.schema[entry.type] : void 0;
   if (!type) {
-    return /* @__PURE__ */ jsx(Badge, { ...props, icon: fallbackIcon, size: "sm", children: fallbackLabel });
+    return /* @__PURE__ */ jsx(Badge, { ...props, icon: fallbackIcon, size: "sm", color: "primary", children: fallbackLabel });
   }
   return /* @__PURE__ */ jsx(
     Badge,
@@ -954,6 +773,7 @@ function EntryLinkTypeBadge({
       ),
       icon: getType(type).icon || IcRoundLink,
       size: "sm",
+      color: "primary",
       children: Type.label(type)
     }
   );
@@ -985,7 +805,6 @@ function ResolvedLinkLabelField({
   return /* @__PURE__ */ jsx(
     TextField,
     {
-      autoFocus: true,
       disabled: isDisabled,
       label: "Label",
       onValueChange: onChange,
@@ -993,17 +812,6 @@ function ResolvedLinkLabelField({
     }
   );
 }
-function LinkSettingsButton() {
-  return /* @__PURE__ */ jsx(
-    PopoverTrigger,
-    {
-      variant: "ghost",
-      "aria-label": "Link settings",
-      icon: IcRoundMoreHoriz,
-      size: "icon-sm"
-    }
-  );
-}
 function LinkRowReferenceActions({
   closeActions,
   type,
@@ -1030,6 +838,7 @@ function UrlLinkRowAction({ closeActions, url }) {
     {
       "aria-label": "Open link",
       variant: "ghost",
+      size: "sm",
       icon: IcRoundOpenInNew,
       disabled: !href,
       onClick: () => {
@@ -1060,6 +869,7 @@ function EntryLinkRowActions({
       {
         "aria-label": "Open link",
         variant: "ghost",
+        size: "sm",
         icon: IcRoundOpenInNew,
         disabled: true,
         children: "Open link"
@@ -1075,6 +885,7 @@ function EntryLinkRowActions({
     {
       "aria-label": "Open link",
       variant: "ghost",
+      size: "sm",
       icon: IcRoundOpenInNew,
       onClick: () => {
         window.open(href, "_blank", "noopener,noreferrer");
@@ -1084,37 +895,20 @@ function EntryLinkRowActions({
     }
   );
 }
-function useLinkRowSettings() {
-  const rowRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const [anchoredToRow, setAnchoredToRow] = useState(false);
-  return {
-    rowRef,
-    open,
-    anchoredToRow,
-    openFromRow() {
-      setAnchoredToRow(true);
-      setOpen(true);
-    },
-    onOpenChange(open2) {
-      if (open2) setAnchoredToRow(false);
-      setOpen(open2);
-    },
-    close() {
-      setOpen(false);
-    }
-  };
-}
-function LinkRowButton({ children, settings }) {
+function LinkRowButton({ children, sheet, onEdit, onOpen }) {
   const descriptionId = useId();
+  function toggleSheet() {
+    if (!sheet.open) onOpen?.();
+    sheet.toggle();
+  }
   return /* @__PURE__ */ jsxs(
-    Button,
+    SortableListItemTrigger,
     {
-      ref: settings.rowRef,
+      ...sheet.triggerProps,
       "aria-describedby": descriptionId,
-      variant: "ghost",
-      className: styles.LinkFieldView.rowAction(),
-      onClick: settings.openFromRow,
+      "aria-expanded": sheet.available ? sheet.open : void 0,
+      more: sheet.available,
+      onClick: sheet.available ? toggleSheet : onEdit,
       children: [
         children,
         /* @__PURE__ */ jsx("span", { id: descriptionId, hidden: true, children: "Edit link" })
@@ -1122,53 +916,59 @@ function LinkRowButton({ children, settings }) {
     }
   );
 }
-function LinkRowSettings({
+function LinkSheet({
   node,
   onEdit,
+  onRemove,
   picker,
   readOnly,
-  settings,
+  sheet,
   type,
   value
 }) {
-  return /* @__PURE__ */ jsxs(Popover, { open: settings.open, onOpenChange: settings.onOpenChange, children: [
-    /* @__PURE__ */ jsx(LinkSettingsButton, {}),
-    settings.anchoredToRow && /* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: settings.rowRef }),
-    /* @__PURE__ */ jsxs(
-      PopoverContent,
+  const close = () => sheet.setOpen(false);
+  return /* @__PURE__ */ jsx(BlockSheet, { id: value[Reference.id], children: /* @__PURE__ */ jsxs(SheetContent, { onClose: close, children: [
+    /* @__PURE__ */ jsxs(SheetHeader, { children: [
+      /* @__PURE__ */ jsx(LinkTypeBadge, { picker, type, value }),
+      /* @__PURE__ */ jsx(SheetTitle, { children: /* @__PURE__ */ jsx(LinkLabel, { node, value, children: (label) => label ?? "Link" }) }),
+      /* @__PURE__ */ jsx(SheetClose, { "aria-label": "Close link settings" })
+    ] }),
+    /* @__PURE__ */ jsx(SheetBody, { children: /* @__PURE__ */ jsxs(SheetSection, { children: [
+      /* @__PURE__ */ jsx(LinkLabelField, { isDisabled: readOnly, node, value }),
+      /* @__PURE__ */ jsx(EntryAnchorField, { isDisabled: readOnly, node, value }),
+      /* @__PURE__ */ jsx(
+        EntryLinkSuffixField,
+        {
+          isDisabled: readOnly,
+          node,
+          value
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(SheetFooter, { children: /* @__PURE__ */ jsx(
+      LinkRowActions,
       {
-        "aria-label": "Link settings",
-        side: "bottom",
-        align: settings.anchoredToRow ? "start" : "end",
-        children: [
-          /* @__PURE__ */ jsx(SortableListItemSettings, { variant: "actions", children: /* @__PURE__ */ jsx(
-            LinkRowActions,
-            {
-              closeActions: settings.close,
-              isDisabled: readOnly,
-              onEdit,
-              picker,
-              type,
-              value
-            }
-          ) }),
-          /* @__PURE__ */ jsx("hr", { className: styles.LinkFieldView.settingsSeparator() }),
-          /* @__PURE__ */ jsxs(SortableListItemSettings, { children: [
-            /* @__PURE__ */ jsx(LinkLabelField, { isDisabled: readOnly, node, value }),
-            /* @__PURE__ */ jsx(EntryAnchorField, { isDisabled: readOnly, node, value }),
-            /* @__PURE__ */ jsx(
-              EntryLinkSuffixField,
-              {
-                isDisabled: readOnly,
-                node,
-                value
-              }
-            )
-          ] })
-        ]
+        closeActions: close,
+        isDisabled: readOnly,
+        onEdit,
+        picker,
+        type,
+        value
       }
-    )
-  ] });
+    ) }),
+    /* @__PURE__ */ jsx(SheetFooter, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        color: "destructive",
+        icon: IcRoundDelete,
+        disabled: readOnly,
+        onClick: onRemove,
+        children: "Remove"
+      }
+    ) })
+  ] }) });
 }
 function SingleLinkRow({ field, node, value }) {
   const [, setValue] = useField(field);
@@ -1177,7 +977,7 @@ function SingleLinkRow({ field, node, value }) {
   const picker = options.pickers[type];
   const hasFields = Boolean(picker?.fields);
   const imagePreviewEntryId = type === "image" && "_entry" in value ? value._entry : void 0;
-  const settings = useLinkRowSettings();
+  const sheet = useBlockSheet(value[Reference.id]);
   const [editOpen, setEditOpen] = useState(false);
   function removeLink() {
     setValue(void 0);
@@ -1204,35 +1004,35 @@ function SingleLinkRow({ field, node, value }) {
     /* @__PURE__ */ jsx(EntryAnchorBadge, { node, value })
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(SortableListItem, { "aria-label": "Link item 1", children: [
-      /* @__PURE__ */ jsxs(SortableListItemHeader, { className: styles.LinkFieldView.inputHeader(), children: [
-        /* @__PURE__ */ jsx(SortableListItemTitle, { children: options.readOnly ? rowContent : /* @__PURE__ */ jsx(LinkRowButton, { settings, children: rowContent }) }),
-        !options.readOnly && /* @__PURE__ */ jsxs(SortableListItemActions, { children: [
-          /* @__PURE__ */ jsx(
-            LinkRowSettings,
-            {
-              node,
-              onEdit: () => setEditOpen(true),
-              picker,
-              settings,
-              type,
-              value
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              "aria-label": "Remove link",
-              icon: IcRoundClose,
-              onClick: removeLink,
-              size: "icon-sm"
-            }
-          )
-        ] })
+    /* @__PURE__ */ jsxs(SortableListItem, { "aria-label": "Link item 1", current: sheet.open, children: [
+      /* @__PURE__ */ jsxs(SortableListItemHeader, { children: [
+        /* @__PURE__ */ jsx(SortableListItemTitle, { children: options.readOnly ? rowContent : /* @__PURE__ */ jsx(LinkRowButton, { sheet, onEdit: () => setEditOpen(true), children: rowContent }) }),
+        !options.readOnly && /* @__PURE__ */ jsx(SortableListItemActions, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            "aria-label": "Remove link",
+            icon: IcRoundClose,
+            onClick: removeLink,
+            size: "icon-sm"
+          }
+        ) })
       ] }),
       hasFields && /* @__PURE__ */ jsx(SortableListItemContent, { children: /* @__PURE__ */ jsx(LinkRowEditor, { node, picker }) })
     ] }),
+    /* @__PURE__ */ jsx(
+      LinkSheet,
+      {
+        node,
+        onEdit: () => setEditOpen(true),
+        onRemove: removeLink,
+        picker,
+        readOnly: options.readOnly,
+        sheet,
+        type,
+        value
+      }
+    ),
     picker && /* @__PURE__ */ jsx(
       LinkPickerDialog,
       {
@@ -1254,18 +1054,19 @@ function MultipleLinkRow({
   onToggleRow,
   value
 }) {
-  const [, setValue] = useField(field);
+  const [links, setValue] = useField(field);
   const options = useFieldOptions(field);
+  const canCreate = !options.max || (links?.length ?? 0) < options.max;
   const type = getPickerType(value[Reference.type]);
   const picker = options.pickers[type];
   const hasFields = Boolean(picker?.fields);
   const imagePreviewEntryId = type === "image" && "_entry" in value ? value._entry : void 0;
   const itemId = value[Reference.id];
   const readOnly = Boolean(options.readOnly);
-  const settings = useLinkRowSettings();
+  const sheet = useBlockSheet(value[Reference.id]);
   const [editOpen, setEditOpen] = useState(false);
   function removeLink() {
-    setValue((links) => links.filter((_, currentIndex) => currentIndex !== index));
+    setValue((links2) => links2.filter((_, currentIndex) => currentIndex !== index));
   }
   const rowContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     imagePreviewEntryId && /* @__PURE__ */ jsx(EntryLinkImagePreview, { entryId: imagePreviewEntryId }),
@@ -1285,17 +1086,18 @@ function MultipleLinkRow({
       SortableListItem,
       {
         "aria-label": `Link item ${index + 1}`,
-        dragPreview: /* @__PURE__ */ jsx(
-          SortableListDragPreview,
-          {
-            icon: getLinkIcon(type),
-            label: /* @__PURE__ */ jsx(LinkRowText, { node })
-          }
-        ),
         id: itemId,
+        current: sheet.open,
         children: [
+          !readOnly && canCreate && /* @__PURE__ */ jsx(
+            LinkInsertGap,
+            {
+              field,
+              index,
+              label: `Insert link before link item ${index + 1}`
+            }
+          ),
           /* @__PURE__ */ jsxs(SortableListItemHeader, { children: [
-            !readOnly && /* @__PURE__ */ jsx(SortableListHandle, { "aria-label": `Drag link item ${index + 1}` }),
             /* @__PURE__ */ jsxs(SortableListItemTitle, { children: [
               hasFields && /* @__PURE__ */ jsx(
                 SortableListItemToggle,
@@ -1305,33 +1107,29 @@ function MultipleLinkRow({
                   onClick: () => onToggleRow(itemId)
                 }
               ),
-              readOnly ? rowContent : /* @__PURE__ */ jsx(LinkRowButton, { settings, children: rowContent })
-            ] }),
-            /* @__PURE__ */ jsxs(SortableListItemActions, { children: [
-              /* @__PURE__ */ jsx(
-                LinkRowSettings,
+              readOnly ? rowContent : /* @__PURE__ */ jsx(
+                LinkRowButton,
                 {
-                  node,
+                  sheet,
                   onEdit: () => setEditOpen(true),
-                  picker,
-                  readOnly,
-                  settings,
-                  type,
-                  value
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  "aria-label": "Remove link",
-                  icon: IcRoundClose,
-                  disabled: readOnly,
-                  onClick: removeLink,
-                  size: "icon-sm"
+                  onOpen: () => {
+                    if (hasFields && !expanded) onToggleRow(itemId);
+                  },
+                  children: rowContent
                 }
               )
-            ] })
+            ] }),
+            /* @__PURE__ */ jsx(SortableListItemActions, { children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                "aria-label": "Remove link",
+                icon: IcRoundClose,
+                disabled: readOnly,
+                onClick: removeLink,
+                size: "icon-sm"
+              }
+            ) })
           ] }),
           expanded && hasFields && /* @__PURE__ */ jsx(SortableListItemContent, { children: /* @__PURE__ */ jsx(LinkRowEditor, { node, picker }) }),
           !expanded && picker?.fields && /* @__PURE__ */ jsx(SortableListItemFooter, { children: /* @__PURE__ */ jsx(
@@ -1345,6 +1143,19 @@ function MultipleLinkRow({
         ]
       }
     ),
+    /* @__PURE__ */ jsx(
+      LinkSheet,
+      {
+        node,
+        onEdit: () => setEditOpen(true),
+        onRemove: removeLink,
+        picker,
+        readOnly,
+        sheet,
+        type,
+        value
+      }
+    ),
     picker && /* @__PURE__ */ jsx(
       LinkPickerDialog,
       {
@@ -1352,7 +1163,7 @@ function MultipleLinkRow({
         onOpenChange: setEditOpen,
         onPick: (link) => {
           setValue(
-            (links) => links.map(
+            (links2) => links2.map(
               (current, currentIndex) => currentIndex === index ? link : current
             )
           );
@@ -1364,6 +1175,70 @@ function MultipleLinkRow({
     )
   ] });
 }
+function LinkInsertGap({ field, index, label }) {
+  const options = useFieldOptions(field);
+  const [, setValue] = useField(field);
+  const ref = useRef(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [picking, setPicking] = useState(null);
+  const types = Object.keys(options.pickers);
+  const picker = picking ? options.pickers[picking] : void 0;
+  function pick(type) {
+    setMenuOpen(false);
+    setPicking(type);
+  }
+  function insert(picked) {
+    setValue((links) => {
+      const current = links ?? [];
+      const linked = new Set(
+        current.flatMap((row) => "_entry" in row ? [row._entry] : [])
+      );
+      const rows = options.allowDuplicates ? picked : picked.filter((row) => !("_entry" in row) || !linked.has(row._entry));
+      return [...current.slice(0, index), ...rows, ...current.slice(index)];
+    });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SortableListItemInsert,
+      {
+        ref,
+        "aria-label": label,
+        "aria-haspopup": "dialog",
+        "aria-expanded": menuOpen || picking !== null,
+        onClick: () => {
+          if (types.length === 1) pick(types[0]);
+          else setMenuOpen(true);
+        }
+      }
+    ),
+    types.length > 1 && /* @__PURE__ */ jsxs(Popover, { open: menuOpen, onOpenChange: setMenuOpen, children: [
+      /* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: ref }),
+      /* @__PURE__ */ jsx(PopoverContent, { "aria-label": label, side: "bottom", align: "start", children: /* @__PURE__ */ jsx(SortableListItemSettings, { variant: "actions", children: types.map((type) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          icon: options.isEntryField ? IcRoundAdd : getLinkIcon(type),
+          onClick: () => pick(type),
+          children: options.isEntryField ? options.label : options.pickers[type].label
+        },
+        type
+      )) }) })
+    ] }),
+    picking && picker && /* @__PURE__ */ jsx(
+      LinkPickerDialog,
+      {
+        isOpen: true,
+        onOpenChange: (open) => {
+          if (!open) setPicking(null);
+        },
+        onPick: (link) => insert([link]),
+        onPickMany: insert,
+        picker,
+        type: picking
+      }
+    )
+  ] });
+}
 function SingleLinkFieldView({ field }) {
   const [value] = useField(field);
   const options = useFieldOptions(field);
@@ -1383,7 +1258,7 @@ function SingleLinkFieldView({ field }) {
         value: selectedValue
       }
     ),
-    isEmpty && !readOnly && /* @__PURE__ */ jsx(SortableListAdd, { className: styles.LinkFieldView.inputHeader(), children: /* @__PURE__ */ jsx(SingleLinkCreateActions, { field }) })
+    isEmpty && !readOnly && /* @__PURE__ */ jsx(SortableListAdd, { children: /* @__PURE__ */ jsx(SingleLinkCreateActions, { field }) })
   ] });
   return /* @__PURE__ */ jsx(
     Field,
@@ -1454,7 +1329,6 @@ function MultipleLinksFieldView({ field }) {
     SortableList,
     {
       "aria-label": options.label || "Links",
-      dragType: LINK_FIELD_ROW_DRAG_TYPE,
       onReorder: readOnly ? void 0 : moveRow,
       children: [
         nodes.map((node, index) => {