alinea 1.7.0 → 2.0.0-preview.0

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

@@ -1,419 +1,1501 @@
+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";
+  unwrap
+} from "../../chunks/chunk-STAJCW4Z.js";
+import {
+  useAtomValue,
+  useSetAtom
+} from "../../chunks/chunk-U4VOHNR2.js";
+import {
+  atom
+} from "../../chunks/chunk-Y7XOMJOC.js";
+import "../../chunks/chunk-IWN3T3FL.js";
+import "../../chunks/chunk-RKDPDEF7.js";
+import "../../chunks/chunk-SJBZFMQ2.js";
+import {
+  $5d3a17cc2564e64f$export$905ab40ac2179daa,
+  $74812c42150b3de8$export$7941f8aafa4b6021,
+  $f302ef02e940a6f8$export$ccdee5eaf73cf661
+} from "../../chunks/chunk-YK3OSMDM.js";
 import {
   dist_default
-} from "../../chunks/chunk-A5O3N2GS.js";
-import "../../chunks/chunk-NZLE2WMY.js";
+} from "../../chunks/chunk-I4OYYAX5.js";
+import "../../chunks/chunk-CQ52GEHY.js";
 
 // src/field/link/LinkField.view.tsx
-import { Entry } from "alinea/core/Entry";
+import {
+  Button,
+  DialogTrigger,
+  Icon,
+  List,
+  ListCreateRow,
+  ListDragPreview,
+  ListLabel,
+  ListRow,
+  ListRowActions,
+  ListRowBadges,
+  ListRowBody,
+  ListRowDrag,
+  ListRowDragHandle,
+  ListRowFoldButton,
+  ListRowFooter,
+  ListRowHeader,
+  ListRowSettings,
+  MenuSeparator,
+  Popover,
+  Select,
+  SelectItem,
+  TextField
+} from "alinea/components";
+import { createId } from "alinea/core/Id";
+import { getType, getWorkspace } from "alinea/core/Internal";
 import { Reference } from "alinea/core/Reference";
-import { ListRow } from "alinea/core/shape/ListShape";
-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 { useGraph } from "alinea/dashboard/hook/UseGraph";
-import { useLocale } from "alinea/dashboard/hook/UseLocale";
-import { useNav } from "alinea/dashboard/hook/UseNav";
-import { SuspenseBoundary } from "alinea/dashboard/util/SuspenseBoundary";
-import { Create } from "alinea/dashboard/view/Create";
-import { IconButton } from "alinea/dashboard/view/IconButton";
-import { InputLabel } from "alinea/dashboard/view/InputLabel";
-import { EntryReference } from "alinea/picker/entry/EntryReference";
-import { UrlReference } from "alinea/picker/url/UrlPicker";
-import { TextLabel } from "alinea/ui";
-import { IcRoundAttachFile } from "alinea/ui/icons/IcRoundAttachFile";
-import { IcRoundClose } from "alinea/ui/icons/IcRoundClose";
-import IcRoundDragHandle from "alinea/ui/icons/IcRoundDragHandle";
-import { IcRoundEdit } from "alinea/ui/icons/IcRoundEdit";
-import { IcRoundLink } from "alinea/ui/icons/IcRoundLink";
-import { IcRoundOpenInNew } from "alinea/ui/icons/IcRoundOpenInNew";
-import { IcRoundPanorama } from "alinea/ui/icons/IcRoundPanorama";
-import { Sink } from "alinea/ui/Sink";
+import { Root } from "alinea/core/Root";
+import { Type } from "alinea/core/Type";
+import { Badge } from "alinea/dashboard/app/Badge";
+import { CompactRecordFields } from "alinea/dashboard/app/CompactField";
+import { NodeEditor } from "alinea/dashboard/app/EntryFields";
+import { configAtom, graphAtom } from "alinea/dashboard/atoms/core";
+import { linkEntryAtoms } from "alinea/dashboard/atoms/link";
+import {
+  ExternalLinkPicker
+} from "alinea/dashboard/app/ExternalLinkPicker";
+import { ImagePicker } from "alinea/dashboard/app/ImagePicker";
 import {
-  Suspense,
-  useState
-} from "react";
+  LinkPicker,
+  LinkPickerModal
+} from "alinea/dashboard/app/LinkPicker";
+import { nav } from "alinea/dashboard/atoms/nav";
+import {
+  useEntry,
+  useField,
+  useFieldNode,
+  useFieldOptions,
+  useNodes,
+  useOptionalEntryAtoms
+} from "alinea/dashboard/hooks";
+import {
+  IcRoundAttachFile,
+  IcRoundAdd,
+  IcRoundClose,
+  IcRoundEdit,
+  IcRoundLink,
+  IcRoundMoreHoriz,
+  IcRoundOpenInNew,
+  IcRoundPanorama
+} from "alinea/dashboard/icons";
+import { Fragment, useMemo, useRef, useState } from "react";
 
