camox 0.44.0 → 0.45.0

package/dist/features/preview/components/DrillRow.js

@@ -0,0 +1,150 @@
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label } from "@camox/ui/label";
+
+//#region src/features/preview/components/DrillRow.tsx
+/** Label and drill-down button with hover that cannot outlive its sidebar row. */
+const DrillRow = (t0) => {
+	const $ = c(29);
+	const { label, preview, hint, Icon, onClick, hover, postToIframe } = t0;
+	const [isHovered, setIsHovered] = React.useState(false);
+	const fieldId = hover.variant === "field" ? hover.fieldId : void 0;
+	const blockId = hover.variant === "repeater" ? String(hover.blockId) : void 0;
+	const fieldName = hover.variant === "repeater" ? hover.fieldName : void 0;
+	let t1;
+	let t2;
+	if ($[0] !== blockId || $[1] !== fieldId || $[2] !== fieldName || $[3] !== isHovered || $[4] !== postToIframe) {
+		t1 = () => {
+			if (!isHovered) return;
+			if (fieldId !== void 0) {
+				postToIframe({
+					type: "CAMOX_HOVER_FIELD",
+					fieldId
+				});
+				return () => postToIframe({
+					type: "CAMOX_HOVER_FIELD_END",
+					fieldId
+				});
+			}
+			if (blockId === void 0 || fieldName === void 0) return;
+			postToIframe({
+				type: "CAMOX_HOVER_REPEATER",
+				blockId,
+				fieldName
+			});
+			return () => postToIframe({
+				type: "CAMOX_HOVER_REPEATER_END",
+				blockId,
+				fieldName
+			});
+		};
+		t2 = [
+			isHovered,
+			fieldId,
+			blockId,
+			fieldName,
+			postToIframe
+		];
+		$[0] = blockId;
+		$[1] = fieldId;
+		$[2] = fieldName;
+		$[3] = isHovered;
+		$[4] = postToIframe;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		t1 = $[5];
+		t2 = $[6];
+	}
+	React.useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = () => setIsHovered(true);
+		t4 = () => setIsHovered(false);
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		t3 = $[7];
+		t4 = $[8];
+	}
+	let t5;
+	if ($[9] !== label) {
+		t5 = /* @__PURE__ */ jsx(Label, { children: label });
+		$[9] = label;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== hint) {
+		t6 = hint && /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-xs",
+			children: hint
+		});
+		$[11] = hint;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t5 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [t5, t6]
+		});
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== onClick) {
+		t8 = () => {
+			setIsHovered(false);
+			onClick();
+		};
+		$[16] = onClick;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== Icon) {
+		t9 = /* @__PURE__ */ jsx(Icon, { className: "text-muted-foreground h-4 w-4 shrink-0" });
+		$[18] = Icon;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== preview) {
+		t10 = /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: preview
+		});
+		$[20] = preview;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t10 || $[23] !== t8 || $[24] !== t9) {
+		t11 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "hover:bg-accent/75 flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm transition-colors",
+			onClick: t8,
+			children: [t9, t10]
+		});
+		$[22] = t10;
+		$[23] = t8;
+		$[24] = t9;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== t11 || $[27] !== t7) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			onMouseEnter: t3,
+			onMouseLeave: t4,
+			children: [t7, t11]
+		});
+		$[26] = t11;
+		$[27] = t7;
+		$[28] = t12;
+	} else t12 = $[28];
+	return t12;
+};
+
+//#endregion
+export { DrillRow };

package/dist/features/preview/components/FieldOverlayStyles.js

@@ -1,26 +1,29 @@
-import { observeOverlayHighlights } from "../overlayHighlights.js";
+import { previewStore, selectIsCanvasShown } from "../previewStore.js";
 import { useFrame } from "./Frame.js";
 import { c } from "react/compiler-runtime";
 import { useLayoutEffect } from "react";
