camox 0.3.0 → 0.4.0

package/dist/components/AuthGate.js

@@ -1,6 +1,7 @@
 import { useAuthState } from "../lib/auth.js";
 //#region src/components/AuthGate.tsx
-function AuthGate({ authenticated, unauthenticated }) {
+function AuthGate(t0) {
+	const { authenticated, unauthenticated } = t0;
 	const { isAuthenticated, isLoading } = useAuthState();
 	if (isLoading) return unauthenticated;
 	return isAuthenticated ? authenticated : unauthenticated;

package/dist/core/components/AddBlockControlBar.js

@@ -1,65 +1,138 @@
 import { OVERLAY_COLORS } from "../../features/preview/overlayConstants.js";
+import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/core/components/AddBlockControlBar.tsx
-var AddBlockControlBar = ({ position, hidden, onClick, onMouseLeave }) => {
+var AddBlockControlBar = (t0) => {
+	const $ = c(25);
+	const { position, hidden, onClick, onMouseLeave } = t0;
 	const [isExpanded, setIsExpanded] = React.useState(false);
-	return /* @__PURE__ */ jsx("div", {
-		style: {
+	const t1 = position === "top" ? 0 : void 0;
+	const t2 = position === "bottom" ? 0 : void 0;
+	const t3 = position === "top" ? "translateX(-50%) translateY(-50%)" : "translateX(-50%) translateY(50%)";
+	const t4 = hidden ? 0 : 1;
+	const t5 = hidden ? "none" : "auto";
+	let t6;
+	if ($[0] !== t1 || $[1] !== t2 || $[2] !== t3 || $[3] !== t4 || $[4] !== t5) {
+		t6 = {
 			position: "absolute",
-			top: position === "top" ? 0 : void 0,
-			bottom: position === "bottom" ? 0 : void 0,
+			top: t1,
+			bottom: t2,
 			left: "50%",
 			right: 0,
 			height: "36px",
-			transform: position === "top" ? "translateX(-50%) translateY(-50%)" : "translateX(-50%) translateY(50%)",
+			transform: t3,
 			width: "fit-content",
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
 			zIndex: 11,
-			opacity: hidden ? 0 : 1,
-			pointerEvents: hidden ? "none" : "auto",
+			opacity: t4,
+			pointerEvents: t5,
 			transition: "opacity 150ms ease"
-		},
-		onMouseLeave,
-		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				width: "120px",
-				height: "36px",
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center"
-			},
-			onMouseEnter: () => setIsExpanded(true),
-			onMouseLeave: () => setIsExpanded(false),
+		};
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+		$[3] = t4;
+		$[4] = t5;
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	let t8;
+	let t9;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = {
+			width: "120px",
+			height: "36px",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		};
+		t8 = () => setIsExpanded(true);
+		t9 = () => setIsExpanded(false);
+		$[6] = t7;
+		$[7] = t8;
+		$[8] = t9;
+	} else {
+		t7 = $[6];
+		t8 = $[7];
+		t9 = $[8];
+	}
+	const t10 = isExpanded ? "4px" : "0px";
+	const t11 = isExpanded ? "4px 8px" : "0px";
+	const t12 = isExpanded ? "auto" : "20px";
+	const t13 = isExpanded ? "auto" : "20px";
+	let t14;
+	if ($[9] !== t10 || $[10] !== t11 || $[11] !== t12 || $[12] !== t13) {
+		t14 = {
+			display: "flex",
+			alignItems: "center",
+			gap: t10,
+			padding: t11,
+			width: t12,
+			height: t13,
+			justifyContent: "center",
+			backgroundColor: OVERLAY_COLORS.selected,
+			color: "white",
+			border: "none",
+			borderRadius: "9999px",
+			fontSize: "12px",
+			fontWeight: 500,
+			cursor: "pointer",
+			whiteSpace: "nowrap",
+			transition: "all 150ms ease"
+		};
+		$[9] = t10;
+		$[10] = t11;
+		$[11] = t12;
+		$[12] = t13;
+		$[13] = t14;
+	} else t14 = $[13];
+	let t15;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx("span", {
+			style: { lineHeight: 1 },
+			children: "+"
+		});
+		$[14] = t15;
+	} else t15 = $[14];
+	let t16;
+	if ($[15] !== isExpanded) {
+		t16 = isExpanded && /* @__PURE__ */ jsx("span", { children: "Add block" });
+		$[15] = isExpanded;
+		$[16] = t16;
+	} else t16 = $[16];
+	let t17;
+	if ($[17] !== onClick || $[18] !== t14 || $[19] !== t16) {
+		t17 = /* @__PURE__ */ jsx("div", {
+			style: t7,
+			onMouseEnter: t8,
+			onMouseLeave: t9,
 			children: /* @__PURE__ */ jsxs("button", {
-				style: {
-					display: "flex",
-					alignItems: "center",
-					gap: isExpanded ? "4px" : "0px",
-					padding: isExpanded ? "4px 8px" : "0px",
-					width: isExpanded ? "auto" : "20px",
-					height: isExpanded ? "auto" : "20px",
-					justifyContent: "center",
-					backgroundColor: OVERLAY_COLORS.selected,
-					color: "white",
-					border: "none",
-					borderRadius: "9999px",
-					fontSize: "12px",
-					fontWeight: 500,
-					cursor: "pointer",
-					whiteSpace: "nowrap",
-					transition: "all 150ms ease"
-				},
+				style: t14,
 				onClick,
-				children: [/* @__PURE__ */ jsx("span", {
-					style: { lineHeight: 1 },
-					children: "+"
-				}), isExpanded && /* @__PURE__ */ jsx("span", { children: "Add block" })]
+				children: [t15, t16]
 			})
-		})
-	});
+		});
+		$[17] = onClick;
+		$[18] = t14;
+		$[19] = t16;
+		$[20] = t17;
+	} else t17 = $[20];
+	let t18;
+	if ($[21] !== onMouseLeave || $[22] !== t17 || $[23] !== t6) {
+		t18 = /* @__PURE__ */ jsx("div", {
+			style: t6,
+			onMouseLeave,
+			children: t17
+		});
+		$[21] = onMouseLeave;
+		$[22] = t17;
+		$[23] = t6;
+		$[24] = t18;
+	} else t18 = $[24];
+	return t18;
 };
 //#endregion
 export { AddBlockControlBar };