-// src/field/link/LinkField.module.scss
-var LinkField_module_default = {
-  "root": "alinea-LinkField",
-  "root-inner": "alinea-LinkField-inner",
-  "rootInner": "alinea-LinkField-inner",
-  "row": "alinea-LinkField-row",
-  "is-dragging": "alinea-LinkField-is-dragging",
-  "isDragging": "alinea-LinkField-is-dragging",
-  "is-overlay": "alinea-LinkField-is-overlay",
-  "isOverlay": "alinea-LinkField-is-overlay",
-  "row-header": "alinea-LinkField-row-header",
-  "rowHeader": "alinea-LinkField-row-header",
-  "row-staticHandle": "alinea-LinkField-row-staticHandle",
-  "rowStaticHandle": "alinea-LinkField-row-staticHandle",
-  "create": "alinea-LinkField-create"
+// src/field/link/LinkField.module.css
+var LinkField_default = {
+  "LinkFieldView-previewImagePlaceholder": "alinea-LinkFieldView-previewImagePlaceholder",
+  "LinkFieldViewPreviewImagePlaceholder": "alinea-LinkFieldView-previewImagePlaceholder",
+  "LinkFieldView-skeleton-pulse": "alinea-LinkFieldView-skeleton-pulse",
+  "LinkFieldViewSkeletonPulse": "alinea-LinkFieldView-skeleton-pulse",
+  "LinkFieldView-title": "alinea-LinkFieldView-title",
+  "LinkFieldViewTitle": "alinea-LinkFieldView-title",
+  "LinkFieldView-metaLabel": "alinea-LinkFieldView-metaLabel",
+  "LinkFieldViewMetaLabel": "alinea-LinkFieldView-metaLabel",
+  "LinkFieldView-meta": "alinea-LinkFieldView-meta",
+  "LinkFieldViewMeta": "alinea-LinkFieldView-meta",
+  "LinkFieldView-anchorOption": "alinea-LinkFieldView-anchorOption",
+  "LinkFieldViewAnchorOption": "alinea-LinkFieldView-anchorOption",
+  "LinkFieldView-labelText": "alinea-LinkFieldView-labelText",
+  "LinkFieldViewLabelText": "alinea-LinkFieldView-labelText",
+  "is-missing": "alinea-is-missing",
+  "isMissing": "alinea-is-missing",
+  "LinkFieldView-type": "alinea-LinkFieldView-type",
+  "LinkFieldViewType": "alinea-LinkFieldView-type",
+  "is-wide": "alinea-is-wide",
+  "isWide": "alinea-is-wide",
+  "LinkFieldView-previewImage": "alinea-LinkFieldView-previewImage",
+  "LinkFieldViewPreviewImage": "alinea-LinkFieldView-previewImage",
+  "LinkFieldView-rowDropTarget": "alinea-LinkFieldView-rowDropTarget",
+  "LinkFieldViewRowDropTarget": "alinea-LinkFieldView-rowDropTarget",
+  "LinkFieldView-anchorOption-label": "alinea-LinkFieldView-anchorOption-label",
+  "LinkFieldViewAnchorOptionLabel": "alinea-LinkFieldView-anchorOption-label",
+  "LinkFieldView-dropIndicator": "alinea-LinkFieldView-dropIndicator",
+  "LinkFieldViewDropIndicator": "alinea-LinkFieldView-dropIndicator",
+  "LinkFieldView-icon": "alinea-LinkFieldView-icon",
+  "LinkFieldViewIcon": "alinea-LinkFieldView-icon",
+  "LinkFieldView-imagePlaceholder": "alinea-LinkFieldView-imagePlaceholder",
+  "LinkFieldViewImagePlaceholder": "alinea-LinkFieldView-imagePlaceholder",
+  "LinkFieldView-anchorOption-location": "alinea-LinkFieldView-anchorOption-location",
+  "LinkFieldViewAnchorOptionLocation": "alinea-LinkFieldView-anchorOption-location",
+  "LinkFieldView-label": "alinea-LinkFieldView-label",
+  "LinkFieldViewLabel": "alinea-LinkFieldView-label",
+  "LinkFieldView-create": "alinea-LinkFieldView-create",
+  "LinkFieldViewCreate": "alinea-LinkFieldView-create",
+  "LinkFieldView-image": "alinea-LinkFieldView-image",
+  "LinkFieldViewImage": "alinea-LinkFieldView-image",
+  "LinkFieldView-skeleton": "alinea-LinkFieldView-skeleton",
+  "LinkFieldViewSkeleton": "alinea-LinkFieldView-skeleton",
+  "is-loading": "alinea-is-loading",
+  "isLoading": "alinea-is-loading",
+  "LinkFieldView-createButton": "alinea-LinkFieldView-createButton",
+  "LinkFieldViewCreateButton": "alinea-LinkFieldView-createButton"
 };
 
 // src/field/link/LinkField.view.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var styles = dist_default(LinkField_module_default);
-function getLinkIcon(name) {
-  switch (name) {
-    case "entry":
-      return IcRoundLink;
-    case "url":
-      return IcRoundOpenInNew;
-    case "file":
-      return IcRoundAttachFile;
-    case "image":
-      return IcRoundPanorama;
-    default:
-      return void 0;
-  }
+import { Fragment as Fragment2, 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 = useAtomValue(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 SingleLinkInput({ field }) {
-  const { options, value, mutator, error } = useField(field);
-  const { readOnly } = options;
-  const [pickFrom, setPickFrom] = useState();
-  const picker = pickFrom ? options.pickers[pickFrom] : void 0;
-  function handleConfirm(link) {
-    if (readOnly) return;
-    const selected = link[0];
-    if (!pickFrom || !picker || !selected) return;
-    if (selected[Reference.type] !== pickFrom) return;
-    mutator.replace(selected);
-    setPickFrom(void 0);
-  }
-  const PickerView = picker && picker.view;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    PickerView && /* @__PURE__ */ jsx(SuspenseBoundary, { name: "picker", children: /* @__PURE__ */ jsx(
-      PickerView,
+function isPickerType(type) {
+  return type === "entry" || type === "url" || type === "file" || type === "image";
+}
+function isLinkFieldRow(value) {
+  if (!value || typeof value !== "object") return false;
+  const type = value[Reference.type];
+  return typeof type === "string" && isPickerType(type);
+}
+function getPickerType(type) {
+  return isPickerType(type) ? type : "entry";
+}
+function getEntryPickerType(type) {
+  return type === "url" ? "entry" : type;
+}
+function EntryRowLayer({ hasFields, node, textOnly }) {
+  const entryId = useAtomValue(node.field("_entry"));
+  const type = useAtomValue(node.field("_type"));
+  if (!entryId) return null;
+  return /* @__PURE__ */ jsx(
+    EntryRow,
+    {
+      entryId,
+      hasFields,
+      image: type === "image",
+      textOnly
+    }
+  );
+}
+function EntryRow({ entryId, hasFields, image, textOnly }) {
+  const state = useLinkEntryState(entryId);
+  if (state.state === "hasData" && state.data)
+    return /* @__PURE__ */ jsx(
+      LoadedEntryRow,
       {
-        type: pickFrom,
-        options: picker.options,
-        selection: [value],
-        onConfirm: handleConfirm,
-        onCancel: () => setPickFrom(void 0)
+        entry: state.data,
+        hasFields,
+        image,
+        textOnly
       }
-    ) }),
-    /* @__PURE__ */ jsx(InputLabel, { ...options, error, icon: IcRoundLink, children: /* @__PURE__ */ jsx("div", { className: styles.root(), children: /* @__PURE__ */ jsx("div", { className: styles.root.inner(), children: /* @__PURE__ */ jsx(Sink.Root, { children: value && options.pickers[value[Reference.type]] ? /* @__PURE__ */ jsx(
-      LinkInputRow,
+    );
+  if (state.state !== "loading")
+    return /* @__PURE__ */ jsx(
+      MissingEntryRow,
       {
-        readOnly,
-        field,
-        rowId: value[Reference.id],
-        fields: options.pickers[value[Reference.type]].fields,
-        picker: options.pickers[value[Reference.type]],
-        reference: value,
-        onRemove: () => mutator.replace(void 0),
-        onEdit: () => setPickFrom(value[Reference.type])
+        entryId,
+        hasFields,
+        image,
+        textOnly
+      }
+    );
+  return /* @__PURE__ */ jsx(
+    EntryLoadingRow,
+    {
+      hasFields,
+      image,
+      pending: true,
+      textOnly
+    }
+  );
+}
+function useLinkEntryState(entryId) {
+  return useAtomValue(linkEntryAtoms(entryId));
+}
+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__ */ jsx("div", { className: styles.create(), children: /* @__PURE__ */ jsx(Create.Root, { disabled: readOnly, children: entries(options.pickers).map(([name, picker2]) => {
-      return /* @__PURE__ */ jsx(
-        Create.Button,
+    ),
+    /* @__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 = useAtomValue(node.field("_title"));
+  const url = useAtomValue(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(Fragment2, { 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;
+  if (type === "image") return IcRoundPanorama;
+  return IcRoundLink;
+}
+function createEntryLink(type, entryId, picker) {
+  return {
+    ...initialFields(picker),
+    _id: createId(),
+    _type: getEntryPickerType(type),
+    _index: "",
+    _entry: entryId
+  };
+}
+function createUrlLink(value, picker, current) {
+  return {
+    ...current ?? initialFields(picker),
+    _id: current?._id ?? createId(),
+    _type: "url",
+    _index: current?._index ?? "",
+    _url: value.url,
+    _title: value.title,
+    _target: value.target
+  };
+}
+function initialFields(picker) {
+  if (!picker.fields) return {};
+  return Type.initialValue(picker.fields);
+}
+function LinkPickerAction({
+  anchorRef,
+  ariaLabel,
+  buttonAppearance = "plain",
+  buttonIcon,
+  buttonSize,
+  children,
+  className,
+  isDisabled,
+  onPick,
+  onPickMany,
+  picker,
+  selection,
+  type,
+  value
+}) {
+  const currentEntry = useEntry();
+  const config = useAtomValue(configAtom);
+  const selectedWorkspace = currentEntry?.workspace;
+  const selectedRoot = currentEntry?.root;
+  const selectedMediaRoot = mediaRoot(config, selectedWorkspace);
+  const options = picker.options;
+  const resolved = useResolvedEntryPickerOptions(options, type, currentEntry);
+  if (type === "url") {
+    return /* @__PURE__ */ jsxs(DialogTrigger, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": ariaLabel,
+          appearance: buttonAppearance,
+          className,
+          icon: buttonIcon,
+          isDisabled,
+          size: buttonSize,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ExternalLinkPicker,
         {
-          onClick: () => {
-            if (readOnly) return;
-            setPickFrom(name);
-          },
-          icon: getLinkIcon(name),
-          children: /* @__PURE__ */ jsx(TextLabel, { label: picker2.label })
+          initialValue: externalLinkValue(value),
+          selectionMode: "single",
+          submitLabel: value ? "Save link" : void 0,
+          onConfirm: (link) => onPick(createUrlLink(link, picker, value))
         },
-        name
+        value?._id ?? "new"
+      )
+    ] });
+  }
+  const childLocation = options.pickChildren && currentEntry ? {
+    workspace: currentEntry.workspace,
+    root: currentEntry.root,
+    parentId: currentEntry.id,
+    locale: currentEntry.locale
+  } : void 0;
+  const pickingChildren = Boolean(childLocation);
+  const fallbackRoot = type === "file" || type === "image" ? selectedMediaRoot : selectedRoot;
+  const fallbackLocation = selectedWorkspace && fallbackRoot ? { workspace: selectedWorkspace, root: fallbackRoot } : void 0;
+  const location = childLocation ?? resolved.location ?? fallbackLocation;
+  const condition = resolved.condition;
+  const handlesMultiple = Boolean(onPickMany && picker.handlesMultiple);
+  const pickerProps = {
+    condition,
+    initialView: type === "file" ? "row" : void 0,
+    initialResultMode: entryPickerResultMode(
+      type,
+      condition,
+      options.enableNavigation,
+      pickingChildren
+    ),
+    initialSearchScope: entryPickerSearchScope(
+      condition,
+      resolved.location,
+      options.enableNavigation,
+      type
+    ),
+    location,
+    limitLocations: options.limitLocations,
+    nestedNavigation: !pickingChildren,
+    pickChildren: pickingChildren,
+    preselect: false,
+    selectionMode: handlesMultiple ? "multiple" : "single",
+    selectionBehavior: handlesMultiple ? "toggle" : "replace",
+    initialSelection: initialSelection(value, selection),
+    onConfirm(selection2) {
+      const links = selection2.map(
+        (entryId) => createEntryLink(type, entryId, picker)
       );
-    }) }) }) }) }) }) })
+      if (onPickMany) return onPickMany(links);
+      const [link] = links;
+      if (link) onPick(link);
+    }
+  };
+  if (type === "file" || type === "image") {
+    return /* @__PURE__ */ jsxs(DialogTrigger, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": ariaLabel,
+          appearance: buttonAppearance,
+          className,
+          icon: buttonIcon,
+          isDisabled,
+          size: buttonSize,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ImagePicker,
+        {
+          ...pickerProps,
+          label: type === "file" ? "Pick a file" : "Pick an image"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(DialogTrigger, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": ariaLabel,
+        appearance: buttonAppearance,
+        className,
+        icon: buttonIcon,
+        isDisabled,
+        size: buttonSize,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(LinkPicker, { ...pickerProps, anchorRef })
   ] });
 }
-var layoutMeasuringConfig = {
-  strategy: LayoutMeasuringStrategy.Always
-};
-function MultipleLinksInput({ field }) {
-  const { options, value, mutator, error } = useField(field);
-  const { readOnly } = options;
-  const [pickFrom, setPickFrom] = useState();
-  const picker = pickFrom ? options.pickers[pickFrom[Reference.type]] : void 0;
-  function handleConfirm(links) {
-    if (!pickFrom || !picker || !links) return;
-    const seen = /* @__PURE__ */ new Set();
-    for (const link of links) {
-      if (link[ListRow.type] !== pickFrom[Reference.type]) continue;
-      seen.add(link[ListRow.id]);
-      const index = value.findIndex((v) => v[ListRow.id] === link[ListRow.id]);
-      if (index > -1) mutator.replace(link[ListRow.id], link);
-      else mutator.push(link);
+function LinkPickerDialog({
+  isOpen,
+  onOpenChange,
+  onPick,
+  onPickMany,
+  picker,
+  selection,
+  type,
+  value
+}) {
+  const currentEntry = useEntry();
+  const config = useAtomValue(configAtom);
+  const selectedWorkspace = currentEntry?.workspace;
+  const selectedRoot = currentEntry?.root;
+  const selectedMediaRoot = mediaRoot(config, selectedWorkspace);
+  const options = picker.options;
+  const resolved = useResolvedEntryPickerOptions(options, type, currentEntry);
+  function handlePick(link) {
+    onPick(link);
+    onOpenChange(false);
+  }
+  if (type === "url") {
+    return /* @__PURE__ */ jsxs(DialogTrigger, { isOpen, onOpenChange, children: [
+      /* @__PURE__ */ jsx(Button, { style: { display: "none" }, children: "Replace link" }),
+      /* @__PURE__ */ jsx(
+        ExternalLinkPicker,
+        {
+          initialValue: externalLinkValue(value),
+          selectionMode: "single",
+          submitLabel: value ? "Save link" : void 0,
+          onConfirm: (link) => handlePick(createUrlLink(link, picker, value))
+        },
+        value?._id ?? "new"
+      )
+    ] });
+  }
+  const childLocation = options.pickChildren && currentEntry ? {
+    workspace: currentEntry.workspace,
+    root: currentEntry.root,
+    parentId: currentEntry.id
+  } : void 0;
+  const pickingChildren = Boolean(childLocation);
+  const fallbackRoot = type === "file" || type === "image" ? selectedMediaRoot : selectedRoot;
+  const fallbackLocation = selectedWorkspace && fallbackRoot ? { workspace: selectedWorkspace, root: fallbackRoot } : void 0;
+  const location = childLocation ?? resolved.location ?? fallbackLocation;
+  const condition = resolved.condition;
+  const handlesMultiple = Boolean(onPickMany && picker.handlesMultiple);
+  const pickerProps = {
+    condition,
+    initialView: type === "file" ? "row" : void 0,
+    initialResultMode: entryPickerResultMode(
+      type,
+      condition,
+      options.enableNavigation,
+      pickingChildren
+    ),
+    initialSearchScope: entryPickerSearchScope(
+      condition,
+      resolved.location,
+      options.enableNavigation,
+      type
+    ),
+    location,
+    limitLocations: options.limitLocations,
+    nestedNavigation: !pickingChildren,
+    pickChildren: pickingChildren,
+    preselect: false,
+    selectionMode: handlesMultiple ? "multiple" : "single",
+    selectionBehavior: handlesMultiple ? "toggle" : "replace",
+    initialSelection: initialSelection(value, selection),
+    onConfirm(selection2) {
+      const links = selection2.map(
+        (entryId) => createEntryLink(type, entryId, picker)
+      );
+      if (onPickMany) {
+        onPickMany(links);
+        onOpenChange(false);
+        return;
+      }
+      const [link] = links;
+      if (link) handlePick(link);
+    }
+  };
+  if (type === "file" || type === "image") {
+    return /* @__PURE__ */ jsxs(DialogTrigger, { isOpen, onOpenChange, children: [
+      /* @__PURE__ */ jsx(Button, { style: { display: "none" }, children: "Replace link" }),
+      /* @__PURE__ */ jsx(
+        ImagePicker,
+        {
+          ...pickerProps,
+          label: type === "file" ? "Pick a file" : "Pick an image"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(DialogTrigger, { isOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx(Button, { style: { display: "none" }, children: "Replace link" }),
+    /* @__PURE__ */ jsx(LinkPickerModal, { ...pickerProps })
+  ] });
+}
+function useResolvedEntryPickerOptions(options, type, entry) {
+  const { condition: conditionOption, location: locationOption } = options;
+  const resolvedAtom = useMemo(() => {
+    const initialValue = {
+      condition: typeof conditionOption === "function" ? void 0 : conditionOption,
+      location: typeof locationOption === "function" ? void 0 : locationOption
+    };
+    const resolved = atom(async (get) => {
+      if (type === "url") return { condition: void 0, location: void 0 };
+      if (!entry) return initialValue;
+      const info = { entry, graph: get(graphAtom) };
+      const condition = typeof conditionOption === "function" ? conditionOption(info) : conditionOption;
+      const location = typeof locationOption === "function" ? locationOption(info) : locationOption;
+      const [nextCondition, nextLocation] = await Promise.all([
+        condition,
+        location
+      ]);
+      return { condition: nextCondition, location: nextLocation };
+    });
+    return unwrap(resolved, (previous) => previous ?? initialValue);
+  }, [conditionOption, entry, locationOption, type]);
+  return useAtomValue(resolvedAtom);
+}
+function entryPickerSearchScope(condition, location, enableNavigation, type) {
+  if (type === "file" || type === "image") return "workspace";
+  return condition && !location && enableNavigation !== true ? "everything" : "workspace";
+}
+function entryPickerResultMode(type, condition, enableNavigation, pickChildren) {
+  return pickChildren || type !== "image" && condition && enableNavigation !== true ? "matches" : "browse";
+}
+function externalLinkValue(value) {
+  if (value?.[Reference.type] !== "url") return void 0;
+  return {
+    url: value._url,
+    title: value._title,
+    target: value._target
+  };
+}
+function initialSelection(value, selection = []) {
+  if (value && "_entry" in value) return [value._entry];
+  return selection.flatMap((row) => "_entry" in row ? [row._entry] : []);
+}
+function mediaRoot(config, workspaceName) {
+  if (!workspaceName) return void 0;
+  const workspace = config.workspaces[workspaceName];
+  if (!workspace) return void 0;
+  return Object.entries(getWorkspace(workspace).roots).find(
+    ([, root]) => Root.isMediaRoot(root)
+  )?.[0];
+}
+function insertIndex(rowIndex, position) {
+  return position === "before" ? rowIndex : rowIndex + 1;
+}
+function reorderIndex(fromIndex, targetIndex) {
+  return fromIndex < targetIndex ? targetIndex - 1 : targetIndex;
+}
+function dragRowItem(id) {
+  return {
+    "text/plain": id,
+    [LINK_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);
     }
-    if (picker.handlesMultiple)
-      for (const link of value) {
-        if (link[ListRow.type] !== pickFrom[Reference.type]) continue;
-        if (seen.has(link[ListRow.id])) continue;
-        mutator.remove(link[ListRow.id]);
+  }
+  return null;
+}
+function SingleLinkCreateActions({ field, value }) {
+  const options = useFieldOptions(field);
+  const [, setValue] = useField(field);
+  const anchorRef = useRef(null);
+  if (options.readOnly) return null;
+  return /* @__PURE__ */ jsx("div", { className: styles.LinkFieldView.create(), ref: anchorRef, children: Object.entries(options.pickers).map(([type, picker]) => /* @__PURE__ */ jsxs(
+    LinkPickerAction,
+    {
+      anchorRef,
+      buttonSize: "small",
+      className: styles.LinkFieldView.createButton(),
+      onPick: setValue,
+      picker,
+      type,
+      value: value?._type === type ? value : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            "aria-hidden": true,
+            icon: options.isEntryField ? IcRoundAdd : getLinkIcon(type)
+          }
+        ),
+        options.isEntryField ? options.label : picker.label
+      ]
+    },
+    type
+  )) });
+}
+function MultipleLinkCreateActions({ field }) {
+  const options = useFieldOptions(field);
+  const [value, setValue] = useField(field);
+  const anchorRef = useRef(null);
+  const links = value ?? [];
+  const showCreate = options.max ? links.length < options.max : true;
+  if (options.readOnly) return null;
+  if (!showCreate) return null;
+  return /* @__PURE__ */ jsx("div", { className: styles.LinkFieldView.create(), ref: anchorRef, children: Object.entries(options.pickers).map(([type, picker]) => /* @__PURE__ */ jsxs(
+    LinkPickerAction,
+    {
+      anchorRef,
+      buttonSize: "small",
+      className: styles.LinkFieldView.createButton(),
+      onPick: (link) => {
+        setValue((links2) => [...links2 ?? [], link]);
+      },
+      onPickMany: (picked) => setValue((links2) => [...links2 ?? [], ...picked]),
+      picker,
+      selection: links.filter((row) => row._type === type),
+      type,
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            "aria-hidden": true,
+            icon: options.isEntryField ? IcRoundAdd : getLinkIcon(type)
+          }
+        ),
+        options.isEntryField ? options.label : picker.label
+      ]
+    },
+    type
+  )) });
+}
+function LinkRowEditor({ node, picker }) {
+  if (!picker?.fields) return null;
+  return /* @__PURE__ */ jsx(NodeEditor, { node, type: picker.fields });
+}
+function LinkRowActions({
+  closeActions,
+  isDisabled,
+  picker,
+  type,
+  value,
+  onEdit
+}) {
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx(
+      LinkRowReferenceActions,
+      {
+        closeActions,
+        type,
+        value
       }
-    setPickFrom(void 0);
+    ),
+    picker && /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": "Replace link",
+        appearance: "plain",
+        icon: IcRoundEdit,
+        isDisabled,
+        onPress: () => {
+          closeActions();
+          onEdit();
+        },
+        children: "Replace link"
+      }
+    )
+  ] });
+}
+function LinkLabelField({ isDisabled, node, value }) {
+  const customLabel = useAtomValue(node.field("_label"));
+  const setCustomLabel = useSetAtom(node.field("_label"));
+  if ("_entry" in value) {
+    return /* @__PURE__ */ jsx(
+      EntryLinkLabelField,
+      {
+        customLabel,
+        entryId: value._entry,
+        isDisabled,
+        onChange: setCustomLabel
+      }
+    );
   }
-  const ids = value.map((row) => row[ListRow.id]);
-  const [dragging, setDragging] = useState(null);
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates
-    })
+  return /* @__PURE__ */ jsx(
+    ResolvedLinkLabelField,
+    {
+      customLabel,
+      isDisabled,
+      onChange: setCustomLabel
+    }
   );