+import { useSelector } from "@xstate/store-react";
 import { jsx } from "react/jsx-runtime";
 import overlayStyles from "virtual:camox-overlay-css";
 
 //#region src/features/preview/components/FieldOverlayStyles.tsx
 const FieldOverlayStyles = () => {
 	const $ = c(5);
-	if ($[0] !== "1aef50f61b41fbdb91f283373fd928447f799905d1774e36dd8b81214d12c471") {
-		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1aef50f61b41fbdb91f283373fd928447f799905d1774e36dd8b81214d12c471";
-	}
 	const { window } = useFrame();
+	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
 	let t0;
 	let t1;
-	if ($[1] !== window) {
+	if ($[0] !== isCanvasShown || $[1] !== window) {
 		t0 = () => {
 			if (!window) return;
-			return observeOverlayHighlights(window.document);
+			const root = window.document.documentElement;
+			root.toggleAttribute("data-camox-canvas-shown", isCanvasShown);
+			return () => {
+				root.removeAttribute("data-camox-canvas-shown");
+			};
 		};
-		t1 = [window];
+		t1 = [window, isCanvasShown];
+		$[0] = isCanvasShown;
 		$[1] = window;
 		$[2] = t0;
 		$[3] = t1;

package/dist/features/preview/components/FieldToolbar.js

@@ -1,17 +1,15 @@
 import { FORMAT_FLAGS } from "../../../core/lib/modifierFormats.js";
-import { cn } from "../../../lib/utils.js";
-import { previewStore } from "../previewStore.js";
-import { TextLinkPopover } from "../../../core/components/lexical/TextLinkPopover.js";
+import { useEditingFrame } from "../editingFrame.js";
 import { isOverlayMessage } from "../overlayMessages.js";
+import { TextLinkPopover } from "../../../core/components/lexical/TextLinkPopover.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useSelector } from "@xstate/store-react";
-import { Kbd } from "@camox/ui/kbd";
 import { Button } from "@camox/ui/button";
 import { Bold, Highlighter, Italic, Strikethrough } from "lucide-react";
-import * as Tooltip$1 from "@camox/ui/tooltip";
+import { Kbd } from "@camox/ui/kbd";
 import { ButtonGroup } from "@camox/ui/button-group";
+import * as Tooltip$1 from "@camox/ui/tooltip";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 import { Toggle } from "@camox/ui/toggle";
 
@@ -46,27 +44,69 @@ const FORMAT_BUTTONS = [
 		shortcut: null
 	}
 ];
-const FieldToolbar = () => {
-	const $ = c(28);
-	if ($[0] !== "d1e889a3597708ac2bc6872804f1131756eb2e3aa358ca08ef83b3491906d96a") {
-		for (let $i = 0; $i < 28; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "d1e889a3597708ac2bc6872804f1131756eb2e3aa358ca08ef83b3491906d96a";
-	}
-	const iframeElement = useSelector(previewStore, _temp);
+const FieldToolbar = (t0) => {
+	const $ = c(36);
+	const { document } = t0;
+	const { send } = useEditingFrame();
 	const [hasSelection, setHasSelection] = React.useState(false);
 	const [activeFormats, setActiveFormats] = React.useState(0);
 	const [linkTarget, setLinkTarget] = React.useState(null);
 	const [selectedText, setSelectedText] = React.useState("");
 	const [linkPopoverOpen, setLinkPopoverOpen] = React.useState(false);
 	const linkPopoverOpenRef = React.useRef(false);
-	let t0;
+	const [anchor, setAnchor] = React.useState(null);
 	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = () => {
+	if ($[0] !== document) {
+		t1 = () => {
+			if (linkPopoverOpenRef.current) return;
+			const selection = document.getSelection();
+			if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
+				setHasSelection(false);
+				return;
+			}
+			const rect = selection.getRangeAt(0).getBoundingClientRect();
+			if (!rect.width && !rect.height) return;
+			setAnchor({
+				top: rect.top,
+				left: rect.left + rect.width / 2
+			});
+		};
+		$[0] = document;
+		$[1] = t1;
+	} else t1 = $[1];
+	const updateAnchor = t1;
+	let t2;
+	let t3;
+	if ($[2] !== document || $[3] !== updateAnchor) {
+		t2 = () => {
+			document.addEventListener("selectionchange", updateAnchor);
+			document.addEventListener("scroll", updateAnchor, true);
+			document.defaultView?.addEventListener("resize", updateAnchor);
+			return () => {
+				document.removeEventListener("selectionchange", updateAnchor);
+				document.removeEventListener("scroll", updateAnchor, true);
+				document.defaultView?.removeEventListener("resize", updateAnchor);
+			};
+		};
+		t3 = [document, updateAnchor];
+		$[2] = document;
+		$[3] = updateAnchor;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	React.useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[6] !== document || $[7] !== updateAnchor) {
+		t4 = () => {
 			const handleMessage = (event) => {
 				const data = event.data;
 				if (!isOverlayMessage(data)) return;
 				if (data.type === "CAMOX_TEXT_SELECTION_STATE") {
+					updateAnchor();
 					setHasSelection(data.hasSelection);
 					setActiveFormats(data.activeFormats);
 					if (linkPopoverOpenRef.current) return;
@@ -75,6 +115,7 @@ const FieldToolbar = () => {
 					return;
 				}
 				if (data.type === "CAMOX_OPEN_TEXT_LINK_POPOVER") {
+					updateAnchor();
 					linkPopoverOpenRef.current = true;
 					setHasSelection(true);
 					setLinkTarget(data.target);
@@ -82,74 +123,84 @@ const FieldToolbar = () => {
 					setLinkPopoverOpen(true);
 				}
 			};
-			window.addEventListener("message", handleMessage);
-			return () => window.removeEventListener("message", handleMessage);
+			const targetWindow = document.defaultView;
+			targetWindow?.addEventListener("message", handleMessage);
+			return () => targetWindow?.removeEventListener("message", handleMessage);
 		};
-		t1 = [];
-		$[1] = t0;
-		$[2] = t1;
+		t5 = [document, updateAnchor];
+		$[6] = document;
+		$[7] = updateAnchor;
+		$[8] = t4;
+		$[9] = t5;
 	} else {
-		t0 = $[1];
-		t1 = $[2];
+		t4 = $[8];
+		t5 = $[9];
 	}
-	React.useEffect(t0, t1);
-	let t2;
-	if ($[3] !== iframeElement?.contentWindow) {
-		t2 = (formatKey) => {
-			iframeElement?.contentWindow?.postMessage({
+	React.useEffect(t4, t5);
+	let t6;
+	if ($[10] !== send) {
+		t6 = (formatKey) => {
+			send({
 				type: "CAMOX_FORMAT_TEXT",
 				formatKey
-			}, "*");
+			});
 		};
-		$[3] = iframeElement?.contentWindow;
-		$[4] = t2;
-	} else t2 = $[4];
-	const sendFormat = t2;
-	let t3;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = (open) => {
+		$[10] = send;
+		$[11] = t6;
+	} else t6 = $[11];
+	const sendFormat = t6;
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = (open) => {
 			linkPopoverOpenRef.current = open;
 			setLinkPopoverOpen(open);
 		};
-		$[5] = t3;
-	} else t3 = $[5];
-	const handleLinkPopoverOpenChange = t3;
-	let t4;
-	if ($[6] !== iframeElement?.contentWindow) {
-		t4 = (target, text) => {
-			iframeElement?.contentWindow?.postMessage({
+		$[12] = t7;
+	} else t7 = $[12];
+	const handleLinkPopoverOpenChange = t7;
+	let t8;
+	if ($[13] !== send) {
+		t8 = (target, text) => {
+			send({
 				type: "CAMOX_TOGGLE_TEXT_LINK",
 				target,
 				text
-			}, "*");
+			});
 			handleLinkPopoverOpenChange(false);
 		};
-		$[6] = iframeElement?.contentWindow;
-		$[7] = t4;
-	} else t4 = $[7];
-	const sendTextLink = t4;
-	let t5;
-	if ($[8] !== sendTextLink) {
-		t5 = () => {
+		$[13] = send;
+		$[14] = t8;
+	} else t8 = $[14];
+	const sendTextLink = t8;
+	let t9;
+	if ($[15] !== sendTextLink) {
+		t9 = () => {
 			sendTextLink(null);
 		};
-		$[8] = sendTextLink;
-		$[9] = t5;
-	} else t5 = $[9];
-	const unlinkText = t5;
-	const isVisible = hasSelection || linkPopoverOpen;
-	const handleToolbarMouseDown = _temp2;
-	const t6 = isVisible ? "opacity-100 translate-y-0" : "opacity-0 pointer-events-none translate-y-2";
-	let t7;
-	if ($[10] !== t6) {
-		t7 = cn("bottom-17 gap-2", t6);
-		$[10] = t6;
-		$[11] = t7;
-	} else t7 = $[11];
-	let t8;
-	if ($[12] !== activeFormats || $[13] !== sendFormat) {
-		t8 = FORMAT_BUTTONS.map((t9) => {
-			const { key, flag, icon: Icon, label, shortcut } = t9;
+		$[15] = sendTextLink;
+		$[16] = t9;
+	} else t9 = $[16];
+	const unlinkText = t9;
+	const isVisible = anchor && (hasSelection || linkPopoverOpen);
+	const handleToolbarMouseDown = _temp;
+	if (!isVisible) return null;
+	const t10 = `calc(${anchor.top}px * var(--canvas-zoom, 1) - 8px)`;
+	const t11 = `calc(${anchor.left}px * var(--canvas-zoom, 1))`;
+	let t12;
+	if ($[17] !== t10 || $[18] !== t11) {
+		t12 = {
+			top: t10,
+			left: t11,
+			transform: "translateY(-100%)"
+		};
+		$[17] = t10;
+		$[18] = t11;
+		$[19] = t12;
+	} else t12 = $[19];
+	let t13;
+	if ($[20] !== activeFormats || $[21] !== sendFormat) {
+		t13 = FORMAT_BUTTONS.map((t14) => {
+			const { key, flag, icon: Icon, label, shortcut } = t14;
 			const isActive = !!(activeFormats & flag);
 			return /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [/* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
 				render: /* @__PURE__ */ jsx(Toggle, {
@@ -166,67 +217,66 @@ const FieldToolbar = () => {
 				shortcut && /* @__PURE__ */ jsx(Kbd, { children: shortcut })
 			] })] }, key);
 		});
-		$[12] = activeFormats;
-		$[13] = sendFormat;
-		$[14] = t8;
-	} else t8 = $[14];
-	let t9;
-	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx(Button, {
+		$[20] = activeFormats;
+		$[21] = sendFormat;
+		$[22] = t13;
+	} else t13 = $[22];
+	let t14;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(Button, {
 			variant: "outline",
 			size: "icon",
 			"aria-label": "Add link"
 		});
-		$[15] = t9;
-	} else t9 = $[15];
-	let t10;
-	if ($[16] !== linkPopoverOpen || $[17] !== linkTarget || $[18] !== selectedText || $[19] !== sendTextLink || $[20] !== unlinkText) {
-		t10 = /* @__PURE__ */ jsx(TextLinkPopover, {
+		$[23] = t14;
+	} else t14 = $[23];
+	let t15;
+	if ($[24] !== linkPopoverOpen || $[25] !== linkTarget || $[26] !== selectedText || $[27] !== sendTextLink || $[28] !== unlinkText) {
+		t15 = /* @__PURE__ */ jsx(TextLinkPopover, {
 			open: linkPopoverOpen,
 			onOpenChange: handleLinkPopoverOpenChange,
-			trigger: t9,
+			trigger: t14,
 			text: selectedText,
 			target: linkTarget,
 			onSave: sendTextLink,
 			onUnlink: unlinkText
 		});
-		$[16] = linkPopoverOpen;
-		$[17] = linkTarget;
-		$[18] = selectedText;
-		$[19] = sendTextLink;
-		$[20] = unlinkText;
-		$[21] = t10;
-	} else t10 = $[21];
-	let t11;
-	if ($[22] !== t10 || $[23] !== t8) {
-		t11 = /* @__PURE__ */ jsxs(ButtonGroup, { children: [t8, t10] });
-		$[22] = t10;
-		$[23] = t8;
-		$[24] = t11;
-	} else t11 = $[24];
-	let t12;
-	if ($[25] !== t11 || $[26] !== t7) {
-		t12 = /* @__PURE__ */ jsx(FloatingToolbar, {
+		$[24] = linkPopoverOpen;
+		$[25] = linkTarget;
+		$[26] = selectedText;
+		$[27] = sendTextLink;
+		$[28] = unlinkText;
+		$[29] = t15;
+	} else t15 = $[29];
+	let t16;
+	if ($[30] !== t13 || $[31] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(ButtonGroup, { children: [t13, t15] });
+		$[30] = t13;
+		$[31] = t15;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== t12 || $[34] !== t16) {
+		t17 = /* @__PURE__ */ jsx(FloatingToolbar, {
+			"data-canvas-overlay-control": true,
 			onMouseDown: handleToolbarMouseDown,
-			className: t7,
-			children: t11
+			className: "pointer-events-auto gap-2 transition-none",
+			style: t12,
+			children: t16
 		});
-		$[25] = t11;
-		$[26] = t7;
-		$[27] = t12;
-	} else t12 = $[27];
-	return t12;
+		$[33] = t12;
+		$[34] = t16;
+		$[35] = t17;
+	} else t17 = $[35];
+	return t17;
 };
-function _temp(state) {
-	return state.context.iframeElement;
-}
-function _temp2(event_0) {
+function _temp(event_0) {
 	const target_0 = event_0.target;
 	if (!(target_0 instanceof HTMLElement)) {
 		event_0.preventDefault();
 		return;
 	}
-	if (target_0.closest("input, select, textarea, button, [role='combobox']")) return;
+	if (target_0.closest("input, select, textarea, [role='combobox']")) return;
 	event_0.preventDefault();
 }