package/dist/core/components/lexical/InlineContentEditable.js

@@ -1,3 +1,4 @@
+import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
@@ -7,25 +8,44 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 * so it can be nested inside phrasing elements like <h1>, <p>, etc.
 */
 var InlineContentEditable = React.forwardRef(function InlineContentEditable(props, ref) {
+	const $ = c(8);
 	const [editor] = useLexicalComposerContext();
-	const handleRef = React.useCallback((el) => {
-		if (el?.ownerDocument?.defaultView) editor.setRootElement(el);
-		else editor.setRootElement(null);
-	}, [editor]);
-	const mergedRef = React.useMemo(() => {
-		return (el) => {
-			handleRef(el);
-			if (typeof ref === "function") ref(el);
-			else if (ref) ref.current = el;
+	let t0;
+	if ($[0] !== editor) {
+		t0 = (el) => {
+			if (el?.ownerDocument?.defaultView) editor.setRootElement(el);
+			else editor.setRootElement(null);
 		};
-	}, [handleRef, ref]);
-	return /* @__PURE__ */ jsx("span", {
-		...props,
-		contentEditable: true,
-		ref: mergedRef,
-		role: "textbox",
-		spellCheck: true
-	});
+		$[0] = editor;
+		$[1] = t0;
+	} else t0 = $[1];
+	const handleRef = t0;
+	let t1;
+	if ($[2] !== handleRef || $[3] !== ref) {
+		t1 = (el_0) => {
+			handleRef(el_0);
+			if (typeof ref === "function") ref(el_0);
+			else if (ref) ref.current = el_0;
+		};
+		$[2] = handleRef;
+		$[3] = ref;
+		$[4] = t1;
+	} else t1 = $[4];
+	const mergedRef = t1;
+	let t2;
+	if ($[5] !== mergedRef || $[6] !== props) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			...props,
+			contentEditable: true,
+			ref: mergedRef,
+			role: "textbox",
+			spellCheck: true
+		});
+		$[5] = mergedRef;
+		$[6] = props;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 });
 //#endregion
 export { InlineContentEditable };

package/dist/core/components/lexical/InlineLexicalEditor.js