-  function handleDragStart(event) {
-    const { active } = event;
-    setDragging(value.find((row) => row[ListRow.id] === active.id) || null);
+}
+function EntryLinkSuffixField({
+  isDisabled,
+  node,
+  value
+}) {
+  const suffix = useAtomValue(node.field("_suffix"));
+  const setSuffix = useSetAtom(node.field("_suffix"));
+  if (value[Reference.type] !== "entry") return null;
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      description: "E.g. ?s=search",
+      isDisabled,
+      label: "URL suffix",
+      onChange: (next) => setSuffix(next || void 0),
+      value: suffix ?? ""
+    }
+  );
+}
+function EntryAnchorField({ node, value }) {
+  const anchor = useAtomValue(node.field("_anchor"));
+  const setAnchor = useSetAtom(node.field("_anchor"));
+  if (value[Reference.type] !== "entry") return null;
+  return /* @__PURE__ */ jsx(
+    EntryAnchorFieldInner,
+    {
+      anchor,
+      entryId: value._entry,
+      onChange: setAnchor
+    }
+  );
+}
+function EntryAnchorBadge({ node, value }) {
+  const anchor = useAtomValue(node.field("_anchor"));
+  if (value[Reference.type] !== "entry" || !anchor) return null;
+  return /* @__PURE__ */ jsxs(Badge, { size: "small", children: [
+    "#",
+    anchor
+  ] });
+}
+function EntryAnchorFieldInner({
+  anchor,
+  entryId,
+  onChange
+}) {
+  const state = useLinkEntryState(entryId);
+  const anchors = state.state === "hasData" ? state.data?.anchors ?? [] : [];
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      items: anchors,
+      label: "Anchor",
+      onChange: (next) => onChange(next === null ? void 0 : String(next)),
+      value: anchor ?? null,
+      children: (item) => /* @__PURE__ */ jsx(SelectItem, { id: item.id, textValue: item.label ?? `#${item.id}`, children: /* @__PURE__ */ jsxs("span", { className: styles.LinkFieldView.anchorOption(), children: [
+        /* @__PURE__ */ jsx("span", { className: styles.LinkFieldView.anchorOption.label(), children: item.label ?? `#${item.id}` }),
+        /* @__PURE__ */ jsx("span", { className: styles.LinkFieldView.anchorOption.location(), children: item.fieldLabel ?? item.fieldPath })
+      ] }) })
+    }
+  );
+}
+function LinkMetaLabel({ className, node, value }) {
+  const customLabel = useAtomValue(node.field("_label"));
+  if ("_entry" in value) {
+    return /* @__PURE__ */ jsx(
+      EntryLinkMetaLabel,
+      {
+        className,
+        customLabel,
+        entryId: value._entry
+      }
+    );
   }
-  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);
+  return /* @__PURE__ */ jsx(
+    ResolvedLinkMetaLabel,
+    {
+      className,
+      label: 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,
+  customLabel,
+  entryId
+}) {
+  const state = useLinkEntryState(entryId);
+  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("span", { className, children: value });
+}
+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: "small", children: "File" });
   }
