@sanity/visual-editing
Version:
[](https://npm-stat.com/charts.html?package=@sanity/visual-editing) [](https://
1,142 lines (1,118 loc) • 93.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: !0 });
var jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), presentationComlink = require("@sanity/presentation-comlink"), react = require("react"), reactDom = require("react-dom"), csm = require("@sanity/client/csm"), _visualEditing = require("@sanity/ui/_visual-editing"), styledComponents = require("styled-components"), mutations = require("../_chunks-cjs/mutations.cjs"), SharedStateContext = require("../_chunks-cjs/SharedStateContext.cjs"), mutate = require("@sanity/mutate"), PointerEvents = require("../_chunks-cjs/PointerEvents.cjs"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), visualEditingCsm = require("@sanity/visual-editing-csm"), scrollIntoView = require("scroll-into-view-if-needed"), comlink = require("@sanity/comlink"), xstate = require("xstate"), context = require("../_chunks-cjs/context.cjs"), rxjs = require("rxjs"), optimistic_index = require("../optimistic/index.cjs");
function _interopDefaultCompat(e) {
return e && typeof e == "object" && "default" in e ? e : { default: e };
}
var scrollIntoView__default = /* @__PURE__ */ _interopDefaultCompat(scrollIntoView);
const History = (props) => {
const $ = reactCompilerRuntime.c(8), {
comlink: comlink2,
history
} = props;
let t0, t1;
$[0] !== comlink2 || $[1] !== history ? (t0 = () => comlink2?.on("presentation/navigate", (data) => {
history?.update(data);
}), t1 = [comlink2, history], $[0] = comlink2, $[1] = history, $[2] = t0, $[3] = t1) : (t0 = $[2], t1 = $[3]), react.useEffect(t0, t1);
let t2, t3;
return $[4] !== comlink2 || $[5] !== history ? (t2 = () => {
if (history)
return history.subscribe((update) => {
update.title = update.title || document.title, comlink2?.post("visual-editing/navigate", update);
});
}, t3 = [comlink2, history], $[4] = comlink2, $[5] = history, $[6] = t2, $[7] = t3) : (t2 = $[6], t3 = $[7]), react.useEffect(t2, t3), null;
}, Meta = (props) => {
const $ = reactCompilerRuntime.c(3), {
comlink: comlink2
} = props;
let t0, t1;
return $[0] !== comlink2 ? (t0 = () => {
const sendMeta = () => {
comlink2.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 = [comlink2], $[0] = comlink2, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), react.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 $ = reactCompilerRuntime.c(4), {
getDocument
} = mutations.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
} = mutations.getArrayItemKeyAndParentPath(target), {
path: arrayPath,
key: referenceItemKey
} = mutations.getArrayItemKeyAndParentPath(node);
arrayPath && referenceItemKey && referenceItemKey !== targetKey && doc.patch(async (t22) => {
const {
getSnapshot
} = t22, snapshot = await getSnapshot(), elementValue = mutations.get(snapshot, target.path);
return hasExplicitKey ? [mutate.at(arrayPath, mutate.remove({
_key: targetKey
})), mutate.at(arrayPath, mutate.insert(elementValue, position, {
_key: referenceItemKey
}))] : [mutate.at(arrayPath, mutate.remove(~~targetKey)), mutate.at(arrayPath, mutate.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]), react.useEffect(t0, t1);
const dispatchDragEndEvent = _temp$9;
let t2;
return $[3] === 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 = react.createContext(null);
function useSchema() {
const context2 = react.useContext(SchemaContext);
if (!context2)
throw new Error("Schema context is missing");
return context2;
}
function getArrayRemoveAction(node, doc) {
if (!node.type) throw new Error("Node type is missing");
return () => doc.patch(async ({
getSnapshot
}) => mutations.getArrayRemovePatches(node, await getSnapshot()));
}
function getArrayInsertAction(node, doc, insertType, position) {
if (!node.type) throw new Error("Node type is missing");
return () => doc.patch(() => mutations.getArrayInsertPatches(node, insertType, position));
}
function getDuplicateAction(node, doc) {
if (!node.type) throw new Error("Node type is missing");
return () => doc.patch(async ({
getSnapshot
}) => mutations.getArrayDuplicatePatches(node, await getSnapshot()));
}
function getContextMenuItems(context2) {
const {
node,
field,
parent,
doc
} = context2;
return field?.type === "arrayItem" ? getContextMenuArrayItems({
node,
field,
doc
}) : parent?.type === "union" ? getContextMenuUnionItems({
node,
parent,
doc
}) : Promise.resolve([]);
}
function getDuplicateItem(context2) {
const {
node,
doc
} = context2;
return doc ? [{
type: "action",
label: "Duplicate",
icon: icons.CopyIcon,
action: getDuplicateAction(node, doc),
telemetryEvent: "Visual Editing Context Menu Item Duplicated"
}] : [];
}
function getRemoveItems(context2) {
const {
node,
doc
} = context2;
return doc ? [{
type: "action",
label: "Remove",
icon: icons.RemoveIcon,
action: getArrayRemoveAction(node, doc),
telemetryEvent: "Visual Editing Context Menu Item Removed"
}] : [];
}
async function getMoveItems(context2, withDivider = !0) {
const {
node,
doc
} = context2;
if (!doc) return [];
const items = [], groupItems = [], [moveUpPatches, moveDownPatches, moveFirstPatches, moveLastPatches] = await Promise.all([mutations.getArrayMovePatches(node, doc, "previous"), mutations.getArrayMovePatches(node, doc, "next"), mutations.getArrayMovePatches(node, doc, "first"), mutations.getArrayMovePatches(node, doc, "last")]);
return moveFirstPatches.length && groupItems.push({
type: "action",
label: "To top",
icon: icons.PublishIcon,
action: () => doc.patch(moveFirstPatches),
telemetryEvent: "Visual Editing Context Menu Item Moved"
}), moveUpPatches.length && groupItems.push({
type: "action",
label: "Up",
icon: icons.ArrowUpIcon,
action: () => doc.patch(moveUpPatches),
telemetryEvent: "Visual Editing Context Menu Item Moved"
}), moveDownPatches.length && groupItems.push({
type: "action",
label: "Down",
icon: icons.ArrowDownIcon,
action: () => doc.patch(moveDownPatches),
telemetryEvent: "Visual Editing Context Menu Item Moved"
}), moveLastPatches.length && groupItems.push({
type: "action",
label: "To bottom",
icon: icons.UnpublishIcon,
action: () => doc.patch(moveLastPatches),
telemetryEvent: "Visual Editing Context Menu Item Moved"
}), groupItems.length && (items.push({
type: "group",
label: "Move",
icon: icons.SortIcon,
items: groupItems
}), withDivider && items.push({
type: "divider"
})), items;
}
async function getContextMenuArrayItems(context2) {
const {
node,
field,
doc
} = context2, items = [];
return items.push(...getDuplicateItem(context2)), items.push(...getRemoveItems(context2)), items.push(...await getMoveItems(context2)), items.push({
type: "action",
label: "Insert before",
icon: icons.InsertAboveIcon,
action: getArrayInsertAction(node, doc, field.name, "before"),
telemetryEvent: "Visual Editing Context Menu Item Inserted"
}), items.push({
type: "action",
label: "Insert after",
icon: icons.InsertBelowIcon,
action: getArrayInsertAction(node, doc, field.name, "after"),
telemetryEvent: "Visual Editing Context Menu Item Inserted"
}), items;
}
const InsertMenuWrapper = (props) => {
const $ = reactCompilerRuntime.c(12), {
label,
parent,
width,
onSelect,
boundaryElement
} = props;
let t0;
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = ["left-start", "right", "left", "right-end", "left-end", "bottom", "top"], $[0] = t0) : t0 = $[0];
let t1;
$[1] === 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__ */ jsxRuntime.jsx(PointerEvents.InsertMenu, { node: parent, onSelect }), $[5] = onSelect, $[6] = parent, $[7] = t3) : t3 = $[7];
let t4;
return $[8] !== label || $[9] !== t2 || $[10] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.MenuGroup, { fontSize: 1, icon: icons.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(context2) {
const {
doc,
node,
parent
} = context2, items = [];
if (items.push(...getDuplicateItem(context2)), items.push(...getRemoveItems(context2)), items.push(...await getMoveItems(context2)), 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__ */ jsxRuntime.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__ */ jsxRuntime.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: icons.InsertAboveIcon,
items: parent.of.filter((item) => item.type === "unionOption").map((t) => ({
type: "action",
icon: PointerEvents.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: icons.InsertBelowIcon,
items: parent.of.filter((item) => item.type === "unionOption").map((t) => ({
type: "action",
label: t.name === "block" ? "Paragraph" : t.title || t.name,
icon: PointerEvents.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 $ = reactCompilerRuntime.c(27), {
node,
onDismiss,
boundaryElement
} = props, sendTelemetry = PointerEvents.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] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.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__ */ jsxRuntime.jsx(_visualEditing.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] === 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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(_visualEditing.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__ */ jsxRuntime.jsx(Component, { boundaryElement, sendTelemetry }), $[23] = Component, $[24] = boundaryElement, $[25] = sendTelemetry, $[26] = t1) : t1 = $[26], t1;
}
return null;
}
const ContextMenu = (props) => {
const $ = reactCompilerRuntime.c(43), {
node,
onDismiss,
position: t0
} = props, {
x,
y
} = t0, [boundaryElement, setBoundaryElement] = react.useState(null), {
getField
} = useSchema(), {
getDocument
} = mutations.useDocuments();
let t1;
$[0] !== getField || $[1] !== node ? (t1 = getField(node), $[0] = getField, $[1] = node, $[2] = t1) : t1 = $[2];
const {
field,
parent
} = t1;
let t2;
t2 = field?.title || field?.name || "Unknown type";
const title = t2, [items, setItems] = react.useState(void 0);
let t3, t4;
$[3] !== field || $[4] !== getDocument || $[5] !== node || $[6] !== parent ? (t3 = () => {
(async () => {
const doc = getDocument(node.id);
if (!doc)
return;
const items_0 = await getContextMenuItems({
node,
field,
parent,
doc
});
setItems(items_0);
})();
}, t4 = [field, node, parent, getDocument], $[3] = field, $[4] = getDocument, $[5] = node, $[6] = parent, $[7] = t3, $[8] = t4) : (t3 = $[7], t4 = $[8]), react.useEffect(t3, t4);
let t5, t6;
$[9] !== x || $[10] !== y ? (t6 = {
getBoundingClientRect: () => ({
bottom: y,
left: x,
right: x,
top: y,
width: 0,
height: 0
})
}, $[9] = x, $[10] = y, $[11] = t6) : t6 = $[11], t5 = t6;
const contextMenuReferenceElement = t5;
let t7, t8;
$[12] !== field ? (t8 = PointerEvents.getNodeIcon(field), $[12] = field, $[13] = t8) : t8 = $[13], t7 = t8;
const icon = t7;
let t9;
$[14] === Symbol.for("react.memo_cache_sentinel") ? (t9 = {
minWidth: 120,
maxWidth: 160
}, $[14] = t9) : t9 = $[14];
let t10;
$[15] !== icon || $[16] !== items ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { flex: "none", children: items ? /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: 1, children: icon }) : /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Spinner, { size: 1 }) }), $[15] = icon, $[16] = items, $[17] = t10) : t10 = $[17];
const t11 = items ? title : "Loading...";
let t12;
$[18] !== t11 ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { flex: 1, space: 2, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: 1, weight: "semibold", children: t11 }) }), $[18] = t11, $[19] = t12) : t12 = $[19];
let t13;
$[20] !== t10 || $[21] !== t12 ? (t13 = /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Flex, { gap: 2, padding: 2, children: [
t10,
t12
] }), $[20] = t10, $[21] = t12, $[22] = t13) : t13 = $[22];
let t14;
$[23] !== boundaryElement || $[24] !== items || $[25] !== onDismiss ? (t14 = items && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(_visualEditing.MenuDivider, {}),
items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(ContextMenuItem, { node: item, onDismiss, boundaryElement }, i))
] }), $[23] = boundaryElement, $[24] = items, $[25] = onDismiss, $[26] = t14) : t14 = $[26];
let t15;
$[27] !== t13 || $[28] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Menu, { style: t9, children: [
t13,
t14
] }), $[27] = t13, $[28] = t14, $[29] = t15) : t15 = $[29];
const t16 = `${x}-${y}`;
let t17;
$[30] !== x || $[31] !== y ? (t17 = {
position: "absolute",
left: x,
top: y
}, $[30] = x, $[31] = y, $[32] = t17) : t17 = $[32];
let t18;
$[33] !== t16 || $[34] !== t17 ? (t18 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: t17 }, t16), $[33] = t16, $[34] = t17, $[35] = t18) : t18 = $[35];
let t19;
$[36] !== contextMenuReferenceElement || $[37] !== t15 || $[38] !== t18 ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Popover, { __unstable_margins: POPOVER_MARGINS, arrow: !1, open: !0, placement: "right-start", referenceElement: contextMenuReferenceElement, content: t15, children: t18 }), $[36] = contextMenuReferenceElement, $[37] = t15, $[38] = t18, $[39] = t19) : t19 = $[39];
let t20;
return $[40] !== onDismiss || $[41] !== t19 ? (t20 = /* @__PURE__ */ jsxRuntime.jsx(PointerEvents.PopoverPortal, { setBoundaryElement, onDismiss, children: t19 }), $[40] = onDismiss, $[41] = t19, $[42] = t20) : t20 = $[42], t20;
};
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 = react.createContext(null);
function usePreviewSnapshots() {
const context2 = react.useContext(PreviewSnapshotsContext);
if (!context2)
throw new Error("Preview Snapshots context is missing");
return context2;
}
const isReactElementOverlayComponent = (component) => react.isValidElement(component), Root$3 = styledComponents.styled(_visualEditing.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 = styledComponents.styled(_visualEditing.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 = styledComponents.styled(_visualEditing.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 = styledComponents.styled(_visualEditing.Flex)`
margin: -0.5rem;
[data-hovered]:not([data-menu-open]) & {
pointer-events: all;
}
`, Tab = styledComponents.styled(_visualEditing.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 = styledComponents.styled(_visualEditing.Card)`
cursor: pointer;
background-color: var(--card-focus-ring-color);
right: 0;
border-radius: 3px;
& [data-ui='Text'] {
color: #fff;
white-space: nowrap;
}
`, Labels = styledComponents.styled(_visualEditing.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 = styledComponents.styled.div`
position: absolute;
inset: 0;
pointer-events: all;
`;
function createIntentLink(node) {
const {
id,
type,
path,
baseUrl,
tool,
workspace
} = node;
return csm.createEditUrl({
baseUrl,
workspace,
tool,
type,
id,
path: path ? visualEditingCsm.pathToUrlString(csm.studioPath.fromString(path)) : []
});
}
const ElementOverlayInner = (props) => {
const $ = reactCompilerRuntime.c(59), {
id,
element,
focused,
componentResolver,
node,
showActions,
draggable,
targets,
elementType,
comlink: comlink2,
onActivateExclusivePlugin,
onMenuOpenChange
} = 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, t4;
$[8] !== element || $[9] !== focused || $[10] !== getField || $[11] !== getType ? (t4 = 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] = t4) : t4 = $[12];
const getContext = t4;
let t5;
$[13] !== elementType || $[14] !== getContext || $[15] !== node ? (t5 = elementType === "element" ? getContext(node) : void 0, $[13] = elementType, $[14] = getContext, $[15] = node, $[16] = t5) : t5 = $[16];
let t6;
if ($[17] !== getContext || $[18] !== targets) {
let t72;
$[20] !== getContext ? (t72 = (target) => getContext(target.sanity, target.element), $[20] = getContext, $[21] = t72) : t72 = $[21], t6 = targets.map(t72).filter(_temp$8), $[17] = getContext, $[18] = targets, $[19] = t6;
} else
t6 = $[19];
let t7;
$[22] !== t5 || $[23] !== t6 ? (t7 = {
legacyComponentContext: t5,
pluginContexts: t6
}, $[22] = t5, $[23] = t6, $[24] = t7) : t7 = $[24], t3 = t7;
const resolverContexts = t3, customComponents = useCustomComponents(resolverContexts.legacyComponentContext, componentResolver), nodePluginCollections = useResolvedNodePlugins(resolverContexts.pluginContexts, props.plugins);
let t8;
$[25] !== schemaType ? (t8 = schemaType?.icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: {
__html: schemaType.icon
} }) : /* @__PURE__ */ jsxRuntime.jsx(icons.DocumentIcon, {}), $[25] = schemaType, $[26] = t8) : t8 = $[26];
const icon = t8, menuId = react.useId();
let t9;
$[27] !== nodePluginCollections ? (t9 = nodePluginCollections?.some(_temp2$5), $[27] = nodePluginCollections, $[28] = t9) : t9 = $[28];
const showMenu = t9 || nodePluginCollections?.length > 1;
let t10;
$[29] !== id ? (t10 = () => {
window.dispatchEvent(new CustomEvent("sanity-overlay/label-click", {
detail: {
id
}
}));
}, $[29] = id, $[30] = t10) : t10 = $[30];
const handleLabelClick = t10;
let t11;
$[31] !== href || $[32] !== showActions ? (t11 = showActions ? /* @__PURE__ */ jsxRuntime.jsx(Actions, { gap: 1, paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href }) }) : null, $[31] = href, $[32] = showActions, $[33] = t11) : t11 = $[33];
let t12;
$[34] !== comlink2 || $[35] !== draggable || $[36] !== handleLabelClick || $[37] !== icon || $[38] !== menuId || $[39] !== nodePluginCollections || $[40] !== onActivateExclusivePlugin || $[41] !== onMenuOpenChange || $[42] !== showMenu || $[43] !== title ? (t12 = (title || showMenu) && /* @__PURE__ */ jsxRuntime.jsx(Tab, { gap: 1, paddingY: 1, onClick: handleLabelClick, children: /* @__PURE__ */ jsxRuntime.jsxs(Labels, { gap: 2, padding: 2, children: [
draggable && /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { className: "drag-handle", size: 0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.DragHandleIcon, {}) }) }),
/* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: 0, children: icon }),
title && /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: 1, weight: "medium", children: title }),
showMenu && /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { paddingLeft: 2, onClick: _temp3$2, children: /* @__PURE__ */ jsxRuntime.jsx(MenuWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, { id: menuId, popover: {
animate: !0,
placement: "bottom-start",
constrainSize: !0,
tone: "default"
}, onOpen: () => {
onMenuOpenChange?.(!0);
}, onClose: () => {
onMenuOpenChange?.(!1);
}, button: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Button, { icon: icons.EllipsisVerticalIcon, tone: "primary", padding: 2 }), menu: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Menu, { paddingY: 0, children: /* @__PURE__ */ jsxRuntime.jsx(PointerEvents.PointerEvents, { children: nodePluginCollections?.map((nodePluginCollection_0, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Stack, { role: "group", paddingY: 1, space: 0, children: [
/* @__PURE__ */ jsxRuntime.jsx(_visualEditing.MenuItem, { paddingY: 2, text: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { paddingY: 2, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { muted: !0, size: 1, style: {
textTransform: "capitalize"
}, children: `${nodePluginCollection_0.context.document.name}: ${nodePluginCollection_0.context.field?.name}` }) }), onClick: () => {
nodePluginCollection_0.context.node && comlink2?.post("visual-editing/focus", nodePluginCollection_0.context.node);
} }),
nodePluginCollection_0.exclusive.map((exclusive) => exclusive.component ? /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.MenuItem, { paddingY: 2, icon: exclusive.icon || /* @__PURE__ */ jsxRuntime.jsx(icons.PlugIcon, {}), text: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { paddingY: 2, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: 1, children: exclusive.title || exclusive.name }) }), onClick: () => onActivateExclusivePlugin?.(exclusive, nodePluginCollection_0.context) }, exclusive.name) : null)
] }),
index < nodePluginCollections.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {})
] }, nodePluginCollection_0.id)) }) }) }) }) })
] }) }), $[34] = comlink2, $[35] = draggable, $[36] = handleLabelClick, $[37] = icon, $[38] = menuId, $[39] = nodePluginCollections, $[40] = onActivateExclusivePlugin, $[41] = onMenuOpenChange, $[42] = showMenu, $[43] = title, $[44] = t12) : t12 = $[44];
let t13;
$[45] !== nodePluginCollections ? (t13 = nodePluginCollections?.map(_temp4$1), $[45] = nodePluginCollections, $[46] = t13) : t13 = $[46];
let t14;
$[47] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(HUD, { children: t13 }), $[47] = t13, $[48] = t14) : t14 = $[48];
let t15;
$[49] !== t11 || $[50] !== t12 || $[51] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs(PointerEvents.PointerEvents, { children: [
t11,
t12,
t14
] }), $[49] = t11, $[50] = t12, $[51] = t14, $[52] = t15) : t15 = $[52];
let t16;
$[53] !== customComponents || $[54] !== resolverContexts.legacyComponentContext ? (t16 = Array.isArray(customComponents) ? customComponents.map((t172, i) => {
const {
component: Component_1,
props: props_0
} = t172;
return /* @__PURE__ */ jsxRuntime.jsx(Component_1, { PointerEvents: PointerEvents.PointerEvents, ...resolverContexts.legacyComponentContext, ...props_0 }, i);
}) : customComponents, $[53] = customComponents, $[54] = resolverContexts.legacyComponentContext, $[55] = t16) : t16 = $[55];
let t17;
return $[56] !== t15 || $[57] !== t16 ? (t17 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
t15,
t16
] }), $[56] = t15, $[57] = t16, $[58] = t17) : t17 = $[58], t17;
}, ElementOverlay = react.memo(function(props) {
const $ = reactCompilerRuntime.c(38), {
draggable,
focused,
hovered,
rect,
wasMaybeCollapsed,
enableScrollIntoView
} = props, ref = react.useRef(null), scrolledIntoViewRef = react.useRef(!1);
let t0;
const t1 = `${rect.w}px`, t2 = `${rect.h}px`, t3 = `translate(${rect.x}px, ${rect.y}px)`;
let t4;
$[0] !== t1 || $[1] !== t2 || $[2] !== t3 ? (t4 = {
width: t1,
height: t2,
transform: t3
}, $[0] = t1, $[1] = t2, $[2] = t3, $[3] = t4) : t4 = $[3], t0 = t4;
const style = t0;
let t5, t6;
$[4] !== enableScrollIntoView || $[5] !== focused || $[6] !== wasMaybeCollapsed ? (t5 = () => {
if (!scrolledIntoViewRef.current && !wasMaybeCollapsed && focused === !0 && ref.current && enableScrollIntoView) {
const target = ref.current;
scrollIntoView__default.default(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;
}, t6 = [focused, wasMaybeCollapsed, enableScrollIntoView], $[4] = enableScrollIntoView, $[5] = focused, $[6] = wasMaybeCollapsed, $[7] = t5, $[8] = t6) : (t5 = $[7], t6 = $[8]), react.useEffect(t5, t6);
const [isNearTop, setIsNearTop] = react.useState(!1);
let t7;
$[9] !== hovered ? (t7 = () => {
if (!ref.current || !hovered)
return;
const io = new IntersectionObserver((t82) => {
const [intersection] = t82;
setIsNearTop(intersection.boundingClientRect.top < 0);
}, {
threshold: 1
});
return io.observe(ref.current), () => io.disconnect();
}, $[9] = hovered, $[10] = t7) : t7 = $[10];
let t8;
$[11] !== hovered || $[12] !== isNearTop ? (t8 = [hovered, isNearTop], $[11] = hovered, $[12] = isNearTop, $[13] = t8) : t8 = $[13], react.useEffect(t7, t8);
const [activeExclusivePlugin, setActiveExclusivePlugin] = react.useState(null);
let t9;
$[14] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => {
setActiveExclusivePlugin(null), window.dispatchEvent(new CustomEvent("sanity-overlay/exclusive-plugin-closed"));
}, $[14] = t9) : t9 = $[14];
const closeExclusivePluginView = t9;
let t10;
$[15] === Symbol.for("react.memo_cache_sentinel") ? (t10 = (plugin, context2) => {
setActiveExclusivePlugin({
plugin,
context: context2
});
}, $[15] = t10) : t10 = $[15];
const onActivateExclusivePlugin = t10, handleExclusivePluginClick = _temp5$1, ExclusivePluginComponent = activeExclusivePlugin?.plugin.component, [menuOpen, setMenuOpen] = react.useState(!1);
let t11;
$[16] === Symbol.for("react.memo_cache_sentinel") ? (t11 = () => {
setMenuOpen(!1);
}, $[16] = t11) : t11 = $[16];
let t12;
$[17] !== hovered ? (t12 = [hovered], $[17] = hovered, $[18] = t12) : t12 = $[18], react.useEffect(t11, t12);
let t13;
$[19] !== ExclusivePluginComponent || $[20] !== menuOpen ? (t13 = menuOpen || ExclusivePluginComponent ? /* @__PURE__ */ jsxRuntime.jsx(PointerEvents.PopoverBackground, { onDismiss: closeExclusivePluginView, blockScroll: menuOpen }) : null, $[19] = ExclusivePluginComponent, $[20] = menuOpen, $[21] = t13) : t13 = $[21];
const t14 = focused ? "" : void 0, t15 = hovered ? "" : void 0, t16 = isNearTop ? "" : void 0, t17 = draggable ? "" : void 0, t18 = menuOpen ? "" : void 0;
let t19;
$[22] !== ExclusivePluginComponent || $[23] !== activeExclusivePlugin || $[24] !== hovered || $[25] !== props ? (t19 = ExclusivePluginComponent ? /* @__PURE__ */ jsxRuntime.jsx(ExclusivePluginContainer, { "data-sanity-overlay-element": !0, onClick: handleExclusivePluginClick, children: /* @__PURE__ */ jsxRuntime.jsx(ExclusivePluginComponent, { ...activeExclusivePlugin.context, closeExclusiveView: closeExclusivePluginView }) }) : hovered ? /* @__PURE__ */ jsxRuntime.jsx(ElementOverlayInner, { ...props, onActivateExclusivePlugin, onMenuOpenChange: setMenuOpen }) : null, $[22] = ExclusivePluginComponent, $[23] = activeExclusivePlugin, $[24] = hovered, $[25] = props, $[26] = t19) : t19 = $[26];
let t20;
$[27] !== style || $[28] !== t14 || $[29] !== t15 || $[30] !== t16 || $[31] !== t17 || $[32] !== t18 || $[33] !== t19 ? (t20 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { "data-focused": t14, "data-hovered": t15, "data-flipped": t16, "data-draggable": t17, "data-menu-open": t18, ref, style, children: t19 }), $[27] = style, $[28] = t14, $[29] = t15, $[30] = t16, $[31] = t17, $[32] = t18, $[33] = t19, $[34] = t20) : t20 = $[34];
let t21;
return $[35] !== t13 || $[36] !== t20 ? (t21 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
t13,
t20
] }), $[35] = t13, $[36] = t20, $[37] = t21) : t21 = $[37], t21;
});
function useResolvedNodePlugins(componentContexts, plugins) {
const $ = reactCompilerRuntime.c(5);
let t0, t1;
if ($[0] !== componentContexts || $[1] !== plugins) {
let t2;
$[3] !== plugins ? (t2 = (componentContext) => {
const instance = {
id: SharedStateContext.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] = t2) : t2 = $[4], t1 = componentContexts.map(t2), $[0] = componentContexts, $[1] = plugins, $[2] = t1;
} else
t1 = $[2];
return t0 = t1, t0;
}
function useCustomComponents(componentContext, componentResolver) {
const $ = reactCompilerRuntime.c(4);
let t0;
bb0: {
if (!componentContext) {
t0 = void 0;
break bb0;
}
let t1;
if ($[0] !== componentContext || $[1] !== componentResolver) {
const resolved = componentResolver?.(componentContext);
if (!resolved) {
t0 = void 0;
break bb0;
}
if (isReactElementOverlayComponent(resolved)) {
t0 = resolved;
break bb0;
}
t1 = (Array.isArray(resolved) ? resolved : [resolved]).map(_temp6$1), $[0] = componentContext, $[1] = componentResolver, $[2] = t1, $[3] = t0;
} else
t1 = $[2], t0 = $[3];
t0 = t1;
}
return t0;
}
function _temp6$1(component) {
return typeof component == "object" && "component" in component ? component : {
component,
props: {}
};
}
const Link = react.memo(function(props) {
const $ = reactCompilerRuntime.c(6), referer = react.useSyncExternalStore(_temp7$1, _temp8$1);
let t0, t1;
$[0] !== props.href || $[1] !== referer ? (t1 = getLinkHref(props.href, referer), $[0] = props.href, $[1] = referer, $[2] = t1) : t1 = $[2], t0 = t1;
const href = t0;
let t2;
$[3] === Symbol.for("react.memo_cache_sentinel") ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(ActionOpen, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: 1, weight: "medium", children: "Open in Studio" }) }), $[3] = t2) : t2 = $[3];
let t3;
return $[4] !== href ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { as: "a", href, target: "_blank", rel: "noopener noreferrer", children: t2 }), $[4] = href, $[5] = t3) : t3 = $[5], t3;
});
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__ */ jsxRuntime.jsx(react.Fragment, { children: nodePluginCollection_1.hud.map((hud) => {
const Component_0 = hud.component;
return Component_0 ? /* @__PURE__ */ jsxRuntime.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 $ = reactCompilerRuntime.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__ */ jsxRuntime.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 $ = reactCompilerRuntime.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__ */ jsxRuntime.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 = styledComponents.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 $ = reactCompilerRuntime.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 = _visualEditing.usePrefersDark(), theme = _visualEditing.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 = _visualEditing.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = styledComponents.styled(_visualEditing.Card)`
position: fixed;
bottom: 2rem;
left: 2rem;
`, OverlayMinimapPrompt = () => {
const $ = reactCompilerRuntime.c(2);
let t0;
$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = {
zIndex: "999999"
}, $[0] = t0) : t0 = $[0];
let t1;
return $[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$1, { padding: 2, shadow: 2, radius: 2, style: t0, children: /* @__PURE__ */ jsxRuntime.jsxs(_visualEditing.Flex, { align: "center", gap: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Hotkeys, { keys: ["Shift"] }),
/* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: 1, children: "Zoom Out" }),
/* @__PURE__ */ jsxRuntime.jsx(icons.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"