@sanity/visual-editing
Version:
[](https://npm-stat.com/charts.html?package=@sanity/visual-editing) [](https://
1,192 lines (1,168 loc) • 91.1 kB
JavaScript
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { c } from "react/compiler-runtime";
import { createCompatibilityActors, isMaybePreviewIframe, isMaybePreviewWindow } from "@sanity/presentation-comlink";
import { useEffect, createContext, useContext, useState, memo, useRef, startTransition, useId, Fragment as Fragment$1, isValidElement, useSyncExternalStore, useDeferredValue, useReducer } from "react";
import { createPortal } from "react-dom";
import { createEditUrl, studioPath, getDraftId, getPublishedId } from "@sanity/client/csm";
import { MenuGroup, MenuDivider, MenuItem, Box, Text, Spinner, Stack, Flex, Menu, Popover, Button, Card, usePrefersDark, useTheme_v2, Hotkeys, LayerProvider, PortalProvider, ThemeProvider, studioTheme, isHTMLAnchorElement, isHTMLElement } from "@sanity/ui/_visual-editing";
import { styled } from "styled-components";
import { useDocuments, getArrayItemKeyAndParentPath, get, getArrayMovePatches, getArrayInsertPatches, getArrayDuplicatePatches, getArrayRemovePatches, useOptimisticActorReady, useOptimisticActor } from "../_chunks-es/mutations.js";
import { v4, SharedStateContext, createOverlayController, sanityNodesExistInSameArray } from "../_chunks-es/SharedStateContext.js";
import { useOptimistic } from "../_chunks-es/SharedStateContext.js";
import { at, remove, insert } from "@sanity/mutate";
import { getNodeIcon, InsertMenu, PopoverPortal, useTelemetry, PopoverBackground, PointerEvents, TelemetryContext, events } from "../_chunks-es/PointerEvents.js";
import { InsertAboveIcon, InsertBelowIcon, CopyIcon, RemoveIcon, SortIcon, PublishIcon, ArrowUpIcon, ArrowDownIcon, UnpublishIcon, DragHandleIcon, PlugIcon, EllipsisVerticalIcon, DocumentIcon, ExpandIcon } from "@sanity/icons";
import { MenuButton, MenuDivider as MenuDivider$1 } from "@sanity/ui";
import { pathToUrlString } from "@sanity/visual-editing-csm";
import { createDataAttribute } from "@sanity/visual-editing-csm";
import scrollIntoView from "scroll-into-view-if-needed";
import { createNode, createNodeMachine } from "@sanity/comlink";
import { createActor } from "xstate";
import { setActor } from "../_chunks-es/context.js";
import { emptyActor } from "../_chunks-es/context.js";
import { ReplaySubject, Subject, merge } from "rxjs";
import { createDatasetMutator } from "../optimistic/index.js";
import { createDocumentMutator } from "../optimistic/index.js";
const History = (props) => {
const $ = c(8), {
comlink,
history
} = props;
let t0, t1;
$[0] !== comlink || $[1] !== history ? (t0 = () => comlink?.on("presentation/navigate", (data) => {
history?.update(data);
}), t1 = [comlink, history], $[0] = comlink, $[1] = history, $[2] = t0, $[3] = t1) : (t0 = $[2], t1 = $[3]), useEffect(t0, t1);
let t2, t3;
return $[4] !== comlink || $[5] !== history ? (t2 = () => {
if (history)
return history.subscribe((update) => {
update.title = update.title || document.title, comlink?.post("visual-editing/navigate", update);
});
}, t3 = [comlink, history], $[4] = comlink, $[5] = history, $[6] = t2, $[7] = t3) : (t2 = $[6], t3 = $[7]), useEffect(t2, t3), null;
}, Meta = (props) => {
const $ = c(3), {
comlink
} = props;
let t0, t1;
return $[0] !== comlink ? (t0 = () => {
const sendMeta = () => {
comlink.post("visual-editing/meta", {
title: document.title
});
}, observer = new MutationObserver((t2) => {
const [mutation] = t2;
mutation.target.nodeName === "TITLE" && sendMeta();
});
return observer.observe(document.head, {
subtree: !0,
characterData: !0,
childList: !0
}), sendMeta(), () => observer.disconnect();
}, t1 = [comlink], $[0] = comlink, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1), null;
};
function getReferenceNodeAndInsertPosition(position) {
if (position) {
const {
top,
right,
bottom,
left
} = position;
if (left || top)
return {
node: (left ?? top).sanity,
position: "after"
};
if (right || bottom)
return {
node: (right ?? bottom).sanity,
position: "before"
};
}
}
function useDragEndEvents() {
const $ = c(4), {
getDocument
} = useDocuments();
let t0, t1;
$[0] !== getDocument ? (t0 = () => {
const handler = (e) => {
const {
insertPosition,
target,
preventInsertDefault
} = e.detail;
if (preventInsertDefault)
return;
const reference = getReferenceNodeAndInsertPosition(insertPosition);
if (reference) {
const doc = getDocument(target.id), {
node,
position
} = reference, {
key: targetKey,
hasExplicitKey
} = getArrayItemKeyAndParentPath(target), {
path: arrayPath,
key: referenceItemKey
} = getArrayItemKeyAndParentPath(node);
arrayPath && referenceItemKey && referenceItemKey !== targetKey && doc.patch(async (t22) => {
const {
getSnapshot
} = t22, snapshot = await getSnapshot(), elementValue = get(snapshot, target.path);
return hasExplicitKey ? [at(arrayPath, remove({
_key: targetKey
})), at(arrayPath, insert(elementValue, position, {
_key: referenceItemKey
}))] : [at(arrayPath, remove(~~targetKey)), at(arrayPath, insert(elementValue, position, referenceItemKey > targetKey ? ~~referenceItemKey - 1 : ~~referenceItemKey))];
});
}
};
return window.addEventListener("sanity/dragEnd", handler), () => {
window.removeEventListener("sanity/dragEnd", handler);
};
}, t1 = [getDocument], $[0] = getDocument, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1);
const dispatchDragEndEvent = _temp$9;
let t2;
return $[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = {
dispatchDragEndEvent
}, $[3] = t2) : t2 = $[3], t2;
}
function _temp$9(event) {
const customEvent = new CustomEvent("sanity/dragEnd", {
detail: event,
cancelable: !0
});
window.dispatchEvent(customEvent);
}
const SchemaContext = createContext(null);
function useSchema() {
const context = useContext(SchemaContext);
if (!context)
throw new Error("Schema context is missing");
return context;
}
function getArrayRemoveAction(node, doc) {
if (!node.type) throw new Error("Node type is missing");
return () => doc.patch(async ({
getSnapshot
}) => getArrayRemovePatches(node, await getSnapshot()));
}
function getArrayInsertAction(node, doc, insertType, position) {
if (!node.type) throw new Error("Node type is missing");
return () => doc.patch(() => getArrayInsertPatches(node, insertType, position));
}
function getDuplicateAction(node, doc) {
if (!node.type) throw new Error("Node type is missing");
return () => doc.patch(async ({
getSnapshot
}) => getArrayDuplicatePatches(node, await getSnapshot()));
}
function getContextMenuItems(context) {
const {
node,
field,
parent,
doc
} = context;
return field?.type === "arrayItem" ? getContextMenuArrayItems({
node,
field,
doc
}) : parent?.type === "union" ? getContextMenuUnionItems({
node,
parent,
doc
}) : Promise.resolve([]);
}
function getDuplicateItem(context) {
const {
node,
doc
} = context;
return doc ? [{
type: "action",
label: "Duplicate",
icon: CopyIcon,
action: getDuplicateAction(node, doc),
telemetryEvent: "Visual Editing Context Menu Item Duplicated"
}] : [];
}
function getRemoveItems(context) {
const {
node,
doc
} = context;
return doc ? [{
type: "action",
label: "Remove",
icon: RemoveIcon,
action: getArrayRemoveAction(node, doc),
telemetryEvent: "Visual Editing Context Menu Item Removed"
}] : [];
}
async function getMoveItems(context, withDivider = !0) {
const {
node,
doc
} = context;
if (!doc) return [];
const items = [], groupItems = [], [moveUpPatches, moveDownPatches, moveFirstPatches, moveLastPatches] = await Promise.all([getArrayMovePatches(node, doc, "previous"), getArrayMovePatches(node, doc, "next"), getArrayMovePatches(node, doc, "first"), getArrayMovePatches(node, doc, "last")]);
return moveFirstPatches.length && groupItems.push({
type: "action",
label: "To top",
icon: PublishIcon,
action: () => doc.patch(moveFirstPatches),
telemetryEvent: "Visual Editing Context Menu Item Moved"
}), moveUpPatches.length && groupItems.push({
type: "action",
label: "Up",
icon: ArrowUpIcon,
action: () => doc.patch(moveUpPatches),
telemetryEvent: "Visual Editing Context Menu Item Moved"
}), moveDownPatches.length && groupItems.push({
type: "action",
label: "Down",
icon: ArrowDownIcon,
action: () => doc.patch(moveDownPatches),
telemetryEvent: "Visual Editing Context Menu Item Moved"
}), moveLastPatches.length && groupItems.push({
type: "action",
label: "To bottom",
icon: UnpublishIcon,
action: () => doc.patch(moveLastPatches),
telemetryEvent: "Visual Editing Context Menu Item Moved"
}), groupItems.length && (items.push({
type: "group",
label: "Move",
icon: SortIcon,
items: groupItems
}), withDivider && items.push({
type: "divider"
})), items;
}
async function getContextMenuArrayItems(context) {
const {
node,
field,
doc
} = context, items = [];
return items.push(...getDuplicateItem(context)), items.push(...getRemoveItems(context)), items.push(...await getMoveItems(context)), items.push({
type: "action",
label: "Insert before",
icon: InsertAboveIcon,
action: getArrayInsertAction(node, doc, field.name, "before"),
telemetryEvent: "Visual Editing Context Menu Item Inserted"
}), items.push({
type: "action",
label: "Insert after",
icon: InsertBelowIcon,
action: getArrayInsertAction(node, doc, field.name, "after"),
telemetryEvent: "Visual Editing Context Menu Item Inserted"
}), items;
}
const InsertMenuWrapper = (props) => {
const $ = c(12), {
label,
parent,
width,
onSelect,
boundaryElement
} = props;
let t0;
$[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = ["left-start", "right", "left", "right-end", "left-end", "bottom", "top"], $[0] = t0) : t0 = $[0];
let t1;
$[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = [4, 4, 4, 4], $[1] = t1) : t1 = $[1];
let t2;
$[2] !== boundaryElement || $[3] !== width ? (t2 = {
arrow: !1,
constrainSize: !0,
floatingBoundary: boundaryElement,
padding: 0,
placement: "right-start",
fallbackPlacements: t0,
preventOverflow: !0,
width,
__unstable_margins: t1
}, $[2] = boundaryElement, $[3] = width, $[4] = t2) : t2 = $[4];
let t3;
$[5] !== onSelect || $[6] !== parent ? (t3 = /* @__PURE__ */ jsx(InsertMenu, { node: parent, onSelect }), $[5] = onSelect, $[6] = parent, $[7] = t3) : t3 = $[7];
let t4;
return $[8] !== label || $[9] !== t2 || $[10] !== t3 ? (t4 = /* @__PURE__ */ jsx(MenuGroup, { fontSize: 1, icon: InsertBelowIcon, padding: 2, popover: t2, space: 2, text: label, children: t3 }), $[8] = label, $[9] = t2, $[10] = t3, $[11] = t4) : t4 = $[11], t4;
};
async function getContextMenuUnionItems(context) {
const {
doc,
node,
parent
} = context, items = [];
if (items.push(...getDuplicateItem(context)), items.push(...getRemoveItems(context)), items.push(...await getMoveItems(context)), parent.options?.insertMenu) {
const width = (parent.options.insertMenu || {}).views?.some((view) => view.name === "grid") ? 0 : void 0;
items.push({
type: "custom",
component: ({
boundaryElement,
sendTelemetry
}) => /* @__PURE__ */ jsx(InsertMenuWrapper, { label: "Insert before", onSelect: (schemaType) => {
getArrayInsertAction(node, doc, schemaType.name, "before")(), sendTelemetry("Visual Editing Context Menu Item Inserted", null);
}, parent, width, boundaryElement })
}), items.push({
type: "custom",
component: ({
boundaryElement,
sendTelemetry
}) => /* @__PURE__ */ jsx(InsertMenuWrapper, { label: "Insert after", onSelect: (schemaType) => {
getArrayInsertAction(node, doc, schemaType.name, "after")(), sendTelemetry("Visual Editing Context Menu Item Inserted", null);
}, parent, width, boundaryElement })
});
} else
items.push({
type: "group",
label: "Insert before",
icon: InsertAboveIcon,
items: parent.of.filter((item) => item.type === "unionOption").map((t) => ({
type: "action",
icon: getNodeIcon(t),
label: t.name === "block" ? "Paragraph" : t.title || t.name,
action: getArrayInsertAction(node, doc, t.name, "before"),
telemetryEvent: "Visual Editing Context Menu Item Inserted"
}))
}), items.push({
type: "group",
label: "Insert after",
icon: InsertBelowIcon,
items: parent.of.filter((item) => item.type === "unionOption").map((t) => ({
type: "action",
label: t.name === "block" ? "Paragraph" : t.title || t.name,
icon: getNodeIcon(t),
action: getArrayInsertAction(node, doc, t.name, "after"),
telemetryEvent: "Visual Editing Context Menu Item Inserted"
}))
});
return items;
}
const POPOVER_MARGINS = [-4, 4, -4, 4];
function ContextMenuItem(props) {
const $ = c(27), {
node,
onDismiss,
boundaryElement
} = props, sendTelemetry = useTelemetry();
let t0;
$[0] !== node || $[1] !== onDismiss || $[2] !== sendTelemetry ? (t0 = () => {
node.type === "action" && (node.action?.(), onDismiss?.(), node.telemetryEvent && sendTelemetry(node.telemetryEvent, null));
}, $[0] = node, $[1] = onDismiss, $[2] = sendTelemetry, $[3] = t0) : t0 = $[3];
const onClick = t0;
if (node.type === "divider") {
let t1;
return $[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(MenuDivider, {}), $[4] = t1) : t1 = $[4], t1;
}
if (node.type === "action") {
const t1 = !node.action;
let t2;
return $[5] !== node.hotkeys || $[6] !== node.icon || $[7] !== node.label || $[8] !== onClick || $[9] !== t1 ? (t2 = /* @__PURE__ */ jsx(MenuItem, { fontSize: 1, hotkeys: node.hotkeys, icon: node.icon, padding: 2, space: 2, text: node.label, disabled: t1, onClick }), $[5] = node.hotkeys, $[6] = node.icon, $[7] = node.label, $[8] = onClick, $[9] = t1, $[10] = t2) : t2 = $[10], t2;
}
if (node.type === "group") {
const t1 = node.icon;
let t2;
$[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t2 = {
arrow: !1,
constrainSize: !0,
placement: "right-start",
fallbackPlacements: ["left-start", "right", "left", "right-end", "left-end", "bottom", "top"],
preventOverflow: !0,
__unstable_margins: POPOVER_MARGINS
}, $[11] = t2) : t2 = $[11];
const t3 = node.label;
let t4;
if ($[12] !== boundaryElement || $[13] !== node.items || $[14] !== onDismiss) {
let t52;
$[16] !== boundaryElement || $[17] !== onDismiss ? (t52 = (item, itemIndex) => /* @__PURE__ */ jsx(ContextMenuItem, { node: item, onDismiss, boundaryElement }, itemIndex), $[16] = boundaryElement, $[17] = onDismiss, $[18] = t52) : t52 = $[18], t4 = node.items.map(t52), $[12] = boundaryElement, $[13] = node.items, $[14] = onDismiss, $[15] = t4;
} else
t4 = $[15];
let t5;
return $[19] !== node.icon || $[20] !== node.label || $[21] !== t4 ? (t5 = /* @__PURE__ */ jsx(MenuGroup, { fontSize: 1, icon: t1, padding: 2, popover: t2, space: 2, text: t3, children: t4 }), $[19] = node.icon, $[20] = node.label, $[21] = t4, $[22] = t5) : t5 = $[22], t5;
}
if (node.type === "custom") {
const {
component: Component
} = node;
let t1;
return $[23] !== Component || $[24] !== boundaryElement || $[25] !== sendTelemetry ? (t1 = /* @__PURE__ */ jsx(Component, { boundaryElement, sendTelemetry }), $[23] = Component, $[24] = boundaryElement, $[25] = sendTelemetry, $[26] = t1) : t1 = $[26], t1;
}
return null;
}
const ContextMenu = (props) => {
const $ = c(43), {
node,
onDismiss,
position: t0
} = props, {
x,
y
} = t0, [boundaryElement, setBoundaryElement] = useState(null), {
getField
} = useSchema(), {
getDocument
} = useDocuments();
let t1;
$[0] !== getField || $[1] !== node ? (t1 = getField(node), $[0] = getField, $[1] = node, $[2] = t1) : t1 = $[2];
const {
field,
parent
} = t1, title = field?.title || field?.name || "Unknown type", [items, setItems] = useState(void 0);
let t2, t3;
$[3] !== field || $[4] !== getDocument || $[5] !== node || $[6] !== parent ? (t2 = () => {
(async () => {
const doc = getDocument(node.id);
if (!doc)
return;
const items_0 = await getContextMenuItems({
node,
field,
parent,
doc
});
setItems(items_0);
})();
}, t3 = [field, node, parent, getDocument], $[3] = field, $[4] = getDocument, $[5] = node, $[6] = parent, $[7] = t2, $[8] = t3) : (t2 = $[7], t3 = $[8]), useEffect(t2, t3);
let t4;
$[9] !== x || $[10] !== y ? (t4 = {
getBoundingClientRect: () => ({
bottom: y,
left: x,
right: x,
top: y,
width: 0,
height: 0
})
}, $[9] = x, $[10] = y, $[11] = t4) : t4 = $[11];
const contextMenuReferenceElement = t4;
let t5;
$[12] !== field ? (t5 = getNodeIcon(field), $[12] = field, $[13] = t5) : t5 = $[13];
const icon = t5;
let t6;
$[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t6 = {
minWidth: 120,
maxWidth: 160
}, $[14] = t6) : t6 = $[14];
let t7;
$[15] !== icon || $[16] !== items ? (t7 = /* @__PURE__ */ jsx(Box, { flex: "none", children: items ? /* @__PURE__ */ jsx(Text, { size: 1, children: icon }) : /* @__PURE__ */ jsx(Spinner, { size: 1 }) }), $[15] = icon, $[16] = items, $[17] = t7) : t7 = $[17];
const t8 = items ? title : "Loading...";
let t9;
$[18] !== t8 ? (t9 = /* @__PURE__ */ jsx(Stack, { flex: 1, space: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: t8 }) }), $[18] = t8, $[19] = t9) : t9 = $[19];
let t10;
$[20] !== t7 || $[21] !== t9 ? (t10 = /* @__PURE__ */ jsxs(Flex, { gap: 2, padding: 2, children: [
t7,
t9
] }), $[20] = t7, $[21] = t9, $[22] = t10) : t10 = $[22];
let t11;
$[23] !== boundaryElement || $[24] !== items || $[25] !== onDismiss ? (t11 = items && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(MenuDivider, {}),
items.map((item, i) => /* @__PURE__ */ jsx(ContextMenuItem, { node: item, onDismiss, boundaryElement }, i))
] }), $[23] = boundaryElement, $[24] = items, $[25] = onDismiss, $[26] = t11) : t11 = $[26];
let t12;
$[27] !== t10 || $[28] !== t11 ? (t12 = /* @__PURE__ */ jsxs(Menu, { style: t6, children: [
t10,
t11
] }), $[27] = t10, $[28] = t11, $[29] = t12) : t12 = $[29];
const t13 = `${x}-${y}`;
let t14;
$[30] !== x || $[31] !== y ? (t14 = {
position: "absolute",
left: x,
top: y
}, $[30] = x, $[31] = y, $[32] = t14) : t14 = $[32];
let t15;
$[33] !== t13 || $[34] !== t14 ? (t15 = /* @__PURE__ */ jsx("div", { style: t14 }, t13), $[33] = t13, $[34] = t14, $[35] = t15) : t15 = $[35];
let t16;
$[36] !== contextMenuReferenceElement || $[37] !== t12 || $[38] !== t15 ? (t16 = /* @__PURE__ */ jsx(Popover, { __unstable_margins: POPOVER_MARGINS, arrow: !1, open: !0, placement: "right-start", referenceElement: contextMenuReferenceElement, content: t12, children: t15 }), $[36] = contextMenuReferenceElement, $[37] = t12, $[38] = t15, $[39] = t16) : t16 = $[39];
let t17;
return $[40] !== onDismiss || $[41] !== t16 ? (t17 = /* @__PURE__ */ jsx(PopoverPortal, { setBoundaryElement, onDismiss, children: t16 }), $[40] = onDismiss, $[41] = t16, $[42] = t17) : t17 = $[42], t17;
};
function getLinkHref(href, referer) {
try {
const parsed = new URL(href, typeof location > "u" ? void 0 : location.origin);
if (parsed.hash) {
const hash = new URL(getLinkHref(parsed.hash.slice(1), referer));
return `${parsed.origin}${parsed.pathname}${parsed.search}#${hash.pathname}${hash.search}`;
}
return parsed.searchParams.set("preview", referer), parsed.toString();
} catch {
return href;
}
}
const PreviewSnapshotsContext = createContext(null);
function usePreviewSnapshots() {
const context = useContext(PreviewSnapshotsContext);
if (!context)
throw new Error("Preview Snapshots context is missing");
return context;
}
const isReactElementOverlayComponent = (component) => isValidElement(component), Root$3 = styled(Card)`
background-color: var(--overlay-bg);
border-radius: 3px;
pointer-events: none;
position: absolute;
will-change: transform;
box-shadow: var(--overlay-box-shadow);
transition: none;
--overlay-bg: transparent;
--overlay-box-shadow: inset 0 0 0 1px transparent;
[data-overlays] & {
--overlay-bg: color-mix(in srgb, transparent 95%, var(--card-focus-ring-color));
--overlay-box-shadow: inset 0 0 0 2px
color-mix(in srgb, transparent 50%, var(--card-focus-ring-color));
}
[data-fading-out] & {
transition:
box-shadow 1550ms,
background-color 1550ms;
--overlay-bg: rgba(0, 0, 255, 0);
--overlay-box-shadow: inset 0 0 0 1px transparent;
}
&[data-focused] {
--overlay-box-shadow: inset 0 0 0 1px var(--card-focus-ring-color);
}
&[data-hovered]:not([data-focused]) {
transition: none;
--overlay-box-shadow: inset 0 0 0 2px var(--card-focus-ring-color);
}
/* [data-unmounted] & {
--overlay-box-shadow: inset 0 0 0 1px var(--card-focus-ring-color);
} */
:link {
text-decoration: none;
}
`, Actions = styled(Flex)`
bottom: 100%;
cursor: pointer;
pointer-events: none;
position: absolute;
right: 0;
[data-hovered]:not([data-menu-open]) & {
pointer-events: all;
}
[data-flipped] & {
bottom: auto;
top: 100%;
}
`, HUD = styled(Flex)`
top: 100%;
cursor: pointer;
pointer-events: none;
position: absolute;
left: 0;
gap: 4px;
padding: 4px 0;
flex-wrap: wrap;
[data-hovered]:not([data-menu-open]) & {
pointer-events: all;
}
[data-flipped] & {
top: calc(100% + 2rem);
}
`, MenuWrapper = styled(Flex)`
margin: -0.5rem;
[data-hovered]:not([data-menu-open]) & {
pointer-events: all;
}
`, Tab = styled(Flex)`
bottom: 100%;
cursor: pointer;
pointer-events: none;
position: absolute;
left: 0;
[data-hovered]:not([data-menu-open]) & {
pointer-events: all;
}
[data-flipped] & {
bottom: auto;
top: 100%;
}
`, ActionOpen = styled(Card)`
cursor: pointer;
background-color: var(--card-focus-ring-color);
right: 0;
border-radius: 3px;
& [data-ui='Text'] {
color: #fff;
white-space: nowrap;
}
`, Labels = styled(Flex)`
display: flex;
align-items: center;
background-color: var(--card-focus-ring-color);
right: 0;
border-radius: 3px;
& [data-ui='Text'],
& [data-sanity-icon] {
color: #fff;
white-space: nowrap;
}
`, ExclusivePluginContainer = styled.div`
position: absolute;
inset: 0;
pointer-events: all;
`;
function createIntentLink(node) {
const {
id,
type,
path,
baseUrl,
tool,
workspace,
perspective
} = node, [url, search] = createEditUrl({
baseUrl,
workspace,
tool,
type,
id,
path: path ? pathToUrlString(studioPath.fromString(path)) : []
}).split("?"), searchParams = new URLSearchParams(search), resolvedPerspective = perspective || searchParams.get("perspective");
return resolvedPerspective === "drafts" ? searchParams.delete("perspective") : resolvedPerspective && searchParams.set("perspective", resolvedPerspective), `${url}?${searchParams}`;
}
const ElementOverlayInner = (props) => {
const $ = c(60), {
id,
element,
focused,
componentResolver,
node,
showActions,
draggable,
targets,
elementType,
comlink,
onActivateExclusivePlugin,
onMenuOpenChange,
inFrame
} = props, {
getField,
getType
} = useSchema();
let t0;
$[0] !== getType || $[1] !== node ? (t0 = getType(node), $[0] = getType, $[1] = node, $[2] = t0) : t0 = $[2];
const schemaType = t0;
let t1;
$[3] !== node ? (t1 = "path" in node ? createIntentLink(node) : node.href, $[3] = node, $[4] = t1) : t1 = $[4];
const href = t1, previewSnapshots = usePreviewSnapshots();
let t2;
bb0: {
if (!("path" in node)) {
t2 = void 0;
break bb0;
}
let t32;
$[5] !== node || $[6] !== previewSnapshots ? (t32 = previewSnapshots.find((snapshot) => snapshot._id === node.id)?.title, $[5] = node, $[6] = previewSnapshots, $[7] = t32) : t32 = $[7], t2 = t32;
}
const title = t2;
let t3;
$[8] !== element || $[9] !== focused || $[10] !== getField || $[11] !== getType ? (t3 = function(node_0, nodeElement) {
const schemaType_0 = getType(node_0), {
field,
parent
} = getField(node_0);
if (!("id" in node_0) || !field || !schemaType_0)
return;
const type = field.value.type;
return {
document: schemaType_0,
element,
targetElement: nodeElement || element,
field,
focused: !!focused,
node: node_0,
parent,
type
};
}, $[8] = element, $[9] = focused, $[10] = getField, $[11] = getType, $[12] = t3) : t3 = $[12];
const getContext = t3;
let t4;
$[13] !== elementType || $[14] !== getContext || $[15] !== node ? (t4 = elementType === "element" ? getContext(node) : void 0, $[13] = elementType, $[14] = getContext, $[15] = node, $[16] = t4) : t4 = $[16];
let t5;
if ($[17] !== getContext || $[18] !== targets) {
let t62;
$[20] !== getContext ? (t62 = (target) => getContext(target.sanity, target.element), $[20] = getContext, $[21] = t62) : t62 = $[21], t5 = targets.map(t62).filter(_temp$8), $[17] = getContext, $[18] = targets, $[19] = t5;
} else
t5 = $[19];
let t6;
$[22] !== t4 || $[23] !== t5 ? (t6 = {
legacyComponentContext: t4,
pluginContexts: t5
}, $[22] = t4, $[23] = t5, $[24] = t6) : t6 = $[24];
const resolverContexts = t6, customComponents = useCustomComponents(resolverContexts.legacyComponentContext, componentResolver), nodePluginCollections = useResolvedNodePlugins(resolverContexts.pluginContexts, props.plugins);
let t7;
$[25] !== schemaType ? (t7 = schemaType?.icon ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: {
__html: schemaType.icon
} }) : /* @__PURE__ */ jsx(DocumentIcon, {}), $[25] = schemaType, $[26] = t7) : t7 = $[26];
const icon = t7, menuId = useId();
let t8;
$[27] !== nodePluginCollections ? (t8 = nodePluginCollections?.some(_temp2$5), $[27] = nodePluginCollections, $[28] = t8) : t8 = $[28];
const showMenu = t8 || nodePluginCollections?.length > 1;
let t9;
$[29] !== id ? (t9 = () => {
window.dispatchEvent(new CustomEvent("sanity-overlay/label-click", {
detail: {
id
}
}));
}, $[29] = id, $[30] = t9) : t9 = $[30];
const handleLabelClick = t9;
let t10;
$[31] !== href || $[32] !== inFrame || $[33] !== showActions ? (t10 = showActions ? /* @__PURE__ */ jsx(Actions, { gap: 1, paddingY: 1, children: /* @__PURE__ */ jsx(Link, { inFrame, href }) }) : null, $[31] = href, $[32] = inFrame, $[33] = showActions, $[34] = t10) : t10 = $[34];
let t11;
$[35] !== comlink || $[36] !== draggable || $[37] !== handleLabelClick || $[38] !== icon || $[39] !== menuId || $[40] !== nodePluginCollections || $[41] !== onActivateExclusivePlugin || $[42] !== onMenuOpenChange || $[43] !== showMenu || $[44] !== title ? (t11 = (title || showMenu) && /* @__PURE__ */ jsx(Tab, { gap: 1, paddingY: 1, onClick: handleLabelClick, children: /* @__PURE__ */ jsxs(Labels, { gap: 2, padding: 2, children: [
draggable && /* @__PURE__ */ jsx(Box, { marginRight: 1, children: /* @__PURE__ */ jsx(Text, { className: "drag-handle", size: 0, children: /* @__PURE__ */ jsx(DragHandleIcon, {}) }) }),
/* @__PURE__ */ jsx(Text, { size: 0, children: icon }),
title && /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: title }),
showMenu && /* @__PURE__ */ jsx(Box, { paddingLeft: 2, onClick: _temp3$2, children: /* @__PURE__ */ jsx(MenuWrapper, { children: /* @__PURE__ */ jsx(MenuButton, { id: menuId, popover: {
animate: !0,
placement: "bottom-start",
constrainSize: !0,
tone: "default"
}, onOpen: () => {
onMenuOpenChange?.(!0);
}, onClose: () => {
onMenuOpenChange?.(!1);
}, button: /* @__PURE__ */ jsx(Button, { icon: EllipsisVerticalIcon, tone: "primary", padding: 2 }), menu: /* @__PURE__ */ jsx(Menu, { paddingY: 0, children: /* @__PURE__ */ jsx(PointerEvents, { children: nodePluginCollections?.map((nodePluginCollection_0, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
/* @__PURE__ */ jsxs(Stack, { role: "group", paddingY: 1, space: 0, children: [
/* @__PURE__ */ jsx(MenuItem, { paddingY: 2, text: /* @__PURE__ */ jsx(Box, { paddingY: 2, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, style: {
textTransform: "capitalize"
}, children: `${nodePluginCollection_0.context.document.name}: ${nodePluginCollection_0.context.field?.name}` }) }), onClick: () => {
nodePluginCollection_0.context.node && comlink?.post("visual-editing/focus", nodePluginCollection_0.context.node);
} }),
nodePluginCollection_0.exclusive.map((exclusive) => exclusive.component ? /* @__PURE__ */ jsx(MenuItem, { paddingY: 2, icon: exclusive.icon || /* @__PURE__ */ jsx(PlugIcon, {}), text: /* @__PURE__ */ jsx(Box, { paddingY: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, children: exclusive.title || exclusive.name }) }), onClick: () => onActivateExclusivePlugin?.(exclusive, nodePluginCollection_0.context) }, exclusive.name) : null)
] }),
index < nodePluginCollections.length - 1 && /* @__PURE__ */ jsx(MenuDivider$1, {})
] }, nodePluginCollection_0.id)) }) }) }) }) })
] }) }), $[35] = comlink, $[36] = draggable, $[37] = handleLabelClick, $[38] = icon, $[39] = menuId, $[40] = nodePluginCollections, $[41] = onActivateExclusivePlugin, $[42] = onMenuOpenChange, $[43] = showMenu, $[44] = title, $[45] = t11) : t11 = $[45];
let t12;
$[46] !== nodePluginCollections ? (t12 = nodePluginCollections?.map(_temp4$1), $[46] = nodePluginCollections, $[47] = t12) : t12 = $[47];
let t13;
$[48] !== t12 ? (t13 = /* @__PURE__ */ jsx(HUD, { children: t12 }), $[48] = t12, $[49] = t13) : t13 = $[49];
let t14;
$[50] !== t10 || $[51] !== t11 || $[52] !== t13 ? (t14 = /* @__PURE__ */ jsxs(PointerEvents, { children: [
t10,
t11,
t13
] }), $[50] = t10, $[51] = t11, $[52] = t13, $[53] = t14) : t14 = $[53];
let t15;
$[54] !== customComponents || $[55] !== resolverContexts.legacyComponentContext ? (t15 = Array.isArray(customComponents) ? customComponents.map((t162, i) => {
const {
component: Component_1,
props: props_0
} = t162;
return /* @__PURE__ */ jsx(Component_1, { PointerEvents, ...resolverContexts.legacyComponentContext, ...props_0 }, i);
}) : customComponents, $[54] = customComponents, $[55] = resolverContexts.legacyComponentContext, $[56] = t15) : t15 = $[56];
let t16;
return $[57] !== t14 || $[58] !== t15 ? (t16 = /* @__PURE__ */ jsxs(Fragment, { children: [
t14,
t15
] }), $[57] = t14, $[58] = t15, $[59] = t16) : t16 = $[59], t16;
}, ElementOverlay = memo(function(props) {
const $ = c(39), {
draggable,
focused,
hovered,
rect,
wasMaybeCollapsed,
enableScrollIntoView,
inFrame
} = props, ref = useRef(null), scrolledIntoViewRef = useRef(!1), t0 = `${rect.w}px`, t1 = `${rect.h}px`, t2 = `translate(${rect.x}px, ${rect.y}px)`;
let t3;
$[0] !== t0 || $[1] !== t1 || $[2] !== t2 ? (t3 = {
width: t0,
height: t1,
transform: t2
}, $[0] = t0, $[1] = t1, $[2] = t2, $[3] = t3) : t3 = $[3];
const style = t3;
let t4, t5;
$[4] !== enableScrollIntoView || $[5] !== focused || $[6] !== wasMaybeCollapsed ? (t4 = () => {
if (!scrolledIntoViewRef.current && !wasMaybeCollapsed && focused === !0 && ref.current && enableScrollIntoView) {
const target = ref.current;
scrollIntoView(ref.current, {
behavior: (actions) => {
actions.length !== 0 && target.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "nearest"
});
},
scrollMode: "if-needed",
block: "center",
inline: "nearest"
});
}
scrolledIntoViewRef.current = focused === !0;
}, t5 = [focused, wasMaybeCollapsed, enableScrollIntoView], $[4] = enableScrollIntoView, $[5] = focused, $[6] = wasMaybeCollapsed, $[7] = t4, $[8] = t5) : (t4 = $[7], t5 = $[8]), useEffect(t4, t5);
const [isNearTop, setIsNearTop] = useState(!1);
let t6;
$[9] !== hovered ? (t6 = () => {
if (!ref.current || !hovered)
return;
const io = new IntersectionObserver((t72) => {
const [intersection] = t72;
setIsNearTop(intersection.boundingClientRect.top < 0);
}, {
threshold: 1
});
return io.observe(ref.current), () => io.disconnect();
}, $[9] = hovered, $[10] = t6) : t6 = $[10];
let t7;
$[11] !== hovered || $[12] !== isNearTop ? (t7 = [hovered, isNearTop], $[11] = hovered, $[12] = isNearTop, $[13] = t7) : t7 = $[13], useEffect(t6, t7);
const [activeExclusivePlugin, setActiveExclusivePlugin] = useState(null);
let t8;
$[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t8 = () => {
setActiveExclusivePlugin(null), window.dispatchEvent(new CustomEvent("sanity-overlay/exclusive-plugin-closed"));
}, $[14] = t8) : t8 = $[14];
const closeExclusivePluginView = t8;
let t9;
$[15] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t9 = (plugin, context) => {
setActiveExclusivePlugin({
plugin,
context
});
}, $[15] = t9) : t9 = $[15];
const onActivateExclusivePlugin = t9, handleExclusivePluginClick = _temp5$1, ExclusivePluginComponent = activeExclusivePlugin?.plugin.component, [menuOpen, setMenuOpen] = useState(!1);
let t10;
$[16] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t10 = () => {
startTransition(() => setMenuOpen(!1));
}, $[16] = t10) : t10 = $[16];
let t11;
$[17] !== hovered ? (t11 = [hovered], $[17] = hovered, $[18] = t11) : t11 = $[18], useEffect(t10, t11);
let t12;
$[19] !== ExclusivePluginComponent || $[20] !== menuOpen ? (t12 = menuOpen || ExclusivePluginComponent ? /* @__PURE__ */ jsx(PopoverBackground, { onDismiss: closeExclusivePluginView, blockScroll: menuOpen }) : null, $[19] = ExclusivePluginComponent, $[20] = menuOpen, $[21] = t12) : t12 = $[21];
const t13 = focused ? "" : void 0, t14 = hovered ? "" : void 0, t15 = isNearTop ? "" : void 0, t16 = draggable ? "" : void 0, t17 = menuOpen ? "" : void 0;
let t18;
$[22] !== ExclusivePluginComponent || $[23] !== activeExclusivePlugin || $[24] !== hovered || $[25] !== inFrame || $[26] !== props ? (t18 = ExclusivePluginComponent ? /* @__PURE__ */ jsx(ExclusivePluginContainer, { "data-sanity-overlay-element": !0, onClick: handleExclusivePluginClick, children: /* @__PURE__ */ jsx(ExclusivePluginComponent, { ...activeExclusivePlugin.context, closeExclusiveView: closeExclusivePluginView }) }) : hovered ? /* @__PURE__ */ jsx(ElementOverlayInner, { ...props, inFrame, onActivateExclusivePlugin, onMenuOpenChange: setMenuOpen }) : null, $[22] = ExclusivePluginComponent, $[23] = activeExclusivePlugin, $[24] = hovered, $[25] = inFrame, $[26] = props, $[27] = t18) : t18 = $[27];
let t19;
$[28] !== style || $[29] !== t13 || $[30] !== t14 || $[31] !== t15 || $[32] !== t16 || $[33] !== t17 || $[34] !== t18 ? (t19 = /* @__PURE__ */ jsx(Root$3, { "data-focused": t13, "data-hovered": t14, "data-flipped": t15, "data-draggable": t16, "data-menu-open": t17, ref, style, children: t18 }), $[28] = style, $[29] = t13, $[30] = t14, $[31] = t15, $[32] = t16, $[33] = t17, $[34] = t18, $[35] = t19) : t19 = $[35];
let t20;
return $[36] !== t12 || $[37] !== t19 ? (t20 = /* @__PURE__ */ jsxs(Fragment, { children: [
t12,
t19
] }), $[36] = t12, $[37] = t19, $[38] = t20) : t20 = $[38], t20;
});
function useResolvedNodePlugins(componentContexts, plugins) {
const $ = c(5);
let t0;
if ($[0] !== componentContexts || $[1] !== plugins) {
let t1;
$[3] !== plugins ? (t1 = (componentContext) => {
const instance = {
id: v4(),
context: componentContext,
hud: [],
exclusive: []
};
return plugins?.forEach((plugin) => {
plugin.guard?.(componentContext) && (plugin.type === "hud" && instance.hud.push(plugin), plugin.type === "exclusive" && instance.exclusive.push(plugin));
}), instance;
}, $[3] = plugins, $[4] = t1) : t1 = $[4], t0 = componentContexts.map(t1), $[0] = componentContexts, $[1] = plugins, $[2] = t0;
} else
t0 = $[2];
return t0;
}
function useCustomComponents(componentContext, componentResolver) {
const $ = c(3);
let t0;
if ($[0] !== componentContext || $[1] !== componentResolver) {
bb0: {
if (!componentContext) {
t0 = void 0;
break bb0;
}
const resolved = componentResolver?.(componentContext);
if (!resolved) {
t0 = void 0;
break bb0;
}
if (isReactElementOverlayComponent(resolved)) {
t0 = resolved;
break bb0;
}
t0 = (Array.isArray(resolved) ? resolved : [resolved]).map(_temp6$1);
}
$[0] = componentContext, $[1] = componentResolver, $[2] = t0;
} else
t0 = $[2];
return t0;
}
function _temp6$1(component) {
return typeof component == "object" && "component" in component ? component : {
component,
props: {}
};
}
const Link = memo(function(props) {
const $ = c(8), {
inFrame
} = props, referer = useSyncExternalStore(_temp7$1, _temp8$1);
let t0;
$[0] !== props.href || $[1] !== referer ? (t0 = getLinkHref(props.href, referer), $[0] = props.href, $[1] = referer, $[2] = t0) : t0 = $[2];
const href = t0, t1 = inFrame ? void 0 : "_blank", t2 = inFrame ? "noopener" : "noopener noreferrer";
let t3;
$[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t3 = /* @__PURE__ */ jsx(ActionOpen, { padding: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: "Open in Studio" }) }), $[3] = t3) : t3 = $[3];
let t4;
return $[4] !== href || $[5] !== t1 || $[6] !== t2 ? (t4 = /* @__PURE__ */ jsx(Box, { as: "a", href, target: t1, rel: t2, children: t3 }), $[4] = href, $[5] = t1, $[6] = t2, $[7] = t4) : t4 = $[7], t4;
});
function _temp$8(ctx) {
return ctx !== void 0;
}
function _temp2$5(nodePluginCollection) {
return nodePluginCollection.exclusive.length > 0;
}
function _temp3$2(e) {
e.stopPropagation();
}
function _temp4$1(nodePluginCollection_1) {
return /* @__PURE__ */ jsx(Fragment$1, { children: nodePluginCollection_1.hud.map((hud) => {
const Component_0 = hud.component;
return Component_0 ? /* @__PURE__ */ jsx(Component_0, { ...nodePluginCollection_1.context }, hud.name) : null;
}) }, nodePluginCollection_1.id);
}
function _temp5$1(event) {
event.stopPropagation();
}
function _temp7$1(onStoreChange) {
const handlePopState = () => onStoreChange();
return window.addEventListener("popstate", handlePopState), () => window.removeEventListener("popstate", handlePopState);
}
function _temp8$1() {
return window.location.href;
}
const OverlayDragGroupRect = (t0) => {
const $ = c(5), {
dragGroupRect
} = t0, t1 = `${dragGroupRect.y}px`, t2 = `${dragGroupRect.x}px`, t3 = `${dragGroupRect.w - 1}px`, t4 = `${dragGroupRect.h - 1}px`;
let t5;
return $[0] !== t1 || $[1] !== t2 || $[2] !== t3 || $[3] !== t4 ? (t5 = /* @__PURE__ */ jsx("div", { style: {
position: "absolute",
top: t1,
left: t2,
width: t3,
height: t4,
border: "1px dashed #f0709b",
pointerEvents: "none"
} }), $[0] = t1, $[1] = t2, $[2] = t3, $[3] = t4, $[4] = t5) : t5 = $[4], t5;
}, markerThickness = 6;
function lerp(v0, v1, t) {
return v0 * (1 - t) + v1 * t;
}
const OverlayDragInsertMarker = (t0) => {
const $ = c(4), {
dragInsertPosition
} = t0;
if (dragInsertPosition === null)
return;
const flow = dragInsertPosition?.left || dragInsertPosition?.right ? "horizontal" : "vertical";
let x = 0, y = 0, width = 0, height = 0;
if (flow === "horizontal") {
const {
left,
right
} = dragInsertPosition;
if (width = markerThickness, right && left) {
const startX = left.rect.x + left.rect.w, endX = right.rect.x, offset = Math.min(right.rect.h, left.rect.h) * 0.0125;
x = lerp(startX, endX, 0.5) - markerThickness / 2, y = left.rect.y + offset, height = Math.min(right.rect.h, left.rect.h) - offset * 2;
} else if (right && !left) {
const offset_0 = right.rect.h * 0.0125;
x = right.rect.x - markerThickness / 2, y = right.rect.y + offset_0, height = right.rect.h - offset_0 * 2;
} else if (left && !right) {
const offset_1 = left.rect.h * 0.0125;
x = left.rect.x + left.rect.w - markerThickness / 2, y = left.rect.y + offset_1, height = left.rect.h - offset_1 * 2;
}
} else {
const {
bottom,
top
} = dragInsertPosition;
if (bottom && top) {
const startX_0 = Math.min(top.rect.x, bottom.rect.x), startY = top.rect.y + top.rect.h, endY = bottom.rect.y, offset_2 = Math.min(bottom.rect.w, top.rect.w) * 0.0125;
height = markerThickness, x = startX_0 + offset_2, y = lerp(startY, endY, 0.5) - markerThickness / 2, width = Math.max(bottom.rect.w, top.rect.w) - offset_2 * 2;
} else if (bottom && !top) {
const offset_3 = bottom.rect.w * 0.0125;
x = bottom.rect.x + offset_3, y = bottom.rect.y - markerThickness / 2, width = bottom.rect.w - offset_3 * 2, height = markerThickness;
} else if (top && !bottom) {
const offset_4 = top.rect.w * 0.0125;
x = top.rect.x + offset_4, y = top.rect.y + top.rect.h - markerThickness / 2, width = top.rect.w - offset_4 * 2, height = markerThickness;
}
}
const t1 = `${width}px`, t2 = `${height}px`, t3 = `translate(${x}px, ${y}px)`;
let t4;
return $[0] !== t1 || $[1] !== t2 || $[2] !== t3 ? (t4 = /* @__PURE__ */ jsx("div", { style: {
position: "absolute",
width: t1,
height: t2,
transform: t3,
background: "#556bfc",
border: "2px solid white",
borderRadius: "999px",
zIndex: "999999"
} }), $[0] = t1, $[1] = t2, $[2] = t3, $[3] = t4) : t4 = $[3], t4;
}, Root$2 = styled.div`
--drag-preview-opacity: 0.98;
--drag-preview-skeleton-stroke: #ffffff;
@media (prefers-color-scheme: dark) {
--drag-preview-skeleton-stroke: #383d51;
}
position: fixed;
display: grid;
transform: ${({
$scaleFactor,
$width,
$height
}) => `translate(calc(var(--drag-preview-x) - ${$width / 2}px), calc(var(--drag-preview-y) - ${$height / 2}px)) scale(${$scaleFactor})`};
width: ${({
$width
}) => `${$width}px`};
height: ${({
$height
}) => `${$height}px`};
z-index: 9999999;
opacity: var(--drag-preview-opacity);
cursor: move;
.drag-preview-content-wrapper {
position: relative;
width: 100%;
height: 100%;
container-type: inline-size;
}
[data-ui='card'] {
position: relative;
width: 100%;
height: 100%;
}
.drag-preview-skeleton {
position: absolute;
inset: 0;
rect {
stroke: var(--drag-preview-skeleton-stroke);
}
}
.drag-preview-handle {
position: absolute;
top: 4cqmin;
left: 4cqmin;
width: 6cqmin;
fill: var(--drag-preview-handle-fill);
}
`;
function clamp(number, min, max) {
return number < min ? min : number > max ? max : number;
}
function map(number, inMin, inMax, outMin, outMax) {
const mapped = (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
return clamp(mapped, outMin, outMax);
}
const OverlayDragPreview = (t0) => {
const $ = c(50), {
skeleton
} = t0, maxSkeletonWidth = Math.min(skeleton.maxWidth, window.innerWidth / 2), scaleFactor = skeleton.w > maxSkeletonWidth ? maxSkeletonWidth / skeleton.w : 1, offsetX = skeleton.offsetX * scaleFactor, offsetY = skeleton.offsetY * scaleFactor, prefersDark = usePrefersDark(), theme = useTheme_v2(), radius = theme.radius[~~map(skeleton.w, 0, 1920, 1, theme.radius.length - 2)];
let T0, T1, t1, t10, t11, t12, t13, t14, t2, t3, t4, t5, t6, t7, t8, t9;
if ($[0] !== offsetX || $[1] !== offsetY || $[2] !== prefersDark || $[3] !== radius || $[4] !== scaleFactor || $[5] !== skeleton.childRects || $[6] !== skeleton.h || $[7] !== skeleton.w) {
const imageRects = skeleton.childRects.filter(_temp$7), textRects = skeleton.childRects.filter(_temp2$4);
T1 = Root$2, t10 = skeleton.w, t11 = skeleton.h, t12 = offsetX, t13 = offsetY, t14 = scaleFactor, T0 = Card, t5 = radius, t6 = 4, t7 = "hidden", t8 = "transparent", t9 = prefersDark ? "dark" : "light", t4 = "drag-preview-content-wrapper", t2 = "drag-preview-skeleton", t3 = `0 0 ${skeleton.w} ${skeleton.h}`, t1 = [...imageRects, ...textRects], $[0] = offsetX, $[1] = offsetY, $[2] = prefersDark, $[3] = radius, $[4] = scaleFactor, $[5] = skeleton.childRects, $[6] = skeleton.h, $[7] = skeleton.w, $[8] = T0, $[9] = T1, $[10] = t1, $[11] = t10, $[12] = t11, $[13] = t12, $[14] = t13, $[15] = t14, $[16] = t2, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = t6, $[21] = t7, $[22] = t8, $[23] = t9;
} else
T0 = $[8], T1 = $[9], t1 = $[10], t10 = $[11], t11 = $[12], t12 = $[13], t13 = $[14], t14 = $[15], t2 = $[16], t3 = $[17], t4 = $[18], t5 = $[19], t6 = $[20], t7 = $[21], t8 = $[22], t9 = $[23];
let t15;
$[24] !== t1 || $[25] !== theme.color ? (t15 = t1.map((r_1, i) => /* @__PURE__ */ jsx("rect", { x: r_1.x, y: r_1.y, width: r_1.w, height: r_1.h, fill: theme.color.skeleton.from }, i)), $[24] = t1, $[25] = theme.color, $[26] = t15) : t15 = $[26];
let t16;
$[27] !== t15 || $[28] !== t2 || $[29] !== t3 ? (t16 = /* @__PURE__ */ jsx("svg", { className: t2, viewBox: t3, children: t15 }), $[27] = t15, $[28] = t2, $[29] = t3, $[30] = t16) : t16 = $[30];
let t17;
$[31] !== t16 || $[32] !== t4 ? (t17 = /* @__PURE__ */ jsx("div", { className: t4, children: t16 }), $[31] = t16, $[32] = t4, $[33] = t17) : t17 = $[33];
let t18;
$[34] !== T0 || $[35] !== t17 || $[36] !== t5 || $[37] !== t6 || $[38] !== t7 || $[39] !== t8 || $[40] !== t9 ? (t18 = /* @__PURE__ */ jsx(T0, { radius: t5, shadow: t6, overflow: t7, tone: t8, scheme: t9, children: t17 }), $[34] = T0, $[35] = t17, $[36] = t5, $[37] = t6, $[38] = t7, $[39] = t8, $[40] = t9, $[41] = t18) : t18 = $[41];
let t19;
return $[42] !== T1 || $[43] !== t10 || $[44] !== t11 || $[45] !== t12 || $[46] !== t13 || $[47] !== t14 || $[48] !== t18 ? (t19 = /* @__PURE__ */ jsx(T1, { $width: t10, $height: t11, $offsetX: t12, $offsetY: t13, $scaleFactor: t14, children: t18 }), $[42] = T1, $[43] = t10, $[44] = t11, $[45] = t12, $[46] = t13, $[47] = t14, $[48] = t18, $[49] = t19) : t19 = $[49], t19;
};
function _temp$7(r) {
return r.tagName === "IMG";
}
function _temp2$4(r_0) {
return r_0.tagName !== "IMG";
}
const Root$1 = styled(Card)`
position: fixed;
bottom: 2rem;
left: 2rem;
`, OverlayMinimapPrompt = () => {
const $ = c(2);
let t0;
$[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = {
zIndex: "999999"
}, $[0] = t0) : t0 = $[0];
let t1;
return $[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(Root$1, { padding: 2, shadow: 2, radius: 2, style: t0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
/* @__PURE__ */ jsx(Hotkeys, { keys: ["Shift"] }),
/* @__PURE__ */ jsx(Text, { size: 1, children: "Zoom Out" }),
/* @__PURE__ */ jsx(ExpandIcon, {})
] }) }), $[1] = t1) : t1 = $[1], t1;
}, elementsReducer = (elements, message) => {
const {
type
} = message;
switch (type) {
case "element/register":
return elements.find((e) => e.id === message.id) ? elements : [...elements, {
id: message.id,
activated: !1,
element: message.element,
focused: !1,
hovered: !1,
rect: message.rect,
sanity: message.sanity,
dragDisabled: message.dragDisabled,
targets: message.targets,
elementType: message.elementType
}];
case "element/activate":
return elements.map((e) => e.id === message.id ? {
...e,
activated: !0
} : e);
case "element/update":
return elements.map((e) => e.id === message.id ? {
...e,
sanity: message.sanity,
rect: message.rect,
targets: message.targets,
elementType: message.elementType
} : e);
case "element/unregister":
return elements.filter((e) => e.id !== message.id);
case "element/deactivate":
return elements.map((e) => e.id === message.id ? {
...e,
activated: !1,
hovered: !1
} : e);
case "element/mouseenter":
return elements.map((e) => e.id === message.id ? {
...e,
rect: message.rect,
hovered: !0
} : {
...e,
hovered: !1
});
case "element/mouseleave":
return elements.map((element) => element.id === message.id ? {
...element,
hovered: !1
} : element);
case "element/updateRect":
return elements.map((element) => element.id === message.id ? {
...element,
rect: message.rect
} : element);
case "element/click":
return elements.map((e) => ({
...e,
focused: e.id === message.id && "clicked"
}));
case "overlay/reset-mouse-state":
return ele