@@ -2,6 +2,7 @@ import { lexicalStateToMarkdown } from "../../lib/lexicalState.js";
 import { createEditorConfig, normalizeLexicalState } from "./editorConfig.js";
 import { InlineContentEditable } from "./InlineContentEditable.js";
 import { SelectionBroadcaster } from "./SelectionBroadcaster.js";
+import { c } from "react/compiler-runtime";
 import { useFrame } from "@camox/ui/frame";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -11,11 +12,15 @@ import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { COMMAND_PRIORITY_LOW, KEY_ESCAPE_COMMAND } from "lexical";
 //#region src/core/components/lexical/InlineLexicalEditor.tsx
-function ExternalStateSync({ externalState }) {
+function ExternalStateSync(t0) {
+	const $ = c(7);
+	const { externalState } = t0;
 	const [editor] = useLexicalComposerContext();
 	const isFocusedRef = React.useRef(false);
-	React.useEffect(() => {
-		return editor.registerRootListener((root) => {
+	let t1;
+	let t2;
+	if ($[0] !== editor) {
+		t1 = () => editor.registerRootListener((root) => {
 			if (!root) return;
 			const handleFocus = () => {
 				isFocusedRef.current = true;
@@ -30,31 +35,67 @@ function ExternalStateSync({ externalState }) {
 				root.removeEventListener("blur", handleBlur);
 			};
 		});
-	}, [editor]);
-	React.useEffect(() => {
-		if (isFocusedRef.current) return;
-		try {
-			const normalized = normalizeLexicalState(externalState);
-			const newState = editor.parseEditorState(normalized);
-			editor.setEditorState(newState);
-		} catch {}
-	}, [editor, externalState]);
+		t2 = [editor];
+		$[0] = editor;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	React.useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[3] !== editor || $[4] !== externalState) {
+		t3 = () => {
+			if (isFocusedRef.current) return;
+			try {
+				const normalized = normalizeLexicalState(externalState);
+				const newState = editor.parseEditorState(normalized);
+				editor.setEditorState(newState);
+			} catch {}
+		};
+		t4 = [editor, externalState];
+		$[3] = editor;
+		$[4] = externalState;
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	React.useEffect(t3, t4);
 	return null;
 }
 function EscapeHandler() {
+	const $ = c(3);
 	const [editor] = useLexicalComposerContext();
-	React.useEffect(() => {
-		return editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
+	let t0;
+	let t1;
+	if ($[0] !== editor) {
+		t0 = () => editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
 			editor.getRootElement()?.blur();
 			return true;
 		}, COMMAND_PRIORITY_LOW);
-	}, [editor]);
+		t1 = [editor];
+		$[0] = editor;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	React.useEffect(t0, t1);
 	return null;
 }
-function FocusBlurHandler({ onFocus, onBlur }) {
+function FocusBlurHandler(t0) {
+	const $ = c(5);
+	const { onFocus, onBlur } = t0;
 	const [editor] = useLexicalComposerContext();
-	React.useEffect(() => {
-		return editor.registerRootListener((root) => {
+	let t1;
+	let t2;
+	if ($[0] !== editor || $[1] !== onBlur || $[2] !== onFocus) {
+		t1 = () => editor.registerRootListener((root) => {
 			if (!root) return;
 			root.addEventListener("focus", onFocus);
 			root.addEventListener("blur", onBlur);
@@ -63,11 +104,21 @@ function FocusBlurHandler({ onFocus, onBlur }) {
 				root.removeEventListener("blur", onBlur);
 			};
 		});
-	}, [
-		editor,
-		onFocus,
-		onBlur
-	]);
+		t2 = [
+			editor,
+			onFocus,
+			onBlur
+		];
+		$[0] = editor;
+		$[1] = onBlur;
+		$[2] = onFocus;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	React.useEffect(t1, t2);
 	return null;
 }
 function InlineLexicalEditor({ initialState, externalState, onChange, onFocus, onBlur }) {
@@ -113,8 +164,16 @@ function InlineLexicalEditor({ initialState, externalState, onChange, onFocus, o
 		]
 	});
 }
-function LexicalErrorBoundary({ children }) {
-	return /* @__PURE__ */ jsx(Fragment, { children });
+function LexicalErrorBoundary(t0) {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx(Fragment, { children });
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
 }
 //#endregion
 export { InlineLexicalEditor };

package/dist/core/components/lexical/SelectionBroadcaster.js

@@ -1,61 +1,98 @@
 import { isOverlayMessage, postOverlayMessage } from "../../../features/preview/overlayMessages.js";
 import { TEXT_MODIFIERS } from "../../lib/modifiers.js";
+import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND } from "lexical";
 //#region src/core/components/lexical/SelectionBroadcaster.tsx
-function SelectionBroadcaster({ targetWindow }) {
+function SelectionBroadcaster(t0) {
+	const $ = c(12);
+	const { targetWindow } = t0;
 	const [editor] = useLexicalComposerContext();
-	const broadcastSelection = React.useCallback(() => {
-		const nativeSelection = targetWindow.getSelection();
-		if (!(nativeSelection != null && nativeSelection.rangeCount > 0 && !nativeSelection.isCollapsed)) {
+	let t1;
+	if ($[0] !== editor || $[1] !== targetWindow) {
+		t1 = () => {
+			const nativeSelection = targetWindow.getSelection();
+			if (!(nativeSelection != null && nativeSelection.rangeCount > 0 && !nativeSelection.isCollapsed)) {
+				postOverlayMessage({
+					type: "CAMOX_TEXT_SELECTION_STATE",
+					hasSelection: false,
+					activeFormats: 0
+				});
+				return;
+			}
+			let format = 0;
+			editor.getEditorState().read(() => {
+				const selection = $getSelection();
+				if (!$isRangeSelection(selection)) return;
+				for (const modifier of Object.values(TEXT_MODIFIERS)) {
+					const key = modifier === TEXT_MODIFIERS.bold ? "bold" : "italic";
+					if (selection.hasFormat(key)) format = format | modifier.formatFlag;
+				}
+			});
 			postOverlayMessage({
 				type: "CAMOX_TEXT_SELECTION_STATE",
-				hasSelection: false,
-				activeFormats: 0
+				hasSelection: true,
+				activeFormats: format
 			});
-			return;
-		}
-		let format = 0;
-		editor.getEditorState().read(() => {
-			const selection = $getSelection();
-			if (!$isRangeSelection(selection)) return;
-			for (const modifier of Object.values(TEXT_MODIFIERS)) {
-				const key = modifier === TEXT_MODIFIERS.bold ? "bold" : "italic";
-				if (selection.hasFormat(key)) format |= modifier.formatFlag;
-			}
-		});
-		postOverlayMessage({
-			type: "CAMOX_TEXT_SELECTION_STATE",
-			hasSelection: true,
-			activeFormats: format
-		});
-	}, [editor, targetWindow]);
-	React.useEffect(() => {
-		const doc = targetWindow.document;
-		const handleSelectionChange = () => broadcastSelection();
-		doc.addEventListener("selectionchange", handleSelectionChange);
-		return () => doc.removeEventListener("selectionchange", handleSelectionChange);
-	}, [targetWindow, broadcastSelection]);
-	React.useEffect(() => {
-		const handleMessage = (event) => {
-			const data = event.data;
-			if (!isOverlayMessage(data) || data.type !== "CAMOX_FORMAT_TEXT") return;
-			const root = editor.getRootElement();
-			const nativeSelection = targetWindow.getSelection();
-			if (!root || !nativeSelection || nativeSelection.rangeCount === 0) return;
-			if (!root.contains(nativeSelection.anchorNode)) return;
-			root.focus();
-			editor.dispatchCommand(FORMAT_TEXT_COMMAND, data.formatKey);
-			setTimeout(broadcastSelection, 10);
 		};
-		targetWindow.addEventListener("message", handleMessage);
-		return () => targetWindow.removeEventListener("message", handleMessage);
-	}, [
-		editor,
-		targetWindow,
-		broadcastSelection
-	]);
+		$[0] = editor;
+		$[1] = targetWindow;
+		$[2] = t1;
+	} else t1 = $[2];
+	const broadcastSelection = t1;
+	let t2;
+	let t3;
+	if ($[3] !== broadcastSelection || $[4] !== targetWindow) {
+		t2 = () => {
+			const doc = targetWindow.document;
+			const handleSelectionChange = () => broadcastSelection();
+			doc.addEventListener("selectionchange", handleSelectionChange);
+			return () => doc.removeEventListener("selectionchange", handleSelectionChange);
+		};
+		t3 = [targetWindow, broadcastSelection];
+		$[3] = broadcastSelection;
+		$[4] = targetWindow;
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		t2 = $[5];
+		t3 = $[6];
+	}
+	React.useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[7] !== broadcastSelection || $[8] !== editor || $[9] !== targetWindow) {
+		t4 = () => {
+			const handleMessage = (event) => {
+				const data = event.data;
+				if (!isOverlayMessage(data) || data.type !== "CAMOX_FORMAT_TEXT") return;
+				const root = editor.getRootElement();
+				const nativeSelection_0 = targetWindow.getSelection();
+				if (!root || !nativeSelection_0 || nativeSelection_0.rangeCount === 0) return;
+				if (!root.contains(nativeSelection_0.anchorNode)) return;
+				root.focus();
+				editor.dispatchCommand(FORMAT_TEXT_COMMAND, data.formatKey);
+				setTimeout(broadcastSelection, 10);
+			};
+			targetWindow.addEventListener("message", handleMessage);
+			return () => targetWindow.removeEventListener("message", handleMessage);
+		};
+		t5 = [
+			editor,
+			targetWindow,
+			broadcastSelection
+		];
+		$[7] = broadcastSelection;
+		$[8] = editor;
+		$[9] = targetWindow;
+		$[10] = t4;
+		$[11] = t5;
+	} else {
+		t4 = $[10];
+		t5 = $[11];
+	}
+	React.useEffect(t4, t5);
 	return null;
 }
 //#endregion

package/dist/core/components/lexical/SidebarLexicalEditor.js

@@ -1,6 +1,7 @@
 import { lexicalStateToMarkdown } from "../../lib/lexicalState.js";
 import { createEditorConfig, normalizeLexicalState } from "./editorConfig.js";
 import { INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, cn } from "../../../lib/utils.js";
+import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
@@ -9,11 +10,15 @@ import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 //#region src/core/components/lexical/SidebarLexicalEditor.tsx
-function ExternalStateSync({ value, isSyncingRef }) {
+function ExternalStateSync(t0) {
+	const $ = c(8);
+	const { value, isSyncingRef } = t0;
 	const [editor] = useLexicalComposerContext();
 	const isFocusedRef = React.useRef(false);
-	React.useEffect(() => {
-		return editor.registerRootListener((root) => {
+	let t1;
+	let t2;
+	if ($[0] !== editor) {
+		t1 = () => editor.registerRootListener((root) => {
 			if (!root) return;
 			const handleFocus = () => {
 				isFocusedRef.current = true;
@@ -28,20 +33,42 @@ function ExternalStateSync({ value, isSyncingRef }) {
 				root.removeEventListener("blur", handleBlur);
 			};
 		});
-	}, [editor]);
-	React.useEffect(() => {
-		if (isFocusedRef.current) return;
-		try {
-			const normalized = normalizeLexicalState(value);
-			const newState = editor.parseEditorState(normalized);
-			isSyncingRef.current = true;
-			editor.setEditorState(newState);
-		} catch {}
-	}, [
-		editor,
-		value,
-		isSyncingRef
-	]);
+		t2 = [editor];
+		$[0] = editor;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	React.useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[3] !== editor || $[4] !== isSyncingRef || $[5] !== value) {
+		t3 = () => {
+			if (isFocusedRef.current) return;
+			try {
+				const normalized = normalizeLexicalState(value);
+				const newState = editor.parseEditorState(normalized);
+				isSyncingRef.current = true;
+				editor.setEditorState(newState);
+			} catch {}
+		};
+		t4 = [
+			editor,
+			value,
+			isSyncingRef
+		];
+		$[3] = editor;
+		$[4] = isSyncingRef;
+		$[5] = value;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+	}
+	React.useEffect(t3, t4);
 	return null;
 }
 function SidebarLexicalEditor({ value, onChange, onFocus, onBlur }) {
@@ -84,8 +111,16 @@ function SidebarLexicalEditor({ value, onChange, onFocus, onBlur }) {
 		]
 	});
 }
-function LexicalErrorBoundary({ children }) {
-	return /* @__PURE__ */ jsx(Fragment, { children });
+function LexicalErrorBoundary(t0) {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx(Fragment, { children });
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
 }
 //#endregion
 export { SidebarLexicalEditor };