-  const showLinkPicker = options.max ? value.length < options.max : true;
-  const PickerView = picker && picker.view;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    pickFrom && PickerView && /* @__PURE__ */ jsx(SuspenseBoundary, { name: "picker", children: /* @__PURE__ */ jsx(
-      PickerView,
+  if ("_entry" in value) {
+    return /* @__PURE__ */ jsx(
+      EntryLinkTypeBadge,
       {
-        type: pickFrom[Reference.type],
-        options: picker.options,
-        selection: value.filter((ref) => {
-          if (ref[ListRow.id] === pickFrom[Reference.id]) return true;
-          if (picker.handlesMultiple)
-            return ref[ListRow.type] === pickFrom[Reference.type];
-          return false;
-        }),
-        onConfirm: handleConfirm,
-        onCancel: () => setPickFrom(void 0)
+        ...props,
+        entryId: value._entry,
+        fallbackIcon,
+        fallbackLabel
       }
-    ) }),
-    /* @__PURE__ */ jsx(
-      DndContext,
+    );
+  }
+  return /* @__PURE__ */ jsx(Badge, { ...props, icon: fallbackIcon, size: "small", children: fallbackLabel });
+}
+function EntryLinkImagePreview({ entryId }) {
+  const state = useLinkEntryState(entryId);
+  if (state.state !== "hasData" || !state.data?.preview)
+    return /* @__PURE__ */ jsx("span", { className: styles.LinkFieldView.previewImagePlaceholder() });
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      alt: "",
+      className: styles.LinkFieldView.previewImage(),
+      src: state.data.preview
+    }
+  );
+}
+function EntryLinkTypeBadge({
+  entryId,
+  fallbackIcon,
+  fallbackLabel,
+  ...props
+}) {
+  const state = useLinkEntryState(entryId);
+  const config = useAtomValue(configAtom);
+  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: "small", children: fallbackLabel });
+  }
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      ...props,
+      className: styles.LinkFieldView.type(
+        dist_default.merge({ className: props.className })
+      ),
+      icon: getType(type).icon || IcRoundLink,
+      size: "small",
+      children: Type.label(type)
+    }
+  );
+}
+function EntryLinkLabelField({
+  customLabel,
+  entryId,
+  isDisabled,
+  onChange
+}) {
+  const state = useLinkEntryState(entryId);
+  return /* @__PURE__ */ jsx(
+    ResolvedLinkLabelField,
+    {
+      customLabel,
+      fallbackLabel: state.state === "hasData" ? state.data?.title : void 0,
+      isDisabled,
+      onChange
+    }
+  );
+}
+function ResolvedLinkLabelField({
+  customLabel,
+  fallbackLabel = "",
+  isDisabled,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      autoFocus: true,
+      isDisabled,
+      label: "Label",
+      onChange,
+      value: customLabel ?? fallbackLabel
+    }
+  );
+}
+function LinkSettingsButton() {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "plain",
+      "aria-label": "Link settings",
+      icon: IcRoundMoreHoriz,
+      size: "icon-small"
+    }
+  );
+}
+function LinkRowReferenceActions({
+  closeActions,
+  type,
+  value
+}) {
+  if (!("_entry" in value)) return null;
+  return /* @__PURE__ */ jsx(
+    EntryLinkRowActions,
+    {
+      closeActions,
+      entryId: value._entry,
+      type
+    }
+  );
+}
+function EntryLinkRowActions({
+  closeActions,
+  entryId,
+  type
+}) {
+  const scope = useOptionalEntryAtoms();
+  const state = useLinkEntryState(entryId);
+  if (state.state !== "hasData" || !state.data) {
+    return /* @__PURE__ */ jsx(
+      Button,
       {
-        sensors,
-        collisionDetection: closestCenter,
-        onDragStart: handleDragStart,
-        onDragEnd: handleDragEnd,
-        layoutMeasuring: layoutMeasuringConfig,
-        children: /* @__PURE__ */ jsx(InputLabel, { ...options, error, icon: IcRoundLink, children: /* @__PURE__ */ jsx("div", { className: styles.root(), children: /* @__PURE__ */ jsxs("div", { className: styles.root.inner(), children: [
+        "aria-label": "Open link",
+        appearance: "plain",
+        icon: IcRoundOpenInNew,
+        isDisabled: true,
+        size: "small",
+        children: "Open link"
+      }
+    );
+  }
+  const entry = state.data;
+  const locale = type === "entry" ? scope?.localeData.requestedLocale : void 0;
+  const href = `#${nav.entry(entry.workspace, entry.root, entry.id, locale)}`;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Open link",
+      appearance: "plain",
+      icon: IcRoundOpenInNew,
+      onPress: () => {
+        window.open(href, "_blank", "noopener,noreferrer");
+        closeActions();
+      },
+      children: "Open link"
+    }
+  );
+}
+function SingleLinkRow({ field, node, value }) {
+  const [, setValue] = useField(field);
+  const options = useFieldOptions(field);
+  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 [actionsOpen, setActionsOpen] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  function closeActions() {
+    setActionsOpen(false);
+  }
+  function removeLink() {
+    setValue(void 0);
+  }
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsxs(ListRow, { "aria-label": "Link item 1", first: true, role: "listitem", children: [
+      /* @__PURE__ */ jsxs(ListRowHeader, { first: true, hasFold: false, children: [
+        imagePreviewEntryId && /* @__PURE__ */ jsx(EntryLinkImagePreview, { entryId: imagePreviewEntryId }),
+        /* @__PURE__ */ jsx(ListRowDrag, { children: /* @__PURE__ */ jsxs(ListRowBadges, { children: [
           /* @__PURE__ */ jsx(
-            SortableContext,
+            LinkTypeBadge,
             {
-              items: ids,
-              strategy: verticalListSortingStrategy,
-              children: /* @__PURE__ */ jsxs(Sink.Root, { children: [
-                value.map((reference) => {
-                  if (!options.pickers[reference[ListRow.type]]) return null;
-                  const picker2 = options.pickers[reference[ListRow.type]];
-                  const type = picker2.fields;
-                  return /* @__PURE__ */ jsx(
-                    LinkInputRowSortable,
-                    {
-                      rowId: reference[ListRow.id],
-                      field,
-                      fields: type,
-                      picker: picker2,
-                      reference,
-                      onRemove: () => mutator.remove(reference[ListRow.id]),
-                      onEdit: () => setPickFrom(reference),
-                      isSortable: options.max !== 1,
-                      readOnly,
-                      multiple: true
-                    },
-                    reference[ListRow.id]
-                  );
-                }),
-                showLinkPicker && /* @__PURE__ */ jsx("div", { className: styles.create(), children: /* @__PURE__ */ jsx(Create.Root, { disabled: readOnly, children: entries(options.pickers).map(([name, picker2]) => {
-                  return /* @__PURE__ */ jsx(
-                    Create.Button,
-                    {
-                      onClick: () => setPickFrom({ [Reference.type]: name }),
-                      icon: getLinkIcon(name),
-                      children: /* @__PURE__ */ jsx(TextLabel, { label: picker2.label })
-                    },
-                    name
-                  );
-                }) }) })
-              ] })
+              className: styles.LinkFieldView.type(),
+              picker,
+              type,
+              value
             }
           ),
           /* @__PURE__ */ jsx(
-            DragOverlay,
+            LinkMetaLabel,
             {
-              dropAnimation: {
-                ...defaultDropAnimation,
-                dragSourceOpacity: 0.5
-              },
-              children: dragging && options.pickers[dragging[Reference.type]] ? /* @__PURE__ */ jsx(
-                LinkInputRow,
+              className: styles.LinkFieldView.metaLabel(),
+              node,
+              value
+            }
+          ),
+          /* @__PURE__ */ jsx(EntryAnchorBadge, { node, value })
+        ] }) }),
+        !options.readOnly && /* @__PURE__ */ jsxs(ListRowActions, { children: [
+          /* @__PURE__ */ jsxs(DialogTrigger, { isOpen: actionsOpen, onOpenChange: setActionsOpen, children: [
+            /* @__PURE__ */ jsx(LinkSettingsButton, {}),
+            /* @__PURE__ */ jsxs(Popover, { placement: "bottom right", children: [
+              /* @__PURE__ */ jsxs(ListRowSettings, { children: [
+                /* @__PURE__ */ jsx(LinkLabelField, { node, value }),
+                /* @__PURE__ */ jsx(EntryAnchorField, { node, value }),
+                /* @__PURE__ */ jsx(EntryLinkSuffixField, { node, value })
+              ] }),
+              /* @__PURE__ */ jsx(MenuSeparator, {}),
+              /* @__PURE__ */ jsx(ListRowSettings, { actions: true, children: /* @__PURE__ */ jsx(
+                LinkRowActions,
                 {
-                  field,
-                  rowId: dragging._id,
-                  fields: options.pickers[dragging[Reference.type]].fields,
-                  picker: options.pickers[dragging[Reference.type]],
-                  reference: dragging,
-                  onRemove: () => mutator.remove(dragging._id),
-                  onEdit: () => setPickFrom(dragging),
-                  isDragOverlay: true,
-                  isSortable: options.max !== 1,
-                  readOnly,
-                  multiple: true
+                  closeActions,
+                  onEdit: () => setEditOpen(true),
+                  picker,
+                  type,
+                  value
                 }
-              ) : null
+              ) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "plain",
+              "aria-label": "Remove link",
+              icon: IcRoundClose,
+              onPress: removeLink,
+              size: "icon-small"
             }
           )
-        ] }) }) })
+        ] })
+      ] }),
+      hasFields && /* @__PURE__ */ jsx(ListRowBody, { children: /* @__PURE__ */ jsx(LinkRowEditor, { node, picker }) })
+    ] }),
+    picker && /* @__PURE__ */ jsx(
+      LinkPickerDialog,
+      {
+        isOpen: editOpen,
+        onOpenChange: setEditOpen,
+        onPick: setValue,
+        picker,
+        type,
+        value
       }
     )
   ] });
 }
-function animateLayoutChanges(args) {
-  const { isSorting, wasSorting } = args;
-  if (isSorting || wasSorting) return defaultAnimateLayoutChanges(args);
-  return true;
+function LinkFieldDragPreview({ icon, label }) {
+  return /* @__PURE__ */ jsx(ListDragPreview, { icon, label });
 }
-function LinkInputRowSortable(props) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    animateLayoutChanges,
-    id: props.reference._id
-  });
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition: transition || void 0
-  };
-  return /* @__PURE__ */ jsx(
-    LinkInputRow,
-    {
-      ...props,
-      rootRef: setNodeRef,
-      style,
-      handle: listeners,
-      ...attributes,
-      isDragging
-    }
-  );
-}
-function LinkInputRow({
+function MultipleLinkRow({
+  dragging,
+  expanded,
   field,
-  rowId,
-  picker,
-  fields,
-  reference,
-  onEdit,
-  onRemove,
-  handle,
-  rootRef,
-  isDragging,
-  isDragOverlay,
-  isSortable,
-  readOnly,
-  multiple,
-  ...rest
+  index,
+  node,
+  onMoveRow,
+  onRowDragEnd,
+  onRowDragStart,
+  onDropIndicatorChange,
+  onToggleRow,
+  value
 }) {
-  const onView = useReferenceViewer();
-  const RowView = picker.viewRow;
-  const inner = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: styles.row({
-        dragging: isDragging,
-        overlay: isDragOverlay
-      }),
-      ref: rootRef,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxs(Sink.Header, { children: [
-          /* @__PURE__ */ jsx(Sink.Options, { children: isSortable ? /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              icon: IcRoundDragHandle,
-              ...handle,
-              style: { cursor: handle ? "grab" : "grabbing" },
-              title: "Drag and drop to reorder"
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: styles.row.staticHandle(), children: /* @__PURE__ */ jsx(IcRoundLink, {}) }) }),
-          /* @__PURE__ */ jsx("div", { style: { flexGrow: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(RowView, { reference }) }) }),
-          !readOnly && /* @__PURE__ */ jsxs(Sink.Options, { children: [
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                icon: IcRoundOpenInNew,
-                onClick: () => onView(reference),
-                title: reference?._type === "image" ? "Open media file in new tab" : "Open link in new tab"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                icon: IcRoundEdit,
-                onClick: onEdit,
-                title: reference?._type === "image" ? "Change image" : "Edit link"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                icon: IcRoundClose,
-                onClick: onRemove,
-                title: reference?._type === "image" ? "Delete image" : "Delete link"
-              }
-            )
-          ] })
-        ] }),
-        fields && /* @__PURE__ */ jsx(Sink.Content, { children: /* @__PURE__ */ jsx(InputForm, { type: fields }) })
-      ]
+  const [linksValue, setValue] = useField(field);
+  const options = useFieldOptions(field);
+  const links = linksValue ?? [];
+  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 [actionsOpen, setActionsOpen] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  const dragPreview = useRef(null);
+  const rowRef = useRef(null);
+  const { dragProps, isDragging } = $74812c42150b3de8$export$7941f8aafa4b6021({
+    getItems() {
+      return [dragRowItem(itemId)];
+    },
+    getAllowedDropOperations() {
+      return ["move"];
+    },
+    isDisabled: readOnly,
+    onDragEnd: onRowDragEnd,
+    onDragStart: onRowDragStart,
+    preview: dragPreview
+  });
+  const { dropProps, isDropTarget } = $f302ef02e940a6f8$export$ccdee5eaf73cf661({
+    ref: rowRef,
+    isDisabled: readOnly || !dragging,
+    getDropOperation(types, allowedOperations) {
+      if (!types.has(LINK_FIELD_ROW_DRAG_TYPE)) return "cancel";
+      return allowedOperations.includes("move") ? "move" : "cancel";
+    },
+    getDropOperationForPoint(types, allowedOperations) {
+      if (!types.has(LINK_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, LINK_FIELD_ROW_DRAG_TYPE);
+      onDropIndicatorChange(null);
+      if (!rowId) return;
+      onMoveRow(rowId, insertIndex(index, position));
     }
-  );
-  if (!fields) return inner;
+  });
+  function closeActions() {
+    setActionsOpen(false);
+  }
+  function removeLink() {
+    setValue((links2) => links2.filter((_, currentIndex) => currentIndex !== index));
+  }
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...dropProps,
+        className: styles.LinkFieldView.rowDropTarget(),
+        ref: rowRef,
+        children: /* @__PURE__ */ jsxs(
+          ListRow,
+          {
+            "aria-label": `Link item ${index + 1}`,
+            dragging: isDragging,
+            first: index === 0,
+            role: "listitem",
+            children: [
+              /* @__PURE__ */ jsxs(ListRowHeader, { first: index === 0, hasFold: hasFields, children: [
+                !readOnly && /* @__PURE__ */ jsx(
+                  ListRowDragHandle,
+                  {
+                    ...dragProps,
+                    "aria-label": `Drag link item ${index + 1}`,
+                    dragging: isDragging
+                  }
+                ),
+                imagePreviewEntryId && !hasFields && /* @__PURE__ */ jsx(EntryLinkImagePreview, { entryId: imagePreviewEntryId }),
+                /* @__PURE__ */ jsx($5d3a17cc2564e64f$export$905ab40ac2179daa, { ref: dragPreview, children: () => /* @__PURE__ */ jsx(
+                  LinkFieldDragPreview,
+                  {
+                    icon: getLinkIcon(type),
+                    label: /* @__PURE__ */ jsx(LinkRowText, { node })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(ListRowDrag, { dragging: isDragging, children: /* @__PURE__ */ jsxs(ListRowBadges, { children: [
+                  hasFields && /* @__PURE__ */ jsx(
+                    ListRowFoldButton,
+                    {
+                      "aria-label": expanded ? "Collapse link" : "Expand link",
+                      expanded,
+                      onPress: () => onToggleRow(itemId)
+                    }
+                  ),
+                  imagePreviewEntryId && hasFields && /* @__PURE__ */ jsx(EntryLinkImagePreview, { entryId: imagePreviewEntryId }),
+                  /* @__PURE__ */ jsx(LinkTypeBadge, { picker, type, value }),
+                  /* @__PURE__ */ jsx(
+                    LinkMetaLabel,
+                    {
+                      className: styles.LinkFieldView.metaLabel(),
+                      node,
+                      value
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(EntryAnchorBadge, { node, value })
+                ] }) }),
+                /* @__PURE__ */ jsxs(ListRowActions, { children: [
+                  /* @__PURE__ */ jsxs(DialogTrigger, { isOpen: actionsOpen, onOpenChange: setActionsOpen, children: [
+                    /* @__PURE__ */ jsx(LinkSettingsButton, {}),
+                    /* @__PURE__ */ jsxs(Popover, { placement: "bottom right", children: [
+                      /* @__PURE__ */ jsxs(ListRowSettings, { children: [
+                        /* @__PURE__ */ jsx(
+                          LinkLabelField,
+                          {
+                            isDisabled: readOnly,
+                            node,
+                            value
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(EntryAnchorField, { node, value }),
+                        /* @__PURE__ */ jsx(
+                          EntryLinkSuffixField,
+                          {
+                            isDisabled: readOnly,
+                            node,
+                            value
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(MenuSeparator, {}),
+                      /* @__PURE__ */ jsx(ListRowSettings, { actions: true, children: /* @__PURE__ */ jsx(
+                        LinkRowActions,
+                        {
+                          closeActions,
+                          isDisabled: readOnly,
+                          onEdit: () => setEditOpen(true),
+                          picker,
+                          type,
+                          value
+                        }
+                      ) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      appearance: "plain",
+                      "aria-label": "Remove link",
+                      icon: IcRoundClose,
+                      isDisabled: readOnly,
+                      onPress: removeLink,
+                      size: "icon-small"
+                    }
+                  )
+                ] })
+              ] }),
+              expanded && hasFields && /* @__PURE__ */ jsx(ListRowBody, { children: /* @__PURE__ */ jsx(LinkRowEditor, { node, picker }) }),
+              !expanded && picker?.fields && /* @__PURE__ */ jsx(ListRowFooter, { children: /* @__PURE__ */ jsx(
+                CompactRecordFields,
+                {
+                  fields: Type.fields(picker.fields),
+                  layout: "footer",
+                  value
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    picker && /* @__PURE__ */ jsx(
+      LinkPickerDialog,
+      {
+        isOpen: editOpen,
+        onOpenChange: setEditOpen,
+        onPick: (link) => {
+          setValue(
+            (links2) => links2.map(
+              (current, currentIndex) => currentIndex === index ? link : current
+            )
+          );
+        },
+        picker,
+        type,
+        value
+      }
+    )
+  ] });
+}
+function LinkFieldDropIndicator({ active }) {
   return /* @__PURE__ */ jsx(
-    FormRow,
+    "div",
     {
-      field,
-      type: fields,
-      readOnly,
-      rowId: multiple ? rowId : void 0,
-      children: inner
+      "aria-hidden": true,
+      className: styles.LinkFieldView.dropIndicator(),
+      "data-active": active || void 0
     }
   );
 }
-function useReferenceViewer() {
-  const nav = useNav();
-  const locale = useLocale();
-  const graph = useGraph();
-  return (reference) => {
-    if (UrlReference.isUrl(reference)) {
-      window.open(reference[UrlReference.url], "_blank");
-    } else if (EntryReference.isEntryReference(reference)) {
-      graph.first({
-        id: reference[EntryReference.entry],
-        locale: reference[Reference.type] === "entry" ? locale : null,
-        select: {
-          id: Entry.id,
-          workspace: Entry.workspace,
-          root: Entry.root
-        },
-        status: "preferDraft"
-      }).then((entry) => {
-        if (!entry) return;
-        window.open(`#${nav.entry(entry)}`, "_blank");
+function SingleLinkFieldView({ field }) {
+  const [value] = useField(field);
+  const options = useFieldOptions(field);
+  const node = useFieldNode(field);
+  const nodeIsEmpty = useAtomValue(node.isEmpty);
+  const selectedValue = isLinkFieldRow(value) ? value : void 0;
+  const isEmpty = nodeIsEmpty || !selectedValue;
+  const hasRows = Boolean(selectedValue);
+  const readOnly = Boolean(options.readOnly);
+  const selectedPicker = selectedValue ? options.pickers[getPickerType(selectedValue[Reference.type])] : void 0;
+  const showFold = Boolean(selectedPicker?.fields);
+  const content = (hasRows || !readOnly) && /* @__PURE__ */ jsxs(List, { "aria-label": options.label || "Link", children: [
+    selectedValue && /* @__PURE__ */ jsx(
+      SingleLinkRow,
+      {
+        field,
+        node,
+        value: selectedValue
+      }
+    ),
+    isEmpty && !readOnly && /* @__PURE__ */ jsx(ListCreateRow, { empty: true, children: /* @__PURE__ */ jsx(SingleLinkCreateActions, { field }) })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx(
+      ListLabel,
+      {
+        "aria-label": hasRows ? "Link selected" : "No link selected",
+        expanded: true,
+        hasRows,
+        isDisabled: true,
+        description: options.help,
+        shared: options.shared,
+        showFold,
+        inline: options.inline,
+        children: options.label
+      }
+    ),
+    content
+  ] });
+}
+function MultipleLinksFieldView({ field }) {
+  const [value] = useField(field);
+  const options = useFieldOptions(field);
+  const list = useFieldNode(field);
+  const links = value ?? [];
+  const nodes = useNodes(list) ?? [];
+  const readOnly = Boolean(options.readOnly);
+  const hasRows = nodes.length > 0;
+  const hasFoldableRows = links.some((link) => {
+    const picker = options.pickers[getPickerType(link[Reference.type])];
+    return Boolean(picker?.fields);
+  });
+  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 currentNodes = get(list.nodes);
+      const fromIndex = currentNodes.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 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 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(
+      LinkFieldDropIndicator,
+      {
+        active: dropIndicator?.index === 0 && dropIndicator.position === "before"
+      }
+    ),
+    /* @__PURE__ */ jsxs(List, { "aria-label": options.label || "Links", children: [
+      nodes.length > 0 && /* @__PURE__ */ jsx(Fragment2, { children: nodes.map((node, index) => {
+        const value2 = links[index];
+        if (!value2) return null;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsx(
+            LinkFieldDropIndicator,
+            {
+              active: isBoundaryDropTarget(index)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MultipleLinkRow,
+            {
+              dragging: Boolean(draggingRowId),
+              expanded: !foldedIds.has(value2._id),
+              field,
+              index,
+              node,
+              onMoveRow: moveRow,
+              onRowDragEnd: () => {
+                setDraggingRowId(null);
+                setDropIndicator(null);
+              },
+              onRowDragStart: () => setDraggingRowId(value2._id),
+              onDropIndicatorChange: (position) => setDropIndicator(position ? { index, position } : null),
+              onToggleRow: toggleRow,
+              value: value2
+            }
+          )
+        ] }, value2._id);
+      }) }),
+      /* @__PURE__ */ jsx(
+        LinkFieldDropIndicator,
+        {
+          active: dropIndicator?.index === nodes.length - 1 && dropIndicator.position === "after"
+        }
+      ),
+      !readOnly && /* @__PURE__ */ jsx(ListCreateRow, { empty: !hasRows, children: /* @__PURE__ */ jsx(MultipleLinkCreateActions, { field }) })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx(
+      ListLabel,
+      {
+        "aria-label": hasRows ? allExpanded ? "Collapse all links" : "Expand all links" : "No links to fold",
+        expanded: allExpanded,
+        hasRows,
+        isDisabled: !hasFoldableRows,
+        onPress: toggleAll,
+        description: options.help,
+        shared: options.shared,
+        showFold: hasFoldableRows,
+        inline: options.inline,
+        children: options.label
+      }
+    ),
+    content
+  ] });
 }
 export {
-  MultipleLinksInput,
-  SingleLinkInput
+  MultipleLinksFieldView,
+  SingleLinkFieldView
 };